/*
 * clientarea/assets/css/clientarea.css
 * Azonic Corporate Style — matches domainresellerindia.com design system exactly
 * Scoped under .ca-wrap, .ca-nav, .ca-modal — zero conflict with main.css
 */

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;600;700;800&family=DM+Sans:ital,wght@0,400;0,500;0,600;1,400&display=swap');

/* ── RESET WITHIN CA SCOPE ───────────────────────────────────── */
*, .ca-wrap *, .ca-modal *, .ca-nav *, .ca-admin-wrap * {
  box-sizing: border-box; margin: 0; padding: 0;
}
body {
  font-family: 'DM Sans', 'Segoe UI', Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  background: var(--ca-sw);
  color: var(--ca-ink);
}

/* ── CSS VARIABLES — mirrors main.css exactly ────────────────── */
:root {
  --ca-orange:       #FF4D00;
  --ca-orange-mid:   #E64400;
  --ca-orange-dim:   rgba(255,77,0,.10);
  --ca-orange-faint: rgba(255,77,0,.06);
  --ca-blue:         #1A73E8;
  --ca-blue-faint:   rgba(26,115,232,.07);
  --ca-purple:       #7C3AED;
  --ca-green:        #16A34A;
  --ca-danger:       #DC2626;
  --ca-warning:      #D97706;
  --ca-ink:          #0C0C0C;
  --ca-ink-75:       #3A3A3A;
  --ca-ink-50:       #6B6B6B;
  --ca-ink-30:       #9E9E9E;
  --ca-surface:      #FFFFFF;
  --ca-sw:           #FAFAF8;
  --ca-ss:           #F4F3F0;
  --ca-border:       #E8E6E2;
  --ca-border-mid:   #D1CFC9;
  --ca-navy:         #0E1420;
  --ca-r-sm:         6px;
  --ca-r-md:         10px;
  --ca-r-lg:         16px;
  --ca-r-xl:         24px;
  --ca-sh-sm:        0 4px 12px rgba(0,0,0,.07);
  --ca-sh-md:        0 8px 24px rgba(0,0,0,.09);
  --ca-sh-lg:        0 20px 50px rgba(0,0,0,.11);
  --ca-fd:           'Bricolage Grotesque', sans-serif;
  --ca-fb:           'DM Sans', sans-serif;
}

/* ── BASE ────────────────────────────────────────────────────── */
.ca-wrap {
  font-family: var(--ca-fb);
  color: var(--ca-ink);
  background: var(--ca-sw);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
}
.ca-wrap a { text-decoration: none; color: inherit; }

/* ── TOP NAV — white, sticky, matches main site header ──────── */
.ca-nav {
  background: rgba(255,255,255,.97);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--ca-border);
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 clamp(1.25rem, 4vw, 2.5rem);
  position: sticky;
  top: 0;
  z-index: 900;
  gap: 1.5rem;
}
.ca-nav-brand {
  font-family: var(--ca-fd);
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--ca-ink);
  letter-spacing: -.04em;
  display: flex;
  align-items: center;
  gap: .5rem;
  text-decoration: none;
  flex-shrink: 0;
}
.ca-nav-brand .ca-nav-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--ca-orange);
  border-radius: 50%;
  margin-left: 1px;
  vertical-align: super;
}
.ca-nav-links {
  display: flex;
  align-items: center;
  gap: .15rem;
  list-style: none;
}
.ca-nav-links a {
  display: block;
  padding: .4rem .8rem;
  font-size: .875rem;
  font-weight: 500;
  color: var(--ca-ink-75);
  border-radius: var(--ca-r-sm);
  transition: color .2s, background .2s;
  white-space: nowrap;
}
.ca-nav-links a:hover,
.ca-nav-links a.active {
  color: var(--ca-ink);
  background: var(--ca-ss);
}
.ca-nav-links a.active { color: var(--ca-orange); }
.ca-nav-cart {
  position: relative;
  display: inline-flex;
}
.ca-nav-badge {
  position: absolute;
  top: -6px; right: -6px;
  background: var(--ca-orange);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.ca-nav-user {
  display: flex; align-items: center; gap: .5rem;
  font-size: .875rem; font-weight: 500; color: var(--ca-ink-75);
}
.ca-nav-avatar {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--ca-orange);
  color: #fff;
  font-family: var(--ca-fd);
  font-weight: 700;
  font-size: .875rem;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}

