/* =============================================
   ARDYSS BACK OFFICE — Custom CSS over Bootstrap 5
   Colors & Typography: UpPromote-inspired
   ============================================= */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600&display=swap');

:root {
  --ardyss-pink:        #d63384;
  --ardyss-pink-dark:   #b02a6e;
  --ardyss-pink-light:  #fce4f0;
  --ardyss-pink-mid:    rgba(214,51,132,0.15);
  --ardyss-sidebar:     #c0185e;
  --ardyss-sidebar-dark:#a01050;
  --ardyss-green:       #198754;
  --ardyss-amber:       #fd7e14;
  --ardyss-gray-bg:     #f8f9fa;
  --ardyss-border:      #dee2e6;
  --sidebar-width:      240px;
  --topbar-height:      58px;
}

/* ── GLOBAL ── */
body {
  font-family: 'Poppins', sans-serif;
  background-color: var(--ardyss-gray-bg);
  color: #212529;
}

/* ── BOOTSTRAP COLOR OVERRIDES ── */
.btn-primary {
  background-color: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
  background-color: var(--ardyss-pink-dark) !important;
  border-color: var(--ardyss-pink-dark) !important;
}
.btn-outline-primary {
  color: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
}
.btn-outline-primary:hover {
  background-color: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
}
.text-primary { color: var(--ardyss-pink) !important; }
.bg-primary   { background-color: var(--ardyss-pink) !important; }
.border-primary { border-color: var(--ardyss-pink) !important; }
.form-control:focus, .form-select:focus {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 0.2rem rgba(214,51,132,0.2);
}
.nav-pills .nav-link.active { background-color: var(--ardyss-pink); }
.progress-bar { background-color: var(--ardyss-pink); }
.badge.bg-primary { background-color: var(--ardyss-pink) !important; }

/* ── SIDEBAR ── */
.ardyss-sidebar {
  width: var(--sidebar-width);
  background-color: var(--ardyss-sidebar);
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}
.ardyss-sidebar .sidebar-header {
  padding: 18px 20px 14px;
  border-bottom: 1px solid rgba(255,255,255,0.15);
}
.ardyss-sidebar .back-link {
  display: flex;
  align-items: center;
  gap: 6px;
  color: rgba(255,255,255,0.75);
  font-size: 12px;
  text-decoration: none;
  margin-bottom: 14px;
  transition: color 0.15s;
}
.ardyss-sidebar .back-link:hover { color: #fff; }
.ardyss-sidebar .user-card {
  background: #fff;
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ardyss-sidebar .user-avatar {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink);
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ardyss-sidebar .user-name {
  font-size: 12px;
  font-weight: 600;
  color: #212529;
  line-height: 1.3;
}
.ardyss-sidebar .user-status {
  font-size: 10px;
  color: var(--ardyss-green);
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 2px;
}
.ardyss-sidebar .status-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ardyss-green);
}
.ardyss-sidebar .sidebar-nav {
  flex: 1;
  padding: 10px 0;
  overflow-y: auto;
}
.ardyss-sidebar .sidebar-nav::-webkit-scrollbar { width: 0; }
.ardyss-sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 20px;
  color: rgba(255,255,255,0.8);
  font-size: 13px;
  font-weight: 400;
  border-left: 3px solid transparent;
  border-radius: 0;
  transition: all 0.15s;
}
.ardyss-sidebar .nav-link:hover {
  background: rgba(255,255,255,0.1);
  color: #fff;
}
.ardyss-sidebar .nav-link.active {
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-weight: 500;
  border-left-color: #fff;
}
.ardyss-sidebar .nav-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  opacity: 0.85;
}
.ardyss-sidebar .nav-link.active .nav-icon { opacity: 1; }
.ardyss-sidebar .sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.ardyss-sidebar .logout-link {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,0.7);
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s;
}
.ardyss-sidebar .logout-link:hover { color: #fff; }

/* ── TOPBAR ── */
.ardyss-topbar {
  min-height: var(--topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--ardyss-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 28px;
  position: sticky;
  top: 0;
  z-index: 50;
}
.ardyss-topbar .topbar-title {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}
.ardyss-topbar .topbar-pill {
  font-size: 12px;
  color: #6c757d;
  background: #f1f3f5;
  padding: 5px 12px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Right-side actions wrapper — flex-wrap on narrow viewports */
.ardyss-topbar .topbar-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: nowrap;
  flex-shrink: 0;
  min-width: 0;        /* allow ellipsis inside child pills */
}
.ardyss-topbar .topbar-actions > * {
  flex-shrink: 0;      /* prevent any child (select, pill, WA) from collapsing */
}
.ardyss-topbar .topbar-title {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
/* Belt-and-suspenders: never let topbar content cause horizontal overflow */
.ardyss-topbar { overflow: visible; }
.ardyss-main   { min-width: 0; overflow-x: clip; }

/* ── WhatsApp Quick Chat Button (siempre ícono solo) ── */
.topbar-wa {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 7px;
  background: linear-gradient(135deg, #25d366 0%, #128c7e 100%);
  color: #fff !important;
  border-radius: 50%;
  text-decoration: none;
  box-shadow: 0 2px 8px rgba(37,211,102,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  flex-shrink: 0;
}
.topbar-wa:hover {
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(37,211,102,0.4);
}
.topbar-wa:active { transform: translateY(0); }
.topbar-wa svg {
  width: 20px;
  height: 20px;
  fill: #fff;
  flex-shrink: 0;
  display: block;
}
/* Por si queda algún span en el markup, lo ocultamos */
.topbar-wa-label { display: none; }

/* ── País del distribuidor ── */
.topbar-country {
  display: inline-flex;
  align-items: center;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  background: #f1f3f5;
  padding: 5px 10px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Pulse ring to draw attention */
.topbar-wa::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  border: 2px solid #25d366;
  opacity: 0;
  animation: wa-pulse 2.4s ease-out infinite;
  pointer-events: none;
}
@keyframes wa-pulse {
  0%   { opacity: 0.6; transform: scale(1);    }
  70%  { opacity: 0;   transform: scale(1.18); }
  100% { opacity: 0;   transform: scale(1.18); }
}

/* Tooltip on hover */
.topbar-wa::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #212529;
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  padding: 6px 10px;
  border-radius: 6px;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.15s, transform 0.15s;
  z-index: 50;
}
.topbar-wa:hover::after {
  opacity: 1;
  transform: translateY(0);
}

@media (max-width: 380px) {
  /* Último recurso: ocultar el país si todo queda muy apretado */
  .topbar-country { display: none; }
}

/* ── Language Switcher ── */
.lang-switch {
  position: relative;
  display: inline-block;
}
.lang-switch-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 8px;
  background: #f1f3f5;
  border: 1px solid transparent;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
  font-family: inherit;
}
.lang-switch-btn:hover {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
}
.lang-switch.open .lang-switch-btn {
  background: var(--ardyss-pink-light);
  border-color: rgba(214,51,132,0.3);
  color: var(--ardyss-pink-dark);
}
.lang-flag {
  width: 18px;
  height: 13px;
  border-radius: 2px;
  flex-shrink: 0;
  background-size: cover;
  background-position: center;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
/* US flag — CSS-only stripes + canton */
.lang-flag.flag-us {
  background: linear-gradient(180deg,
    #b22234 0%, #b22234 7.7%, #fff 7.7%, #fff 15.4%,
    #b22234 15.4%, #b22234 23.1%, #fff 23.1%, #fff 30.8%,
    #b22234 30.8%, #b22234 38.5%, #fff 38.5%, #fff 46.2%,
    #b22234 46.2%, #b22234 53.9%, #fff 53.9%, #fff 61.6%,
    #b22234 61.6%, #b22234 69.3%, #fff 69.3%, #fff 77%,
    #b22234 77%, #b22234 84.7%, #fff 84.7%, #fff 92.4%,
    #b22234 92.4%, #b22234 100%);
}
.lang-flag.flag-us::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 45%;
  height: 53.9%;
  background: #3c3b6e;
}
/* Mexico flag — vertical green / white / red */
.lang-flag.flag-mx {
  background: linear-gradient(90deg,
    #006847 0%, #006847 33.33%,
    #fff 33.33%, #fff 66.66%,
    #ce1126 66.66%, #ce1126 100%);
}
.lang-flag.flag-mx::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: #006847;
  transform: translate(-50%, -50%);
  opacity: 0.7;
}

.lang-switch-arrow {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
  color: #adb5bd;
}
.lang-switch.open .lang-switch-arrow {
  transform: rotate(180deg);
  color: var(--ardyss-pink);
}

/* Dropdown menu */
.lang-switch-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 170px;
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 6px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.10);
  opacity: 0;
  transform: translateY(-6px) scale(0.96);
  pointer-events: none;
  transition: opacity 0.15s ease, transform 0.15s ease;
  z-index: 200;
}
.lang-switch.open .lang-switch-menu {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: auto;
}
.lang-switch-menu-header {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #adb5bd;
  font-weight: 600;
  padding: 8px 10px 6px;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 10px;
  background: none;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #212529;
  text-align: left;
  cursor: pointer;
  transition: background 0.12s;
}
.lang-option:hover {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
}
.lang-option.active {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
  font-weight: 500;
}
.lang-option-name {
  flex: 1;
}
.lang-option-code {
  font-size: 11px;
  color: #adb5bd;
  font-weight: 500;
  letter-spacing: 0.04em;
}
.lang-option.active .lang-option-code {
  color: var(--ardyss-pink);
}
.lang-option-check {
  width: 14px;
  height: 14px;
  color: var(--ardyss-pink);
  opacity: 0;
  flex-shrink: 0;
}
.lang-option.active .lang-option-check { opacity: 1; }

@media (max-width: 540px) {
  .lang-switch-btn-label { display: none; }
  .lang-switch-btn { padding: 6px; }
}

/* ── ASP.NET DropDownList language picker (server-side AutoPostBack) ──
   Pure CSS — flag swaps via :has() depending on which <option> is :checked.
   Default: US flag · option[value="es"]:checked → Mexico flag.
   ──────────────────────────────────────────────────────────────────── */
.topbar-lang-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: #f1f3f5;
  background-image:
    /* dropdown arrow (right) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
    /* default flag: US (left) */
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'><rect width='18' height='13' fill='%23b22234'/><rect y='1' width='18' height='1' fill='white'/><rect y='3' width='18' height='1' fill='white'/><rect y='5' width='18' height='1' fill='white'/><rect y='7' width='18' height='1' fill='white'/><rect y='9' width='18' height='1' fill='white'/><rect y='11' width='18' height='1' fill='white'/><rect width='8' height='7' fill='%233c3b6e'/></svg>");
  background-repeat: no-repeat, no-repeat;
  background-position: right 9px center, left 10px center;
  background-size: 11px, 18px 13px;
  border: 1px solid transparent;
  border-radius: 16px;
  padding: 5px 26px 5px 36px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  color: #495057;
  cursor: pointer;
  transition: background-color 0.15s, border-color 0.15s, color 0.15s;
  line-height: 1.4;
}

/* Mexico flag when "es" is selected */
.topbar-lang-select:has(option[value="es"]:checked) {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>"),
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 13'><rect width='6' height='13' fill='%23006847'/><rect x='6' width='6' height='13' fill='white'/><rect x='12' width='6' height='13' fill='%23ce1126'/><circle cx='9' cy='6.5' r='1.4' fill='%23006847' opacity='0.7'/></svg>");
}

.topbar-lang-select:hover {
  background-color: var(--ardyss-pink-light);
  border-color: rgba(214,51,132,0.25);
  color: var(--ardyss-pink-dark);
}
.topbar-lang-select:focus {
  outline: none;
  background-color: var(--ardyss-pink-light);
  border-color: var(--ardyss-pink);
  color: var(--ardyss-pink-dark);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}
.topbar-lang-select option {
  background: #fff;
  color: #212529;
  font-weight: 400;
}
@media (max-width: 540px) {
  .topbar-lang-select {
    font-size: 11px;
    padding: 4px 22px 4px 32px;
    background-position: right 7px center, left 9px center;
    background-size: 10px, 16px 12px;
  }
}

/* ── MAIN CONTENT ── */
.ardyss-main {
  margin-left: var(--sidebar-width);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}
.ardyss-content {
  padding: 28px;
  flex: 1;
}

/* ── PAGE HEADER ── */
.page-eyebrow {
  font-size: 10px;
  font-weight: 500;
  color: var(--ardyss-pink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 4px;
}
.page-title {
  font-size: 22px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 4px;
}
.page-subtitle {
  font-size: 13px;
  color: #6c757d;
  margin-bottom: 24px;
}

/* ── BLOCK LABEL ── */
.block-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ardyss-pink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 12px;
}

/* ── DASHBOARD CARDS ── */
.ardyss-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  padding: 20px 22px;
}

