/**
 * miNum - Mobile-First Responsive Architecture with Comprehensive Dark Mode Overrides & Dedicated OTP Copy Buttons
 */

/* ── Paystack & miNum Color Tokens ── */
:root {
  --paystack-mint-bg: #EEFBF4;
  --paystack-green: #3BB75E;
  --paystack-green-hover: #2FA350;
  --paystack-navy: #0A2540;
  --paystack-light-blue: #F0F8FF;
  --paystack-card-border: #E4E9EE;
  
  --md-sys-color-primary: #0A2540;
  --md-sys-color-on-primary: #FFFFFF;
  --md-sys-color-primary-container: #EEFBF4;
  --md-sys-color-on-primary-container: #0A2540;

  --md-sys-color-secondary: #3BB75E;
  --md-sys-color-on-secondary: #FFFFFF;

  --md-sys-color-background: #FFFFFF;
  --md-sys-color-on-background: #0A2540;

  --md-sys-color-surface: #FFFFFF;
  --md-sys-color-on-surface: #0A2540;
  --md-sys-color-surface-variant: #F4F7FA;
  --md-sys-color-on-surface-variant: #4A5B6D;

  --md-sys-color-outline: #E4E9EE;
  --md-sys-color-outline-variant: #EEF2F6;

  --md-sys-color-success: #3BB75E;
  --md-sys-color-warning: #FFB000;
  --md-sys-color-error: #FF3B30;

  --md-elevation-1: 0 4px 12px rgba(10, 37, 64, 0.04);
  --md-elevation-2: 0 12px 32px rgba(10, 37, 64, 0.08);
  --md-elevation-3: 0 24px 48px rgba(10, 37, 64, 0.12);

  --md-radius-sm: 6px;
  --md-radius-md: 10px;
  --md-radius-lg: 16px;
  --md-radius-full: 9999px;
  --md-font-family: 'Outfit', 'Plus Jakarta Sans', -apple-system, sans-serif;
  --elastic-transition: all 200ms cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

/* ── Dark Mode Root Tokens ── */
html.dark, body.dark {
  --paystack-mint-bg: #071D14;
  --paystack-light-blue: #08192D;
  --paystack-navy: #FFFFFF;
  --paystack-card-border: #1D2E45;

  --md-sys-color-background: #070D18;
  --md-sys-color-on-background: #F4F7FA;

  --md-sys-color-surface: #0F192C;
  --md-sys-color-on-surface: #F4F7FA;
  --md-sys-color-surface-variant: #1B2942;
  --md-sys-color-on-surface-variant: #8E9DB0;

  --md-sys-color-outline: #1D2E45;
  --md-sys-color-outline-variant: #1B2942;
}

/* ── Nano Banana Modern Design Aesthetics ── */
.nanobanana-glass-card {
  background: var(--md-sys-color-surface);
  border: 1.5px solid var(--paystack-card-border);
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(10, 37, 64, 0.05);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.25s ease;
}

html.dark .nanobanana-glass-card {
  background: rgba(15, 25, 44, 0.85);
  border-color: rgba(59, 183, 94, 0.25);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
}

.nanobanana-hero-banner {
  background: linear-gradient(135deg, rgba(238, 251, 244, 0.9) 0%, rgba(240, 248, 255, 0.9) 100%);
  border-bottom: 1.5px solid var(--paystack-card-border);
  position: relative;
  overflow: hidden;
}

html.dark .nanobanana-hero-banner {
  background: linear-gradient(135deg, #071D14 0%, #08192D 100%);
  border-bottom-color: rgba(59, 183, 94, 0.3);
}

.nanobanana-glow-badge {
  background: linear-gradient(135deg, rgba(59, 183, 94, 0.15) 0%, rgba(0, 195, 247, 0.1) 100%);
  border: 1px solid rgba(59, 183, 94, 0.3);
  color: var(--paystack-green);
  font-weight: 800;
  border-radius: 20px;
  padding: 4px 12px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

html.dark .nanobanana-glow-badge {
  background: linear-gradient(135deg, rgba(59, 183, 94, 0.25) 0%, rgba(0, 195, 247, 0.2) 100%);
  border-color: rgba(59, 183, 94, 0.5);
  color: #4ADE80;
}

.nanobanana-service-card {
  border: 1.5px solid var(--paystack-card-border);
  background: var(--md-sys-color-surface);
  border-radius: 10px;
  padding: 12px 10px;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
  text-align: center;
  position: relative;
}

.nanobanana-service-card:hover {
  transform: translateY(-2px);
  border-color: var(--paystack-green);
  box-shadow: 0 6px 20px rgba(59, 183, 94, 0.15);
}

.nanobanana-service-card.active {
  border: 1.5px solid var(--paystack-green) !important;
  background: var(--paystack-mint-bg) !important;
  box-shadow: 0 8px 24px rgba(59, 183, 94, 0.2) !important;
}

html.dark .nanobanana-service-card.active {
  border-color: #3BB75E !important;
  background: rgba(59, 183, 94, 0.18) !important;
}

.nanobanana-order-bar {
  background: linear-gradient(135deg, rgba(59, 183, 94, 0.12) 0%, rgba(0, 195, 247, 0.08) 100%);
  border: 1.5px solid rgba(59, 183, 94, 0.25);
  padding: 14px 18px;
  border-radius: 10px;
}

html.dark .nanobanana-order-bar {
  background: linear-gradient(135deg, rgba(59, 183, 94, 0.2) 0%, rgba(0, 195, 247, 0.15) 100%);
  border-color: rgba(59, 183, 94, 0.4);
}

/* ── Paystack & Nano Banana Responsive Dashboard 2-Column Grid Layout ── */
.paystack-dashboard-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  align-items: start;
}

@media (min-width: 992px) {
  .paystack-dashboard-grid {
    grid-template-columns: 1.15fr 0.85fr;
    gap: 28px;
  }

  .sticky-dashboard-sidebar {
    position: sticky;
    top: 90px;
  }
}

/* ── Country Selection Desktop Grid & Mobile List Layout ── */
#country-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(135px, 1fr));
  gap: 8px;
}

.country-card {
  border: 1.5px solid transparent;
  background: var(--md-sys-color-surface);
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}

.country-card:hover {
  border-color: rgba(59, 183, 94, 0.4);
  transform: translateY(-1px);
}

.country-card.active {
  border-color: var(--paystack-green) !important;
  background: var(--paystack-mint-bg) !important;
}

.country-card-header {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.country-card-title-group {
  display: flex;
  align-items: center;
  gap: 8px;
}

.country-flag-icon {
  font-size: 1.1rem;
  border-radius: 3px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.country-card-names {
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.country-name-text {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--paystack-navy);
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.country-prefix-text {
  font-size: 0.68rem;
  color: var(--md-sys-color-on-surface-variant);
  font-weight: 600;
  margin-top: 1px;
}

.country-card-price-group {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 4px;
}

.country-price-tag {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--paystack-green);
}

/* ── Mobile Vertical List View (<= 768px) ── */
@media (max-width: 768px) {
  #country-cards-grid {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
  }

  .country-card {
    padding: 12px 14px !important;
    border-radius: 8px !important;
    min-height: 52px !important;
  }

  .country-card-header {
    flex-direction: row !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 100% !important;
  }

  .country-card-price-group {
    margin-top: 0 !important;
  }

  .country-name-text {
    font-size: 0.88rem !important;
  }

  .country-prefix-text {
    font-size: 0.75rem !important;
  }

  .country-price-tag {
    font-size: 0.88rem !important;
  }
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Mobile Input Auto-Zoom & Anti-Overflow Locks ── */
html, body {
  width: 100%;
  max-width: 100vw;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

body {
  font-family: var(--md-font-family);
  background-color: var(--md-sys-color-background);
  color: var(--md-sys-color-on-background);
  line-height: 1.5;
  transition: background-color 200ms ease, color 200ms ease;
  -webkit-font-smoothing: antialiased;
  scroll-behavior: smooth;
}

/* Enforce 16px font-size on Mobile Inputs to Prevent Safari/Chrome Auto-Zoom */
@media screen and (max-width: 768px) {
  input[type="text"],
  input[type="password"],
  input[type="email"],
  input[type="number"],
  input[type="search"],
  input[type="tel"],
  select,
  textarea {
    font-size: 16px !important;
    -webkit-text-size-adjust: 100%;
    touch-action: manipulation;
  }
}

.mobile-only-avatar {
  display: flex !important;
}

@media (min-width: 992px) {
  .mobile-only-avatar {
    display: none !important;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

/* ── Dedicated OTP Copy Button ── */
.otp-copy-btn {
  background: #FFFFFF;
  color: var(--paystack-navy);
  border: 1px solid #C4EED0;
  padding: 6px 14px;
  font-size: 0.78rem;
  font-weight: 800;
  border-radius: 6px;
  cursor: pointer;
  transition: var(--elastic-transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.otp-copy-btn:hover {
  background: var(--paystack-mint-bg);
  border-color: var(--paystack-green);
}

/* ── Mobile-Safe High-Performance Scroll Reveal Classes ── */
.reveal-fade-up,
.reveal-fade-left,
.reveal-fade-right,
.reveal-zoom-in {
  opacity: 0;
  will-change: transform, opacity;
  transition: transform 550ms cubic-bezier(0.16, 1, 0.3, 1), opacity 550ms ease;
}

.reveal-fade-up,
.reveal-fade-left,
.reveal-fade-right {
  transform: translateY(24px);
}

.reveal-zoom-in {
  transform: scale(0.92);
}

@media (min-width: 768px) {
  .reveal-fade-left {
    transform: translateX(-36px);
  }
  .reveal-fade-right {
    transform: translateX(36px);
  }
}

.reveal-fade-up.is-revealed,
.reveal-fade-left.is-revealed,
.reveal-fade-right.is-revealed,
.reveal-zoom-in.is-revealed {
  opacity: 1;
  transform: translate(0, 0) scale(1);
}

@media (prefers-reduced-motion: reduce) {
  .reveal-fade-up,
  .reveal-fade-left,
  .reveal-fade-right,
  .reveal-zoom-in {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* ── Fixed Sticky Navigation Bar ── */
.md-app-bar {
  position: -webkit-sticky !important;
  position: sticky !important;
  top: 0 !important;
  z-index: 1000 !important;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--paystack-card-border);
  transition: background-color 200ms ease, border-color 200ms ease;
  width: 100%;
}

.md-app-bar-inner {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 14px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

/* Bespoke SIM Card Icon Brand Logo */
.minum-sim-logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 900;
  font-size: 1.35rem;
  color: var(--paystack-navy);
  letter-spacing: -0.5px;
}

.minum-sim-icon {
  width: 32px;
  height: 40px;
  background: linear-gradient(135deg, #3BB75E 0%, #00C3F7 100%);
  border-radius: 5px;
  clip-path: polygon(0 0, 72% 0, 100% 22%, 100% 100%, 0 100%);
  position: relative;
  box-shadow: 0 4px 12px rgba(59, 183, 94, 0.3);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: var(--elastic-transition);
  flex-shrink: 0;
}

.minum-sim-chip {
  width: 15px;
  height: 17px;
  background: linear-gradient(135deg, #FFE259 0%, #FFA751 100%);
  border-radius: 2px;
  border: 1px solid rgba(0, 0, 0, 0.15);
  position: relative;
}

.minum-sim-chip::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: rgba(0, 0, 0, 0.2);
}

.minum-sim-logo:hover .minum-sim-icon {
  transform: scale(1.08) rotate(-4deg);
}

/* Navbar Links */
.md-nav-links {
  display: flex;
  align-items: center;
  gap: 24px;
}

.md-nav-item {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--md-sys-color-on-surface-variant);
  padding: 6px 12px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: var(--elastic-transition);
  white-space: nowrap;
}

.md-nav-item:hover, .md-nav-item.active {
  color: var(--paystack-green);
  background: var(--md-sys-color-surface-variant);
}

/* Mobile-First Button Specs */
.md-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 46px;
  padding: 12px 22px;
  font-size: 0.95rem;
  font-weight: 800;
  border-radius: var(--md-radius-sm);
  border: none;
  cursor: pointer;
  transition: var(--elastic-transition);
  letter-spacing: -0.2px;
}

.md-btn:active {
  transform: scale(0.97) !important;
}

.md-btn-primary {
  background-color: var(--paystack-green);
  color: #FFFFFF;
}

.md-btn-primary:hover {
  background-color: var(--paystack-green-hover);
}

.md-btn-outline {
  background: transparent;
  color: var(--paystack-navy);
  border: 1px solid var(--paystack-card-border);
}

.md-btn-outline:hover {
  background: var(--md-sys-color-surface-variant);
}

/* Clean 1-Button Dark/Light Mode Icon Toggle */
.theme-icon-toggle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--md-sys-color-surface-variant);
  border: 1px solid var(--paystack-card-border);
  color: var(--paystack-navy);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  cursor: pointer;
  transition: var(--elastic-transition);
  flex-shrink: 0;
}

.theme-icon-toggle:hover {
  background: var(--paystack-green);
  color: #FFFFFF;
  border-color: var(--paystack-green);
  transform: rotate(15deg);
}

/* Mobile-First Cards & Layout Containers */
.md-card {
  background-color: var(--md-sys-color-surface);
  border: 1px solid var(--paystack-card-border);
  border-radius: var(--md-radius-md);
  padding: 20px;
  box-shadow: var(--md-elevation-1);
  transition: var(--elastic-transition);
}

.md-container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 40px 16px;
}

.md-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--md-radius-full);
  font-size: 0.8rem;
  font-weight: 800;
  background-color: #E6F7FF;
  color: #004065;
}

/* Paystack Green Checkmark Grid */
.paystack-check-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  margin-top: 20px;
}

.paystack-check-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--paystack-navy);
}

