/**
 * FC COINS QTR Theme
 * Qatar inspired - Maroon and white from Qatar flag
 */

:root {
  /* FC COINS QTR Color Palette - Qatar inspired */
  --fccoinsqtr-black: #000000;
  --fccoinsqtr-near-black: #0a0a0a;
  --fccoinsqtr-dark-grey: #1a1a1a;
  --fccoinsqtr-mid-grey: #2a2a2a;
  --fccoinsqtr-light-grey: #3a3a3a;
  --fccoinsqtr-border-grey: #2d2d2d;
  --fccoinsqtr-text-white: #ffffff;
  --fccoinsqtr-text-grey: #cccccc;
  --fccoinsqtr-text-muted: #999999;
  --fccoinsqtr-maroon: #8D1B3D; /* Qatar flag maroon */
  --fccoinsqtr-maroon-bright: #A62349; /* Brighter maroon for hover */
  --fccoinsqtr-maroon-dark: #6F1531; /* Darker maroon for accents */
  --fccoinsqtr-accent: #ffffff; /* Pure white accent */
  --fccoinsqtr-success: #A62349; /* Success maroon matching brand */
  --fccoinsqtr-error: #ff4444;

  /* TOTY Theme Colors */
  --toty-navy: #1E3A8A;
  --toty-gold: #FFD700;
  --toty-blue: #3B5FCF;

  /* Flash Sale Theme Colors */
  --flash-orange: #FF6B35;
  --flash-red: #DC2626;
  --flash-yellow: #FFD700;
  --flash-dark: #1A1A1A;

  /* Chinese New Year Theme Colors - Subtle & Elegant */
  --cny-crimson: #C41E3A; /* Deep crimson red */
  --cny-gold: #D4AF37; /* Antique gold */
  --cny-red: #DC143C; /* Imperial red */
  --cny-gold-bright: #FFD700; /* Bright gold for accents */
  --cny-dark-red: #8B0000; /* Dark red for depth */
  --cny-pearl: #F5F5DC; /* Pearl white/beige */
}

/* Background Images - Desktop (Christmas) */
@media (min-width: 769px) {
  body {
    background-image: url('assets/qtr-fc27-hero.jpg');
    background-size: cover;
    background-position: center top;
    background-attachment: fixed;
    background-repeat: no-repeat;
  }
}

/* Background Images - Mobile (FCUTSBGM) */
@media (max-width: 768px) {
  body {
    background-image: url('assets/qtr-fc27-hero.jpg');
    background-size: cover;
    background-position: 58% top;
    background-attachment: scroll;
    background-repeat: no-repeat;
  }
}

/* Override main theme colors for FC COINS QTR - DARK THEME (default) */
body:not([data-theme="light"]) {
  --bg: rgba(10, 10, 10, 0.85); /* Semi-transparent to show background */
  --card: var(--fccoinsqtr-dark-grey);
  --card-bg: var(--fccoinsqtr-dark-grey);
  --text-primary: var(--fccoinsqtr-text-white);
  --text-secondary: var(--fccoinsqtr-text-grey);
  --border-color: var(--fccoinsqtr-border-grey);
  --primary: var(--fccoinsqtr-maroon);
  --primary-600: var(--fccoinsqtr-maroon-dark);
  --primary-color: var(--fccoinsqtr-maroon);
  --success-color: var(--fccoinsqtr-success);
  --error-color: var(--fccoinsqtr-error);
  --text: var(--fccoinsqtr-text-white);
  --muted: var(--fccoinsqtr-text-muted);
  --border: var(--fccoinsqtr-border-grey);
  --accent: var(--fccoinsqtr-accent);
}

/* LIGHT THEME for FC COINS QTR */
[data-theme="light"] {
  --bg: #ffffff;
  --card: #f8fafc;
  --card-bg: #ffffff;
  --text-primary: #0f172a;
  --text-secondary: #475569;
  --border-color: #e2e8f0;
  --primary: #3b82f6;
  --primary-600: #2563eb;
  --primary-color: #3b82f6;
  --success-color: #22c55e;
  --error-color: #ff4444;
  --text: #0f172a;
  --muted: #64748b;
  --border: #e2e8f0;
  --accent: #3b82f6;
  --fccoinsqtr-success: #22c55e;
}

/* Header - responsive to theme */
body:not([data-theme="light"]) .site-header {
  background: var(--fccoinsqtr-dark-grey) !important;
}

[data-theme="light"] .site-header {
  background: #ffffff !important;
  border-bottom: 1px solid #e2e8f0;
}

/* Modal backgrounds - Dark theme */
body:not([data-theme="light"]) .modal-content,
body:not([data-theme="light"]) .customer-dashboard,
body:not([data-theme="light"]) #account-modal .modal-content,
body:not([data-theme="light"]) #contact-modal .modal-content,
body:not([data-theme="light"]) #faq-modal .modal-content,
body:not([data-theme="light"]) #cashback-modal .modal-content {
  background: var(--fccoinsqtr-dark-grey) !important;
  border: 1px solid var(--fccoinsqtr-border-grey);
  color: var(--fccoinsqtr-text-white);
}

/* Modal backgrounds - Light theme */
[data-theme="light"] .modal-content,
[data-theme="light"] .customer-dashboard,
[data-theme="light"] #account-modal .modal-content,
[data-theme="light"] #contact-modal .modal-content,
[data-theme="light"] #faq-modal .modal-content,
[data-theme="light"] #cashback-modal .modal-content {
  background: #ffffff !important;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

/* Modal titles - Dark theme */
body:not([data-theme="light"]) .modal-title,
body:not([data-theme="light"]) h2,
body:not([data-theme="light"]) h3 {
  color: var(--fccoinsqtr-text-white) !important;
}

/* Modal titles - Light theme */
[data-theme="light"] .modal-title,
[data-theme="light"] h2,
[data-theme="light"] h3 {
  color: #0f172a !important;
}

