.admin-body {
  background: var(--off-white);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  padding-bottom: 0;
}

.admin-nav {
  background: var(--white);
  position: static;
  top: 0;
  z-index: 20;
  height: auto;
  min-height: 75px;
  display: flex;
  align-items: center;
  padding: 0 28px;
  gap: 28px;
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  border-bottom: 1px solid var(--border);
}

.admin-nav-inner {
  display: flex;
  align-items: center;
  width: 100%;
  height: 100%;
  gap: 28px;
  min-width: 0;
}

.admin-nav-inner .logo {
  flex-shrink: 0;
  display: flex;
}

.admin-nav-inner .logo img {
  height: 36px;
}

.admin-nav-title {
  display: none;
}

.admin-nav-links {
  display: none !important;
}

.admin-nav-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  margin-left: auto;
  padding: 0;
  height: auto;
  min-width: 0;
}

.admin-nav-actions > * {
  flex-shrink: 0;
}

.admin-nav-actions .sub-badge {
  flex-shrink: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}

.admin-nav-actions a,
.admin-nav-actions span {
  font-size: 14px;
  color: var(--text-mid);
  text-decoration: none;
  transition: color 0.2s ease;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 10px;
}

.admin-nav-actions a:hover {
  color: var(--navy);
}

@media (max-width: 480px) {
  .admin-nav { padding: 0 16px; gap: 16px; min-height: 68px; }
  .admin-nav-inner { gap: 12px; }
  .admin-nav-actions { gap: 12px; }
  .admin-nav-inner .logo img { height: 28px; }
  .admin-nav-actions .btn-small { padding: 8px 10px; }
  .admin-nav-actions .sub-badge {
    max-width: 108px;
    font-size: 11px;
    padding: 5px 8px;
    white-space: nowrap;
  }
}

@media (max-width: 360px) {
  .admin-nav { padding: 0 12px; gap: 12px; min-height: 64px; }
  .admin-nav-actions { gap: 8px; }
  .admin-nav-inner .logo img { height: 24px; }
  .admin-nav-actions .sub-badge { max-width: 78px; font-size: 10px; padding: 4px 6px; }
}

.admin-layout-wrapper {
  display: flex;
  flex: 1;
  width: 100%;
}

.admin-sidebar-main {
  display: none;
  width: 280px;
  background: #1F2937;
  color: #fff;
  padding: 0;
  flex-shrink: 0;
  overflow-y: auto;
  box-shadow: 1px 0 3px rgba(0, 0, 0, 0.1);
  /* At desktop, sidebar takes full viewport height */
}

.admin-sidebar-header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 16px 24px;
}

.admin-sidebar-logo-card {
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 18px;
  min-height: 80px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.admin-sidebar-logo-card img {
  height: 42px;
  max-width: 100%;
}

.admin-sidebar-brand-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
}

.admin-sidebar-brand-name {
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  margin: 0;
  overflow-wrap: break-word;
  line-height: 1.3;
}

.admin-sidebar-brand-role {
  font-size: 12px;
  color: rgba(255, 255, 255, 0.6);
  margin: 2px 0 10px;
}

.admin-sidebar-code {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.03em;
  color: rgba(255, 255, 255, 0.85);
  background: rgba(255, 255, 255, 0.08);
  border: 1px dashed rgba(255, 255, 255, 0.25);
  border-radius: 6px;
  padding: 3px 8px;
  margin: 4px 0 10px;
  cursor: pointer;
  width: fit-content;
  transition: background 0.15s ease;
}

.admin-sidebar-code:hover { background: rgba(255, 255, 255, 0.16); }
.admin-sidebar-code i { font-size: 10px; opacity: 0.75; }
.admin-sidebar-code.copied { color: #4ADE80; border-color: rgba(74, 222, 128, 0.4); }

.admin-sidebar-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 20px;
  white-space: nowrap;
}

.admin-sidebar-status i { font-size: 6px; }

.status-active { background: rgba(21, 128, 61, 0.2); color: #4ADE80; }
.status-trial { background: rgba(255, 168, 0, 0.18); color: var(--orange-light); }
.status-pending { background: rgba(180, 83, 9, 0.25); color: #FBBF24; }
.status-inactive { background: rgba(185, 28, 28, 0.2); color: #F87171; }

.admin-sidebar-section {
  display: flex;
  flex-direction: column;
  gap: 0;
  padding: 0 12px;
  margin-bottom: 24px;
}

.admin-sidebar-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255, 255, 255, 0.5);
  padding: 0 8px;
  margin-bottom: 8px;
}

.admin-sidebar-link {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 14px;
  border-radius: 8px;
  text-decoration: none;
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
  font-weight: 500;
  transition: all 0.2s ease;
  position: relative;
}

.admin-sidebar-link:hover {
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
}

.admin-sidebar-link.active {
  background: rgba(29, 181, 168, 0.2);
  color: #1DB5A8;
  font-weight: 600;
}

.admin-sidebar-link i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  flex-shrink: 0;
}

.admin-sidebar-link.active::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: #1DB5A8;
  border-radius: 0 3px 3px 0;
}

.admin-content-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: auto;
  width: 100%;
}

.admin-main {
  flex: 1;
  padding: 20px 16px;
  width: 100%;
  max-width: 100%;
}

.admin-main h1 {
  font-size: 26px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
}

.admin-sub {
  color: var(--text-light);
  font-size: 14px;
  margin-bottom: 28px;
}

.mobile-tab-bar {
  display: none;
}

/* ---- Auth pages (login/register) ---- */
.admin-auth-body {
  background: var(--off-white);
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px 16px;
}
.auth-shell {
  width: 100%;
  max-width: 440px;
  display: flex;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(17,24,39,0.08);
}
/* Left brand panel: hidden on mobile, shown once there's room for a real two-panel layout */
.auth-side {
  position: relative;
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  width: 45%;
  padding: 48px 40px;
  background: linear-gradient(160deg, var(--navy), #0d302e);
  color: var(--white);
  overflow: hidden;
}
/* soft glow + dot texture so the panel reads as designed, not just a flat fill */
.auth-side::before {
  content: '';
  position: absolute;
  top: -90px; right: -90px;
  width: 320px; height: 320px;
  background: radial-gradient(circle, rgba(255,168,0,0.45) 0%, rgba(255,168,0,0) 70%);
  pointer-events: none;
}
.auth-side::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255,255,255,0.09) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 75%);
  mask-image: linear-gradient(180deg, #000, transparent 75%);
  pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }

.auth-side .auth-logo { display: inline-block; margin-bottom: 34px; }
.auth-side .auth-logo img { height: 24px; filter: brightness(0) invert(1); }
.auth-eyebrow {
  display: flex; align-items: center; gap: 8px;
  font-family: 'Quicksand', sans-serif; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.09em; color: var(--orange-light);
  margin-bottom: 12px;
}
.auth-eyebrow::before { content: ''; width: 18px; height: 2px; border-radius: 2px; background: var(--orange-light); }
.auth-side h2 { font-size: 27px; line-height: 1.28; font-weight: 700; margin-bottom: 14px; letter-spacing: -0.01em; }
.auth-side h2 em { font-style: normal; color: var(--orange-light); }
.auth-side-sub { font-size: 14px; line-height: 1.65; color: rgba(255,255,255,0.72); max-width: 30ch; margin-bottom: 32px; }

.auth-perks { list-style: none; display: flex; flex-direction: column; gap: 16px; margin-bottom: 40px; }
.auth-perks li { display: flex; align-items: center; gap: 12px; font-size: 14px; color: rgba(255,255,255,0.92); }
.auth-perks .perk-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18);
  display: flex; align-items: center; justify-content: center;
}
.auth-perks i { color: var(--orange-light); font-size: 11px; }

.auth-card {
  background: var(--white);
  padding: 28px 22px;
  width: 100%;
  flex: 1;
}
.auth-logo { display: inline-block; }
.auth-logo img { height: 30px; margin-bottom: 18px; }
.auth-card h1 { font-size: 24px; margin-bottom: 8px; font-weight: 600; }
.auth-card h2 { font-size: 24px; margin-bottom: 8px; font-weight: 600; color: var(--text-dark); }
.auth-sub { color: var(--text-light); font-size: 15px; margin-bottom: 28px; line-height: 1.6; }
.auth-switch { margin-top: 18px; font-size: 14px; color: var(--text-mid); text-align: center; }
.auth-switch a { color: var(--navy); font-weight: 600; text-decoration: none; }
.login-forgot-row { text-align: right; margin: -8px 0 18px; }
.login-forgot-link { font-weight: 600; color: var(--navy); text-decoration: none; font-size: 13px; }
.login-forgot-link:hover { text-decoration: underline; }
.password-field-wrapper { position: relative; display: flex; align-items: center; }
.password-field-wrapper input { width: 100%; padding-right: 40px; }
.password-toggle {
  position: absolute;
  right: 12px;
  width: auto;
  background: none;
  border: none;
  color: var(--text-mid, #6B7280);
  cursor: pointer;
  padding: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  transition: color 0.2s ease;
}
.password-toggle:hover { color: var(--text-dark, #1F2937); }
.password-toggle i { pointer-events: none; }
.form-fieldset { margin-bottom: 28px; padding-bottom: 28px; border-bottom: 1px solid var(--border); }
.form-fieldset:last-of-type { margin-bottom: 32px; padding-bottom: 0; border-bottom: none; }
.form-fieldset-title {
  font-family: 'Quicksand', sans-serif; font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); margin-bottom: 18px;
}
.label-optional { font-weight: 500; color: var(--text-light); text-transform: none; }

.form-field { margin-bottom: 18px; }
.field-label { display: block; font-size: 14px; font-weight: 600; color: var(--text-dark); margin-bottom: 8px; }

/* ---- Phone number with country code ---- */
/* min-width: 0 on every piece is required: form controls default to min-width:auto (their own
   content size) as flex items, which silently overrides max-width and pushes the whole row (and
   the form around it) wider than the screen. flex-wrap lets the two fields drop to separate lines
   on narrow screens instead of squeezing/overflowing, no fixed breakpoint needed. */
.form-field.phone-field { min-width: 0; }
.phone-input-group { display: flex; flex-wrap: nowrap; gap: 8px; min-width: 0; max-width: 100%; }
.phone-input-group .phone-country-select,
.phone-input-group input {
  display: block;
  min-width: 0;
  box-sizing: border-box;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
  color: var(--text-dark);
  background: var(--white);
}
.phone-input-group .phone-country-select:focus,
.phone-input-group input:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,127,124,0.1);
}
.phone-country-picker {
  position: relative;
  display: block;
  flex: 0 1 92px;
  max-width: 104px;
  min-width: 0;
  overflow: hidden;
}
.phone-input-group .phone-country-select {
  width: 100%;
  padding-left: 12px;
  padding-right: 24px;
  /* The select's own text stays real (dark, normal color) because color is inherited by the
     dropdown's options; making it transparent here made every unselected option in the open list
     invisible too. Instead the .phone-country-code span below sits on top of the closed box with
     an opaque background and physically covers the select's own text, so a long country name in
     the option list never has to fit in this small box, but the open list stays fully readable. */
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  /* Native selects reserve their own space for the dropdown arrow on top of any padding we set.
     Turning the native arrow off and drawing our own small one gives that space back and lets
     padding-right above be the only thing controlling it. */
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath fill='%236B7280' d='M1.4.6 6 5.2 10.6.6 12 2 6 8 0 2z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
  background-size: 10px 7px;
}
.phone-country-code {
  position: absolute;
  inset: 1px; /* stays just inside the select's own 1px border, so that border still shows */
  border-radius: 9px;
  background: var(--white); /* opaque: physically hides the select's own text underneath */
  display: flex;
  align-items: center;
  padding-left: 12px;
  pointer-events: none; /* clicks pass through to the select underneath */
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 16px;
  color: var(--text-dark);
}
.phone-input-group input {
  flex: 1 1 140px;
  padding-left: 12px;
  padding-right: 12px;
}
.phone-country-name {
  display: block;
  margin-top: 6px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--text-light, #6B7280);
}

