/* ============================================================
   CloudTech Oman — Offers pages
   /services/e-invoicing (business plan, Oct 2026).
   Loads after chrome.css + inner.css and reuses their tokens and
   components (suite-hero, manifest-head, pillars, capabilities, ct-faq).
   ============================================================ */

.offers-page { --solution-accent: var(--ion-bright); }

.offers-section { padding-block: clamp(40px, 6vh, 70px); }
.offers-section + .offers-section { padding-block-start: 0; }

.offers-section a.inline-link,
.einv-source a {
    color: var(--ion-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

/* ------------------------------------------------------------
   Offer block (how CloudTech gets you ready)
   ------------------------------------------------------------ */
.offer-block {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
    gap: clamp(22px, 4vw, 56px);
    padding: clamp(26px, 3.4vw, 44px);
    background:
        radial-gradient(60% 80% at 0% 0%, rgba(109, 61, 240, 0.10), transparent 70%),
        var(--glass);
    border: 1px solid var(--line);
    border-radius: 24px;
}

[dir="rtl"] .offer-block {
    background:
        radial-gradient(60% 80% at 100% 0%, rgba(109, 61, 240, 0.10), transparent 70%),
        var(--glass);
}

.offer-main h2 {
    font-size: clamp(1.5rem, 2.8vw, 2.1rem);
    font-weight: 600;
    letter-spacing: -0.025em;
    line-height: 1.2;
    color: var(--white);
    margin-block-end: 12px;
}

[dir="rtl"] .offer-main h2 { letter-spacing: 0; line-height: 1.5; }

.offer-main p { color: var(--fg-mute); font-size: 0.96rem; }

.offer-list {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 12px;
    font-size: 0.95rem;
    color: var(--fg-soft);
}

.offer-ref {
    margin-block-start: 18px;
    padding-block-start: 16px;
    border-block-start: 1px solid var(--line);
    font-size: 0.9rem;
    color: var(--fg-mute);
}

.offer-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 22px;
}

.offer-list li {
    position: relative;
    padding-inline-start: 24px;
}

.offer-list li::before {
    content: '✓';
    position: absolute;
    inset-inline-start: 0;
    color: var(--ion-bright);
    font-weight: 600;
}

/* ------------------------------------------------------------
   E-invoicing — the two deadlines
   ------------------------------------------------------------ */
.einv-phases {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: clamp(14px, 2vw, 24px);
}

.einv-phase {
    padding: clamp(24px, 3vw, 38px);
    background: var(--glass);
    border: 1px solid var(--line);
    border-radius: 22px;
}

.einv-phase:first-child {
    border-color: rgba(86, 134, 255, 0.5);
    background:
        radial-gradient(80% 60% at 50% 0%, rgba(46, 107, 255, 0.16), transparent 70%),
        var(--glass-2);
}

.einv-step {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--ion-bright);
}

[dir="rtl"] .einv-step { letter-spacing: 0; font-size: 13px; }

.einv-date {
    display: block;
    margin-block: 10px 12px;
    font-size: clamp(1.7rem, 3.4vw, 2.6rem);
    font-weight: 600;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: var(--white);
}

[dir="rtl"] .einv-date { letter-spacing: 0; line-height: 1.4; }

.einv-who { color: var(--fg-soft); font-size: 0.98rem; }

.einv-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: clamp(22px, 3vh, 30px);
}

.einv-reviewed {
    margin-block-start: 14px;
    font-size: 0.88rem;
    color: var(--fg-mute);
}

.einv-reviewed a {
    color: var(--ion-bright);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.einv-source {
    margin-block-start: 16px;
    font-size: 0.86rem;
    color: var(--fg-mute);
    line-height: 1.8;
}

/* ------------------------------------------------------------
   Responsive
   ------------------------------------------------------------ */
@media (max-width: 980px) {
    .offer-block { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
    .einv-phases { grid-template-columns: 1fr; }
    .offer-actions .btn,
    .einv-hero-actions .btn { width: 100%; justify-content: center; text-align: center; line-height: 1.4; }
}