/* ═══════════════════════════════════════════════
   SIYANATI — coming-soon.css
   Delta styles only — main.css is loaded first.
   Everything here either extends or overrides
   specific classes for the coming-soon page.
═══════════════════════════════════════════════ */

/* ── Full-height single-page layout ─────────── */
.cs-body {
    overflow-x: hidden;
}

/* ══════════════════════════════════════════════
   COMING SOON HERO
   Extends .hero from main.css
══════════════════════════════════════════════ */
.cs-hero {
    position: relative;
    min-height: 100vh;
    display: flex;
    align-items: center;
    overflow: hidden;
    padding-top: 100px;
    padding-bottom: 80px;
}

.cs-inner {
    position: relative;
    z-index: 1;
    max-width: 700px;
    display: flex;
    flex-direction: column;
    /* no align-items — inherited from direction/dir attribute */
}

/* Badge — same as .hero-badge, no changes needed */
.cs-badge {
    margin-bottom: 24px;
}

/* Title — inherits .hero-title, tighten bottom margin */
.cs-title {
    margin-bottom: 28px;
}

/* ── "Coming Soon" divider label ────────────── */
.cs-label {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 20px;
    width: 100%;
    max-width: 480px;
}
.cs-label-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(144, 0, 42, 0.4), transparent);
}
.cs-label-text {
    font-family: var(--font-brand);
    font-size: 0.75rem;
    letter-spacing: 0.22em;
    text-transform: uppercase;
    color: var(--accent-light);
    white-space: nowrap;
}

[dir="rtl"] .cs-label-text {
    letter-spacing: 0%;
}

/* Sub — inherits .hero-sub */
.cs-sub {
    margin-bottom: 10px;
}

/* ══════════════════════════════════════════════
   NEWSLETTER FORM
══════════════════════════════════════════════ */
.cs-newsletter {
    margin-top: 32px;
    margin-bottom: 40px;
    width: 100%;
    max-width: 480px;
}

.cs-newsletter-hint {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--text-subtle);
    margin-bottom: 12px;
}

.cs-form {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.cs-input-wrap {
    flex: 1;
    min-width: 200px;
    position: relative;
    display: flex;
    align-items: center;
}

.cs-mail-icon {
    position: absolute;
    inset-inline-start: 12px;
    font-size: 1.1rem;
    color: var(--text-subtle);
    pointer-events: none;
}

.cs-input {
    width: 100%;
    background: var(--dark-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 13px 14px 13px 40px;
    color: var(--text);
    font-family: var(--font-body);
    font-size: 0.9rem;
    outline: none;
    transition:
        border-color var(--transition),
        background var(--transition);
}

.cs-input:focus {
    border-color: var(--border-hover);
    background: var(--dark-4);
}

.cs-input::placeholder {
    color: var(--text-subtle);
}

/* Submit — reuses .btn .btn-primary, just remove gap icon */
.cs-submit {
    white-space: nowrap;
    flex-shrink: 0;
}

/* Feedback message */
.cs-msg {
    margin-top: 10px;
    font-size: 0.82rem;
    color: var(--text-muted);
    padding: 8px 12px;
    background: var(--dark-3);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    border-inline-start: 2px solid var(--accent);
}

.cs-msg--ok {
    border-inline-start-color: #22c55e;
    color: #86efac;
}

/* ══════════════════════════════════════════════
   FEATURE PILLS
══════════════════════════════════════════════ */
.cs-pills {
    display: grid;
    grid-template-columns: 1fr 1fr; /* strict 2 columns */
    gap: 10px;
    width: 100%;
    max-width: 480px;
}

.cs-pill {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 0.78rem;
    font-weight: 500;
    color: var(--text-muted);
    background: var(--dark-3);
    border: 1px solid var(--border);
    border-radius: 100px;
    padding: 6px 14px 6px 10px;
    transition:
        border-color var(--transition),
        color var(--transition);
}

.cs-pill:hover {
    border-color: var(--border-hover);
    color: var(--text);
}

.cs-pill .material-symbols-rounded {
    font-size: 1rem;
    color: var(--accent-light);
}

/* ══════════════════════════════════════════════
   FOOTER MINIMAL OVERRIDE
══════════════════════════════════════════════ */
.cs-footer {
    border-top: 1px solid var(--border);
}

/* ══════════════════════════════════════════════
   RTL DELTA
══════════════════════════════════════════════ */
[dir="rtl"] .cs-newsletter,
[dir="rtl"] .cs-pills {
    direction: rtl;
}

[dir="rtl"] .cs-label {
    direction: rtl;
}

/* ══════════════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════════════ */
@media (max-width: 600px) {
    .cs-form {
        flex-direction: column;
    }

    .cs-submit {
        width: 100%;
        justify-content: center;
    }

    .cs-watermark {
        font-size: clamp(5rem, 30vw, 10rem);
        opacity: 0.6;
    }
}

/* ── LANG PICKER POSITIONING IN NAVBAR ─────── */
.nav-inner {
    position: relative;
}

/* 
   nav-inner is already space-between:
   logo — [nav-links flex:1 center] — lang-picker — burger
   This keeps lang-picker pinned after nav-links and before burger
*/

.nav-inner > .lang-picker {
    flex-shrink: 0;
    margin-left: auto; /* pushes it to the right edge when nav-links is empty/hidden */
}

/* On desktop, burger is hidden so order is: logo · links · lang-picker */
@media (min-width: 901px) {
    .nav-inner > .lang-picker {
        margin-left: 0; /* nav-center's flex:1 already handles spacing */
    }
}

/* RTL: dropdown opens to the left instead of right */
[dir="rtl"] .lang-dropdown {
    right: auto;
    left: 0;
}

/* RTL: margin swap */
[dir="rtl"] .nav-inner > .lang-picker {
    margin-left: 0;
    margin-right: auto;
}