/* Buttons - Dark theme */
body:not([data-theme="light"]) .btn-primary {
  background: var(--fccoinsqtr-maroon);
  color: var(--fccoinsqtr-text-white);
  border: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

body:not([data-theme="light"]) .btn-primary:hover {
  background: var(--fccoinsqtr-maroon-bright);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(141, 27, 61, 0.3);
}

body:not([data-theme="light"]) .btn-secondary {
  background: var(--fccoinsqtr-mid-grey);
  color: var(--fccoinsqtr-text-white);
  border: 1px solid var(--fccoinsqtr-border-grey);
}

body:not([data-theme="light"]) .btn-secondary:hover {
  background: var(--fccoinsqtr-light-grey);
  border-color: var(--fccoinsqtr-light-grey);
}

/* Buttons - Light theme */
[data-theme="light"] .btn-primary {
  background: var(--fccoinsqtr-maroon);
  color: var(--fccoinsqtr-text-white);
  border: none;
  font-weight: 600;
  transition: all 0.2s ease;
}

[data-theme="light"] .btn-primary:hover {
  background: var(--fccoinsqtr-maroon-bright);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(141, 27, 61, 0.3);
}

[data-theme="light"] .btn-secondary {
  background: #f8fafc;
  color: #0f172a;
  border: 1px solid #e2e8f0;
}

[data-theme="light"] .btn-secondary:hover {
  background: #e2e8f0;
  border-color: #cbd5e1;
}

/* Form inputs - Dark theme */
body:not([data-theme="light"]) input[type="text"],
body:not([data-theme="light"]) input[type="email"],
body:not([data-theme="light"]) input[type="password"],
body:not([data-theme="light"]) input[type="tel"],
body:not([data-theme="light"]) textarea,
body:not([data-theme="light"]) select {
  background: var(--fccoinsqtr-mid-grey) !important;
  border: 1px solid var(--fccoinsqtr-border-grey) !important;
  color: var(--fccoinsqtr-text-white) !important;
}

body:not([data-theme="light"]) input[type="text"]:focus,
body:not([data-theme="light"]) input[type="email"]:focus,
body:not([data-theme="light"]) input[type="password"]:focus,
body:not([data-theme="light"]) input[type="tel"]:focus,
body:not([data-theme="light"]) textarea:focus,
body:not([data-theme="light"]) select:focus {
  border-color: var(--fccoinsqtr-light-grey) !important;
  background: var(--fccoinsqtr-light-grey) !important;
  outline: none;
}

body:not([data-theme="light"]) input::placeholder,
body:not([data-theme="light"]) textarea::placeholder {
  color: var(--fccoinsqtr-text-muted) !important;
}

/* EXCEPTION: Chat input needs to be visible - override dark theme for chat widget */
body:not([data-theme="light"]) .chat-widget #chat-input,
body:not([data-theme="light"]) .chat-widget .chat-input-area input {
  background: #121722 !important;
  color: #e6ecf2 !important;
  -webkit-text-fill-color: #e6ecf2 !important;
  border-color: var(--fccoinsqtr-border-grey) !important;
}

/* TOTY THEME FOR CHAT - ULTRA HIGH SPECIFICITY - Only when theme enabled */
/* Customer messages - TOTY blue bubble with white text */
body.toty-theme-enabled #chat-widget #chat-panel #chat-messages .chat-message.customer-message .message-content,
body.toty-theme-enabled #chat-widget #chat-messages .chat-message.customer-message .message-content,
body.toty-theme-enabled #chat-panel #chat-messages .chat-message.customer-message .message-content,
body.toty-theme-enabled #chat-widget #chat-panel #chat-messages .chat-message.customer-message .message-content,
body.toty-theme-enabled #chat-widget #chat-messages .chat-message.customer-message .message-content,
body.toty-theme-enabled #chat-panel #chat-messages .chat-message.customer-message .message-content,
body.toty-theme-enabled #chat-messages .chat-message.customer-message .message-content,
body.toty-theme-enabled .chat-panel .chat-message.customer-message .message-content,
body.toty-theme-enabled .chat-widget .chat-message.customer-message .message-content,
body.toty-theme-enabled div.chat-message.customer-message div.message-content,
body.toty-theme-enabled .chat-message.customer-message .message-content {
  background: #3B5FCF !important; /* TOTY blue */
  background-color: #3B5FCF !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 500 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  box-shadow: 0 2px 8px rgba(59, 95, 207, 0.3) !important;
}

/* Admin messages - TOTY navy */
body.toty-theme-enabled #chat-widget #chat-panel #chat-messages .chat-message.admin-message .message-content,
body.toty-theme-enabled #chat-widget #chat-messages .chat-message.admin-message .message-content,
body.toty-theme-enabled #chat-panel #chat-messages .chat-message.admin-message .message-content,
body.toty-theme-enabled #chat-widget #chat-panel #chat-messages .chat-message.admin-message .message-content,
body.toty-theme-enabled #chat-widget #chat-messages .chat-message.admin-message .message-content,
body.toty-theme-enabled #chat-panel #chat-messages .chat-message.admin-message .message-content,
body.toty-theme-enabled #chat-messages .chat-message.admin-message .message-content,
body.toty-theme-enabled .chat-panel .chat-message.admin-message .message-content,
body.toty-theme-enabled .chat-widget .chat-message.admin-message .message-content,
body.toty-theme-enabled div.chat-message.admin-message div.message-content,
body.toty-theme-enabled .chat-message.admin-message .message-content {
  background: #1E3A8A !important; /* TOTY navy */
  background-color: #1E3A8A !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
  font-weight: 500 !important;
  border-radius: 12px !important;
  padding: 12px 16px !important;
  box-shadow: 0 2px 8px rgba(30, 58, 138, 0.3) !important;
}

/* Safety net: ensure customer bubble stays TOTY blue even if other styles load after */
body.toty-theme-enabled .chat-messages .customer-message .message-content,
body.toty-theme-enabled[data-theme="dark"] .chat-messages .customer-message .message-content {
  background: #3B5FCF !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Bot message override */
body.toty-theme-enabled #chat-messages .chat-message.bot-message .message-content,
body.toty-theme-enabled .chat-message.bot-message .message-content {
  background: #1E3A8A !important; /* TOTY navy */
  background-color: #1E3A8A !important;
  color: #ffffff !important;
  -webkit-text-fill-color: #ffffff !important;
}

/* Chat header - TOTY styling */
body.toty-theme-enabled .chat-header {
  background: linear-gradient(135deg, #1E3A8A 0%, #3B5FCF 100%) !important;
  color: #ffffff !important;
}

body.toty-theme-enabled .chat-header h3 {
  color: #ffffff !important;
}

/* Chat send button - TOTY blue */
body.toty-theme-enabled #chat-widget .chat-send-btn,
body.toty-theme-enabled .chat-widget .chat-send-btn,
body.toty-theme-enabled .chat-panel .chat-send-btn,
body.toty-theme-enabled #chat-panel .chat-send-btn,
body.toty-theme-enabled button.chat-send-btn {
  background: #3B5FCF !important;
  background-color: #3B5FCF !important;
  color: #ffffff !important;
}

body.toty-theme-enabled #chat-widget .chat-send-btn:hover,
body.toty-theme-enabled .chat-widget .chat-send-btn:hover,
body.toty-theme-enabled .chat-panel .chat-send-btn:hover,
body.toty-theme-enabled #chat-panel .chat-send-btn:hover,
body.toty-theme-enabled button.chat-send-btn:hover {
  background: #2d4db5 !important;
  background-color: #2d4db5 !important;
  opacity: 1 !important;
}

/* Form inputs - Light theme */
[data-theme="light"] input[type="text"],
[data-theme="light"] input[type="email"],
[data-theme="light"] input[type="password"],
[data-theme="light"] input[type="tel"],
[data-theme="light"] textarea,
[data-theme="light"] select {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  color: #0f172a !important;
}

[data-theme="light"] input[type="text"]:focus,
[data-theme="light"] input[type="email"]:focus,
[data-theme="light"] input[type="password"]:focus,
[data-theme="light"] input[type="tel"]:focus,
[data-theme="light"] textarea:focus,
[data-theme="light"] select:focus {
  border-color: #3b82f6 !important;
  background: #ffffff !important;
  outline: none;
  box-shadow: 0 0 0 3px rgba(0, 255, 136, 0.1) !important;
}

[data-theme="light"] input::placeholder,
[data-theme="light"] textarea::placeholder {
  color: #94a3b8 !important;
}

/* Cards and containers */
.platform-card {
  background: transparent !important;
  border: none !important;
}

.platform-card:hover {
  border: none !important;
  background: transparent !important;
}

/* Cards - Dark theme */
body:not([data-theme="light"]) .stat-card,
body:not([data-theme="light"]) .order-card {
  background: var(--fccoinsqtr-dark-grey) !important;
  border: 1px solid var(--fccoinsqtr-border-grey) !important;
}

/* Cards - Light theme */
[data-theme="light"] .stat-card,
[data-theme="light"] .order-card {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
}

/* Footer - Dark theme */
body:not([data-theme="light"]) .site-footer {
  background: var(--fccoinsqtr-black) !important;
  border-top: 1px solid var(--fccoinsqtr-border-grey);
  color: var(--fccoinsqtr-text-grey);
}

/* Footer - Light theme */
[data-theme="light"] .site-footer {
  background: #f8fafc !important;
  border-top: 1px solid #e2e8f0;
  color: #475569;
}

.footer-logo {
  text-align: center;
  padding: 20px 0 15px;
}

.fcutstore-logo {
  height: 40px;
  width: auto;
  opacity: 0.9;
}

/* Smallprint - Dark theme */
body:not([data-theme="light"]) .smallprint {
  color: var(--fccoinsqtr-text-muted);
}

/* Smallprint - Light theme */
[data-theme="light"] .smallprint {
  color: #64748b;
}

/* Language Dropdown */
.lang-dropdown, .currency-dropdown {
  position: relative;
  display: inline-block;
}

#lang-toggle, #currency-toggle {
  cursor: pointer;
}

/* Lang/Currency Menu - Dark theme */
body:not([data-theme="light"]) .lang-menu,
body:not([data-theme="light"]) .currency-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--fccoinsqtr-dark-grey);
  border: 1px solid var(--fccoinsqtr-border-grey);
  border-radius: 8px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  min-width: 180px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Lang/Currency Menu - Light theme */
[data-theme="light"] .lang-menu,
[data-theme="light"] .currency-menu {
  display: none;
  position: absolute;
  top: 100%;
  right: 0;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  min-width: 180px;
  z-index: 1000;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.lang-menu.active, .currency-menu.active {
  display: block;
}

/* Lang/Currency Options - Dark theme */
body:not([data-theme="light"]) .lang-option,
body:not([data-theme="light"]) .currency-option {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: var(--fccoinsqtr-text-white);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 0.95rem;
}

body:not([data-theme="light"]) .lang-option:hover,
body:not([data-theme="light"]) .currency-option:hover {
  background: var(--fccoinsqtr-mid-grey);
}

/* Lang/Currency Options - Light theme */
[data-theme="light"] .lang-option,
[data-theme="light"] .currency-option {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 0.95rem;
}

[data-theme="light"] .lang-option:hover,
[data-theme="light"] .currency-option:hover {
  background: #f8fafc;
}

/* Mobile language dropdown */
.lang-dropdown-mobile {
  position: relative;
}

/* Mobile language dropdown - Dark theme */
body:not([data-theme="light"]) .lang-menu-mobile {
  display: none;
  background: var(--fccoinsqtr-mid-grey);
  border-radius: 8px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

/* Mobile language dropdown - Light theme */
[data-theme="light"] .lang-menu-mobile {
  display: none;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
}

.lang-menu-mobile.active {
  display: block;
}

/* Mobile language options - Dark theme */
body:not([data-theme="light"]) .lang-option-mobile {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: var(--fccoinsqtr-text-white);
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 0.95rem;
}

body:not([data-theme="light"]) .lang-option-mobile:hover {
  background: var(--fccoinsqtr-light-grey);
}

/* Mobile language options - Light theme */
[data-theme="light"] .lang-option-mobile {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: transparent;
  border: none;
  color: #0f172a;
  text-align: left;
  cursor: pointer;
  transition: background 0.2s ease;
  font-size: 0.95rem;
}

[data-theme="light"] .lang-option-mobile:hover {
  background: #e2e8f0;
}

/* Footer Trust Signals */
.footer-trust-signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 2rem;
  padding: 3rem 2rem 2rem;
  border-bottom: 1px solid var(--fccoinsqtr-border-grey);
  max-width: 1000px;
  margin: 0 auto;
}

.footer-trust-signals .trust-item {
  text-align: center;
  padding: 0.5rem;
}

.footer-trust-signals .trustpilot-badge .trust-stars {
  color: #00b67a;
  font-size: 1.8rem;
  margin-bottom: 0.5rem;
  letter-spacing: 3px;
}

/* Footer Trust Signals - Dark theme */
body:not([data-theme="light"]) .footer-trust-signals .trust-rating {
  color: var(--fccoinsqtr-text-white);
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

body:not([data-theme="light"]) .footer-trust-signals .trust-number {
  color: var(--fccoinsqtr-text-white);
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

body:not([data-theme="light"]) .footer-trust-signals .trust-label {
  color: var(--fccoinsqtr-text-grey);
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

/* Footer Trust Signals - Light theme */
[data-theme="light"] .footer-trust-signals .trust-rating {
  color: #0f172a;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.25rem;
}

[data-theme="light"] .footer-trust-signals .trust-number {
  color: #0f172a;
  font-size: 1.8rem;
  font-weight: 800;
  margin-bottom: 0.5rem;
}

[data-theme="light"] .footer-trust-signals .trust-label {
  color: #64748b;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 1px;
}

@media (max-width: 768px) {
  .footer-trust-signals {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    padding: 2rem 1rem 1.5rem;
  }

  .footer-trust-signals .trust-number {
    font-size: 1.5rem;
  }
}

/* Payment method icons container */
.payment-methods {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  align-items: center;
  padding: 2rem 0 1.5rem;
  margin-bottom: 1rem;
}

.payment-icon-svg {
  display: block;
  filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.5));
}

@media (max-width: 768px) {
  .payment-methods {
    gap: 1rem;
    padding: 1.5rem 1rem;
  }

  .payment-icon-svg {
    width: 60px !important;
    height: 36px !important;
  }
}

/* Trust Signals Section - Dark theme */
body:not([data-theme="light"]) .trust-signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 2rem;
  background: var(--fccoinsqtr-dark-grey);
  border: 1px solid var(--fccoinsqtr-border-grey);
  border-radius: 12px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* Trust Signals Section - Light theme */
[data-theme="light"] .trust-signals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1.5rem;
  margin-top: 2.5rem;
  padding: 2rem;
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 12px;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

.trust-item {
  text-align: center;
  padding: 0.5rem;
}

.trustpilot-badge .trust-stars {
  color: #00b67a;
  font-size: 1.5rem;
  margin-bottom: 0.5rem;
  letter-spacing: 2px;
}

/* Trust ratings/numbers/labels - Dark theme */
body:not([data-theme="light"]) .trust-rating {
  color: var(--fccoinsqtr-text-white);
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

body:not([data-theme="light"]) .trust-number {
  color: var(--fccoinsqtr-text-white);
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

body:not([data-theme="light"]) .trust-label {
  color: var(--fccoinsqtr-text-grey);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Trust ratings/numbers/labels - Light theme */
[data-theme="light"] .trust-rating {
  color: #0f172a;
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 0.25rem;
}

[data-theme="light"] .trust-number {
  color: #0f172a;
  font-size: 1.5rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

[data-theme="light"] .trust-label {
  color: #64748b;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

@media (max-width: 768px) {
  .trust-signals {
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    padding: 1.5rem 1rem;
  }

  .trust-number {
    font-size: 1.25rem;
  }
}

/* Delivery Badge on Platform Cards */
.delivery-badge {
  position: absolute;
  top: 12px;
  right: 12px;
  background: var(--fccoinsqtr-success);
  color: var(--fccoinsqtr-black);
  padding: 0.4rem 0.8rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 700;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0, 255, 136, 0.4);
}

/* Quantity Preset Buttons */
.quantity-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.preset-btn {
  background: var(--fccoinsqtr-mid-grey);
  color: var(--fccoinsqtr-text-white);
  border: 2px solid var(--fccoinsqtr-border-grey);
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.2s ease;
  min-width: 90px;
}

.preset-btn:hover {
  background: var(--fccoinsqtr-light-grey);
  border-color: var(--fccoinsqtr-text-white);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
}

.preset-btn.active {
  background: var(--fccoinsqtr-text-white);
  color: var(--fccoinsqtr-black);
  border-color: var(--fccoinsqtr-text-white);
}

@media (max-width: 768px) {
  .quantity-presets {
    gap: 0.5rem;
  }

  .preset-btn {
    padding: 0.6rem 1.2rem;
    font-size: 0.9rem;
    min-width: 75px;
  }
}

/* Status badges */
.status-badge {
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 4px;
}

.status-badge.active,
.status-badge.shipped,
.status-badge.completed {
  background: rgba(0, 255, 136, 0.15);
  color: var(--fccoinsqtr-success);
  border: 1px solid var(--fccoinsqtr-success);
}

.status-badge.pending,
.status-badge.processing {
  background: rgba(255, 255, 255, 0.1);
  color: var(--fccoinsqtr-text-white);
  border: 1px solid var(--fccoinsqtr-border-grey);
}

/* Tabs - Dark theme */
body:not([data-theme="light"]) .tab {
  background: rgba(0, 0, 0, 0.2);
  color: var(--fccoinsqtr-text-grey);
  border: 2px solid rgba(255, 255, 255, 0.3);
}

body:not([data-theme="light"]) .tab.is-active {
  color: #ffffff !important;
  background: var(--fccoinsqtr-maroon) !important;
  border-color: var(--fccoinsqtr-maroon) !important;
}

body:not([data-theme="light"]) .tab:hover {
  color: var(--fccoinsqtr-text-white);
  background: rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
}

/* Tabs - Light theme */
[data-theme="light"] .tab {
  background: #f1f5f9;
  color: #64748b;
  border: 2px solid #cbd5e1;
}

[data-theme="light"] .tab.is-active {
  color: #ffffff !important;
  background: var(--fccoinsqtr-maroon) !important;
  border-color: var(--fccoinsqtr-maroon) !important;
}

[data-theme="light"] .tab:hover {
  color: #0f172a;
  background: #e2e8f0;
  border-color: #94a3b8;
}

/* Stats cards - Dark theme */
body:not([data-theme="light"]) .stat-value {
  color: var(--fccoinsqtr-text-white);
  font-weight: 700;
}

body:not([data-theme="light"]) .stat-label {
  color: var(--fccoinsqtr-text-grey);
}

/* Stats cards - Light theme */
[data-theme="light"] .stat-value {
  color: #0f172a;
  font-weight: 700;
}

[data-theme="light"] .stat-label {
  color: #64748b;
}

/* Links - Dark theme */
body:not([data-theme="light"]) a {
  color: var(--fccoinsqtr-text-white);
}

body:not([data-theme="light"]) a:hover {
  color: var(--fccoinsqtr-text-grey);
}

/* Links - Light theme */
[data-theme="light"] a {
  color: #0f172a;
}

[data-theme="light"] a:hover {
  color: #3b82f6;
}

/* Cashback section - Dark theme */
body:not([data-theme="light"]) #cashback-modal .modal-content {
  background: var(--fccoinsqtr-dark-grey) !important;
}

body:not([data-theme="light"]) .cashback-balance {
  background: var(--fccoinsqtr-mid-grey);
  border: 1px solid var(--fccoinsqtr-border-grey);
}

/* Cashback section - Light theme */
[data-theme="light"] #cashback-modal .modal-content {
  background: #ffffff !important;
}

[data-theme="light"] .cashback-balance {
  background: #f8fafc;
  border: 1px solid #e2e8f0;
}

/* FAQ items - Dark theme */
body:not([data-theme="light"]) .faq-item {
  background: var(--fccoinsqtr-mid-grey);
  border: 1px solid var(--fccoinsqtr-border-grey);
  margin-bottom: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
}

body:not([data-theme="light"]) .faq-item h3 {
  color: var(--fccoinsqtr-text-white);
  margin-bottom: 0.35rem;
}

body:not([data-theme="light"]) .faq-item p {
  color: var(--fccoinsqtr-text-grey);
  margin: 0;
}

/* FAQ items - Light theme */
[data-theme="light"] .faq-item {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  margin-bottom: 0.5rem;
  padding: 0.75rem 0.9rem;
  border-radius: 8px;
}

[data-theme="light"] .faq-item h3 {
  color: #0f172a;
  margin-bottom: 0.35rem;
}

[data-theme="light"] .faq-item p {
  color: #475569;
  margin: 0;
}

/* FC COINS QTR FAQ modal specific tweaks – match compact FAQ on EAFC Coin Store */
#faq-modal .modal-content {
  padding: 12px 14px;
}

#faq-modal .faq-list {
  gap: 6px;
}

#faq-modal .faq-item {
  margin-bottom: 4px;
  padding: 8px 10px;
}

#faq-modal .faq-item h3 {
  font-size: 13px;
}

#faq-modal .faq-item p {
  font-size: 12px;
  line-height: 1.3;
}

