/* Seven Offer — custom styles */

.seven-offer-wrapper {
    font-family: 'Tajawal', 'Inter', system-ui, -apple-system, sans-serif;
}

.seven-offer-wrapper :lang(en) {
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
}

.seven-offer-wrapper h1,
.seven-offer-wrapper h2,
.seven-offer-wrapper h3,
.seven-offer-wrapper h4,
.seven-offer-wrapper h5,
.seven-offer-wrapper h6,
.seven-offer-wrapper p,
.seven-offer-wrapper a,
.seven-offer-wrapper button,
.seven-offer-wrapper span,
.seven-offer-wrapper div,
.seven-offer-wrapper li {
    letter-spacing: 0 !important;
    word-spacing: normal !important;
}

/* THE REAL FIX: Prevent theme from breaking words character-by-character.
   Many WordPress themes set `word-break: break-all` on buttons and headings
   to handle mixed-language text — but this breaks "Seven Offer" into "S e v e n".
   We force normal word wrapping throughout the widget. */
.seven-offer-wrapper,
.seven-offer-wrapper * {
    word-break: normal !important;
    overflow-wrap: normal !important;
    -webkit-hyphens: none !important;
    hyphens: none !important;
    white-space: normal;
}

/* Keep multi-word phrases together when they can fit */
.seven-offer-wrapper h1,
.seven-offer-wrapper h2,
.seven-offer-wrapper h3,
.seven-offer-wrapper button,
.seven-offer-wrapper a {
    word-break: keep-all !important;
    overflow-wrap: break-word !important;
}

/* RESTORE tracking only on elements in English language context.
   The :lang(en) pseudo-class uses CSS language inheritance — it matches
   any element whose effective language is English (set via html/wrapper lang=en).
   
   In Arabic mode (wrapper lang="ar"), these rules DON'T apply, so the
   tracking-[0.2em] class becomes inert and Arabic letters stay connected. */
.seven-offer-wrapper:lang(en) .uppercase,
.seven-offer-wrapper:lang(en) [class*="tracking-"],
.seven-offer-wrapper [lang="en"].uppercase,
.seven-offer-wrapper [lang="en"][class*="tracking-"],
.seven-offer-wrapper [translate="no"].uppercase,
.seven-offer-wrapper [translate="no"][class*="tracking-"] {
    letter-spacing: 0.2em !important;
}

/* Fine-tuned tracking values */
.seven-offer-wrapper:lang(en) .tracking-\[0\.3em\],
.seven-offer-wrapper [lang="en"].tracking-\[0\.3em\],
.seven-offer-wrapper [translate="no"].tracking-\[0\.3em\] {
    letter-spacing: 0.3em !important;
}
.seven-offer-wrapper:lang(en) .tracking-\[0\.25em\],
.seven-offer-wrapper [lang="en"].tracking-\[0\.25em\],
.seven-offer-wrapper [translate="no"].tracking-\[0\.25em\] {
    letter-spacing: 0.25em !important;
}
.seven-offer-wrapper:lang(en) .tracking-\[0\.22em\],
.seven-offer-wrapper [lang="en"].tracking-\[0\.22em\],
.seven-offer-wrapper [translate="no"].tracking-\[0\.22em\] {
    letter-spacing: 0.22em !important;
}
.seven-offer-wrapper:lang(en) .tracking-\[0\.18em\],
.seven-offer-wrapper [lang="en"].tracking-\[0\.18em\],
.seven-offer-wrapper [translate="no"].tracking-\[0\.18em\] {
    letter-spacing: 0.18em !important;
}

/* === Brand highlight === */
.seven-offer-wrapper .seven-highlight {
    background: linear-gradient(
        180deg,
        rgba(252, 211, 77, 0) 58%,
        rgba(252, 211, 77, 0.22) 58%,
        rgba(252, 211, 77, 0.22) 92%,
        rgba(252, 211, 77, 0) 92%
    );
    padding: 0 0.15em;
    box-decoration-break: clone;
    -webkit-box-decoration-break: clone;
}

.seven-offer-wrapper h1 .seven-highlight,
.seven-offer-wrapper .seven-builder-headline .seven-highlight {
    background: linear-gradient(
        180deg,
        rgba(252, 211, 77, 0) 58%,
        rgba(252, 211, 77, 0.26) 58%,
        rgba(252, 211, 77, 0.26) 94%,
        rgba(252, 211, 77, 0) 94%
    );
}

