/* ═════════════════════════════════════════════════════════════
   SAS V53.2 — Hero Overlay (Frontend) — Defensive CSS
   Designed to render correctly across any WordPress theme.
   ═════════════════════════════════════════════════════════════ */

/* ─── V44 Direct Answer block — fix light text on light bg ─── */
html body .sas-direct-answer {
    background: #ecfdf5 !important;
    border: 1px solid #10b981 !important;
    color: #064e3b !important;
}
html body .sas-direct-answer .sas-da-text,
html body .sas-direct-answer p,
html body .sas-direct-answer span,
html body .sas-direct-answer strong {
    color: #064e3b !important;
}
html body .sas-direct-answer small {
    color: #047857 !important;
    opacity: 1 !important;
}
html body .sas-direct-answer .sas-da-stat {
    color: #1f2937 !important;
}
html body .sas-direct-answer .sas-da-stat strong {
    color: #065f46 !important;
    font-weight: 800 !important;
}
html body .sas-direct-answer .sas-da-icon,
html body .sas-direct-answer .sas-da-icon-mini {
    color: #10b981 !important;
}

/* ─── V44 Hero (sas-block sas-hero) — make sure white text stays readable ─── */
html body .sas-block.sas-hero {
    color: #fff !important;
}
html body .sas-block.sas-hero .sas-hero-title,
html body .sas-block.sas-hero h1,
html body .sas-block.sas-hero .lead,
html body .sas-block.sas-hero p,
html body .sas-block.sas-hero .stats-inline span,
html body .sas-block.sas-hero .benefits-inline span,
html body .sas-block.sas-hero .stat-num,
html body .sas-block.sas-hero .stat-lbl {
    color: #fff !important;
    text-shadow: 0 1px 4px rgba(0,0,0,.3);
}
html body .sas-block.sas-hero .stats-inline strong,
html body .sas-block.sas-hero .benefits-inline strong {
    color: #fef9c3 !important;
}

/* Reset inheritance — prevent theme padding/margins from breaking */
.sas-hero-wrapper,
.sas-hero-wrapper * {
    box-sizing: border-box !important;
}

.sas-hero-wrapper {
    position: relative !important;
    overflow: hidden !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 1em 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    direction: rtl !important;
    font-family: var(--sas-fp, 'Cairo'), 'Tajawal', sans-serif !important;
    color: var(--sas-text, #fff) !important;
    display: block !important;
    line-height: 1.5 !important;
}

/* heights — use min-height instead of aspect-ratio (more universal) */
.sas-hero-h-small  { min-height: 240px; aspect-ratio: 16 / 7; }
.sas-hero-h-medium { min-height: 360px; aspect-ratio: 16 / 8; }
.sas-hero-h-large  { min-height: 480px; aspect-ratio: 16 / 9; }
.sas-hero-h-xlarge { min-height: 600px; aspect-ratio: 16 / 11; }

/* All children of wrapper that are images = backdrop image */
.sas-hero-wrapper > img,
.sas-hero-wrapper > figure,
.sas-hero-wrapper > figure > img,
.sas-hero-wrapper > a,
.sas-hero-wrapper > a > img,
.sas-hero-wrapper > picture,
.sas-hero-wrapper > picture > img {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    z-index: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 12px !important;
    max-width: none !important;
}

.sas-hero-wrapper > figure {
    margin: 0 !important;
}
.sas-hero-wrapper > figure figcaption {
    display: none !important;
}

/* ─── Overlay container ─── */
.sas-hero-wrapper .sas-hero-overlay {
    position: absolute !important;
    inset: 0 !important;
    z-index: 5 !important;
    display: flex !important;
    flex-direction: column !important;
    padding: clamp(16px, 3vw, 36px) clamp(20px, 4vw, 48px) !important;
    pointer-events: none !important;
    margin: 0 !important;
    background: transparent !important;
}
.sas-hero-wrapper .sas-hero-overlay > * { pointer-events: auto !important; }

.sas-pos-top    { justify-content: flex-start; }
.sas-pos-center { justify-content: center;     }
.sas-pos-bottom { justify-content: flex-end;   }

.sas-align-right  { text-align: right;  align-items: flex-end;   }
.sas-align-center { text-align: center; align-items: center;     }
.sas-align-left   { text-align: left;   align-items: flex-start; }

/* ═════════════ OVERLAY STYLES ═════════════ */
.sas-hero-overlay-gradient-bottom::before {
    content: '';
    position: absolute; inset: 0;
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, calc(var(--sas-overlay, 60) * 0.012))   0%,
        rgba(0, 0, 0, calc(var(--sas-overlay, 60) * 0.008)) 40%,
        transparent 100%
    );
    z-index: 2;
    pointer-events: none;
}

