/*
 * ═══════════════════════════════════════════════════
 *  SWEDBANG — LUXURY CARD & BOX DESIGN SYSTEM
 *  Site-wide glassmorphism override
 *  Applied over compiled Vite/React bundle
 * ═══════════════════════════════════════════════════
 */

/* ── MASTER CARD MIXIN (CSS variables for easy tuning) ── */
:root {
  --lux-card-bg: linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0%,
    rgba(65,105,232,0.06) 50%,
    rgba(255,255,255,0.02) 100%
  );
  --lux-card-bg-hover: linear-gradient(
    135deg,
    rgba(255,255,255,0.06) 0%,
    rgba(65,105,232,0.10) 50%,
    rgba(255,255,255,0.03) 100%
  );
  --lux-card-border: rgba(65,105,232,0.18);
  --lux-card-border-hover: rgba(65,105,232,0.38);
  --lux-card-radius: 16px;
  --lux-card-radius-sm: 12px;
  --lux-card-shadow:
    0 4px 24px rgba(0,0,0,0.25),
    0 1px 4px rgba(0,0,0,0.20),
    inset 0 1px 0 rgba(255,255,255,0.04);
  --lux-card-shadow-hover:
    0 8px 32px rgba(65,105,232,0.15),
    0 2px 8px rgba(0,0,0,0.30),
    inset 0 1px 0 rgba(255,255,255,0.06);
  --lux-gold: #D4A843;
  --lux-blue: #5B82FF;
  --lux-text-primary: #F0F4FF;
  --lux-text-secondary: #C8D4E8;
  --lux-text-muted: #7A90B0;
  --lux-email-color: #A8BFFF;
  --lux-transition: all 0.35s cubic-bezier(0.23, 1, 0.32, 1);
}

/* ══════════════════════════════════════════════════════
   1. CONTACT PAGE — OFFICE / LOCATION CARDS (.ct-office-card)
   ══════════════════════════════════════════════════════ */

.ct-office-card {
  background: var(--lux-card-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  padding: 28px 28px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: var(--lux-transition) !important;
  box-shadow: var(--lux-card-shadow) !important;
}

/* HQ card keeps its distinct style but with luxury base */
.ct-office-card--hq {
  border-color: rgba(65,105,232,0.32) !important;
  background: linear-gradient(
    135deg,
    rgba(65,105,232,0.07) 0%,
    rgba(212,168,67,0.04) 50%,
    rgba(65,105,232,0.04) 100%
  ) !important;
}

/* Top edge glow on office cards */
.ct-office-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(65,105,232,0.60) 40%,
    rgba(212,168,67,0.40) 60%,
    transparent 100%
  );
  border-radius: 999px;
  pointer-events: none;
  z-index: 1;
}