/* === Stepper === */
.seven-step {
    transition: all 250ms ease;
}

.seven-step .seven-step-dot {
    border-color: rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.45);
    transition: all 250ms ease;
}

.seven-step.seven-step-active .seven-step-dot {
    border-color: rgba(252, 211, 77, 0.6);
    background: rgba(252, 211, 77, 0.15);
    color: rgb(254, 243, 199);
    box-shadow: 0 0 0 4px rgba(252, 211, 77, 0.08);
}

.seven-step.seven-step-active span:last-child {
    color: rgba(255, 255, 255, 0.95);
}

.seven-step.seven-step-done .seven-step-dot {
    border-color: rgba(110, 231, 183, 0.4);
    background: rgba(110, 231, 183, 0.15);
    color: rgb(167, 243, 208);
}

.seven-step.seven-step-done span:last-child {
    color: rgba(255, 255, 255, 0.75);
}

/* Replace step number with check when done */
.seven-step.seven-step-done .seven-step-dot {
    font-size: 0;
}
.seven-step.seven-step-done .seven-step-dot::before {
    content: "✓";
    font-size: 14px;
    font-weight: 700;
}

/* === Service cards — keep dark, use gold as accent only === */
.seven-service-card {
    position: relative;
    width: 100%;
    cursor: pointer;
    appearance: none;
    font-family: inherit;
    color: inherit;
    /* Force baseline — some themes inject button gradients */
    background-color: #0c1827 !important;
    background-image: none !important;
}

/* NUCLEAR OPTION: neutralize theme-injected pseudo-elements.
   Many WP themes (Woodmart, Flatsome, Astra Pro, etc.) inject ::before and ::after
   overlays with gradients on all <button> elements. This kills them on our cards. */
.seven-service-card::before,
.seven-service-card::after {
    content: none !important;
    display: none !important;
    background: none !important;
    background-image: none !important;
    opacity: 0 !important;
}

/* Hover — subtle brighten only, no yellow */
.seven-service-card:hover {
    border-color: rgba(255, 255, 255, 0.22) !important;
    background-color: #0f1e30 !important;
    background-image: none !important;
    transform: translateY(-2px);
}

/* Expand description on hover */
.seven-service-card:hover .seven-card-body,
.seven-service-card.seven-selected .seven-card-body {
    max-height: 400px;
}

/* Selected — DARK bg stays, subtle gold outline + inner ring only.
   !important overrides any theme styles that inject button backgrounds. */
.seven-service-card.seven-selected {
    border-color: rgba(252, 211, 77, 0.5) !important;
    background-color: #0d1928 !important;
    background-image: none !important;
    box-shadow:
        0 0 0 1px rgba(252, 211, 77, 0.3) inset,
        0 8px 30px -18px rgba(252, 211, 77, 0.3) !important;
}

.seven-service-card.seven-selected:hover {
    background-color: #0f1e30 !important;
    background-image: none !important;
    border-color: rgba(252, 211, 77, 0.65) !important;
}

/* Selected — gold icon background */
.seven-service-card.seven-selected .seven-service-icon {
    background: rgba(252, 211, 77, 0.22);
    color: rgb(254, 243, 199);
}

/* Force all text inside card to stay white — override theme link/button colors */
.seven-service-card,
.seven-service-card:hover,
.seven-service-card.seven-selected,
.seven-service-card.seven-selected:hover,
.seven-service-card h3,
.seven-service-card p,
.seven-service-card span,
.seven-service-card li {
    color: inherit;
}

.seven-service-card h3 {
    color: rgb(255, 255, 255) !important;
}

/* Check mark shown only when selected */
.seven-service-card.seven-selected .seven-check {
    display: flex;
}

.seven-service-card:not(.seven-selected) .seven-check {
    display: none;
}

/* SELECT label color on selection */
.seven-service-card.seven-selected .seven-select-label {
    color: rgb(252, 211, 77);
}

/* Plus icon → check icon swap */
.seven-service-card.seven-selected .seven-plus-icon {
    display: none;
}
.seven-service-card.seven-selected .seven-check-icon {
    display: block;
}

/* Selected icon container fills with gold */
.seven-service-card.seven-selected .seven-select-icon {
    background: rgb(252, 211, 77);
    border-color: rgb(252, 211, 77);
    color: #08111d;
}