/* Contact form */
#contact-modal textarea {
  min-height: 120px;
}

/* Success/Error states */
.success {
  color: var(--fccoinsqtr-success);
}

.error {
  color: var(--fccoinsqtr-error);
}

/* Table styling - Dark theme */
body:not([data-theme="light"]) table {
  background: var(--fccoinsqtr-dark-grey);
  color: var(--fccoinsqtr-text-white);
}

body:not([data-theme="light"]) th {
  background: var(--fccoinsqtr-mid-grey);
  color: var(--fccoinsqtr-text-white);
  border-bottom: 2px solid var(--fccoinsqtr-border-grey);
}

body:not([data-theme="light"]) td {
  border-bottom: 1px solid var(--fccoinsqtr-border-grey);
  color: var(--fccoinsqtr-text-grey);
}

body:not([data-theme="light"]) tr:hover {
  background: var(--fccoinsqtr-mid-grey);
}

/* Table styling - Light theme */
[data-theme="light"] table {
  background: #ffffff;
  color: #0f172a;
}

[data-theme="light"] th {
  background: #f8fafc;
  color: #0f172a;
  border-bottom: 2px solid #e2e8f0;
}

[data-theme="light"] td {
  border-bottom: 1px solid #e2e8f0;
  color: #475569;
}

