/* ══════════════════════════════════════════════════════════════
   demo.css — صفحتَي "احجز عرضاً" و"تواصل معنا"
   (v84 — كانت ناقصة تماماً والصفحة كانت بتطلع HTML خام)
   ══════════════════════════════════════════════════════════════ */
:root{
    --bd:#1B2D6E; --bl:#29ABE2; --gold:#c9a84c;
    --ink:#1a2332; --mut:#6b7c93; --line:#e4eaf3;
    --rlg:16px; --rxl:22px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
    font-family:'Noto Sans Arabic',system-ui,sans-serif;
    background:linear-gradient(140deg,#0F1B45 0%,#1B2D6E 45%,#20418F 100%);
    min-height:100vh;padding:2.5rem 1.25rem 4rem;color:var(--ink);
    display:flex;flex-direction:column;align-items:center;
}
body::before{
    content:'';position:fixed;inset:0;z-index:0;pointer-events:none;
    background:
      radial-gradient(circle at 12% 18%, rgba(41,171,226,.30), transparent 45%),
      radial-gradient(circle at 88% 82%, rgba(201,168,76,.18), transparent 45%);
}
.back-link{
    position:relative;z-index:1;align-self:flex-start;max-width:660px;width:100%;
    margin:0 auto .95rem;color:#cfe3ff;font-weight:700;font-size:.9rem;
    text-decoration:none;transition:color .2s
}
.back-link:hover{color:#fff}

/* ── الكارت ─────────────────────────────────────────────── */
.card{
    position:relative;z-index:1;background:#fff;border-radius:var(--rxl);
    max-width:660px;width:100%;padding:2.5rem 2.25rem 2rem;
    box-shadow:0 30px 80px rgba(6,16,45,.38)
}
.card-header{text-align:center;margin-bottom:1.5rem}
.logo{height:62px;width:auto;object-fit:contain;margin-bottom:.9rem}
.card-title{
    font-family:'Noto Naskh Arabic',serif;font-size:1.85rem;font-weight:700;
    color:var(--bd);line-height:1.4;margin-bottom:.4rem
}
.card-sub{color:var(--mut);font-size:.92rem;line-height:1.7}

/* ── شريط المميزات ──────────────────────────────────────── */
.features-strip{
    display:grid;grid-template-columns:repeat(auto-fit,minmax(132px,1fr));gap:.55rem;
    background:#F4F8FF;border:1px solid #dfe8f7;border-radius:var(--rlg);
    padding:.85rem;margin-bottom:1.75rem
}
.strip-item{
    text-align:center;font-size:.82rem;font-weight:700;color:var(--bd);
    padding:.3rem;line-height:1.6
}

/* ── النموذج ────────────────────────────────────────────── */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.form-group{margin-bottom:1.1rem}
.form-label{
    display:block;font-weight:700;font-size:.85rem;
    color:var(--ink);margin-bottom:.42rem
}
.form-control{
    width:100%;border:1.6px solid var(--line);border-radius:11px;
    padding:.78rem 1rem;font-family:inherit;font-size:.92rem;
    color:var(--ink);background:#fff;outline:none;
    transition:border-color .2s,box-shadow .2s
}
.form-control::placeholder{color:#a9b6c8}
.form-control:focus{border-color:var(--bl);box-shadow:0 0 0 3.5px rgba(41,171,226,.14)}
select.form-control{
    appearance:none;cursor:pointer;padding-inline-start:2.4rem;
    background-image:url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7c93' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat:no-repeat;background-position:left 1rem center;background-size:15px
}
textarea.form-control{min-height:104px;resize:vertical;line-height:1.75}
.field-hint{font-size:.76rem;color:var(--mut);margin-top:.35rem;line-height:1.6}
.field-error{color:#dc2626;font-size:.78rem;display:block;margin-top:.3rem}

/* ── الأزرار ────────────────────────────────────────────── */
.submit-btn,.btn-demo{
    width:100%;border:none;cursor:pointer;font-family:inherit;
    background:linear-gradient(135deg,var(--bl),var(--bd));color:#fff;
    border-radius:50px;padding:1.05rem;font-size:1.02rem;font-weight:800;
    margin-top:.6rem;transition:transform .2s,box-shadow .2s;
    box-shadow:0 10px 26px rgba(27,45,110,.3)
}
.submit-btn:hover,.btn-demo:hover{transform:translateY(-2px);box-shadow:0 16px 38px rgba(27,45,110,.42)}
.submit-btn:active,.btn-demo:active{transform:translateY(0)}

/* ── الرسائل والفوتر ────────────────────────────────────── */
.success-box{
    background:#e8f8ee;color:#166534;border:1.5px solid #bbe8cd;
    border-radius:var(--rlg);padding:1rem 1.2rem;margin-bottom:1.5rem;
    font-weight:700;text-align:center;line-height:1.7
}
.footer-note{
    text-align:center;margin-top:1.6rem;padding-top:1.4rem;
    border-top:1px solid var(--line);color:var(--mut);font-size:.88rem;line-height:1.9
}
.footer-note a{color:var(--bl);font-weight:800;text-decoration:none}
.footer-note a:hover{text-decoration:underline}

/* ── أرقام سريعة ────────────────────────────────────────── */
.quick-phones{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin-top:.7rem}
.quick-phone{
    display:inline-flex;align-items:center;gap:.3rem;background:#F4F8FF;
    border:1.5px solid #dfe8f7;border-radius:999px;padding:.42rem .9rem;
    font-weight:800;font-size:.86rem;color:var(--bd);text-decoration:none;
    direction:ltr;unicode-bidi:embed;transition:all .2s
}
.quick-phone:hover{border-color:var(--bl);color:var(--bl);transform:translateY(-2px)}
.quick-phone.wa{background:#22c55e;border-color:#22c55e;color:#fff}
.quick-phone.wa:hover{background:#16a34a;border-color:#16a34a;color:#fff}

/* ── تخطيط قديم (متسايب للتوافق) ────────────────────────── */
.demo-grid{display:grid;grid-template-columns:1fr 1fr;gap:2rem;align-items:start}
.demo-left{color:#fff}

@media(max-width:640px){
    body{padding:1.5rem .9rem 3rem}
    .card{padding:1.9rem 1.35rem 1.6rem;border-radius:var(--rlg)}
    .card-title{font-size:1.5rem}
    .form-row,.demo-grid{grid-template-columns:1fr;gap:0}
    .demo-grid{gap:1.5rem}
}