/* Hide "Learn more" hint when selected (we've already expanded) */
.seven-service-card.seven-selected .seven-card-hint {
    opacity: 0;
}

/* === Sticky counter bar === */
.seven-counter-bar {
    animation: sevenCounterIn 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
    /* Must beat Google Translate widget (z-index: 100000) and most theme headers */
    z-index: 2147483640 !important;
}

/* Hide the floating counter bar on mobile and tablet — the layout is too
   cramped and overlaps content. Users can scroll to the offer summary easily. */
@media (max-width: 1023px) {
    .seven-counter-bar,
    .seven-counter-bar:not(.hidden) {
        display: none !important;
    }
}

@keyframes sevenCounterIn {
    0% { opacity: 0; transform: translate(-50%, 20px); }
    100% { opacity: 1; transform: translate(-50%, 0); }
}

/* RTL flip for sticky counter */
[dir="rtl"] .seven-counter-bar {
    left: auto;
    right: 50%;
    transform: translateX(50%);
}
[dir="rtl"] .seven-counter-bar:not(.hidden) {
    transform: translateX(50%);
}

/* === Impact toggle button === */
.seven-impact-btn.seven-impact-on {
    background: rgba(252, 211, 77, 0.2);
    border-color: rgba(252, 211, 77, 0.55);
    color: rgb(254, 243, 199);
}

.seven-impact-btn.seven-impact-on .seven-impact-icon {
    background: rgba(252, 211, 77, 0.9);
    color: #08111d;
    border-color: rgba(252, 211, 77, 0.9);
}

.seven-impact-btn.seven-impact-on .seven-impact-icon svg {
    display: block;
}

.seven-impact-btn .seven-impact-icon svg {
    display: none;
}

/* === Impact welcome banner — gentle entrance === */
.seven-impact-welcome {
    animation: sevenImpactWelcomeIn 450ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

@keyframes sevenImpactWelcomeIn {
    0% {
        opacity: 0;
        transform: translateY(-6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Hero "scroll to start" bounce === */
.seven-bounce-down {
    display: inline-block;
    animation: sevenBounceDown 1.6s ease-in-out infinite;
}

@keyframes sevenBounceDown {
    0%, 20%, 100% { transform: translateY(0); }
    10% { transform: translateY(3px); }
    30% { transform: translateY(-2px); }
}

/* === First card attention pulse — draws the eye on page load === */
.seven-service-card:first-of-type:not(.seven-selected) {
    animation: sevenFirstCardPulse 2.8s ease-out 1s 2;
}

@keyframes sevenFirstCardPulse {
    0%, 100% { 
        box-shadow: 0 0 0 0 rgba(252, 211, 77, 0);
    }
    15% {
        box-shadow: 0 0 0 6px rgba(252, 211, 77, 0.18);
    }
    35% {
        box-shadow: 0 0 0 0 rgba(252, 211, 77, 0);
    }
}

/* Kill the pulse once user interacts with any card */
.seven-service-grid-active .seven-service-card:first-of-type {
    animation: none !important;
}

/* === Form shake on validation error === */
.seven-form-shake {
    animation: sevenFormShake 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97);
}

@keyframes sevenFormShake {
    10%, 90% { transform: translateX(-2px); }
    20%, 80% { transform: translateX(3px); }
    30%, 50%, 70% { transform: translateX(-5px); }
    40%, 60% { transform: translateX(5px); }
}

/* === Theme-bleed defenses === */
.seven-offer-wrapper .entry-content,
.seven-offer-wrapper article,
.seven-offer-wrapper .post-content {
    max-width: none;
    margin: 0;
    padding: 0;
}

body.seven-offer-body {
    background: #08111d !important;
    margin: 0;
    padding: 0;
}

/* === Tailwind's `flex` + `hidden` collision fixes === */
.seven-summary-ctas:not(.hidden) {
    display: flex;
}
.seven-summary-items:not(.hidden) {
    display: grid;
}
.seven-summary-totals:not(.hidden) {
    display: grid;
}
.seven-impact-badge:not(.hidden) {
    display: inline-block;
}
.seven-discount-combo-row:not(.hidden),
.seven-discount-impact-row:not(.hidden) {
    display: flex;
}
.seven-impact-welcome:not(.hidden) {
    display: block;
}
.seven-client-form:not(.hidden) {
    display: block;
}
.seven-counter-bar:not(.hidden) {
    display: flex;
}