[data-theme="light"] tr:hover {
  background: #f8fafc;
}

/* Scrollbar styling - Dark theme */
body:not([data-theme="light"]) ::-webkit-scrollbar {
  width: 12px;
  background: var(--fccoinsqtr-near-black);
}

body:not([data-theme="light"]) ::-webkit-scrollbar-track {
  background: var(--fccoinsqtr-near-black);
}

body:not([data-theme="light"]) ::-webkit-scrollbar-thumb {
  background: var(--fccoinsqtr-light-grey);
  border-radius: 6px;
}

body:not([data-theme="light"]) ::-webkit-scrollbar-thumb:hover {
  background: var(--fccoinsqtr-text-grey);
}

/* Scrollbar styling - Light theme */
[data-theme="light"] ::-webkit-scrollbar {
  width: 12px;
  background: #f8fafc;
}

[data-theme="light"] ::-webkit-scrollbar-track {
  background: #f8fafc;
}

[data-theme="light"] ::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 6px;
}

[data-theme="light"] ::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* Override all blue elements to white/grey for FC COINS QTR */
input[type="range"]::-webkit-slider-thumb {
  background: var(--fccoinsqtr-text-white) !important;
}

input[type="range"]::-moz-range-thumb {
  background: var(--fccoinsqtr-text-white) !important;
}

input[type="range"]::-webkit-slider-runnable-track {
  background: linear-gradient(to right, var(--fccoinsqtr-text-white) 0%, var(--fccoinsqtr-text-white) var(--range-progress, 50%), var(--fccoinsqtr-mid-grey) var(--range-progress, 50%), var(--fccoinsqtr-mid-grey) 100%) !important;
}

.toggle-switch input:checked + .toggle-slider {
  background-color: var(--fccoinsqtr-text-white) !important;
}

/* Override focus states from blue to white */
input:focus,
textarea:focus,
select:focus,
button:focus {
  border-color: var(--fccoinsqtr-light-grey) !important;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.1) !important;
}

/* Key Features Section - Dark theme */
body:not([data-theme="light"]) .key-features-section {
  padding: 30px 20px;
  background: var(--fccoinsqtr-near-black);
  border-top: 1px solid var(--fccoinsqtr-border-grey);
  border-bottom: 1px solid var(--fccoinsqtr-border-grey);
}

/* Key Features Section - Light theme */
[data-theme="light"] .key-features-section {
  padding: 30px 20px;
  background: #f8fafc;
  border-top: 1px solid #e2e8f0;
  border-bottom: 1px solid #e2e8f0;
}

.key-features-container {
  max-width: 1000px;
  margin: 0 auto;
}

/* Features heading - Dark theme */
body:not([data-theme="light"]) .features-heading {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: var(--fccoinsqtr-text-white);
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
}

/* Features heading - Light theme */
[data-theme="light"] .features-heading {
  text-align: center;
  font-size: 24px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 20px 0;
  letter-spacing: -0.5px;
}

.features-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.feature-box {
  background: transparent;
  border: none;
  padding: 8px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.feature-icon {
  font-size: 28px;
  line-height: 1;
  display: inline-block;
  background: transparent;
  text-shadow: none;
  filter: none;
}

/* Feature box h3 - Dark theme */
body:not([data-theme="light"]) .feature-box h3 {
  font-size: 14px;
  font-weight: 600;
  color: var(--fccoinsqtr-text-white);
  margin: 0;
  line-height: 1.2;
  display: inline-block;
}

/* Feature box h3 - Light theme */
[data-theme="light"] .feature-box h3 {
  font-size: 14px;
  font-weight: 600;
  color: #0f172a;
  margin: 0;
  line-height: 1.2;
  display: inline-block;
}

.feature-box p {
  display: none;
}

/* Platform icon in quantity section */
.platform-icon-small {
  height: 24px;
  width: auto;
  vertical-align: middle;
  margin-right: 8px;
  display: inline-block !important;
}

/* Responsive */
@media (max-width: 968px) {
  .features-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .key-features-section {
    padding: 20px 16px;
  }

  .features-heading {
    font-size: 20px;
    margin-bottom: 16px;
  }

  .features-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
  }

  .feature-box {
    padding: 8px;
  }

  .feature-icon {
    font-size: 28px;
  }

  .feature-box h3 {
    font-size: 12px;
  }
}

