/* Ramadan: image-led travel page, clear booking surfaces, restrained input feedback. */
.ramadan-page { --ramadan-paper:#f4f6f7; --ramadan-surface:#fff; --ramadan-ink:#152f3a; --ramadan-muted:#56656d; --ramadan-line:#dce3e7; --ramadan-accent:#775826; --ease-out:cubic-bezier(.23,1,.32,1); background:var(--ramadan-paper); color:var(--ramadan-ink); }
.ramadan-shell { max-width:1200px; margin-inline:auto; padding-inline:24px; }
.ramadan-page a { transition:color 160ms ease,background-color 160ms ease,transform 160ms var(--ease-out); }
.ramadan-hero { position:relative; isolation:isolate; padding-block:28px 0; }
.ramadan-hero-visual { position:absolute; inset:0 0 72px; z-index:-1; overflow:hidden; background:#122c37; }
.ramadan-hero-visual picture,.ramadan-hero-visual img { display:block; width:100%; height:100%; }
.ramadan-hero-visual img { object-fit:cover; object-position:center 55%; }
.ramadan-hero-visual::after { content:""; position:absolute; inset:0; background:linear-gradient(270deg,#071b25ee 0%,#071b25ab 42%,#071b2520 100%),linear-gradient(0deg,#071b2577,transparent 60%); }
.ramadan-hero-copy { min-height:330px; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; padding-block:28px; color:#fff; }
.ramadan-eyebrow { display:inline-block; font-size:.88rem; color:#e5cc9e; font-weight:700; margin-block-end:18px; }
.ramadan-hero h1 { font-size:clamp(3.4rem,6vw,5.25rem); font-weight:700; line-height:1.15; margin-block:0 16px; }
.ramadan-hero h1 span { color:#ead4ac; }
.ramadan-hero-copy > p { max-width:430px; color:#f2f5f6; line-height:1.9; font-size:1.1rem; }
.ramadan-hero-note { margin-block-start:20px; padding-inline-start:12px; border-inline-start:2px solid #d5b477; font-size:.86rem; color:#e6edef; }
.ramadan-program-picker { margin-block-start:22px; background:var(--ramadan-surface); border:1px solid var(--ramadan-line); border-radius:20px; padding:22px; box-shadow:0 8px 30px #0d29300a; }
.ramadan-picker-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:0 12px 16px; }
.ramadan-picker-label { font-weight:700; font-size:1.05rem; }
.ramadan-picker-heading > span { color:var(--ramadan-muted); font-size:.85rem; }
.ramadan-program-nav { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; }
.ramadan-program-nav a { display:block; min-width:0; padding:15px 16px; border:1px solid var(--ramadan-line); border-radius:12px; background:var(--ramadan-paper); }
.ramadan-nav-label { display:block; font-size:1.1rem; font-weight:700; line-height:1.5; }
.ramadan-nav-meta { display:flex; justify-content:space-between; align-items:center; gap:8px; color:var(--ramadan-muted); font-size:.78rem; margin-block-start:7px; }
.ramadan-nav-meta > span { display:inline-flex; align-items:center; justify-content:center; width:25px; height:25px; flex:0 0 25px; border-radius:50%; color:var(--ramadan-ink); background:var(--ramadan-surface); }
.ramadan-intro { padding-block:24px 4px; }
.ramadan-intro p { max-width:900px; color:var(--ramadan-muted); font-size:.9rem; line-height:1.8; }
.ramadan-group { padding-block:42px 8px; scroll-margin-block-start:110px; }
.ramadan-group-heading { display:flex; align-items:center; gap:16px; margin-block-end:24px; }
.ramadan-section-index { display:none; }
.ramadan-group h2 { font-size:clamp(1.8rem,3vw,2.2rem); font-weight:700; line-height:1.5; }
.ramadan-group-count { padding:5px 12px; color:var(--ramadan-muted); font-size:.82rem; border:1px solid var(--ramadan-line); border-radius:30px; white-space:nowrap; background:var(--ramadan-surface); }
.ramadan-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px; }
.ramadan-offer { position:relative; display:flex; flex-direction:column; min-width:0; overflow:hidden; background:var(--ramadan-surface); border:1px solid var(--ramadan-line); border-radius:20px; box-shadow:0 2px 4px #152f3a03; }
.ramadan-program-tag { position:absolute; inset-block-start:16px; inset-inline-start:16px; z-index:1; display:inline-flex; padding:7px 13px; background:#102b38ed; color:#fff; font-size:.88rem; font-weight:700; border:1px solid #ffffff26; border-radius:8px; }
.ramadan-card-photos { display:flex; min-height:185px; gap:3px; background:var(--ramadan-line); }
.ramadan-card-photo { display:block; flex:1; min-width:0; overflow:hidden; }
.ramadan-card-photo img { display:block; width:100%; height:225px; object-fit:cover; transition:transform 240ms var(--ease-out); }
.ramadan-offer-body { display:flex; flex-direction:column; padding:24px; flex:1; }
.ramadan-offer-top { display:grid; grid-template-columns:minmax(0,1fr) 110px; align-items:center; gap:16px; margin-block-end:20px; }
.ramadan-airport > span { display:block; color:var(--ramadan-muted); font-size:.83rem; }
.ramadan-airport h3 { font-size:1.85rem; font-weight:700; line-height:1.4; margin-block-start:3px; }
.ramadan-airline { min-width:0; text-align:center; }
.ramadan-airline img { display:block; width:100px; height:38px; padding:4px; object-fit:contain; background:#fff; border-radius:4px; margin-inline:auto; }
.ramadan-airline small { display:block; color:var(--ramadan-muted); font-size:.73rem; margin-block-start:6px; line-height:1.6; }
.ramadan-route { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:16px; margin-block-end:18px; background:var(--ramadan-paper); border:1px solid var(--ramadan-line); border-radius:12px; }
.ramadan-route > div { min-width:0; }
.ramadan-route > div + div { border-inline-start:1px solid var(--ramadan-line); padding-inline-start:16px; }
.ramadan-route :is(dt,dd) { min-width:0; margin:0; }
.ramadan-route :is(dt,dd) > span { display:block; color:var(--ramadan-muted); font-size:.78rem; margin-block-end:4px; }
.ramadan-route dt strong { display:block; font-size:1.25rem; font-weight:700; line-height:1.5; font-variant-numeric:tabular-nums; }
.ramadan-route dd { margin-block-start:10px; }
.ramadan-route dd strong { display:block; font-size:1.04rem; font-weight:700; line-height:1.7; }
.ramadan-hotel { margin-block-end:12px; min-height:65px; line-height:1.8; }
.ramadan-hotel > span { display:block; color:var(--ramadan-muted); font-size:.8rem; }
.ramadan-hotel p { font-weight:700; font-size:1rem; }
.ramadan-hotel a { display:inline-block; min-height:44px; padding-block:5px; text-decoration:underline; text-decoration-color:var(--ramadan-line); text-underline-offset:5px; }
.ramadan-price { margin-block-start:auto; padding-block:12px 18px; border-block-start:1px solid var(--ramadan-line); }
.ramadan-price strong { color:var(--ramadan-muted); font-size:1rem; font-weight:500; }
.ramadan-price-list { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.ramadan-button { display:inline-flex; justify-content:center; align-items:center; gap:12px; min-height:50px; padding:13px 24px; border:1px solid var(--ramadan-ink); border-radius:10px; background:var(--ramadan-ink); color:var(--ramadan-paper); font:inherit; font-weight:700; cursor:pointer; transition:transform 160ms var(--ease-out),opacity 160ms ease; touch-action:manipulation; }
.ramadan-offer .ramadan-button { width:100%; }
.ramadan-button:active,.ramadan-program-nav a:active { transform:scale(.98); }
.ramadan-button:focus-visible:active,.ramadan-program-nav a:focus-visible:active { transform:none; }
.ramadan-page :is(a,button,input,select,textarea):focus-visible { outline:3px solid #ad8038; outline-offset:4px; }
.ramadan-upcoming { display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:45px; margin-block:48px 24px; padding:28px; border:1px solid var(--ramadan-line); border-radius:20px; background:var(--ramadan-surface); }
.ramadan-upcoming-photo { height:320px; min-width:0; border-radius:12px; overflow:hidden; }
.ramadan-upcoming-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.ramadan-upcoming-status { display:inline-block; margin-block-end:16px; padding:5px 12px; color:var(--ramadan-accent); background:var(--ramadan-paper); border:1px solid var(--ramadan-line); border-radius:6px; font-weight:700; font-size:.85rem; }
.ramadan-upcoming h2 { margin-block-end:14px; }
.ramadan-upcoming p { color:var(--ramadan-muted); line-height:1.9; margin-block-end:24px; max-width:380px; }
.ramadan-contact-banner { text-align:center; padding-block:40px 65px; }
.ramadan-contact-banner h2 { font-size:clamp(1.7rem,3vw,2.2rem); margin-block-end:14px; }
.ramadan-contact-banner p { color:var(--ramadan-muted); line-height:1.9; margin-block-end:24px; }
/* Modal stays native: focus containment and Escape behaviour come from <dialog>. */
#ramadan-dialog { border:1px solid var(--ramadan-line); border-radius:14px; background:var(--ramadan-paper); color:var(--ramadan-ink); width:min(720px,calc(100% - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:28px; overscroll-behavior:contain; box-shadow:0 24px 100px #0005; }
#ramadan-dialog::backdrop { background:#071820b3; }
.ramadan-close { display:block; margin-inline-start:auto; margin-block-end:16px; min-height:44px; min-width:80px; border:1px solid var(--ramadan-line); border-radius:6px; background:var(--ramadan-surface); color:var(--ramadan-ink); font:inherit; cursor:pointer; }
.ramadan-register h2 { font-size:1.8rem; font-weight:500; margin-block-end:10px; }
.ramadan-register p { color:var(--ramadan-muted); line-height:1.9; }
.ramadan-register form { background:var(--ramadan-surface); border:1px solid var(--ramadan-line); border-radius:10px; padding:24px; margin-block-start:22px; }
.ramadan-register[hidden],#ramadan-success[hidden] { display:none; }
.ramadan-contact { display:none; }
.ramadan-selected { padding-block-end:18px; margin-block-end:20px; border-block-end:1px solid var(--ramadan-line); }
.ramadan-selected strong { display:block; font-size:1.15rem; }
.ramadan-fields { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
.ramadan-fields label { display:block; font-weight:700; margin-block-end:6px; }
.ramadan-fields input,.ramadan-fields select,.ramadan-fields textarea { min-height:48px; width:100%; border:1px solid var(--ramadan-muted); border-radius:6px; padding:12px; font:inherit; background:var(--ramadan-paper); color:var(--ramadan-ink); }
.ramadan-fields .wide { grid-column:1/-1; }
.ramadan-consent { display:flex; align-items:flex-start; gap:10px; margin-block:20px; line-height:1.8; }
.ramadan-consent input { flex:0 0 20px; width:20px; height:20px; margin-block-start:4px; accent-color:var(--ramadan-ink); }
.ramadan-status { margin-block:16px; padding:12px 15px; background:var(--ramadan-paper); border-inline-start:3px solid var(--ramadan-accent); }
.ramadan-status[data-state=error] { color:#861f1f; background:#fff2f0; border-color:#861f1f; }
.ramadan-status[data-state=success] { color:#17543a; background:#eff8f1; border-color:#17543a; }
.ramadan-register button:disabled { opacity:.65; cursor:wait; transform:none; }
.ramadan-trap { position:absolute; inset-inline-start:-9999px; width:1px; height:1px; overflow:hidden; }
.ramadan-register form[aria-busy=true] { cursor:progress; }
.ramadan-success { text-align:center; padding:24px 10px; }
.ramadan-success h2 { font-size:1.9rem; font-weight:700; margin-block-end:18px; }
.ramadan-success p { margin-block-end:20px; line-height:1.8; }
.ramadan-whatsapp-note { font-size:.92rem; color:var(--ramadan-muted); margin-block-start:16px; }
.ramadan-finish { border:0; background:transparent; color:var(--ramadan-ink); padding:12px 22px; min-height:44px; font:inherit; text-decoration:underline; cursor:pointer; }

@media(hover:hover) and (pointer:fine) {
    .ramadan-program-nav a:hover { background:var(--ramadan-surface); border-color:#9cabb3; }
    .ramadan-button:hover { opacity:.9; }
    .ramadan-card-photo:hover img { transform:scale(1.025); }
    .ramadan-hotel a:hover { text-decoration-color:currentColor; }
}
@media(max-width:767px) {
    .ramadan-shell { padding-inline:20px; }
    .ramadan-hero { padding-block-start:8px; }
    .ramadan-hero-visual { inset-block-end:125px; }
    .ramadan-hero-visual img { object-position:48% 50%; }
    .ramadan-hero-visual::after { background:linear-gradient(270deg,#071b25da,#071b2560),linear-gradient(0deg,#071b2577,transparent); }
    .ramadan-hero-copy { min-height:275px; padding-block:22px 12px; }
    .ramadan-eyebrow { font-size:.8rem; margin-block-end:14px; }
    .ramadan-hero h1 { font-size:clamp(2.8rem,12vw,4rem); margin-block-end:14px; }
    .ramadan-hero-copy > p { font-size:1rem; max-width:330px; }
    .ramadan-hero-note { font-size:.8rem; margin-block-start:14px; }
    .ramadan-program-picker { padding:16px; margin-block-start:12px; border-radius:16px; }
    .ramadan-picker-heading { display:block; padding:0 0 12px; }
    .ramadan-picker-heading > span { display:none; }
    .ramadan-picker-label { font-size:1rem; }
    .ramadan-program-nav { grid-template-columns:1fr 1fr; gap:8px; }
    .ramadan-program-nav a { padding:12px; border-radius:9px; }
    .ramadan-nav-label { font-size:1rem; }
    .ramadan-nav-meta { font-size:.72rem; margin-block-start:5px; }
    .ramadan-nav-meta > span { width:20px; height:20px; flex-basis:20px; }
    .ramadan-intro { padding-block:18px 0; }
    .ramadan-intro p { font-size:.85rem; }
    .ramadan-group { padding-block-start:32px; }
    .ramadan-group-heading { gap:12px; margin-block-end:18px; }
    .ramadan-group h2 { font-size:1.65rem; }
    .ramadan-group-count { padding:3px 9px; font-size:.75rem; }
    .ramadan-grid { grid-template-columns:1fr; gap:20px; }
    .ramadan-card-photo img { height:190px; }
    .ramadan-program-tag { inset-block-start:12px; inset-inline-start:12px; font-size:.8rem; padding:6px 10px; }
    .ramadan-offer-body { padding:20px; }
    .ramadan-airport h3 { font-size:1.7rem; }
    .ramadan-upcoming { grid-template-columns:1fr; gap:22px; padding:20px; margin-block-start:32px; }
    .ramadan-upcoming-photo { height:230px; }
    .ramadan-contact-banner { padding-block:28px 45px; }
    #ramadan-dialog { padding:16px; width:calc(100% - 16px); max-height:calc(100dvh - 16px); }
    .ramadan-register form { padding:16px; }
    .ramadan-fields { grid-template-columns:1fr; gap:14px; }
}
@media(max-width:360px) {
    .ramadan-program-picker { padding:12px; }
    .ramadan-program-nav a { padding:10px; }
    .ramadan-nav-label { font-size:.93rem; }
    .ramadan-nav-meta { font-size:.7rem; gap:4px; }
    .ramadan-offer-body { padding:16px; }
    .ramadan-offer-top { grid-template-columns:minmax(0,1fr) 90px; gap:10px; }
    .ramadan-airline img { width:85px; }
    .ramadan-route { padding:12px; gap:10px; }
    .ramadan-route > div + div { padding-inline-start:10px; }
    .ramadan-route dt strong { font-size:1.15rem; }
}
@media(prefers-color-scheme:dark) {
    .ramadan-page { --ramadan-paper:#12252e; --ramadan-surface:#1b323e; --ramadan-ink:#f1f5f6; --ramadan-muted:#b7c5cc; --ramadan-line:#3d5662; --ramadan-accent:#e2c18b; color-scheme:dark; }
    .ramadan-airline img { color-scheme:light; }
}
@media(prefers-reduced-motion:no-preference) {
    #ramadan-dialog[data-input=pointer][open] { animation:ramadan-dialog-enter 180ms var(--ease-out); }
    .ramadan-page [data-aos] { transition-duration:240ms; transition-timing-function:var(--ease-out); }
}
@keyframes ramadan-dialog-enter { from { opacity:0; transform:translateY(6px) scale(.98); } to { opacity:1; transform:none; } }
@media(prefers-reduced-motion:reduce) { .ramadan-page * { scroll-behavior:auto; transition:none; animation:none; } }