/* ---- Category picker ---- */
.cat-picker { position: relative; }
.cat-picker-trigger {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--white); font-family: 'Google Sans Flex', sans-serif; font-size: 15px;
  color: var(--text-dark); cursor: pointer; text-align: left;
}
.cat-picker-trigger:hover { border-color: var(--navy-light); background: var(--off-white); }
.cat-picker.open .cat-picker-trigger,
.cat-picker-trigger:focus-visible {
  outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,127,124,0.1);
}
.cat-picker-trigger.cat-error { border-color: #DC2626; box-shadow: 0 0 0 3px rgba(220,38,38,0.1); }
.cat-picker-trigger[data-empty="true"] .cat-picker-label { color: #9CA3AF; }
.cat-picker-label { flex: 1; font-weight: 500; }
.cat-picker-icon {
  width: 28px; height: 28px; border-radius: 8px; background: var(--off-white);
  display: flex; align-items: center; justify-content: center; color: var(--navy);
  font-size: 14px; flex-shrink: 0;
}
.cat-picker-chevron { color: var(--text-light); font-size: 12px; transition: transform .15s ease; }
.cat-picker.open .cat-picker-chevron { transform: rotate(180deg); }

.cat-picker-panel {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 40;
  background: var(--white); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(17,24,39,0.15); padding: 12px; max-height: 350px;
}
.cat-picker.open .cat-picker-panel { display: flex; }
.cat-picker-search {
  display: flex; align-items: center; gap: 10px; padding: 11px 13px;
  border: 1px solid var(--border); border-radius: 10px; margin-bottom: 10px; flex-shrink: 0;
  background: var(--off-white);
}
.cat-picker-search i { color: var(--text-light); font-size: 14px; }
.cat-picker-search input { border: none; outline: none; width: 100%; font-family: 'Google Sans Flex', sans-serif; font-size: 14px; background: transparent; }
.cat-picker-list { list-style: none; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; }
.cat-picker-option {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 11px 12px;
  border: none; border-radius: 10px; background: none; font-family: 'Google Sans Flex', sans-serif;
  font-size: 15px; line-height: 1.4; color: var(--text-dark); text-align: left; cursor: pointer; transition: all 0.2s ease;
}
.cat-picker-option:hover { background: var(--off-white); }
.cat-picker-option.selected { background: rgba(27,127,124,0.15); color: var(--navy); font-weight: 600; }
.cat-picker-option-icon {
  width: 26px; height: 26px; border-radius: 7px; background: var(--off-white);
  display: flex; align-items: center; justify-content: center; color: var(--navy);
  font-size: 12px; flex-shrink: 0;
}
.cat-picker-option.selected .cat-picker-option-icon { background: var(--navy); color: var(--white); }
.cat-picker-empty { display: none; padding: 14px; text-align: center; font-size: 13px; color: var(--text-light); }

.cat-locked {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--off-white);
}
.cat-locked-icon {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(27,127,124,0.1);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}
.cat-locked-label { flex: 1; font-weight: 600; font-size: 14.5px; }
.cat-locked-change { color: var(--navy); font-weight: 600; font-size: 13px; text-decoration: underline; flex-shrink: 0; }

form label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 18px;
}
form label input,
form label select,
form label textarea {
  display: block;
  width: 100%;
  margin-top: 8px;
  padding: 14px 16px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 16px; /* 16px prevents iOS auto-zoom on focus */
  color: var(--text-dark);
  background: var(--white);
}
form label input:focus,
form label select:focus,
form label textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27,127,124,0.1);
}
form label.checkbox { display: flex; align-items: center; gap: 8px; font-weight: 500; }
form label.checkbox input { width: auto; margin: 0; }
.checkbox-row { display: flex; gap: 20px; margin-bottom: 14px; flex-wrap: wrap; }
.two-col { display: grid; grid-template-columns: 1fr; gap: 0 16px; }

form label textarea { resize: vertical; font-family: 'Google Sans Flex', sans-serif; line-height: 1.5; min-height: 120px; }
.field-hint { display: block; margin-top: 8px; margin-bottom: 24px; font-size: 13px; font-weight: 500; color: var(--text-light, #6B7280); overflow-wrap: break-word; line-height: 1.5; }
.field-hint-error { color: #DC2626; }

/* Submit button "in progress" state, used while a form (e.g. product save) is posting. */
.btn-primary,
.btn {
  min-width: max-content;
  width: auto;
}

.btn-primary.btn-loading,
.btn.btn-loading {
  opacity: 0.85;
  cursor: not-allowed;
  pointer-events: none;
  min-width: fit-content;
}

.btn-loading .btn-label {
  display: flex;
  align-items: center;
  gap: 0;
  white-space: nowrap;
}

.btn-loading .btn-label::after {
  content: '';
  display: inline-block;
  width: 14px;
  height: 14px;
  min-width: 14px;
  margin-left: 6px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: btn-spin 0.7s linear infinite;
  flex-shrink: 0;
}

.btn-label::after {
  content: '';
  display: none;
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}
.detail-flag { color: var(--navy); font-size: 12px; margin-left: 6px; }
.field-hint code { background: #F3F4F6; padding: 1px 5px; border-radius: 4px; font-size: 11.5px; }

/* Specifications: label/value row editor (replaces the old free-text textarea). */
.specs-field { margin-bottom: 14px; }
.specs-table { border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.specs-table-head {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 8px;
  padding: 8px 10px;
  background: var(--off-white);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-light);
}
.specs-row {
  display: grid;
  grid-template-columns: 1fr 1fr 32px;
  gap: 8px;
  align-items: center;
  padding: 8px 10px;
  border-top: 1px solid var(--border);
}
.specs-rows .specs-row:first-child { border-top: none; }
.specs-row input {
  margin: 0;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 14px;
  color: var(--text-dark);
  box-sizing: border-box;
}
.specs-row input:focus { outline: none; border-color: var(--navy); }
.specs-row-remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-light);
  cursor: pointer;
  border-radius: 6px;
  flex: none;
}
.specs-row-remove:hover { background: #FEE2E2; color: #B91C1C; }
.specs-add-row {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: auto;
  margin-top: 10px;
  padding: 9px 16px;
  font-size: 13px;
}

@media (max-width: 480px) {
  .specs-table-head { display: none; }
  .specs-row {
    grid-template-columns: 1fr;
    gap: 6px;
    position: relative;
    padding: 12px 40px 12px 10px;
  }
  .specs-row-remove { position: absolute; top: 6px; right: 4px; }
}

.field-label-standalone { display: block; font-size: 13px; font-weight: 600; color: var(--text-mid); margin-bottom: 10px; }

.theme-swatch-row { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; }
.theme-swatch {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 10px;
  border: 2px solid var(--border, #E5E9FF);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.2s;
  font-weight: 500;
  font-size: 13px;
  color: var(--text-mid);
}
.theme-swatch:hover { border-color: var(--navy-light); }
.theme-swatch.is-selected { border-color: var(--navy); background: rgba(0,0,0,0.02); color: var(--text-dark); }
.theme-swatch input[type="radio"] { position: absolute; opacity: 0; width: 0; height: 0; }
.theme-swatch-color {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  flex-shrink: 0;
  border: 2px solid rgba(255,255,255,0.6);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.08);
  position: relative;
}
.theme-swatch.is-selected .theme-swatch-color::after {
  content: '\f00c';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  color: #fff;
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  text-shadow: 0 0 2px rgba(0,0,0,0.4);
}
.theme-swatch-label { white-space: nowrap; }

.hours-week {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 14px;
}
.hours-day-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}
.hours-day-row:last-child { border-bottom: none; }
.hours-day-toggle {
  margin: 0;
  min-width: 130px;
  font-weight: 600;
  color: var(--text-dark);
}
.hours-day-toggle input { width: auto; margin: 0; }
.hours-sep { font-size: 12px; color: var(--text-light); flex-shrink: 0; }
.hours-closed-label {
  font-size: 12.5px;
  color: var(--text-light);
  font-style: italic;
}

/* ==========================================================================
   Business hours editor (Business, Booking, Services and Listings settings)
   One row per day, three columns:  Day  |  Opening hours  |  24-hour option
   Scoped to .hours-editor so the booking time-slot editor is unaffected.
   ========================================================================== */
.settings-form .hours-editor {
  container-type: inline-size;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  background: var(--white);
  overflow: hidden;
  margin: 0;
}

.settings-form .hours-editor .hours-day-row {
  display: grid;
  grid-template-columns: 170px minmax(0, 342px) 1fr;
  grid-template-areas: "day times option";
  align-items: center;
  column-gap: 20px;
  row-gap: 0;
  min-height: 68px;
  padding: 12px 22px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
  transition: background 0.18s ease;
}
.settings-form .hours-editor .hours-day-row:last-child { border-bottom: none; }
.settings-form .hours-editor .hours-day-row:has(.hours-toggle:not(:checked)) { background: var(--off-white); }

/* Column 1: day checkbox + name */
.settings-form .hours-editor .hours-day-toggle {
  grid-area: day;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-dark);
  cursor: pointer;
}
.settings-form .hours-editor .hours-day-row:has(.hours-toggle:not(:checked)) .hours-day-toggle { color: var(--text-light); }

.settings-form .hours-editor .hours-day-toggle input,
.settings-form .hours-editor .hours-24h-toggle input {
  width: 18px;
  height: 18px;
  margin: 0;
  padding: 0;
  flex-shrink: 0;
  accent-color: var(--navy);
  cursor: pointer;
}

/* The wrapper is transparent to the grid, so its children sit in the row's columns.
   (The existing toggle script shows/hides this wrapper as a whole.) */
.settings-form .hours-editor .hours-day-times { display: contents; }

/* Column 2: from / to selects */
.settings-form .hours-editor .hours-time-inputs {
  grid-area: times;
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  min-width: 0;
}
.settings-form .hours-editor .hours-time-inputs select {
  flex: 1 1 0;
  width: auto;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0 12px;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 14.5px;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.settings-form .hours-editor .hours-time-inputs select:hover { border-color: var(--navy-light); }
.settings-form .hours-editor .hours-time-inputs select:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 4px rgba(27, 127, 124, 0.1);
}
.settings-form .hours-editor .hours-sep {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-light);
  flex-shrink: 0;
}

