/* Shared PRO LUXE visual system.
   Kept separate so the storefront, checkout, sign-in and admin pages stay in sync. */
:root,
[data-theme="dark"] {
  color-scheme: dark;
  --primary: #c9a227;
  --primary-dark: #9b7615;
  --primary-light: rgba(201, 162, 39, .14);
  --bg: #0b0907;
  --surface: #15120f;
  --surface2: #211b15;
  --surface3: #302517;
  --text: #f8f0e2;
  --text2: #cbbda8;
  --text3: #8f806c;
  --border: rgba(201, 162, 39, .22);
  --radius: 14px;
  --shadow: 0 8px 24px rgba(0, 0, 0, .28);
  --shadow-lg: 0 18px 50px rgba(0, 0, 0, .45);
  --brand: #c9a227;
  --brand-dim: rgba(201, 162, 39, .14);
}

html {
  background: var(--bg);
  color-scheme: dark;
  scrollbar-color: rgba(201, 162, 39, .42) #0b0907;
}

body {
  background-color: var(--bg);
  color: var(--text);
}

::selection {
  background: rgba(201, 162, 39, .32);
  color: #fff8e8;
}

a {
  color: var(--primary);
}

button,
input,
select,
textarea {
  font: inherit;
}

button {
  -webkit-tap-highlight-color: transparent;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 2px solid #e4c257;
  outline-offset: 2px;
}

input,
select,
textarea {
  color: var(--text);
  accent-color: var(--primary);
}

input::placeholder,
textarea::placeholder {
  color: var(--text3);
  opacity: 1;
}

/* Shared gold action treatment. Destructive and success states retain their
   semantic colors rather than being recolored as primary actions. */
.btn-primary,
.place-btn,
.btn-home,
.home-editorial-btn,
.add-cart-btn,
.wl-add-btn,
.search-filter-btn,
.filter-apply-btn,
.app-banner-btn {
  background: linear-gradient(135deg, #e4c257, #a57b13);
  border-color: rgba(255, 230, 145, .38);
  color: #1b1306;
  box-shadow: 0 7px 20px rgba(201, 162, 39, .2);
}

.btn-primary:hover,
.place-btn:hover,
.btn-home:hover,
.home-editorial-btn:hover,
.add-cart-btn:hover,
.wl-add-btn:hover,
.search-filter-btn:hover,
.filter-apply-btn:hover,
.app-banner-btn:hover {
  filter: brightness(1.06);
  box-shadow: 0 9px 24px rgba(201, 162, 39, .28);
}

.btn-ghost,
.btn-outline,
.filter-clear-btn,
.sort-dropdown-btn,
.sort-pill,
.filter-btn,
.home-filter-btn {
  background-color: rgba(255, 255, 255, .035);
  border-color: rgba(201, 162, 39, .28);
  color: #e0d2b8;
}

.btn-ghost:hover,
.btn-outline:hover,
.filter-clear-btn:hover,
.sort-dropdown-btn:hover,
.sort-pill:hover,
.filter-btn:hover,
.home-filter-btn:hover {
  background-color: rgba(201, 162, 39, .1);
  border-color: rgba(201, 162, 39, .55);
  color: #f4d77b;
}

/* Storefront */
.header {
  background: rgba(11, 9, 7, .94);
  border-bottom-color: rgba(201, 162, 39, .22);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .3);
}

.hamburger-btn {
  background: rgba(201, 162, 39, .08);
  border-color: rgba(201, 162, 39, .22);
  color: var(--primary);
  box-shadow: none;
}

.logo-text-bold,
.icon-btn {
  color: #f6e8c9;
}

.icon-btn:hover,
.quick-categories-row > div > div > div {
  background-color: rgba(201, 162, 39, .08);
  border-color: rgba(201, 162, 39, .28);
}