.ct-office-card:hover {
  border-color: var(--lux-card-border-hover) !important;
  background: var(--lux-card-bg-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* Country code (SE, US, GB, etc.) */
.ct-office-card .ct-office-country-code,
.ct-office-card [class*="country-code"],
.ct-office-card .text-xs.font-bold,
.ct-office-card .text-xs.uppercase {
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: 0.18em !important;
  text-transform: uppercase !important;
  color: var(--lux-gold) !important;
  margin-bottom: 4px !important;
}

/* Country name */
.ct-office-card h3,
.ct-office-card .ct-office-name {
  font-weight: 600 !important;
  font-size: 20px !important;
  color: var(--lux-text-primary) !important;
  margin-bottom: 2px !important;
}

/* Region label (GLOBAL HQ, NORTH AMERICA, etc.) */
.ct-office-card .ct-office-region,
.ct-office-card [class*="region"] {
  font-weight: 500 !important;
  font-size: 10px !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--lux-blue) !important;
  margin-bottom: 20px !important;
}

/* Address text */
.ct-office-card address,
.ct-office-card p,
.ct-office-card .ct-office-address {
  color: var(--lux-text-secondary) !important;
  font-size: 13px !important;
  line-height: 1.8 !important;
}

/* Phone */
.ct-office-phone-number {
  color: var(--lux-text-primary) !important;
  font-weight: 500 !important;
}

.ct-office-phone-label {
  color: var(--lux-text-muted) !important;
  font-size: 11px !important;
  text-transform: uppercase !important;
  letter-spacing: 0.10em !important;
}

/* Divider inside card */
.ct-office-divider {
  border: none !important;
  border-top: 1px solid rgba(65,105,232,0.12) !important;
  background: none !important;
  height: 1px !important;
  margin: 18px 0 !important;
}

/* HQ badge */
.ct-hq-badge {
  color: var(--lux-gold) !important;
  background: rgba(212,168,67,0.10) !important;
  border: 1px solid rgba(212,168,67,0.28) !important;
}

/* ── EMAIL BOXES inside office cards ── */
.ct-office-card a[href^="mailto"],
.ct-office-card .ct-email-box,
.ct-office-card [class*="email"] {
  color: var(--lux-email-color) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
}

.ct-office-card a[href^="mailto"]:hover {
  color: var(--lux-gold) !important;
  text-decoration: none !important;
}

/* VIEW ON MAP link */
.ct-office-footer a,
.ct-office-card [class*="map"],
.ct-office-card [class*="view-map"] {
  color: var(--lux-text-muted) !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.10em !important;
  text-transform: uppercase !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  margin-top: 14px !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

.ct-office-footer a:hover,
.ct-office-card [class*="map"]:hover {
  color: var(--lux-gold) !important;
}

/* ── Contact channel cards (WhatsApp, etc.) ── */
.ct-channel-card {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: 12px !important;
  transition: var(--lux-transition) !important;
  box-shadow: var(--lux-card-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ct-channel-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.ct-channel-card:hover {
  border-color: var(--lux-card-border-hover) !important;
  background: var(--lux-card-bg-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

.ct-channel-card--wa {
  border-color: rgba(37,211,102,0.22) !important;
}

/* ── Contact Form Card ── */
.ct-form-card {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  box-shadow: var(--lux-card-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ct-form-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

/* ── HQ Info Pill ── */
.ct-hq-pill {
  background: rgba(65,105,232,0.06) !important;
  border: 1px solid rgba(65,105,232,0.15) !important;
  border-radius: 10px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* ══════════════════════════════════════════════════════
   2. INNER PAGE CARDS — ip-card, ip-cap-item, ip-stat
   ══════════════════════════════════════════════════════ */

.ip-card {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  box-shadow: var(--lux-card-shadow) !important;
  transition: var(--lux-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.ip-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.ip-card:hover {
  border-color: var(--lux-card-border-hover) !important;
  background: var(--lux-card-bg-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* Stats block */
.ip-stats {
  background: transparent !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  overflow: hidden !important;
  box-shadow: var(--lux-card-shadow) !important;
}

.ip-stat {
  background: var(--lux-card-bg) !important;
  border-bottom: 1px solid rgba(65,105,232,0.10) !important;
  transition: var(--lux-transition) !important;
  position: relative !important;
}

.ip-stat:hover {
  background: var(--lux-card-bg-hover) !important;
}

/* Related cards */
.ip-related-grid {
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  background: transparent !important;
  overflow: hidden !important;
}

.ip-related-card {
  background: var(--lux-card-bg) !important;
  border-bottom: 1px solid rgba(65,105,232,0.10) !important;
  transition: var(--lux-transition) !important;
}

.ip-related-card:hover {
  background: var(--lux-card-bg-hover) !important;
  transform: translateX(3px) !important;
}

/* ══════════════════════════════════════════════════════
   3. WEB SOLUTIONS — ws-price-card, ws-card
   ══════════════════════════════════════════════════════ */

.ws-price-card {
  background: var(--lux-card-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  padding: 28px 28px !important;
  position: relative !important;
  overflow: hidden !important;
  transition: var(--lux-transition) !important;
  box-shadow: var(--lux-card-shadow) !important;
}

.ws-price-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.ws-price-card:hover {
  border-color: var(--lux-card-border-hover) !important;
  background: var(--lux-card-bg-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* Highlighted (featured) pricing card */
.ws-price-card-highlight {
  background: linear-gradient(
    135deg,
    rgba(65,105,232,0.10) 0%,
    rgba(212,168,67,0.06) 50%,
    rgba(65,105,232,0.06) 100%
  ) !important;
  border-color: rgba(212,168,67,0.35) !important;
}

.ws-price-card-highlight::before {
  background: linear-gradient(90deg, transparent 0%, rgba(212,168,67,0.70) 40%, rgba(65,105,232,0.50) 60%, transparent 100%) !important;
}

/* ══════════════════════════════════════════════════════
   4. ESIM PAGE — esim-plan-card, esim-hero-glass
   ══════════════════════════════════════════════════════ */

.esim-plan-card {
  background: var(--lux-card-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: var(--lux-transition) !important;
  box-shadow: var(--lux-card-shadow) !important;
}

.esim-plan-card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.esim-plan-card:hover {
  border-color: var(--lux-card-border-hover) !important;
  background: var(--lux-card-bg-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

.esim-hero-glass {
  background: var(--lux-card-bg) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  box-shadow: var(--lux-card-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
}

.esim-hero-glass::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

/* ══════════════════════════════════════════════════════
   5. GENERIC TAILWIND CARD CLASSES — bg-card, .card
   ══════════════════════════════════════════════════════ */

/* Tailwind bg-card + rounded-2xl + border combos */
.bg-card.border.border-border,
.bg-card.border-border,
[class*="bg-card"][class*="rounded"][class*="border"] {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  box-shadow: var(--lux-card-shadow) !important;
  transition: var(--lux-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

[class*="bg-card"][class*="rounded"][class*="border"]:hover {
  border-color: var(--lux-card-border-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* .card class (PremiumSourcingPage, generic) */
.card {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  box-shadow: var(--lux-card-shadow) !important;
  transition: var(--lux-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.card::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.card:hover {
  border-color: var(--lux-card-border-hover) !important;
  background: var(--lux-card-bg-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* ══════════════════════════════════════════════════════
   6. ROUNDED CARD CONTAINERS — flex flex-col p-6/p-8 rounded-xl/2xl
      (EnterpriseInfrastructurePage, PremiumSourcingPage, etc.)
   ══════════════════════════════════════════════════════ */

/* Target containers that are card-like (rounded-2xl + p-6 with bg) */
.rounded-2xl.p-6,
.rounded-2xl.p-8,
.rounded-xl.p-6,
.rounded-xl.p-8 {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  box-shadow: var(--lux-card-shadow) !important;
  transition: var(--lux-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.rounded-2xl.p-6::before,
.rounded-2xl.p-8::before,
.rounded-xl.p-6::before,
.rounded-xl.p-8::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.rounded-2xl.p-6:hover,
.rounded-2xl.p-8:hover,
.rounded-xl.p-6:hover,
.rounded-xl.p-8:hover {
  border-color: var(--lux-card-border-hover) !important;
  background: var(--lux-card-bg-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* ══════════════════════════════════════════════════════
   7. CYBERSECURITY SOLUTIONS — inline flex gap-3 p-5 rounded-xl cards
   ══════════════════════════════════════════════════════ */

.flex.flex-col.gap-3.p-5.rounded-xl,
.flex.flex-col.gap-3.p-5.rounded-xl.transition-all {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  box-shadow: var(--lux-card-shadow) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: var(--lux-transition) !important;
}

.flex.flex-col.gap-3.p-5.rounded-xl::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.flex.flex-col.gap-3.p-5.rounded-xl:hover {
  border-color: var(--lux-card-border-hover) !important;
  background: var(--lux-card-bg-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* ══════════════════════════════════════════════════════
   8. ICON CONTAINERS inside cards — rounded-xl/2xl bg-primary/10
   ══════════════════════════════════════════════════════ */

[class*="rounded-xl"][class*="bg-primary"],
[class*="rounded-2xl"][class*="bg-primary"],
[class*="rounded-full"][class*="bg-primary"],
.w-14.h-14.rounded-2xl,
.w-12.h-12.rounded-xl {
  background: rgba(65,105,232,0.12) !important;
  border: 1px solid rgba(65,105,232,0.20) !important;
}

/* ══════════════════════════════════════════════════════
   9. EMAIL INFO BOXES (specific fix)
   ══════════════════════════════════════════════════════ */

/* Generic email info/contact box containers */
[class*="email-box"],
[class*="info-box"],
[class*="contact-box"],
.ct-hq-pill,
[class*="ip-wa-banner"] {
  background: rgba(65,105,232,0.06) !important;
  border: 1px solid rgba(65,105,232,0.15) !important;
  border-radius: 10px !important;
  padding: 16px 20px !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.04) !important;
}

/* All mailto links across the site */
a[href^="mailto"] {
  color: var(--lux-email-color) !important;
  font-size: 13px !important;
  font-weight: 400 !important;
  line-height: 1.9 !important;
  letter-spacing: 0.01em !important;
  text-decoration: none !important;
  transition: color 0.2s ease !important;
}

a[href^="mailto"]:hover {
  color: var(--lux-gold) !important;
  text-decoration: none !important;
}

/* ══════════════════════════════════════════════════════
   10. SURFACE / COLOR-SURFACE CONTAINERS
       (PaymentPage, dropdown menus, modals)
   ══════════════════════════════════════════════════════ */

[class*="bg-[var(--color-surface)]"][class*="border"][class*="rounded"] {
  background: var(--lux-card-bg) !important;
  border-color: var(--lux-card-border) !important;
  box-shadow: var(--lux-card-shadow) !important;
}

/* ══════════════════════════════════════════════════════
   11. SUCCESS STORIES — icon containers
   ══════════════════════════════════════════════════════ */

.w-14.h-14.rounded-2xl[class*="border"] {
  background: rgba(65,105,232,0.10) !important;
  border-color: rgba(65,105,232,0.20) !important;
  box-shadow: var(--lux-card-shadow) !important;
}

/* ══════════════════════════════════════════════════════
   12. ESIM CARD GLOW + WS CARD GLOW (overlay effects)
   ══════════════════════════════════════════════════════ */

.esim-card-glow,
.ws-card-glow {
  background: radial-gradient(
    ellipse at top left,
    rgba(65,105,232,0.15) 0%,
    transparent 60%
  ) !important;
  pointer-events: none !important;
}

/* ══════════════════════════════════════════════════════
   13. LOCATION CARDS SECTION BACKGROUND
   ══════════════════════════════════════════════════════ */

.ct-offices-section {
  background: transparent !important;
}

/* Offices grid gap */
[class*="ct-offices"],
[class*="office-grid"],
[class*="offices-grid"] {
  gap: 24px !important;
}

/* ══════════════════════════════════════════════════════
   14. COUNTRY PAGE — sb-country-container
   ══════════════════════════════════════════════════════ */

.sb-country-container > * > [class*="card"],
.sb-country-container > * > [class*="rounded"] {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  box-shadow: var(--lux-card-shadow) !important;
  transition: var(--lux-transition) !important;
}

/* ══════════════════════════════════════════════════════
   15. PREMIUM SOURCING PAGE — text-center p-6 rounded-2xl
   ══════════════════════════════════════════════════════ */

.text-center.p-6.rounded-2xl {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  box-shadow: var(--lux-card-shadow) !important;
  transition: var(--lux-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.text-center.p-6.rounded-2xl::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.text-center.p-6.rounded-2xl:hover {
  border-color: var(--lux-card-border-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* ══════════════════════════════════════════════════════
   16. INERT FLEX CARD (flex flex-col items-center gap-4 p-8 rounded-lg)
   ══════════════════════════════════════════════════════ */

.flex.flex-col.items-center.gap-4.p-8.rounded-lg {
  background: var(--lux-card-bg) !important;
  border: 1px solid var(--lux-card-border) !important;
  border-radius: var(--lux-card-radius) !important;
  box-shadow: var(--lux-card-shadow) !important;
  transition: var(--lux-transition) !important;
  position: relative !important;
  overflow: hidden !important;
}

.flex.flex-col.items-center.gap-4.p-8.rounded-lg::before {
  content: '';
  position: absolute;
  top: 0; left: 10%; right: 10%;
  height: 1px;
  background: linear-gradient(90deg, transparent 0%, rgba(65,105,232,0.60) 40%, rgba(212,168,67,0.40) 60%, transparent 100%);
  border-radius: 999px;
  pointer-events: none;
}

.flex.flex-col.items-center.gap-4.p-8.rounded-lg:hover {
  border-color: var(--lux-card-border-hover) !important;
  transform: translateY(-3px) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* ══════════════════════════════════════════════════════
   17. MODAL / DIALOG CARDS
   ══════════════════════════════════════════════════════ */

[class*="bg-[var(--color-bg)]"].border.shadow-lg {
  background: linear-gradient(135deg, rgba(11,15,26,0.97) 0%, rgba(20,28,50,0.97) 100%) !important;
  border-color: var(--lux-card-border) !important;
  box-shadow: var(--lux-card-shadow-hover) !important;
}

/* ══════════════════════════════════════════════════════
   18. MOBILE RESPONSIVE OVERRIDES
   ══════════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .ct-office-card,
  .ws-price-card,
  .esim-plan-card,
  .ip-card,
  .card,
  .rounded-2xl.p-6,
  .rounded-2xl.p-8,
  .rounded-xl.p-6,
  .rounded-xl.p-8 {
    border-radius: var(--lux-card-radius-sm) !important;
  }

  .ct-office-card:hover,
  .ws-price-card:hover,
  .esim-plan-card:hover,
  .ip-card:hover,
  .card:hover {
    transform: translateY(-2px) !important;
  }
}

/* ══════════════════════════════════════════════════════
   19. PROTECT — hero, header, footer remain untouched
   ══════════════════════════════════════════════════════ */

/* Explicitly exclude hero, header, footer, navbar from card overrides */
header .rounded-2xl,
footer .rounded-2xl,
nav .rounded-2xl,
[class*="hero"] .rounded-2xl,
header .rounded-xl,
footer .rounded-xl,
nav .rounded-xl,
[class*="hero"] .rounded-xl,
header .card,
footer .card,
nav .card,
[class*="hero"] .card {
  /* Reset — don't override hero/nav/footer internal elements */
  all: revert;
}

/* ══════════════════════════════════════════════════════
   20. LIGHT THEME OVERRIDES — All cards become white glass
   ══════════════════════════════════════════════════════ */

html.light-theme {
  --lux-card-bg: linear-gradient(
    135deg,
    rgba(255,255,255,0.92) 0%,
    rgba(241,245,249,0.88) 50%,
    rgba(255,255,255,0.95) 100%
  );
  --lux-card-bg-hover: linear-gradient(
    135deg,
    rgba(255,255,255,1.00) 0%,
    rgba(241,245,249,0.96) 50%,
    rgba(255,255,255,1.00) 100%
  );
  --lux-card-border: rgba(43,74,192,0.14);
  --lux-card-border-hover: rgba(43,74,192,0.30);
  --lux-card-shadow:
    0 4px 24px rgba(65,105,232,0.08),
    0 1px 4px rgba(0,0,0,0.06),
    inset 0 1px 0 rgba(255,255,255,0.80);
  --lux-card-shadow-hover:
    0 8px 32px rgba(65,105,232,0.14),
    0 2px 8px rgba(0,0,0,0.08),
    inset 0 1px 0 rgba(255,255,255,0.90);
  --lux-text-primary: #0D1120;
  --lux-text-secondary: #2C3E6A;
  --lux-text-muted: #5F6E8C;
  --lux-email-color: #2B4AC0;
  --lux-gold: #B8860B;
  --lux-blue: #2B4AC0;
}

/* Light theme — card top-edge glow shifts to soft blue/gold */
html.light-theme .ct-office-card::before,
html.light-theme .ct-channel-card::before,
html.light-theme .ct-form-card::before,
html.light-theme .ip-card::before,
html.light-theme .ws-price-card::before,
html.light-theme .esim-plan-card::before,
html.light-theme .esim-hero-glass::before,
html.light-theme .card::before,
html.light-theme .rounded-2xl.p-6::before,
html.light-theme .rounded-2xl.p-8::before,
html.light-theme .rounded-xl.p-6::before,
html.light-theme .rounded-xl.p-8::before,
html.light-theme .flex.flex-col.gap-3.p-5.rounded-xl::before,
html.light-theme .flex.flex-col.items-center.gap-4.p-8.rounded-lg::before,
html.light-theme .text-center.p-6.rounded-2xl::before {
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(43,74,192,0.30) 40%,
    rgba(184,134,11,0.20) 60%,
    transparent 100%
  ) !important;
}

/* Light theme icon containers */
html.light-theme [class*="rounded-xl"][class*="bg-primary"],
html.light-theme [class*="rounded-2xl"][class*="bg-primary"],
html.light-theme [class*="rounded-full"][class*="bg-primary"],
html.light-theme .w-14.h-14.rounded-2xl,
html.light-theme .w-12.h-12.rounded-xl {
  background: rgba(43,74,192,0.08) !important;
  border: 1px solid rgba(43,74,192,0.16) !important;
}

/* Light theme icon containers — success/stat variant */
html.light-theme .w-14.h-14.rounded-2xl[class*="border"] {
  background: rgba(43,74,192,0.07) !important;
  border-color: rgba(43,74,192,0.16) !important;
  box-shadow: 0 2px 8px rgba(65,105,232,0.06) !important;
}

/* Light theme email/info/contact pill boxes */
html.light-theme [class*="email-box"],
html.light-theme [class*="info-box"],
html.light-theme [class*="contact-box"],
html.light-theme .ct-hq-pill,
html.light-theme [class*="ip-wa-banner"] {
  background: rgba(43,74,192,0.04) !important;
  border: 1px solid rgba(43,74,192,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.60) !important;
}

/* Light theme office card inner divider */
html.light-theme .ct-office-divider {
  border-top: 1px solid rgba(43,74,192,0.10) !important;
}

/* Light theme HQ badge */
html.light-theme .ct-hq-badge {
  color: #B8860B !important;
  background: rgba(212,168,67,0.08) !important;
  border: 1px solid rgba(212,168,67,0.25) !important;
}

/* Light theme HQ office card accent */
html.light-theme .ct-office-card--hq {
  background: linear-gradient(
    135deg,
    rgba(43,74,192,0.05) 0%,
    rgba(212,168,67,0.03) 50%,
    rgba(43,74,192,0.03) 100%
  ) !important;
  border-color: rgba(43,74,192,0.22) !important;
}

/* Light theme highlighted/featured pricing card */
html.light-theme .ws-price-card-highlight {
  background: linear-gradient(
    135deg,
    rgba(43,74,192,0.07) 0%,
    rgba(212,168,67,0.04) 50%,
    rgba(43,74,192,0.04) 100%
  ) !important;
  border-color: rgba(212,168,67,0.28) !important;
}

/* Light theme card glow overlays */
html.light-theme .esim-card-glow,
html.light-theme .ws-card-glow {
  background: radial-gradient(
    ellipse at top left,
    rgba(43,74,192,0.06) 0%,
    transparent 60%
  ) !important;
}

/* Light theme modal/dialog */
html.light-theme [class*="bg-[var(--color-bg)]"].border.shadow-lg {
  background: linear-gradient(
    135deg,
    rgba(255,255,255,0.98) 0%,
    rgba(241,245,249,0.97) 100%
  ) !important;
  border-color: rgba(43,74,192,0.14) !important;
  box-shadow: 0 8px 32px rgba(65,105,232,0.12), 0 2px 8px rgba(0,0,0,0.06) !important;
}

/* Light theme surface containers */
html.light-theme [class*="bg-[var(--color-surface)]"][class*="border"][class*="rounded"] {
  background: rgba(255,255,255,0.92) !important;
  border-color: rgba(43,74,192,0.14) !important;
  box-shadow: 0 4px 24px rgba(65,105,232,0.06) !important;
}

/* Light theme mailto links */
html.light-theme a[href^="mailto"] {
  color: #2B4AC0 !important;
}

html.light-theme a[href^="mailto"]:hover {
  color: #B8860B !important;
}

/* Light theme map/footer links inside cards */
html.light-theme .ct-office-footer a,
html.light-theme .ct-office-card [class*="map"],
html.light-theme .ct-office-card [class*="view-map"] {
  color: #5F6E8C !important;
}

html.light-theme .ct-office-footer a:hover,
html.light-theme .ct-office-card [class*="map"]:hover {
  color: #B8860B !important;
}

/* ══════════════════════════════════════════════════════
   END OF LUXURY CARD SYSTEM
   ══════════════════════════════════════════════════════ */