/* ── BUTTONS — matches main site exactly ─────────────────────── */
.ca-btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .46rem 1.2rem;
  font-family: var(--ca-fb);
  font-size: .875rem;
  font-weight: 600;
  border-radius: var(--ca-r-md);
  cursor: pointer;
  border: none;
  text-decoration: none;
  transition: background .2s, transform .15s, box-shadow .2s, border-color .2s, color .2s;
  white-space: nowrap;
  line-height: 1.5;
}
.ca-btn-primary {
  background: var(--ca-orange);
  color: #fff;
}
.ca-btn-primary:hover {
  background: var(--ca-orange-mid);
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(255,77,0,.28);
}
.ca-btn-ghost {
  background: transparent;
  color: var(--ca-ink-75);
  border: 1px solid var(--ca-border-mid);
}
.ca-btn-ghost:hover {
  border-color: var(--ca-ink);
  color: var(--ca-ink);
  background: var(--ca-ss);
}
.ca-btn-outline {
  background: transparent;
  color: var(--ca-orange);
  border: 1px solid var(--ca-orange);
}
.ca-btn-outline:hover {
  background: var(--ca-orange);
  color: #fff;
}
.ca-btn-success {
  background: var(--ca-green);
  color: #fff;
}
.ca-btn-success:hover { background: #15803d; transform: translateY(-1px); }
.ca-btn-danger  { background: var(--ca-danger);  color: #fff; }
.ca-btn-warning { background: var(--ca-warning); color: #fff; }
.ca-btn-sm  { padding: .38rem .85rem; font-size: .8125rem; }
.ca-btn-xs  { padding: .22rem .65rem; font-size: .75rem; border-radius: var(--ca-r-sm); }
.ca-btn-block { width: 100%; justify-content: center; }
.ca-btn:disabled { opacity: .45; cursor: not-allowed; transform: none !important; pointer-events: none; }

/* ── HERO — navy gradient matches main site dark sections ─────── */
.ca-hero {
  background: var(--ca-navy);
  position: relative;
  overflow: hidden;
  padding: 5rem clamp(1.25rem,4vw,2.5rem) 4.5rem;
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ca-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 50% -10%, rgba(255,77,0,.18) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 85% 70%, rgba(26,115,232,.12) 0%, transparent 55%);
  pointer-events: none;
}
.ca-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: var(--ca-orange-dim);
  border: 1px solid rgba(255,77,0,.25);
  color: var(--ca-orange);
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  padding: .35rem 1rem;
  border-radius: 100px;
  margin-bottom: 1.5rem;
}
.ca-hero h1 {
  font-family: var(--ca-fd);
  font-size: clamp(2rem, 5vw, 3.25rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.06;
  letter-spacing: -.04em;
  margin-bottom: 1rem;
}
.ca-hero h1 span {
  color: var(--ca-orange);
}
.ca-hero p {
  font-size: 1.0625rem;
  color: rgba(255,255,255,.55);
  max-width: 560px;
  margin: 0 auto 2rem;
  line-height: 1.7;
}
.ca-hero-actions {
  display: flex;
  gap: .85rem;
  justify-content: center;
  flex-wrap: wrap;
}
.ca-hero-actions .ca-btn-outline {
  color: rgba(255,255,255,.7);
  border-color: rgba(255,255,255,.25);
}
.ca-hero-actions .ca-btn-outline:hover {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.5);
  color: #fff;
}
.ca-hero-scroll {
  display: none;
}

/* ── TRUST / TICKER STRIP ────────────────────────────────────── */
.ca-features-strip {
  background: var(--ca-surface);
  border-bottom: 1px solid var(--ca-border);
  padding: .75rem 0;
  overflow: hidden;
}
.ca-features-ticker {
  display: flex;
  gap: 2.5rem;
  animation: ca-ticker 35s linear infinite;
  white-space: nowrap;
}
@keyframes ca-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.ca-features-ticker span {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--ca-ink-50);
}
.ca-features-ticker span i { color: var(--ca-orange); }
.ca-features-ticker .ca-tick-dot {
  display: inline-block;
  width: 5px; height: 5px;
  background: var(--ca-orange);
  border-radius: 50%;
  flex-shrink: 0;
}

/* ── CARDS ───────────────────────────────────────────────────── */
.ca-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r-lg);
  overflow: hidden;
  box-shadow: var(--ca-sh-sm);
}
.ca-card-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--ca-border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  background: var(--ca-sw);
}
.ca-card-header h3 {
  font-family: var(--ca-fd);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--ca-ink);
  letter-spacing: -.02em;
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ca-card-body { padding: 1.5rem; }
.ca-card-footer {
  padding: .9rem 1.5rem;
  border-top: 1px solid var(--ca-border);
  background: var(--ca-sw);
}

/* ── STATS CARDS ─────────────────────────────────────────────── */
.ca-stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}
.ca-stat-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r-lg);
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s;
}
.ca-stat-card:hover { border-color: var(--ca-border-mid); box-shadow: var(--ca-sh-md); }
.ca-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
}
.ca-stat-card.blue::before   { background: var(--ca-orange); }
.ca-stat-card.green::before  { background: var(--ca-green); }
.ca-stat-card.orange::before { background: var(--ca-warning); }
.ca-stat-card.purple::before { background: var(--ca-purple); }
.ca-stat-icon {
  width: 44px; height: 44px;
  border-radius: var(--ca-r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.2rem;
  margin-bottom: 1rem;
}
.ca-stat-icon.blue   { background: var(--ca-orange-faint); color: var(--ca-orange); }
.ca-stat-icon.green  { background: rgba(22,163,74,.08);    color: var(--ca-green); }
.ca-stat-icon.orange { background: rgba(217,119,6,.08);    color: var(--ca-warning); }
.ca-stat-icon.purple { background: rgba(124,58,237,.08);   color: var(--ca-purple); }
.ca-stat-val {
  font-family: var(--ca-fd);
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--ca-ink);
  line-height: 1;
  letter-spacing: -.03em;
}
.ca-stat-label { font-size: .8125rem; color: var(--ca-ink-50); margin-top: .3rem; font-weight: 500; }

/* ── CATEGORY CARDS ──────────────────────────────────────────── */
.ca-categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 1rem;
}
.ca-cat-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r-lg);
  padding: 1.75rem 1.5rem;
  text-align: center;
  text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  display: block;
}
.ca-cat-card:hover {
  border-color: var(--ca-orange);
  box-shadow: var(--ca-sh-md);
  transform: translateY(-3px);
}
.ca-cat-icon {
  width: 56px; height: 56px;
  border-radius: var(--ca-r-md);
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem;
  margin: 0 auto 1rem;
  background: var(--ca-orange-faint);
}
.ca-cat-card h3 {
  font-family: var(--ca-fd);
  font-size: .9375rem;
  font-weight: 700;
  color: var(--ca-ink);
  margin-bottom: .35rem;
  letter-spacing: -.02em;
}
.ca-cat-card p { font-size: .8rem; color: var(--ca-ink-50); line-height: 1.55; }
.ca-cat-count {
  display: inline-block;
  background: var(--ca-ss);
  border: 1px solid var(--ca-border);
  color: var(--ca-ink-50);
  font-size: .7rem;
  font-weight: 600;
  padding: .2rem .7rem;
  border-radius: 100px;
  margin-top: .75rem;
}