.sas-hero-overlay-gradient-radial::before {
    content: '';
    position: absolute; inset: 0;
    background: radial-gradient(
        circle at center,
        rgba(0, 0, 0, calc(var(--sas-overlay, 60) * 0.005)) 0%,
        rgba(0, 0, 0, calc(var(--sas-overlay, 60) * 0.012)) 100%
    );
    z-index: 2;
    pointer-events: none;
}

.sas-hero-overlay-solid-tint::before {
    content: '';
    position: absolute; inset: 0;
    background: rgba(10, 22, 40, calc(var(--sas-overlay, 60) * 0.01));
    z-index: 2;
    pointer-events: none;
}

.sas-hero-overlay-vignette::before {
    content: '';
    position: absolute; inset: 0;
    box-shadow: inset 0 0 200px rgba(0, 0, 0, calc(var(--sas-overlay, 60) * 0.012));
    z-index: 2;
    pointer-events: none;
}

/* ═════════════ CONTENT ═════════════ */
.sas-hero-content {
    position: relative;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 16px;
    max-width: 80%;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.6);
}

/* Brand row — defensive */
.sas-hero-wrapper .sas-hero-brand-row {
    display: flex !important;
    align-items: center !important;
    gap: clamp(8px, 1.5vw, 14px) !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sas-hero-wrapper .sas-hero-logo {
    width: clamp(40px, 5vw, 56px) !important;
    height: clamp(40px, 5vw, 56px) !important;
    border-radius: 14px !important;
    background: linear-gradient(135deg, var(--sas-accent, #00E5FF), color-mix(in srgb, var(--sas-accent, #00E5FF) 70%, #000)) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-family: var(--sas-fs, 'Tajawal'), sans-serif !important;
    font-size: clamp(20px, 2.5vw, 32px) !important;
    font-weight: 900 !important;
    color: #0a1628 !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3), inset 0 -3px 0 rgba(0, 0, 0, 0.15);
    margin: 0 !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
    line-height: 1 !important;
}
/* V53.9 — Image logo variant (real PNG/SVG instead of letter) */
.sas-hero-wrapper .sas-hero-logo.sas-hero-logo-img {
    background: rgba(255,255,255,0.95) !important;
    overflow: hidden !important;
    padding: 4px !important;
}
.sas-hero-wrapper .sas-hero-logo.sas-hero-logo-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 10px !important;
    display: block !important;
}

.sas-hero-wrapper .sas-hero-brand-text { margin: 0 !important; padding: 0 !important; }
.sas-hero-wrapper .sas-hero-brand-name {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(14px, 1.8vw, 22px) !important;
    font-weight: 800 !important;
    color: var(--sas-text, #fff) !important;
    line-height: 1.2 !important;
    background: transparent !important;
    border: 0 !important;
}
.sas-hero-wrapper .sas-hero-tagline {
    margin: 4px 0 0 !important;
    padding: 0 !important;
    font-size: clamp(11px, 1.3vw, 14px) !important;
    opacity: 0.85;
    font-family: var(--sas-fs, 'Tajawal'), sans-serif !important;
    color: var(--sas-text, #fff) !important;
    line-height: 1.4 !important;
}

/* Title — defensive */
.sas-hero-wrapper .sas-hero-title {
    margin: 0 !important;
    padding: 0 !important;
    font-size: clamp(20px, 4vw, 48px) !important;
    font-weight: 900 !important;
    line-height: 1.15 !important;
    letter-spacing: -0.02em !important;
    color: var(--sas-text, #fff) !important;
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5), 0 0 40px color-mix(in srgb, var(--sas-accent, #00E5FF) 30%, transparent);
    background: transparent !important;
    border: 0 !important;
}

/* Banner — defensive */
.sas-hero-wrapper .sas-hero-banner {
    background: color-mix(in srgb, var(--sas-accent, #00E5FF) 25%, transparent) !important;
    backdrop-filter: blur(10px);
    border: 1px solid color-mix(in srgb, var(--sas-accent, #00E5FF) 50%, transparent) !important;
    border-radius: 30px !important;
    padding: 8px 18px !important;
    margin: 0 !important;
    font-size: clamp(11px, 1.5vw, 14px) !important;
    font-weight: 700 !important;
    align-self: flex-start !important;
    color: var(--sas-text, #fff) !important;
    line-height: 1.4 !important;
}

/* Services chips — defensive sizing */
.sas-hero-wrapper .sas-hero-services {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
}
.sas-hero-wrapper .sas-hero-service-chip {
    background: rgba(255, 255, 255, 0.15) !important;
    backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.25) !important;
    border-radius: 50% !important;
    width: clamp(32px, 4vw, 44px) !important;
    height: clamp(32px, 4vw, 44px) !important;
    min-width: 32px !important;
    min-height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    font-size: clamp(14px, 2vw, 20px) !important;
    line-height: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    transition: transform 0.2s;
    color: #fff !important;
}
.sas-hero-wrapper .sas-hero-service-chip:hover { transform: scale(1.1); }

/* CTA row — defensive */
.sas-hero-wrapper .sas-hero-cta-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
}
.sas-hero-wrapper .sas-hero-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: clamp(8px, 1vw, 12px) clamp(14px, 2vw, 20px) !important;
    border-radius: 30px !important;
    text-decoration: none !important;
    font-weight: 800 !important;
    font-size: clamp(12px, 1.6vw, 15px) !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    transition: all 0.2s;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25);
    border: none !important;
}
.sas-hero-wrapper .sas-hero-btn-icon { font-size: 1.1em !important; line-height: 1 !important; }
.sas-hero-wrapper .sas-hero-btn-text { line-height: 1 !important; }
.sas-hero-btn-phone {
    background: linear-gradient(135deg, var(--sas-accent, #00E5FF), color-mix(in srgb, var(--sas-accent, #00E5FF) 70%, #000));
    color: #0a1628 !important;
}
.sas-hero-btn-whatsapp {
    background: linear-gradient(135deg, #25D366, #128C7E);
    color: #fff !important;
}
.sas-hero-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35);
}
.sas-hero-cta-label {
    font-size: 14px;
    opacity: 0.9;
    font-style: italic;
}

/* Corner badges */
.sas-hero-flag-corner {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 11;
    display: flex; align-items: center; gap: 8px;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(10px);
    padding: 6px 12px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 700;
}
.sas-hero-flag-corner img {
    position: static !important;
    width: 24px !important;
    height: auto !important;
    border-radius: 4px;
    object-fit: cover !important;
}

.sas-hero-warranty-corner {
    position: absolute;
    top: 20px;
    left: 20px;
    z-index: 11;
    background: linear-gradient(135deg, #FFB300, #FF8800);
    color: #0a1628;
    padding: 8px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 900;
    display: flex; align-items: center; gap: 6px;
    box-shadow: 0 6px 20px rgba(255, 179, 0, 0.4);
}
.sas-hero-warranty-icon { font-size: 14px; }

/* ═════════════ EFFECTS ═════════════ */

/* Glow Corners */
.sas-fx-glow::after {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    background:
        radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--sas-accent) 35%, transparent) 0%, transparent 30%),
        radial-gradient(circle at 80% 80%, color-mix(in srgb, var(--sas-accent) 35%, transparent) 0%, transparent 30%);
    pointer-events: none;
    mix-blend-mode: screen;
}

/* Vignette (alternate) */
.sas-fx-vignette {
    box-shadow: inset 0 0 200px 50px rgba(0, 0, 0, 0.5);
}

/* Particle Dots */
.sas-fx-particles::after {
    content: '';
    position: absolute; inset: 0; z-index: 4;
    background-image:
        radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--sas-accent) 50%, transparent) 1.5px, transparent 1.5px);
    background-size: 30px 30px;
    opacity: 0.5;
    pointer-events: none;
}

/* Mesh Gradient */
.sas-fx-mesh::after {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    background:
        radial-gradient(circle at 15% 25%, color-mix(in srgb, var(--sas-accent) 40%, transparent), transparent 45%),
        radial-gradient(circle at 85% 75%, rgba(255, 0, 200, 0.2), transparent 45%);
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Frost */
.sas-fx-frost img:first-of-type { filter: blur(2px) saturate(1.2); }

/* Scanline */
.sas-fx-scanline::after {
    content: '';
    position: absolute; inset: 0; z-index: 4;
    background: repeating-linear-gradient(
        to bottom,
        transparent 0,
        transparent 3px,
        rgba(0, 0, 0, 0.06) 3px,
        rgba(0, 0, 0, 0.06) 4px
    );
    pointer-events: none;
}

/* Spotlight */
.sas-fx-spotlight::after {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    background: radial-gradient(circle at center, transparent 30%, rgba(0, 0, 0, 0.55) 100%);
    pointer-events: none;
}

/* Rainbow edge */
.sas-fx-rainbow-edge {
    border: 4px solid transparent;
    background-clip: padding-box;
    position: relative;
}
.sas-fx-rainbow-edge::before {
    content: '';
    position: absolute;
    inset: -4px;
    border-radius: 16px;
    background: linear-gradient(45deg, #FF00FF, #00FFFF, #FFFF00, #00FF88, #FF00FF);
    background-size: 400% 400%;
    z-index: 0;
    animation: sas-rainbow 4s linear infinite;
}
@keyframes sas-rainbow {
    0%   { background-position:   0% 50%; }
    100% { background-position: 400% 50%; }
}

/* Animated waves */
.sas-hero-waves {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    width: 100%;
    height: 60px;
    z-index: 6;
    color: var(--sas-accent, #00E5FF);
    pointer-events: none;
}

/* Side line */
.sas-fx-side-line::after {
    content: '';
    position: absolute;
    top: 50%; left: 0;
    width: 4px;
    height: 60%;
    background: linear-gradient(180deg, transparent, var(--sas-accent), transparent);
    transform: translateY(-50%);
    z-index: 5;
    box-shadow: 0 0 20px var(--sas-accent);
}

/* Subtle noise */
.sas-fx-noise::after {
    content: '';
    position: absolute; inset: 0; z-index: 4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='n'%3E%3CfeTurbulence baseFrequency='0.9'/%3E%3C/filter%3E%3Crect width='100' height='100' filter='url(%23n)' opacity='0.15'/%3E%3C/svg%3E");
    pointer-events: none;
    mix-blend-mode: overlay;
}

/* ═══ V53.4 — 8 NEW EFFECTS ═══ */

/* Red badge bar at bottom */
.sas-fx-red-badge::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 6px;
    background: linear-gradient(90deg, #DC2626, #EF4444, #F87171, #EF4444, #DC2626);
    z-index: 8;
    box-shadow: 0 0 20px rgba(220, 38, 38, 0.6);
}

/* Gold double frame */
.sas-fx-gold-frame {
    box-shadow: inset 0 0 0 4px #D4AF37, inset 0 0 0 8px rgba(0,0,0,0.3), inset 0 0 0 12px #D4AF37;
}

/* Royal purple gradient */
.sas-fx-royal-purple::after {
    content: '';
    position: absolute; inset: 0; z-index: 3;
    background: linear-gradient(135deg, rgba(91, 33, 182, 0.4), transparent 50%, rgba(192, 132, 252, 0.3));
    mix-blend-mode: overlay;
    pointer-events: none;
}

/* Multi shapes (geometric circles + triangles) */
.sas-fx-multi-shapes::after {
    content: '';
    position: absolute; inset: 0; z-index: 4;
    background-image:
        radial-gradient(circle at 10% 20%, rgba(255,255,255,0.15) 0%, transparent 8%),
        radial-gradient(circle at 90% 80%, rgba(255,255,255,0.12) 0%, transparent 7%),
        radial-gradient(circle at 30% 70%, rgba(0,229,255,0.2) 0%, transparent 6%),
        radial-gradient(circle at 70% 30%, rgba(255,179,0,0.18) 0%, transparent 5%);
    pointer-events: none;
}

/* Waves at top */
.sas-fx-waves-top::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 60px;
    background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0,30 Q300,0 600,30 T1200,30 V0 H0 Z' fill='white' opacity='0.6'/></svg>") top center / 100% 100% no-repeat;
    z-index: 7;
    pointer-events: none;
}

/* Diagonal stripes */
.sas-fx-diagonal-stripes::after {
    content: '';
    position: absolute; inset: 0; z-index: 4;
    background-image: repeating-linear-gradient(
        45deg,
        transparent 0,
        transparent 20px,
        rgba(255,255,255,0.04) 20px,
        rgba(255,255,255,0.04) 40px
    );
    pointer-events: none;
}

/* Sparkle stars */
.sas-fx-sparkle::after {
    content: '✨ ⭐ ✨ ⭐ ✨ ⭐ ✨';
    position: absolute;
    top: 0; left: 0; right: 0;
    z-index: 5;
    text-align: center;
    font-size: 24px;
    line-height: 50px;
    opacity: 0.6;
    letter-spacing: 60px;
    pointer-events: none;
    animation: sas-sparkle 3s ease-in-out infinite;
}
@keyframes sas-sparkle {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 0.8; }
}

/* Premium gold border */
.sas-fx-premium-border {
    border: 2px solid #D4AF37 !important;
    box-shadow: 0 0 0 8px rgba(212, 175, 55, 0.2), 0 0 0 10px #D4AF37, 0 8px 30px rgba(212, 175, 55, 0.4);
}

/* ═══ V53.4 — TEXT OUTLINE OPTIONS ═══ */

/* Black outline (default) */
.sas-hero-outline-black .sas-hero-title,
.sas-hero-outline-black .sas-hero-brand-name,
.sas-hero-outline-black .sas-hero-banner,
.sas-hero-outline-black .sas-hero-tagline {
    text-shadow:
        -2px -2px 0 rgba(0,0,0,0.9),
        2px -2px 0 rgba(0,0,0,0.9),
        -2px 2px 0 rgba(0,0,0,0.9),
        2px 2px 0 rgba(0,0,0,0.9),
        0 4px 20px rgba(0,0,0,0.7) !important;
}

/* White outline */
.sas-hero-outline-white .sas-hero-title,
.sas-hero-outline-white .sas-hero-brand-name,
.sas-hero-outline-white .sas-hero-banner,
.sas-hero-outline-white .sas-hero-tagline {
    text-shadow:
        -2px -2px 0 #fff,
        2px -2px 0 #fff,
        -2px 2px 0 #fff,
        2px 2px 0 #fff,
        0 4px 20px rgba(255,255,255,0.5) !important;
}

/* Dual outline — white inside black */
.sas-hero-outline-dual .sas-hero-title,
.sas-hero-outline-dual .sas-hero-brand-name,
.sas-hero-outline-dual .sas-hero-banner {
    text-shadow:
        -1px -1px 0 #fff,
        1px -1px 0 #fff,
        -1px 1px 0 #fff,
        1px 1px 0 #fff,
        -3px -3px 0 #000,
        3px -3px 0 #000,
        -3px 3px 0 #000,
        3px 3px 0 #000,
        0 5px 24px rgba(0,0,0,0.8) !important;
}

/* No outline */
.sas-hero-outline-none .sas-hero-title,
.sas-hero-outline-none .sas-hero-brand-name {
    text-shadow: 0 4px 20px rgba(0, 0, 0, 0.5) !important;
}

/* ════════════════════════════════════════════════════════════
   V53.7 LUXURY EDITION — Real SVG ornaments (replaces V53.5 cheap CSS)
   Strategy: separate <::after> overlay layer ON TOP of image
   with box-shadow:inset stacks + SVG borders for true visibility
   ════════════════════════════════════════════════════════════ */

/* All luxury frames share this overlay container — sits ABOVE image */
html body .sas-hero-wrapper[class*="sas-frame-"]:not(.sas-frame-none)::after {
    content: '';
    position: absolute !important;
    inset: 0 !important;
    pointer-events: none !important;
    z-index: 8 !important;
    border-radius: inherit;
}

/* ─── Royal Gold Frame — multi-band engraved gold ─── */
html body .sas-frame-royal-gold::after {
    box-shadow:
        inset 0 0 0 3px #FFD700,
        inset 0 0 0 6px #1a1a1a,
        inset 0 0 0 8px #FFD700,
        inset 0 0 0 14px #B8860B,
        inset 0 0 0 16px #FFD700,
        inset 0 0 0 19px rgba(0,0,0,0.5),
        inset 0 0 60px rgba(212, 175, 55, 0.25) !important;
}
html body .sas-frame-royal-gold {
    box-shadow: 0 16px 60px rgba(212, 175, 55, 0.55), 0 0 0 1px #B8860B !important;
}

/* ─── Islamic Pattern Frame — geometric tile border via SVG ─── */
html body .sas-frame-islamic::after {
    border: 18px solid transparent;
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='60' height='60' viewBox='0 0 60 60'><rect width='60' height='60' fill='%23D4AF37'/><circle cx='30' cy='30' r='20' fill='none' stroke='%2308231e' stroke-width='2'/><path d='M30 6 L36 24 L54 24 L40 36 L46 54 L30 42 L14 54 L20 36 L6 24 L24 24 Z' fill='%2308231e' stroke='%23FFD700' stroke-width='1'/><circle cx='30' cy='30' r='4' fill='%23FFD700'/></svg>") 18 round !important;
}
html body .sas-frame-islamic {
    box-shadow: 0 0 0 2px #08231e, 0 16px 50px rgba(8, 35, 30, 0.6) !important;
}

/* ─── Crystal Glass Frame — frosted refraction ─── */
html body .sas-frame-crystal::after {
    box-shadow:
        inset 0 0 0 1px rgba(255,255,255,0.9),
        inset 0 0 0 4px rgba(255,255,255,0.4),
        inset 0 0 0 5px rgba(255,255,255,0.95),
        inset 0 2px 1px rgba(255,255,255,0.7),
        inset 0 -2px 1px rgba(0,0,0,0.2),
        inset 0 0 80px rgba(255,255,255,0.15) !important;
    background:
        linear-gradient(135deg, rgba(255,255,255,0.15) 0%, transparent 30%, transparent 70%, rgba(255,255,255,0.1) 100%) !important;
}
html body .sas-frame-crystal {
    box-shadow: 0 0 40px rgba(255,255,255,0.3), 0 16px 50px rgba(0,0,0,0.4) !important;
}

/* ─── Velvet Royal Frame — burgundy + 4 gold bands ─── */
html body .sas-frame-velvet::after {
    box-shadow:
        inset 0 0 0 2px #FFD700,
        inset 0 0 0 5px #D4AF37,
        inset 0 0 0 7px #4a0314,
        inset 0 0 0 16px #7A0521,
        inset 0 0 0 18px #D4AF37,
        inset 0 0 0 21px #4a0314,
        inset 0 0 0 23px #FFD700,
        inset 0 0 80px rgba(122, 5, 33, 0.5) !important;
}
html body .sas-frame-velvet {
    box-shadow: 0 20px 60px rgba(122, 5, 33, 0.6), 0 0 0 1px #4a0314 !important;
}

/* ─── Marble Frame — ivory edge + thin gold rim ─── */
html body .sas-frame-marble::after {
    box-shadow:
        inset 0 0 0 2px #c8b27a,
        inset 0 0 0 5px #f8f6ec,
        inset 0 0 0 14px #efe9d8,
        inset 0 0 0 16px #c8b27a,
        inset 0 0 0 18px #f8f6ec,
        inset 0 0 60px rgba(200, 178, 122, 0.2) !important;
}
html body .sas-frame-marble {
    box-shadow: 0 12px 40px rgba(0,0,0,0.25), 0 0 0 1px #c8b27a !important;
}

/* ─── Damascus Frame — emerald inlay + gold lattice ─── */
html body .sas-frame-damascus::after {
    border: 16px solid transparent;
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'><rect width='40' height='40' fill='%231a4d3f'/><path d='M0 20 L20 0 L40 20 L20 40 Z' fill='none' stroke='%23D4AF37' stroke-width='1.5'/><circle cx='20' cy='20' r='4' fill='%23D4AF37'/><path d='M20 8 L20 32 M8 20 L32 20' stroke='%23FFD700' stroke-width='0.8'/></svg>") 16 round !important;
}
html body .sas-frame-damascus {
    box-shadow: 0 0 0 2px #D4AF37, 0 16px 50px rgba(26, 77, 63, 0.6) !important;
}

/* ─── Filigree Frame — delicate dual gold rings ─── */
html body .sas-frame-filigree::after {
    box-shadow:
        inset 0 0 0 2px #FFD700,
        inset 0 0 0 4px rgba(0,0,0,0.6),
        inset 0 0 0 6px #FFD700,
        inset 0 0 0 12px transparent,
        inset 0 0 0 13px rgba(212,175,55,0.6),
        inset 0 0 30px rgba(255, 215, 0, 0.3) !important;
}
html body .sas-frame-filigree {
    box-shadow: 0 0 25px rgba(255,215,0,0.5), 0 12px 40px rgba(0,0,0,0.4) !important;
}

/* ─── Mughal Royal Frame — deep purple + intricate gold ─── */
html body .sas-frame-mughal::after {
    border: 16px solid transparent;
    border-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'><rect width='50' height='50' fill='%234C1D95'/><path d='M25 5 C30 15 40 15 45 25 C40 35 30 35 25 45 C20 35 10 35 5 25 C10 15 20 15 25 5 Z' fill='none' stroke='%23FFD700' stroke-width='2'/><circle cx='25' cy='25' r='3' fill='%23FFD700'/><path d='M25 12 L28 22 L25 25 L22 22 Z M25 38 L28 28 L25 25 L22 28 Z' fill='%23D4AF37'/></svg>") 16 round !important;
}
html body .sas-frame-mughal {
    box-shadow: 0 0 0 2px #FFD700, 0 16px 50px rgba(76, 29, 149, 0.6) !important;
}

@keyframes sas-gold-shimmer {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ════════════════════════════════════════════════════════════
   TITLE EFFECTS (V53.5)
   ════════════════════════════════════════════════════════════ */

/* ─── Gold Gradient Title ─── */
.sas-title-gold-gradient .sas-hero-title {
    background: linear-gradient(135deg, #FFD700 0%, #D4AF37 25%, #FFC107 50%, #FFEB3B 75%, #D4AF37 100%) !important;
    background-size: 200% 200% !important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    color: transparent !important;
    text-shadow: 0 4px 20px rgba(212, 175, 55, 0.8), 0 0 40px rgba(255, 215, 0, 0.6) !important;
    animation: sas-gold-text 4s ease-in-out infinite !important;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.6));
}
@keyframes sas-gold-text {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* ─── Embossed (3D carved) ─── */
.sas-title-embossed .sas-hero-title {
    color: #FFD700 !important;
    text-shadow:
        0 1px 0 #B8860B,
        0 2px 0 #B8860B,
        0 3px 0 #8B6914,
        0 4px 0 #8B6914,
        0 5px 0 #6B5410,
        0 6px 1px rgba(0,0,0,0.1),
        0 0 5px rgba(0,0,0,0.1),
        0 1px 3px rgba(0,0,0,0.3),
        0 3px 5px rgba(0,0,0,0.2),
        0 5px 10px rgba(0,0,0,0.25),
        0 10px 10px rgba(0,0,0,0.2),
        0 20px 20px rgba(0,0,0,0.15) !important;
}

/* ─── Glowing Title ─── */
.sas-title-glowing .sas-hero-title {
    color: #fff !important;
    text-shadow:
        0 0 10px var(--sas-accent, #00E5FF),
        0 0 20px var(--sas-accent, #00E5FF),
        0 0 40px var(--sas-accent, #00E5FF),
        0 0 80px var(--sas-accent, #00E5FF) !important;
    animation: sas-glow-pulse 2.5s ease-in-out infinite !important;
}
@keyframes sas-glow-pulse {
    0%, 100% { filter: brightness(1); }
    50%      { filter: brightness(1.3); }
}

/* ─── Calligraphy Title ─── */
.sas-title-calligraphy .sas-hero-title {
    font-family: 'Aref Ruqaa', 'Amiri', 'Reem Kufi', 'Cairo', serif !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #FFD700 !important;
    text-shadow:
        2px 2px 0 #B8860B,
        4px 4px 8px rgba(0,0,0,0.7),
        0 0 20px rgba(255, 215, 0, 0.5) !important;
}

/* ════════════════════════════════════════════════════════════
   ORNAMENT CORNERS (V53.7) — SVG arabesque flourishes
   ════════════════════════════════════════════════════════════ */
html body .sas-ornament-corners > .sas-hero-overlay::before,
html body .sas-ornament-corners > .sas-hero-overlay::after,
html body .sas-ornament-corners::before,
html body .sas-ornament-corners::after {
    content: '' !important;
    position: absolute !important;
    width: clamp(50px, 8vw, 90px) !important;
    height: clamp(50px, 8vw, 90px) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><defs><filter id='g'><feGaussianBlur stdDeviation='0.5'/></filter></defs><g fill='none' stroke='%23FFD700' stroke-width='2' stroke-linecap='round'><path d='M5 5 L95 5 L95 30 Q70 30 50 50 Q30 70 30 95 L5 95 Z' fill='rgba(0,0,0,0.15)'/><path d='M10 10 L90 10' stroke='%23D4AF37' stroke-width='2.5'/><path d='M10 10 L10 90' stroke='%23D4AF37' stroke-width='2.5'/><path d='M20 20 Q35 20 35 35 Q35 50 50 50 Q65 50 65 65 Q65 80 80 80' stroke='%23FFD700' stroke-width='2'/><circle cx='25' cy='25' r='4' fill='%23FFD700' stroke='%23B8860B'/><circle cx='50' cy='50' r='3' fill='%23FFD700'/><circle cx='75' cy='75' r='3' fill='%23FFD700'/><path d='M25 25 L20 35 M25 25 L35 20 M25 25 L18 18' stroke='%23FFD700' stroke-width='1.5'/><path d='M50 50 m-6 0 a6 6 0 0 1 12 0 a6 6 0 0 1 -12 0' fill='none' stroke='%23B8860B' stroke-width='1.5'/></g></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 14 !important;
    pointer-events: none !important;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.6)) drop-shadow(0 0 8px rgba(255,215,0,0.4)) !important;
}
/* Top-right (mirror horizontally) */
html body .sas-ornament-corners::before {
    top: 8px !important; right: 8px !important;
    transform: scaleX(-1);
}
/* Top-left */
html body .sas-ornament-corners::after {
    top: 8px !important; left: 8px !important;
}
/* Bottom-right (mirror both) */
html body .sas-ornament-corners > .sas-hero-overlay::before {
    bottom: 8px !important; right: 8px !important; top: auto !important;
    transform: scale(-1, -1);
}
/* Bottom-left (mirror vertically) */
html body .sas-ornament-corners > .sas-hero-overlay::after {
    bottom: 8px !important; left: 8px !important; top: auto !important;
    transform: scaleY(-1);
}

/* ════════════════════════════════════════════════════════════
   ROYAL SEAL (V53.7) — SVG Islamic geometric medallion
   ════════════════════════════════════════════════════════════ */
html body .sas-show-seal::before {
    content: '' !important;
    position: absolute !important;
    top: 14px !important;
    right: 14px !important;
    width: clamp(60px, 9vw, 110px) !important;
    height: clamp(60px, 9vw, 110px) !important;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><defs><radialGradient id='gold' cx='50%25' cy='40%25'><stop offset='0%25' stop-color='%23FFEB3B'/><stop offset='50%25' stop-color='%23FFD700'/><stop offset='100%25' stop-color='%23B8860B'/></radialGradient></defs><circle cx='60' cy='60' r='58' fill='url(%23gold)' stroke='%238B6914' stroke-width='2'/><circle cx='60' cy='60' r='52' fill='none' stroke='%238B6914' stroke-width='1' stroke-dasharray='2 3'/><circle cx='60' cy='60' r='42' fill='none' stroke='%238B6914' stroke-width='1.5'/><path d='M60 20 L66 50 L96 50 L72 68 L80 96 L60 78 L40 96 L48 68 L24 50 L54 50 Z' fill='%238B6914' opacity='0.85'/><path d='M60 30 L64 52 L84 52 L68 64 L74 84 L60 72 L46 84 L52 64 L36 52 L56 52 Z' fill='%23FFD700' stroke='%238B6914' stroke-width='0.8'/><circle cx='60' cy='60' r='8' fill='%238B6914'/><circle cx='60' cy='60' r='4' fill='%23FFD700'/><circle cx='60' cy='60' r='1.5' fill='%238B6914'/></svg>") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    z-index: 15 !important;
    pointer-events: none !important;
    filter:
        drop-shadow(0 4px 8px rgba(0,0,0,0.6))
        drop-shadow(0 0 12px rgba(255,215,0,0.5)) !important;
    animation: sas-seal-rotate 30s linear infinite;
}
@keyframes sas-seal-rotate {
    0%   { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
/* Disable the old emoji-based seal pseudo (replaced by .sas-show-seal::before above) */
html body .sas-show-seal .sas-hero-overlay::before {
    content: none !important;
    display: none !important;
    background: none !important;
}

/* ═════════════ ANIMATIONS ═════════════ */
.sas-hero-anim-fade-up .sas-hero-content {
    animation: sas-fade-up 0.8s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes sas-fade-up {
    0%   { opacity: 0; transform: translateY(40px); }
    100% { opacity: 1; transform: translateY(0); }
}

.sas-hero-anim-zoom-in .sas-hero-content {
    animation: sas-zoom-in 0.7s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes sas-zoom-in {
    0%   { opacity: 0; transform: scale(0.85); }
    100% { opacity: 1; transform: scale(1); }
}

.sas-hero-anim-parallax img:first-of-type {
    transform: scale(1.05);
    transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.sas-hero-anim-parallax:hover img:first-of-type {
    transform: scale(1.1);
}

/* ═════════════ RESPONSIVE ═════════════ */
@media (max-width: 768px) {
    .sas-hero-overlay { padding: 16px 20px; }
    .sas-hero-content { max-width: 100%; gap: 10px; }
    .sas-hero-title   { font-size: clamp(22px, 6vw, 36px); }
    .sas-hero-logo    { width: 44px; height: 44px; font-size: 24px; }
    .sas-hero-brand-name { font-size: 16px; }
    .sas-hero-service-chip { width: 36px; height: 36px; font-size: 18px; }
    .sas-hero-btn { padding: 8px 14px; font-size: 12px; }
    .sas-hero-flag-corner, .sas-hero-warranty-corner { font-size: 10px; padding: 4px 8px; }
}

/* Admin icons picker */
.sas-pst-icons-picker { display: flex; flex-direction: column; gap: 14px; }
.sas-pst-icon-cat h5 { margin: 0 0 6px; font-size: 12px; color: #666; text-transform: uppercase; letter-spacing: 0.05em; }
.sas-pst-icon-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.sas-pst-icon-opt { cursor: pointer; }
.sas-pst-icon-opt input { display: none; }
.sas-pst-icon-opt span {
    display: inline-flex; width: 40px; height: 40px;
    align-items: center; justify-content: center;
    background: #f1f5f9; border-radius: 8px;
    font-size: 22px; transition: all .15s;
    border: 2px solid transparent;
}
.sas-pst-icon-opt:hover span { background: #e0f2fe; }
.sas-pst-icon-opt input:checked + span {
    background: #00E5FF; border-color: #0073aa;
    box-shadow: 0 4px 12px rgba(0, 229, 255, 0.4);
    transform: scale(1.1);
}

/* Admin effects picker */
.sas-pst-effects-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 10px; }
.sas-pst-effect-opt { cursor: pointer; }
.sas-pst-effect-opt input { display: none; }
.sas-pst-effect-card {
    display: block; padding: 14px;
    background: #f8fafc; border: 2px solid #e0e7ef; border-radius: 10px;
    transition: all .15s;
}
.sas-pst-effect-card strong { display: block; font-size: 13px; color: #0073aa; margin-bottom: 4px; }
.sas-pst-effect-card em { font-size: 11px; color: #666; font-style: normal; }
.sas-pst-effect-opt:hover .sas-pst-effect-card { border-color: #00E5FF; transform: translateY(-2px); }
.sas-pst-effect-opt input:checked + .sas-pst-effect-card {
    background: linear-gradient(135deg, #00E5FF11, #0073aa22);
    border-color: #0073aa;
    box-shadow: 0 6px 20px rgba(0, 115, 170, 0.2);
}