/* ==========================================================================
   Easy Currency — Admin Live Preview (Display Side Switcher tab)
   ----------------------------------------------------------------------
   This stylesheet is loaded ONLY in the WP admin (registered in
   plugin-scripts.php). It paints the floating live-preview card on the
   right side of the settings page and replicates the public-facing
   template styles (eccw-sticky-template-1/2/3, position-left/right) so
   the preview matches what end users see — only scoped to
   #eccw-side-switcher-preview so nothing on the rest of admin is touched.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Preview card — sits inside the Display Switcher section, anchored to the
   right side of that section so the user can see the result while editing
   the toggles in that same panel. Not sticky/floating.
   -------------------------------------------------------------------------- */
.eccw-section.eccw-sticky-elements-display {
  position: relative;
}

.eccw-side-switcher-preview-card {
  position: absolute;
  top: 20px;
  right: 0;
  width: 240px;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.08);
}

.eccw-side-switcher-preview-card .eccw-preview-header {
  margin-bottom: 8px;
}
.eccw-side-switcher-preview-card .eccw-preview-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  color: #64748b;
}
.eccw-side-switcher-preview-card .eccw-preview-subtitle {
  display: none;
}

/* The viewport that simulates the page where the side-switcher would sit. */
.eccw-side-switcher-preview-card .eccw-preview-stage {
  position: relative;
  height: 200px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  background: #f9fafb;
  overflow: hidden;
}

/* Mock backdrop is just decorative — keep it minimal. */
.eccw-side-switcher-preview-card .eccw-preview-mock-content {
  display: none;
}

/* Reserve space on the right of the Display Switcher section so the
   preview card never overlaps the field controls. */
@media (min-width: 1281px) {
  form#mainform .eccw-section.eccw-sticky-elements-display {
    padding-right: 280px;
  }
}

@media (max-width: 1280px) {
  .eccw-side-switcher-preview-card {
    position: static;
    width: 100%;
    max-width: 360px;
    margin-bottom: 22px;
  }
}

/* --------------------------------------------------------------------------
   The switcher itself — replicate the public.css template styles, but scoped
   to the preview ID so they cannot leak elsewhere in admin. The frontend
   uses position:fixed; here we override to position:absolute so the switcher
   stays inside the preview stage.
   -------------------------------------------------------------------------- */
#eccw-side-switcher-preview {
  position: absolute;
  z-index: 5;
  top: 50%;
  transform: translateY(-50%);
  transition: top 0.15s ease, left 0.15s ease, right 0.15s ease;
}
#eccw-side-switcher-preview[data-show-hide="no"],
#eccw-side-switcher-preview[data-show-hide="0"] {
  display: none;
}
#eccw-side-switcher-preview form {
  margin: 0;
  cursor: auto;
}
#eccw-side-switcher-preview .easy-currency-switcher-select {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#eccw-side-switcher-preview .easy-currency-switcher-select.list li {
  list-style: none;
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  padding: 6px 6px 6px 20px;
  transform: translateX(-8px);
  background: #EFEFEF;
  color: #000000;
  border-radius: 0 20px 20px 0;
  transition: all 0.3s;
}
#eccw-side-switcher-preview .easy-currency-switcher-select.list li img {
  height: 32px;
  width: 32px;
  max-width: 100%;
  border-radius: 50%;
  order: 3;
}
#eccw-side-switcher-preview .easy-currency-switcher-select.list li:hover {
  transform: translateX(0);
  background: #000;
  color: #000;
}
#eccw-side-switcher-preview .easy-currency-switcher-select.list li span {
  font-size: 14px;
  font-weight: 500;
  transition: all 0.3s;
}
#eccw-side-switcher-preview .easy-currency-switcher-select.list li.selected {
  transform: translateX(0);
  background: #000;
  color: #000;
}

/* Position-right (default frontend orientation) */
#eccw-side-switcher-preview.eccw-position-right .easy-currency-switcher-select.list li {
  padding: 6px 20px 6px 12px;
  transform: translateX(8px);
  background: #EFEFEF;
  border-radius: 20px 0 0 20px;
  justify-content: flex-start;
}
#eccw-side-switcher-preview.eccw-position-right .easy-currency-switcher-select.list li img {
  order: unset;
}
#eccw-side-switcher-preview.eccw-position-right .easy-currency-switcher-select.list li span {
  color: #000;
}
#eccw-side-switcher-preview.eccw-position-right .easy-currency-switcher-select.list li:hover {
  transform: translateX(0);
  background: #000;
}
#eccw-side-switcher-preview.eccw-position-right .easy-currency-switcher-select.list li:hover span {
  color: #FFFFFF;
}
#eccw-side-switcher-preview.eccw-position-right .easy-currency-switcher-select.list li.selected {
  transform: translateX(0);
  background: #000;
}
#eccw-side-switcher-preview.eccw-position-right .easy-currency-switcher-select.list li.selected span {
  color: #000;
}