/* ── PRODUCT CARDS ───────────────────────────────────────────── */
.ca-products-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}
.ca-product-card {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r-lg);
  overflow: hidden;
  transition: border-color .2s, box-shadow .2s, transform .2s;
  display: flex;
  flex-direction: column;
}
.ca-product-card:hover {
  border-color: var(--ca-orange);
  box-shadow: var(--ca-sh-md);
  transform: translateY(-4px);
}
.ca-product-card-top {
  padding: 1.5rem 1.5rem 1rem;
  background: var(--ca-sw);
  border-bottom: 1px solid var(--ca-border);
}
.ca-product-card h3 {
  font-family: var(--ca-fd);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ca-ink);
  margin-bottom: .3rem;
  letter-spacing: -.02em;
}
.ca-product-card .ca-price {
  font-family: var(--ca-fd);
  font-size: 2rem;
  font-weight: 800;
  color: var(--ca-orange);
  letter-spacing: -.04em;
  line-height: 1.1;
}
.ca-product-card .ca-price small {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--ca-ink-50);
  letter-spacing: 0;
}
.ca-product-card-body { padding: 1rem 1.5rem 1.5rem; flex: 1; display: flex; flex-direction: column; }
.ca-feature-list { list-style: none; margin-bottom: 1.25rem; flex: 1; }
.ca-feature-list li {
  font-size: .8125rem;
  color: var(--ca-ink-75);
  padding: .45rem 0;
  border-bottom: 1px solid var(--ca-border);
  display: flex;
  align-items: center;
  gap: .5rem;
}
.ca-feature-list li:last-child { border-bottom: none; }
.ca-feature-list .check { color: var(--ca-green); font-size: .875rem; }

/* ── TABLES ──────────────────────────────────────────────────── */
.ca-table-wrap { overflow-x: auto; }
.ca-table {
  width: 100%;
  border-collapse: collapse;
  font-size: .875rem;
}
.ca-table th {
  background: var(--ca-sw);
  color: var(--ca-ink-30);
  font-family: var(--ca-fd);
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  padding: .75rem 1rem;
  text-align: left;
  border-bottom: 1px solid var(--ca-border);
  white-space: nowrap;
}
.ca-table td {
  padding: .9rem 1rem;
  border-bottom: 1px solid var(--ca-border);
  color: var(--ca-ink-75);
  vertical-align: middle;
  font-size: .875rem;
}
.ca-table tr:last-child td { border-bottom: none; }
.ca-table tr:hover td { background: var(--ca-orange-faint); }
.ca-table .mono {
  font-family: 'Courier New', monospace;
  font-size: .8125rem;
  color: var(--ca-orange);
  font-weight: 700;
}

/* ── BADGES ──────────────────────────────────────────────────── */
.ca-badge {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  padding: .22rem .75rem;
  border-radius: 100px;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}
.ca-badge-success { background: rgba(22,163,74,.1);  color: #15803d; }
.ca-badge-warning { background: rgba(217,119,6,.1);  color: #b45309; }
.ca-badge-danger  { background: rgba(220,38,38,.1);  color: #b91c1c; }
.ca-badge-info    { background: var(--ca-blue-faint); color: var(--ca-blue); }
.ca-badge-purple  { background: rgba(124,58,237,.1); color: #6d28d9; }
.ca-badge-grey    { background: var(--ca-ss); color: var(--ca-ink-50); }

/* ── FORMS ───────────────────────────────────────────────────── */
.ca-form-group { margin-bottom: 1.1rem; }
.ca-form-label {
  display: block;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--ca-ink);
  margin-bottom: .4rem;
}
.ca-form-control {
  width: 100%;
  padding: .6rem .85rem;
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r-md);
  font-family: var(--ca-fb);
  font-size: .875rem;
  color: var(--ca-ink);
  background: var(--ca-surface);
  transition: border-color .2s, box-shadow .2s;
  outline: none;
  line-height: 1.5;
}
.ca-form-control:focus {
  border-color: var(--ca-orange);
  box-shadow: 0 0 0 3px var(--ca-orange-faint);
}
.ca-form-control::placeholder { color: var(--ca-ink-30); }
select.ca-form-control { cursor: pointer; }
textarea.ca-form-control { resize: vertical; min-height: 90px; }
.ca-form-row   { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
.ca-form-row-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 1rem; }
.ca-form-hint  { font-size: .75rem; color: var(--ca-ink-50); margin-top: .3rem; }
.ca-form-error { font-size: .75rem; color: var(--ca-danger); margin-top: .3rem; }

/* ── ALERTS ──────────────────────────────────────────────────── */
.ca-alert {
  padding: .75rem 1rem;
  border-radius: var(--ca-r-md);
  font-size: .875rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: flex-start;
  gap: .6rem;
  line-height: 1.5;
}
.ca-alert-success { background: rgba(22,163,74,.08);  border: 1px solid rgba(22,163,74,.2);  color: #15803d; }
.ca-alert-error   { background: rgba(220,38,38,.07);  border: 1px solid rgba(220,38,38,.2);  color: #b91c1c; }
.ca-alert-warning { background: rgba(217,119,6,.08);  border: 1px solid rgba(217,119,6,.2);  color: #b45309; }
.ca-alert-info    { background: var(--ca-blue-faint); border: 1px solid rgba(26,115,232,.2); color: var(--ca-blue); }

/* ── PAGE LAYOUT ─────────────────────────────────────────────── */
.ca-container { max-width: 1320px; margin: 0 auto; padding: 0 clamp(1.25rem,4vw,2.5rem); }
.ca-page { padding: 2.5rem 0; }
.ca-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.ca-page-title {
  font-family: var(--ca-fd);
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--ca-ink);
  letter-spacing: -.03em;
}
.ca-page-title small {
  font-size: .8125rem;
  font-weight: 400;
  color: var(--ca-ink-50);
  margin-left: .5rem;
  letter-spacing: 0;
  font-family: var(--ca-fb);
}
.ca-breadcrumb {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .8rem;
  color: var(--ca-ink-50);
  margin-bottom: .4rem;
}
.ca-breadcrumb a { color: var(--ca-orange); }
.ca-breadcrumb a:hover { text-decoration: underline; }
.ca-breadcrumb span { opacity: .4; }

/* ── SECTION HEADERS (landing page) ─────────────────────────── */
.ca-sh {
  text-align: center;
  margin-bottom: 2.5rem;
}
.ca-sh .ca-stag {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--ca-orange);
  margin-bottom: .75rem;
}
.ca-sh .ca-stag::before {
  content: '';
  display: inline-block;
  width: 16px; height: 2px;
  background: var(--ca-orange);
}
.ca-sh h2 {
  font-family: var(--ca-fd);
  font-size: clamp(1.6rem, 3.5vw, 2.25rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--ca-ink);
  margin-bottom: .5rem;
}
.ca-sh p {
  font-size: 1rem;
  color: var(--ca-ink-50);
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.65;
}

/* ── SIDEBAR (client account area) ──────────────────────────── */
.ca-layout { display: grid; grid-template-columns: 240px 1fr; gap: 1.5rem; }
.ca-sidebar {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r-lg);
  padding: 1rem;
  height: fit-content;
  position: sticky;
  top: 78px;
}
.ca-sidebar-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--ca-ink-30);
  padding: .6rem .75rem .3rem;
}
.ca-sidebar-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border-radius: var(--ca-r-sm);
  color: var(--ca-ink-75);
  text-decoration: none;
  font-size: .875rem;
  font-weight: 500;
  transition: background .15s, color .15s;
}
.ca-sidebar-link:hover { background: var(--ca-ss); color: var(--ca-ink); }
.ca-sidebar-link.active {
  background: var(--ca-orange-faint);
  color: var(--ca-orange);
  font-weight: 600;
}
.ca-sidebar-link i { font-size: 1rem; opacity: .8; }
.ca-sidebar-link .ca-badge { margin-left: auto; }

