/* ==========================================================================
   MaidaPro — public marketing / landing site
   Builds on the brand palette declared in site.css (:root --primary, --ink, …).
   RTL-first: uses CSS logical properties so one rule set serves ar + en.
   ========================================================================== */

:root {
    --mk-max: 1200px;
    --mk-hero-grad: radial-gradient(1200px 600px at 80% -10%, rgba(232,176,75,.22), transparent 60%),
                    linear-gradient(180deg, #2C2017 0%, #1B130D 100%);
    --mk-soft: #F7F1E8;
    --mk-line: rgba(36,26,20,.08);
}

body.mk {
    background: var(--surface, #fff);
    color: var(--ink, #241A14);
}

.mk-wrap { max-width: var(--mk-max); margin-inline: auto; padding-inline: 1.25rem; }

/* ── Top navigation ──────────────────────────────────────────────────────── */
.mk-nav {
    position: sticky; top: 0; z-index: 50;
    background: rgba(255,255,255,.86);
    backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--mk-line);
}
.mk-nav-inner { display: flex; align-items: center; gap: 1rem; padding-block: .7rem; }
.mk-brand { display: flex; align-items: center; gap: .6rem; font-weight: 800; font-size: 1.15rem; color: var(--ink); text-decoration: none; letter-spacing: .2px; }
.mk-brand img { height: 34px; }
.mk-nav-links { display: flex; align-items: center; gap: .35rem; margin-inline-start: auto; }
.mk-nav-links a.mk-link { color: var(--ink); text-decoration: none; font-weight: 600; padding: .5rem .8rem; border-radius: 10px; opacity: .82; }
.mk-nav-links a.mk-link:hover { opacity: 1; background: var(--mk-soft); }

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.mk-btn { display: inline-flex; align-items: center; gap: .5rem; font-weight: 700; border-radius: 12px; padding: .7rem 1.25rem; text-decoration: none; border: 1.5px solid transparent; cursor: pointer; transition: transform .08s ease, box-shadow .2s ease, background .2s ease; white-space: nowrap; }
.mk-btn:active { transform: translateY(1px); }
.mk-btn-primary { background: var(--logo-grad, linear-gradient(135deg,#F0A845,#D97826)); color: #fff; box-shadow: 0 10px 24px -10px rgba(217,120,38,.7); }
.mk-btn-primary:hover { color: #fff; box-shadow: 0 14px 30px -10px rgba(217,120,38,.85); }
.mk-btn-ghost { background: transparent; color: var(--ink); border-color: var(--mk-line); }
.mk-btn-ghost:hover { background: var(--mk-soft); color: var(--ink); }
.mk-btn-light { background: rgba(255,255,255,.12); color: #fff; border-color: rgba(255,255,255,.28); }
.mk-btn-light:hover { background: rgba(255,255,255,.2); color: #fff; }
.mk-btn-sm { padding: .45rem .85rem; font-size: .9rem; border-radius: 10px; }
.mk-btn-lg { padding: .85rem 1.6rem; font-size: 1.05rem; }

/* ── Hero ────────────────────────────────────────────────────────────────── */
.mk-hero { background: var(--mk-hero-grad); color: #fff; position: relative; overflow: hidden; }
.mk-hero-inner { display: grid; grid-template-columns: 1.05fr .95fr; gap: 2.5rem; align-items: center; padding-block: 4.5rem 4rem; }
.mk-eyebrow { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18); color: #F3D9A9; font-weight: 700; font-size: .82rem; padding: .35rem .8rem; border-radius: 999px; margin-bottom: 1.1rem; }
.mk-hero h1 { font-size: clamp(2.1rem, 4vw, 3.35rem); line-height: 1.12; font-weight: 800; margin: 0 0 1rem; letter-spacing: -.5px; }
.mk-hero h1 .grad { background: linear-gradient(90deg,#F0A845,#E8B04B); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.mk-hero p.lead { font-size: 1.16rem; line-height: 1.7; color: rgba(255,255,255,.82); margin: 0 0 1.75rem; max-width: 34rem; }
.mk-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; }
.mk-hero-badges { display: flex; flex-wrap: wrap; gap: 1.25rem; margin-top: 2rem; color: rgba(255,255,255,.72); font-size: .92rem; }
.mk-hero-badges span { display: inline-flex; align-items: center; gap: .45rem; }
.mk-hero-badges i { color: var(--gold, #E8B04B); }

/* Hero visual — a stylised device/preview card (no screenshot needed) */
.mk-hero-visual { position: relative; }
.mk-mock { background: linear-gradient(180deg,#fff, #FBF6EE); border-radius: 20px; box-shadow: 0 40px 80px -30px rgba(0,0,0,.6); padding: 1rem; transform: perspective(1400px) rotateY(-8deg) rotateX(3deg); }
[dir="rtl"] .mk-mock { transform: perspective(1400px) rotateY(8deg) rotateX(3deg); }
.mk-mock-bar { display: flex; gap: .4rem; padding: .3rem .2rem .7rem; }
.mk-mock-bar i { width: 11px; height: 11px; border-radius: 50%; background: #E7D9C6; }
.mk-mock-bar i:nth-child(1){ background:#E8836B; } .mk-mock-bar i:nth-child(2){ background:#E8B04B; } .mk-mock-bar i:nth-child(3){ background:#5E8C4F; }
.mk-mock-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .6rem; }
.mk-mock-tile { background: #fff; border: 1px solid var(--mk-line); border-radius: 12px; padding: .8rem; min-height: 74px; }
.mk-mock-tile .t { font-weight: 800; color: var(--primary,#D97826); font-size: 1.15rem; }
.mk-mock-tile .s { font-size: .72rem; color: var(--muted,#8A7A6C); }
.mk-mock-tile.wide { grid-column: span 3; display: flex; align-items: center; justify-content: space-between; }
.mk-mock-chip { height: 8px; border-radius: 6px; background: linear-gradient(90deg,#F0A845,#E8B04B); }

/* ── Generic section ─────────────────────────────────────────────────────── */
.mk-section { padding-block: 4.5rem; }
.mk-section.alt { background: var(--mk-soft); }
.mk-section-head { text-align: center; max-width: 42rem; margin: 0 auto 3rem; }
.mk-kicker { color: var(--primary,#D97826); font-weight: 800; letter-spacing: 1px; text-transform: uppercase; font-size: .8rem; }
.mk-section-head h2 { font-size: clamp(1.7rem, 3vw, 2.4rem); font-weight: 800; margin: .5rem 0 .6rem; letter-spacing: -.3px; }
.mk-section-head p { color: var(--muted,#8A7A6C); font-size: 1.08rem; line-height: 1.7; margin: 0; }

/* ── Features grid ───────────────────────────────────────────────────────── */
.mk-features { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.mk-feature { background: var(--surface,#fff); border: 1px solid var(--mk-line); border-radius: 18px; padding: 1.6rem; transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease; }
.mk-feature:hover { transform: translateY(-4px); box-shadow: 0 24px 50px -30px rgba(36,26,20,.4); border-color: transparent; }
.mk-feature-ic { width: 52px; height: 52px; border-radius: 14px; display: grid; place-items: center; font-size: 1.5rem; color: #fff; background: var(--logo-grad, linear-gradient(135deg,#F0A845,#D97826)); margin-bottom: 1rem; }
.mk-feature h3 { font-size: 1.15rem; font-weight: 800; margin: 0 0 .4rem; }
.mk-feature p { color: var(--muted,#8A7A6C); margin: 0; line-height: 1.65; font-size: .96rem; }

/* ── How it works ────────────────────────────────────────────────────────── */
.mk-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; counter-reset: step; }
.mk-step { position: relative; background: var(--surface,#fff); border: 1px solid var(--mk-line); border-radius: 18px; padding: 2rem 1.5rem 1.5rem; }
.mk-step .num { counter-increment: step; position: absolute; inset-block-start: -18px; inset-inline-start: 1.5rem; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; font-size: 1.2rem; color: #fff; background: var(--ink-grad, linear-gradient(180deg,#2C2017,#1B130D)); }
.mk-step .num::before { content: counter(step); }
.mk-step h3 { font-size: 1.1rem; font-weight: 800; margin: .8rem 0 .4rem; }
.mk-step p { color: var(--muted,#8A7A6C); margin: 0; line-height: 1.65; font-size: .96rem; }

/* ── Pricing ─────────────────────────────────────────────────────────────── */
.mk-billtoggle { display: flex; align-items: center; justify-content: center; gap: .25rem; width: fit-content; background: var(--mk-soft); border: 1px solid var(--mk-line); border-radius: 999px; padding: .3rem; margin: 0 auto 2.5rem; }
.mk-billtoggle .bill-opt { display: inline-flex; align-items: center; gap: .4rem; border: 0; background: transparent; font-weight: 700; color: var(--ink); padding: .5rem 1.3rem; border-radius: 999px; cursor: pointer; transition: background .15s ease, color .15s ease; }
.mk-billtoggle .bill-opt.active { background: var(--surface,#fff); box-shadow: 0 6px 16px -8px rgba(36,26,20,.4); color: var(--primary,#D97826); }
.mk-billtoggle .save-pill { color: var(--accent,#5E8C4F); font-weight: 800; font-size: .72rem; background: rgba(94,140,79,.12); padding: .1rem .5rem; border-radius: 999px; }

.mk-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 1.25rem; align-items: stretch; }
.mk-plan { display: flex; flex-direction: column; background: var(--surface,#fff); border: 1px solid var(--mk-line); border-radius: 20px; padding: 1.8rem 1.5rem; position: relative; }
.mk-plan.featured { border-color: var(--primary,#D97826); box-shadow: 0 30px 60px -35px rgba(217,120,38,.7); }
.mk-plan-tag { position: absolute; inset-block-start: -13px; inset-inline-end: 1.4rem; background: var(--logo-grad, linear-gradient(135deg,#F0A845,#D97826)); color: #fff; font-weight: 800; font-size: .74rem; letter-spacing: .5px; padding: .3rem .8rem; border-radius: 999px; }
.mk-plan h3 { font-size: 1.3rem; font-weight: 800; margin: 0 0 .25rem; }
.mk-plan .desc { color: var(--muted,#8A7A6C); font-size: .9rem; min-height: 1.2rem; margin-bottom: 1rem; }
.mk-price { display: flex; align-items: baseline; gap: .3rem; margin-bottom: .3rem; }
.mk-price .cur { font-weight: 700; color: var(--muted,#8A7A6C); font-size: 1rem; }
.mk-price .amt { font-size: 2.6rem; font-weight: 800; letter-spacing: -1px; line-height: 1; }
.mk-price .per { color: var(--muted,#8A7A6C); font-weight: 600; font-size: .92rem; }
.mk-price-note { color: var(--accent,#5E8C4F); font-weight: 700; font-size: .82rem; min-height: 1.1rem; margin-bottom: 1.2rem; }
.mk-plan ul { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: .6rem; }
.mk-plan li { display: flex; align-items: flex-start; gap: .55rem; font-size: .95rem; line-height: 1.4; }
.mk-plan li i { color: var(--accent,#5E8C4F); margin-top: .15rem; flex: none; }
.mk-plan li.off { color: var(--muted,#8A7A6C); }
.mk-plan li.off i { color: #C9BBAC; }
.mk-plan .mk-btn { margin-top: auto; justify-content: center; }

/* ── CTA band ────────────────────────────────────────────────────────────── */
.mk-cta { background: var(--ink-grad, linear-gradient(180deg,#2C2017,#1B130D)); color: #fff; border-radius: 24px; padding: 3rem; text-align: center; }
.mk-cta h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0 0 .6rem; }
.mk-cta p { color: rgba(255,255,255,.78); font-size: 1.08rem; margin: 0 0 1.5rem; }

/* ── Footer ──────────────────────────────────────────────────────────────── */
.mk-footer { border-top: 1px solid var(--mk-line); padding-block: 2.5rem; color: var(--muted,#8A7A6C); }
.mk-footer-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; }
.mk-footer .mk-brand { font-size: 1rem; }
.mk-footer a { color: var(--muted,#8A7A6C); text-decoration: none; margin-inline-start: 1rem; }
.mk-footer a:hover { color: var(--primary,#D97826); }

/* ── Section top spacing (inner pages start right under the sticky nav) ────── */
.mk-section-top { padding-top: 3.25rem; }
.mk-pricing-foot { text-align: center; margin-top: 2rem; color: var(--muted,#8A7A6C); }
.mk-pricing-foot i { color: var(--accent,#5E8C4F); margin-inline-end: .35rem; }

/* ── FAQ ─────────────────────────────────────────────────────────────────── */
.mk-faq-wrap { max-width: 46rem; }
.mk-faq { display: flex; flex-direction: column; gap: .75rem; }
.mk-faq details { background: var(--surface,#fff); border: 1px solid var(--mk-line); border-radius: 14px; padding: 0 1.1rem; }
.mk-faq summary { list-style: none; cursor: pointer; font-weight: 700; padding: 1rem 0; display: flex; align-items: center; justify-content: space-between; }
.mk-faq summary::-webkit-details-marker { display: none; }
.mk-faq summary::after { content: "\F282"; font-family: "bootstrap-icons"; color: var(--primary,#D97826); transition: transform .2s ease; font-weight: 400; }
.mk-faq details[open] summary::after { transform: rotate(180deg); }
.mk-faq p { color: var(--muted,#8A7A6C); line-height: 1.7; margin: 0; padding: 0 0 1.1rem; }

/* ── Forms (signup) ──────────────────────────────────────────────────────── */
.mk-signup-wrap { max-width: 52rem; }
.mk-form-card { background: var(--surface,#fff); border: 1px solid var(--mk-line); border-radius: 20px; padding: 2rem; box-shadow: 0 30px 70px -50px rgba(36,26,20,.6); }
.mk-form { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem 1.25rem; }
.mk-field { display: flex; flex-direction: column; }
.mk-field-full { grid-column: 1 / -1; }
.mk-form label { font-weight: 700; font-size: .9rem; margin-bottom: .35rem; display: block; }
.mk-form .form-control, .mk-form .form-select { border-radius: 12px; border: 1.5px solid var(--mk-line); padding: .65rem .85rem; }
.mk-form .form-control:focus, .mk-form .form-select:focus { border-color: var(--primary,#D97826); box-shadow: 0 0 0 .2rem rgba(217,120,38,.15); outline: none; }
.mk-form .field-err, .mk-form .field-validation-error { color: #C0392B; font-size: .82rem; margin-top: .3rem; display: block; }
.mk-form .input-validation-error { border-color: #C0392B; }
.mk-form-error, .mk-form .validation-summary-errors { color: #C0392B; background: #FDECEA; border: 1px solid #F5C6CB; border-radius: 12px; padding: .75rem 1rem; grid-column: 1 / -1; }
.mk-form-error:empty, .mk-form .validation-summary-valid { display: none; }
.mk-form-error ul, .mk-form .validation-summary-errors ul { margin: 0; padding-inline-start: 1.1rem; }

/* subdomain input with fixed suffix */
.mk-subdomain { display: flex; align-items: stretch; }
.mk-subdomain .form-control { border-start-end-radius: 0; border-end-end-radius: 0; }
.mk-subdomain .suffix { display: flex; align-items: center; padding: 0 .8rem; background: var(--mk-soft); border: 1.5px solid var(--mk-line); border-inline-start: 0; border-start-end-radius: 12px; border-end-end-radius: 12px; color: var(--muted,#8A7A6C); font-size: .88rem; white-space: nowrap; }

/* plan picker (radio cards) */
.mk-plan-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: .7rem; }
.mk-plan-pick .pick { position: relative; cursor: pointer; border: 1.5px solid var(--mk-line); border-radius: 14px; padding: .9rem 1rem; margin: 0; transition: border-color .15s ease, background .15s ease, box-shadow .2s ease; }
.mk-plan-pick .pick input { position: absolute; opacity: 0; inset: 0; }
.mk-plan-pick .pick.sel { border-color: var(--primary,#D97826); background: #FFF7EF; box-shadow: 0 10px 24px -18px rgba(217,120,38,.8); }
.mk-plan-pick .pick-body { display: flex; flex-direction: column; gap: .25rem; }
.mk-plan-pick .pick-name { font-weight: 800; }
.mk-plan-pick .pick-price { font-size: .9rem; color: var(--primary,#D97826); font-weight: 700; }
.mk-plan-pick .pick-price small { color: var(--muted,#8A7A6C); font-weight: 600; }

/* billing cycle radios */
.mk-cycle-pick { display: flex; gap: .6rem; }
.mk-cycle-pick .cyc { position: relative; cursor: pointer; border: 1.5px solid var(--mk-line); border-radius: 12px; padding: .55rem 1.3rem; margin: 0; font-weight: 700; transition: border-color .15s ease, background .15s ease; }
.mk-cycle-pick .cyc input { position: absolute; opacity: 0; inset: 0; }
.mk-cycle-pick .cyc:has(input:checked) { border-color: var(--primary,#D97826); background: #FFF7EF; color: var(--primary,#D97826); }

.mk-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; margin-top: .5rem; }
.mk-form-note { color: var(--muted,#8A7A6C); font-size: .88rem; margin: 0; display: inline-flex; align-items: center; gap: .4rem; }
.mk-form-note i { color: var(--accent,#5E8C4F); }

/* ── Thank-you ───────────────────────────────────────────────────────────── */
.mk-thanks-wrap { max-width: 40rem; }
.mk-thanks-card { text-align: center; background: var(--surface,#fff); border: 1px solid var(--mk-line); border-radius: 24px; padding: 3rem 2rem; box-shadow: 0 40px 90px -60px rgba(36,26,20,.6); }
.mk-thanks-ic { width: 72px; height: 72px; border-radius: 50%; display: grid; place-items: center; font-size: 2.2rem; color: #fff; background: var(--accent,#5E8C4F); margin: 0 auto 1.25rem; box-shadow: 0 16px 34px -14px rgba(94,140,79,.8); }
.mk-thanks-card h1 { font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 800; margin: 0 0 .6rem; }
.mk-thanks-card p.lead { color: var(--muted,#8A7A6C); font-size: 1.08rem; line-height: 1.7; margin: 0 0 1.75rem; }
.mk-thanks-steps { list-style: none; padding: 0; margin: 0 auto 2rem; text-align: start; max-width: 30rem; display: flex; flex-direction: column; gap: .9rem; }
.mk-thanks-steps li { display: flex; align-items: flex-start; gap: .75rem; line-height: 1.6; }
.mk-thanks-steps i { color: var(--primary,#D97826); font-size: 1.2rem; margin-top: .1rem; flex: none; }

/* ── Language spans (self-contained bilingual, no i18n JSON) ─────────────── */
[data-lang="ar"] .lang-en { display: none; }
[data-lang="en"] .lang-ar { display: none; }

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .mk-hero-inner { grid-template-columns: 1fr; padding-block: 3rem; }
    .mk-hero-visual { display: none; }
    .mk-features, .mk-steps { grid-template-columns: 1fr; }
    .mk-nav-links a.mk-link { display: none; }
    .mk-nav-links a.mk-link.keep { display: inline-flex; }
    .mk-cta { padding: 2rem 1.25rem; }
    .mk-form { grid-template-columns: 1fr; }
}