/* Column 2 (instead of the selects): status shown when the day is 24 hours */
.settings-form .hours-editor .hours-24h-label {
  grid-area: times;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 16px;
  border-radius: 10px;
  background: rgba(27, 127, 124, 0.09);
  color: var(--navy);
  font-size: 14.5px;
  font-weight: 600;
}
.settings-form .hours-editor .hours-24h-label::before {
  content: '\f017';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  font-size: 13px;
}

/* Column 2 (instead of the selects): status shown when the day is closed */
.settings-form .hours-editor .hours-closed-label {
  grid-area: times;
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-style: normal;
  font-weight: 500;
  color: var(--text-light);
}
.settings-form .hours-editor .hours-closed-label::before {
  content: '\f057';
  font-family: 'Font Awesome 6 Free';
  font-weight: 400;
  font-size: 13px;
}

/* Column 3: "24 hours" option, same pill style as the other option chips in settings */
.settings-form .hours-editor .hours-24h-toggle {
  grid-area: option;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 0 16px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  background: var(--white);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--text-mid);
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}
.settings-form .hours-editor .hours-24h-toggle:hover { border-color: var(--navy-light); }
.settings-form .hours-editor .hours-24h-toggle:has(input:checked) {
  border-color: var(--navy);
  background: rgba(27, 127, 124, 0.09);
  color: var(--navy);
}

/* Narrow containers (phones, or tablets with the sidebar open):
   Day + 24-hour option on the first line, the times on their own full-width line. */
@container (max-width: 700px) {
  .settings-form .hours-editor .hours-day-row {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "day   option"
      "times times";
    min-height: 0;
    padding: 14px 16px;
  }
  .settings-form .hours-editor .hours-24h-toggle { justify-self: end; height: auto; padding: 8px 14px; }
  .settings-form .hours-editor .hours-time-inputs { margin-top: 12px; }
  /* the ticked "24 hours" pill already says it, so drop the extra status bar */
  .settings-form .hours-editor .hours-24h-label { display: none; }
  .settings-form .hours-editor .hours-closed-label { grid-area: option; justify-self: end; }
}

.form-errors, .form-success, .form-warning {
  border-radius: 10px;
  padding: 12px 16px;
  font-size: 14px;
  margin-bottom: 18px;
}
.form-errors { background: #FEF2F2; color: #B91C1C; border: 1px solid #FCA5A5; }
.form-success { background: #F0FDF4; color: #15803D; border: 1px solid #86EFAC; }
.form-warning { background: #FFFBEB; color: #92400E; border: 1px solid #FCD34D; }
.form-success i, .form-errors i, .form-warning i { margin-right: 4px; }

.form-warning-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---- Top nav (desktop only; mobile nav is defined earlier, unguarded) ---- */
@media (min-width: 900px) {
  .admin-nav { background: var(--white); border-bottom: 1px solid var(--border); position: static; top: 0; z-index: 20; }
  .admin-nav-inner {
    max-width: 1200px; margin: 0 auto; padding: 18px 16px;
    display: flex; align-items: center; gap: 14px;
  }
  .admin-nav-inner .logo { display: flex; }
  .admin-nav-inner .logo img { height: 24px; }
  .admin-nav-title { display: none; }
  .admin-nav-links { display: none; }
  .admin-nav-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
}

.btn-small {
  padding: 8px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--border); color: var(--text-mid);
  display: inline-flex; align-items: center; gap: 6px;
}
.btn-icon-only .btn-text { display: none; }
.btn-logout { color: #B91C1C; }
.sub-badge {
  font-size: 11px; font-weight: 700; padding: 5px 9px; border-radius: 20px;
  white-space: nowrap;
}
.sub-active { background: #F0FDF4; color: #15803D; }
.sub-trial { background: #FFF4E0; color: #B45900; }
.sub-pending { background: #FFFBEB; color: #B45309; }
.sub-expired, .sub-none, .sub-cancelled { background: #FEF2F2; color: #B91C1C; }

.sub-warning {
  background: #FFFBEB; color: #92400E; border-bottom: 1px solid #FDE68A;
  padding: 10px 16px; font-size: 13px; text-align: center;
}
.sub-warning a { color: #92400E; font-weight: 700; margin-left: 6px; white-space: nowrap; }

/* ---- Mobile bottom tab bar ---- */
.mobile-tab-bar {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 30;
  background: var(--white); border-top: 1px solid var(--border);
  display: flex; padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  box-shadow: 0 -2px 10px rgba(0,0,0,0.04);
}
.mobile-tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--text-light); font-size: 11px; font-weight: 600;
  padding: 6px 2px; border-radius: 10px;
}
.mobile-tab i { font-size: 17px; }
.mobile-tab.active { color: var(--navy); background: var(--off-white); }

.mobile-tab-more {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  background: none; border: none; font-family: inherit; cursor: pointer;
  text-decoration: none; color: var(--text-light); font-size: 11px; font-weight: 600;
  padding: 6px 2px; border-radius: 10px;
}
.mobile-tab-more i { font-size: 17px; }
.mobile-tab-more.active { color: var(--navy); background: var(--off-white); }

/* ---- Mobile "More" sheet: reveals sidebar pages that don't fit the bottom bar ---- */
.mobile-more-backdrop {
  display: none; position: fixed; inset: 0; z-index: 39;
  background: rgba(17, 24, 39, 0.4);
}
.mobile-more-backdrop.open { display: block; }

.mobile-more-sheet {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  background: var(--white); border-radius: 18px 18px 0 0;
  box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.18);
  padding: 8px 8px calc(14px + env(safe-area-inset-bottom));
  transform: translateY(100%);
  transition: transform 0.25s ease;
  max-height: 70vh;
  overflow-y: auto;
}
.mobile-more-sheet.open { transform: translateY(0); }

.mobile-more-sheet-handle {
  width: 36px; height: 4px; border-radius: 4px; background: var(--border);
  margin: 6px auto 12px;
}

.mobile-more-sheet-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--text-light); padding: 0 12px; margin-bottom: 8px;
}

.mobile-more-link {
  display: flex; align-items: center; gap: 14px;
  padding: 13px 12px; border-radius: 10px;
  text-decoration: none; color: var(--navy); font-size: 15px; font-weight: 600;
}
.mobile-more-link:active { background: var(--off-white); }
.mobile-more-link.active { color: #1DB5A8; background: rgba(29, 181, 168, 0.1); }
.mobile-more-link i { width: 20px; text-align: center; font-size: 16px; flex-shrink: 0; }

@media (min-width: 900px) {
  .mobile-more-backdrop, .mobile-more-sheet { display: none !important; }
}

/* ---- Main layout with sidebar ---- */
.admin-main {
  max-width: none;
  margin: 0;
  padding: 28px 16px 40px;
  display: grid;
  grid-template-columns: 1fr;
  align-content: start;
  gap: 0;
}

.admin-content-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

/* ---- Dashboard hero card ---- */
.hero-card {
  background: linear-gradient(135deg, var(--navy) 0%, #0f766e 100%);
  border-radius: 18px; padding: 32px; color: #fff; margin-bottom: 32px;
  box-shadow: 0 12px 40px rgba(17, 24, 39, 0.14);
}
.hero-card-top { display: flex; align-items: center; gap: 16px; margin-bottom: 20px; }
.hero-avatar {
  width: 56px; height: 56px; border-radius: 14px; background: rgba(255,255,255,0.15);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Quicksand', sans-serif; font-weight: 700; font-size: 22px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.12);
}
.hero-greeting { font-size: 14px; opacity: 0.90; margin-bottom: 4px; letter-spacing: 0.2px; }
.hero-text h1 { font-size: 28px; margin: 0; color: #fff; font-weight: 700; letter-spacing: -0.3px; }
.hero-sub-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin-bottom: 8px; }
.hero-sub-row .sub-badge { background: rgba(255,255,255,0.22); color: #fff; border: 1px solid rgba(255,255,255,0.18); padding: 6px 12px; border-radius: 18px; font-size: 12px; font-weight: 600; }
.hero-expiry { font-size: 13px; opacity: 0.92; margin-top: 2px; }
.hero-expiry strong { font-weight: 700; }
.hero-cta {
  display: inline-flex; align-items: center; gap: 8px; margin-top: 16px;
  background: #fff; color: var(--navy); text-decoration: none; font-weight: 700;
  font-size: 14px; padding: 11px 18px; border-radius: 10px; transition: all .2s ease;
}
.hero-cta:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,0,0,0.18); }

/* ---- Shop link card ---- */
.shop-link-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px 20px;
  margin-bottom: 24px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
  max-width: 100%;
  transition: all .2s ease;
}
.shop-link-card:hover {
  border-color: var(--navy-light);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
.shop-link-icon {
  width: 42px;
  height: 42px;
  min-width: 42px;
  border-radius: 12px;
  background: rgba(27, 127, 124, 0.12);
  color: var(--navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
}
.shop-link-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  flex: 1;
}
.shop-link-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--text-light);
}
.shop-link-url {
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.shop-link-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.btn-copy-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--navy);
  color: #fff;
  border: none;
  font-family: 'Google Sans Flex', sans-serif;
  font-weight: 700;
  font-size: 13px;
  padding: 10px 16px;
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  white-space: nowrap;
}
.btn-copy-link:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.15); }
.btn-copy-link.copied { background: #16a34a; }
.btn-open-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-mid);
  text-decoration: none;
  transition: all .15s ease;
}
.btn-open-link:hover { border-color: var(--navy); color: var(--navy); }