/* ── INVOICE STYLES ──────────────────────────────────────────── */
.ca-invoice-paper {
  background: var(--ca-surface);
  border: 1px solid var(--ca-border);
  border-radius: var(--ca-r-lg);
  overflow: hidden;
  box-shadow: var(--ca-sh-sm);
}
.ca-invoice-header {
  background: var(--ca-navy);
  padding: 2.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1.5rem;
}
.ca-invoice-logo {
  font-family: var(--ca-fd);
  font-size: 1.4rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
}
.ca-invoice-logo small {
  display: block;
  font-size: .75rem;
  color: rgba(255,255,255,.4);
  font-weight: 400;
  margin-top: .25rem;
  font-family: var(--ca-fb);
  letter-spacing: 0;
}
.ca-invoice-number { text-align: right; }
.ca-invoice-number strong {
  display: block;
  font-family: var(--ca-fd);
  font-size: 2rem;
  color: #fff;
  font-weight: 900;
  letter-spacing: -.04em;
}
.ca-invoice-meta {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.ca-invoice-meta-cell {
  padding: 1.25rem 2.5rem;
  border-bottom: 1px solid var(--ca-border);
}
.ca-invoice-meta-cell:nth-child(odd) { border-right: 1px solid var(--ca-border); }
.ca-invoice-meta-label {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ca-ink-30);
  margin-bottom: .4rem;
}
.ca-invoice-meta-val { font-size: .9375rem; font-weight: 600; color: var(--ca-ink); }
.ca-invoice-items { padding: 0 2.5rem 1.5rem; }
.ca-invoice-total-section {
  border-top: 1px solid var(--ca-border);
  padding: 1.5rem 2.5rem;
  display: flex;
  justify-content: flex-end;
  background: var(--ca-sw);
}
.ca-invoice-totals { min-width: 280px; }
.ca-invoice-total-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: .5rem 0;
  font-size: .875rem;
  color: var(--ca-ink-75);
}
.ca-invoice-total-row.grand {
  border-top: 2px solid var(--ca-orange);
  margin-top: .5rem;
  padding-top: .85rem;
  font-family: var(--ca-fd);
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--ca-orange);
  letter-spacing: -.02em;
}
.ca-invoice-footer {
  padding: 1.25rem 2.5rem;
  background: var(--ca-sw);
  border-top: 1px solid var(--ca-border);
}

/* ── CART ────────────────────────────────────────────────────── */
.ca-cart-item {
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0;
  border-bottom: 1px solid var(--ca-border);
}
.ca-cart-item:last-child { border-bottom: none; }
.ca-cart-item-name { font-weight: 600; color: var(--ca-ink); font-size: .9375rem; }
.ca-cart-item-sub  { font-size: .75rem; color: var(--ca-ink-50); margin-top: .2rem; }
.ca-cart-item-price {
  font-family: var(--ca-fd);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ca-orange);
  letter-spacing: -.02em;
}