/* ── QP METRIC ── */
.metric-value {
  font-size: 30px;
  font-weight: 600;
  color: #212529;
}
.metric-unit {
  font-size: 14px;
  font-weight: 400;
  color: #6c757d;
}
.metric-compare {
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 20px;
}
.metric-compare.up   { background: #d1e7dd; color: #0a5c30; }
.metric-compare.down { background: #f8d7da; color: #842029; }

/* ── ENROLLMENT SLOTS ── */
.enrollment-slot {
  border: 2px dashed var(--ardyss-border);
  border-radius: 10px;
  padding: 12px 8px;
  text-align: center;
  transition: all 0.2s;
}
.enrollment-slot.filled {
  border-color: var(--ardyss-green);
  background: #d1e7dd;
}
.slot-num   { font-size: 10px; font-weight: 600; color: #6c757d; margin-bottom: 4px; }
.slot-pct   { font-size: 17px; font-weight: 600; color: #adb5bd; }
.slot-detail{ font-size: 10px; color: #6c757d; margin-top: 3px; }
.enrollment-slot.filled .slot-num    { color: #0a5c30; }
.enrollment-slot.filled .slot-pct   { color: var(--ardyss-green); }
.enrollment-slot.filled .slot-detail{ color: #0a5c30; }
.slots-footer {
  background: #f1f3f5;
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.slots-footer-label { font-size: 12px; color: #6c757d; }
.slots-footer-value { font-size: 14px; font-weight: 600; color: #212529; }

/* ── BUILDER BONUS ── */
.builder-member {
  background: #f1f3f5;
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.builder-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink);
  font-size: 10px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.builder-empty-slot {
  border: 2px dashed var(--ardyss-border);
  border-radius: 8px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: border-color 0.15s;
}
.builder-empty-slot:hover { border-color: var(--ardyss-pink); }
.builder-empty-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 2px dashed var(--ardyss-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  color: #adb5bd;
}
.builder-footer {
  background: var(--ardyss-pink-light);
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 8px;
}
.builder-footer-label { font-size: 12px; color: var(--ardyss-pink-dark); }
.builder-footer-value { font-size: 14px; font-weight: 600; color: var(--ardyss-pink); }

/* ── BUILDER FOOTER — UNLOCKED STATE (all 3 active) ── */
.builder-footer.is-unlocked {
  background: linear-gradient(135deg, #d1e7dd 0%, #e8f5ee 100%);
  border: 1px solid rgba(25,135,84,0.25);
  position: relative;
  overflow: hidden;
}
.builder-footer.is-unlocked::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 90% 50%, rgba(25,135,84,0.12) 0%, transparent 60%);
  pointer-events: none;
}
.builder-footer.is-unlocked .builder-footer-label {
  color: #0a5c30;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
}
.builder-footer.is-unlocked .builder-footer-label::before {
  content: '✓';
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  background: var(--ardyss-green);
  color: #fff;
  border-radius: 50%;
  font-size: 11px;
  font-weight: 700;
  flex-shrink: 0;
  box-shadow: 0 0 0 3px rgba(25,135,84,0.15);
  animation: builder-unlock-pop 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.builder-footer.is-unlocked .builder-footer-value {
  color: var(--ardyss-green);
  font-weight: 600;
  position: relative;
  z-index: 1;
}
.builder-footer.is-unlocked .builder-footer-value::before {
  content: '+';
  margin-right: 1px;
  font-weight: 500;
}
@keyframes builder-unlock-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* ── BUILDER MEMBER STATUS BADGES ── */
.builder-status {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 10px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 999px;
  white-space: nowrap;
  line-height: 1.4;
  letter-spacing: 0.01em;
}
.builder-status::before {
  content: '';
  width: 5px;
  height: 5px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Green — qualified / active / balanced */
.builder-status--active {
  background: #d1e7dd;
  color: #0a5c30;
}
.builder-status--active::before {
  background: var(--ardyss-green);
  box-shadow: 0 0 0 2px rgba(25,135,84,0.18);
}

/* Amber — partial / needs more QP */
.builder-status--pending {
  background: #ffe5d0;
  color: #7a3e00;
}
.builder-status--pending::before {
  background: var(--ardyss-amber);
  animation: builder-pulse 1.6s ease-in-out infinite;
}

/* Red — inactive / dropped */
.builder-status--inactive {
  background: #f8d7da;
  color: #842029;
}
.builder-status--inactive::before {
  background: #dc3545;
}

/* Gray — empty / not started */
.builder-status--empty {
  background: #e9ecef;
  color: #6c757d;
}
.builder-status--empty::before {
  background: #adb5bd;
}

@keyframes builder-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.4; }
}

/* ── RANK ── */
.rank-item {
  background: #f1f3f5;
  border-radius: 8px;
  padding: 10px 12px;
}
.rank-item-label { font-size: 10px; color: #6c757d; margin-bottom: 4px; }
.rank-item-value { font-size: 15px; font-weight: 600; }
.rank-item-value.gold  { color: #b8860b; }
.rank-item-value.pink  { color: var(--ardyss-pink); }
.rank-data-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
  padding: 5px 0;
  border-bottom: 1px solid #f1f3f5;
}
.rank-data-row:last-child { border-bottom: none; }

/* ── POWER START ── */
.ps-bonus-card {
  background: #f1f3f5;
  border-radius: 8px;
  padding: 10px 12px;
  text-align: center;
}
.ps-bonus-label { font-size: 10px; color: #6c757d; margin-bottom: 3px; }
.ps-bonus-value { font-size: 16px; font-weight: 600; }
.ps-bonus-value.green  { color: var(--ardyss-green); }
.ps-bonus-value.amber  { color: var(--ardyss-amber); }
.ps-days-banner {
  border-radius: 8px;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.ps-days-banner.ok   { background: #d1e7dd; }
.ps-days-banner.warn { background: #ffe5d0; }
.ps-days-banner.locked {
  background: linear-gradient(135deg, #fff3cd 0%, #ffe5d0 100%);
  border: 1px solid rgba(253,126,20,0.35);
  flex-wrap: wrap;
  gap: 10px;
}
.ps-days-label { font-size: 12px; }
.ps-days-banner.ok     .ps-days-label { color: #0a5c30; }
.ps-days-banner.warn   .ps-days-label { color: #7a3e00; }
.ps-days-banner.locked .ps-days-label {
  color: #7a3e00;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ps-days-banner.locked .ps-days-label strong {
  color: #b53000;
  font-weight: 600;
}
.ps-days-value { font-size: 14px; font-weight: 600; }
.ps-days-banner.ok   .ps-days-value { color: var(--ardyss-green); }
.ps-days-banner.warn .ps-days-value { color: var(--ardyss-amber); }
.ps-days-banner.locked .ps-days-value a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ardyss-pink);
  color: #fff !important;
  padding: 6px 14px;
  border-radius: 18px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  transition: background 0.15s, transform 0.15s;
}
.ps-days-banner.locked .ps-days-value a:hover {
  background: var(--ardyss-pink-dark);
  transform: translateY(-1px);
}

/* ── RECURRING ORDER ── */
.ro-status-banner {
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}
.ro-status-banner.active { background: #d1e7dd; border: 1px solid rgba(25,135,84,0.2); }
.ro-status-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--ardyss-green); flex-shrink: 0; }
.ro-item-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 0;
  border-bottom: 1px solid var(--ardyss-border);
}
.ro-item-row:last-child { border-bottom: none; }
.ro-action-card {
  border: 1px solid var(--ardyss-border);
  border-radius: 8px;
  padding: 12px 8px;
  text-align: center;
  cursor: pointer;
  background: #fff;
  transition: border-color 0.15s;
}
.ro-action-card:hover { border-color: var(--ardyss-pink); }
.ro-action-card.danger:hover { border-color: #dc3545; }
.ro-action-icon  { font-size: 18px; margin-bottom: 5px; }
.ro-action-name  { font-size: 11px; font-weight: 500; color: #212529; }
.ro-action-sub   { font-size: 10px; color: #6c757d; margin-top: 2px; }

/* ── SCRIPTS ── */
.script-card {
  background: #f1f3f5;
  border-radius: 10px;
  padding: 14px;
}
.script-platform {
  font-size: 10px;
  font-weight: 600;
  color: var(--ardyss-pink);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 6px;
}
.script-text {
  font-size: 12px;
  color: #212529;
  line-height: 1.6;
  margin-bottom: 10px;
}

/* ── REPORTS ── */
.report-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  padding: 20px;
  cursor: pointer;
  transition: all 0.2s;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-decoration: none;
}
.report-card:hover {
  border-color: var(--ardyss-pink);
  box-shadow: 0 6px 18px rgba(214,51,132,0.10);
  transform: translateY(-2px);
}

/* ── REPORT ICON BOX ── */
.report-icon-box {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  flex-shrink: 0;
}
.report-icon-box.pink   { background: var(--ardyss-pink-light); color: var(--ardyss-pink); }
.report-icon-box.blue   { background: #cfe2ff; color: #0d6efd; }
.report-icon-box.green  { background: #d1e7dd; color: #0a5c30; }
.report-icon-box.amber  { background: #ffe5d0; color: #7a3e00; }
.report-icon-box.purple { background: #e2d5f5; color: #6f42c1; }
.report-icon-box.teal   { background: #d1ecf1; color: #0c5460; }
.report-icon-box.gold   { background: #fff3cd; color: #8a6d00; }
.report-icon-box.red    { background: #f8d7da; color: #842029; }

/* ── REPORT CARD CONTENT ── */
.report-card-body { flex: 1; }
.report-card-name {
  font-size: 14px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 4px;
}
.report-card-desc {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
}
.report-card-tag {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 2px 8px;
  border-radius: 20px;
  margin-bottom: 8px;
}
.report-card-tag.sales { background: var(--ardyss-pink-light); color: var(--ardyss-pink-dark); }
.report-card-tag.team  { background: #cfe2ff; color: #084298; }
.report-card-tag.growth { background: #d1e7dd; color: #0a5c30; }

/* ── REPORT CARD FOOTER ── */
.report-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid var(--ardyss-border);
  font-size: 11px;
  color: #adb5bd;
}
.report-card-updated {
  display: flex;
  align-items: center;
  gap: 4px;
}
.report-card-arrow {
  color: var(--ardyss-pink);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
}
.report-card:hover .report-card-arrow { gap: 7px; }

/* ── REPORT FILTER BAR ── */
.report-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

/* ── SHOP TOOLBAR (search + category filters) ── */
.shop-toolbar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ── SEARCH WRAP — botón integrado dentro del input ── */
.report-search-wrap {
  position: relative;
  flex: 1;
  min-width: 220px;
  max-width: 360px;
}
.report-search {
  width: 100%;
  padding: 9px 110px 9px 14px; /* padding-right reserva espacio para el botón */
  font-size: 13px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  background: #fff;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
  font-family: inherit;
  box-sizing: border-box;
}
.report-search:focus {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}

/* Botón Search dentro del input */
.shop-search-btn {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px;
  background: var(--ardyss-pink);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 12px;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
  line-height: 1;
}
.shop-search-btn svg {
  flex-shrink: 0;
  stroke: #fff;
}
.shop-search-btn:hover {
  background: var(--ardyss-pink-dark);
}
.shop-search-btn:active {
  transform: translateY(-50%) scale(0.97);
}

/* ── RESPONSIVE ── */
@media (max-width: 576px) {
  .shop-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .report-search-wrap {
    max-width: 100%;
    width: 100%;
  }
  .report-search {
    padding-right: 46px; /* sólo icono, sin texto */
  }
  .shop-search-label {
    display: none; /* oculta el texto "Search" en móvil */
  }
  .shop-search-btn {
    padding: 5px 9px;
  }
}

/* ── FILTER TABS (reports) ── */
.report-filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.report-filter-tab {
  padding: 7px 13px;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  background: #fff;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 20px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.report-filter-tab:hover { border-color: var(--ardyss-pink); color: var(--ardyss-pink); }
.report-filter-tab.active {
  background: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
  color: #fff;
}
.report-filter-tab .count {
  background: rgba(255,255,255,0.3);
  padding: 1px 7px;
  border-radius: 10px;
  margin-left: 5px;
  font-size: 10px;
  font-weight: 600;
}
.report-filter-tab:not(.active) .count {
  background: #e9ecef;
  color: #6c757d;
}

/* ── SECTION DIVIDER ── */
.report-section-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ardyss-pink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: 26px 0 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.report-section-title::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--ardyss-border);
}


/* =============================================
   REPORT DETAIL PAGE (GridView container)
   ============================================= */

/* ── HEADER STRIP (title + actions) ── */
.report-header-strip {
  background: linear-gradient(135deg, var(--ardyss-pink-light), #fff0f8 60%, #fff);
  border: 1px solid rgba(214,51,132,0.2);
  border-radius: 14px;
  padding: 22px 26px;
  margin-bottom: 22px;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}
.report-header-icon {
  width: 56px;
  height: 56px;
  border-radius: 12px;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(214,51,132,0.18);
}
.report-header-body { flex: 1; min-width: 220px; }
.report-header-title {
  font-size: 20px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 3px;
}
.report-header-sub {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
}
.report-header-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ── KPI MINI CARDS ── */
.report-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.report-kpi {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 14px 16px;
}
.report-kpi-label {
  font-size: 10px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 4px;
}
.report-kpi-value {
  font-size: 22px;
  font-weight: 600;
  color: #212529;
  font-variant-numeric: tabular-nums;
}
.report-kpi-delta {
  font-size: 11px;
  font-weight: 500;
  margin-top: 3px;
  display: inline-flex;
  align-items: center;
  gap: 3px;
}
.report-kpi-delta.up   { color: var(--ardyss-green); }
.report-kpi-delta.down { color: #dc3545; }
.report-kpi-delta.flat { color: #6c757d; }

/* ── TOOLBAR (filters + search + export) ── */
.report-toolbar {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.report-toolbar-group {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.report-toolbar-label {
  font-size: 10px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.report-toolbar-input {
  padding: 7px 11px;
  font-size: 12px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 7px;
  outline: none;
  background: #fff;
  color: #212529;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.report-toolbar-input:focus {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}
.report-toolbar-search {
  position: relative;
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.report-toolbar-search svg {
  position: absolute;
  left: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: #adb5bd;
  pointer-events: none;
}
.report-toolbar-search input {
  width: 100%;
  padding: 7px 11px 7px 32px;
  font-size: 12px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 7px;
  outline: none;
  font-family: inherit;
}
.report-toolbar-search input:focus {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}
.report-toolbar-spacer { flex: 1; }

/* ── EXPORT BUTTONS ── */
.export-btn {
  background: #fff;
  border: 1.5px solid var(--ardyss-border);
  color: #495057;
  font-size: 12px;
  font-weight: 500;
  padding: 7px 12px;
  border-radius: 7px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: all 0.15s;
  text-decoration: none;
  font-family: inherit;
}
.export-btn:hover {
  border-color: var(--ardyss-pink);
  color: var(--ardyss-pink);
}
.export-btn.primary {
  background: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
  color: #fff;
}
.export-btn.primary:hover {
  background: var(--ardyss-pink-dark);
  border-color: var(--ardyss-pink-dark);
  color: #fff;
}
.export-btn svg { flex-shrink: 0; }

/* ── GRID WRAPPER ── */
.ardyss-grid-wrap {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 0 0 12px 12px;
  overflow: hidden;
}
.ardyss-grid-wrap.standalone { border-radius: 12px; }
.ardyss-grid-scroll { overflow-x: auto; }

/* ── DATA TABLE (styled for asp:GridView) ── */
.ardyss-grid,
table.ardyss-grid {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  background: #fff;
}
.ardyss-grid thead th,
.ardyss-grid > tbody > tr:first-child > th {
  background: #f8f9fa;
  font-size: 11px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  padding: 13px 16px;
  text-align: left;
  border-bottom: 1.5px solid var(--ardyss-border);
  white-space: nowrap;
}
.ardyss-grid thead th.sortable { cursor: pointer; user-select: none; }
.ardyss-grid thead th.sortable:hover { color: var(--ardyss-pink); }
.ardyss-grid thead th .sort-icon {
  opacity: 0.35;
  margin-left: 4px;
  font-size: 10px;
}
.ardyss-grid thead th.sorted-asc .sort-icon,
.ardyss-grid thead th.sorted-desc .sort-icon {
  opacity: 1;
  color: var(--ardyss-pink);
}
.ardyss-grid tbody td {
  padding: 13px 16px;
  border-bottom: 1px solid #f1f3f5;
  color: #212529;
  vertical-align: middle;
}
.ardyss-grid tbody tr:hover { background: #fcf4f8; }
.ardyss-grid tbody tr:last-child td { border-bottom: none; }
.ardyss-grid td.num,
.ardyss-grid th.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.ardyss-grid td.cell-id { color: var(--ardyss-pink); font-weight: 600; }
.ardyss-grid td.cell-strong { font-weight: 600; }
.ardyss-grid td.cell-muted { color: #6c757d; }
.ardyss-grid td.cell-success { color: var(--ardyss-green); font-weight: 600; }
.ardyss-grid td.cell-danger  { color: #dc3545; font-weight: 600; }

/* ── CELL INNER WITH AVATAR ── */
.cell-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cell-user-avatar {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink);
  font-size: 11px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.cell-user-name { font-weight: 500; color: #212529; }
.cell-user-sub  { font-size: 11px; color: #6c757d; }

/* ── STATUS BADGES ── */
.status-badge {
  display: inline-block;
  padding: 3px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 20px;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
.status-badge.active     { background: #d1e7dd; color: #0a5c30; }
.status-badge.inactive   { background: #f8d7da; color: #842029; }
.status-badge.pending    { background: #fff3cd; color: #664d03; }
.status-badge.paid       { background: #cfe2ff; color: #084298; }
.status-badge.processing { background: #e2d5f5; color: #6f42c1; }
.status-badge.canceled   { background: #e9ecef; color: #495057; }

/* ── ROW ACTION BUTTONS ── */
.row-action-btn {
  background: none;
  border: 1.5px solid transparent;
  color: var(--ardyss-pink);
  font-size: 11px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s;
  font-family: inherit;
}
.row-action-btn:hover {
  border-color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
}

/* ── GRID FOOTER / PAGINATION ── */
.ardyss-grid-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--ardyss-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  background: #fff;
}
.grid-footer-info {
  font-size: 12px;
  color: #6c757d;
}
.grid-footer-info strong { color: #212529; font-weight: 600; }
.grid-pagination {
  display: flex;
  gap: 4px;
  align-items: center;
}
.page-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 9px;
  border: 1.5px solid var(--ardyss-border);
  background: #fff;
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  font-family: inherit;
}
.page-btn:hover:not(:disabled):not(.active) {
  border-color: var(--ardyss-pink);
  color: var(--ardyss-pink);
}
.page-btn.active {
  background: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
  color: #fff;
}
.page-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}
.page-ellipsis {
  padding: 0 4px;
  color: #adb5bd;
  font-size: 12px;
}
.page-size-select {
  font-size: 12px;
  padding: 6px 26px 6px 10px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 7px;
  background: #fff;
  outline: none;
  font-family: inherit;
}

/* ── EMPTY GRID STATE ── */
.grid-empty {
  padding: 60px 20px;
  text-align: center;
}
.grid-empty-icon { font-size: 48px; margin-bottom: 12px; }
.grid-empty-title { font-size: 15px; font-weight: 600; color: #212529; margin-bottom: 4px; }
.grid-empty-sub { font-size: 12px; color: #6c757d; }

/* ── ORDERS ── */
.order-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 14px 18px;
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}
.order-id { font-size: 13px; font-weight: 600; color: var(--ardyss-pink); min-width: 80px; }

/* ── LOGIN PAGE ── */
.login-wrapper {
  min-height: 100vh;
  background: #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px 48px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}
.login-logo-icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #4da6d4, #2d7bb5, #1a5f8a);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 8px;
}
.login-logo-name {
  font-size: 22px;
  font-weight: 600;
  color: #212529;
}
.login-section-title {
  font-size: 14px;
  font-weight: 600;
  color: #212529;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 20px;
}

/* ── CELEBRATION ── */
.celebration-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 9998;
}
.celebration-backdrop.active { display: block; }
.celebration-modal {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 20px;
  padding: 40px 48px;
  text-align: center;
  z-index: 9999;
  max-width: 400px;
  width: 90%;
}
.celebration-icon {
  font-size: 52px;
  margin-bottom: 16px;
  animation: bounce 0.6s ease infinite alternate;
}
.confetti-piece {
  position: fixed;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  animation: confetti-fall 2.5s ease-in forwards;
  pointer-events: none;
  z-index: 9997;
}
@keyframes bounce { from { transform: scale(1); } to { transform: scale(1.15); } }
@keyframes confetti-fall { 0% { transform: translateY(-20px) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }

/* ── CALCULATOR ── */
.calc-result-box {
  background: var(--ardyss-pink-light);
  border-radius: 10px;
  padding: 20px;
  text-align: center;
}
.calc-result-label { font-size: 12px; color: var(--ardyss-pink-dark); margin-bottom: 4px; }
.calc-result-value { font-size: 28px; font-weight: 600; color: var(--ardyss-pink); }
.calc-result-sub   { font-size: 11px; color: #6c757d; margin-top: 4px; }

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .ardyss-sidebar {
    transform: translateX(-260px);
    width: 260px;
    z-index: 200;
  }
  .ardyss-sidebar.open { transform: translateX(0); }
  .ardyss-main { margin-left: 0; }
  .ardyss-topbar { padding: 8px 16px; }
  .ardyss-content { padding: 16px 16px 80px; }
  .menu-toggle { display: flex !important; }
}
@media (min-width: 901px) {
  .menu-toggle { display: none !important; }
}

/* ── Topbar responsive: hide month pill, condense ID pill ── */
@media (max-width: 768px) {
  .ardyss-topbar { gap: 8px; }
  .ardyss-topbar .topbar-actions { gap: 6px; }
  .ardyss-topbar .topbar-pill-month { display: none; }
  .ardyss-topbar .topbar-pill {
    font-size: 11px;
    padding: 4px 9px;
  }
  .ardyss-topbar .topbar-title {
    font-size: 14px;
    max-width: 130px;
  }
}
@media (max-width: 540px) {
  .ardyss-topbar { padding: 8px 12px; gap: 6px; }
  .ardyss-topbar .topbar-actions { gap: 4px; }
  .ardyss-topbar .topbar-pill-id {
    font-size: 10px;
    padding: 4px 8px;
  }
}
@media (max-width: 380px) {
  /* Last-resort: drop ID pill if everything is too tight */
  .ardyss-topbar .topbar-pill-id { display: none; }
}


/* =============================================
   PRODUCT DETAIL PAGE
   ============================================= */

/* ── BREADCRUMB ── */
.ardyss-breadcrumb {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #adb5bd;
  margin-bottom: 20px;
}
.ardyss-breadcrumb a {
  color: #6c757d;
  text-decoration: none;
  transition: color 0.15s;
}
.ardyss-breadcrumb a:hover { color: var(--ardyss-pink); }
.ardyss-breadcrumb .sep { font-size: 10px; }

/* ── PRODUCT GALLERY ── */
.product-gallery {
  position: sticky;
  top: calc(var(--topbar-height) + 20px);
}
.gallery-main {
  border: 1px solid var(--ardyss-border);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
  aspect-ratio: 1 / 1;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  cursor: zoom-in;
}
.gallery-main img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}
.gallery-main:hover img { transform: scale(1.04); }
.gallery-badge {
  position: absolute;
  top: 14px;
  left: 14px;
  background: var(--ardyss-pink);
  color: #fff;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 20px;
}
.gallery-thumbs {
  display: flex;
  gap: 8px;
  margin-top: 10px;
  flex-wrap: wrap;
}
.gallery-thumb {
  width: 64px;
  height: 64px;
  border-radius: 8px;
  border: 2px solid var(--ardyss-border);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
  flex-shrink: 0;
}
.gallery-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gallery-thumb.active,
.gallery-thumb:hover { border-color: var(--ardyss-pink); }

/* ── PRODUCT INFO ── */
.product-category-link {
  font-size: 10px;
  font-weight: 600;
  color: var(--ardyss-pink);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  text-decoration: none;
}
.product-category-link:hover { color: var(--ardyss-pink-dark); }
.product-name {
  font-size: 26px;
  font-weight: 600;
  color: #212529;
  line-height: 1.2;
  margin: 6px 0 4px;
}
.product-stars {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 14px;
}
.stars { color: #ffc107; font-size: 13px; letter-spacing: 1px; }
.stars-count { font-size: 12px; color: #6c757d; }
.product-price-block {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 6px;
}
.product-price {
  font-size: 28px;
  font-weight: 600;
  color: #212529;
}
.product-price-old {
  font-size: 16px;
  color: #adb5bd;
  text-decoration: line-through;
}
.product-price-badge {
  font-size: 11px;
  font-weight: 600;
  background: var(--ardyss-pink);
  color: #fff;
  padding: 2px 8px;
  border-radius: 20px;
}
.product-qp-line {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 20px;
}
.product-qp-line strong { color: var(--ardyss-green); }

/* ── SIZE SELECTOR ── */
.size-label {
  font-size: 11px;
  font-weight: 600;
  color: #212529;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 10px;
}
.size-options {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.size-btn {
  min-width: 68px;
  padding: 8px 14px;
  border: 2px solid var(--ardyss-border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-weight: 500;
  color: #212529;
  cursor: pointer;
  transition: all 0.15s;
  text-align: center;
}
.size-btn:hover { border-color: var(--ardyss-pink); color: var(--ardyss-pink); }
.size-btn.active {
  border-color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink);
}
.size-btn.out { opacity: 0.4; cursor: not-allowed; text-decoration: line-through; }

/* ── COLOR SELECTOR ── */
.color-options {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.color-swatch {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 3px solid transparent;
  cursor: pointer;
  transition: border-color 0.15s;
  position: relative;
}
.color-swatch.active { border-color: var(--ardyss-pink); }
.color-swatch::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  border: 2px solid #fff;
}

/* ── QTY CONTROL (shared: product & cart) ── */
.qty-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.qty-control {
  display: flex;
  align-items: center;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  overflow: hidden;
}
.qty-btn {
  width: 36px;
  height: 36px;
  background: #f8f9fa;
  border: none;
  font-size: 18px;
  font-weight: 400;
  color: #495057;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
  line-height: 1;
}
.qty-btn:hover { background: var(--ardyss-pink-light); color: var(--ardyss-pink); }
.qty-val {
  width: 40px;
  text-align: center;
  font-size: 13px;
  font-weight: 500;
  border: none;
  border-left: 1.5px solid var(--ardyss-border);
  border-right: 1.5px solid var(--ardyss-border);
  outline: none;
  background: #fff;
}

/* ── ADD TO CART / RECURRING BUTTONS ── */
.btn-add-cart {
  flex: 1;
  padding: 10px 20px;
  font-size: 14px;
  font-weight: 600;
}
.btn-recurring {
  width: 100%;
  padding: 10px;
  font-size: 13px;
  font-weight: 500;
  border: 2px solid var(--ardyss-pink);
  background: #fff;
  color: var(--ardyss-pink);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.15s;
  margin-bottom: 16px;
}
.btn-recurring:hover { background: var(--ardyss-pink-light); }

/* ── TRUST BADGES (product page) ── */
.trust-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}
.trust-badge {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: #6c757d;
}
.trust-badge span { font-size: 15px; }

/* ── PRODUCT DETAILS ACCORDION ── */
.product-accordion .accordion-button {
  font-size: 13px;
  font-weight: 500;
  padding: 14px 0;
  background: none;
  border: none;
  box-shadow: none;
  color: #212529;
}
.product-accordion .accordion-button::after { margin-left: auto; }
.product-accordion .accordion-button:not(.collapsed) { color: var(--ardyss-pink); }
.product-accordion .accordion-item {
  border: none;
  border-bottom: 1px solid var(--ardyss-border);
}
.product-accordion .accordion-body {
  padding: 0 0 14px;
  font-size: 13px;
  color: #6c757d;
  line-height: 1.7;
}

/* ── QP INFO BOX ── */
.qp-info-box {
  background: linear-gradient(135deg, var(--ardyss-pink-light), #fff0f8);
  border: 1px solid rgba(214,51,132,0.2);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 20px;
}
.qp-info-box .qp-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}
.qp-info-box .qp-row + .qp-row { margin-top: 6px; }
.qp-info-box .qp-key { color: #6c757d; }
.qp-info-box .qp-val { font-weight: 600; color: var(--ardyss-pink); }

/* ── RELATED PRODUCTS ── */
.related-product-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  overflow: hidden;
  transition: box-shadow 0.2s, border-color 0.2s;
  cursor: pointer;
}
.related-product-card:hover {
  border-color: var(--ardyss-pink);
  box-shadow: 0 4px 16px rgba(214,51,132,0.1);
}
.related-product-img {
  height: 130px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 36px;
}
.related-product-body { padding: 12px 14px; }
.related-product-name { font-size: 13px; font-weight: 500; margin-bottom: 2px; }
.related-product-cat  { font-size: 10px; color: var(--ardyss-pink); text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.related-product-price { font-size: 14px; font-weight: 600; }
.related-product-qp   { font-size: 10px; color: #6c757d; }

/* ── CART DRAWER ── */
.cart-drawer {
  position: fixed;
  right: -380px;
  top: 0;
  width: 360px;
  height: 100%;
  background: #fff;
  z-index: 300;
  box-shadow: -4px 0 24px rgba(0,0,0,0.12);
  transition: right 0.3s ease;
  display: flex;
  flex-direction: column;
}
.cart-drawer.open { right: 0; }
.cart-drawer-header {
  padding: 20px 22px;
  border-bottom: 1px solid var(--ardyss-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.cart-drawer-title { font-size: 15px; font-weight: 600; }
.cart-drawer-close {
  background: none;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #6c757d;
  line-height: 1;
}
.cart-drawer-body { flex: 1; padding: 20px 22px; overflow-y: auto; }
.cart-drawer-footer { padding: 16px 22px; border-top: 1px solid var(--ardyss-border); }
.cart-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 299;
  display: none;
}
.cart-overlay.show { display: block; }

/* ── TOAST (global) ── */
.ardyss-toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: #212529;
  color: #fff;
  padding: 12px 22px;
  border-radius: 30px;
  font-size: 13px;
  font-weight: 500;
  z-index: 9999;
  transition: transform 0.3s ease;
  white-space: nowrap;
}
.ardyss-toast.show { transform: translateX(-50%) translateY(0); }

/* ── MOBILE STICKY BOTTOM (product) ── */
.mobile-sticky-buy {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--ardyss-border);
  padding: 12px 16px;
  z-index: 100;
  gap: 10px;
}
@media (max-width: 768px) {
  .mobile-sticky-buy { display: flex; }
}


/* =============================================
   CART PAGE
   ============================================= */

/* ── CART ITEM CARD ── */
.cart-item-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  padding: 18px 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  transition: border-color 0.15s;
}
.cart-item-card:hover { border-color: rgba(214,51,132,0.3); }
.cart-item-image {
  width: 90px;
  height: 90px;
  border-radius: 10px;
  background: #f8f9fa;
  flex-shrink: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cart-item-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.cart-item-image.placeholder { font-size: 36px; }
.cart-item-body { flex: 1; min-width: 0; }
.cart-item-cat  { font-size: 10px; font-weight: 600; color: var(--ardyss-pink); text-transform: uppercase; letter-spacing: 0.07em; margin-bottom: 3px; }
.cart-item-name { font-size: 14px; font-weight: 600; color: #212529; margin-bottom: 4px; }
.cart-item-variants { font-size: 12px; color: #6c757d; margin-bottom: 10px; }
.cart-item-qp { font-size: 11px; color: #198754; font-weight: 500; }
.cart-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 10px;
  flex-shrink: 0;
}
.cart-item-price {
  font-size: 16px;
  font-weight: 600;
  color: #212529;
}
.cart-item-price-unit {
  font-size: 11px;
  color: #adb5bd;
  margin-top: -6px;
}
.btn-remove {
  background: none;
  border: none;
  font-size: 11px;
  color: #adb5bd;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.btn-remove:hover { color: #dc3545; }

/* ── QP PROGRESS BANNER ── */
.qp-banner {
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}
.qp-banner.met  { background: #d1e7dd; border: 1px solid rgba(25,135,84,0.2); }
.qp-banner.near { background: #fff3cd; border: 1px solid rgba(255,193,7,0.3); }
.qp-banner.low  { background: #f8d7da; border: 1px solid rgba(220,53,69,0.2); }
.qp-banner-icon { font-size: 22px; flex-shrink: 0; }
.qp-banner-text { flex: 1; }
.qp-banner-title { font-size: 13px; font-weight: 600; }
.qp-banner.met  .qp-banner-title { color: #0a5c30; }
.qp-banner.near .qp-banner-title { color: #664d03; }
.qp-banner.low  .qp-banner-title { color: #842029; }
.qp-banner-sub { font-size: 11px; margin-top: 1px; }
.qp-banner.met  .qp-banner-sub { color: #198754; }
.qp-banner.near .qp-banner-sub { color: #997404; }
.qp-banner.low  .qp-banner-sub { color: #dc3545; }

/* ── ORDER SUMMARY CARD ── */
.summary-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  padding: 22px;
  position: sticky;
  top: calc(var(--topbar-height) + 20px);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  padding: 7px 0;
}
.summary-row.total {
  font-size: 15px;
  font-weight: 600;
  border-top: 1px solid var(--ardyss-border);
  margin-top: 6px;
  padding-top: 12px;
}
.summary-row .label { color: #6c757d; }
.summary-row.total .label { color: #212529; }
.summary-row .value { font-weight: 500; color: #212529; }
.summary-row.discount .value { color: #198754; }
.summary-qp-box {
  background: var(--ardyss-pink-light);
  border-radius: 8px;
  padding: 10px 14px;
  margin: 14px 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.summary-qp-label { font-size: 12px; color: var(--ardyss-pink-dark); }
.summary-qp-value { font-size: 15px; font-weight: 600; color: var(--ardyss-pink); }

/* ── PROMO CODE ── */
.promo-row {
  display: flex;
  gap: 8px;
  margin-bottom: 16px;
}
.promo-row input { flex: 1; font-size: 13px; border-radius: 8px; }
.promo-row .btn  { border-radius: 8px; font-size: 13px; }

/* ── SHIPPING OPTIONS ── */
.shipping-options { display: flex; flex-direction: column; gap: 8px; margin-bottom: 16px; }
.shipping-option {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  padding: 10px 12px;
  cursor: pointer;
  transition: border-color 0.15s;
  font-size: 13px;
}
.shipping-option.active { border-color: var(--ardyss-pink); background: var(--ardyss-pink-light); }
.shipping-option input[type="radio"] { accent-color: var(--ardyss-pink); }
.shipping-option-label { flex: 1; }
.shipping-option-name  { font-weight: 500; color: #212529; font-size: 13px; }
.shipping-option-eta   { font-size: 11px; color: #6c757d; }
.shipping-option-price { font-size: 13px; font-weight: 600; }

/* ── EMPTY CART ── */
.empty-cart { text-align: center; padding: 80px 20px; }
.empty-cart-icon { font-size: 56px; margin-bottom: 16px; }
.empty-cart h3 { font-size: 18px; font-weight: 600; margin-bottom: 8px; }
.empty-cart p  { font-size: 13px; color: #6c757d; margin-bottom: 24px; }

/* ── CHECKOUT STEPS ── */
.checkout-steps {
  display: flex;
  align-items: center;
  gap: 0;
  margin-bottom: 24px;
}
.step {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
}
.step-num {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
}
.step.active .step-num  { background: var(--ardyss-pink); color: #fff; }
.step.done   .step-num  { background: #198754; color: #fff; }
.step.pending .step-num { background: #e9ecef; color: #adb5bd; }
.step.active  .step-label { color: var(--ardyss-pink); }
.step.done    .step-label { color: #198754; }
.step.pending .step-label { color: #adb5bd; }
.step-line {
  flex: 1;
  height: 2px;
  background: #e9ecef;
  margin: 0 8px;
}
.step-line.done { background: #198754; }

/* ── TRUST STRIP (cart summary) ── */
.trust-strip {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid var(--ardyss-border);
  margin-top: 12px;
}
.trust-item { display: flex; align-items: center; gap: 5px; font-size: 11px; color: #6c757d; }
.trust-item span { font-size: 14px; }

/* ── UPSELL STRIP ── */
.upsell-strip {
  background: #fff;
  border: 1.5px dashed rgba(214,51,132,0.4);
  border-radius: 10px;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.upsell-strip:hover { border-color: var(--ardyss-pink); background: var(--ardyss-pink-light); }
.upsell-emoji { font-size: 28px; flex-shrink: 0; }
.upsell-body  { flex: 1; }
.upsell-name  { font-size: 13px; font-weight: 500; }
.upsell-sub   { font-size: 11px; color: #6c757d; }
.upsell-add   { font-size: 12px; font-weight: 600; color: var(--ardyss-pink); flex-shrink: 0; }

/* ── MOBILE CHECKOUT BAR ── */
.mobile-checkout-bar {
  display: none;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #fff;
  border-top: 1px solid var(--ardyss-border);
  padding: 12px 16px;
  z-index: 100;
  align-items: center;
  gap: 12px;
}
@media (max-width: 991px) {
  .mobile-checkout-bar { display: flex; }
  .mobile-sticky-buy   { display: flex; }
}


/* =============================================
   CHECKOUT PAGE
   ============================================= */

/* ── CHECKOUT CARD (form container) ── */
.checkout-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  padding: 24px 26px;
  margin-bottom: 18px;
}
.checkout-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 4px;
}
.checkout-card-title {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
}
.checkout-card-sub {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 18px;
}
.checkout-step-panel { display: none; }
.checkout-step-panel.active { display: block; }

/* ── FORM FIELDS ── */
.field-label {
  font-size: 11px;
  font-weight: 600;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 6px;
  display: block;
}
.checkout-input,
.checkout-select {
  font-size: 13px;
  padding: 10px 12px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  background: #fff;
  color: #212529;
  width: 100%;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.checkout-input:focus,
.checkout-select:focus {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
  outline: none;
}
.checkout-input::placeholder { color: #adb5bd; }
.field-group { margin-bottom: 14px; }
.field-hint {
  font-size: 11px;
  color: #adb5bd;
  margin-top: 4px;
}

/* ── Phone input with country prefix ── */
.phone-input-group {
  display: flex;
  align-items: stretch;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  background: #fff;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.phone-input-group:focus-within {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}
.phone-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  background: var(--ardyss-gray-bg);
  border-right: 1px solid var(--ardyss-border);
  font-size: 13px;
  font-weight: 500;
  color: #495057;
  user-select: none;
}
.phone-prefix .flag {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  background: linear-gradient(180deg,
    #b22234 0%, #b22234 25%, #fff 25%, #fff 35%,
    #b22234 35%, #b22234 50%, #fff 50%, #fff 60%,
    #b22234 60%, #b22234 75%, #fff 75%, #fff 100%);
  position: relative;
  overflow: hidden;
  flex-shrink: 0;
}
.phone-prefix .flag::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 50%;
  height: 60%;
  background: #3c3b6e;
}
.phone-input-group input {
  flex: 1;
  border: none;
  outline: none;
  padding: 10px 12px;
  font-size: 13px;
  font-family: inherit;
  background: #fff;
  color: #212529;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}
.phone-input-group input::placeholder { color: #adb5bd; }

/* ── Checkout option cards (checkboxes/toggles for invoice options) ── */
.checkout-option-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-top: 8px;
}
@media (max-width: 540px) {
  .checkout-option-row { grid-template-columns: 1fr; }
}
.checkout-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}
.checkout-option:hover {
  border-color: rgba(214,51,132,0.4);
  background: #fffafc;
}
/* Hide the native checkbox AND any ASP.NET wrapper around it */
.checkout-option input[type="checkbox"],
.checkout-option .check {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.checkout-option .opt-check {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 5px;
  background: #fff;
  flex-shrink: 0;
  position: relative;
  transition: all 0.15s ease;
  margin-top: 1px;
}
.checkout-option .opt-check::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 1px;
  width: 6px;
  height: 11px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg) scale(0);
  transition: transform 0.15s ease;
}

/* Use :has() so it works whether the input is a direct child OR wrapped
   inside another element (e.g. ASP.NET CheckBox renders <span><input></span>) */
.checkout-option:has(input[type="checkbox"]:checked) .opt-check {
  background: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
}
.checkout-option:has(input[type="checkbox"]:checked) .opt-check::after {
  transform: rotate(45deg) scale(1);
}
.checkout-option:has(input[type="checkbox"]:checked) {
  border-color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
}
.checkout-option .opt-body {
  flex: 1;
  min-width: 0;
}
.checkout-option .opt-title {
  font-size: 13px;
  font-weight: 500;
  color: #212529;
  display: flex;
  align-items: center;
  gap: 6px;
  line-height: 1.3;
}
.checkout-option .opt-title .opt-icon {
  font-size: 14px;
  line-height: 1;
}
.checkout-option .opt-desc {
  font-size: 11px;
  color: #6c757d;
  margin-top: 3px;
  line-height: 1.4;
}
.checkout-option:has(input[type="checkbox"]:checked) .opt-title {
  color: var(--ardyss-pink-dark);
}

/* ── ADDRESS CARD (saved addresses) ── */
.address-card {
  border: 1.5px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 14px 16px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 10px;
  background: #fff;
}
.address-card.active {
  border-color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
}
.address-card input[type="radio"] {
  accent-color: var(--ardyss-pink);
  margin-top: 3px;
  flex-shrink: 0;
}
.address-card-body { flex: 1; min-width: 0; }
.address-card-head {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.address-card-name {
  font-size: 13px;
  font-weight: 600;
  color: #212529;
}
.address-card-badge {
  background: var(--ardyss-pink);
  color: #fff;
  font-size: 9px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.address-card-line {
  font-size: 12px;
  color: #6c757d;
  line-height: 1.5;
}
.address-card-edit {
  background: none;
  border: none;
  color: var(--ardyss-pink);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.address-card-edit:hover { color: var(--ardyss-pink-dark); text-decoration: underline; }

/* ── ADD NEW ENTRY BUTTON ── */
.add-new-btn {
  background: #fff;
  border: 1.5px dashed var(--ardyss-border);
  border-radius: 10px;
  padding: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  color: var(--ardyss-pink);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  width: 100%;
  transition: border-color 0.15s, background 0.15s;
}
.add-new-btn:hover {
  border-color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
}

/* ── NEW ADDRESS FORM (collapsible) ── */
.new-address-form {
  display: none;
  padding: 18px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 10px;
  background: #f8f9fa;
  margin-top: 10px;
}
.new-address-form.open { display: block; }

/* ── PAYMENT METHOD TABS ── */
.payment-tabs {
  display: flex;
  gap: 10px;
  margin-bottom: 22px;
  flex-wrap: wrap;
}
.payment-tab {
  flex: 1;
  min-width: 110px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 14px 10px;
  cursor: pointer;
  background: #fff;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.payment-tab:hover { border-color: var(--ardyss-pink); }
.payment-tab.active {
  border-color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
}
.payment-tab-icon { font-size: 22px; }
.payment-tab-label {
  font-size: 12px;
  font-weight: 500;
  color: #212529;
}
.payment-panel { display: none; }
.payment-panel.active { display: block; }

/* ── CREDIT CARD VISUAL ── */
.credit-card-visual {
  background: linear-gradient(135deg, var(--ardyss-pink), var(--ardyss-pink-dark) 60%, #7a1a4a);
  color: #fff;
  border-radius: 14px;
  padding: 22px 24px;
  min-height: 175px;
  margin-bottom: 20px;
  position: relative;
  box-shadow: 0 8px 22px rgba(214,51,132,0.28);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  overflow: hidden;
}
.credit-card-visual::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: rgba(255,255,255,0.08);
  border-radius: 50%;
}
.credit-card-visual::after {
  content: '';
  position: absolute;
  bottom: -60px;
  left: -30px;
  width: 140px;
  height: 140px;
  background: rgba(255,255,255,0.05);
  border-radius: 50%;
}
.cc-chip {
  width: 38px;
  height: 28px;
  background: linear-gradient(135deg, #e6c870, #c9a648);
  border-radius: 5px;
  position: relative;
  z-index: 1;
}
.cc-number {
  font-size: 19px;
  letter-spacing: 2.5px;
  font-weight: 500;
  margin: 14px 0 16px;
  font-family: 'Courier New', monospace;
  position: relative;
  z-index: 1;
}
.cc-row {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  position: relative;
  z-index: 1;
}
.cc-label {
  font-size: 9px;
  opacity: 0.85;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 3px;
}
.cc-value {
  font-size: 12px;
  font-weight: 500;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}
.cc-brand {
  position: absolute;
  top: 20px;
  right: 24px;
  font-size: 18px;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.08em;
  z-index: 1;
}

/* ── SAVED CARD ROW ── */
.saved-card {
  border: 1.5px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 12px 14px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 8px;
  background: #fff;
}
.saved-card.active {
  border-color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
}
.saved-card input[type="radio"] {
  accent-color: var(--ardyss-pink);
  flex-shrink: 0;
}
.saved-card-brand {
  width: 44px;
  height: 28px;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.saved-card-brand.visa   { background: #1a1f71; }
.saved-card-brand.master { background: linear-gradient(90deg, #eb001b 48%, #f79e1b 52%); }
.saved-card-brand.amex   { background: #2e77bb; }
.saved-card-body { flex: 1; min-width: 0; }
.saved-card-number {
  font-size: 13px;
  font-weight: 500;
  color: #212529;
  font-family: 'Courier New', monospace;
  letter-spacing: 1px;
}
.saved-card-exp {
  font-size: 11px;
  color: #6c757d;
  margin-top: 2px;
}

/* ── REVIEW SECTION (confirm step) ── */
.review-section + .review-section {
  margin-top: 18px;
  padding-top: 18px;
  border-top: 1px solid var(--ardyss-border);
}
.review-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.review-title {
  font-size: 11px;
  font-weight: 600;
  color: var(--ardyss-pink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.review-edit {
  background: none;
  border: none;
  color: var(--ardyss-pink);
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  padding: 0;
}
.review-edit:hover { color: var(--ardyss-pink-dark); text-decoration: underline; }
.review-body {
  font-size: 12.5px;
  color: #495057;
  line-height: 1.65;
}
.review-body strong { color: #212529; font-weight: 600; }

/* ── REVIEW ITEM LIST ── */
.review-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid #f1f3f5;
}
.review-item:last-child { border-bottom: none; }
.review-item-img {
  width: 48px;
  height: 48px;
  border-radius: 8px;
  background: #f8f9fa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  overflow: hidden;
  flex-shrink: 0;
}
.review-item-img img { width: 100%; height: 100%; object-fit: cover; }
.review-item-body { flex: 1; min-width: 0; }
.review-item-name {
  font-size: 13px;
  font-weight: 500;
  color: #212529;
}
.review-item-meta {
  font-size: 11px;
  color: #6c757d;
  margin-top: 2px;
}
.review-item-price {
  font-size: 13px;
  font-weight: 600;
  color: #212529;
  flex-shrink: 0;
}

/* ── CHECKOUT NAV BUTTONS ── */
.checkout-actions {
  display: flex;
  gap: 10px;
  margin-top: 22px;
  flex-wrap: wrap;
}
.btn-back {
  background: #fff;
  border: 1.5px solid var(--ardyss-border);
  color: #495057;
  font-size: 13px;
  font-weight: 500;
  padding: 10px 20px;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.btn-back:hover { border-color: var(--ardyss-pink); color: var(--ardyss-pink); }
.btn-next {
  flex: 1;
  padding: 11px 22px;
  font-size: 14px;
  font-weight: 600;
}

/* ── CHECKBOX ROW ── */
.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 12px;
  color: #6c757d;
  cursor: pointer;
  line-height: 1.55;
  margin-top: 14px;
}
.check-row input {
  accent-color: var(--ardyss-pink);
  margin-top: 2px;
  flex-shrink: 0;
}
.check-row a { color: var(--ardyss-pink); text-decoration: none; }
.check-row a:hover { text-decoration: underline; }

/* ── SECURE NOTE ── */
.secure-note {
  font-size: 11px;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  padding: 10px 12px;
  background: #f1f3f5;
  border-radius: 8px;
  line-height: 1.5;
}
.secure-note strong { color: #212529; }
.secure-note-icon {
  font-size: 14px;
  flex-shrink: 0;
}

/* ── SUCCESS STATE (after confirm) ── */
.checkout-success {
  text-align: center;
  padding: 44px 24px 36px;
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 14px;
}
.success-icon {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #d1e7dd;
  color: var(--ardyss-green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 42px;
  margin: 0 auto 18px;
}
.success-title {
  font-size: 22px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 6px;
}
.success-sub {
  font-size: 13px;
  color: #6c757d;
  max-width: 440px;
  margin: 0 auto 22px;
  line-height: 1.55;
}
.success-order-pill {
  background: var(--ardyss-pink-light);
  border-radius: 10px;
  padding: 12px 20px;
  display: inline-block;
  margin-bottom: 22px;
}
.success-order-label {
  font-size: 10px;
  color: var(--ardyss-pink-dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 3px;
}
.success-order-num {
  font-size: 18px;
  font-weight: 600;
  color: var(--ardyss-pink);
  letter-spacing: 0.5px;
}
.success-qp-row {
  background: #d1e7dd;
  border-radius: 10px;
  padding: 14px 18px;
  margin: 0 auto 24px;
  max-width: 420px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
}
.success-qp-row .label { color: #0a5c30; font-weight: 500; }
.success-qp-row .value { color: var(--ardyss-green); font-weight: 600; }
.success-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}

/* ── RESPONSIVE ── */
@media (max-width: 600px) {
  .checkout-card { padding: 18px 16px; }
  .credit-card-visual { padding: 18px 20px; }
  .cc-number { font-size: 16px; letter-spacing: 2px; }
  .payment-tab { min-width: 100px; padding: 12px 8px; }
  .checkout-steps { gap: 0; }
  .step-label { display: none; }
  .step-line { margin: 0 4px; }
}


/* =============================================
   ARDYSS LOADER (UpdateProgress / AJAX overlay)
   ============================================= */

/* ── Fullscreen overlay ── */
.loading-container {
  position: fixed;
  inset: 0;
  background: rgba(33, 37, 41, 0.45);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: ardyss-fade-in 0.25s ease both;
}

/* ── White card wrapper ── */
.ardyss-loader {
  background: #fff;
  border-radius: 18px;
  padding: 28px 36px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  box-shadow: 0 12px 40px rgba(214, 51, 132, 0.25), 0 2px 8px rgba(0, 0, 0, 0.08);
  min-width: 200px;
  animation: ardyss-pop-in 0.3s ease both;
}

/* ── Dual-ring spinner ── */
.ardyss-spinner {
  position: relative;
  width: 56px;
  height: 56px;
}
.ardyss-spinner::before,
.ardyss-spinner::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid transparent;
}
.ardyss-spinner::before {
  border-top-color: var(--ardyss-pink);
  border-right-color: var(--ardyss-pink);
  animation: ardyss-spin 0.9s cubic-bezier(0.5, 0.1, 0.5, 0.9) infinite;
}
.ardyss-spinner::after {
  inset: 8px;
  border-top-color: var(--ardyss-pink-light);
  border-left-color: var(--ardyss-pink-light);
  animation: ardyss-spin 1.3s linear infinite reverse;
}

/* ── Center logo dot (pulsing core) ── */
.ardyss-spinner-core {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--ardyss-pink);
  transform: translate(-50%, -50%);
  animation: ardyss-pulse 1.2s ease-in-out infinite;
}

/* ── Loading text ── */
.ardyss-loader-text {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #212529;
  letter-spacing: 0.02em;
}
.ardyss-loader-sub {
  font-size: 11px;
  color: #6c757d;
  margin-top: -10px;
}

/* ── Animated dots after text ── */
.ardyss-loader-dots::after {
  content: '';
  display: inline-block;
  width: 16px;
  text-align: left;
  animation: ardyss-dots 1.4s steps(4, end) infinite;
}

/* ── Keyframes ── */
@keyframes ardyss-spin {
  to { transform: rotate(360deg); }
}
@keyframes ardyss-pulse {
  0%, 100% { transform: translate(-50%, -50%) scale(1);   opacity: 1;   }
  50%      { transform: translate(-50%, -50%) scale(1.5); opacity: 0.5; }
}
@keyframes ardyss-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes ardyss-pop-in {
  from { opacity: 0; transform: scale(0.92); }
  to   { opacity: 1; transform: scale(1);    }
}
@keyframes ardyss-dots {
  0%   { content: '';    }
  25%  { content: '.';   }
  50%  { content: '..';  }
  75%  { content: '...'; }
  100% { content: '';    }
}

/* ── Slim top-bar variant (inline, for quick actions) ── */
.ardyss-loader-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  width: 100%;
  background: rgba(214, 51, 132, 0.15);
  z-index: 99998;
  overflow: hidden;
}
.ardyss-loader-bar::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 35%;
  background: linear-gradient(90deg, transparent, var(--ardyss-pink), transparent);
  animation: ardyss-bar-slide 1.2s ease-in-out infinite;
}
@keyframes ardyss-bar-slide {
  0%   { left: -35%; }
  100% { left: 100%; }
}


/* =============================================
   ARDYSS PAGE FOOTER
   Distributor ID + legal links
   ============================================= */
.ardyss-footer {
  margin-top: 40px;
  padding: 22px 28px 28px;
  border-top: 1px solid var(--ardyss-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #6c757d;
  background: linear-gradient(180deg, transparent 0%, rgba(214,51,132,0.025) 100%);
}

/* Left side: distributor pill + copyright */
.footer-left {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}

.footer-id-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  color: #212529;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.footer-id-pill:hover {
  border-color: var(--ardyss-pink);
  box-shadow: 0 2px 8px rgba(214,51,132,0.08);
}
.footer-id-pill .id-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ardyss-green);
  box-shadow: 0 0 0 3px rgba(25,135,84,0.15);
}
.footer-id-pill .id-label {
  color: #6c757d;
  font-weight: 400;
}
.footer-id-pill .id-value {
  color: var(--ardyss-pink);
  font-weight: 600;
  letter-spacing: 0.02em;
}

.footer-copyright {
  font-size: 11px;
  color: #adb5bd;
}
.footer-copyright strong {
  font-weight: 500;
  color: #6c757d;
}

/* Right side: legal links */
.footer-links {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.footer-links a {
  color: #6c757d;
  text-decoration: none;
  font-size: 12px;
  padding: 4px 10px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.footer-links a:hover {
  color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
}
.footer-links .footer-sep {
  color: #dee2e6;
  font-size: 10px;
  user-select: none;
}

.footer-version {
  font-size: 10px;
  color: #adb5bd;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.05em;
}

/* Mobile stacking */
@media (max-width: 640px) {
  .ardyss-footer {
    flex-direction: column;
    align-items: flex-start;
    padding: 20px 18px 24px;
  }
  .footer-left {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .footer-links {
    width: 100%;
    justify-content: flex-start;
  }
}

/* Hide footer on print */
@media print {
  .ardyss-footer { display: none !important; }
}


/* =============================================
   LEGAL PAGES (Terms / Refund / Privacy)
   ============================================= */

.legal-wrapper {
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 32px;
  align-items: start;
}

@media (max-width: 991px) {
  .legal-wrapper {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* ── Sticky TOC ── */
.legal-toc {
  position: sticky;
  top: calc(var(--topbar-height) + 20px);
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  padding: 18px 16px;
  font-size: 13px;
}
@media (max-width: 991px) {
  .legal-toc {
    position: static;
    margin-bottom: 8px;
  }
}
.legal-toc-title {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--ardyss-border);
}
.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.legal-toc-list a {
  display: block;
  padding: 7px 10px;
  color: #495057;
  text-decoration: none;
  font-size: 12.5px;
  border-radius: 6px;
  border-left: 2px solid transparent;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  line-height: 1.4;
}
.legal-toc-list a:hover {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
}
.legal-toc-list a.active {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
  border-left-color: var(--ardyss-pink);
  font-weight: 500;
}

/* ── Legal content card ── */
.legal-doc {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 14px;
  padding: 36px 44px;
  font-size: 14px;
  line-height: 1.75;
  color: #343a40;
}
@media (max-width: 768px) {
  .legal-doc { padding: 24px 22px; }
}

/* Header strip with last-updated + actions */
.legal-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding: 14px 18px;
  background: var(--ardyss-pink-light);
  border-radius: 10px;
  margin-bottom: 28px;
  font-size: 12px;
}
.legal-meta-left {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--ardyss-pink-dark);
}
.legal-meta-icon {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ardyss-pink);
  font-size: 14px;
  font-weight: 600;
}
.legal-meta-label { color: #6c757d; }
.legal-meta-value { color: #212529; font-weight: 500; }
.legal-meta-actions { display: flex; gap: 8px; }
.legal-meta-actions .btn {
  font-size: 12px;
  padding: 5px 12px;
  border-radius: 6px;
}

/* Lead paragraph */
.legal-lead {
  font-size: 15px;
  line-height: 1.7;
  color: #495057;
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--ardyss-border);
}

/* Sections */
.legal-section {
  margin-top: 36px;
  scroll-margin-top: calc(var(--topbar-height) + 16px);
}
.legal-section:first-of-type { margin-top: 0; }
.legal-section h2 {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 14px;
  display: flex;
  align-items: baseline;
  gap: 10px;
}
.legal-section h2 .legal-section-num {
  font-size: 12px;
  font-weight: 600;
  color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
  padding: 3px 9px;
  border-radius: 6px;
  letter-spacing: 0.04em;
}
.legal-section h3 {
  font-size: 14px;
  font-weight: 600;
  color: #495057;
  margin-top: 22px;
  margin-bottom: 8px;
}
.legal-section p { margin-bottom: 14px; }
.legal-section ul, .legal-section ol {
  margin-bottom: 14px;
  padding-left: 22px;
}
.legal-section li {
  margin-bottom: 6px;
  line-height: 1.7;
}
.legal-section strong { color: #212529; font-weight: 600; }

/* Callout / notice box */
.legal-notice {
  display: flex;
  gap: 14px;
  padding: 14px 18px;
  border-radius: 10px;
  background: #fff8e6;
  border-left: 3px solid var(--ardyss-amber);
  margin: 18px 0;
  font-size: 13px;
  color: #5a4216;
}
.legal-notice.info {
  background: #eaf3ff;
  border-left-color: #0d6efd;
  color: #0a3678;
}
.legal-notice.success {
  background: #e8f5ee;
  border-left-color: var(--ardyss-green);
  color: #0a5c30;
}
.legal-notice-icon {
  font-size: 18px;
  line-height: 1;
  flex-shrink: 0;
}

/* Definition list */
.legal-deflist {
  background: var(--ardyss-gray-bg);
  border-radius: 10px;
  padding: 14px 18px;
  margin: 14px 0;
  font-size: 13px;
}
.legal-deflist dt {
  font-weight: 600;
  color: #212529;
  margin-top: 8px;
}
.legal-deflist dt:first-child { margin-top: 0; }
.legal-deflist dd {
  margin: 2px 0 0 0;
  color: #495057;
}

/* Contact card at bottom */
.legal-contact {
  margin-top: 36px;
  padding: 22px 24px;
  background: linear-gradient(135deg, var(--ardyss-pink-light) 0%, #fff 100%);
  border: 1px solid rgba(214,51,132,0.2);
  border-radius: 12px;
}
.legal-contact-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--ardyss-pink-dark);
  margin-bottom: 4px;
}
.legal-contact-sub {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 12px;
}
.legal-contact-row {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  font-size: 13px;
}
.legal-contact-row a {
  color: var(--ardyss-pink);
  text-decoration: none;
  font-weight: 500;
}
.legal-contact-row a:hover { text-decoration: underline; }
.legal-contact-row .label {
  color: #6c757d;
  font-size: 11px;
  display: block;
  margin-bottom: 2px;
}

/* Print: keep it readable */
@media print {
  .legal-toc { display: none !important; }
  .legal-wrapper { display: block !important; }
  .legal-doc {
    border: none;
    padding: 0;
    box-shadow: none;
  }
  .legal-meta-actions { display: none !important; }
}


/* =============================================
   COMBO / PACKAGE CONFIGURATOR MODAL
   For shapewear bundles — pick style, size, color
   ============================================= */

/* Modal shell — overrides default Bootstrap modal */
.combo-modal .modal-dialog {
  max-width: 720px;
}
.combo-modal .modal-content {
  border: none;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}

/* ── Header with gradient + combo preview ── */
.combo-header {
  position: relative;
  padding: 22px 28px 20px;
  background: linear-gradient(135deg, var(--ardyss-pink) 0%, var(--ardyss-sidebar) 100%);
  color: #fff;
}
.combo-header-eyebrow {
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
  opacity: 0.85;
  margin-bottom: 4px;
}
.combo-header-title {
  font-size: 18px;
  font-weight: 600;
  margin: 0;
}
.combo-header-sub {
  font-size: 12px;
  opacity: 0.85;
  margin-top: 4px;
}
.combo-header-close {
  position: absolute;
  top: 16px;
  right: 18px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.2);
  border: none;
  color: #fff;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
}
.combo-header-close:hover { background: rgba(255,255,255,0.35); }

/* Progress badge top-right */
.combo-progress {
  position: absolute;
  top: 22px;
  right: 64px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 500;
  background: rgba(255,255,255,0.18);
  padding: 5px 12px;
  border-radius: 20px;
  backdrop-filter: blur(4px);
}
.combo-progress .progress-count {
  font-weight: 600;
}

/* ── Body ── */
.combo-body {
  padding: 24px 28px;
  background: var(--ardyss-gray-bg);
  max-height: 60vh;
  overflow-y: auto;
}

/* ── Slot card — one per item ── */
.combo-slot {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 14px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.combo-slot:last-child { margin-bottom: 0; }
.combo-slot.is-complete {
  border-color: rgba(25,135,84,0.4);
  box-shadow: 0 2px 12px rgba(25,135,84,0.06);
}
.combo-slot.is-empty {
  border-color: var(--ardyss-border);
}

/* Slot header row */
.combo-slot-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.combo-slot-label {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: #212529;
}
.combo-slot-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 600;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}
.combo-slot.is-complete .combo-slot-num {
  background: var(--ardyss-green);
  color: #fff;
}

/* Status pill */
.combo-slot-status {
  font-size: 11px;
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.combo-slot-status.empty {
  background: #f1f3f5;
  color: #6c757d;
}
.combo-slot-status.partial {
  background: #fff3cd;
  color: #826200;
}
.combo-slot-status.complete {
  background: #d1e7dd;
  color: #0a5c30;
}
.combo-slot-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
}
.combo-slot-status.empty .dot { background: #adb5bd; }
.combo-slot-status.partial .dot { background: var(--ardyss-amber); animation: combo-pulse 1.4s ease-in-out infinite; }
.combo-slot-status.complete .dot { background: var(--ardyss-green); }
@keyframes combo-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.4; }
}

/* Style selector (top row) */
.combo-style-select {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  transition: border-color 0.15s;
}
.combo-style-select:hover {
  border-color: var(--ardyss-pink);
}
.combo-style-thumb {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  background: var(--ardyss-pink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.combo-style-info {
  flex: 1;
  min-width: 0;
}
.combo-style-info .name {
  font-size: 13px;
  font-weight: 500;
  color: #212529;
  margin-bottom: 2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.combo-style-info .name.placeholder { color: #adb5bd; font-weight: 400; }
.combo-style-info .meta {
  font-size: 11px;
  color: #6c757d;
}
.combo-style-arrow {
  color: #adb5bd;
  flex-shrink: 0;
  transition: transform 0.2s;
}

/* Size + color row (revealed when style is picked) */
.combo-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
  padding-top: 14px;
  border-top: 1px dashed var(--ardyss-border);
}
@media (max-width: 540px) {
  .combo-options { grid-template-columns: 1fr; }
}
.combo-options-block .label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
  font-weight: 600;
  margin-bottom: 8px;
}
.combo-options-block .label .label-value {
  text-transform: none;
  letter-spacing: 0;
  color: #212529;
  font-weight: 500;
  margin-left: 4px;
}

/* Size pills */
.size-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.size-pill {
  min-width: 38px;
  height: 32px;
  padding: 0 10px;
  border: 1.5px solid var(--ardyss-border);
  background: #fff;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 500;
  color: #495057;
  cursor: pointer;
  transition: all 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.size-pill:hover {
  border-color: var(--ardyss-pink);
  color: var(--ardyss-pink);
}
.size-pill.active {
  background: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
  color: #fff;
}
.size-pill.disabled {
  background: #f8f9fa;
  color: #ced4da;
  cursor: not-allowed;
  text-decoration: line-through;
  border-color: var(--ardyss-border);
}
.size-pill.disabled:hover {
  border-color: var(--ardyss-border);
  color: #ced4da;
}

/* Color swatches */
.color-picker {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.color-swatch {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  cursor: pointer;
  position: relative;
  border: 2px solid #fff;
  box-shadow: 0 0 0 1.5px var(--ardyss-border);
  transition: box-shadow 0.15s, transform 0.15s;
}
.color-swatch:hover {
  box-shadow: 0 0 0 1.5px var(--ardyss-pink);
  transform: scale(1.1);
}
.color-swatch.active {
  box-shadow: 0 0 0 2.5px var(--ardyss-pink);
}
.color-swatch.active::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 8px;
  height: 14px;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(45deg);
  top: -2px;
  left: -1px;
}
/* Color swatch styles - light colors get a check mark in dark */
.color-swatch[data-light="true"].active::after {
  border-color: #212529;
}

/* ── Footer / Summary ── */
.combo-footer {
  background: #fff;
  border-top: 1px solid var(--ardyss-border);
  padding: 16px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
}
.combo-footer-summary {
  font-size: 12px;
  color: #6c757d;
}
.combo-footer-summary strong {
  color: #212529;
  font-weight: 600;
}
.combo-footer-summary .progress-mini {
  display: inline-block;
  width: 100px;
  height: 5px;
  background: var(--ardyss-border);
  border-radius: 3px;
  vertical-align: middle;
  margin: 0 8px;
  overflow: hidden;
  position: relative;
}
.combo-footer-summary .progress-mini::after {
  content: '';
  position: absolute;
  inset: 0;
  width: var(--combo-progress, 0%);
  background: linear-gradient(90deg, var(--ardyss-pink), var(--ardyss-pink-dark));
  transition: width 0.3s ease;
  border-radius: 3px;
}

.combo-footer-actions {
  display: flex;
  gap: 10px;
}
.combo-footer-actions .btn {
  min-width: 110px;
  font-weight: 500;
  border-radius: 22px;
  padding: 9px 22px;
  font-size: 13px;
}
.btn-combo-back {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  color: #6c757d;
}
.btn-combo-back:hover {
  background: var(--ardyss-gray-bg);
  color: #212529;
  border-color: #adb5bd;
}
.btn-combo-save:disabled,
.btn-combo-save.disabled {
  background: #e9ecef !important;
  border-color: #e9ecef !important;
  color: #adb5bd !important;
  cursor: not-allowed;
  box-shadow: none;
}

/* Style dropdown menu (when shown) */
.combo-style-menu {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  margin-top: 6px;
  padding: 6px;
  max-height: 240px;
  overflow-y: auto;
  box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
.combo-style-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.combo-style-option:hover {
  background: var(--ardyss-pink-light);
}
.combo-style-option.selected {
  background: var(--ardyss-pink-light);
}
.combo-style-option .opt-thumb {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  background: #f1f3f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  flex-shrink: 0;
}
.combo-style-option .opt-name {
  font-size: 13px;
  color: #212529;
}
.combo-style-option .opt-meta {
  font-size: 11px;
  color: #6c757d;
}

/* Toast for "package saved" inside modal */
.combo-toast {
  position: absolute;
  top: 16px;
  left: 50%;
  transform: translateX(-50%) translateY(-60px);
  background: var(--ardyss-green);
  color: #fff;
  padding: 8px 18px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  box-shadow: 0 4px 16px rgba(25,135,84,0.3);
  transition: transform 0.3s ease;
  z-index: 10;
}
.combo-toast.show {
  transform: translateX(-50%) translateY(0);
}


/* =============================================
   SWEETALERT 2 — ARDYSS THEME
   Branded popup for cart confirmations and beyond
   ============================================= */

/* Backdrop blur */
.swal2-container.ardyss-backdrop {
  background: rgba(33, 37, 41, 0.45) !important;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

/* Popup shell */
.swal2-popup.ardyss-swal {
  font-family: 'Poppins', sans-serif !important;
  border-radius: 18px !important;
  padding: 0 !important;
  width: 420px !important;
  max-width: 92vw !important;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18), 0 8px 24px rgba(214,51,132,0.12);
  border: 1px solid rgba(214,51,132,0.08);
}

/* Pink-gradient hero strip with icon */
.swal2-popup.ardyss-swal::before {
  content: '';
  display: block;
  height: 6px;
  background: linear-gradient(90deg, var(--ardyss-pink), var(--ardyss-sidebar));
}

/* ── Icon area (generic — uses SweetAlert's native icon, just recolored) ── */
.swal2-popup.ardyss-swal .swal2-icon {
  margin: 28px auto 14px !important;
  width: 72px !important;
  height: 72px !important;
  border-width: 3px !important;
  position: relative;
}

/* SUCCESS — green check */
.swal2-popup.ardyss-swal .swal2-icon.swal2-success {
  border-color: rgba(25,135,84,0.3) !important;
  background: rgba(25,135,84,0.06) !important;
  box-shadow: 0 6px 20px rgba(25,135,84,0.15);
}
.swal2-popup.ardyss-swal .swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--ardyss-green) !important;
  height: 4px !important;
}
.swal2-popup.ardyss-swal .swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(25,135,84,0.4) !important;
}
.swal2-popup.ardyss-swal .swal2-icon.swal2-success .swal2-success-fix,
.swal2-popup.ardyss-swal .swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-popup.ardyss-swal .swal2-icon.swal2-success .swal2-success-circular-line-right {
  background-color: transparent !important;
}

/* ERROR — red X */
.swal2-popup.ardyss-swal .swal2-icon.swal2-error {
  border-color: rgba(220,53,69,0.35) !important;
  background: rgba(220,53,69,0.06) !important;
  color: #dc3545 !important;
  box-shadow: 0 6px 20px rgba(220,53,69,0.15);
}
.swal2-popup.ardyss-swal .swal2-icon.swal2-error [class^='swal2-x-mark-line'] {
  background-color: #dc3545 !important;
  height: 4px !important;
}

/* WARNING — amber ! */
.swal2-popup.ardyss-swal .swal2-icon.swal2-warning {
  border-color: rgba(253,126,20,0.35) !important;
  background: rgba(253,126,20,0.08) !important;
  color: var(--ardyss-amber) !important;
  box-shadow: 0 6px 20px rgba(253,126,20,0.15);
  font-weight: 600 !important;
}

/* INFO — pink i (Ardyss-flavored) */
.swal2-popup.ardyss-swal .swal2-icon.swal2-info {
  border-color: rgba(214,51,132,0.35) !important;
  background: var(--ardyss-pink-light) !important;
  color: var(--ardyss-pink) !important;
  box-shadow: 0 6px 20px rgba(214,51,132,0.15);
  font-weight: 600 !important;
}

/* QUESTION — neutral gray ? */
.swal2-popup.ardyss-swal .swal2-icon.swal2-question {
  border-color: rgba(108,117,125,0.35) !important;
  background: rgba(108,117,125,0.06) !important;
  color: #495057 !important;
  box-shadow: 0 6px 20px rgba(0,0,0,0.10);
  font-weight: 600 !important;
}

/* ── CART variant — branded shopping bag instead of stock icon ── */
.swal2-popup.ardyss-swal-cart .swal2-icon {
  border: none !important;
  background: linear-gradient(135deg, var(--ardyss-pink-light) 0%, #fff 100%) !important;
  width: 76px !important;
  height: 76px !important;
  box-shadow: 0 6px 20px rgba(214,51,132,0.18);
}
.swal2-popup.ardyss-swal-cart .swal2-icon.swal2-success [class^='swal2-success-line'],
.swal2-popup.ardyss-swal-cart .swal2-icon.swal2-success .swal2-success-ring,
.swal2-popup.ardyss-swal-cart .swal2-icon.swal2-success .swal2-success-fix,
.swal2-popup.ardyss-swal-cart .swal2-icon.swal2-success .swal2-success-circular-line-left,
.swal2-popup.ardyss-swal-cart .swal2-icon.swal2-success .swal2-success-circular-line-right {
  display: none !important;
}
.swal2-popup.ardyss-swal-cart .swal2-icon::after {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 36px;
  height: 36px;
  background: var(--ardyss-pink);
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 2 3 6v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2V6l-3-4Z'/><line x1='3' y1='6' x2='21' y2='6'/><path d='M16 10a4 4 0 0 1-8 0'/></svg>") center/contain no-repeat;
  animation: swal-bag-bounce 0.5s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
.swal2-popup.ardyss-swal-cart .swal2-icon::before {
  content: '✓';
  position: absolute;
  top: 8px;
  right: 8px;
  width: 24px;
  height: 24px;
  background: var(--ardyss-green);
  color: #fff;
  border-radius: 50%;
  font-size: 13px;
  font-weight: 700;
  line-height: 24px;
  text-align: center;
  box-shadow: 0 2px 6px rgba(25,135,84,0.35);
  animation: swal-check-pop 0.4s 0.25s cubic-bezier(0.68, -0.55, 0.27, 1.55) both;
}
@keyframes swal-bag-bounce {
  0%   { transform: scale(0.5); opacity: 0; }
  60%  { transform: scale(1.15); opacity: 1; }
  100% { transform: scale(1); }
}
@keyframes swal-check-pop {
  from { transform: scale(0); }
  to   { transform: scale(1); }
}

/* Title */
.swal2-popup.ardyss-swal .swal2-title {
  font-family: 'Poppins', sans-serif !important;
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #212529 !important;
  padding: 0 32px !important;
  margin: 0 !important;
}

/* Body */
.swal2-popup.ardyss-swal .swal2-html-container {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13.5px !important;
  color: #6c757d !important;
  margin: 12px 32px 22px !important;
  padding: 0 !important;
  line-height: 1.55 !important;
}
.swal2-popup.ardyss-swal .swal2-html-container .ardyss-swal-product {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
  padding: 6px 14px;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
  margin-top: 8px;
}

/* Action buttons */
.swal2-popup.ardyss-swal .swal2-actions {
  margin: 0 !important;
  padding: 16px 24px 22px !important;
  gap: 10px !important;
  display: flex !important;
  justify-content: center !important;
  background: var(--ardyss-gray-bg);
  border-top: 1px solid var(--ardyss-border);
}
.swal2-popup.ardyss-swal .swal2-actions button {
  font-family: 'Poppins', sans-serif !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  padding: 10px 22px !important;
  border-radius: 22px !important;
  min-width: 130px;
  margin: 0 !important;
  box-shadow: none !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease !important;
}
.swal2-popup.ardyss-swal .swal2-confirm {
  background: var(--ardyss-pink) !important;
  border: 1px solid var(--ardyss-pink) !important;
  color: #fff !important;
}
.swal2-popup.ardyss-swal .swal2-confirm:hover {
  background: var(--ardyss-pink-dark) !important;
  border-color: var(--ardyss-pink-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(214,51,132,0.3) !important;
}
.swal2-popup.ardyss-swal .swal2-cancel {
  background: #fff !important;
  border: 1px solid var(--ardyss-border) !important;
  color: #6c757d !important;
}
.swal2-popup.ardyss-swal .swal2-cancel:hover {
  background: var(--ardyss-pink-light) !important;
  color: var(--ardyss-pink-dark) !important;
  border-color: var(--ardyss-pink) !important;
}
.swal2-popup.ardyss-swal .swal2-actions button:focus,
.swal2-popup.ardyss-swal .swal2-actions button:focus-visible {
  outline: none !important;
  box-shadow: 0 0 0 3px rgba(214,51,132,0.18) !important;
}

/* Timer progress bar — pink gradient */
.swal2-popup.ardyss-swal .swal2-timer-progress-bar-container {
  height: 3px !important;
  background: rgba(214,51,132,0.1) !important;
}
.swal2-popup.ardyss-swal .swal2-timer-progress-bar {
  background: linear-gradient(90deg, var(--ardyss-pink), var(--ardyss-pink-dark)) !important;
}

/* Close X */
.swal2-popup.ardyss-swal .swal2-close {
  color: #adb5bd !important;
  font-size: 26px !important;
  width: 36px !important;
  height: 36px !important;
  top: 12px !important;
  right: 14px !important;
  transition: color 0.15s, background 0.15s !important;
  border-radius: 50% !important;
}
.swal2-popup.ardyss-swal .swal2-close:hover {
  color: var(--ardyss-pink) !important;
  background: var(--ardyss-pink-light) !important;
}

/* Toast variant (top-right) */
.swal2-popup.ardyss-swal.swal2-toast {
  width: 360px !important;
  padding: 14px 18px !important;
}
.swal2-popup.ardyss-swal.swal2-toast::before {
  display: none;
}
.swal2-popup.ardyss-swal.swal2-toast .swal2-icon {
  margin: 0 14px 0 0 !important;
  width: 40px !important;
  height: 40px !important;
  box-shadow: none;
}
.swal2-popup.ardyss-swal.swal2-toast .swal2-icon::after {
  width: 22px;
  height: 22px;
}
.swal2-popup.ardyss-swal.swal2-toast .swal2-icon::before {
  width: 16px;
  height: 16px;
  font-size: 9px;
  line-height: 16px;
  top: 2px;
  right: 2px;
}
.swal2-popup.ardyss-swal.swal2-toast .swal2-title {
  font-size: 14px !important;
  padding: 0 !important;
}
.swal2-popup.ardyss-swal.swal2-toast .swal2-html-container {
  margin: 2px 0 0 !important;
  font-size: 12px !important;
}
.swal2-popup.ardyss-swal.swal2-toast .swal2-actions {
  display: none !important;
}


/* =============================================
   CREDIT CARD IFRAME FIELDS
   Bancedge / CollectJS — Bank of California
   ============================================= */

/* ── Row layout: Number / Exp / CVV ── */
.cc-field-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 12px;
  margin-bottom: 14px;
}
@media (max-width: 540px) {
  .cc-field-row {
    grid-template-columns: 1fr 1fr;
  }
  .cc-field-row .cc-field-cell:first-child { grid-column: 1 / -1; }
}

/* Single field cell (label + iframe wrapper) */
.cc-field-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cc-field-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #6c757d;
  display: flex;
  align-items: center;
  gap: 6px;
}
.cc-field-label .cc-required {
  color: var(--ardyss-pink);
  font-size: 10px;
}
.cc-field-label .cc-secure-icon {
  color: #adb5bd;
  margin-left: auto;
}

/* ── The iframe wrapper (id="Ccnumber" / "Ccexp" / "Cccvv" or class .cc-field) ── */
#Ccnumber,
#Ccexp,
#Cccvv,
#Ccccvv,
.cc-field {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  padding: 0 12px;
  height: 44px;
  overflow: hidden;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

/* Optional left icon slot (place inside the wrapper before the iframe) */
.cc-field-icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  color: #adb5bd;
  margin-right: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Iframe itself — fills the wrapper */
.CollectJSInlineIframe,
#Ccnumber > iframe,
#Ccexp > iframe,
#Cccvv > iframe,
#Ccccvv > iframe,
.cc-field > iframe {
  flex: 1;
  width: 100% !important;
  height: 30px !important;
  border: none !important;
  display: block;
  background: transparent;
}

/* ── Focus / valid / invalid states ──
   CollectJS toggles .CollectJSFocused / .CollectJSValid / .CollectJSInvalid
   on the iframe element itself, so we use :has() on the parent.            */

/* Focus */
#Ccnumber:has(.CollectJSFocused),
#Ccexp:has(.CollectJSFocused),
#Cccvv:has(.CollectJSFocused),
#Ccccvv:has(.CollectJSFocused),
.cc-field:has(.CollectJSFocused) {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}
#Ccnumber:has(.CollectJSFocused) .cc-field-icon,
#Ccexp:has(.CollectJSFocused) .cc-field-icon,
#Cccvv:has(.CollectJSFocused) .cc-field-icon,
.cc-field:has(.CollectJSFocused) .cc-field-icon {
  color: var(--ardyss-pink);
}

/* Valid */
#Ccnumber:has(.CollectJSValid),
#Ccexp:has(.CollectJSValid),
#Cccvv:has(.CollectJSValid),
#Ccccvv:has(.CollectJSValid),
.cc-field:has(.CollectJSValid) {
  border-color: rgba(25,135,84,0.45);
  background: rgba(25,135,84,0.03);
}
#Ccnumber:has(.CollectJSValid) .cc-field-icon,
#Ccexp:has(.CollectJSValid) .cc-field-icon,
#Cccvv:has(.CollectJSValid) .cc-field-icon,
.cc-field:has(.CollectJSValid) .cc-field-icon {
  color: var(--ardyss-green);
}
/* Tiny green check on the right when valid */
#Ccnumber:has(.CollectJSValid)::after,
#Ccexp:has(.CollectJSValid)::after,
#Cccvv:has(.CollectJSValid)::after,
#Ccccvv:has(.CollectJSValid)::after,
.cc-field:has(.CollectJSValid)::after {
  content: '✓';
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  background: var(--ardyss-green);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
  border-radius: 50%;
  pointer-events: none;
}

/* Invalid — only after the user has typed (not for empty fields) */
#Ccnumber:has(.CollectJSInvalid:not(.CollectJSEmpty)),
#Ccexp:has(.CollectJSInvalid:not(.CollectJSEmpty)),
#Cccvv:has(.CollectJSInvalid:not(.CollectJSEmpty)),
#Ccccvv:has(.CollectJSInvalid:not(.CollectJSEmpty)),
.cc-field:has(.CollectJSInvalid:not(.CollectJSEmpty)) {
  border-color: rgba(220,53,69,0.5);
  background: rgba(220,53,69,0.03);
}
#Ccnumber:has(.CollectJSInvalid:not(.CollectJSEmpty)) .cc-field-icon,
#Ccexp:has(.CollectJSInvalid:not(.CollectJSEmpty)) .cc-field-icon,
#Cccvv:has(.CollectJSInvalid:not(.CollectJSEmpty)) .cc-field-icon,
.cc-field:has(.CollectJSInvalid:not(.CollectJSEmpty)) .cc-field-icon {
  color: #dc3545;
}

/* Inline error/help text under a field */
.cc-field-error {
  font-size: 11px;
  color: #dc3545;
  margin-top: 2px;
  display: none;
}
.cc-field-cell.has-error .cc-field-error { display: block; }
.cc-field-help {
  font-size: 11px;
  color: #adb5bd;
  margin-top: 2px;
}

/* ── Card-brand strip (logos under the row, decorative) ── */
.cc-accepted {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: -4px;
  margin-bottom: 14px;
  font-size: 11px;
  color: #adb5bd;
}
.cc-accepted-label { letter-spacing: 0.04em; text-transform: uppercase; font-weight: 600; }
.cc-brand-pill {
  display: inline-flex;
  align-items: center;
  height: 22px;
  padding: 0 8px;
  border-radius: 4px;
  background: #f1f3f5;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: #495057;
}
.cc-brand-pill.visa     { background: #1a1f71; color: #fff; }
.cc-brand-pill.mc       { background: linear-gradient(90deg, #eb001b 50%, #f79e1b 50%); color: #fff; }
.cc-brand-pill.amex     { background: #2e77bb; color: #fff; }
.cc-brand-pill.discover { background: #ff6000; color: #fff; }

/* ── Secure-payment footer banner ── */
.cc-secure-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  background: var(--ardyss-pink-light);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--ardyss-pink-dark);
  margin-top: 10px;
}
.cc-secure-banner svg {
  flex-shrink: 0;
  color: var(--ardyss-pink);
}
.cc-secure-banner strong {
  color: var(--ardyss-pink);
  font-weight: 600;
}


/* =============================================
   AMBASSADOR PROGRAM (UpPromote integration)
   ============================================= */

.ambassador-card { position: relative; overflow: hidden; }

/* ── HERO row (icon + titles + status pill) ── */
.ambassador-hero {
  display: flex;
  gap: 14px;
  align-items: center;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--ardyss-border);
  margin-bottom: 18px;
}
.ambassador-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  background: linear-gradient(135deg, var(--ardyss-pink) 0%, var(--ardyss-sidebar) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 6px 20px rgba(214,51,132,0.28);
}
.ambassador-info { flex: 1; min-width: 0; }
.ambassador-title {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 2px;
}
.ambassador-sub {
  font-size: 12px;
  color: #6c757d;
}
.ambassador-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 500;
  padding: 4px 12px;
  border-radius: 20px;
  background: linear-gradient(135deg, #d1e7dd 0%, #e8f5ee 100%);
  color: #0a5c30;
  flex-shrink: 0;
}
.ambassador-status::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ardyss-green);
  box-shadow: 0 0 0 3px rgba(25,135,84,0.18);
}

/* ── Referral link copy box ── */
.ambassador-link-row { margin-bottom: 16px; }
.ambassador-link-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 6px;
}
.ambassador-link-box {
  display: flex;
  align-items: center;
  background: var(--ardyss-gray-bg);
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ambassador-link-box:focus-within {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}
.ambassador-link-icon {
  padding: 0 12px;
  color: #adb5bd;
  flex-shrink: 0;
  display: flex;
  align-items: center;
}
.ambassador-link-text {
  flex: 1;
  min-width: 0;
  padding: 10px 4px;
  background: transparent;
  border: none;
  font-family: 'Courier New', monospace;
  font-size: 12.5px;
  color: #212529;
  outline: none;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}
.ambassador-link-copy {
  padding: 0 16px;
  height: 100%;
  align-self: stretch;
  background: var(--ardyss-pink);
  color: #fff;
  border: none;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.ambassador-link-copy:hover { background: var(--ardyss-pink-dark); }
.ambassador-link-copy.copied {
  background: var(--ardyss-green);
}

/* ── IDs grid (Shopify + UpPromote) ── */
.ambassador-id-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-bottom: 18px;
}
@media (max-width: 540px) {
  .ambassador-id-grid { grid-template-columns: 1fr; }
}
.ambassador-id-card {
  background: var(--ardyss-gray-bg);
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 10px 12px;
  display: flex;
  align-items: center;
  gap: 10px;
}
.ambassador-id-logo {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-weight: 700;
  font-size: 14px;
  color: #fff;
}
.ambassador-id-logo.shopify { background: #95bf47; }
.ambassador-id-logo.uppromote {
  background: linear-gradient(135deg, #5b9aff 0%, #2d5fcc 100%);
}
.ambassador-id-info { flex: 1; min-width: 0; }
.ambassador-id-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #adb5bd;
  font-weight: 600;
  margin-bottom: 1px;
}
.ambassador-id-value {
  font-family: 'Courier New', monospace;
  font-size: 12px;
  color: #212529;
  font-weight: 500;
  text-overflow: ellipsis;
  white-space: nowrap;
  overflow: hidden;
}

/* ── Action row ── */
.ambassador-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.ambassador-actions .btn {
  font-size: 13px;
  padding: 9px 18px;
  border-radius: 8px;
  font-weight: 500;
}

/* ── NOT-REGISTERED CTA ── */
.ambassador-cta {
  text-align: center;
  padding: 14px 8px;
}
.ambassador-cta-icon {
  width: 72px;
  height: 72px;
  margin: 0 auto 14px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--ardyss-pink-light) 0%, #fff 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 34px;
  box-shadow: 0 6px 20px rgba(214,51,132,0.18);
}
.ambassador-cta-title {
  font-size: 18px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 6px;
}
.ambassador-cta-sub {
  font-size: 13px;
  color: #6c757d;
  max-width: 480px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
.ambassador-cta-perks {
  display: flex;
  justify-content: center;
  gap: 22px;
  flex-wrap: wrap;
  margin-bottom: 22px;
  font-size: 12px;
  color: #495057;
}
.ambassador-cta-perks span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.ambassador-cta-perks .perk-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ardyss-pink);
}
.ambassador-cta .btn {
  padding: 11px 28px;
  border-radius: 24px;
  font-weight: 500;
  font-size: 14px;
}


/* =============================================
   DAILY PROMO MODAL — opens on dashboard load
   Replaces the old GIF promo
   ============================================= */
.promo-modal .modal-dialog { max-width: 620px; }
.promo-modal .modal-content {
  border: none;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.22);
}
.promo-modal-backdrop.show { backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }

/* Hero strip on top */
.promo-hero {
  position: relative;
  height: 240px;
  background: linear-gradient(135deg, #d63384 0%, #c0185e 60%, #8a0e44 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  overflow: hidden;
  text-align: center;
}
.promo-hero::before,
.promo-hero::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.08);
  pointer-events: none;
}
.promo-hero::before {
  width: 240px; height: 240px;
  top: -90px; right: -60px;
}
.promo-hero::after {
  width: 160px; height: 160px;
  bottom: -60px; left: -50px;
  background: rgba(255,255,255,0.06);
}
.promo-hero-content { position: relative; z-index: 2; padding: 24px; }
.promo-eyebrow {
  display: inline-block;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(4px);
  padding: 6px 14px;
  border-radius: 16px;
  margin-bottom: 14px;
  color: #fff;
}
.promo-title {
  font-family: 'Times New Roman', Times, serif;
  font-style: italic;
  font-weight: 600;
  font-size: 44px;
  line-height: 48px;
  margin: 0;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.promo-discount {
  display: inline-flex;
  align-items: baseline;
  gap: 4px;
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 64px;
  line-height: 1;
  margin-top: 12px;
  text-shadow: 0 2px 12px rgba(0,0,0,0.15);
}
.promo-discount sup { font-size: 32px; font-weight: 600; opacity: 0.9; }
.promo-discount sub { font-size: 18px; font-weight: 500; opacity: 0.9; }

/* Close button */
.promo-close {
  position: absolute;
  top: 14px;
  right: 16px;
  z-index: 5;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: rgba(255,255,255,0.22);
  border: none;
  color: #fff;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.promo-close:hover { background: rgba(255,255,255,0.4); transform: rotate(90deg); }

/* Body */
.promo-body {
  padding: 26px 32px 16px;
  text-align: center;
}
.promo-product {
  font-size: 13px;
  font-weight: 500;
  color: var(--ardyss-pink);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 6px;
}
.promo-headline {
  font-size: 22px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 8px;
  line-height: 1.3;
}
.promo-description {
  font-size: 14px;
  color: #6c757d;
  line-height: 1.6;
  margin-bottom: 18px;
}

/* Promo code box */
.promo-code-box {
  display: inline-flex;
  align-items: center;
  gap: 0;
  border: 1.5px dashed var(--ardyss-pink);
  border-radius: 10px;
  padding: 4px 4px 4px 16px;
  background: var(--ardyss-pink-light);
  margin-bottom: 18px;
  max-width: 100%;
}
.promo-code-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--ardyss-pink-dark);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-right: 10px;
}
.promo-code-value {
  font-family: 'Courier New', monospace;
  font-size: 16px;
  font-weight: 700;
  color: #212529;
  letter-spacing: 0.08em;
  margin-right: 10px;
}
.promo-code-copy {
  background: var(--ardyss-pink);
  color: #fff;
  border: none;
  padding: 7px 14px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s;
}
.promo-code-copy:hover { background: var(--ardyss-pink-dark); }
.promo-code-copy.copied { background: var(--ardyss-green); }

/* Countdown */
.promo-countdown {
  font-size: 12px;
  color: #6c757d;
  margin-bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.promo-countdown .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ardyss-amber);
  animation: promo-pulse 1.4s ease-in-out infinite;
}
@keyframes promo-pulse {
  0%,100% { opacity: 1; }
  50%     { opacity: 0.35; }
}

/* Footer actions */
.promo-footer {
  padding: 16px 32px 24px;
  background: var(--ardyss-gray-bg);
  border-top: 1px solid var(--ardyss-border);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.promo-footer .btn-shop {
  background: var(--ardyss-pink);
  color: #fff;
  border: none;
  padding: 12px 32px;
  border-radius: 26px;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.promo-footer .btn-shop:hover {
  background: var(--ardyss-pink-dark);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(214,51,132,0.3);
}
.promo-footer .btn-later {
  background: none;
  border: none;
  color: #adb5bd;
  font-size: 12px;
  cursor: pointer;
  padding: 6px 12px;
  transition: color 0.15s;
}
.promo-footer .btn-later:hover { color: #6c757d; text-decoration: underline; }

/* Mobile */
@media (max-width: 540px) {
  .promo-hero { height: 200px; }
  .promo-title { font-size: 32px; line-height: 36px; }
  .promo-discount { font-size: 48px; }
  .promo-discount sup { font-size: 22px; }
  .promo-body { padding: 22px 22px 14px; }
  .promo-footer { padding: 14px 22px 22px; }
}

/* ── GIF VARIANT — when the promo is a single image with all deals inside ── */
.promo-modal.promo-modal-gif .modal-dialog { max-width: 680px; }

.promo-gif-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 56px 12px 22px;
  background: linear-gradient(90deg, var(--ardyss-pink-light) 0%, #fff 100%);
  border-bottom: 1px solid var(--ardyss-border);
}
.promo-gif-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ardyss-pink-dark);
}
.promo-gif-eyebrow .dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.18);
  animation: promo-pulse 1.6s ease-in-out infinite;
}
.promo-gif-date {
  font-size: 11px;
  color: #6c757d;
  font-weight: 500;
  letter-spacing: 0.04em;
}

.promo-gif-wrap {
  background: #fff;
  display: block;
  text-align: center;
  line-height: 0;          /* kill inline-block whitespace under <img> */
}
.promo-gif-img {
  width: 100%;
  height: auto;
  max-width: 100%;
  display: block;
  margin: 0 auto;
}

/* In the GIF variant, the close button needs a darker shadow because some GIFs
   may render with light backgrounds — give it a small backdrop. */
.promo-modal.promo-modal-gif .promo-close {
  background: rgba(33,37,41,0.45);
  color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.promo-modal.promo-modal-gif .promo-close:hover {
  background: rgba(33,37,41,0.7);
}

@media (max-width: 540px) {
  .promo-gif-topbar { padding: 12px 50px 10px 16px; }
  .promo-gif-eyebrow { font-size: 10px; }
  .promo-gif-date { display: none; }
}

/* ── Carousel inside the promo modal ── */
.promo-carousel { position: relative; line-height: 0; }
.promo-carousel .carousel-item img {
  width: 100%;
  height: auto;
  display: block;
}
.promo-slide-link {
  display: block;
  line-height: 0;
}

/* Indicators (dots) — small pink pills */
.promo-carousel .promo-carousel-indicators {
  margin: 0;
  bottom: 10px;
  gap: 6px;
}
.promo-carousel .promo-carousel-indicators button {
  width: 8px;
  height: 8px;
  margin: 0;
  border-radius: 50%;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(0,0,0,0.08);
  opacity: 1;
  transition: width 0.25s ease, background 0.15s, transform 0.15s;
}
.promo-carousel .promo-carousel-indicators button:hover {
  background: #fff;
  transform: scale(1.15);
}
.promo-carousel .promo-carousel-indicators button.active {
  width: 22px;
  border-radius: 4px;
  background: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
}

/* Prev / Next arrows — hidden by default, fade in on hover */
.promo-carousel .carousel-control-prev,
.promo-carousel .carousel-control-next {
  width: 38px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.promo-carousel:hover .carousel-control-prev,
.promo-carousel:hover .carousel-control-next {
  opacity: 1;
}
.promo-carousel .carousel-control-prev-icon,
.promo-carousel .carousel-control-next-icon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: rgba(33,37,41,0.55);
  background-size: 14px 14px;
  background-position: center;
  transition: background-color 0.15s, transform 0.15s;
}
.promo-carousel .carousel-control-prev:hover .carousel-control-prev-icon,
.promo-carousel .carousel-control-next:hover .carousel-control-next-icon {
  background-color: var(--ardyss-pink);
  transform: scale(1.1);
}

/* On mobile, show arrows always (no hover trigger) */
@media (max-width: 540px) {
  .promo-carousel .carousel-control-prev,
  .promo-carousel .carousel-control-next {
    opacity: 1;
    width: 32px;
  }
  .promo-carousel .carousel-control-prev-icon,
  .promo-carousel .carousel-control-next-icon {
    width: 26px;
    height: 26px;
  }
  .promo-carousel .promo-carousel-indicators { bottom: 6px; }
  .promo-carousel .promo-carousel-indicators button { width: 6px; height: 6px; }
  .promo-carousel .promo-carousel-indicators button.active { width: 16px; }
}


/* =============================================
   PROFILE PAGE
   General info, contact, shipping, login, cards
   ============================================= */

/* ── Hero card (cover + avatar overlay + identity) ── */
.profile-hero-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}

.profile-cover {
  position: relative;
  height: 180px;
  overflow: hidden;
  background: linear-gradient(135deg, var(--ardyss-pink) 0%, var(--ardyss-sidebar) 100%);
}
.profile-cover .carousel,
.profile-cover .carousel-inner,
.profile-cover .carousel-item { height: 100%; }
.profile-cover img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Hero body that overlaps the cover */
.profile-hero-body {
  position: relative;
  padding: 0 28px 22px;
  display: grid;
  grid-template-columns: 144px 1fr 220px;
  gap: 20px;
  align-items: start;
}
@media (max-width: 768px) {
  .profile-hero-body {
    grid-template-columns: 1fr;
    text-align: center;
    padding: 0 20px 22px;
  }
}

/* Avatar overlapping cover */
.profile-avatar-frame {
  position: relative;
  width: 130px;
  height: 130px;
  margin-top: -65px;
  border-radius: 50%;
  background: #fff;
  padding: 5px;
  box-shadow: 0 6px 20px rgba(0,0,0,0.12);
}
@media (max-width: 768px) {
  .profile-avatar-frame { margin: -65px auto 0; }
}
.profile-avatar-img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}
.profile-avatar-edit {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--ardyss-pink);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: 3px solid #fff;
  transition: background 0.15s, transform 0.15s;
}
.profile-avatar-edit:hover {
  background: var(--ardyss-pink-dark);
  transform: scale(1.05);
}
.profile-avatar-edit svg {
  width: 16px;
  height: 16px;
}

/* Identity column */
.profile-identity { padding-top: 14px; min-width: 0; }
.profile-name {
  font-size: 24px;
  font-weight: 600;
  color: #212529;
  margin: 0;
  line-height: 1.2;
}
.profile-name span { font-weight: 500; }
.profile-rank {
  display: inline-block;
  font-size: 12px;
  font-weight: 500;
  color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
  padding: 4px 12px;
  border-radius: 14px;
  margin-top: 6px;
  letter-spacing: 0.04em;
}
.profile-meta-list {
  list-style: none;
  padding: 0;
  margin: 14px 0 0;
  font-size: 12.5px;
  color: #495057;
}
.profile-meta-list li {
  padding: 5px 0;
  display: flex;
  align-items: center;
  gap: 10px;
}
.profile-meta-list li svg {
  width: 14px;
  height: 14px;
  color: #adb5bd;
  flex-shrink: 0;
}
.profile-meta-list strong {
  color: #212529;
  font-weight: 600;
  font-family: 'Courier New', monospace;
  letter-spacing: 0.02em;
}
@media (max-width: 768px) {
  .profile-meta-list li { justify-content: center; }
}

/* Quick stats column */
.profile-quick-stats {
  display: flex;
  gap: 14px;
  padding-top: 14px;
}
@media (max-width: 768px) {
  .profile-quick-stats { justify-content: center; }
}
.quick-stat {
  flex: 1;
  background: var(--ardyss-gray-bg);
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 14px 12px;
  text-align: center;
}
.quick-stat-value {
  font-size: 22px;
  font-weight: 600;
  color: var(--ardyss-pink);
  line-height: 1;
  margin-bottom: 4px;
  font-feature-settings: 'tnum';
}
.quick-stat-label {
  font-size: 10.5px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 500;
}

/* Hero footer — file upload row */
.profile-hero-footer {
  padding: 16px 28px;
  background: var(--ardyss-gray-bg);
  border-top: 1px solid var(--ardyss-border);
}
.profile-upload-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.profile-upload-row .upload-label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.profile-file-upload {
  flex: 1;
  min-width: 200px;
  font-size: 12.5px;
  padding: 6px 8px;
  border: 1px solid var(--ardyss-border);
  border-radius: 6px;
  background: #fff;
  color: #495057;
  font-family: inherit;
}
.profile-file-upload::-webkit-file-upload-button {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  font-size: 11.5px;
  font-weight: 500;
  margin-right: 10px;
  cursor: pointer;
  font-family: inherit;
}
.profile-file-upload::-webkit-file-upload-button:hover {
  background: var(--ardyss-pink);
  color: #fff;
}

/* ── W9 verified row ── */
.profile-w9-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: rgba(25,135,84,0.05);
  border: 1px solid rgba(25,135,84,0.18);
  border-radius: 8px;
  margin: 14px 0 18px;
  font-size: 13px;
  color: #495057;
  flex-wrap: wrap;
  gap: 8px;
}

/* ── Info grid (label/value pairs) ── */
.profile-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--ardyss-border);
  margin-top: 12px;
}
@media (max-width: 540px) {
  .profile-info-grid { grid-template-columns: 1fr; }
}
.profile-info-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 0;
  border-bottom: 1px solid var(--ardyss-border);
  font-size: 13px;
  gap: 10px;
}
.profile-info-row:nth-child(odd) { padding-right: 16px; }
.profile-info-row:nth-child(even) { padding-left: 16px; border-left: 1px solid var(--ardyss-border); }
@media (max-width: 540px) {
  .profile-info-row,
  .profile-info-row:nth-child(odd),
  .profile-info-row:nth-child(even) {
    padding: 11px 0;
    border-left: none;
  }
}
.profile-info-label {
  font-size: 11.5px;
  color: #6c757d;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 500;
  flex-shrink: 0;
}
.profile-info-value {
  color: #212529;
  font-weight: 500;
  text-align: right;
  word-break: break-word;
}

/* ── Shipping address with pin icon ── */
.profile-address {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  padding: 18px;
  background: var(--ardyss-gray-bg);
  border-radius: 10px;
  margin-top: 14px;
}
.profile-address-pin {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.profile-address-pin svg { width: 20px; height: 20px; }
.profile-address-text {
  font-size: 13.5px;
  color: #212529;
  line-height: 1.7;
}
.profile-address-text > div:first-child { font-weight: 500; }
.profile-address-text .country-line {
  margin-top: 4px;
  font-size: 11.5px;
  color: #6c757d;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* ── Storefront link box ── */
.profile-storefront {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--ardyss-border);
}
.profile-storefront-label {
  font-size: 11.5px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 6px;
}
.profile-storefront-link-box {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: var(--ardyss-pink-light);
  border: 1px solid rgba(214,51,132,0.2);
  border-radius: 8px;
}
.profile-storefront-link-box .link-icon { font-size: 16px; }
.profile-storefront-link-box .storefront-url {
  flex: 1;
  font-family: 'Courier New', monospace;
  font-size: 13px;
  color: var(--ardyss-pink-dark);
  text-decoration: none;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.profile-storefront-link-box .storefront-url:hover { text-decoration: underline; }

/* ── Password masking toggle ── */
.password-mask-wrap {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.password-mask {
  font-family: 'Courier New', monospace;
  letter-spacing: 0.15em;
}
.btn-toggle-password {
  background: none;
  border: none;
  color: #adb5bd;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
}
.btn-toggle-password:hover { color: var(--ardyss-pink); }
.btn-toggle-password svg { width: 14px; height: 14px; }

/* ── Remove (trash) button in cards GridView ── */
.btn-grid-remove {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 12px;
  color: #dc3545;
  text-decoration: none;
  padding: 5px 10px;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.btn-grid-remove:hover {
  background: rgba(220,53,69,0.08);
  color: #dc3545;
}
.btn-grid-remove svg { width: 13px; height: 13px; }

/* checkout-card-head action button compact */
.checkout-card-head .btn-sm {
  font-size: 12px;
  padding: 6px 14px;
  border-radius: 18px;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.checkout-card-head .btn-sm svg { width: 12px; height: 12px; }


/* =============================================
   CONCEPT INFO — glossary card for reports
   ============================================= */
.concept-info-card {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 14px;
  padding: 22px 24px;
  margin-bottom: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.04);
}
.concept-info-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding-bottom: 16px;
  margin-bottom: 16px;
  border-bottom: 1px solid var(--ardyss-border);
}
.concept-info-icon {
  width: 42px;
  height: 42px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--ardyss-pink) 0%, var(--ardyss-sidebar) 100%);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  flex-shrink: 0;
}
.concept-info-icon svg { width: 22px; height: 22px; }
.concept-info-title {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 2px;
}
.concept-info-sub {
  font-size: 12px;
  color: #6c757d;
}

/* Grid of concept cards */
.concept-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: 12px;
}
.concept-card {
  background: var(--ardyss-gray-bg);
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 14px 16px;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.concept-card:hover {
  border-color: rgba(214,51,132,0.3);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.concept-card-badge {
  display: inline-block;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 9px;
  border-radius: 6px;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
  font-family: 'Courier New', monospace;
}
.concept-card-badge.pink  { background: var(--ardyss-pink-light); color: var(--ardyss-pink-dark); }
.concept-card-badge.blue  { background: #d9e7ff; color: #0d4ea6; }
.concept-card-badge.amber { background: #ffe5d0; color: #7a3e00; }
.concept-card-badge.green { background: #d1e7dd; color: #0a5c30; }
.concept-card-title {
  font-size: 13.5px;
  font-weight: 600;
  color: #212529;
  margin-bottom: 6px;
  line-height: 1.3;
}
.concept-card-text {
  font-size: 12.5px;
  color: #495057;
  line-height: 1.55;
}


/* =============================================
   DATATABLES.NET — Ardyss theme overrides
   ============================================= */

/* Wrapper */
.dataTables_wrapper {
  font-family: 'Poppins', sans-serif;
  font-size: 13px;
  color: #495057;
}

/* Table base — extend our existing .ardyss-grid */
table.dataTable {
  width: 100% !important;
  border-collapse: separate !important;
  border-spacing: 0;
}
table.dataTable thead th {
  background: var(--ardyss-gray-bg) !important;
  border-bottom: 1px solid var(--ardyss-border) !important;
  border-top: 1px solid var(--ardyss-border) !important;
  color: #495057 !important;
  font-size: 11.5px !important;
  font-weight: 600 !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 12px 14px !important;
}
table.dataTable thead th.sorting,
table.dataTable thead th.sorting_asc,
table.dataTable thead th.sorting_desc {
  cursor: pointer;
  position: relative;
  padding-right: 30px !important;
}
table.dataTable thead th.sorting::after,
table.dataTable thead th.sorting_asc::after,
table.dataTable thead th.sorting_desc::after {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 10px;
  color: #adb5bd;
}
table.dataTable thead th.sorting::after { content: '↕'; }
table.dataTable thead th.sorting_asc::after { content: '↑'; color: var(--ardyss-pink); }
table.dataTable thead th.sorting_desc::after { content: '↓'; color: var(--ardyss-pink); }
table.dataTable tbody td {
  padding: 12px 14px !important;
  border-bottom: 1px solid var(--ardyss-border) !important;
  font-size: 13px;
  vertical-align: middle;
}
table.dataTable tbody tr {
  background: #fff;
  transition: background 0.12s;
}
table.dataTable tbody tr:hover {
  background: var(--ardyss-pink-light) !important;
}
table.dataTable.stripe tbody tr.odd,
table.dataTable.display tbody tr.odd {
  background: #fcfcfd !important;
}

/* Search box (top-right) */
.dataTables_filter {
  margin-bottom: 12px;
  text-align: right;
}
.dataTables_filter label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}
.dataTables_filter input {
  margin-left: 8px;
  padding: 7px 12px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  background: #fff;
  font-size: 13px;
  font-family: inherit;
  color: #212529;
  min-width: 220px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dataTables_filter input:focus {
  outline: none;
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}

/* Length picker (top-left) */
.dataTables_length {
  margin-bottom: 12px;
}
.dataTables_length label {
  font-size: 12px;
  color: #6c757d;
  font-weight: 500;
}
.dataTables_length select {
  margin: 0 6px;
  padding: 6px 22px 6px 10px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 6px;
  background: #fff;
  font-size: 12px;
  font-family: inherit;
  color: #212529;
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23495057' stroke-width='2.5'><polyline points='6 9 12 15 18 9'/></svg>");
  background-repeat: no-repeat;
  background-position: right 6px center;
  background-size: 10px;
}

/* Info text (bottom-left) */
.dataTables_info {
  font-size: 12px;
  color: #6c757d;
  padding-top: 14px;
}

/* Pagination (bottom-right) */
.dataTables_paginate {
  padding-top: 12px;
  display: flex;
  justify-content: flex-end;
  gap: 4px;
}
.dataTables_paginate .paginate_button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  border-radius: 6px;
  border: 1px solid transparent !important;
  background: transparent !important;
  color: #495057 !important;
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.12s;
}
.dataTables_paginate .paginate_button:hover {
  background: var(--ardyss-pink-light) !important;
  color: var(--ardyss-pink-dark) !important;
  border-color: rgba(214,51,132,0.2) !important;
}
.dataTables_paginate .paginate_button.current,
.dataTables_paginate .paginate_button.current:hover {
  background: var(--ardyss-pink) !important;
  color: #fff !important;
  border-color: var(--ardyss-pink) !important;
}
.dataTables_paginate .paginate_button.disabled,
.dataTables_paginate .paginate_button.disabled:hover {
  color: #ced4da !important;
  background: transparent !important;
  cursor: not-allowed;
  border-color: transparent !important;
}

/* DataTables Buttons — hide them, we'll trigger via our own header buttons */
.dt-buttons.dt-buttons-hidden { display: none !important; }

/* ==========================================================================
   DATATABLES 2.0 — CUSTOM LENGTH & SEARCH STYLES (ARDYSS THEME)
   ========================================================================== */

/* Contenedores principales (Ajuste de espaciado y alineación) */
.dt-length, .dt-search {
    display: inline-flex;
    align-items: center;
    font-family: inherit;
    margin-bottom: 1rem;
}

    /* Estilo para las etiquetas de texto ("Show", "rows", etc.) */
    .dt-length label,
    .dt-search label {
        font-size: 0.875rem;
        font-weight: 500;
        color: #565656; /* Gris neutro elegante */
        display: flex;
        align-items: center;
        gap: 0.5rem; /* Separación limpia entre texto y control */
    }

    /* Selector de cantidad de filas (Dropdown) */
    .dt-length .form-select {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.4375rem 2rem 0.4375rem 0.75rem;
        font-size: 0.85rem;
        color: #212529;
        background-color: #ffffff;
        cursor: pointer;
        transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

    /* Input de Búsqueda (Search) */
    .dt-search .form-control {
        border: 1px solid #e2e8f0;
        border-radius: 8px;
        padding: 0.4375rem 0.75rem;
        font-size: 0.85rem;
        color: #212529;
        width: 220px; /* Tamaño fijo ideal para el buscador */
        background-color: #ffffff;
        transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
    }

        /* Placeholder del buscador */
        .dt-search .form-control::placeholder {
            color: #a0aec0;
            font-size: 0.85rem;
        }

        /* ==========================================================================
   ESTADOS FOCUS (El toque de marca rosa #d81b60)
   ========================================================================== */

        .dt-length .form-select:focus,
        .dt-search .form-control:focus {
            border-color: #d81b60 !important; /* Rosa Ardyss */
            color: #212529;
            background-color: #ffffff;
            outline: 0;
            /* Glow sutil en rosa traslúcido para evitar el azul de Bootstrap */
            box-shadow: 0 0 0 0.25rem rgba(216, 27, 96, 0.15) !important;
        }

/* Opcional: Si el buscador y el selector están en la misma fila, 
   forzamos a que se distribuyan a los extremos (Izquierda y Derecha) */
.dt-layout-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

/* ==========================================================================
   DATATABLES 2.0 — INFO & PAGINATION STYLES (ARDYSS THEME)
   ========================================================================== */

/* 1. Bloque Informativo ("Showing 1 to 15 of 712") */
.dt-info {
    font-size: 0.875rem;
    color: #64748b; /* Gris slate suave */
    font-weight: 400;
    padding: 0.5rem 0;
    display: inline-block;
}

/* 2. Contenedor de la Paginación */
.dt-paging {
    display: inline-block;
    padding: 0.5rem 0;
}

    /* Forzar separación tipo "gap" entre los botones de la lista */
    .dt-paging .pagination {
        margin: 0;
        padding: 0;
        display: flex;
        gap: 4px; /* Espaciado moderno entre botones individuales */
        list-style: none;
    }

    /* 3. Estilo Base para los Botones (.page-link) */
    .dt-paging .page-item .page-link {
        color: #475569; /* Texto gris oscuro */
        background-color: #ffffff;
        border: 1px solid #e2e8f0;
        border-radius: 6px !important; /* Bordes ligeramente curvos */
        padding: 0.4rem 0.75rem;
        font-size: 0.85rem;
        font-weight: 500;
        text-decoration: none;
        transition: all 0.2s ease-in-out;
        box-shadow: none !important;
    }

    /* 4. Estado Hover (Pasar el mouse por encima) */
    .dt-paging .page-item:not(.active):not(.disabled) .page-link:hover {
        color: #d81b60 !important; /* Rosa corporativo */
        background-color: #fce4ec; /* Fondo rosa pastel sutil */
        border-color: #f8bbd0;
        cursor: pointer;
    }

    /* 5. Estado Activo (Página actual seleccionada) */
    .dt-paging .page-item.active .page-link {
        color: #ffffff !important;
        background-color: #d81b60 !important; /* Sólido Rosa Ardyss */
        border-color: #d81b60 !important;
        font-weight: 600;
    }

    /* 6. Estado Deshabilitado (Flechas bloqueadas al inicio/fin) */
    .dt-paging .page-item.disabled .page-link {
        color: #cbd5e1 !important; /* Texto claro/faded */
        background-color: #f8fafc !important; /* Fondo gris pálido */
        border-color: #f1f5f9 !important;
        pointer-events: none; /* Desactiva clics */
        cursor: not-allowed;
    }

    /* 7. Estilo Especial para la Elipsis (...) */
    .dt-paging .page-item .page-link.ellipsis {
        background: transparent !important;
        border-color: transparent !important;
        color: #94a3b8 !important;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

/* ==========================================================================
   ALINEACIÓN AUTOMÁTICA DEL PIE DE TABLA
   ========================================================================== */
/* Si DataTables renderiza ambos bloques en un contenedor común abajo, 
   esto los mandará automáticamente a los extremos (Info izquierda, Paginación derecha) */
.dt-layout-row:last-child {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 1rem;
    border-top: 1px solid #f1f5f9; /* Línea divisoria sutil al final de la grilla */
    padding-top: 0.75rem;
}

/* ==========================================================================
           NUEVO ESTILO COMPARTIDO — TEMA ARDYSS (BACKOFFICE 2026)
           ========================================================================== */

span, h2, label {
    font-family: "Open Sans", Arial, Helvetica, Sans-Serif;
}

/* Contenedor tipo Tarjeta de Control */
.filter-card-container {
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05), 0 2px 4px -1px rgba(0, 0, 0, 0.03);
    padding: 1.5rem;
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
    border: 1px solid #f1f5f9;
}

/* Título del Reporte */
.report-main-title {
    font-size: 1.45rem !important;
    color: #1e293b !important; /* Gris oscuro ejecutivo */
    font-weight: 700 !important;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

    .report-main-title::before {
        content: '';
        display: inline-block;
        width: 5px;
        height: 24px;
        background-color: #d81b60; /* Acento Rosa Ardyss */
        border-radius: 4px;
    }

/* Etiquetas de los filtros */
.filter-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: #64748b;
    margin-bottom: 0.4rem;
    display: block;
}

/* DropDownList Personalizado */
.custom-dropdown {
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    padding: 0.4375rem 0.75rem !important;
    font-size: 0.875rem !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    height: auto !important;
}

    .custom-dropdown:focus {
        border-color: #d81b60 !important;
        box-shadow: 0 0 0 0.25rem rgba(216, 27, 96, 0.15) !important;
        outline: 0;
    }

/* Botón Buscar Tema Corporativo */
.btn-ardyss-search {
    background-color: #d81b60 !important;
    border-color: #d81b60 !important;
    color: #ffffff !important;
    font-weight: 600 !important;
    font-size: 0.875rem !important;
    padding: 0.5rem 1.25rem !important;
    border-radius: 8px !important;
    transition: all 0.2s ease-in-out !important;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 2px 4px rgba(216, 27, 96, 0.2) !important;
}

    .btn-ardyss-search:hover {
        background-color: #b8144f !important;
        border-color: #b8144f !important;
        transform: translateY(-1px);
        box-shadow: 0 4px 6px rgba(216, 27, 96, 0.3) !important;
    }

/* Canvas del Árbol de Organización */
/* Busca esta regla en tu bloque de <style> o ardyss.css y asegúrate de ponerle una altura */
#tree {
    background-color: #f8fafc;
    border-radius: 12px;
    border: 1px solid #e2e8f0;
    padding: 10px;
    width: 100%;
    height: 650px; 
}

    /* ==========================================================================
   BACKOFFICE 2026 — ORGCHART NODE BOXES BRANDING (ARDYSS THEME)
   Anular el azul hardcodeado (#039BE5) de los recuadros SVG de Balkan.
   ========================================================================== */



    /* 1. Estilos Base para todos los rectángulos de nodos (.boc-hoverable) */
    #tree rect.boc-hoverable {
        rx: 8px !important; /* Suavizar esquinas a 8px matching Cards */
        ry: 8px !important;
        stroke-width: 1px !important; /* Borde más fino y limpio */
        transition: all 0.2s ease-in-out !important;
    }

/* 2. Sobrescritura de colores basada en los TAGS aplicados en el JS */

/* [Tag: Enroller] (Template: Olivia) — El nodo central raíz */
/* Como los textos definidos anteriormente son oscuros, mantendremos el fondo blanco 
   para legibilidad, pero usaremos el ROSA CORPORATIVO (#d81b60) para destacar el borde. */
[data-n-tag~="Enroller"] rect.boc-hoverable {
    fill: #ffffff !important; /* Fondo Blanco Limpio */
    stroke: #d81b60 !important; /* Borde Grueso Rosa Ardyss para prominencia */
    stroke-width: 2.5px !important;
}

/* [Tag: true] (Template: Ana) — Nodo de hijo que CUMPLE condición */
/* Estilo estándar de interfaz limpia: Fondo blanco, borde gris pizarra suave. */
[data-n-tag~="true"] rect.boc-hoverable {
    fill: #ffffff !important; /* Fondo Blanco Limpio */
    stroke: #e2e8f0 !important; /* Borde Gris Slate Slate (matching input fields) */
}

/* [Tag: false] (Template: Ula) — Nodo de hijo que NO cumple condición */
/* Estilo visualmente menos prominente o "negativo" para diferenciarlo de los que cumplen. */
[data-n-tag~="false"] rect.boc-hoverable {
    fill: #f1f5f9 !important; /* Fondo Gris Slate MUY Claro (faded background) */
    stroke: #cbd5e1 !important; /* Borde gris slate ligeramente más oscuro */
}

#ModalMessage {
    width: 80%;
    height: 80%;
    padding: 0;
}
/* =============================================
   QP ALERT — CART PILL (Shop page)
   ============================================= */
.qp-cart-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-left: 12px;
  padding: 5px 8px 5px 12px;
  background: var(--ardyss-pink);
  color: #fff !important;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
  box-shadow: 0 2px 6px rgba(214,51,132,0.25);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
  flex-shrink: 0;
  position: relative;
}
.qp-cart-pill:hover {
  background: var(--ardyss-pink-dark);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(214,51,132,0.35);
}
.qp-cart-pill:active { transform: translateY(0); }
.qp-cart-pill svg {
  flex-shrink: 0;
  stroke: #fff;
}
.qp-cart-label {
  letter-spacing: 0.02em;
}

/* Count badge (white circle on the right) */
.qp-cart-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  background: #fff;
  color: var(--ardyss-pink);
  border-radius: 12px;
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  box-shadow: inset 0 0 0 1px rgba(214,51,132,0.18);
}
/* Hide the count when empty */
.qp-cart-pill[data-empty="true"] .qp-cart-count {
  display: none;
}

/* Pulse animation when an item is added (toggle .pulse class via JS) */
.qp-cart-pill.pulse {
  animation: qp-cart-pulse 0.45s cubic-bezier(0.68, -0.55, 0.27, 1.55);
}
@keyframes qp-cart-pulse {
  0%   { transform: scale(1); }
  50%  { transform: scale(1.12); }
  100% { transform: scale(1); }
}

/* Mobile: keep visible but slightly more compact */
@media (max-width: 540px) {
  .qp-cart-pill {
    padding: 4px 6px 4px 10px;
    font-size: 11px;
  }
  .qp-cart-label { display: none; }   /* solo icono + contador en móvil */
  .qp-cart-count { min-width: 20px; height: 20px; font-size: 10.5px; }
}


/* =============================================
   DATATABLES PAGINATION — Ardyss override (v2)
   Stronger selectors that beat Bootstrap + DT defaults,
   works with custom dom layouts (e.g. centered <"...p">).
   ============================================= */

.dataTables_wrapper .dataTables_paginate {
  padding: 14px 0 4px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}
.dataTables_wrapper .dataTables_paginate .pagination {
  display: inline-flex;
  gap: 4px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Each page button — works for <a>, <button> and Bootstrap-style <li><a> */
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dataTables_wrapper .dataTables_paginate .pagination .page-link,
.dataTables_wrapper .dataTables_paginate a.paginate_button {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 34px;
  height: 34px;
  padding: 0 10px;
  margin: 0 !important;
  border: 1px solid var(--ardyss-border) !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #495057 !important;
  font-size: 12.5px;
  font-weight: 500;
  line-height: 1;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 0.12s, border-color 0.12s, color 0.12s, transform 0.12s, box-shadow 0.12s;
  outline: none !important;
  box-shadow: none !important;
}

/* Hover */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-link:hover,
.dataTables_wrapper .dataTables_paginate a.paginate_button:hover {
  background: var(--ardyss-pink-light) !important;
  border-color: rgba(214,51,132,0.35) !important;
  color: var(--ardyss-pink-dark) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(214,51,132,0.10) !important;
}

/* Active (current page) */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.active .page-link,
.dataTables_wrapper .dataTables_paginate .pagination .page-link.active {
  background: var(--ardyss-pink) !important;
  border-color: var(--ardyss-pink) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(214,51,132,0.30) !important;
  transform: none;
}

/* Disabled (« previous / next » when at edges) */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover,
.dataTables_wrapper .dataTables_paginate .pagination .page-item.disabled .page-link {
  background: #fff !important;
  border-color: var(--ardyss-border) !important;
  color: #ced4da !important;
  cursor: not-allowed !important;
  transform: none !important;
  box-shadow: none !important;
}

/* Ellipsis (the gray "…") */
.dataTables_wrapper .dataTables_paginate .ellipsis {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  color: #adb5bd;
  font-weight: 600;
  user-select: none;
}

/* Bottom row: info on left, pagination on right when no custom dom */
.dataTables_wrapper .dataTables_info {
  padding: 14px 0 4px;
  font-size: 12px;
  color: #6c757d;
  display: inline-block;
}

/* When the page button is the first/last and uses arrows */
.dataTables_wrapper .dataTables_paginate .previous,
.dataTables_wrapper .dataTables_paginate .next,
.dataTables_wrapper .dataTables_paginate .first,
.dataTables_wrapper .dataTables_paginate .last {
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.02em;
}

/* Mobile: smaller buttons, less padding */
@media (max-width: 540px) {
  .dataTables_wrapper .dataTables_paginate .paginate_button,
  .dataTables_wrapper .dataTables_paginate .pagination .page-link {
    min-width: 30px;
    height: 30px;
    padding: 0 7px;
    font-size: 11.5px;
  }
}


/* =============================================
   LINKBUTTONS INSIDE GRIDVIEWS
   <asp:LinkButton> renders as <a href="javascript:__doPostBack(...)">
   These styles work for both .ardyss-grid and DataTables-themed tables.
   ============================================= */

/* Base — kill default blue/underline, inherit table cell sizing */
table.ardyss-grid tbody td a,
table.dataTable tbody td a {
  color: var(--ardyss-pink);
  text-decoration: none;
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 0;
  border-radius: 4px;
  transition: color 0.12s, background 0.12s, text-decoration-color 0.12s;
}

table.ardyss-grid tbody td a:hover,
table.dataTable tbody td a:hover {
  color: var(--ardyss-pink-dark);
  text-decoration: underline;
  text-decoration-color: var(--ardyss-pink-dark);
  text-underline-offset: 3px;
}

/* SVG icon inside a LinkButton — gets the same color */
table.ardyss-grid tbody td a svg,
table.dataTable tbody td a svg {
  width: 13px;
  height: 13px;
  flex-shrink: 0;
  stroke: currentColor;
}

/* ── Variant: pill-style action button (CssClass="lb-action") ─ */
table.ardyss-grid tbody td a.lb-action,
table.dataTable tbody td a.lb-action {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
  padding: 5px 12px;
  border-radius: 14px;
  font-size: 12px;
  text-decoration: none !important;
}
table.ardyss-grid tbody td a.lb-action:hover,
table.dataTable tbody td a.lb-action:hover {
  background: var(--ardyss-pink);
  color: #fff;
  text-decoration: none !important;
}

/* ── Variant: edit/pencil (CssClass="lb-edit") ─ */
table.ardyss-grid tbody td a.lb-edit,
table.dataTable tbody td a.lb-edit {
  color: #495057;
  background: var(--ardyss-gray-bg);
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none !important;
  border: 1px solid var(--ardyss-border);
}
table.ardyss-grid tbody td a.lb-edit:hover,
table.dataTable tbody td a.lb-edit:hover {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
  border-color: rgba(214,51,132,0.3);
  text-decoration: none !important;
}

/* ── Variant: danger / remove (CssClass="lb-remove") ─ */
table.ardyss-grid tbody td a.lb-remove,
table.dataTable tbody td a.lb-remove {
  color: #dc3545;
  background: transparent;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none !important;
}
table.ardyss-grid tbody td a.lb-remove:hover,
table.dataTable tbody td a.lb-remove:hover {
  background: rgba(220,53,69,0.08);
  color: #dc3545;
  text-decoration: none !important;
}

/* ── Variant: success / approve (CssClass="lb-approve") ─ */
table.ardyss-grid tbody td a.lb-approve,
table.dataTable tbody td a.lb-approve {
  color: var(--ardyss-green);
  background: transparent;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 12px;
  text-decoration: none !important;
}
table.ardyss-grid tbody td a.lb-approve:hover,
table.dataTable tbody td a.lb-approve:hover {
  background: rgba(25,135,84,0.08);
  color: #0a5c30;
  text-decoration: none !important;
}

/* ── Variant: icon-only square (CssClass="lb-icon") ─ */
table.ardyss-grid tbody td a.lb-icon,
table.dataTable tbody td a.lb-icon {
  width: 30px;
  height: 30px;
  padding: 0;
  justify-content: center;
  border-radius: 6px;
  background: var(--ardyss-gray-bg);
  color: #6c757d;
  text-decoration: none !important;
}
table.ardyss-grid tbody td a.lb-icon:hover,
table.dataTable tbody td a.lb-icon:hover {
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink);
  text-decoration: none !important;
}
table.ardyss-grid tbody td a.lb-icon svg,
table.dataTable tbody td a.lb-icon svg {
  width: 15px;
  height: 15px;
}

/* When a cell has multiple LinkButtons (e.g. Edit | Remove), space them */
table.ardyss-grid tbody td .lb-group,
table.dataTable tbody td .lb-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Active / focused state (keyboard navigation) */
table.ardyss-grid tbody td a:focus-visible,
table.dataTable tbody td a:focus-visible {
  outline: 2px solid var(--ardyss-pink);
  outline-offset: 2px;
}


/* =============================================
   ARDYSS DATEPICKER
   Wraps native <input type="date"> with our identity.
   Works with <asp:TextBox TextMode="Date">.
   ============================================= */

.ardyss-date-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.ardyss-date-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #6c757d;
}
.ardyss-date-label .required {
  color: var(--ardyss-pink);
  margin-left: 2px;
}

/* Wrapper with leading icon */
.ardyss-date-input {
  position: relative;
  display: flex;
  align-items: center;
  background: #fff;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 8px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ardyss-date-input:hover { border-color: rgba(214,51,132,0.4); }
.ardyss-date-input:focus-within {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}

/* Calendar icon (left) */
.ardyss-date-input::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  pointer-events: none;
  background-color: #adb5bd;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") center/contain no-repeat;
          mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='4' width='18' height='18' rx='2' ry='2'/><line x1='16' y1='2' x2='16' y2='6'/><line x1='8' y1='2' x2='8' y2='6'/><line x1='3' y1='10' x2='21' y2='10'/></svg>") center/contain no-repeat;
  transition: background-color 0.15s;
}
.ardyss-date-input:focus-within::before {
  background-color: var(--ardyss-pink);
}

/* The actual native input — styled but keeps the browser's picker popup */
.ardyss-date-input input[type="date"],
.ardyss-date-input input.ardyss-date {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  padding: 10px 12px 10px 38px;
  font-family: inherit;
  font-size: 13px;
  color: #212529;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
  border-radius: 8px;
  cursor: pointer;
  min-width: 0;
  width: 100%;
}
.ardyss-date-input input[type="date"]::placeholder,
.ardyss-date-input input.ardyss-date::placeholder {
  color: #adb5bd;
}

/* Native calendar picker indicator (right) — recolor to Ardyss */
.ardyss-date-input input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
  opacity: 0.55;
  filter: invert(28%) sepia(94%) saturate(2090%) hue-rotate(310deg) brightness(91%) contrast(89%);
  transition: opacity 0.15s, transform 0.15s;
  margin-right: 4px;
}
.ardyss-date-input input[type="date"]::-webkit-calendar-picker-indicator:hover {
  opacity: 1;
  transform: scale(1.1);
}

/* Disabled state */
.ardyss-date-input.is-disabled,
.ardyss-date-input:has(input:disabled) {
  background: var(--ardyss-gray-bg);
  border-color: var(--ardyss-border);
  cursor: not-allowed;
}
.ardyss-date-input input:disabled {
  color: #adb5bd;
  cursor: not-allowed;
}

/* Error state */
.ardyss-date-input.is-error {
  border-color: rgba(220,53,69,0.5);
  background: rgba(220,53,69,0.03);
}
.ardyss-date-input.is-error::before { background-color: #dc3545; }

/* Helper / error text below the input */
.ardyss-date-hint {
  font-size: 11px;
  color: #adb5bd;
}
.ardyss-date-error {
  font-size: 11px;
  color: #dc3545;
  display: none;
}
.ardyss-date-field.has-error .ardyss-date-error { display: block; }
.ardyss-date-field.has-error .ardyss-date-input { border-color: rgba(220,53,69,0.5); }

/* Range layout: two inputs side by side ("from" / "to") */
.ardyss-date-range {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 540px) {
  .ardyss-date-range { grid-template-columns: 1fr; }
}

/* Compact variant (no icon, smaller padding) */
.ardyss-date-input.compact { border-radius: 6px; }
.ardyss-date-input.compact::before { display: none; }
.ardyss-date-input.compact input[type="date"],
.ardyss-date-input.compact input.ardyss-date {
  padding: 7px 10px;
  font-size: 12.5px;
}


/* =============================================
   ARDYSS LOGIN PAGE
   Standalone login (no master page) — branded card centered on a pink hero
   ============================================= */
.ardyss-login-body {
  margin: 0;
  min-height: 100vh;
  font-family: 'Poppins', sans-serif;
  color: #212529;
  background: linear-gradient(135deg, var(--ardyss-pink) 0%, var(--ardyss-sidebar) 60%, #8a0e44 100%);
  background-attachment: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  position: relative;
  overflow-x: hidden;
}
.ardyss-login-body::before,
.ardyss-login-body::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  pointer-events: none;
}
.ardyss-login-body::before {
  width: 420px; height: 420px;
  top: -160px; right: -120px;
}
.ardyss-login-body::after {
  width: 320px; height: 320px;
  bottom: -120px; left: -80px;
  background: rgba(255,255,255,0.04);
}

.ardyss-login-card {
  position: relative;
  z-index: 2;
  background: #fff;
  border-radius: 20px;
  padding: 40px 44px 32px;
  width: 100%;
  max-width: 460px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25), 0 4px 16px rgba(0,0,0,0.08);
  animation: ardyss-login-in 0.4s cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes ardyss-login-in {
  from { opacity: 0; transform: translateY(20px) scale(0.96); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ardyss-login-logo { text-align: center; margin-bottom: 22px; }
.ardyss-login-logo img { max-width: 200px; height: auto; }

.ardyss-login-eyebrow {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ardyss-pink);
  text-align: center;
  margin-bottom: 6px;
}
.ardyss-login-title {
  font-size: 22px;
  font-weight: 600;
  color: #212529;
  text-align: center;
  margin: 0 0 8px;
  line-height: 1.3;
}
.ardyss-login-subtitle {
  font-size: 13px;
  color: #6c757d;
  text-align: center;
  margin: 0 0 28px;
}

.ardyss-login-field { margin-bottom: 16px; }
.ardyss-login-field label,
.ardyss-login-field .login-label {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
  color: #6c757d;
  margin-bottom: 6px;
}
.ardyss-login-input,
.ardyss-login-field input[type="text"],
.ardyss-login-field input[type="password"],
.ardyss-login-field input[type="email"] {
  width: 100%;
  padding: 12px 14px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 10px;
  background: #fff;
  color: #212529;
  font-size: 14px;
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ardyss-login-input:focus,
.ardyss-login-field input:focus {
  outline: none;
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.12);
}
.ardyss-login-input::placeholder { color: #adb5bd; font-weight: 400; }

.ardyss-login-card span[style*="Red"] {
  display: block;
  font-size: 11.5px;
  color: #dc3545 !important;
  font-style: normal !important;
  font-weight: 500;
  margin-top: 4px;
}

.ardyss-login-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 13px 20px;
  background: var(--ardyss-pink);
  color: #fff !important;
  border: none;
  border-radius: 10px;
  font-family: inherit;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  cursor: pointer;
  text-decoration: none !important;
  margin-top: 8px;
  box-shadow: 0 4px 14px rgba(214,51,132,0.30);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.ardyss-login-btn:hover {
  background: var(--ardyss-pink-dark);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(214,51,132,0.40);
}
.ardyss-login-btn:active { transform: translateY(0); }

.ardyss-login-link {
  display: block;
  width: 100%;
  margin-top: 14px;
  text-align: center;
  font-size: 12.5px;
  color: #6c757d !important;
  text-decoration: none !important;
  padding: 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.ardyss-login-link:hover {
  color: var(--ardyss-pink) !important;
  background: var(--ardyss-pink-light);
}
.ardyss-login-link i, .ardyss-login-link svg { margin-right: 5px; vertical-align: -2px; }

.ardyss-login-alert {
  background: rgba(220,53,69,0.08);
  border-left: 3px solid #dc3545;
  border-radius: 8px;
  padding: 12px 16px 12px 14px;
  margin-bottom: 18px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #5c1620;
}
.ardyss-login-alert .alert-icon { flex-shrink: 0; color: #dc3545; font-size: 16px; line-height: 1.4; }
.ardyss-login-alert .alert-close {
  margin-left: auto;
  background: none;
  border: none;
  color: #adb5bd;
  cursor: pointer;
  font-size: 14px;
  text-decoration: none !important;
}
.ardyss-login-alert .alert-close:hover { color: #dc3545; }
.ardyss-login-alert .alert-body { flex: 1; }

.ardyss-login-notice {
  background: #fff8e6;
  border-left: 3px solid var(--ardyss-amber);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 18px;
  font-size: 13px;
  color: #5a4216;
  line-height: 1.55;
}
.ardyss-login-notice p { margin: 0 0 6px; }
.ardyss-login-notice p:last-child { margin-bottom: 0; }

.ardyss-login-countdown {
  text-align: center;
  margin: 4px 0 18px;
  color: var(--ardyss-pink-dark);
  font-weight: 500;
  font-size: 16px;
}

.ardyss-login-footer {
  margin-top: 28px;
  padding-top: 18px;
  border-top: 1px solid var(--ardyss-border);
  text-align: center;
  font-size: 11px;
  color: #adb5bd;
  letter-spacing: 0.04em;
}
.ardyss-login-footer strong { color: var(--ardyss-pink); font-weight: 500; }

@media (max-width: 480px) {
  .ardyss-login-card { padding: 30px 24px 24px; border-radius: 16px; }
  .ardyss-login-title { font-size: 20px; }
}


/* =============================================
   GET QUALIFIED V1 — page-specific styles
   Used by: WebForms/GetQualiFied/GetQualifiedV1.aspx
   ============================================= */

/* Step checklist (View 1) */
.gq-step-list { list-style: none; padding: 0; margin: 0; }
.gq-step-list li {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--ardyss-gray-bg);
  margin-bottom: 10px;
  transition: background 0.15s, transform 0.15s;
}
.gq-step-list li:hover {
  background: var(--ardyss-pink-light);
  transform: translateX(2px);
}
.gq-step-list .gq-step-check {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  flex-shrink: 0;
}
.gq-step-list .gq-step-check.done {
  background: var(--ardyss-green);
  color: #fff;
}
.gq-step-list .gq-step-check.pending {
  background: #ffe5d0;
  color: #b53000;
  border: 1.5px dashed var(--ardyss-amber);
}
.gq-step-list a {
  text-decoration: none !important;
  color: #212529 !important;
  display: block;
  flex: 1;
}
.gq-step-list a:hover { color: var(--ardyss-pink-dark) !important; }
.gq-step-title {
  font-weight: 500;
  font-size: 14px;
  line-height: 1.4;
}

/* Citizenship cards (View 2) */
.gq-citizenship-card {
  border-radius: 16px;
  padding: 36px 24px;
  text-align: center;
  background: #fff;
  border: 2px solid var(--ardyss-border);
  transition: border-color 0.2s, transform 0.2s, box-shadow 0.2s;
  cursor: pointer;
  height: 100%;
}
.gq-citizenship-card:hover {
  border-color: var(--ardyss-pink);
  transform: translateY(-4px);
  box-shadow: 0 10px 30px rgba(214, 51, 132, 0.15);
}
.gq-citizenship-icon {
  font-size: 48px;
  margin-bottom: 14px;
}

/* Payment cards (View 5) */
.gq-payment-card {
  background: #fff;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 14px;
  padding: 22px 20px;
  height: 100%;
  display: flex;
  flex-direction: column;
  transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}
.gq-payment-card:hover {
  border-color: var(--ardyss-pink);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(214, 51, 132, 0.10);
}
.gq-payment-card .gq-payment-icon {
  text-align: center;
  margin-bottom: 12px;
}
.gq-payment-card .gq-payment-icon img { max-width: 64px; }
.gq-payment-card .gq-payment-name {
  text-align: center;
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 14px;
  color: #212529;
}
.gq-payment-card .gq-payment-features {
  font-size: 12.5px;
  flex: 1;
  line-height: 1.6;
}
.gq-payment-card .gq-feature-row {
  padding: 6px 0;
  border-bottom: 1px dashed var(--ardyss-border);
}
.gq-payment-card .gq-feature-row:last-child { border-bottom: none; }
.gq-payment-card .gq-feature-label {
  font-size: 10.5px;
  color: #6c757d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.gq-payment-card .gq-feature-value {
  color: #212529;
  font-weight: 500;
}
.gq-payment-card .btn-gq-select {
  margin-top: 16px;
  display: block;
  width: 100%;
  padding: 10px 14px;
  border-radius: 22px;
  background: var(--ardyss-pink);
  color: #fff !important;
  font-weight: 500;
  font-size: 13px;
  text-align: center;
  text-decoration: none !important;
  transition: background 0.15s, transform 0.15s;
}
.gq-payment-card .btn-gq-select:hover {
  background: var(--ardyss-pink-dark);
  color: #fff !important;
  transform: translateY(-1px);
}

/* Current payment method banner */
.gq-current-method {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 10px 20px;
  background: var(--ardyss-pink-light);
  color: var(--ardyss-pink-dark);
  border-radius: 28px;
  font-size: 13.5px;
  font-weight: 500;
  border: 1px solid rgba(214, 51, 132, 0.2);
}
.gq-current-method .dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--ardyss-green);
}

/* Comparison table */
.gq-compare-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  overflow: hidden;
}
.gq-compare-table th {
  background: var(--ardyss-pink);
  color: #fff;
  padding: 12px 14px;
  text-align: center;
  font-weight: 600;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.gq-compare-table th:first-child { text-align: left; }
.gq-compare-table td {
  padding: 11px 14px;
  border-bottom: 1px solid var(--ardyss-border);
  text-align: center;
  color: #495057;
}
.gq-compare-table td:first-child {
  text-align: left;
  font-weight: 500;
  color: #212529;
}
.gq-compare-table tr:nth-child(even) td { background: var(--ardyss-gray-bg); }
.gq-compare-table tr:last-child td { border-bottom: none; }

/* Form widget (View 3 — W-8/W-9) */
.gq-form-widget {
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 14px;
  padding: 0;
  margin-top: 20px;
  overflow: hidden;
}
.gq-form-widget > header {
  background: linear-gradient(135deg, var(--ardyss-pink) 0%, var(--ardyss-sidebar) 100%);
  padding: 16px 20px;
  color: #fff;
}
.gq-form-widget > header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
}
.gq-form-widget .widget-body { padding: 22px 24px; }

.gq-form-widget .form-group { margin-bottom: 14px; }
.gq-form-widget .form-group label,
.gq-form-widget .col-lg-6 > .Validator,
.gq-form-widget .col-lg-6 > span:not(.dot) {
  font-size: 13px;
  color: #495057;
}
.gq-form-widget .form-control {
  border: 1.5px solid var(--ardyss-border) !important;
  border-radius: 8px !important;
  padding: 9px 12px !important;
  font-size: 13px !important;
  font-family: inherit !important;
  background: #fff !important;
  color: #212529 !important;
  transition: border-color 0.15s, box-shadow 0.15s !important;
}
.gq-form-widget .form-control:focus {
  border-color: var(--ardyss-pink) !important;
  box-shadow: 0 0 0 3px rgba(214, 51, 132, 0.12) !important;
  outline: none !important;
}

/* Validator (red error text) — shared by all GQ views */
.Validator {
  color: #dc3545 !important;
  font-size: 11.5px;
  font-weight: 500;
}

/* Certification panels (W9 / W8) */
.gq-cert-panel {
  background: #fff8e6;
  border-left: 3px solid var(--ardyss-amber);
  border-radius: 10px;
  padding: 16px 18px;
  margin: 14px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #5a4216;
}
.gq-cert-panel .panel-heading {
  font-size: 13px;
  font-weight: 600;
  color: #7a3e00;
  margin-bottom: 10px;
}
.gq-cert-panel p { margin: 0 0 8px; }
.gq-cert-panel p:last-child { margin-bottom: 0; }

/* CTA buttons used across all GQ views */
.btn-gq-next {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 28px;
  background: var(--ardyss-pink);
  color: #fff !important;
  border-radius: 24px;
  border: none;
  font-size: 14px;
  font-weight: 500;
  letter-spacing: 0.02em;
  text-decoration: none !important;
  box-shadow: 0 4px 14px rgba(214, 51, 132, 0.30);
  transition: background 0.15s, transform 0.15s, box-shadow 0.15s;
}
.btn-gq-next:hover {
  background: var(--ardyss-pink-dark);
  color: #fff !important;
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(214, 51, 132, 0.40);
}

.btn-gq-back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: #fff;
  color: #495057 !important;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 22px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
  transition: all 0.15s;
}
.btn-gq-back:hover {
  background: var(--ardyss-pink-light);
  border-color: var(--ardyss-pink);
  color: var(--ardyss-pink-dark) !important;
}

.btn-gq-whatsapp {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  background: linear-gradient(135deg, #25d366, #128c7e);
  color: #fff !important;
  border-radius: 22px;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none !important;
}
.btn-gq-whatsapp:hover {
  filter: brightness(1.05);
  color: #fff !important;
}

/* Responsive tweaks for GQ */
@media (max-width: 768px) {
  .gq-form-widget .widget-body { padding: 16px 14px; }
  .gq-payment-card { padding: 18px 14px; }
  .gq-citizenship-card { padding: 28px 16px; }
}


/* =============================================
   END SESSION — session-ended landing page
   Used by: EndSession.aspx
   Reuses .ardyss-login-body / .ardyss-login-card
   from the login block above; only adds the bits
   that are unique to this page.
   ============================================= */

/* Wider card variant — keeps the email tile from
   wrapping awkwardly on the contact section. */
.ardyss-login-card.ardyss-session-card {
  max-width: 600px;
}

/* Circular icon at the top of the card */
.ardyss-session-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 18px;
  border-radius: 50%;
  background: var(--ardyss-pink-light);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ardyss-pink);
  position: relative;
  animation: ardyss-session-pulse 2.4s ease-in-out infinite;
}
.ardyss-session-icon::after {
  content: '';
  position: absolute;
  inset: -6px;
  border-radius: 50%;
  border: 2px solid var(--ardyss-pink);
  opacity: 0.15;
}
@keyframes ardyss-session-pulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.04); }
}

/* "Continue to login" primary CTA — keeps the
   exact look of .ardyss-login-btn but with an
   internal anchor instead of a form submit */
.ardyss-session-cta {
  text-decoration: none !important;
}

/* "Need help?" section that splits the card body */
.ardyss-session-help {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px solid var(--ardyss-border);
}
.ardyss-session-help-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6c757d;
  text-align: center;
  margin-bottom: 14px;
}

/* Contact tile (phone / email) */
.ardyss-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ardyss-contact-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  background: var(--ardyss-gray-bg);
  border: 1px solid var(--ardyss-border);
  border-radius: 12px;
  text-decoration: none !important;
  color: #212529 !important;
  transition: border-color 0.15s, background 0.15s, transform 0.15s;
}
.ardyss-contact-tile:hover {
  border-color: var(--ardyss-pink);
  background: var(--ardyss-pink-light);
  transform: translateY(-1px);
}
.ardyss-contact-tile .ardyss-contact-icon {
  width: 32px;
  height: 32px;
  flex-shrink: 0;
  border-radius: 8px;
  background: #fff;
  color: var(--ardyss-pink);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--ardyss-border);
}
.ardyss-contact-tile .ardyss-contact-label {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #6c757d;
  line-height: 1.2;
}
.ardyss-contact-tile .ardyss-contact-value {
  font-size: 12.5px;
  font-weight: 500;
  color: #212529;
  line-height: 1.3;
  word-break: break-word;
}

@media (max-width: 480px) {
  .ardyss-contact-grid { grid-template-columns: 1fr; }
  .ardyss-session-icon { width: 68px; height: 68px; }
}


/* =============================================
   EARNINGS — commission report page
   Used by: WebForms/Commissions/Earnings.aspx
   Reuses .checkout-card / .ardyss-grid / .ardyss-grid-wrap.
   Adds only the bits the asp:GridViews need to look
   native in the new identity.
   ============================================= */

/* Filter toolbar: dropdowns + action buttons on one line */
.earn-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 14px;
}
.earn-filter-field { flex: 1 1 220px; min-width: 180px; }
.earn-filter-actions { display: flex; gap: 8px; flex-wrap: wrap; }

/* GridView totals/footer row (ShowFooter="True") */
.ardyss-grid tfoot td,
.ardyss-grid .table-footer td,
.ardyss-grid .table-footer th,
.ardyss-grid tr.table-footer td {
  background: var(--ardyss-pink-light);
  font-weight: 600;
  color: var(--ardyss-pink-dark);
  border-top: 2px solid var(--ardyss-pink);
}

/* GridView numeric pager (PagerStyle CssClass="pagination-ys").
   The pager renders as a one-row table of <a>/<span>. */
.pagination-ys,
.pagination-ys table { margin: 14px auto 0; }
.pagination-ys td { border: 0 !important; padding: 0 !important; background: transparent !important; }
.pagination-ys a,
.pagination-ys span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 32px;
  height: 32px;
  margin: 0 3px;
  padding: 0 9px;
  border: 1.5px solid var(--ardyss-border);
  border-radius: 7px;
  font-size: 12px;
  font-weight: 500;
  color: #495057 !important;
  text-decoration: none !important;
  transition: all 0.15s;
}
.pagination-ys a:hover {
  border-color: var(--ardyss-pink);
  color: var(--ardyss-pink) !important;
}
.pagination-ys span {                 /* current page marker */
  background: var(--ardyss-pink);
  border-color: var(--ardyss-pink);
  color: #fff !important;
}

/* Weekly tables built dynamically in code-behind
   (TablesPlaceHolder → table.CssClass = "table table-bordered").
   Scope the branding so it doesn't touch other Bootstrap tables. */
.earn-weekly-tables .table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  font-size: 13px;
  margin-bottom: 14px;
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  overflow: hidden;
}
.earn-weekly-tables .table tr:first-child td {
  background: var(--ardyss-gray-bg);
  font-weight: 600;
  color: #495057;
  text-transform: uppercase;
  font-size: 11px;
  letter-spacing: 0.04em;
}
.earn-weekly-tables .table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ardyss-border);
}
.earn-weekly-tables .table tr:last-child td { border-bottom: none; }
.earn-weekly-tables .table tr td:last-child { text-align: right; }

/* Payment detail key/value table (#PaymentDetail) */
.earn-detail-table {
  width: 100%;
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  overflow: hidden;
  font-size: 13px;
  margin-top: 14px;
}
.earn-detail-table td {
  padding: 10px 14px;
  border-bottom: 1px solid var(--ardyss-border);
}
.earn-detail-table tr:last-child td { border-bottom: none; }
.earn-detail-table td:first-child {
  font-weight: 600;
  color: #6c757d;
  width: 38%;
  background: var(--ardyss-gray-bg);
}

/* Bonus-name link inside the period summary grid */
.ardyss-grid td a.earn-bonus-link {
  color: var(--ardyss-pink);
  font-weight: 500;
  text-decoration: none;
}
.ardyss-grid td a.earn-bonus-link:hover { text-decoration: underline; }


/* =============================================
   THREE TO THRIVE REPORT
   ThreeToThriveReport.aspx
   ============================================= */

/* ── Summary pills ── */
.ttt-summary-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}
.ttt-summary-pill {
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: #fff;
  border: 1px solid var(--ardyss-border);
  border-radius: 10px;
  padding: 10px 20px;
  min-width: 150px;
}
.ttt-summary-pill--pink {
  border-color: var(--ardyss-pink-light);
  background: var(--ardyss-pink-light);
}
.ttt-summary-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--ardyss-pink);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.ttt-summary-value {
  font-size: 15px;
  font-weight: 600;
  color: #212529;
}

/* ── Table wrapper ── */
.ttt-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Table base ── */
.ttt-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
  font-family: 'Poppins', sans-serif;
}
.ttt-table thead tr {
  background: var(--ardyss-pink);
}
.ttt-table thead th {
  padding: 11px 13px;
  color: #fff;
  font-weight: 500;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
  border: none;
}
.ttt-table tbody tr {
  border-bottom: 1px solid var(--ardyss-border);
  transition: background 0.12s;
}
.ttt-table tbody tr:last-child { border-bottom: none; }
.ttt-table tbody tr:hover { background: #fdf0f7; }
.ttt-table tbody td {
  padding: 9px 13px;
  color: #495057;
  vertical-align: middle;
}

/* ── Hidden / detail rows ── */
.ttt-hidden { display: none !important; }
.ttt-detail-row td {
  background: #fafafa;
  font-size: 12px;
}
.ttt-detail-row:hover td { background: #f5f5f5; }

/* ── Detail toggle button ── */
.ttt-detail-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  font-size: 11px;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  background: #fff;
  color: var(--ardyss-pink);
  border: 1.5px solid var(--ardyss-pink);
  border-radius: 20px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.ttt-detail-btn:hover,
.ttt-detail-btn--active {
  background: var(--ardyss-pink);
  color: #fff;
}

/* ── Valid / Pending badges ── */
.ttt-badge {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 12px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}
.ttt-badge--green { background: #d1e7dd; color: #0a5c30; }
.ttt-badge--gray  { background: #e9ecef; color: #6c757d; }

/* ── Export buttons (DataTables Buttons) ── */
.ttt-export-btn,
.ttt-export-btn:hover,
.ttt-export-btn:focus {
  display: inline-flex !important;
  align-items: center;
  gap: 5px;
  padding: 6px 14px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  font-family: 'Poppins', sans-serif !important;
  background: #fff !important;
  color: #495057 !important;
  border: 1.5px solid var(--ardyss-border) !important;
  border-radius: 6px !important;
  box-shadow: none !important;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.ttt-export-btn:hover {
  background: var(--ardyss-pink-light) !important;
  color: var(--ardyss-pink) !important;
  border-color: var(--ardyss-pink) !important;
}

/* ── DataTables UI overrides for TTT ── */
#ttt_data_table_wrapper .dataTables_filter input {
  border: 1.5px solid var(--ardyss-border);
  border-radius: 6px;
  padding: 5px 10px;
  font-family: 'Poppins', sans-serif;
  font-size: 12px;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
#ttt_data_table_wrapper .dataTables_filter input:focus {
  border-color: var(--ardyss-pink);
  box-shadow: 0 0 0 3px rgba(214,51,132,0.10);
}
#ttt_data_table_wrapper .dataTables_info,
#ttt_data_table_wrapper .dataTables_length select {
  font-size: 12px;
  color: #6c757d;
  font-family: 'Poppins', sans-serif;
}
#ttt_data_table_wrapper .paginate_button.current,
#ttt_data_table_wrapper .paginate_button.current:hover {
  background: var(--ardyss-pink) !important;
  border-color: var(--ardyss-pink) !important;
  color: #fff !important;
  border-radius: 6px;
}
#ttt_data_table_wrapper .paginate_button:not(.disabled):hover {
  background: var(--ardyss-pink-light) !important;
  border-color: var(--ardyss-pink-light) !important;
  color: var(--ardyss-pink) !important;
  border-radius: 6px;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .ttt-summary-pill {
    flex: 1 1 calc(50% - 6px);
    min-width: unset;
  }
}
@media (max-width: 480px) {
  .ttt-summary-pill { flex: 1 1 100%; }
}


/* =============================================
   WAITING ROOM
   WaitingRoom.aspx
   ============================================= */

/* ── Guidelines card ── */
.wr-guidelines-card {
  border-left: 4px solid var(--ardyss-green);
}

.wr-guideline-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.wr-guideline-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 13px;
  color: #495057;
  line-height: 1.55;
}

.wr-check-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #d1e7dd;
  color: var(--ardyss-green);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

.wr-check-icon svg {
  width: 11px;
  height: 11px;
  stroke: var(--ardyss-green);
}

/* ── Alert message bar ── */
.wr-alert {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  background: #fff3cd;
  border: 1px solid #ffe08a;
  border-left: 4px solid #ffc107;
  border-radius: 10px;
  padding: 14px 16px;
}

.wr-alert-body {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex: 1;
}

.wr-alert-icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: #856404;
  margin-top: 1px;
}

.wr-alert-text {
  font-size: 13px;
  color: #664d03;
  line-height: 1.5;
}

.wr-alert-close {
  flex-shrink: 0;
  background: none;
  border: none;
  padding: 2px;
  cursor: pointer;
  color: #856404;
  opacity: 0.6;
  transition: opacity 0.15s;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.wr-alert-close:hover { opacity: 1; }
.wr-alert-close svg { stroke: #856404; }

/* ── Placement input inside GridView ── */
.wr-placement-input {
  max-width: 140px;
  min-width: 110px;
  padding: 7px 10px;
  font-size: 12.5px;
}

/* ── Send row ── */
.wr-send-row {
  display: flex;
  justify-content: flex-end;
  padding-top: 4px;
  border-top: 1px solid var(--ardyss-border);
}

.wr-send-row .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 22px;
  font-size: 13px;
}

/* ── GridView sort link buttons (inside <th>) ── */
.ardyss-grid th a,
.ardyss-grid th .btn-link {
  color: #6c757d;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.15s;
}

.ardyss-grid th a:hover,
.ardyss-grid th .btn-link:hover {
  color: var(--ardyss-pink);
}

/* ── Responsive ── */
@media (max-width: 768px) {
  .wr-placement-input {
    max-width: 100%;
    min-width: 90px;
  }
  .wr-send-row { justify-content: stretch; }
  .wr-send-row .btn-primary { width: 100%; justify-content: center; }
}


/* =============================================
   ARDYSS FORM MODAL  (.ardyss-form-modal)
   Modal genérico para formularios de edición.
   Usado por: perfil, contacto, etc.
   ============================================= */

.ardyss-form-modal .modal-dialog {
  max-width: 520px;
}
.ardyss-form-modal .modal-content {
  border: none;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0,0,0,0.16);
}

/* ── Header ── */
.afm-header {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 24px;
  background: linear-gradient(135deg, var(--ardyss-pink) 0%, var(--ardyss-sidebar) 100%);
  position: relative;
}
.afm-header-icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255,255,255,0.2);
  display: flex;
  align-items: center;
  justify-content: center;
}
.afm-header-icon svg {
  width: 20px;
  height: 20px;
  stroke: #fff;
}
.afm-header-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.75);
  margin-bottom: 2px;
}
.afm-header-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin: 0;
}
.afm-header-title span,
.afm-header-title label {
  color: #fff !important;
  font-size: inherit;
  font-weight: inherit;
}
.afm-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: rgba(255,255,255,0.18);
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.afm-close:hover { background: rgba(255,255,255,0.32); }
.afm-close svg   { stroke: #fff; }

/* ── Body ── */
.afm-body {
  padding: 24px 26px 8px;
  background: #fff;
}

/* Two-column row inside the body */
.afm-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Validation messages */
.afm-validation,
.afm-validation * {
  font-size: 11px !important;
  color: #dc3545 !important;
  font-style: italic;
  display: block;
  margin-top: 4px;
}

/* Required asterisk */
.afm-required {
  color: var(--ardyss-pink);
  margin-left: 3px;
  font-size: 13px;
  line-height: 1;
}

/* ── Footer ── */
.afm-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 16px 26px 20px;
  background: #fff;
  border-top: 1px solid var(--ardyss-border);
}
.afm-footer .btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 22px;
  font-size: 13px;
}
.afm-footer .btn-outline-secondary {
  font-size: 13px;
  padding: 8px 18px;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  .ardyss-form-modal .modal-dialog { margin: 12px; }
  .afm-row { grid-template-columns: 1fr; }
  .afm-footer { flex-direction: column-reverse; }
  .afm-footer .btn { width: 100%; justify-content: center; }
}


/* =============================================
   FAST TRACK BANNER
   Dashboard — entre ROW 2 (Builder/Rank) y ROW 3 (Power Start)
   ============================================= */

.ft-banner {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 18px 24px;
  background: linear-gradient(135deg, #1a1a2e 0%, #16213e 60%, #0f3460 100%);
  border-radius: 14px;
  text-decoration: none;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  box-shadow: 0 4px 18px rgba(15,52,96,0.22);
  cursor: pointer;
  /* Fina línea superior en rosa Ardyss para anclar al sistema de diseño */
  border-top: 3px solid var(--ardyss-pink);
}
.ft-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(15,52,96,0.32);
  text-decoration: none;
}
.ft-banner:active { transform: translateY(0); }

/* Resplandor de fondo animado */
.ft-banner-glow {
  position: absolute;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(214,51,132,0.18) 0%, transparent 70%);
  top: -80px;
  right: 160px;
  pointer-events: none;
  animation: ft-glow-drift 6s ease-in-out infinite alternate;
}
@keyframes ft-glow-drift {
  from { transform: translateX(0)  scale(1);    opacity: 0.7; }
  to   { transform: translateX(40px) scale(1.15); opacity: 1; }
}

/* Ícono del rayo */
.ft-banner-icon {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(214,51,132,0.18);
  border: 1.5px solid rgba(214,51,132,0.35);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;
}
.ft-banner-icon svg {
  width: 22px;
  height: 22px;
  stroke: var(--ardyss-pink);
  filter: drop-shadow(0 0 6px rgba(214,51,132,0.5));
}

/* Texto */
.ft-banner-body {
  flex: 1;
  min-width: 0;
  position: relative;
  z-index: 1;
}
.ft-banner-eyebrow {
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(214,51,132,0.85);
  margin-bottom: 2px;
}
.ft-banner-title {
  font-size: 16px;
  font-weight: 600;
  color: #fff;
  margin-bottom: 2px;
}
.ft-banner-sub {
  font-size: 12px;
  color: rgba(255,255,255,0.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Botón CTA */
.ft-banner-cta {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 9px 20px;
  background: var(--ardyss-pink);
  color: #fff;
  font-size: 12.5px;
  font-weight: 500;
  border-radius: 8px;
  white-space: nowrap;
  position: relative;
  z-index: 1;
  transition: background 0.15s;
}
.ft-banner:hover .ft-banner-cta {
  background: var(--ardyss-pink-dark);
}

/* Responsive */
@media (max-width: 640px) {
  .ft-banner { gap: 14px; padding: 16px 18px; }
  .ft-banner-sub { display: none; }
  .ft-banner-icon { width: 40px; height: 40px; border-radius: 10px; }
}
@media (max-width: 420px) {
  .ft-banner-cta span { display: none; } /* solo flecha */
  .ft-banner-cta { padding: 9px 14px; }
}