.home-editorial-main {
  background: linear-gradient(145deg, #21180b, #15120f 58%, #35270f);
  border-color: rgba(201, 162, 39, .3);
}

.home-editorial-title,
.section-heading,
.product-name,
.cat-home-card-name,
.cat-home-sec-title {
  color: #f8f0e2;
}

.home-editorial-eyebrow,
.price-current,
.cat-home-card-price,
.flash-title,
.flash-card-price,
.voucher-code {
  color: #e3bd54;
}

.home-editorial-sub,
.home-value-card,
.trust-marquee .trust-item-label {
  color: #d8c8af;
}

.search-input-wrap {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(201, 162, 39, .24);
  box-shadow: 0 7px 22px rgba(0, 0, 0, .28);
}

.product-card,
.cat-home-card,
.related-card,
.mini-card,
.order-card,
.help-card,
.voucher-card,
.pending-review-card,
.flash-card {
  background: var(--surface);
  border-color: rgba(201, 162, 39, .2);
  box-shadow: 0 7px 18px rgba(0, 0, 0, .24);
}

.product-img-wrap,
.cat-home-card-img-wrap,
.shop-category-card,
.seller-card {
  background: linear-gradient(145deg, #211b15, #0d0b09);
  border-color: rgba(201, 162, 39, .2);
}

.page-header,
.cart-header,
.cart-footer,
.bottom-nav,
.quick-categories-row,
.sort-bar {
  background: rgba(21, 18, 15, .97);
  border-color: rgba(201, 162, 39, .2);
}

.side-menu,
.currency-dropdown,
.cart-drawer,
.search-page,
.product-page,
.confirm-page,
.notif-page,
.full-page,
.profile-panel,
.filter-sheet,
.sort-dropdown-menu {
  background: var(--bg);
}

.footer {
  background: linear-gradient(180deg, #15120f, #0b0907) !important;
  border-top-color: rgba(201, 162, 39, .42) !important;
}

.bottom-nav {
  border-top-color: rgba(201, 162, 39, .24) !important;
}

.bnav-item.active,
.see-all-link,
.rec-see-all,
.pending-review-cta {
  color: var(--primary);
}

/* Sign-in and account pages */
.auth-topbar {
  background: rgba(11, 9, 7, .94);
  border-bottom-color: rgba(201, 162, 39, .28);
}

.auth-topbar-title,
.auth-title,
.brand-wordmark {
  color: #f3db8d;
}

.card {
  background: rgba(21, 18, 15, .9);
  border-color: rgba(201, 162, 39, .24);
  box-shadow: var(--shadow);
}

.tabs {
  border-bottom-color: rgba(201, 162, 39, .2);
}

.tab-btn.active {
  color: #edca62;
  border-bottom-color: var(--primary);
}

.btn,
.btn-outline,
.google-btn {
  border-radius: 999px;
}

.btn {
  background: linear-gradient(135deg, #e4c257, #a57b13);
  color: #1b1306;
}

.btn-outline,
.google-btn {
  background: rgba(255, 255, 255, .035);
  border-color: rgba(201, 162, 39, .3);
  color: #e0d2b8;
}

.switch-link,
.terms-text,
.help-text,
.auth-sub {
  color: var(--text2);
}

.switch-link a,
.terms-text a,
.help-text a {
  color: #edca62;
}

/* Admin dashboard */
.sidebar,
.topbar,
.stat-card,
.form-card,
.table-wrap,
.modal,
.modal-box,
.toast,
.login-card,
.notif-preview {
  background-color: rgba(21, 18, 15, .97);
  border-color: rgba(201, 162, 39, .22);
}

.sidebar-brand-inner,
.login-card-top {
  background: linear-gradient(135deg, #30220c, #9b7615 145%);
}

.nav-item:hover {
  background: rgba(201, 162, 39, .08);
  color: #f5d878;
}

.nav-item.active {
  background: rgba(201, 162, 39, .12);
  color: #e3bc47;
  border-left-color: var(--primary);
}

.admin-badge,
.notif-badge.active,
.notif-preview-badge {
  background: rgba(201, 162, 39, .12);
  border-color: rgba(201, 162, 39, .3);
  color: #e3bc47;
}

.card-group-title {
  color: #e3bc47;
}

.table-wrap {
  overflow-x: auto;
}

th {
  background: #211b15;
  color: var(--text2);
}

tr:hover td {
  background-color: rgba(201, 162, 39, .045);
}

input,
select,
textarea {
  background-color: #0f0d0a;
  border-color: rgba(201, 162, 39, .24);
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(201, 162, 39, .12);
}

/* Checkout */
.hdr {
  background: linear-gradient(135deg, #21180b, #0f0d0a 58%, #35270f);
  border-bottom: 1px solid rgba(201, 162, 39, .28);
}

.content .card,
.instr-card {
  background: linear-gradient(145deg, rgba(31, 24, 15, .97), rgba(15, 12, 9, .97));
  border-color: rgba(201, 162, 39, .24);
}

.instr-card-link-only {
  border-width: 1px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .3), 0 0 0 1px rgba(201, 162, 39, .04);
}

.instr-card-link-only .instr-body {
  padding-top: 16px;
}

.instr-card-link-only .payment-link-btn {
  min-height: 54px;
}

.place-btn,
.btn-home,
.payment-link-btn {
  background: linear-gradient(135deg, #e4c257, #a57b13);
  color: #1b1306;
}

.bottom-bar {
  background: rgba(11, 9, 7, .96);
  border-top-color: rgba(201, 162, 39, .24);
}

/* Standalone mobile-money handoff */
.logo {
  color: #f6e8c9;
  font-family: Georgia, "Times New Roman", serif;
  letter-spacing: 2px;
}

.logo span {
  color: #d4aa32;
}

.amount-hero,
.status-panel,
.receipt-card {
  background: linear-gradient(145deg, #21180b, #15120f 68%, #0f0d0a);
  border-color: rgba(201, 162, 39, .24);
}

.amount-hero::before {
  background: radial-gradient(circle, rgba(201, 162, 39, .14) 0%, transparent 70%);
}

.progress-fill,
.pay-btn {
  background: linear-gradient(135deg, #e4c257, #a57b13);
}

.progress-fill {
  background: linear-gradient(90deg, #9b7615, #c9a227, #f1d981);
}

.pay-btn {
  color: #1b1306;
  box-shadow: 0 6px 24px rgba(201, 162, 39, .24);
}

.pay-btn:hover {
  box-shadow: 0 8px 30px rgba(201, 162, 39, .32);
}

.pay-btn.success-state {
  color: #fff;
}

.countdown-arc {
  stroke: var(--primary);
}

/* Maintenance interstitial */
.maintenance-page .orb1 {
  background: radial-gradient(circle, #c9a227, transparent);
}

.maintenance-page .orb2 {
  background: radial-gradient(circle, #6e5011, transparent);
}

.maintenance-page .orb3 {
  background: radial-gradient(circle, #9b7615, transparent);
}

.maintenance-page .card {
  background: rgba(21, 18, 15, .9);
  border-color: rgba(201, 162, 39, .24);
  box-shadow: var(--shadow-lg);
}

.maintenance-page .logo-wrap {
  background: linear-gradient(135deg, #e4c257, #a57b13);
}

@media (max-width: 768px) {
  .content {
    padding-left: 14px;
    padding-right: 14px;
  }
}