/* ── PAYMENT GATEWAY SELECTOR ────────────────────────────────── */
.ca-gateway-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: .75rem; }
.ca-gateway-item {
  border: 1.5px solid var(--ca-border);
  border-radius: var(--ca-r-lg);
  padding: 1.25rem;
  text-align: center;
  cursor: pointer;
  transition: border-color .2s, background .2s;
}
.ca-gateway-item:hover, .ca-gateway-item.selected {
  border-color: var(--ca-orange);
  background: var(--ca-orange-faint);
}
.ca-gateway-icon  { font-size: 2rem; margin-bottom: .5rem; }
.ca-gateway-name  { font-size: .8125rem; font-weight: 600; color: var(--ca-ink); }

/* ── ADMIN LAYOUT ────────────────────────────────────────────── */
.ca-admin-wrap { display: flex; min-height: 100vh; background: var(--ca-ss); }
.ca-admin-sidebar {
  width: 250px;
  background: var(--ca-navy);
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.ca-admin-sidebar-brand {
  padding: 1.25rem 1.25rem .85rem;
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.ca-admin-sidebar-brand h2 {
  font-family: var(--ca-fd);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  margin-bottom: .15rem;
  display: flex;
  align-items: center;
  gap: .4rem;
}
.ca-admin-sidebar-brand h2 .dot {
  display: inline-block;
  width: 6px; height: 6px;
  background: var(--ca-orange);
  border-radius: 50%;
  vertical-align: super;
}
.ca-admin-sidebar-brand small { font-size: .7rem; color: rgba(255,255,255,.3); }
.ca-admin-nav { padding: .75rem; flex: 1; }
.ca-admin-nav-section-title {
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.25);
  padding: .85rem .6rem .3rem;
}
.ca-admin-nav-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem .75rem;
  border-radius: var(--ca-r-sm);
  color: rgba(255,255,255,.55);
  text-decoration: none;
  font-size: .8375rem;
  font-weight: 500;
  transition: background .15s, color .15s;
  margin-bottom: 1px;
}
.ca-admin-nav-link:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.9); }
.ca-admin-nav-link.active {
  background: rgba(255,77,0,.15);
  color: var(--ca-orange);
  font-weight: 600;
}
.ca-admin-nav-link i { font-size: .9375rem; width: 18px; text-align: center; }
.ca-admin-nav-badge {
  margin-left: auto;
  background: var(--ca-danger);
  color: #fff;
  font-size: .625rem;
  font-weight: 700;
  padding: .15rem .5rem;
  border-radius: 100px;
}
.ca-admin-main { flex: 1; overflow-x: hidden; background: var(--ca-sw); }
.ca-admin-topbar {
  background: var(--ca-surface);
  padding: 0 1.75rem;
  height: 58px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--ca-border);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: var(--ca-sh-sm);
}
.ca-admin-topbar-title {
  font-family: var(--ca-fd);
  font-size: 1rem;
  font-weight: 700;
  color: var(--ca-ink);
  letter-spacing: -.02em;
}
.ca-admin-content { padding: 1.75rem; }

/* ── MODALS ──────────────────────────────────────────────────── */
.ca-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(14,20,32,.55);
  backdrop-filter: blur(4px);
  z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  padding: 1.25rem;
  opacity: 0; visibility: hidden;
  transition: all .25s;
}
.ca-modal-overlay.open { opacity: 1; visibility: visible; }
.ca-modal {
  background: var(--ca-surface);
  border-radius: var(--ca-r-xl);
  width: 100%;
  max-width: 520px;
  box-shadow: var(--ca-sh-lg);
  border: 1px solid var(--ca-border);
  transform: translateY(16px);
  transition: transform .25s;
}
.ca-modal-overlay.open .ca-modal { transform: translateY(0); }
.ca-modal-header {
  padding: 1.1rem 1.5rem;
  border-bottom: 1px solid var(--ca-border);
  display: flex; align-items: center; justify-content: space-between;
}
.ca-modal-header h4 {
  font-family: var(--ca-fd);
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -.02em;
}
.ca-modal-close {
  background: none; border: none;
  font-size: 1.25rem; cursor: pointer;
  color: var(--ca-ink-50); padding: 0; line-height: 1;
}
.ca-modal-body   { padding: 1.5rem; }
.ca-modal-footer { padding: 1rem 1.5rem; border-top: 1px solid var(--ca-border); display: flex; gap: .6rem; justify-content: flex-end; }