/* --------- Template 2 (right) --------- */
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list {
  transform: translateX(60.6%);
  transition: all 0.3s;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list:hover {
  transform: translateX(0);
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list li {
  padding: 0;
  background: #EAEAEA;
  transform: translateX(0);
  border-radius: 0;
  transition: all 0.3s;
  justify-content: flex-start;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list li:hover {
  transform: translateX(0);
  background: #FFEEEF;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list li:hover .eccw-side-country-code {
  background: #F32837;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list li img {
  order: unset;
  height: auto;
  border-radius: 0;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list li span {
  color: #000;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list li .eccw-side-country-code {
  background: #000000;
  color: #FFFFFF;
  width: 45px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  order: -1;
  transition: all 0.3s;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list li.selected {
  background: #FFEEEF;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-right .easy-currency-switcher-select.list li.selected .eccw-side-country-code {
  background: #F32837;
}

/* --------- Template 2 (left) --------- */
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list {
  transform: translateX(-60.6%);
  transition: all 0.3s;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list:hover {
  transform: translateX(0);
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list li {
  padding: 0;
  background: #EAEAEA;
  transform: translateX(0);
  border-radius: 0;
  transition: all 0.3s;
  justify-content: flex-end;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list li img {
  order: 2;
  height: auto;
  border-radius: 0;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list li span {
  color: #000;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list li .eccw-side-country-code {
  background: #000000;
  color: #FFFFFF;
  width: 45px;
  height: 40px;
  line-height: 40px;
  text-align: center;
  order: 3;
  transition: all 0.3s;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list li:hover {
  background: #FFEEEF;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list li:hover .eccw-side-country-code {
  background: #F32837;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list li.selected {
  background: #FFEEEF;
}
#eccw-side-switcher-preview.eccw-sticky-template-2.eccw-position-left .easy-currency-switcher-select.list li.selected .eccw-side-country-code {
  background: #F32837;
}

/* --------- Template 3 (both sides) --------- */
#eccw-side-switcher-preview.eccw-sticky-template-3 .easy-currency-switcher-select.list {
  transform: translateX(0);
  transition: all 0.3s;
}
#eccw-side-switcher-preview.eccw-sticky-template-3 .easy-currency-switcher-select.list li {
  padding: 0 10px;
  background: #EAEAEA;
  transform: translateX(0);
  border-radius: 0;
  transition: all 0.3s;
}
#eccw-side-switcher-preview.eccw-sticky-template-3.eccw-position-right .easy-currency-switcher-select.list li {
  justify-content: flex-start;
}
#eccw-side-switcher-preview.eccw-sticky-template-3.eccw-position-left .easy-currency-switcher-select.list li {
  justify-content: flex-end;
}
#eccw-side-switcher-preview.eccw-sticky-template-3 .easy-currency-switcher-select.list li:hover {
  transform: translateX(0);
}
#eccw-side-switcher-preview.eccw-sticky-template-3 .easy-currency-switcher-select.list li img {
  order: unset;
  height: auto;
  border-radius: 0;
}
#eccw-side-switcher-preview.eccw-sticky-template-3.eccw-position-left .easy-currency-switcher-select.list li img {
  order: 2;
}
#eccw-side-switcher-preview.eccw-sticky-template-3 .easy-currency-switcher-select.list li span {
  color: #000;
}
#eccw-side-switcher-preview.eccw-sticky-template-3 .easy-currency-switcher-select.list li .eccw-side-country-code {
  height: 40px;
  line-height: 40px;
  text-align: center;
  transition: all 0.3s;
}
#eccw-side-switcher-preview.eccw-sticky-template-3.eccw-position-left .easy-currency-switcher-select.list li .eccw-side-country-code {
  order: 1;
}
#eccw-side-switcher-preview.eccw-sticky-template-3 .easy-currency-switcher-select.list li.selected {
  background: #FFEEEF;
}