/* SPADELX v3 design system — astra-child */
:root {
  --orange: #f28500;
  --orange-deep: #d97300;
  --orange-soft: #fff4e6;
  --ink: #0b1220;
  --ink-2: #141d33;
  --muted: #5b657a;
  --line: #e6eaf0;
  --paper: #f6f7f9;
  --white: #ffffff;
  --radius: 16px;
  --shadow: 0 16px 48px rgba(11, 18, 32, 0.12);
  --max: 1180px;
  --header-h: 72px;
  --font: "DM Sans", system-ui, sans-serif;
  --display: "Bebas Neue", "DM Sans", sans-serif;
}

.spx-page, .spx-page * { box-sizing: border-box; }
body.spx-body { margin: 0; background: var(--white); }
.spx-page {
  font-family: var(--font); color: var(--ink); line-height: 1.55;
  text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
}
.spx-page img { max-width: 100%; display: block; }
.spx-page a { color: inherit; text-decoration: none; }
.spx-page button, .spx-page input, .spx-page textarea, .spx-page select { font: inherit; }
.spx-page ::selection { background: var(--orange); color: #fff; }
.spx-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* Film grain */
.spx-page::after {
  content: ""; position: fixed; inset: 0; z-index: 2000; pointer-events: none; opacity: .045;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='240' height='240' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E");
}

/* Scroll reveal */
.spx-reveal { opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); }
.spx-reveal.spx-in { opacity: 1; transform: none; }
.spx-reveal.spx-d1 { transition-delay: .08s; } .spx-reveal.spx-d2 { transition-delay: .16s; } .spx-reveal.spx-d3 { transition-delay: .24s; }

.spx-wrap { width: min(var(--max), calc(100% - 40px)); margin-inline: auto; }
.spx-section { padding: 84px 0; }
.spx-section.spx-tight { padding: 52px 0; }
.spx-section.spx-paper { background: var(--paper); }
.spx-section.spx-ink { background: var(--ink); color: #fff; position: relative; overflow: hidden; }
.spx-section.spx-ink::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 50% at 85% 10%, rgba(242,133,0,.12), transparent 60%);
}
.spx-eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--orange);
}
.spx-eyebrow::before { content: ""; width: 22px; height: 2px; background: var(--orange); }
.spx-page h1, .spx-page h2, .spx-page h3 { line-height: 1.05; margin: 0 0 .5em; text-wrap: pretty; }
.spx-page h1 { font-family: var(--display); font-size: clamp(3rem, 8vw, 6rem); letter-spacing: .015em; font-weight: 400; }
.spx-page h2 { font-family: var(--display); font-size: clamp(2.1rem, 4.5vw, 3.4rem); letter-spacing: .015em; font-weight: 400; }
.spx-page h3 { font-size: 1.15rem; font-weight: 700; }
.spx-outline { color: transparent; -webkit-text-stroke: 2px currentColor; }
.spx-hero .spx-outline { -webkit-text-stroke-color: var(--orange); }
.spx-ink .spx-outline { -webkit-text-stroke-color: rgba(255,255,255,.85); }
.spx-page p { margin: 0 0 1em; color: var(--muted); }
.spx-ink p, .spx-hero p { color: rgba(255,255,255,.82); }
.spx-lead { font-size: 1.1rem; max-width: 52ch; }