.paystack-check-icon {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #E6F8ED;
  color: #3BB75E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 12px;
  font-weight: 900;
}

/* Mobile Toggle Hamburger Button */
.paystack-mobile-toggle {
  display: block;
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--paystack-navy);
  cursor: pointer;
  padding: 8px;
}

/* Mobile Backdrop Overlay */
.paystack-mobile-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  z-index: 998;
  display: none;
  opacity: 0;
  transition: opacity 200ms ease;
}

/* Mobile Drawer Container */
.paystack-mobile-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: var(--md-sys-color-surface);
  border-bottom: 1px solid var(--paystack-card-border);
  padding: 24px 20px;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
  flex-direction: column;
  gap: 12px;
  z-index: 999;
}

.paystack-mobile-drawer .md-nav-item {
  width: 100%;
  padding: 12px 16px;
  border-radius: 6px;
  font-size: 1rem;
  border-bottom: 1px solid var(--md-sys-color-surface-variant);
}

.paystack-mobile-drawer.open {
  display: flex;
}

.desktop-only-nav {
  display: none !important;
}

/* ── Split Desktop Auth Layout ── */
.auth-page-wrapper {
  background: var(--paystack-mint-bg);
  min-height: calc(100vh - 70px);
  padding: 40px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.auth-split-container {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--md-sys-color-surface);
  border-radius: 16px;
  border: 1px solid var(--paystack-card-border);
  box-shadow: 0 20px 48px rgba(10, 37, 64, 0.08);
  overflow: hidden;
}