/* ========================================
   TOTY PROMO BADGE
   ======================================== */

.toty-promo-badge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  animation: toty-badge-pulse 2s ease-in-out infinite;
}

.toty-badge-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--toty-navy) 0%, var(--toty-blue) 100%);
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(30, 58, 138, 0.4);
  border: 2px solid var(--toty-gold);
  cursor: pointer;
  transition: all 0.3s ease;
}

.toty-badge-content:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(30, 58, 138, 0.6), 0 0 20px rgba(255, 215, 0, 0.3);
}

.toty-badge-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
  animation: toty-trophy-spin 3s ease-in-out infinite;
}

.toty-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.toty-badge-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--toty-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.toty-badge-discount {
  font-size: 20px;
  font-weight: 800;
  color: var(--fccoinsqtr-text-white);
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
}

.toty-badge-code {
  font-size: 11px;
  color: var(--toty-gold);
  font-weight: 600;
  font-family: monospace;
  letter-spacing: 0.5px;
}

.toty-badge-ends {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.8);
  font-weight: 500;
}

@keyframes toty-badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.05);
  }
}

@keyframes toty-trophy-spin {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-10deg);
  }
  75% {
    transform: rotate(10deg);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .toty-promo-badge {
    bottom: 10px;
    left: 10px;
  }

  .toty-badge-content {
    padding: 12px 16px;
    gap: 10px;
  }

  .toty-badge-icon {
    font-size: 28px;
  }

  .toty-badge-title {
    font-size: 12px;
  }

  .toty-badge-discount {
    font-size: 18px;
  }

  .toty-badge-code {
    font-size: 10px;
  }

  .toty-badge-ends {
    font-size: 9px;
  }
}

/* Hide TOTY elements when theme is disabled */
body:not(.toty-theme-enabled) .toty-promo-badge {
  display: none !important;
}

/* TOTY Apply Coupon Button - Only when theme is enabled */
body.toty-theme-enabled #apply-coupon {
  background: linear-gradient(135deg, var(--toty-navy) 0%, var(--toty-blue) 100%) !important;
  border: 2px solid var(--toty-gold) !important;
  color: var(--fccoinsqtr-text-white) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(30, 58, 138, 0.3);
  transition: all 0.3s ease !important;
}

body.toty-theme-enabled #apply-coupon:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(30, 58, 138, 0.5), 0 0 12px rgba(255, 215, 0, 0.2) !important;
  border-color: var(--toty-gold) !important;
}

/* Temporarily hide Sell Coins (feature not ready yet) */
body #sell-coins-btn,
body #sell-coins-btn-mobile {
  display: none !important;
}

/* ========================================
   FLASH SALE PROMO BADGE
   ======================================== */

.flash-sale-promo-badge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  animation: flash-badge-pulse 1.5s ease-in-out infinite;
}

.flash-badge-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--fccoinsqtr-maroon-dark) 0%, var(--fccoinsqtr-maroon-bright) 100%);
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(111, 21, 49, 0.42), 0 0 20px rgba(255, 255, 255, 0.12);
  border: 2px solid var(--fccoinsqtr-accent);
  cursor: pointer;
  transition: all 0.3s ease;
}

.flash-badge-content:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(111, 21, 49, 0.52), 0 0 26px rgba(255, 255, 255, 0.18);
  border-color: var(--fccoinsqtr-accent);
}

.flash-badge-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  animation: flash-bolt-spin 2s ease-in-out infinite;
}

.flash-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.flash-badge-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--fccoinsqtr-accent);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
  animation: flash-text-shimmer 2s ease-in-out infinite;
}

.flash-badge-discount {
  font-size: 20px;
  font-weight: 800;
  color: var(--fccoinsqtr-text-white);
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.flash-badge-code {
  font-size: 11px;
  color: var(--fccoinsqtr-accent);
  font-weight: 600;
  font-family: monospace;
  letter-spacing: 0.5px;
}

.flash-badge-ends {
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  font-weight: 500;
}

@keyframes flash-badge-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.08);
  }
}

@keyframes flash-bolt-spin {
  0%, 100% {
    transform: rotate(0deg) scale(1);
  }
  25% {
    transform: rotate(-15deg) scale(1.1);
  }
  50% {
    transform: rotate(0deg) scale(1.2);
  }
  75% {
    transform: rotate(15deg) scale(1.1);
  }
}

@keyframes flash-text-shimmer {
  0%, 100% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 8px rgba(255, 255, 255, 0.2);
  }
  50% {
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 0 15px rgba(255, 255, 255, 0.34);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .flash-sale-promo-badge {
    bottom: 10px;
    left: 10px;
  }

  .flash-badge-content {
    padding: 12px 16px;
    gap: 10px;
  }

  .flash-badge-icon {
    font-size: 28px;
  }

  .flash-badge-title {
    font-size: 12px;
  }

  .flash-badge-discount {
    font-size: 18px;
  }

  .flash-badge-code {
    font-size: 10px;
  }

  .flash-badge-ends {
    font-size: 9px;
  }
}

/* Hide Flash Sale elements when theme is disabled */
body:not(.flash-sale-theme-enabled) .flash-sale-promo-badge {
  display: none !important;
}

body.summer-sale-theme-enabled .flash-sale-promo-badge {
  display: block !important;
}

body.summer-sale-theme-enabled .flash-badge-content {
  background:
    radial-gradient(circle at top left, rgba(255, 232, 166, 0.45), rgba(255, 232, 166, 0) 32%),
    linear-gradient(135deg, #ff934f 0%, #ff7a45 44%, #ff5f6d 100%);
  border: 1px solid rgba(255, 235, 188, 0.68);
  box-shadow: 0 12px 30px rgba(89, 33, 13, 0.3), 0 0 24px rgba(255, 179, 71, 0.24);
}

body.summer-sale-theme-enabled .flash-badge-content:hover {
  border-color: rgba(255, 235, 188, 0.86);
  box-shadow: 0 18px 36px rgba(89, 33, 13, 0.4), 0 0 28px rgba(255, 179, 71, 0.34);
}

body.summer-sale-theme-enabled .flash-badge-icon {
  font-size: 0;
  width: 52px;
  height: 52px;
  background: transparent;
  box-shadow: none;
  filter: none;
  animation: none;
}

body.summer-sale-theme-enabled .flash-badge-title {
  color: #fff5df;
  animation: none;
}

body.summer-sale-theme-enabled .flash-badge-code {
  color: #fff2b2;
}

body.summer-sale-theme-enabled .flash-badge-ends {
  color: rgba(255, 248, 231, 0.92);
}

body.summer-sale-theme-enabled .summer-sun-icon {
  position: relative;
  display: inline-flex;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle, rgba(255, 243, 194, 0.95) 0%, rgba(255, 210, 84, 0.98) 38%, rgba(255, 146, 79, 1) 78%, rgba(255, 95, 109, 1) 100%);
  box-shadow: 0 0 24px rgba(255, 179, 71, 0.36);
}