/* Header */
.spx-header {
  position: sticky; top: 0; z-index: 900;
  backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  background: rgba(255,255,255,.88);
  border-bottom: 1px solid rgba(11,18,32,.06);
  transition: background .25s ease;
}
body.admin-bar .spx-header { top: 32px; }
.spx-header.spx-on-dark { background: rgba(11,18,32,.66); border-bottom-color: rgba(255,255,255,.08); color: #fff; }
.spx-nav-row { height: var(--header-h); display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.spx-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: .04em; }
.spx-brand img { height: 40px; width: auto; }
.spx-nav-links { display: flex; align-items: center; gap: 4px; list-style: none; margin: 0; padding: 0; }
.spx-nav-links a { padding: 10px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; color: var(--muted); transition: .15s; }
.spx-header.spx-on-dark .spx-nav-links a { color: rgba(255,255,255,.78); }
.spx-nav-links a:hover, .spx-nav-links a.spx-active { color: var(--ink); background: var(--orange-soft); }
.spx-header.spx-on-dark .spx-nav-links a:hover, .spx-header.spx-on-dark .spx-nav-links a.spx-active { color: #fff; background: rgba(242,133,0,.2); }
.spx-nav-actions { display: flex; align-items: center; gap: 8px; }
.spx-menu-toggle { display: none; border: 0; background: transparent; padding: 8px; cursor: pointer; color: inherit; }
.spx-menu-toggle span { display: block; width: 22px; height: 2px; background: currentColor; margin: 5px 0; }

/* Buttons */
.spx-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 999px;
  font-weight: 700; font-size: 15px; border: 2px solid transparent;
  cursor: pointer; transition: transform .18s ease, background .18s ease, border-color .18s ease, box-shadow .18s ease;
  white-space: nowrap;
}
.spx-btn:active { transform: scale(.97); }
.spx-btn-primary { background: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(242,133,0,.35); }
.spx-btn-primary:hover { background: var(--orange-deep); transform: translateY(-2px); box-shadow: 0 12px 32px rgba(242,133,0,.45); color:#fff; }
.spx-btn-secondary { background: rgba(255,255,255,.08); border-color: rgba(255,255,255,.4); color: #fff; backdrop-filter: blur(6px); }
.spx-btn-secondary:hover { background: rgba(255,255,255,.16); border-color: rgba(255,255,255,.7); color:#fff; }
.spx-btn-ghost { background: #fff; border-color: var(--line); color: var(--ink); }
.spx-btn-ghost:hover { border-color: var(--orange); color: var(--orange-deep); transform: translateY(-2px); }
.spx-btn-dark { background: var(--ink); color: #fff; }
.spx-btn-dark:hover { background: var(--ink-2); transform: translateY(-2px); color:#fff; }
.spx-btn-wa { background: #25D366; color: #fff; box-shadow: 0 8px 24px rgba(37,211,102,.3); }
.spx-btn-wa:hover { filter: brightness(1.05); transform: translateY(-2px); color:#fff; }
.spx-btn-block { width: 100%; }
.spx-btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero */
.spx-hero {
  position: relative; min-height: min(92vh, 860px);
  display: grid; align-items: end; color: #fff; overflow: hidden;
  background: var(--ink);
}
.spx-hero video, .spx-hero .spx-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; z-index: 0;
}
.spx-hero .spx-shade {
  position: absolute; inset: 0; z-index: 1;
  background:
    linear-gradient(180deg, rgba(11,18,32,.34) 0%, rgba(11,18,32,.55) 55%, rgba(11,18,32,.94) 100%),
    radial-gradient(ellipse at 72% 18%, rgba(242,133,0,.28), transparent 50%);
}
.spx-hero-inner { position: relative; z-index: 2; padding: 130px 0 60px; }
.spx-hero h1 { max-width: 12ch; margin-bottom: 18px; }
.spx-hero .spx-lead { margin-bottom: 30px; }
.spx-trust-strip { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 30px; }
.spx-pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16);
  backdrop-filter: blur(8px);
  border-radius: 999px; padding: 8px 15px; font-size: 13px; font-weight: 600; color: #fff;
}
.spx-pill b { color: #ffd089; }
.spx-scroll-hint {
  position: absolute; right: 26px; bottom: 26px; z-index: 2;
  font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(255,255,255,.55);
  writing-mode: vertical-rl; display: flex; align-items: center; gap: 8px;
}
.spx-scroll-hint::after { content: ""; width: 1px; height: 44px; background: linear-gradient(var(--orange), transparent); }

/* Ticker */
.spx-ticker { background: var(--orange); color: var(--ink); overflow: hidden; padding: 12px 0; position: relative; z-index: 3; }
.spx-ticker-track { display: flex; width: max-content; animation: spx-tick 28s linear infinite; }
.spx-ticker span {
  font-family: var(--display); font-size: 1.25rem; letter-spacing: .06em;
  padding: 0 18px; white-space: nowrap; display: flex; align-items: center; gap: 18px;
}
.spx-ticker span::after { content: "◆"; font-size: .7rem; }
@keyframes spx-tick { to { transform: translateX(-50%); } }

/* Info bar */
.spx-info-bar { position: relative; z-index: 2; }
.spx-info-grid {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px;
  background: var(--line); border-radius: 0 0 var(--radius) var(--radius); overflow: hidden; box-shadow: var(--shadow);
}
.spx-info-card { background: #fff; padding: 26px 22px; transition: background .2s; }
.spx-info-card:hover { background: var(--orange-soft); }
.spx-info-card .k { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; }
.spx-info-card .v { font-family: var(--display); font-size: 2.1rem; color: var(--ink); line-height: 1; letter-spacing: .02em; }
.spx-info-card .v em { font-style: normal; color: var(--orange); font-size: 1rem; font-family: var(--font); font-weight: 700; }
.spx-info-card .v.small { font-size: 1.5rem; }

/* Split */
.spx-split { display: grid; grid-template-columns: 1.05fr .95fr; gap: 52px; align-items: center; }
.spx-split.spx-reverse { grid-template-columns: .95fr 1.05fr; }
.spx-split.spx-reverse .spx-copy { order: 2; }
.spx-media-card {
  border-radius: 24px; overflow: hidden; min-height: 380px;
  background-size: cover; background-position: center;
  box-shadow: var(--shadow); position: relative;
  transition: transform .4s cubic-bezier(.2,.7,.3,1);
}
.spx-media-card:hover { transform: scale(1.015); }
.spx-media-card .spx-badge {
  position: absolute; left: 18px; bottom: 18px;
  background: rgba(255,255,255,.94); backdrop-filter: blur(6px);
  color: var(--ink); border-radius: 14px;
  padding: 12px 16px; font-weight: 700; font-size: 14px; box-shadow: var(--shadow);
}
.spx-media-card .spx-badge span { display: block; color: var(--muted); font-size: 12px; font-weight: 600; }

/* Cards */
.spx-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.spx-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; }
.spx-card {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 28px 24px; transition: .22s ease; position: relative; overflow: hidden;
}
.spx-card::before {
  content: ""; position: absolute; left: 0; top: 0; height: 3px; width: 0;
  background: var(--orange); transition: width .3s ease;
}
.spx-card:hover { border-color: #f0c48a; box-shadow: var(--shadow); transform: translateY(-4px); }
.spx-card:hover::before { width: 100%; }
.spx-card .spx-icon {
  width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center;
  background: var(--orange-soft); color: var(--orange-deep); font-size: 20px; margin-bottom: 16px;
}
.spx-card p { font-size: .95rem; margin-bottom: 0; }
.spx-card h3 { margin-bottom: 8px; }

/* Steps */
.spx-steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; counter-reset: spxstep; position: relative; z-index: 1; }
.spx-step {
  position: relative; background: rgba(255,255,255,.045);
  border: 1px solid rgba(255,255,255,.09); border-radius: var(--radius);
  padding: 24px 18px; transition: .2s;
}
.spx-step:hover { background: rgba(255,255,255,.08); border-color: rgba(242,133,0,.4); }
.spx-step::before {
  counter-increment: spxstep; content: "0" counter(spxstep);
  font-family: var(--display); font-size: 2.2rem; color: var(--orange);
  display: block; margin-bottom: 8px; letter-spacing: .04em;
}
.spx-step h3 { color: #fff; margin-bottom: 6px; }
.spx-step p { color: rgba(255,255,255,.7); margin: 0; font-size: .92rem; }

/* Gallery */
.spx-gallery {
  display: grid; gap: 12px; margin-top: 26px;
  grid-template-columns: repeat(4, 1fr); grid-auto-rows: 200px;
}
.spx-gallery a { border-radius: 14px; overflow: hidden; position: relative; display: block; }
.spx-gallery a:nth-child(1) { grid-column: span 2; grid-row: span 2; }
.spx-gallery a:nth-child(4) { grid-row: span 2; }
.spx-gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.2,.7,.3,1); }
.spx-gallery a:hover img { transform: scale(1.06); }
.spx-gallery a::after {
  content: "@spadelx.om"; position: absolute; left: 12px; bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: .08em; color: #fff;
  opacity: 0; transition: opacity .25s; text-shadow: 0 2px 8px rgba(0,0,0,.6);
}
.spx-gallery a:hover::after { opacity: 1; }

/* Testimonials */
.spx-quote { background: #fff; border-radius: var(--radius); border: 1px solid var(--line); padding: 26px; display: flex; flex-direction: column; gap: 14px; margin: 0; }
.spx-stars { color: var(--orange); letter-spacing: 2px; font-size: 14px; }
.spx-quote p { color: var(--ink); margin: 0; font-size: 1.02rem; }
.spx-quote footer { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.spx-avatar {
  width: 42px; height: 42px; border-radius: 50%;
  background: linear-gradient(135deg, #1a2438, #3b4a66);
  color: #fff; display: grid; place-items: center; font-weight: 700; font-size: 14px;
}
.spx-quote strong { display: block; font-size: 14px; }
.spx-quote small { color: var(--muted); }
.spx-rating-badge {
  display: inline-flex; align-items: center; gap: 12px;
  background: #fff; border: 1px solid var(--line); border-radius: 999px;
  padding: 10px 20px; font-weight: 800; box-shadow: var(--shadow);
}
.spx-rating-badge .score { font-family: var(--display); font-size: 1.9rem; color: var(--ink); line-height: 1; }
.spx-rating-badge small { color: var(--muted); font-weight: 600; }

/* CTA band */
.spx-cta-band {
  border-radius: 26px; position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 15% 20%, rgba(242,133,0,.4), transparent 42%),
    linear-gradient(135deg, #121a2b, #0b1220 55%, #241503);
  color: #fff; padding: 56px 48px;
  display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap;
}
.spx-cta-band::after {
  content: "BOOK. PLAY. COMPETE."; position: absolute; right: -10px; bottom: -22px;
  font-family: var(--display); font-size: 5.5rem; letter-spacing: .04em;
  color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,.08); pointer-events: none; white-space: nowrap;
}
.spx-cta-band h2 { margin-bottom: 8px; }
.spx-cta-band p { margin: 0; max-width: 46ch; }

/* Page hero */
.spx-page-hero {
  padding: 80px 0 40px; position: relative; overflow: hidden;
  background: radial-gradient(ellipse at 82% 0%, rgba(242,133,0,.14), transparent 45%), var(--paper);
  border-bottom: 1px solid var(--line);
}
.spx-page-hero::after {
  content: attr(data-word); position: absolute; right: -1%; bottom: -34%;
  font-family: var(--display); font-size: clamp(6rem, 18vw, 13rem); line-height: 1;
  color: transparent; -webkit-text-stroke: 1.5px rgba(11,18,32,.06); pointer-events: none; white-space: nowrap;
}
.spx-page-hero h1, .spx-page-hero .spx-lead, .spx-page-hero .spx-eyebrow { position: relative; z-index: 1; }
.spx-page-hero .spx-lead { color: var(--muted); }

/* Forms */
.spx-form { display: grid; gap: 14px; background: #fff; border: 1px solid var(--line); border-radius: 20px; padding: 26px; box-shadow: var(--shadow); }
.spx-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.spx-form input, .spx-form textarea, .spx-form select { border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px; background: var(--paper); color: var(--ink); outline: none; transition: .15s; width: 100%; }
.spx-form input:focus, .spx-form textarea:focus, .spx-form select:focus { border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(242,133,0,.15); }
.spx-form textarea { min-height: 120px; resize: vertical; }
.spx-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.spx-contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items: start; }
.spx-contact-list { display: grid; gap: 14px; margin-top: 20px; }
.spx-contact-item { display: grid; grid-template-columns: 46px 1fr; gap: 12px; align-items: start; padding: 15px; border-radius: 15px; background: #fff; border: 1px solid var(--line); transition: .18s; }
.spx-contact-item:hover { border-color: #f0c48a; transform: translateX(3px); }
.spx-contact-item .ic { width: 46px; height: 46px; border-radius: 13px; background: var(--orange-soft); display: grid; place-items: center; color: var(--orange-deep); font-weight: 800; }
.spx-contact-item strong { display: block; font-size: 14px; }
.spx-contact-item span, .spx-contact-item a { color: var(--muted); font-size: 14px; }
.spx-map-embed { border-radius: 24px; overflow: hidden; box-shadow: var(--shadow); border: 1px solid var(--line); }
.spx-map-embed iframe { display: block; width: 100%; height: 380px; border: 0; filter: saturate(.9); }

/* Shop */
.spx-drop-hero {
  border-radius: 26px; overflow: hidden; position: relative; min-height: 320px;
  display: flex; align-items: flex-end; color: #fff;
  background-size: cover; background-position: center 30%;
  box-shadow: var(--shadow);
}
.spx-drop-hero .spx-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(11,18,32,.15), rgba(11,18,32,.88) 90%); }
.spx-drop-hero .inner { position: relative; z-index: 1; padding: 36px; display: flex; justify-content: space-between; gap: 20px; align-items: flex-end; flex-wrap: wrap; width: 100%; }
.spx-drop-hero h2 { margin-bottom: 6px; }
.spx-drop-hero p { margin: 0; color: rgba(255,255,255,.85); max-width: 52ch; }
.spx-product-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px; }
.spx-product { border: 1px solid var(--line); border-radius: 20px; overflow: hidden; background: #fff; display: flex; flex-direction: column; transition: .2s; }
.spx-product:hover { box-shadow: var(--shadow); transform: translateY(-4px); }
.spx-product .ph {
  aspect-ratio: 4/3; display: grid; place-items: center; color: rgba(255,255,255,.55); font-weight: 700;
  background: linear-gradient(160deg, #1a2438, #0b1220 60%, #3a2208); position: relative;
  font-family: var(--display); font-size: 2rem; letter-spacing: .05em;
}
.spx-product .tag { position: absolute; top: 12px; left: 12px; background: var(--orange); color: #fff; font-size: 11px; font-weight: 800; padding: 5px 10px; border-radius: 999px; letter-spacing: .06em; font-family: var(--font); }
.spx-product .body { padding: 18px 18px 20px; display: grid; gap: 8px; flex: 1; align-content: start; }
.spx-product h3 { font-size: 1rem; margin: 0; }

/* Legal */
.spx-prose { max-width: 72ch; }
.spx-prose h2 { font-family: var(--font); font-size: 1.35rem; font-weight: 800; margin-top: 1.6em; }
.spx-prose h3 { font-size: 1.05rem; margin-top: 1.2em; }
.spx-prose p, .spx-prose li { color: var(--muted); }
.spx-prose ul { padding-left: 1.2em; }
.spx-legal-note { border: 1px dashed #f0c48a; background: var(--orange-soft); border-radius: var(--radius); padding: 14px 18px; font-size: 14px; }
.spx-legal-note p { margin: 0; color: var(--ink); }
.spx-faq details { border: 1px solid var(--line); border-radius: 15px; background: #fff; padding: 17px 19px; margin-bottom: 10px; transition: .18s; }
.spx-faq details:hover { border-color: #f0c48a; }
.spx-faq summary { cursor: pointer; font-weight: 700; list-style: none; display: flex; justify-content: space-between; gap: 12px; align-items: center; }
.spx-faq summary::-webkit-details-marker { display: none; }
.spx-faq summary::after { content: "+"; color: var(--orange); font-size: 1.3rem; font-weight: 500; transition: transform .2s; }
.spx-faq details[open] summary::after { content: "–"; }
.spx-faq details p { margin: 12px 0 0; }

/* Footer */
.spx-footer { background: #060a12; color: rgba(255,255,255,.75); padding: 64px 0 24px; position: relative; overflow: hidden; }
.spx-footer .big-mark {
  font-family: var(--display); font-size: clamp(4rem, 12vw, 9rem); line-height: .9;
  color: transparent; -webkit-text-stroke: 1.5px rgba(255,255,255,.09);
  white-space: nowrap; margin-bottom: 40px; user-select: none;
}
.spx-foot-grid { display: grid; grid-template-columns: 1.3fr .8fr .8fr 1fr; gap: 28px; margin-bottom: 40px; }
.spx-footer h3 { color: #fff; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 14px; }
.spx-footer a { color: rgba(255,255,255,.72); transition: color .15s; }
.spx-footer a:hover { color: var(--orange); }
.spx-footer .spx-brand { color: #fff; margin-bottom: 12px; }
.spx-foot-links { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; font-size: 14px; }
.spx-newsletter { display: grid; gap: 8px; }
.spx-newsletter .row { display: flex; gap: 8px; }
.spx-newsletter input { flex: 1; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; padding: 12px 14px; outline: none; }
.spx-newsletter input:focus { border-color: var(--orange); }
.spx-legal-row { border-top: 1px solid rgba(255,255,255,.08); padding-top: 18px; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 13px; }
.spx-socials { display: flex; gap: 10px; }
.spx-socials a { width: 38px; height: 38px; border-radius: 50%; border: 1px solid rgba(255,255,255,.14); display: grid; place-items: center; font-size: 13px; font-weight: 800; transition: .18s; }
.spx-socials a:hover { background: var(--orange); border-color: var(--orange); color: #fff; transform: translateY(-2px); }

.spx-mobile-cta { display: none; position: fixed; left: 12px; right: 12px; bottom: 12px; z-index: 950; gap: 8px; }
.spx-mobile-cta .spx-btn { flex: 1; box-shadow: 0 10px 30px rgba(0,0,0,.25); }

/* Language switcher — minimal text pill, no flags */
.spx-lang {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--line); border-radius: 999px; padding: 7px 13px;
  font-size: 13px; font-weight: 700; background: #fff; color: var(--muted);
}
.spx-header.spx-on-dark .spx-lang { background: transparent; border-color: rgba(255,255,255,.2); color: rgba(255,255,255,.65); }
.spx-lang .sep { opacity: .4; }
.spx-lang a { color: inherit; transition: color .15s; }
.spx-lang a:hover { color: var(--orange-deep); }
.spx-header.spx-on-dark .spx-lang a:hover { color: #ffd089; }
.spx-lang a.on { color: var(--orange-deep); }
.spx-header.spx-on-dark .spx-lang a.on { color: var(--orange); }
.spx-lang a.ar { font-family: "Tajawal", sans-serif; }

/* Brand / logo integrity */
.spx-brand { flex-shrink: 0; min-width: 0; }
.spx-brand img { height: 40px; width: auto; max-width: 150px; object-fit: contain; object-position: left center; }

/* Footer map link */
.spx-foot-map {
  display: inline-flex; align-items: center; gap: 7px; margin-top: 12px;
  font-size: 13px; font-weight: 700; color: rgba(255,255,255,.85) !important;
  border: 1px solid rgba(255,255,255,.14); border-radius: 999px; padding: 8px 14px;
  transition: .18s;
}
.spx-foot-map:hover { border-color: var(--orange); color: var(--orange) !important; }

/* Contact Form 7 — match design system */
.spx-form .wpcf7-form { display: grid; gap: 14px; }
.spx-form .wpcf7-form p { margin: 0; display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); }
.spx-form .wpcf7-form .wpcf7-form-control-wrap { display: block; margin-top: 6px; font-weight: 400; }
.spx-form .wpcf7-form input[type="text"],
.spx-form .wpcf7-form input[type="email"],
.spx-form .wpcf7-form input[type="tel"],
.spx-form .wpcf7-form select,
.spx-form .wpcf7-form textarea {
  width: 100%; border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--paper); color: var(--ink); outline: none; transition: .15s; font: inherit;
}
.spx-form .wpcf7-form input:focus, .spx-form .wpcf7-form select:focus, .spx-form .wpcf7-form textarea:focus {
  border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(242,133,0,.15);
}
.spx-form .wpcf7-form textarea { min-height: 120px; resize: vertical; }
.spx-form .wpcf7-submit {
  min-height: 50px; border-radius: 999px; border: 0; cursor: pointer;
  background: var(--orange); color: #fff; font-weight: 700; font-size: 15px;
  box-shadow: 0 8px 24px rgba(242,133,0,.35); transition: .18s;
}
.spx-form .wpcf7-submit:hover { background: var(--orange-deep); transform: translateY(-2px); }
.spx-form .wpcf7-response-output { margin: 0 !important; padding: 10px 14px; border-radius: 12px; font-size: 13px; }
.spx-form .wpcf7-not-valid-tip { font-size: 12px; color: #c0392b; margin-top: 4px; font-weight: 600; }
.spx-form .wpcf7-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Mailchimp form polish */
.spx-newsletter .mc4wp-form-fields { display: grid; gap: 8px; }
.spx-newsletter .mc4wp-form-fields p { margin: 0; display: flex; gap: 8px; }
.spx-newsletter input[type="email"] { flex: 1; border-radius: 999px; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.05); color: #fff; padding: 12px 14px; outline: none; }
.spx-newsletter input[type="email"]:focus { border-color: var(--orange); }
.spx-newsletter input[type="submit"] { border: 0; border-radius: 999px; padding: 0 22px; min-height: 46px; background: var(--orange); color: #fff; font-weight: 700; cursor: pointer; }
.spx-newsletter label { display: flex; gap: 8px; align-items: flex-start; font-size: 12px; color: rgba(255,255,255,.6); }
.spx-newsletter .mc4wp-response { font-size: 13px; }

@media (max-width: 960px) {
  .spx-grid-3, .spx-steps, .spx-product-grid, .spx-foot-grid, .spx-contact-grid, .spx-split, .spx-split.spx-reverse { grid-template-columns: 1fr 1fr; }
  .spx-info-grid { grid-template-columns: 1fr 1fr; }
  .spx-gallery { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; }
  .spx-split.spx-reverse .spx-copy { order: 0; }
  .spx-foot-grid { grid-template-columns: 1fr 1fr; }
  .spx-nav-links { display: none; }
  .spx-menu-toggle { display: block; }
  .spx-nav-links.spx-open {
    display: flex; flex-direction: column; position: absolute; left: 0; right: 0;
    top: 100%; background: #fff; border-bottom: 1px solid var(--line); padding: 12px; box-shadow: var(--shadow);
  }
  .spx-header.spx-on-dark .spx-nav-links.spx-open { background: var(--ink); }
  .spx-mobile-cta { display: flex; }
  body.spx-body { padding-bottom: 78px; }
  .spx-brand img { height: 34px; max-width: 128px; }
  .spx-nav-row { gap: 10px; }
  .spx-btn { min-height: 46px; padding: 0 18px; font-size: 14px; }
}
@media (max-width: 640px) {
  .spx-wrap { width: min(var(--max), calc(100% - 28px)); }
  .spx-grid-3, .spx-grid-2, .spx-steps, .spx-product-grid, .spx-foot-grid, .spx-contact-grid, .spx-form-row, .spx-split { grid-template-columns: 1fr; }
  .spx-info-grid { grid-template-columns: 1fr 1fr; }
  .spx-info-card { padding: 16px 14px; }
  .spx-info-card .v { font-size: 1.45rem; }
  .spx-info-card .v.small { font-size: 1.15rem; }
  .spx-gallery { grid-template-columns: 1fr 1fr; grid-auto-rows: 150px; }
  .spx-hero { min-height: 78vh; }
  .spx-hero-inner { padding: 88px 0 44px; }
  .spx-page h1 { font-size: clamp(2.4rem, 11vw, 3.2rem); }
  .spx-page h2 { font-size: clamp(1.7rem, 8vw, 2.3rem); }
  .spx-lead { font-size: 1rem; }
  .spx-ticker span { font-size: 1.05rem; padding: 0 12px; }
  .spx-cta-band { padding: 30px 24px; }
  .spx-cta-band::after { font-size: 3.2rem; }
  .spx-section { padding: 56px 0; }
  .spx-page-hero { padding: 56px 0 30px; }
  .spx-drop-hero { min-height: 260px; }
  .spx-drop-hero .inner { padding: 24px 20px; }
  .spx-nav-actions .spx-btn-ghost { display: none; }
  .spx-lang { padding: 6px 10px; font-size: 12px; }
  .spx-scroll-hint { display: none; }
  .spx-contact-item { grid-template-columns: 40px 1fr; padding: 12px; }
  .spx-contact-item .ic { width: 40px; height: 40px; }
  .spx-media-card { min-height: 300px; }
  .spx-map-embed iframe { height: 300px; }
  .spx-form .wpcf7-form-row { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .spx-page *, .spx-page *::before, .spx-page *::after { scroll-behavior: auto !important; transition: none !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
  .spx-reveal { opacity: 1; transform: none; }
  .spx-hero video { display: none; }
  .spx-ticker-track { animation: none; }
}


/* === v3.1: switcher, logo, mobile-first, CF7, RTL, Arabic === */

/* Minimal language switcher (no flags) */
.spx-lang { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); background: #fff; border-radius: 999px; padding: 8px 13px; font-size: 13px; font-weight: 700; }
.spx-header.spx-on-dark .spx-lang { background: transparent; border-color: rgba(255,255,255,.22); color: #fff; }
.spx-lang a { color: var(--muted); transition: color .15s; }
.spx-header.spx-on-dark .spx-lang a { color: rgba(255,255,255,.65); }
.spx-lang a.on, .spx-lang a:hover { color: var(--orange-deep); }
.spx-header.spx-on-dark .spx-lang a.on, .spx-header.spx-on-dark .spx-lang a:hover { color: var(--orange); }
.spx-lang .sep { color: var(--line); }
.spx-header.spx-on-dark .spx-lang .sep { color: rgba(255,255,255,.25); }

/* Logo: never squish */
.spx-brand img { height: 40px; width: auto; max-width: none; object-fit: contain; }

/* Footer address link */
.spx-foot-addr { font-weight: 600; }

/* CF7 inside design forms */
.spx-form form.wpcf7-form { display: grid; gap: 14px; }
.spx-form .wpcf7-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--ink); width: 100%; }
.spx-form .wpcf7-form p { margin: 0; display: grid; gap: 14px; }
.spx-form .wpcf7-form-control-wrap, .spx-form .wpcf7-form-control-wrap input, .spx-form .wpcf7-form-control-wrap textarea, .spx-form .wpcf7-form-control-wrap select { width: 100%; display: block; }
.spx-form input.wpcf7-form-control:not([type=submit]), .spx-form textarea.wpcf7-form-control, .spx-form select.wpcf7-form-control {
  border: 1px solid var(--line); border-radius: 12px; padding: 12px 14px;
  background: var(--paper); color: var(--ink); outline: none; transition: .15s; font-size: 15px;
}
.spx-form input.wpcf7-form-control:focus, .spx-form textarea.wpcf7-form-control:focus, .spx-form select.wpcf7-form-control:focus {
  border-color: var(--orange); background: #fff; box-shadow: 0 0 0 3px rgba(242,133,0,.15);
}
.spx-form input.wpcf7-submit {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: 50px; padding: 0 24px; border-radius: 999px; width: 100%;
  font-weight: 700; font-size: 15px; border: 2px solid transparent; cursor: pointer;
  background: var(--orange); color: #fff; box-shadow: 0 8px 24px rgba(242,133,0,.35); transition: .18s;
}
.spx-form input.wpcf7-submit:hover { background: var(--orange-deep); transform: translateY(-2px); }
.spx-form .wpcf7-not-valid-tip { color: #dc2626; font-size: 12px; margin-top: 4px; }
.spx-form .wpcf7-response-output { border-radius: 12px !important; margin: 0 !important; font-size: 14px; }
.spx-form .wpcf7-spinner { margin: 0 auto; }
.spx-form .spx-cf7-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Mobile-first refinements */
@media (max-width: 782px) {
  body.admin-bar .spx-header { top: 46px; }
}
@media (max-width: 960px) {
  .spx-hero { min-height: 78vh; }
  .spx-hero-inner { padding: 110px 0 48px; }
  .spx-info-grid { grid-template-columns: 1fr 1fr; border-radius: var(--radius); margin-top: 12px; }
  .spx-info-card { padding: 18px 16px; }
  .spx-info-card .v { font-size: 1.6rem; }
  .spx-info-card .v.small { font-size: 1.15rem; }
  .spx-ticker span { font-size: 1.05rem; padding: 0 12px; }
  .spx-btn { min-height: 52px; } /* tap targets */
  .spx-brand img { height: 32px; }
  .spx-nav-row { height: 62px; }
  .spx-scroll-hint { display: none; }
  .spx-page-hero { padding: 56px 0 30px; }
  .spx-media-card { min-height: 300px; }
  .spx-steps { grid-template-columns: 1fr 1fr; }
  .spx-drop-hero .inner { padding: 24px; }
}
@media (max-width: 640px) {
  .spx-hero { min-height: 82svh; }
  .spx-hero-inner { padding: 96px 0 40px; }
  .spx-page h1 { font-size: clamp(2.6rem, 13vw, 3.4rem); }
  .spx-page h2 { font-size: clamp(1.9rem, 8vw, 2.4rem); }
  .spx-lead { font-size: 1rem; }
  .spx-pill { font-size: 12px; padding: 7px 12px; }
  .spx-steps { grid-template-columns: 1fr; }
  .spx-form .spx-cf7-2col { grid-template-columns: 1fr; }
  .spx-card { padding: 22px 18px; }
  .spx-cta-band { padding: 30px 22px; }
  .spx-cta-band .spx-btn-row { width: 100%; }
  .spx-cta-band .spx-btn { flex: 1; }
  .spx-footer .big-mark { font-size: 3.2rem; }
  .spx-nav-actions .spx-btn-primary { display: none; } /* keep header slim: mobile-cta bar covers it */
  .spx-newsletter .row { flex-direction: column; }
  .spx-newsletter .row .spx-btn, .spx-newsletter .row input[type=submit] { width: 100%; }
  .spx-map-embed iframe { height: 300px; }
}

/* RTL (Arabic) */
html[dir="rtl"] .spx-page { direction: rtl; text-align: right; }
html[dir="rtl"] .spx-eyebrow { letter-spacing: 0; }
html[dir="rtl"] .spx-eyebrow::before { order: 2; }
html[dir="rtl"] .spx-media-card .spx-badge { left: auto; right: 18px; }
html[dir="rtl"] .spx-gallery a::after { left: auto; right: 12px; }
html[dir="rtl"] .spx-cta-band::after { right: auto; left: -10px; }
html[dir="rtl"] .spx-page-hero::after { right: auto; left: -1%; }
html[dir="rtl"] .spx-scroll-hint { right: auto; left: 26px; }
html[dir="rtl"] .spx-faq summary::after { margin-right: auto; margin-left: 0; }
html[dir="rtl"] .spx-card::before { left: auto; right: 0; }
html[dir="rtl"] .spx-contact-item:hover { transform: translateX(-3px); }
html[dir="rtl"] .spx-ticker-track { animation-name: spx-tick-rtl; }
@keyframes spx-tick-rtl { to { transform: translateX(50%); } }
html[dir="rtl"] .spx-info-card, html[dir="rtl"] .spx-card, html[dir="rtl"] .spx-step { text-align: right; }
html[dir="rtl"] .spx-quote footer { flex-direction: row; }
html[dir="rtl"] .spx-socials { justify-content: flex-start; }

/* Arabic fonts */
html[lang="ar"] .spx-page, html[lang="ar"] .spx-page input, html[lang="ar"] .spx-page textarea, html[lang="ar"] .spx-page select, html[lang="ar"] .spx-page button {
  font-family: "Tajawal", "DM Sans", system-ui, sans-serif;
}
html[lang="ar"] .spx-page h1, html[lang="ar"] .spx-page h2, html[lang="ar"] .spx-ticker span,
html[lang="ar"] .spx-info-card .v, html[lang="ar"] .spx-rating-badge .score, html[lang="ar"] .spx-footer .big-mark,
html[lang="ar"] .spx-page-hero::after, html[lang="ar"] .spx-cta-band::after, html[lang="ar"] .spx-step::before {
  font-family: "Cairo", "Tajawal", sans-serif; font-weight: 800; letter-spacing: 0;
}
html[lang="ar"] .spx-outline { -webkit-text-stroke-width: 1.5px; }
html[lang="ar"] .spx-footer .big-mark, html[lang="ar"] .spx-page-hero::after, html[lang="ar"] .spx-cta-band::after { display: none; } /* latin watermarks off in AR */
html[lang="ar"] .spx-management-help::after { display: none; }


/* === v3.2: visible-by-default accents (no hover needed) === */
.spx-card {
  border-color: #ecd9bd;
  box-shadow: 0 4px 18px rgba(11,18,32,.06);
}
.spx-card::before { width: 34px; } /* orange tab always visible, grows on hover */
.spx-info-card { border-top: 3px solid var(--orange); }
.spx-step { background: rgba(255,255,255,.07); border-color: rgba(242,133,0,.28); }
.spx-contact-item { border-inline-start: 3px solid var(--orange); }
.spx-quote { border-inline-start: 3px solid var(--orange); }
.spx-faq details { border-inline-start: 3px solid #ecd9bd; }
.spx-faq details[open] { border-inline-start-color: var(--orange); }
.spx-product { box-shadow: 0 4px 18px rgba(11,18,32,.06); }

/* Reveal fallback: if IntersectionObserver never fires, show everything */
.spx-no-js .spx-reveal, .spx-reveal.spx-force-in { opacity: 1 !important; transform: none !important; }


/* === v3.3: footer contrast + visited-state fixes === */
.spx-footer a, .spx-footer a:visited { color: rgba(255,255,255,.78); }
.spx-footer a:hover { color: var(--orange); }
.spx-foot-links a, .spx-foot-links a:visited { color: rgba(255,255,255,.78); }
.spx-footer .spx-foot-addr { color: #ffb45e; font-weight: 700; }
.spx-footer .spx-foot-addr:hover { color: var(--orange); }
.spx-socials a, .spx-socials a:visited { color: #fff; }
.spx-socials a svg { display: block; }
.spx-footer p { color: rgba(255,255,255,.6); }


/* === v3.4: mobile-first footer + bulletproof contrast === */
.spx-btn, .spx-btn:visited { color: #fff; }
.spx-btn-ghost, .spx-btn-ghost:visited { color: var(--ink); }
.spx-footer a, .spx-footer a:visited, .spx-foot-links a, .spx-foot-links a:visited { color: rgba(255,255,255,.82) !important; }
.spx-footer a:hover { color: var(--orange) !important; }
.spx-footer p, .spx-footer .spx-newsletter p { color: rgba(255,255,255,.65); }
.spx-footer .spx-brand { color: #fff; }

/* Mailchimp form on dark */
.spx-newsletter .mc4wp-form label, .spx-newsletter .mc4wp-form .checkbox label { color: rgba(255,255,255,.75); font-size: 13px; }
.spx-newsletter .mc4wp-form a { color: #ffb45e; text-decoration: underline; }
.spx-newsletter input[type=email] {
  width: 100%; border-radius: 999px; border: 1px solid rgba(255,255,255,.16);
  background: rgba(255,255,255,.06); color: #fff; padding: 13px 16px;
}
.spx-newsletter input[type=email]::placeholder { color: rgba(255,255,255,.4); }
.spx-newsletter input[type=submit] {
  width: 100%; margin-top: 8px; min-height: 50px; border: 0; border-radius: 999px;
  background: linear-gradient(135deg, var(--orange), #ff9f2e); color: #fff; font-weight: 800; font-size: 15px; cursor: pointer;
}
.spx-newsletter input[type=submit]:hover { filter: brightness(1.06); }
.spx-newsletter input[type=checkbox] { width: 16px; height: 16px; accent-color: var(--orange); }

/* Mobile footer: 2-col link columns, brand + newsletter full-width */
@media (max-width: 640px) {
  .spx-foot-grid { grid-template-columns: 1fr 1fr; gap: 22px; }
  .spx-foot-grid > div:first-child, .spx-foot-grid > div:last-child { grid-column: 1 / -1; }
  .spx-brand img { height: 36px; }
}


/* === v3.5: self-hosted fonts (SpeedyCache-safe) === */
@font-face {
  font-family: 'Bebas Neue'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/bebas-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'DM Sans'; font-style: normal; font-weight: 400 700; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/dmsans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/cairo-var-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Cairo'; font-style: normal; font-weight: 700 900; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/cairo-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/tajawal400-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/tajawal400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/tajawal500-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/tajawal500-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/tajawal700-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/tajawal700-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/tajawal800-arabic.woff2') format('woff2');
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB, U+10E60-10E7E, U+10EC2-10EC4, U+10EFC-10EFF, U+1EE00-1EE03, U+1EE05-1EE1F, U+1EE21-1EE22, U+1EE24, U+1EE27, U+1EE29-1EE32, U+1EE34-1EE37, U+1EE39, U+1EE3B, U+1EE42, U+1EE47, U+1EE49, U+1EE4B, U+1EE4D-1EE4F, U+1EE51-1EE52, U+1EE54, U+1EE57, U+1EE59, U+1EE5B, U+1EE5D, U+1EE5F, U+1EE61-1EE62, U+1EE64, U+1EE67-1EE6A, U+1EE6C-1EE72, U+1EE74-1EE77, U+1EE79-1EE7C, U+1EE7E, U+1EE80-1EE89, U+1EE8B-1EE9B, U+1EEA1-1EEA3, U+1EEA5-1EEA9, U+1EEAB-1EEBB, U+1EEF0-1EEF1;
}
@font-face {
  font-family: 'Tajawal'; font-style: normal; font-weight: 800; font-display: swap;
  src: url('/wp-content/themes/astra-child/assets/fonts/tajawal800-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* h1 line control (TP-safe structure, no <br>) */
.spx-h1-line { display: inline; }
@media (min-width: 641px) { .spx-hero h1 .spx-h1-line:first-child { display: block; } }


/* === v3.6: booking management pages === */
.spx-management-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
  gap: 24px;
  align-items: start;
}
.spx-management-card {
  overflow: hidden;
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: 24px;
  box-shadow: var(--shadow);
}
.spx-management-card-head {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 24px 28px;
  color: var(--white);
  background:
    radial-gradient(circle at 90% 15%, rgba(242,133,0,.26), transparent 36%),
    linear-gradient(135deg, var(--ink-2), var(--ink));
  border-bottom: 4px solid var(--orange);
}
.spx-management-card-head span:not(.spx-management-icon) {
  display: block;
  margin-bottom: 3px;
  color: rgba(255,255,255,.64);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.spx-management-card-head h2 {
  margin: 0;
  color: var(--white);
  font-family: var(--display);
  font-size: clamp(1.8rem, 4vw, 2.5rem);
}
.spx-management-icon {
  flex: 0 0 50px;
  width: 50px;
  height: 50px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--orange);
  color: var(--white);
  font-size: 29px;
  font-weight: 700;
  line-height: 1;
}
.spx-management-content { padding: 30px 28px 32px; }
.spx-management-help {
  position: relative;
  overflow: hidden;
  padding: 30px 26px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 90% 10%, rgba(242,133,0,.2), transparent 36%),
    var(--ink);
  color: var(--white);
  box-shadow: var(--shadow);
}
.spx-management-help::after {
  content: "PLAY.";
  position: absolute;
  right: -12px;
  bottom: -28px;
  color: transparent;
  font-family: var(--display);
  font-size: 6rem;
  -webkit-text-stroke: 1px rgba(255,255,255,.08);
  pointer-events: none;
}
.spx-management-help h2 {
  position: relative;
  z-index: 1;
  margin-top: 14px;
  color: var(--white);
  font-size: clamp(2rem, 4vw, 2.8rem);
}
.spx-management-help p {
  position: relative;
  z-index: 1;
  color: rgba(255,255,255,.72);
}
.spx-management-help .spx-btn { position: relative; z-index: 1; margin-top: 6px; }

/* Custom rescheduling form */
.spx-management-content .spx-booking-manager {
  max-width: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: var(--ink);
  font-family: var(--font);
}
.spx-management-content .spx-booking-manager h2 {
  margin: 0 0 12px;
  color: var(--ink);
  font-family: var(--font);
  font-size: 1.3rem;
  font-weight: 800;
}
.spx-management-content .spx-booking-summary {
  margin: 18px 0;
  padding: 18px;
  border: 1px solid #f2d3a8;
  border-inline-start: 4px solid var(--orange);
  border-radius: 14px;
  background: var(--orange-soft);
  color: var(--ink);
  line-height: 1.65;
}
.spx-management-content .spx-booking-manager label {
  display: block;
  margin: 20px 0 8px;
  color: var(--ink);
  font-weight: 800;
}
.spx-management-content .spx-booking-manager select {
  width: 100%;
  min-height: 54px;
  padding: 11px 14px;
  border: 1px solid var(--line);
  border-radius: 13px;
  background: var(--paper);
  color: var(--ink);
  outline: none;
}
.spx-management-content .spx-booking-manager select:focus {
  border-color: var(--orange);
  background: var(--white);
  box-shadow: 0 0 0 3px rgba(242,133,0,.15);
}
.spx-management-content .spx-booking-manager button {
  min-height: 52px;
  margin-top: 18px;
  padding: 0 24px;
  border: 0;
  border-radius: 999px;
  background: var(--orange);
  color: var(--white);
  box-shadow: 0 8px 24px rgba(242,133,0,.28);
  font-weight: 800;
  cursor: pointer;
  transition: .18s;
}
.spx-management-content .spx-booking-manager button:hover {
  background: var(--orange-deep);
  transform: translateY(-2px);
}
.spx-management-content .spx-booking-manager small {
  display: block;
  margin-top: 14px;
  color: var(--muted);
  line-height: 1.55;
}
.spx-booking-notice {
  margin: 16px 0;
  padding: 15px 17px;
  border: 1px solid var(--line);
  border-radius: 13px;
  font-family: var(--font);
  font-weight: 650;
  line-height: 1.55;
}
.spx-booking-notice.success { border-color: #a9ddbe; background: #edf9f1; color: #176b35; }
.spx-booking-notice.error { border-color: #efc2c5; background: #fff3f3; color: #9f1d2c; }

/* Booknetic cancellation block: override its legacy Poppins/blue skin. */
.spx-management-content .booknetic_change_status_block {
  width: 100%;
  min-height: 0;
  padding: 8px 0;
  text-align: start;
}
.spx-management-content .booknetic_change_status_block *,
.spx-management-content .booknetic_change_status_block .label,
.spx-management-content .booknetic_change_status_block .change_status_container {
  font-family: var(--font) !important;
}
.spx-management-content .booknetic_change_status_block .label {
  display: block !important;
  margin: 0 0 24px !important;
  padding: 0 !important;
  color: var(--ink) !important;
  font-size: 1.18rem !important;
  font-weight: 800 !important;
  line-height: 1.55 !important;
  text-align: start !important;
}
.spx-management-content .booknetic_change_status_block .change_status_container {
  display: block !important;
  width: 100% !important;
  height: auto !important;
  text-align: start !important;
}
.spx-management-content .booknetic_change_status_block .block__cell { display: block !important; }
.spx-management-content .booknetic_change_status_block .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 52px !important;
  max-height: none !important;
  padding: 0 26px !important;
  border-radius: 999px !important;
  background: var(--orange) !important;
  color: var(--white) !important;
  box-shadow: 0 8px 24px rgba(242,133,0,.28) !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  line-height: 52px !important;
}
.spx-management-content .booknetic_change_status_block .btn:hover { background: var(--orange-deep) !important; }
.spx-management-content .booknetic_change_status_block .btn__icon { display: none !important; }
.spx-management-content .booknetic_change_status_block .btn--changed { background: #16855b !important; }
.spx-management-content .booknetic_change_status_block .btn--error { background: #9f1d2c !important; }
#booknetic-toastr {
  border: 1px solid var(--line) !important;
  border-radius: 14px !important;
  box-shadow: var(--shadow) !important;
  font-family: var(--font) !important;
}
#booknetic-toastr .booknetic-toast-description { color: var(--ink) !important; font-family: var(--font) !important; }

@media (max-width: 820px) {
  .spx-management-grid { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .spx-management-card-head { padding: 21px 19px; }
  .spx-management-content { padding: 23px 19px 25px; }
  .spx-management-help { padding: 26px 21px; }
  .spx-management-help .spx-btn,
  .spx-management-content .spx-booking-manager button,
  .spx-management-content .booknetic_change_status_block .btn { width: 100%; }
}

html[lang="ar"] .spx-management-content .spx-booking-manager,
html[lang="ar"] .spx-management-content .spx-booking-manager label,
html[lang="ar"] .spx-management-content .spx-booking-manager select,
html[lang="ar"] .spx-management-content .spx-booking-manager button,
html[lang="ar"] .spx-management-content .booknetic_change_status_block,
html[lang="ar"] .spx-management-content .booknetic_change_status_block * {
  font-family: "Tajawal", "DM Sans", system-ui, sans-serif !important;
}
html[lang="ar"] .spx-management-card-head h2,
html[lang="ar"] .spx-management-help h2 {
  font-family: "Cairo", "Tajawal", sans-serif;
  font-weight: 800;
  letter-spacing: 0;
}