/* ── PAGINATION ──────────────────────────────────────────────── */
.ca-pagination { display: flex; gap: .3rem; align-items: center; flex-wrap: wrap; }
.ca-pagination a, .ca-pagination span {
  padding: .45rem .85rem;
  border-radius: var(--ca-r-sm);
  font-size: .8125rem;
  font-weight: 500;
  text-decoration: none;
  color: var(--ca-ink-75);
  border: 1px solid var(--ca-border);
  transition: all .15s;
}
.ca-pagination a:hover { background: var(--ca-ss); border-color: var(--ca-border-mid); color: var(--ca-ink); }
.ca-pagination .current { background: var(--ca-orange); color: #fff; border-color: var(--ca-orange); }

/* ── EMPTY STATE ─────────────────────────────────────────────── */
.ca-empty { text-align: center; padding: 4rem 1.25rem; }
.ca-empty-icon { font-size: 3rem; margin-bottom: 1rem; opacity: .3; }
.ca-empty h3 {
  font-family: var(--ca-fd);
  font-size: 1.0625rem;
  font-weight: 700;
  color: var(--ca-ink);
  margin-bottom: .4rem;
}
.ca-empty p { font-size: .875rem; color: var(--ca-ink-50); max-width: 280px; margin: 0 auto 1.5rem; }

/* ── SPINNER ─────────────────────────────────────────────────── */
.ca-spinner {
  display: inline-block;
  width: 18px; height: 18px;
  border: 2.5px solid var(--ca-orange-dim);
  border-top-color: var(--ca-orange);
  border-radius: 50%;
  animation: ca-spin .7s linear infinite;
}
@keyframes ca-spin { to { transform: rotate(360deg); } }

/* ── FOOTER ──────────────────────────────────────────────────── */
.ca-footer {
  background: var(--ca-navy);
  padding: 3rem clamp(1.25rem,4vw,2.5rem);
  margin-top: 3rem;
  border-top: 1px solid rgba(255,255,255,.05);
}
.ca-footer-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}
.ca-footer-brand {
  font-family: var(--ca-fd);
  font-size: 1.1rem;
  font-weight: 800;
  color: #fff;
  letter-spacing: -.04em;
  margin-bottom: .75rem;
}
.ca-footer-brand .dot { color: var(--ca-orange); }
.ca-footer p { font-size: .8125rem; color: rgba(255,255,255,.35); line-height: 1.7; }
.ca-footer-title {
  font-size: .7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: rgba(255,255,255,.25);
  margin-bottom: .75rem;
}
.ca-footer a {
  display: block;
  color: rgba(255,255,255,.45);
  font-size: .8125rem;
  padding: .25rem 0;
  transition: color .2s;
}
.ca-footer a:hover { color: rgba(255,255,255,.8); }
.ca-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 1.25rem;
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: .5rem;
}
.ca-footer-bottom p { font-size: .75rem; color: rgba(255,255,255,.2); }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width: 1024px) {
  .ca-layout { grid-template-columns: 1fr; }
  .ca-sidebar { position: static; }

  /* ── Admin sidebar: collapse to off-canvas drawer on tablet/mobile ── */
  .ca-admin-wrap { flex-direction: column; }
  .ca-admin-sidebar {
    width: 100%;
    height: auto;
    position: static;
    /* Horizontal scrollable pill nav on tablet */
    overflow-x: auto;
  }
  .ca-admin-nav {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 3px;
    padding: .4rem .5rem;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .ca-admin-nav::-webkit-scrollbar { display: none; }
  .ca-admin-nav-section-title { display: none; }
  .ca-admin-nav-link {
    flex-shrink: 0;
    padding: .45rem .85rem !important;
    font-size: .75rem !important;
    border-radius: 100px !important;
    margin: 0 !important;
    white-space: nowrap;
  }
  .ca-admin-sidebar-brand { padding: .75rem 1rem !important; }
  .ca-admin-sidebar-brand h2 { font-size: 13px !important; }
  .ca-admin-sidebar-brand small { display: none; }
}

@media (max-width: 768px) {
  /* ── Admin main ── */
  .ca-admin-main { overflow-x: hidden; }
  .ca-admin-topbar {
    height: auto;
    min-height: 52px;
    padding: .6rem 1rem !important;
    flex-wrap: wrap;
    gap: .5rem;
  }
  .ca-admin-topbar-title { font-size: .875rem; }
  .ca-admin-content { padding: .875rem !important; }

  /* ── Admin two-col grids → single col ── */
  div[style*="grid-template-columns:1.6fr 1fr"],
  div[style*="grid-template-columns:1fr 1fr"],
  div[style*="grid-template-columns:1fr 280px"],
  div[style*="grid-template-columns:1fr 320px"],
  div[style*="grid-template-columns:1fr 300px"] {
    display: block !important;
  }
  div[style*="grid-template-columns:1.6fr 1fr"] > * + *,
  div[style*="grid-template-columns:1fr 1fr"] > * + *,
  div[style*="grid-template-columns:1fr 280px"] > * + *,
  div[style*="grid-template-columns:1fr 320px"] > * + *,
  div[style*="grid-template-columns:1fr 300px"] > * + * {
    margin-top: 1rem;
  }

  /* ── Stats grids ── */
  .ca-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: .6rem; }

  /* ── Tables ── */
  .ca-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ca-table { min-width: 520px; }
  .ca-table th { font-size: .65rem; padding: .6rem .75rem; }
  .ca-table td { font-size: .8rem; padding: .6rem .75rem; }

  /* ── Cards ── */
  .ca-card-header { padding: .85rem 1rem; flex-wrap: wrap; gap: .4rem; }
  .ca-card-body { padding: .875rem; }

  /* ── Forms ── */
  .ca-form-row,
  .ca-form-row-3 { grid-template-columns: 1fr !important; }

  /* ── Invoice create line items: collapse to 2-col on mobile ── */
  div[style*="grid-template-columns:1fr 110px 60px 110px 110px 32px"] {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 6px !important;
  }
  div[style*="grid-template-columns:1fr 110px 60px 110px 110px 32px"] input[name*="line_start"],
  div[style*="grid-template-columns:1fr 110px 60px 110px 110px 32px"] input[name*="line_end"] {
    display: none;
  }

  /* ── Admin nav: even more compact ── */
  .ca-admin-nav-link {
    padding: .35rem .7rem !important;
    font-size: .7rem !important;
  }
  .ca-admin-nav-link i { display: none !important; }

  /* ── Pagination ── */
  .ca-pagination { gap: .2rem; }
  .ca-pagination a, .ca-pagination span { padding: .35rem .65rem; font-size: .75rem; }

  /* ── Buttons in topbar ── */
  .ca-admin-topbar .ca-btn { font-size: .75rem; padding: .35rem .75rem; }

  /* ── Filter tab rows ── */
  div[style*="display:flex;gap:4px;margin-bottom"] { flex-wrap: wrap !important; }
  div[style*="display:flex;gap:6px;flex-wrap:wrap"] { flex-wrap: wrap !important; }

  /* ── Email log table subject truncation ── */
  .ca-table td[style*="max-width:280px"] { max-width: 140px !important; }

  /* ── Action buttons wrap in table cells ── */
  .ca-table td div[style*="display:flex;gap:4px"] { flex-wrap: wrap; gap: 3px; }
  .ca-table td div[style*="display:flex;gap:6px"] { flex-wrap: wrap; gap: 3px; }

  /* ── Mini stat cards in dashboard ── */
  div[style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: .6rem !important;
  }

  /* ── Invoice detail admin sidebar form full width ── */
  .ca-admin-content .ca-form-control { font-size: .875rem; }
}