body.summer-sale-theme-enabled .summer-sun-icon::before {
  content: '';
  position: absolute;
  inset: -9px;
  border-radius: 50%;
  background: conic-gradient(from 0deg, rgba(255, 222, 125, 0.95) 0deg 16deg, transparent 16deg 30deg, rgba(255, 222, 125, 0.95) 30deg 46deg, transparent 46deg 60deg, rgba(255, 222, 125, 0.95) 60deg 76deg, transparent 76deg 90deg, rgba(255, 222, 125, 0.95) 90deg 106deg, transparent 106deg 120deg, rgba(255, 222, 125, 0.95) 120deg 136deg, transparent 136deg 150deg, rgba(255, 222, 125, 0.95) 150deg 166deg, transparent 166deg 180deg, rgba(255, 222, 125, 0.95) 180deg 196deg, transparent 196deg 210deg, rgba(255, 222, 125, 0.95) 210deg 226deg, transparent 226deg 240deg, rgba(255, 222, 125, 0.95) 240deg 256deg, transparent 256deg 270deg, rgba(255, 222, 125, 0.95) 270deg 286deg, transparent 286deg 300deg, rgba(255, 222, 125, 0.95) 300deg 316deg, transparent 316deg 330deg, rgba(255, 222, 125, 0.95) 330deg 346deg, transparent 346deg 360deg);
  -webkit-mask: radial-gradient(circle, transparent 0 60%, #000 61% 100%);
  mask: radial-gradient(circle, transparent 0 60%, #000 61% 100%);
}

body.summer-sale-theme-enabled .summer-sun-core {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 250, 235, 1) 0%, rgba(255, 230, 148, 1) 54%, rgba(255, 184, 65, 1) 100%);
}

body.summer-sale-theme-enabled #apply-coupon {
  background: linear-gradient(135deg, #ff934f 0%, #ff7a45 50%, #ff5f6d 100%) !important;
  border: 2px solid rgba(255, 232, 166, 0.65) !important;
  color: #fffaf5 !important;
}

body.summer-sale-theme-enabled #apply-coupon:hover {
  border-color: rgba(255, 235, 188, 0.86) !important;
}

/* Flash Sale Apply Coupon Button - Only when theme is enabled */
body.flash-sale-theme-enabled #apply-coupon {
  background: linear-gradient(135deg, var(--fccoinsqtr-maroon-dark) 0%, var(--fccoinsqtr-maroon-bright) 100%) !important;
  border: 2px solid var(--fccoinsqtr-accent) !important;
  color: var(--fccoinsqtr-text-white) !important;
  font-weight: 600 !important;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  box-shadow: 0 4px 12px rgba(111, 21, 49, 0.3), 0 0 14px rgba(255, 255, 255, 0.12);
  transition: all 0.3s ease !important;
}

body.flash-sale-theme-enabled #apply-coupon:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(111, 21, 49, 0.4), 0 0 18px rgba(255, 255, 255, 0.18) !important;
  border-color: var(--fccoinsqtr-accent) !important;
}

/* ========================================
   FLASH SALE LIGHTNING STRIKE EFFECT
   ======================================== */

.flash-lightning-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 99999;
  opacity: 0;
  transition: opacity 0.1s ease-out;
}

.flash-lightning-overlay.active {
  opacity: 1;
}

.flash-lightning-bolt {
  position: absolute;
  width: 4px;
  height: 100%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.8) 20%,
    rgba(255, 255, 255, 1) 30%,
    rgba(255, 255, 255, 0.9) 40%,
    rgba(255, 255, 255, 0.7) 50%,
    rgba(255, 255, 255, 0.9) 60%,
    rgba(255, 255, 255, 1) 70%,
    rgba(255, 255, 255, 0.8) 80%,
    transparent 100%
  );
  box-shadow: 
    0 0 20px rgba(255, 255, 255, 0.8),
    0 0 40px rgba(255, 215, 0, 0.6),
    0 0 60px rgba(255, 107, 53, 0.4),
    -2px 0 10px rgba(255, 255, 255, 0.5),
    2px 0 10px rgba(255, 255, 255, 0.5);
  left: 50%;
  transform: translateX(-50%);
  animation: lightning-strike 0.3s ease-out;
  filter: blur(1px);
}

.flash-lightning-bolt::before,
.flash-lightning-bolt::after {
  content: '';
  position: absolute;
  width: 3px;
  height: 40%;
  background: linear-gradient(to bottom,
    transparent 0%,
    rgba(255, 255, 255, 0.9) 30%,
    rgba(255, 255, 255, 1) 50%,
    rgba(255, 255, 255, 0.8) 70%,
    transparent 100%
  );
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.7);
  filter: blur(0.5px);
}

.flash-lightning-bolt::before {
  left: -30px;
  top: 20%;
  transform: rotate(-15deg);
}

.flash-lightning-bolt::after {
  right: -30px;
  top: 40%;
  transform: rotate(15deg);
}

.flash-screen-flash {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
  animation: screen-flash 0.2s ease-out;
}

@keyframes lightning-strike {
  0% {
    opacity: 0;
    transform: translateX(-50%) scaleY(0);
  }
  10% {
    opacity: 1;
    transform: translateX(-50%) scaleY(0.1);
  }
  50% {
    opacity: 1;
    transform: translateX(-50%) scaleY(1);
  }
  90% {
    opacity: 0.8;
    transform: translateX(-50%) scaleY(1);
  }
  100% {
    opacity: 0;
    transform: translateX(-50%) scaleY(1);
  }
}

@keyframes screen-flash {
  0% {
    opacity: 0;
  }
  20% {
    opacity: 0.4;
  }
  40% {
    opacity: 0.2;
  }
  100% {
    opacity: 0;
  }
}

/* Hide lightning effect when theme is disabled */
body:not(.flash-sale-theme-enabled) .flash-lightning-overlay {
  display: none !important;
}

/* ========================================
   CHINESE NEW YEAR THEME - SUBTLE & ELEGANT
   ======================================== */

/* CNY Promo Badge */
.cny-promo-badge {
  position: fixed;
  bottom: 20px;
  left: 20px;
  z-index: 9999;
  animation: cny-badge-float 3s ease-in-out infinite;
}

.cny-badge-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--cny-crimson) 0%, var(--cny-red) 100%);
  padding: 15px 20px;
  border-radius: 12px;
  box-shadow: 0 8px 24px rgba(196, 30, 58, 0.4), 0 0 20px rgba(212, 175, 55, 0.2);
  border: 2px solid var(--cny-gold);
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

/* Subtle gold shimmer overlay */
.cny-badge-content::before {
  content: '';
  position: absolute;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: linear-gradient(45deg, transparent 30%, rgba(212, 175, 55, 0.1) 50%, transparent 70%);
  animation: cny-shimmer 3s ease-in-out infinite;
}

.cny-badge-content:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(196, 30, 58, 0.6), 0 0 30px rgba(255, 215, 0, 0.4);
  border-color: var(--cny-gold-bright);
}

.cny-badge-icon {
  font-size: 32px;
  line-height: 1;
  filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.4));
  animation: cny-lantern-sway 2s ease-in-out infinite;
}

.cny-badge-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.cny-badge-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--cny-gold);
  text-transform: uppercase;
  letter-spacing: 1px;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
}

.cny-badge-discount {
  font-size: 20px;
  font-weight: 800;
  color: var(--fccoinsqtr-text-white);
  line-height: 1;
  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.5);
}

.cny-badge-code {
  font-size: 11px;
  color: var(--cny-gold);
  font-weight: 600;
  font-family: monospace;
  letter-spacing: 0.5px;
}

.cny-badge-ends {
  font-size: 10px;
  color: var(--cny-pearl);
  font-weight: 500;
}

/* CNY Theme Enabled - Chat Messages */
body.cny-theme-enabled .chat-message.customer-message .message-content {
  background: linear-gradient(135deg, var(--cny-crimson) 0%, var(--cny-red) 100%) !important;
  color: #ffffff !important;
  border: 1px solid var(--cny-gold);
  box-shadow: 0 2px 8px rgba(196, 30, 58, 0.3);
}

body.cny-theme-enabled .chat-message.admin-message .message-content,
body.cny-theme-enabled .chat-message.bot-message .message-content {
  background: var(--cny-dark-red) !important;
  color: var(--cny-gold) !important;
  border: 1px solid var(--cny-gold);
  box-shadow: 0 2px 8px rgba(139, 0, 0, 0.3);
}

/* Chat header - CNY styling */
body.cny-theme-enabled .chat-header {
  background: linear-gradient(135deg, var(--cny-crimson) 0%, var(--cny-red) 100%) !important;
  border-bottom: 2px solid var(--cny-gold);
}