@media (min-width: 992px) {
  .auth-split-container {
    grid-template-columns: 1.1fr 1fr;
  }
}

.auth-brand-sidebar {
  background: linear-gradient(135deg, #EEFBF4 0%, #E6F7FF 100%);
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--paystack-card-border);
}

.auth-form-side {
  padding: 48px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

@media (max-width: 768px) {
  .auth-brand-sidebar {
    display: none !important;
  }
  .auth-form-side {
    padding: 32px 20px !important;
  }
  .auth-split-container {
    border-radius: 12px;
    box-shadow: var(--md-elevation-1);
  }
}

/* ── Global Dark Mode Comprehensive Overrides ── */
html.dark, body.dark {
  background-color: #070D18 !important;
  color: #F4F7FA !important;
}

/* Typography Headings & Text */
html.dark h1, html.dark h2, html.dark h3, html.dark h4, html.dark h5, html.dark h6 {
  color: #FFFFFF !important;
}

html.dark p, html.dark label {
  color: #8E9DB0 !important;
}

/* Navigation Bar & Drawers */
html.dark .md-app-bar {
  background: #0F192C !important;
  border-bottom-color: #1D2E45 !important;
}

html.dark .paystack-mobile-drawer {
  background: #0F192C !important;
  border-bottom-color: #1D2E45 !important;
}

html.dark .minum-sim-logo span {
  color: #FFFFFF !important;
}

html.dark .md-nav-item {
  color: #8E9DB0 !important;
}

html.dark .md-nav-item:hover, 
html.dark .md-nav-item.active {
  color: #3BB75E !important;
  background: #1B2942 !important;
}

/* Cards & Surfaces */
html.dark .md-card,
html.dark .service-card,
html.dark .country-card,
html.dark .auth-split-container {
  background-color: #0F192C !important;
  border-color: #1D2E45 !important;
  color: #F4F7FA !important;
}

html.dark .auth-brand-sidebar {
  background: linear-gradient(135deg, #071D14 0%, #08192D 100%) !important;
  border-right-color: #1D2E45 !important;
}

html.dark .auth-page-wrapper {
  background: #070D18 !important;
}

/* Form Inputs, Selects & Textareas */
html.dark input[type="text"],
html.dark input[type="password"],
html.dark input[type="email"],
html.dark input[type="number"],
html.dark input[type="search"],
html.dark input[type="tel"],
html.dark select,
html.dark textarea {
  background-color: #1B2942 !important;
  border-color: #263854 !important;
  color: #FFFFFF !important;
}

html.dark input::placeholder {
  color: #6C7D93 !important;
}

/* Green Mint Banners, Header Widgets & Badges */
html.dark [style*="background: var(--paystack-mint-bg)"],
html.dark [style*="background: #E6F8ED"],
html.dark [style*="background:#E6F8ED"] {
  background-color: #071D14 !important;
  border-color: #0F3D2A !important;
}

html.dark [style*="color: var(--paystack-navy)"],
html.dark [style*="color:#0A2540"] {
  color: #FFFFFF !important;
}

html.dark [style*="color: #1B5E20"],
html.dark [style*="color:#1B5E20"] {
  color: #3BB75E !important;
}

/* Buttons in Dark Mode */
html.dark .md-btn-outline {
  border-color: #263854 !important;
  color: #FFFFFF !important;
}

html.dark .md-btn-outline:hover {
  background-color: #1B2942 !important;
}

html.dark .theme-icon-toggle {
  background-color: #1B2942 !important;
  border-color: #263854 !important;
  color: #FFE259 !important;
}

/* Dark Mode Dedicated OTP Copy Button Overrides */
html.dark .otp-copy-btn,
html.dark [onclick*="copyToClipboard"],
html.dark [onclick*="copyCode"] {
  background-color: #1B2942 !important;
  color: #3BB75E !important;
  border-color: #0F3D2A !important;
}

html.dark .otp-copy-btn:hover,
html.dark [onclick*="copyToClipboard"]:hover,
html.dark [onclick*="copyCode"]:hover {
  background-color: #071D14 !important;
  border-color: #3BB75E !important;
}

/* OTP Code Box & Expired Card Dark Mode Overrides */
html.dark .otp-display-box {
  background-color: #071D14 !important;
  border-color: #3BB75E !important;
  color: #3BB75E !important;
}

html.dark .otp-box-refunded,
html.dark [style*="background: #FFEBEE"],
html.dark [style*="background:#FFEBEE"] {
  background-color: #2A0E12 !important;
  border-color: #5C1D24 !important;
  color: #FF7B7B !important;
}

html.dark [style*="background: #FFF8E1"],
html.dark [style*="background:#FFF8E1"] {
  background-color: #261D08 !important;
  border-color: #594212 !important;
  color: #FFB000 !important;
}

html.dark [style*="color: #C62828"],
html.dark [style*="color:#C62828"],
html.dark [style*="color: #FF3B30"],
html.dark [style*="color:#FF3B30"] {
  color: #FF7B7B !important;
}

/* Progressive Desktop Expansion Breakpoints */
@media (min-width: 768px) {
  .md-container {
    padding: 60px 24px;
  }
  .md-card {
    padding: 28px;
  }
  .paystack-check-grid {
    grid-template-columns: 1fr 1fr;
  }
}

@media (min-width: 992px) {
  .desktop-only-nav {
    display: flex !important;
  }
  .paystack-mobile-toggle {
    display: none !important;
  }
  .md-card {
    padding: 32px;
  }
}

/* ── Floating Paystack Cookie Consent Glass Card ── */
.cookie-consent-card {
  position: fixed;
  bottom: 24px;
  right: 24px;
  max-width: 400px;
  width: calc(100% - 32px);
  background: var(--md-sys-color-surface);
  border: 1.5px solid var(--paystack-card-border);
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 16px 40px rgba(10, 37, 64, 0.16);
  z-index: 9999;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.cookie-consent-card.hidden {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

html.dark .cookie-consent-card {
  background: rgba(15, 25, 44, 0.92);
  border-color: rgba(59, 183, 94, 0.3);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45);
}

.cookie-switch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--paystack-navy);
  padding: 6px 0;
}