@media (max-width: 480px) {
  /* ── Stats single col ── */
  .ca-stats-grid { grid-template-columns: 1fr !important; }

  /* ── Mini stats single col ── */
  div[style*="grid-template-columns:repeat(auto-fit,minmax(160px,1fr))"] {
    grid-template-columns: 1fr !important;
  }
  div[style*="grid-template-columns:repeat(auto-fit,minmax(150px,1fr))"] {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* ── Tables tighter min-width ── */
  .ca-table { min-width: 380px; }

  /* ── Admin nav brand ── */
  .ca-admin-sidebar-brand { padding: .5rem .75rem !important; }

  /* ── Content padding ── */
  .ca-admin-content { padding: .625rem !important; }

  /* ── Topbar stacked ── */
  .ca-admin-topbar { justify-content: flex-start; }
  .ca-admin-topbar-title { width: 100%; font-size: .8125rem; }

  /* ── Card header stack ── */
  .ca-card-header h3 { font-size: .8125rem; }

  /* ── Orders actions ── */
  .ca-table td div[style*="display:flex;gap:6px;align-items:center"] { flex-wrap: wrap !important; gap: 4px !important; }

  /* ── Inline forms in table cells ── */
  .ca-table td form[style*="display:inline-flex"] { display: block !important; }
  .ca-table td select.ca-form-control { width: 90px !important; font-size: .7rem !important; }
}

@media (max-width: 768px) {
  /* ── Forms ── */
  .ca-form-row, .ca-form-row-3 { grid-template-columns: 1fr; }

  /* ── Hero ── */
  .ca-hero { padding: 3rem 1.25rem 2.5rem; }
  .ca-hero h1 { font-size: 1.75rem; }
  .ca-hero p { font-size: .9375rem; }
  .ca-hero-actions { flex-direction: column; align-items: center; }
  .ca-hero-actions .ca-btn { width: 100%; max-width: 320px; justify-content: center; }

  /* ── Nav ── */
  .ca-nav { height: auto; min-height: 58px; padding: .6rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .ca-nav-links { display: none; }
  .ca-nav-brand { font-size: 1.15rem; }

  /* ── Page layout ── */
  .ca-container { padding: 0 1rem; }
  .ca-page { padding: 1.5rem 0; }
  .ca-page-header { flex-direction: column; align-items: flex-start; gap: .75rem; margin-bottom: 1.25rem; }
  .ca-page-title { font-size: 1.25rem; }

  /* ── Stats ── */
  .ca-stats-grid { grid-template-columns: repeat(2, 1fr); gap: .75rem; }
  .ca-stat-card { padding: 1.1rem; }
  .ca-stat-val { font-size: 1.4rem; }

  /* ── Dashboard two-col grid → single col ── */
  div[style*="grid-template-columns:1fr 1fr"] { display: block !important; }
  div[style*="grid-template-columns:1fr 1fr"] > * + * { margin-top: 1rem; }
  div[style*="grid-template-columns:1fr 280px"] { display: block !important; }
  div[style*="grid-template-columns:1fr 280px"] > * + * { margin-top: 1rem; }
  div[style*="grid-template-columns:1fr 320px"] { display: block !important; }
  div[style*="grid-template-columns:1fr 320px"] > * + * { margin-top: 1rem; }
  div[style*="grid-template-columns:1fr 300px"] { display: block !important; }
  div[style*="grid-template-columns:1fr 300px"] > * + * { margin-top: 1rem; }

  /* ── Cards ── */
  .ca-card-header { padding: .9rem 1rem; flex-wrap: wrap; gap: .5rem; }
  .ca-card-body { padding: 1rem; }

  /* ── Tables ── */
  .ca-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .ca-table { min-width: 480px; }
  .ca-table th, .ca-table td { padding: .65rem .75rem; font-size: .8rem; }

  /* ── Product / category grids ── */
  .ca-products-grid { grid-template-columns: 1fr; }
  .ca-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .ca-gateway-list { grid-template-columns: repeat(2, 1fr); }

  /* ── Invoice ── */
  .ca-invoice-header { flex-direction: column; gap: 1rem; padding: 1.25rem; }
  .ca-invoice-logo { font-size: 1.1rem; }
  .ca-invoice-number strong { font-size: 1.4rem; }
  .ca-invoice-meta { grid-template-columns: 1fr; }
  .ca-invoice-meta-cell { padding: 1rem 1.25rem; }
  .ca-invoice-meta-cell:nth-child(odd) { border-right: none; }
  .ca-invoice-items { padding: 0 1rem 1rem; }
  .ca-invoice-total-section { padding: 1rem 1.25rem; flex-direction: column; }
  .ca-invoice-totals { min-width: unset; width: 100%; }
  .ca-invoice-footer { padding: 1rem 1.25rem; }

  /* ── Footer ── */
  .ca-footer { padding: 2rem 1rem; margin-top: 2rem; }
  .ca-footer-grid { grid-template-columns: 1fr 1fr; gap: 1.5rem; }
  .ca-footer-bottom { flex-direction: column; gap: .25rem; }

  /* ── Buttons ── */
  .ca-btn-block { width: 100%; }

  /* ── Admin topbar ── */
  .ca-admin-topbar { padding: 0 1rem; height: auto; min-height: 52px; flex-wrap: wrap; gap: .5rem; padding-top: .6rem; padding-bottom: .6rem; }
  .ca-admin-content { padding: 1rem; }

  /* ── Cart item ── */
  .ca-cart-item { grid-template-columns: 1fr auto; }
  .ca-cart-item > :last-child { grid-column: 1 / -1; }

  /* ── Page header buttons ── */
  .ca-page-header .ca-btn { width: 100%; justify-content: center; }
}

@media (max-width: 480px) {
  /* ── Stats single col ── */
  .ca-stats-grid { grid-template-columns: 1fr; }

  /* ── Footer single col ── */
  .ca-footer-grid { grid-template-columns: 1fr; }

  /* ── Categories single col ── */
  .ca-categories-grid { grid-template-columns: 1fr; }

  /* ── Nav brand smaller ── */
  .ca-nav-brand { font-size: 1rem; }

  /* ── Hero tighter ── */
  .ca-hero { padding: 2.5rem 1rem 2rem; }
  .ca-hero h1 { font-size: 1.5rem; }
  .ca-hero-badge { font-size: .6875rem; }

  /* ── Alerts ── */
  .ca-alert { font-size: .8125rem; padding: .65rem .85rem; }

  /* ── Modals ── */
  .ca-modal { border-radius: var(--ca-r-lg); }
  .ca-modal-body { padding: 1rem; }
  .ca-modal-footer { padding: .75rem 1rem; }

  /* ── Invoice view sidebar full width ── */
  .ca-invoice-total-row { font-size: .8125rem; }
  .ca-invoice-total-row.grand { font-size: 1rem; }

  /* ── Page title even smaller ── */
  .ca-page-title { font-size: 1.1rem; }

  /* ── Card header text ── */
  .ca-card-header h3 { font-size: .875rem; }

  /* ── Gateway list single col ── */
  .ca-gateway-list { grid-template-columns: 1fr; }

  /* ── Table min-width tighter ── */
  .ca-table { min-width: 360px; }

  /* ── Quick actions wrap nicely ── */
  div[style*="display:flex;flex-wrap:wrap;gap:12px"] .ca-btn { flex: 1 1 calc(50% - 6px); min-width: 120px; justify-content: center; }
}

/* ── Extra: Mobile hamburger for nav (JS-toggled) ──────────────── */
.ca-nav-mobile-toggle {
  display: none;
  background: none;
  border: 1px solid var(--ca-border-mid);
  border-radius: var(--ca-r-sm);
  padding: .35rem .6rem;
  cursor: pointer;
  color: var(--ca-ink-75);
  font-size: 1.1rem;
  line-height: 1;
}
@media (max-width: 768px) {
  .ca-nav-mobile-toggle { display: flex; align-items: center; }
  .ca-nav-links.mob-open {
    display: flex !important;
    flex-direction: column;
    width: 100%;
    order: 99;
    background: var(--ca-surface);
    border-top: 1px solid var(--ca-border);
    padding: .5rem 0;
    gap: 0;
  }
  .ca-nav-links.mob-open li { width: 100%; }
  .ca-nav-links.mob-open a {
    padding: .75rem 1rem;
    border-radius: 0;
    font-size: .9375rem;
    border-bottom: 1px solid var(--ca-border);
    width: 100%;
    display: block;
  }
  .ca-nav-links.mob-open a:last-of-type { border-bottom: none; }
}
/* ═══════════════════════════════════════════════════════════════
   RAZORPAY PAYMENT BUTTON HIGHLIGHT ANIMATION - Corporate Grade
   ═══════════════════════════════════════════════════════════════ */

/* Keyframe animations */
@keyframes rzp-pulse-glow {
  0%, 100% {
    box-shadow: 
      0 0 0 0 rgba(15, 157, 88, 0.4),
      0 4px 16px rgba(15, 157, 88, 0.2),
      inset 0 1px 0 rgba(255, 255, 255, 0.15);
  }
  50% {
    box-shadow: 
      0 0 0 8px rgba(15, 157, 88, 0),
      0 6px 24px rgba(15, 157, 88, 0.35),
      inset 0 1px 0 rgba(255, 255, 255, 0.2);
  }
}

@keyframes rzp-shimmer {
  0% {
    background-position: -200% center;
  }
  100% {
    background-position: 200% center;
  }
}

@keyframes rzp-subtle-scale {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* Apply to Razorpay button */
#rzpBtn {
  position: relative;
  overflow: hidden;
  animation: 
    rzp-pulse-glow 2.5s ease-in-out infinite,
    rzp-subtle-scale 3s ease-in-out infinite;
  transition: all 0.3s ease;
  background: linear-gradient(135deg, #0f9d58, #00897b) !important;
}

/* Shimmer overlay effect */
#rzpBtn::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.15) 45%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0.15) 55%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: rzp-shimmer 3s linear infinite;
  pointer-events: none;
}

/* Hover state enhancement */
#rzpBtn:hover {
  animation: 
    rzp-pulse-glow 1.5s ease-in-out infinite,
    rzp-subtle-scale 2s ease-in-out infinite;
  box-shadow: 
    0 0 0 0 rgba(15, 157, 88, 0.3),
    0 8px 32px rgba(15, 157, 88, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.25) !important;
  transform: scale(1.03);
}

/* Active state */
#rzpBtn:active {
  animation: none;
  transform: scale(0.98);
  box-shadow: 
    0 2px 8px rgba(15, 157, 88, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
}

/* Focus ring for accessibility */
#rzpBtn:focus-visible {
  outline: 3px solid rgba(15, 157, 88, 0.4);
  outline-offset: 2px;
}

/* Disable animations on reduced motion preference */
@media (prefers-reduced-motion: reduce) {
  #rzpBtn,
  #rzpBtn::before {
    animation: none !important;
  }
  #rzpBtn:hover {
    animation: none !important;
  }
}