body.cny-theme-enabled .chat-header h3 {
  color: var(--cny-gold) !important;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Chat send button - CNY gold */
body.cny-theme-enabled .chat-send-btn {
  background: linear-gradient(135deg, var(--cny-gold) 0%, var(--cny-gold-bright) 100%) !important;
  color: var(--cny-dark-red) !important;
  font-weight: 700;
}

body.cny-theme-enabled .chat-send-btn:hover {
  background: linear-gradient(135deg, var(--cny-gold-bright) 0%, var(--cny-gold) 100%) !important;
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.5);
}

/* Primary buttons - subtle CNY accent */
body.cny-theme-enabled .btn-primary,
body.cny-theme-enabled .primary-btn,
body.cny-theme-enabled button[type="submit"] {
  background: linear-gradient(135deg, var(--cny-crimson) 0%, var(--cny-red) 100%);
  border: 1px solid var(--cny-gold);
  color: #ffffff;
  transition: all 0.3s ease;
}

body.cny-theme-enabled .btn-primary:hover,
body.cny-theme-enabled .primary-btn:hover,
body.cny-theme-enabled button[type="submit"]:hover {
  background: linear-gradient(135deg, var(--cny-red) 0%, var(--cny-crimson) 100%);
  box-shadow: 0 4px 16px rgba(196, 30, 58, 0.4);
  border-color: var(--cny-gold-bright);
}

/* Subtle gold accent on cards */
body.cny-theme-enabled .card,
body.cny-theme-enabled .sidebar-card {
  border-top: 2px solid var(--cny-gold);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.1);
}

/* Price cards - gold accent */
body.cny-theme-enabled .price-item.selected,
body.cny-theme-enabled .coin-option.selected {
  border: 2px solid var(--cny-gold);
  box-shadow: 0 4px 16px rgba(212, 175, 55, 0.3);
}

/* Success messages - gold */
body.cny-theme-enabled .success-message,
body.cny-theme-enabled .toast.success {
  background: linear-gradient(135deg, var(--cny-gold) 0%, var(--cny-gold-bright) 100%);
  color: var(--cny-dark-red);
  border: 1px solid var(--cny-dark-red);
}

/* Animations */
@keyframes cny-badge-float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-8px);
  }
}

@keyframes cny-lantern-sway {
  0%, 100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(-8deg);
  }
  75% {
    transform: rotate(8deg);
  }
}

@keyframes cny-shimmer {
  0% {
    transform: translate(-50%, -50%) rotate(0deg);
  }
  100% {
    transform: translate(50%, 50%) rotate(360deg);
  }
}

/* Mobile adjustments */
@media (max-width: 768px) {
  .cny-promo-badge {
    bottom: 10px;
    left: 10px;
  }

  .cny-badge-content {
    padding: 12px 16px;
    gap: 10px;
  }

  .cny-badge-icon {
    font-size: 28px;
  }

  .cny-badge-title {
    font-size: 12px;
  }

  .cny-badge-discount {
    font-size: 18px;
  }

  .cny-badge-code {
    font-size: 10px;
  }

  .cny-badge-ends {
    font-size: 9px;
  }
}

/* Hide CNY badge when theme is disabled */
body:not(.cny-theme-enabled) .cny-promo-badge {
  display: none !important;
}

/* ========================================
   CNY FLOATING LANTERNS ANIMATION
   ======================================== */

.cny-lanterns-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.cny-lantern {
  position: absolute;
  bottom: -100px;
  font-size: 48px;
  opacity: 0.6;
  animation: cny-float-lantern 15s ease-in-out infinite;
  filter: drop-shadow(0 0 10px rgba(212, 175, 55, 0.5));
}

@keyframes cny-float-lantern {
  0% {
    bottom: -100px;
    transform: translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translateX(20px) rotate(5deg);
  }
  90% {
    opacity: 0.6;
  }
  100% {
    bottom: 110vh;
    transform: translateX(-20px) rotate(-5deg);
    opacity: 0;
  }
}

/* Hide lanterns when theme is disabled */
body:not(.cny-theme-enabled) .cny-lanterns-container {
  display: none !important;
}

/* ========================================
   CNY GOLD COIN RAIN ANIMATION
   ======================================== */

.cny-coin-rain-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10001;
  overflow: hidden;
}

.cny-coin {
  position: absolute;
  top: -50px;
  font-size: 24px;
  animation: cny-coin-fall 3s ease-in forwards;
  filter: drop-shadow(0 0 8px rgba(255, 215, 0, 0.8));
}

@keyframes cny-coin-fall {
  0% {
    top: -50px;
    opacity: 1;
    transform: rotate(0deg);
  }
  100% {
    top: 110vh;
    opacity: 0;
    transform: rotate(720deg);
  }
}

/* Gold sparkle effect */
.cny-coin::before {
  content: '✨';
  position: absolute;
  top: -10px;
  left: -10px;
  font-size: 12px;
  animation: cny-sparkle 1s ease-in-out infinite;
}

@keyframes cny-sparkle {
  0%, 100% {
    opacity: 0;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* Hide coin rain when theme is disabled */
body:not(.cny-theme-enabled) .cny-coin-rain-container {
  display: none !important;
}


/* ========================================
   TOTS THEME
   ======================================== */

:root {
  --tots-navy: #081f4d;
  --tots-blue: #0f4cc3;
  --tots-aqua: #5cf2ff;
  --tots-mint: #7dffd6;
  --tots-gold: #f4d47c;
}

body.tots-theme-enabled .flash-sale-promo-badge {
  display: block !important;
  animation: tots-badge-float 3s ease-in-out infinite;
}

body.tots-theme-enabled .flash-badge-content {
  display: flex;
  align-items: center;
  gap: 12px;
  background: linear-gradient(135deg, var(--tots-navy) 0%, var(--tots-blue) 58%, #159dcb 100%);
  padding: 15px 20px;
  border-radius: 14px;
  border: 1px solid rgba(125, 255, 214, 0.75);
  box-shadow: 0 12px 30px rgba(8, 31, 77, 0.35), 0 0 18px rgba(92, 242, 255, 0.22);
}

body.tots-theme-enabled .flash-badge-content:hover {
  transform: translateY(-3px);
  border-color: rgba(244, 212, 124, 0.9);
  box-shadow: 0 16px 34px rgba(8, 31, 77, 0.45), 0 0 22px rgba(92, 242, 255, 0.32);
}

body.tots-theme-enabled .flash-badge-icon {
  font-size: 0;
  line-height: 1;
  filter: none;
  animation: none;
}

body.tots-theme-enabled .tots-shield-icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 50px;
  height: 58px;
  clip-path: polygon(50% 0%, 88% 14%, 88% 60%, 50% 100%, 12% 60%, 12% 14%);
  background: linear-gradient(180deg, var(--tots-gold) 0%, var(--tots-mint) 34%, var(--tots-aqua) 66%, #0b5ed7 100%);
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.36), inset 0 0 0 2px rgba(255, 255, 255, 0.24);
  animation: tots-shield-glow 2.8s ease-in-out infinite;
}

body.tots-theme-enabled .tots-shield-label {
  font-size: 10px;
  font-weight: 900;
  letter-spacing: 1px;
  color: #17130b;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.28);
}

body.tots-theme-enabled .flash-badge-title {
  color: var(--tots-mint);
  animation: none;
  text-shadow: 0 2px 4px rgba(2, 12, 32, 0.45);
}

body.tots-theme-enabled .flash-badge-discount {
  color: #ffffff;
  text-shadow: 0 3px 10px rgba(2, 12, 32, 0.45);
}

body.tots-theme-enabled .flash-badge-code {
  color: var(--tots-gold);
}

body.tots-theme-enabled .flash-badge-ends {
  color: rgba(255, 255, 255, 0.86);
}

body.tots-theme-enabled #apply-coupon {
  background: linear-gradient(135deg, var(--tots-navy) 0%, var(--tots-blue) 62%, #159dcb 100%) !important;
  border: 2px solid rgba(125, 255, 214, 0.62) !important;
  color: #ffffff !important;
  box-shadow: 0 8px 22px rgba(8, 31, 77, 0.32);
}

body.tots-theme-enabled #apply-coupon:hover {
  border-color: rgba(244, 212, 124, 0.9) !important;
  box-shadow: 0 10px 26px rgba(8, 31, 77, 0.4), 0 0 16px rgba(92, 242, 255, 0.24) !important;
}

body.tots-theme-enabled .flash-lightning-overlay {
  display: block !important;
  opacity: 0;
  transition: opacity 0.35s ease-out;
}

body.tots-theme-enabled .flash-lightning-overlay.active {
  opacity: 1;
}

body.tots-theme-enabled .flash-lightning-bolt {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 64vmax;
  height: 64vmax;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(92, 242, 255, 0.2) 0%, rgba(15, 76, 195, 0.16) 36%, rgba(244, 212, 124, 0.12) 58%, transparent 72%);
  box-shadow: none;
  filter: blur(10px);
  animation: tots-aura-bloom 1.4s ease-out;
}