@media (max-width: 600px) {
  .shop-link-card {
    display: grid;
    grid-template-columns: 42px 1fr;
    grid-template-areas:
      "icon body"
      "actions actions";
    align-items: start;
    row-gap: 12px;
    column-gap: 14px;
    max-width: 100%;
  }
  .shop-link-icon { grid-area: icon; }
  .shop-link-body { grid-area: body; min-width: 0; }
  .shop-link-url {
    white-space: normal;
    overflow-wrap: anywhere;
    overflow: visible;
    text-overflow: unset;
  }
  .shop-link-actions {
    grid-area: actions;
    width: 100%;
    margin-left: 0;
  }
  .shop-link-actions .btn-copy-link { flex: 1; justify-content: center; }
}

/* ---- Stat cards ---- */
.stat-cards { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 32px; }
.stat-card {
  background: var(--white); border: 1px solid var(--border); border-radius: 16px;
  padding: 18px 20px; display: flex; align-items: center; gap: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04); transition: all .2s ease;
}
.stat-card:hover { border-color: var(--navy-light); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1); background: var(--white); }
.stat-card-warn { border-color: #FEA08B; background: #FFF7F3; }
.stat-card-warn:hover { border-color: #FD9970; }
.stat-icon {
  width: 48px; height: 48px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 18px;
}
.stat-icon-blue { background: #EFF6FF; color: #0C63E4; }
.stat-icon-green { background: #F0FDF4; color: #16A34A; }
.stat-icon-red { background: #FEF2F2; color: #DC2626; }
.stat-icon-gray { background: #F3F4F6; color: #6B7280; }
.stat-icon-orange { background: #FFF7ED; color: #EA580C; }
.stat-icon-purple { background: #F3E8FF; color: #9333EA; }
.stat-body { display: flex; flex-direction: column; gap: 2px; flex: 1; }
.stat-num { font-size: 24px; font-weight: 700; font-family: 'Quicksand', sans-serif; color: var(--navy); line-height: 1; }
.stat-num small { font-size: 14px; font-weight: 600; color: var(--text-light); }
.stat-card-warn .stat-num { color: #EA580C; }
.stat-label { font-size: 13px; color: var(--text-mid); font-weight: 500; }
.quick-actions { display: flex; flex-direction: column; gap: 14px; }
.quick-actions .btn-primary, .quick-actions .btn-info {
  display: flex; align-items: center; justify-content: flex-start; text-align: left;
  gap: 14px; padding: 16px 18px; border-radius: 12px; transition: all .2s ease;
}
.quick-actions .btn-primary:hover, .quick-actions .btn-info:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
}
.quick-action-icon {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 17px;
}
.quick-actions .btn-primary .quick-action-icon { background: rgba(255, 255, 255, 0.25); color: #fff; }
.quick-actions .btn-info .quick-action-icon { background: rgba(27, 127, 124, 0.12); color: var(--navy); }
.quick-action-text { display: flex; flex-direction: column; gap: 2px; }
.quick-action-text strong { font-size: 15px; font-weight: 700; }
.quick-actions .btn-info .quick-action-text strong { color: var(--text-dark); }
.quick-action-text span { font-size: 12px; font-weight: 500; }
.quick-actions .btn-primary .quick-action-text span { color: rgba(255, 255, 255, 0.90); }
.quick-actions .btn-info .quick-action-text span { color: var(--text-mid); }

.btn-info {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; font-size: 15px; font-weight: 600;
  text-decoration: none; border: 1px solid var(--border);
  border-radius: 10px; background: var(--white); color: var(--text-mid);
  transition: all .15s ease; cursor: pointer;
}
.btn-info:hover {
  border-color: var(--navy); background: var(--off-white);
  color: var(--navy);
}

/* ---- Settings form ---- */
.settings-form {
  display: block;
  width: 100%;
}

.settings-section {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 32px;
  margin-bottom: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
  display: block;
}

.settings-section:hover {
  border-color: #D1D5DB;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.09);
}

.settings-section h2 {
  font-size: 18px;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 8px;
  font-family: 'Quicksand', sans-serif;
  letter-spacing: -0.01em;
}

.settings-section-desc {
  font-size: 13px;
  color: var(--text-light);
  margin-bottom: 24px;
  line-height: 1.5;
}

.settings-section .form-field {
  margin-bottom: 22px;
}

.settings-section .form-field:last-child {
  margin-bottom: 0;
}

.settings-section .field-label {
  display: block;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-dark);
  margin-bottom: 8px;
}

.settings-section input[type="text"],
.settings-section input[type="email"],
.settings-section input[type="number"],
.settings-section select,
.settings-section textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: 'Google Sans Flex', sans-serif;
  font-size: 15px;
  color: var(--text-dark);
  background: var(--white);
  transition: all 0.2s ease;
}

.settings-section input[type="text"]:focus,
.settings-section input[type="email"]:focus,
.settings-section input[type="number"]:focus,
.settings-section select:focus,
.settings-section textarea:focus {
  outline: none;
  border-color: var(--navy);
  box-shadow: 0 0 0 3px rgba(27, 127, 124, 0.1);
  background: rgba(27, 127, 124, 0.02);
}

.settings-section textarea {
  resize: vertical;
  min-height: 110px;
  line-height: 1.5;
}

.logo-preview {
  display: block;
  width: 110px;
  height: 110px;
  object-fit: cover;
  border-radius: 12px;
  margin-top: 12px;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.video-preview {
  display: block;
  width: auto;
  height: auto;
  max-width: 280px;
  max-height: 360px;
  border-radius: 12px;
  margin-bottom: 12px;
  background: #000;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.video-upsell {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  font-size: 13px;
  color: var(--text-mid);
  background: #F9FAFB;
  border: 1px dashed var(--border);
  border-radius: 10px;
  padding: 12px 14px;
}

.video-upsell a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: underline;
}

.settings-section .two-col {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
}

.settings-section .hours-week {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  margin-bottom: 0;
  background: var(--off-white);
}

.settings-section .hours-day-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 16px;
  padding: 16px;
  border-bottom: 1px solid var(--border);
  background: var(--white);
}

.settings-section .hours-day-row:last-child {
  border-bottom: none;
}

.settings-section:last-of-type {
  margin-bottom: 0;
}

/* ---- Products table ---- */
.product-form {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 22px 18px;
  max-width: 720px;
  box-shadow: 0 1px 2px rgba(17, 24, 39, 0.03), 0 10px 28px rgba(17, 24, 39, 0.04);
}

.form-section { margin-bottom: 26px; }
.form-section:last-of-type { margin-bottom: 0; }
.form-section-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Quicksand', sans-serif;
  font-size: 12.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--navy);
  margin-bottom: 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--border);
}
.form-section-title i { font-size: 12px; width: 14px; text-align: center; }

.product-form label input,
.product-form label select,
.product-form label textarea {
  padding: 12px 14px;
  border-radius: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.product-form label input:focus,
.product-form label select:focus,
.product-form label textarea:focus {
  box-shadow: 0 0 0 3px rgba(27, 127, 124, 0.12);
}

.pricing-mode-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 16px;
  padding: 4px;
  background: var(--off-white);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.pricing-mode-group label.checkbox {
  flex: 1 1 150px;
  justify-content: center;
  gap: 6px;
  margin: 0;
  padding: 9px 12px;
  border-radius: 9px;
  font-size: 13px;
  font-weight: 600;
  color: var(--text-mid);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.pricing-mode-group label.checkbox:has(input:checked) {
  background: var(--white);
  color: var(--navy);
  box-shadow: 0 1px 4px rgba(17, 24, 39, 0.08);
}
.pricing-mode-group input[type="radio"] {
  width: 14px;
  height: 14px;
  accent-color: var(--navy);
  flex-shrink: 0;
}

.photo-upload {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  border: 1.5px dashed var(--border);
  border-radius: 12px;
  background: var(--off-white);
}
.photo-upload i { font-size: 18px; color: var(--navy); flex-shrink: 0; }
.photo-upload input[type="file"] {
  margin: 0;
  border: none;
  padding: 0;
  background: none;
  font-size: 13px;
}
.photo-upload .logo-preview { margin: 0 0 0 auto; width: 56px; height: 56px; border-radius: 8px; flex-shrink: 0; }

.form-actions { display: flex; gap: 10px; margin-top: 8px; }
.form-actions a, .form-actions button { flex: 1; text-align: center; justify-content: center; }
.product-table-wrap { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow-x: auto; }
.product-table { width: 100%; border-collapse: collapse; min-width: 560px; }
.product-table th { text-align: left; font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: var(--text-light); padding: 14px 16px; border-bottom: 1px solid var(--border); }
.product-table td { padding: 12px 16px; border-bottom: 1px solid var(--border); font-size: 14px; vertical-align: middle; }
.product-table tr:last-child td { border-bottom: none; }
.thumb-cell img, .thumb-placeholder { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; }
.thumb-placeholder { display: flex; align-items: center; justify-content: center; background: var(--off-white); color: var(--text-light); }
.badge-out { color: #B91C1C; font-weight: 700; font-size: 12px; }
.status-pill { font-size: 12px; font-weight: 700; padding: 4px 10px; border-radius: 20px; }
.status-active { background: #F0FDF4; color: #15803D; }
.status-draft { background: #F3F4F6; color: #4B5563; }
.row-actions { display: flex; gap: 8px; align-items: center; }
.row-actions .btn-action { 
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  padding: 8px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-mid);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.row-actions .btn-action i {
  font-size: 13px;
}
.row-actions .btn-edit {
  background: #1DB5A8;
  border: 1px solid #1DB5A8;
  color: var(--white);
}

.row-actions .btn-edit:hover { 
  background: #17A89A;
  border-color: #17A89A;
  color: var(--white);
}
.row-actions .btn-delete:hover { 
  background: #FEE2E2;
  border-color: #B91C1C;
  color: #B91C1C;
}
.inline-form { display: inline; }
.empty-row { text-align: center; padding: 40px !important; color: var(--text-light); }

/* ---- Products: search/filter toolbar ---- */
.products-toolbar { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; flex-wrap: wrap; }
.products-search { position: relative; flex: 1 1 240px; min-width: 180px; }
.products-search i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--text-light); font-size: 13px; }
.products-search input {
  width: 100%; padding: 10px 12px 10px 36px; border: 1px solid var(--border); border-radius: 8px;
  font-size: 14px; font-family: inherit; color: var(--text-dark);
}
.products-search input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27,127,124,0.12); }
.products-toolbar select#products-status-filter {
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; font-size: 14px;
  font-family: inherit; color: var(--text-dark); background: var(--white);
}
.products-clear-filter { font-size: 13px; font-weight: 600; color: var(--text-light); text-decoration: underline; white-space: nowrap; }

.product-list-wrap { background: var(--white); border: 1px solid var(--border); border-radius: 16px; overflow: hidden; }
.product-list-head, .product-row {
  display: grid;
  grid-template-columns: 60px minmax(160px, 1fr) minmax(100px, 140px) minmax(120px, 160px) minmax(90px, 110px) auto;
  align-items: center;
  gap: 14px 16px;
  padding: 14px 16px;
}
.product-list-head {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-light);
  border-bottom: 1px solid var(--border);
  background: rgba(0, 0, 0, 0.01);
}
.product-list-head span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.product-row {
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}
.product-row:last-child {
  border-bottom: none;
}
.pr-thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.pr-thumb img, .pr-thumb .thumb-placeholder {
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  flex-shrink: 0;
}
.thumb-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--off-white);
  color: var(--text-light);
  flex-shrink: 0;
}
.pr-name {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.pr-name-title {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}
.pr-name-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 500;
  color: var(--text-dark);
}
.pr-meta {
  display: block;
  font-size: 12px;
  color: var(--text-mid);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.detail-flag {
  flex-shrink: 0;
  color: #0ea5e9;
  font-size: 12px;
}
.pr-price {
  color: var(--text-mid);
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-stock {
  color: var(--text-dark);
  font-weight: 500;
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.pr-status {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 0;
}
.badge-out {
  color: #B91C1C;
  font-weight: 700;
  font-size: 12px;
}
.status-pill {
  font-size: 12px;
  font-weight: 600;
  padding: 5px 12px;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
}
.status-active {
  background: #D1FAE5;
  color: #065F46;
}
.status-draft {
  background: #F3F4F6;
  color: #374151;
}
.pr-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  flex-shrink: 0;
}
.pr-actions .btn-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: auto;
  padding: 8px 12px;
  border-radius: 6px;
  border: 1px solid var(--border);
  background: var(--white);
  color: var(--text-mid);
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
  flex-shrink: 0;
}
.pr-actions .btn-action:hover {
  background: var(--off-white);
  border-color: var(--text-light);
}
.pr-actions .btn-edit {
  background: #14B8A6;
  border-color: #14B8A6;
  color: var(--white);
}
.pr-actions .btn-edit:hover {
  background: #0D9488;
  border-color: #0D9488;
}
.pr-actions .btn-delete {
  background: var(--white);
  border-color: var(--border);
  color: var(--text-mid);
}
.pr-actions .btn-delete:hover {
  background: #FEE2E2;
  border-color: #DC2626;
  color: #DC2626;
}

@media (max-width: 800px) {
  .product-list-head { display: none; }
  .product-row {
    grid-template-columns: 40px minmax(0,1fr) auto;
    grid-template-rows: auto auto auto;
    grid-template-areas:
      "thumb name   status"
      "thumb meta   meta"
      "actions actions actions";
    row-gap: 8px;
    column-gap: 12px;
    padding: 14px;
  }
  .pr-thumb {
    grid-area: thumb;
    align-self: start;
  }
  .pr-name {
    grid-area: name;
    min-width: 0;
    align-self: start;
  }
  .pr-meta {
    grid-area: meta;
    display: block;
    font-size: 12px;
    color: var(--text-mid);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .pr-price, .pr-stock {
    display: none;
  }
  .pr-status {
    grid-area: status;
    justify-self: end;
    align-self: start;
  }
  .pr-actions {
    grid-area: actions;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 2px;
    padding-top: 12px;
    border-top: 1px solid var(--border);
  }
  .pr-thumb img, .pr-thumb .thumb-placeholder {
    width: 40px;
    height: 40px;
  }
  .pr-actions .btn-action {
    padding: 7px 10px;
    font-size: 12px;
  }
  .btn-action-label { display: none; }
}
@media (max-width: 480px) {
  .product-row {
    grid-template-columns: 36px minmax(0,1fr) auto;
    padding: 12px;
    row-gap: 6px;
    column-gap: 10px;
  }
  .pr-thumb img, .pr-thumb .thumb-placeholder {
    width: 36px;
    height: 36px;
  }
  .pr-name-text {
    font-size: 14px;
  }
  .pr-meta {
    font-size: 11px;
  }
  .pr-status .status-pill {
    padding: 4px 10px;
    font-size: 11px;
  }
  .pr-actions {
    padding-top: 10px;
  }
  .pr-actions .btn-action {
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* ---- Products: pagination ---- */
.products-pagination { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 20px; }
.products-pagination-info { font-size: 13px; color: var(--text-light); white-space: nowrap; }
.products-pagination .btn-info.is-disabled { opacity: 0.45; pointer-events: none; }

/* ---- Billing ---- */
.billing-hero {
  background: linear-gradient(135deg, var(--navy) 0%, #0f766e 100%);
  border-radius: 20px; padding: 28px; color: #fff; margin-bottom: 32px;
  box-shadow: 0 16px 40px rgba(15, 118, 110, 0.22);
  position: relative; overflow: hidden;
}
.billing-hero::before {
  content: ''; position: absolute; top: -70px; right: -70px; width: 240px; height: 240px;
  background: radial-gradient(circle, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.billing-hero-content { display: flex; flex-direction: column; gap: 16px; margin-bottom: 20px; position: relative; }
.billing-hero-label { font-size: 11px; opacity: 0.88; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; margin-bottom: 6px; }
.billing-hero h2 { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.billing-hero-price { font-size: 22px; font-weight: 700; }
.billing-hero-price span { font-size: 14px; font-weight: 500; opacity: 0.9; }
.billing-hero-badge { text-align: center; }
.billing-hero-badge .sub-badge { display: inline-block; margin-bottom: 12px; }
.billing-hero-expiry { font-size: 13px; opacity: 0.92; margin: 0; }
.billing-hero-expiry strong { font-weight: 700; }
.billing-hero-limit {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; opacity: 1;
  background: rgba(255,255,255,0.16); padding: 8px 16px; border-radius: 999px; margin: 0; position: relative;
}

.billing-header { margin-bottom: 22px; }
.billing-header h3 { font-size: 17px; font-weight: 700; margin-bottom: 4px; color: var(--text-dark); }
.billing-header p { color: var(--text-light); font-size: 13px; }

.plan-grid { display: grid; grid-template-columns: 1fr; gap: 16px; margin-top: 16px; align-items: start; overflow-x: hidden; }
.plan-card {
  display: flex; flex-direction: column;
  background: var(--white); border: 1px solid var(--border); border-radius: 18px; padding: 26px 20px 22px;
  text-align: center; position: relative; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  overflow: hidden; word-wrap: break-word;
  box-shadow: 0 2px 10px rgba(17, 24, 39, 0.04);
}
.plan-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--border); transition: background .2s ease;
}
.plan-card:hover { border-color: #D1D5DB; box-shadow: 0 14px 34px rgba(17, 24, 39, 0.10); transform: translateY(-4px); }
.plan-card:hover::before { background: #D1D5DB; }
.plan-card-active {
  border-color: var(--navy);
  background: linear-gradient(180deg, rgba(27, 127, 124, 0.05) 0%, rgba(255, 255, 255, 1) 220px);
  box-shadow: 0 18px 38px rgba(27, 127, 124, 0.16);
}
.plan-card-active::before { background: linear-gradient(90deg, var(--navy), var(--navy-light)); }
.plan-card-active:hover { transform: none; box-shadow: 0 18px 38px rgba(27, 127, 124, 0.16); }
.plan-badge {
  position: absolute; top: 16px; right: 16px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light)); color: #fff;
  padding: 5px 12px; border-radius: 20px; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.05em;
  display: inline-flex; align-items: center; gap: 5px;
  box-shadow: 0 6px 14px rgba(27, 127, 124, 0.3);
}
.plan-card h3 {
  font-size: 13px; font-weight: 700; margin-bottom: 12px; margin-top: 8px; word-break: break-word;
  color: var(--text-mid); text-transform: uppercase; letter-spacing: 0.06em;
}
.plan-price { font-size: 28px; font-weight: 700; color: var(--navy); font-family: 'Quicksand', sans-serif; margin-bottom: 10px; line-height: 1; word-break: break-word; }
.plan-price span { font-size: 13px; color: var(--text-light); font-weight: 500; }
.plan-limit {
  display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--navy);
  background: rgba(27, 127, 124, 0.08); padding: 6px 13px; border-radius: 999px;
  margin: 0 auto 20px; word-break: break-word; max-width: 100%;
}
.plan-card-active .plan-limit { background: rgba(27, 127, 124, 0.12); }
.plan-card button { width: 100%; }
.plan-card .plan-subscription-form { margin-top: auto; text-align: left; }
.plan-status-badges { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-bottom: 16px; overflow: hidden; }
.plan-status-badges .sub-badge { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; overflow: hidden; text-overflow: ellipsis; }

.btn-secondary[disabled] {
  background: var(--off-white); color: var(--text-mid); border-color: var(--border);
  cursor: not-allowed; opacity: 0.6;
}

/* =========================================================
   Extra Small Screens (375px and below)
   ========================================================= */
@media (max-width: 375px) {
  .plan-grid { gap: 12px; }
  .plan-card { padding: 18px 14px 16px; border-radius: 14px; }
  .plan-card h3 { font-size: 11px; margin-bottom: 8px; }
  .plan-price { font-size: 20px; margin-bottom: 8px; }
  .plan-price span { font-size: 10px; }
  .plan-limit { font-size: 11px; padding: 5px 10px; margin-bottom: 14px; }
  .plan-badge { top: 10px; right: 10px; padding: 3px 9px; font-size: 8px; }
  .plan-status-badges { gap: 4px; margin-bottom: 12px; }
  .plan-status-badges .sub-badge { font-size: 10px; }
  .billing-hero { padding: 18px; border-radius: 16px; }
  .billing-hero h2 { font-size: 19px; }
  .billing-hero-price { font-size: 17px; }
  .billing-hero-limit { font-size: 12px; padding: 7px 12px; }
  .billing-header h3 { font-size: 14px; }
  .billing-header p { font-size: 12px; }
}

/* =========================================================
   Section Layout (shared with main site)
   ========================================================= */
.section {
  padding: 48px 16px;
  max-width: 1400px;
  margin: 0 auto;
}
.register-section {
  padding: 32px 16px;
  background: var(--off-white);
}
.register-container {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 8px;
}
.login-section {
  padding: 32px 16px;
  background: var(--off-white);
}
.login-container {
  width: 100%;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  max-width: 100%;
  margin: 0 auto;
  padding: 0 8px;
}
.register-section .auth-card,
.login-section .auth-card {
  width: 100%;
  max-width: 680px;
  border-radius: 16px;
  padding: 28px 20px;
  background: var(--white);
  box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}

/* =========================================================
   Full-Width Register Layout (Brimob style)
   ========================================================= */
.register-fullwidth { background: var(--off-white); min-height: 100vh; padding: 0; }
.register-shell { display: flex; min-height: 100vh; width: 100%; align-items: center; justify-content: center; flex-direction: column; padding: 24px 16px; }

/* Mobile: Hide hero, show form centered */
.register-hero { display: none; }
.register-form-panel { width: 100%; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.register-form-panel .auth-card { width: 100%; max-width: 800px; border-radius: 20px; padding: 32px 22px; }
.register-shell .auth-card { width: 100%; max-width: 800px; border-radius: 20px; padding: 32px 22px; }

.register-hero-overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.15); z-index: 0; }
.register-hero-content { position: relative; z-index: 2; display: flex; flex-direction: column; }
.register-hero { position: relative; overflow: hidden; color: var(--white); background: linear-gradient(160deg, var(--navy), #0d302e); }
.register-hero::before {
  content: ''; position: absolute; inset: 0; 
  background-image: radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 20px 20px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
  mask-image: linear-gradient(180deg, #000, transparent 70%);
  pointer-events: none; z-index: 1;
}
.register-hero .auth-logo { display: inline-block; margin-bottom: 48px; }
.register-hero .auth-logo img { height: 28px; filter: brightness(0) invert(1); }
.register-hero-text { flex: 1; }
.register-hero h2 { font-size: 32px; line-height: 1.25; margin: 0 0 14px 0; letter-spacing: -0.01em; }
.auth-side-sub { font-size: 15px; line-height: 1.65; color: rgba(255,255,255,0.8); margin: 0 0 32px 0; max-width: 32ch; }

/* =========================================================
   Tablet and up
   ========================================================= */
@media (min-width: 640px) {
  .section { padding: 48px 32px; }
  .register-section { padding: 48px 32px; }
  .login-section { padding: 48px 32px; }
  .register-section .auth-card { padding: 48px 40px; max-width: 700px; }
  .login-section .auth-card { padding: 48px 40px; max-width: 700px; }
  
  .auth-card h2 { font-size: 28px; margin-bottom: 12px; }
  .auth-sub { font-size: 16px; margin-bottom: 32px; }
  
  .admin-main { padding: 32px 40px; }
  .admin-main h1 { font-size: 28px; }
  
  .two-col { grid-template-columns: 1fr 1fr; }
  .stat-cards { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  .quick-actions { flex-direction: row; gap: 14px; }
  .quick-actions .btn-primary, .quick-actions .btn-info { flex: 1; text-align: left; justify-content: flex-start; }
  .form-actions { justify-content: flex-start; }
  .form-actions a, .form-actions button { flex: none; padding-left: 22px; padding-right: 22px; }
  
  .billing-hero { padding: 28px 32px; margin-bottom: 36px; }
  .billing-hero h2 { font-size: 26px; }
  .billing-hero-price { font-size: 22px; }
  .billing-header { margin-bottom: 24px; }
  .billing-header h3 { font-size: 18px; }
  .billing-header p { font-size: 14px; }
  
  .plan-grid { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 18px; }
  .plan-card { padding: 30px 24px 24px; }
  .plan-card h3 { font-size: 13.5px; }
  .plan-price { font-size: 30px; }
  .plan-price span { font-size: 13px; }
  .plan-limit { font-size: 12.5px; }
  .plan-card button { width: 100%; }
  
  .auth-shell { max-width: 800px; border-radius: 24px; }
  .auth-card { padding: 40px; max-width: 800px; }
  .register-form-panel .auth-card { max-width: 800px; padding: 40px; }
  .register-shell .auth-card { max-width: 800px; padding: 40px; }
  
  .billing-hero-content { flex-direction: row; justify-content: space-between; gap: 40px; align-items: flex-start; }
  .billing-hero-badge { text-align: right; }
}

/* =========================================================
   Desktop and up: full top nav, hide bottom tab bar
   ========================================================= */
@media (min-width: 900px) {
  .admin-body {
    padding-bottom: 0;
    display: grid;
    grid-template-columns: 280px 1fr;
    grid-template-rows: auto 1fr;
    gap: 0;
    min-height: 100vh;
  }
  
  .mobile-tab-bar { display: none; }
  
  .admin-nav {
    grid-column: 2;
    grid-row: 1;
    position: static;
    top: 0;
    width: auto;
    /* Card-style container */
    background: var(--white);
    border: 1px solid var(--border);
    border-top: 3px solid var(--orange);
    border-radius: 14px;
    margin: 16px 16px 20px 16px;
    padding: 18px 16px;
    gap: 0;
    min-height: 80px;
    height: auto;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    box-sizing: border-box;
  }
  
  .admin-layout-wrapper {
    grid-column: 1 / 3;
    grid-row: 1 / 3;
    display: contents;
  }
  
  .admin-sidebar-main {
    display: flex;
    flex-direction: column;
    grid-column: 1;
    grid-row: 1 / 3;
    position: sticky;
    top: 0;
    align-self: start;
    height: 100vh;
  }
  
  .admin-content-area {
    grid-column: 2;
    grid-row: 2;
  }

  .admin-nav-inner { 
    max-width: none;
    margin: 0;
    padding: 0; 
    height: auto; 
    display: flex; 
    align-items: center; 
    gap: 28px;
    width: 100%;
  }
  
  .admin-nav-inner .logo { 
    display: none !important; 
  }
  
  .admin-nav-inner .logo img { height: 32px; }

  .admin-nav-title {
    display: flex;
    align-items: center;
    gap: 14px;
  }

  .admin-nav-title-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--orange), var(--orange-light));
    color: #fff;
    font-size: 16px;
  }

  .admin-nav-title-text h1 {
    font-size: 18px;
    font-weight: 700;
    color: var(--navy);
    margin: 0;
    line-height: 1.2;
  }

  .admin-nav-title-text span {
    font-size: 12px;
    color: var(--text-light);
  }

  .admin-nav-links { 
    display: none !important; 
  }
  
  .admin-nav-links a { 
    color: var(--text-mid); 
    text-decoration: none; 
    font-weight: 500; 
    font-size: 13px; 
    padding: 8px 12px; 
    border-radius: 6px;
    height: auto;
    display: flex; 
    align-items: center;
    white-space: nowrap;
    transition: all 0.15s ease;
  }
  
  .admin-nav-links a.active { 
    color: var(--navy); 
    background: rgba(27, 127, 124, 0.08);
    font-weight: 600;
  }
  
  .admin-nav-links a:hover { 
    color: var(--navy);
    background: rgba(27, 127, 124, 0.05);
  }
  
  .admin-nav-actions { 
    display: flex; 
    gap: 16px; 
    align-items: center; 
    margin-left: auto;
    padding: 0;
    border: none;
  }
  .btn-small { 
    padding: 10px 16px; 
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
  }
  
  .btn-small:hover {
    background: var(--off-white);
    border-color: var(--navy);
    color: var(--navy);
  }
  
  .btn-icon-only .btn-text { display: inline; }
  
  .sub-badge { 
    font-size: 13px; 
    padding: 8px 14px;
    border-radius: 20px;
    font-weight: 600;
  }
  .sub-warning { padding: 10px 24px; font-size: 14px; }

  .admin-main {
    padding: 24px 32px 40px 32px;
  }

  .admin-main h1 {
    font-size: 32px;
  }

  .hero-card { padding: 36px 40px; margin-bottom: 40px; }
  .hero-card-top { gap: 20px; margin-bottom: 24px; }
  .hero-avatar { width: 64px; height: 64px; font-size: 26px; }
  .hero-text h1 { font-size: 32px; }
  .hero-greeting { font-size: 15px; }
  .hero-sub-row { gap: 14px 20px; margin-bottom: 12px; }
  .hero-expiry { font-size: 14px; }
  .hero-cta { font-size: 15px; padding: 12px 20px; }

  .stat-card { padding: 28px 26px; gap: 20px; }
  .stat-icon { width: 60px; height: 60px; font-size: 22px; border-radius: 14px; }
  .stat-num { font-size: 30px; }
  .stat-label { font-size: 14px; }

  .quick-actions .btn-primary,
  .quick-actions .btn-info { padding: 26px 28px; gap: 18px; border-radius: 14px; min-height: 96px; }
  .quick-action-icon { width: 52px; height: 52px; font-size: 20px; border-radius: 14px; }
  .quick-action-text strong { font-size: 17px; }
  .quick-action-text span { font-size: 13px; }

  .settings-form {
    display: block;
  }

  .admin-settings-content {
    display: block;
  }

  .settings-section {
    display: block;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 18px;
    padding: 32px;
    margin-bottom: 24px;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  }

  .settings-section h2 { font-size: 18px; }
  .logo-preview { width: 120px; height: 120px; }

  .product-form { padding: 32px 36px; }

  .billing-hero { padding: 40px 48px; margin-bottom: 48px; }
  .billing-hero h2 { font-size: 32px; }
  .billing-hero-price { font-size: 28px; }
  .billing-header { margin-bottom: 36px; }
  .billing-header h3 { font-size: 20px; }

  .auth-shell { max-width: 1200px; align-items: stretch; }
  .auth-side { display: flex; }
  .auth-card { padding: 48px 56px; }
  .auth-logo-mobile { display: none; }

  /* Full-width register at desktop */
  .register-shell { flex-direction: row; }
  .register-hero { display: flex; flex: 1; width: 50%; padding: 48px 48px; }
  .register-form-panel { flex: 1; width: 50%; padding: 40px 32px; }
  .register-form-panel .auth-card { max-width: 800px; padding: 40px; }
  .register-shell .auth-card { max-width: 800px; padding: 40px; }
  .register-hero h2 { font-size: 36px; }
  .auth-card h1 { font-size: 28px; }
}

@media (min-width: 1440px) {
  .register-hero { padding: 56px 56px; }
  .register-form-panel { padding: 48px 40px; }
  .register-form-panel .auth-card { max-width: 800px; padding: 48px; }
  .register-shell .auth-card { max-width: 800px; padding: 48px; }
}

.filter-tabs {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}

.filter-tabs a {
  padding: 7px 14px;
  border-radius: 6px;
  border: 1px solid var(--border);
  color: var(--text-mid);
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  transition: all 0.2s;
  background: var(--white);
}

.filter-tabs a:hover {
  border-color: var(--orange);
  color: var(--orange);
}

.filter-tabs a.active {
  background: var(--navy);
  border-color: var(--navy);
  color: var(--white);
}

.status-select-inline {
  padding: 6px 10px;
  border-radius: 6px;
  border: 1px solid var(--border);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dark);
  background: var(--white);
  cursor: pointer;
}

/* ========================================
   LISTING IMAGE MANAGER (multi-photo gallery editing)
======================================== */
.listing-image-manager {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
}

.listing-image-thumb {
  position: relative;
  width: 90px;
  height: 70px;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid var(--border);
}

.listing-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.listing-image-thumb form {
  position: absolute;
  top: 4px;
  right: 4px;
}

.listing-image-remove {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: rgba(15, 20, 35, 0.75);
  color: var(--white);
  border: none;
  cursor: pointer;
  font-size: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.listing-image-remove:hover {
  background: #dc2626;
}

@media (max-width: 899px) {
  body { overflow-x: hidden; }
  
  .admin-layout-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  .admin-content-area {
    width: 100%;
    overflow-x: hidden;
  }
  
  .admin-main {
    width: 100%;
    padding: 16px;
    padding-bottom: 140px;
    overflow-x: hidden;
  }
  
  /* Make forms responsive */
  .form-group,
  .form-row {
    width: 100%;
  }
  
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="password"],
  input[type="date"],
  select,
  textarea {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Make buttons responsive */
  .btn,
  button {
    width: 100%;
    box-sizing: border-box;
  }
  
  /* Grids to single column */
  .alerts-grid,
  .stats-grid,
  .products-grid {
    grid-template-columns: 1fr;
  }
  
  /* Tables - make them scrollable */
  .table-responsive {
    overflow-x: auto;
  }
  
  table {
    font-size: 13px;
    width: 100%;
  }
  
  table th,
  table td {
    padding: 8px 6px;
  }
}

@media (max-width: 380px) {
  .admin-main {
    padding: 8px;
    padding-bottom: 140px;
  }
  
  h1 { font-size: 20px; }
  h2 { font-size: 16px; }
}

.admin-settings-content {
  max-width: 980px;
}

.settings-form {
  display: flex;
  flex-direction: column;
  gap: 26px;
}

.settings-form .settings-section {
  position: relative;
  overflow: hidden;
  display: grid;
  grid-template-columns: 1fr;
  column-gap: 26px;
  row-gap: 20px;
  align-content: start;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 30px 24px 28px;
  margin-bottom: 0;
  box-shadow: 0 2px 14px rgba(17, 24, 39, 0.05);
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.settings-form .settings-section:hover {
  box-shadow: 0 12px 32px rgba(17, 24, 39, 0.09);
  transform: translateY(-2px);
}

.settings-form .settings-section::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 5px;
  background: linear-gradient(90deg, var(--navy), var(--navy-light));
}

.settings-form .settings-section:nth-of-type(6n+2)::before { background: linear-gradient(90deg, var(--orange), var(--orange-light)); }
.settings-form .settings-section:nth-of-type(6n+3)::before { background: linear-gradient(90deg, #4F46E5, #818CF8); }
.settings-form .settings-section:nth-of-type(6n+4)::before { background: linear-gradient(90deg, #0D9488, #5EEAD4); }
.settings-form .settings-section:nth-of-type(6n+5)::before { background: linear-gradient(90deg, #DB2777, #F9A8D4); }
.settings-form .settings-section:nth-of-type(6n+6)::before { background: linear-gradient(90deg, #D97706, #FCD34D); }

.settings-form .settings-section h2 {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 19px;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: 4px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
  font-family: 'Quicksand', sans-serif;
  letter-spacing: -0.01em;
}

.settings-form .settings-section h2::before {
  content: '\f013';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  border-radius: 9px;
  background: var(--navy);
  color: var(--white);
}

.settings-form .settings-section:nth-of-type(6n+2) h2::before { background: var(--orange); }
.settings-form .settings-section:nth-of-type(6n+3) h2::before { background: #4F46E5; }
.settings-form .settings-section:nth-of-type(6n+4) h2::before { background: #0D9488; }
.settings-form .settings-section:nth-of-type(6n+5) h2::before { background: #DB2777; }
.settings-form .settings-section:nth-of-type(6n+6) h2::before { background: #D97706; }

.settings-form .settings-section > div,
.settings-form .settings-section > p,
.settings-form .settings-section > video,
.settings-form .settings-section > input[type="file"],
.settings-form .settings-section > label.checkbox,
.settings-form .settings-section > label.field-label-standalone,
.settings-form .settings-section > label:has(textarea),
.settings-form .settings-section > label:has(input[type="file"]) {
  grid-column: 1 / -1;
}

.settings-form .settings-section > label.field-label-standalone {
  margin-bottom: 8px;
  padding-bottom: 0;
  border-bottom: none;
}

@media (min-width: 720px) {
  .settings-form .settings-section {
    grid-template-columns: 1fr 1fr;
  }
}

.settings-form label {
  margin-bottom: 0;
}

.settings-form label input,
.settings-form label select,
.settings-form label textarea {
  margin-top: 8px;
  padding: 13px 15px;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: var(--off-white);
  transition: border-color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
}

.settings-form label input:hover,
.settings-form label select:hover,
.settings-form label textarea:hover {
  border-color: var(--navy-light);
}

.settings-form label input:focus,
.settings-form label select:focus,
.settings-form label textarea:focus {
  outline: none;
  border-color: var(--navy);
  background: var(--white);
  box-shadow: 0 0 0 4px rgba(27, 127, 124, 0.1);
}

.settings-form label textarea {
  min-height: 120px;
  line-height: 1.6;
}

/* File inputs read as upload zones instead of a bare native control */
.settings-form label input[type="file"],
.settings-form .settings-section > input[type="file"] {
  border: 1.5px dashed var(--border);
  background: var(--off-white);
  padding: 14px 16px;
  font-size: 13.5px;
  color: var(--text-mid);
  cursor: pointer;
}

.settings-form label input[type="file"]:hover,
.settings-form .settings-section > input[type="file"]:hover {
  border-color: var(--navy-light);
  background: var(--white);
}

.settings-form label input[type="file"]::file-selector-button,
.settings-form .settings-section > input[type="file"]::file-selector-button {
  margin-right: 14px;
  padding: 9px 18px;
  border: none;
  border-radius: 9px;
  background: var(--navy);
  color: var(--white);
  font-weight: 700;
  font-size: 13px;
  cursor: pointer;
  transition: background 0.18s ease;
}

.settings-form label input[type="file"]::file-selector-button:hover,
.settings-form .settings-section > input[type="file"]::file-selector-button:hover {
  background: var(--navy-light);
}

/* Standalone toggle, e.g. "We have a physical location" */
.settings-form .settings-section > label.checkbox {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 15px 18px;
  border: 1.5px solid var(--border);
  border-radius: 14px;
  background: var(--off-white);
  font-weight: 600;
  font-size: 14px;
  color: var(--text-dark);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
}

.settings-form .settings-section > label.checkbox:hover {
  border-color: var(--navy-light);
}

.settings-form .settings-section > label.checkbox:has(input:checked) {
  border-color: var(--navy);
  background: rgba(27, 127, 124, 0.07);
}

.settings-form .settings-section > label.checkbox input {
  width: 20px;
  height: 20px;
  accent-color: var(--navy);
  flex-shrink: 0;
  margin: 0;
}

/* Chip-style grouped options: payment methods, delivery-area / fee modes */
.settings-form .checkbox-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 0;
}

.settings-form .checkbox-row .checkbox {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  font-weight: 600;
  font-size: 13.5px;
  color: var(--text-mid);
  background: var(--white);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease;
}

.settings-form .checkbox-row .checkbox:hover {
  border-color: var(--navy-light);
}

.settings-form .checkbox-row .checkbox:has(input:checked) {
  border-color: var(--navy);
  background: rgba(27, 127, 124, 0.09);
  color: var(--navy);
}

.settings-form .checkbox-row .checkbox input {
  width: 16px;
  height: 16px;
  accent-color: var(--navy);
  margin: 0;
}

/* Theme swatches get a touch more room */
.settings-form .theme-swatch-row {
  gap: 14px;
}

.settings-form .theme-swatch {
  padding: 12px 18px 12px 12px;
  border-radius: 14px;
}

/* Video upsell callout */
.settings-form .video-upsell {
  border-radius: 14px;
  padding: 16px 18px;
  background: linear-gradient(135deg, rgba(255, 168, 0, 0.09), rgba(255, 168, 0, 0.02));
  border: 1px dashed var(--orange-light);
}

.settings-form .video-upsell i {
  color: var(--orange);
}

/* Previews, scoped so product/staff pages elsewhere keep their own sizing */
.settings-form .logo-preview {
  width: 96px;
  height: 96px;
  border-radius: 16px;
}

.settings-form .video-preview {
  border-radius: 14px;
}

/* Business hours table */
.settings-form .hours-week {
  margin-bottom: 0;
}

/* Save button, more prominent and clearly the final action */
.settings-form > button[type="submit"].btn-primary {
  align-self: flex-start;
  padding: 15px 38px;
  font-size: 15px;
  border-radius: 14px;
  margin-top: 4px;
}

.settings-form > button[type="submit"].btn-primary::before {
  content: '\f0c7';
  font-family: 'Font Awesome 6 Free';
  font-weight: 900;
  /* Reset the shared.css shine-sweep ::before so this renders as a glyph */
  position: static;
  top: auto;
  left: auto;
  width: auto;
  height: auto;
  background: none;
  transition: none;
  line-height: 1;
  margin-right: 0;
}

.settings-form > button[type="submit"].btn-primary:hover::before {
  left: auto;
}

@media (max-width: 719px) {
  .settings-form .settings-section {
    padding: 24px 18px 22px;
  }

  .settings-form > button[type="submit"].btn-primary {
    width: 100%;
    justify-content: center;
  }
}
/* Mobile-first responsive table layout */
.btn-view-desktop { display: none; }
.btn-download-mobile { display: inline-flex; }

@media (max-width: 640px) {
  .product-table-wrap { overflow-x: visible; border-radius: 12px; }
  .product-table { min-width: 100%; width: 100%; }
  .product-table thead { display: none; }
  .product-table tbody { display: flex; flex-direction: column; gap: 12px; }
  .product-table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px 16px;
    background: var(--white);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 16px;
    border-bottom: none;
  }
  .product-table td {
    padding: 0;
    border: none;
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 13px;
  }
  .product-table td::before {
    content: attr(data-label);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-light);
  }
  .product-table .row-actions {
    grid-column: 1 / -1;
    justify-content: center;
    flex-wrap: wrap;
  }
  .product-table .row-actions .btn-action {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 480px) {
  .product-table tr {
    grid-template-columns: 1fr;
  }
  .product-table .row-actions .btn-action {
    width: 100%;
  }
}

/* =========================================================
   Invoices: receipt-style cards
   ========================================================= */
.invoice-table td[data-label="Invoice #"] .invoice-id {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  color: var(--text-dark);
  font-family: 'Quicksand', sans-serif;
  font-size: 14px;
}
.invoice-table td[data-label="Invoice #"] .invoice-id i {
  color: var(--navy);
  font-size: 13px;
}
.invoice-table td[data-label="Amount"] .amount-currency {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  margin-right: 4px;
}
.invoice-table td[data-label="Amount"] .amount-value {
  font-size: 15px;
  font-weight: 800;
  color: var(--navy);
  font-family: 'Quicksand', sans-serif;
}
.invoice-table .status-pill i {
  margin-right: 4px;
  font-size: 10px;
}
.invoice-table tbody tr:hover {
  background: var(--off-white);
}
.invoice-table .row-actions .btn-download-invoice {
  border-radius: 8px;
}
.invoice-empty,
.empty-state {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 56px 20px !important;
  color: var(--text-light);
  text-align: center;
}
.invoice-empty i,
.empty-state i {
  font-size: 34px;
  color: var(--border);
}
.invoice-empty a,
.empty-state a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid transparent;
  transition: border-color .15s ease;
}
.invoice-empty a:hover,
.empty-state a:hover {
  border-color: var(--navy);
}

@media (max-width: 640px) {
  table.invoice-table.product-table {
    min-width: 100%;
  }
  table.invoice-table tbody {
    gap: 16px;
  }
  table.invoice-table tr {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "id id"
      "date status"
      "plan period"
      "amount amount"
      "actions actions";
    gap: 14px 16px;
    padding: 22px 18px 18px;
    border-radius: 16px;
    box-shadow: 0 3px 14px rgba(17, 24, 39, 0.06);
    transition: box-shadow .2s ease, transform .2s ease;
  }
  table.invoice-table tr::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--navy), var(--navy-light));
  }
  table.invoice-table tr:active {
    transform: scale(0.99);
  }
  table.invoice-table td[data-label="Invoice #"] {
    grid-area: id;
  }
  table.invoice-table td[data-label="Invoice #"]::before {
    display: none;
  }
  table.invoice-table td[data-label="Invoice #"] .invoice-id {
    font-size: 15px;
  }
  table.invoice-table td[data-label="Date"] {
    grid-area: date;
  }
  table.invoice-table td[data-label="Method"] {
    grid-area: status;
    align-items: flex-end !important;
  }
  table.invoice-table td[data-label="Method"]::before {
    display: none;
  }
  table.invoice-table td[data-label="Plan"] {
    grid-area: plan;
  }
  table.invoice-table td[data-label="Period"] {
    grid-area: period;
  }
  table.invoice-table td[data-label="Amount"] {
    grid-area: amount;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    background: linear-gradient(135deg, rgba(27, 127, 124, 0.08), rgba(47, 164, 154, 0.03));
    border-radius: 10px;
    padding: 12px 14px !important;
  }
  table.invoice-table td[data-label="Amount"]::before {
    content: "Total";
    font-size: 11px;
  }
  table.invoice-table td[data-label="Amount"] .amount-value {
    font-size: 19px;
  }
  table.invoice-table .row-actions {
    grid-area: actions;
  }
  table.invoice-table .row-actions .btn-action {
    padding: 11px 14px;
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  table.invoice-table tr {
    grid-template-columns: 1fr 1fr;
  }
}

.admin-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.admin-header-row h1 {
  margin-bottom: 4px;
}
.admin-header-row .admin-sub {
  margin-bottom: 0;
}
.admin-header-row .btn-primary {
  padding: 11px 20px;
  border-radius: 10px;
  font-size: 14px;
  border-width: 1px;
  background: linear-gradient(135deg, var(--navy), var(--navy-light));
  border-color: var(--navy);
  box-shadow: 0 4px 14px rgba(27, 127, 124, 0.24);
  white-space: nowrap;
  flex-shrink: 0;
}
.admin-header-row .btn-primary:hover {
  background: linear-gradient(135deg, var(--navy-light), var(--navy));
  border-color: var(--navy-light);
  box-shadow: 0 6px 18px rgba(27, 127, 124, 0.3);
  transform: translateY(-2px);
}
.admin-header-row .btn-primary::before {
  display: none;
}

.support-grant-details p { word-wrap: break-word; overflow-wrap: break-word; white-space: normal; }
.support-history-reason { max-width: 400px; word-wrap: break-word; overflow-wrap: break-word; display: block; }

@media (max-width: 560px) {
  .admin-header-row {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .admin-header-row .btn-primary {
    width: 100%;
    justify-content: center;
  }
}
/* Billing: currency toggle and secondary price */
.currency-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  margin: 8px 0 4px;
  padding: 4px;
  background: var(--off-white, #f8f9ff);
  border: 1px solid var(--border, #e5e9ff);
  border-radius: 999px;
}
.currency-toggle-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-light);
  padding: 0 8px 0 10px;
}
.currency-toggle-btn {
  font-size: 13px;
  font-weight: 700;
  padding: 6px 16px;
  border-radius: 999px;
  color: var(--text-dark);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease;
}
.currency-toggle-btn:hover { background: rgba(27, 127, 124, 0.08); }
.currency-toggle-btn.is-active {
  background: var(--navy, #1B7F7C);
  color: #fff;
}
.currency-toggle-note {
  font-size: 12.5px;
  color: var(--text-light);
  margin: 6px 0 0;
}
.plan-price-alt {
  font-size: 12px;
  font-weight: 700;
  color: var(--text-light);
  margin-left: 6px;
  vertical-align: super;
  white-space: nowrap;
}
.plan-card .plan-submit-trigger[disabled] { opacity: 0.5; cursor: not-allowed; }