body.tots-theme-enabled .flash-lightning-bolt::before,
body.tots-theme-enabled .flash-lightning-bolt::after {
  content: '';
  position: absolute;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(125, 255, 214, 0.24) 0%, transparent 72%);
  box-shadow: none;
  filter: blur(6px);
}

body.tots-theme-enabled .flash-lightning-bolt::before {
  width: 18vmax;
  height: 18vmax;
  top: 10%;
  left: 12%;
  transform: none;
}

body.tots-theme-enabled .flash-lightning-bolt::after {
  width: 16vmax;
  height: 16vmax;
  right: 14%;
  bottom: 14%;
  transform: none;
}

body.tots-theme-enabled .flash-screen-flash {
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 0%, rgba(92, 242, 255, 0.05) 28%, rgba(255, 255, 255, 0.12) 50%, rgba(244, 212, 124, 0.08) 72%, transparent 100%);
  animation: tots-sheen-sweep 1.4s ease-out;
}

@keyframes tots-badge-float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-4px);
  }
}

@keyframes tots-shield-glow {
  0%, 100% {
    transform: translateY(0) scale(1);
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.36), inset 0 0 0 2px rgba(255, 255, 255, 0.24);
  }
  50% {
    transform: translateY(-1px) scale(1.03);
    box-shadow: 0 14px 26px rgba(0, 0, 0, 0.42), 0 0 14px rgba(92, 242, 255, 0.2), inset 0 0 0 2px rgba(255, 255, 255, 0.3);
  }
}

@keyframes tots-aura-bloom {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.72);
  }
  30% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(1.08);
  }
}

@keyframes tots-sheen-sweep {
  0% {
    opacity: 0;
    transform: translateX(-10%);
  }
  28% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(10%);
  }
}

@media (max-width: 768px) {
  body.tots-theme-enabled .flash-badge-content {
    padding: 12px 16px;
    gap: 10px;
  }

  body.tots-theme-enabled .tots-shield-icon {
    width: 42px;
    height: 50px;
  }

  body.tots-theme-enabled .tots-shield-label {
    font-size: 9px;
  }
}


/* August Sale Theme - AUG10 ticket badge */
body.august-sale-theme-enabled .flash-sale-promo-badge {
  display: block !important;
}

body.august-sale-theme-enabled .flash-badge-content {
  background: linear-gradient(135deg, #050708 0%, #12171c 52%, #20272f 100%);
  border: 1px solid rgba(216, 255, 61, 0.72);
  box-shadow: 0 14px 32px rgba(0, 0, 0, 0.36);
}

body.august-sale-theme-enabled .flash-badge-content:hover {
  border-color: rgba(216, 255, 61, 0.9);
  box-shadow: 0 18px 38px rgba(0, 0, 0, 0.42);
}

body.august-sale-theme-enabled .flash-badge-icon {
  width: 58px;
  height: 48px;
  font-size: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  animation: none;
}

body.august-sale-theme-enabled .august-ticket-icon {
  position: relative;
  display: inline-flex;
  width: 58px;
  height: 38px;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(7, 16, 8, 0.7);
  border-radius: 9px;
  background: #d8ff3d;
  color: #071008;
  transform: rotate(-5deg);
  box-shadow: 0 8px 14px rgba(0, 0, 0, 0.28);
}

body.august-sale-theme-enabled .august-ticket-icon::before,
body.august-sale-theme-enabled .august-ticket-icon::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #0b0f12;
  transform: translateY(-50%);
}

body.august-sale-theme-enabled .august-ticket-icon::before {
  left: -6px;
}

body.august-sale-theme-enabled .august-ticket-icon::after {
  right: -6px;
}

body.august-sale-theme-enabled .august-ticket-icon span {
  position: relative;
  z-index: 1;
  font-size: 11px;
  font-weight: 1000;
  letter-spacing: -0.02em;
}

body.august-sale-theme-enabled .flash-badge-title {
  color: #f7f8fb;
  animation: none;
}

body.august-sale-theme-enabled .flash-badge-discount {
  color: #d8ff3d;
}

body.august-sale-theme-enabled .flash-badge-code {
  color: #ffffff;
}

body.august-sale-theme-enabled .flash-badge-ends {
  color: rgba(229, 231, 235, 0.86);
}

body.august-sale-theme-enabled #apply-coupon {
  background: #d8ff3d !important;
  border: 2px solid rgba(216, 255, 61, 0.78) !important;
  color: #071008 !important;
}

body.august-sale-theme-enabled #apply-coupon:hover {
  background: #f0ff70 !important;
  border-color: rgba(240, 255, 112, 0.92) !important;
}

/* Support contact chooser */
body #contact-modal {
  align-items: flex-start;
}

body #contact-modal .modal-content {
  width: min(560px, calc(100vw - 28px));
  max-width: 560px;
  margin: 80px auto 16px;
  padding: 22px;
  transition: width 0.22s ease;
}

body #contact-modal.easpc-support-modal--email .modal-content {
  width: min(720px, calc(100vw - 28px));
  max-width: 720px;
}

.easpc-support-modal-subtitle {
  margin: -4px 0 16px;
  color: rgba(235, 241, 255, 0.72);
  font-size: 14px;
  line-height: 1.45;
}

.easpc-support-tabs {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px;
  margin-bottom: 14px;
}

.easpc-support-tab {
  min-height: 40px;
  padding: 0 10px;
  color: #f7f8fb;
  background: rgba(255, 255, 255, 0.075);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 8px;
  font-size: 13px;
  font-weight: 800;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, color 0.18s ease;
}

.easpc-support-tab:hover,
.easpc-support-tab:focus-visible {
  border-color: rgba(216, 255, 61, 0.55);
}

.easpc-support-tab:focus-visible {
  outline: 2px solid rgba(216, 255, 61, 0.48);
  outline-offset: 2px;
}

.easpc-support-tab.is-active {
  color: #111507;
  background: #d8ff3d;
  border-color: #d8ff3d;
}

.easpc-support-panel.is-hidden {
  display: none !important;
}

.easpc-support-option {
  display: grid;
  gap: 10px;
  padding: 18px;
  background: rgba(7, 8, 11, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
}

.easpc-support-option h3 {
  margin: 0;
  color: #f7f8fb;
  font-family: "Rajdhani", "Inter", system-ui, sans-serif;
  font-size: 25px;
  font-weight: 700;
  line-height: 1;
}

.easpc-support-option p {
  margin: 0;
  color: rgba(235, 241, 255, 0.72);
  font-size: 14px;
  line-height: 1.5;
}

.easpc-support-soon {
  display: inline-flex;
  width: fit-content;
  padding: 7px 10px;
  color: #111507 !important;
  background: #d8ff3d;
  border-radius: 8px;
  font-weight: 900;
}

.easpc-support-action {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 40px;
  padding: 0 16px;
  color: #111507 !important;
  background: #d8ff3d;
  border: 1px solid #d8ff3d;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 900;
  text-decoration: none;
  cursor: pointer;
}

#support-panel-email #contact-form {
  margin-top: 0;
}

#support-panel-email .actions {
  display: flex;
  justify-content: flex-end;
}

.contact-honeypot {
  position: absolute !important;
  left: -9999px !important;
  width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 560px) {
  .easpc-support-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  body #contact-modal .modal-content {
    margin-top: 64px;
    padding: 18px;
  }

  .easpc-support-option {
    padding: 16px;
  }
}