:root{ --cal-ic:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%234b5563' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); --ink:#111213; --body:#4b5563; --muted:#9aa1ab; --hairline:#ececee; --chip:#f6f6f8; --ok:#16a34a; --accent:#E86020; --accent-dark:#CC4E12; --radius-card:20px; --maxw:1180px; } *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth;overflow-x:clip;max-width:100%} body{font-family:'Inter',-apple-system,sans-serif;color:var(--ink);background:#fff;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:clip;max-width:100%;position:relative} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} section{padding:100px 0} .eyebrow{font-size:11px;font-weight:600;letter-spacing:.24em;text-transform:uppercase;color:var(--muted);text-align:center;margin-bottom:14px} h2.sec-title{font-size:clamp(30px,4vw,44px);font-weight:800;letter-spacing:-0.03em;text-align:center;line-height:1.15} .sec-sub{max-width:560px;margin:18px auto 0;text-align:center;color:var(--body);font-size:16px} .btn-black{position:relative;overflow:hidden;display:inline-flex;align-items:center;gap:10px;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:16px 30px;font-family:inherit;font-size:16px;font-weight:600;cursor:pointer;text-decoration:none;transition:transform .18s ease, box-shadow .18s ease, background .18s ease} .btn-black:hover{background:var(--accent-dark)} .btn-black::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);transform:skewX(-20deg)} .btn-black:hover::after{animation:shine .7s ease} @keyframes shine{to{left:130%}} .btn-black:hover{transform:translateY(-2px);box-shadow:0 12px 28px rgba(232,96,32,.35);background:var(--accent-dark)} .btn-black .arr{transition:transform .18s ease} .btn-black:hover .arr{transform:translateX(4px)} .btn-ghost{display:inline-flex;align-items:center;gap:8px;background:#fff;color:var(--ink);border:1px solid var(--hairline);border-radius:999px;padding:12px 22px;font-family:inherit;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;transition:border-color .18s ease, transform .18s ease} .btn-ghost:hover{border-color:#c9ccd2;transform:translateY(-1px)} a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--ink);outline-offset:3px;border-radius:6px} input:focus,select:focus,textarea:focus{outline:none} /* progress bar */ #progress{position:fixed;top:0;left:0;height:2px;background:var(--ink);width:0;z-index:100;transition:width .1s linear} /* ---------- OFFICIAL-STYLE VERIFY BANNER ---------- */ .verify-bar{background:#f8f9fa;border-bottom:1px solid var(--hairline);font-size:14px} .verify-bar .vb-in{display:flex;align-items:center;justify-content:center;gap:10px;padding:12px 24px;flex-wrap:wrap;text-align:center;font-weight:500} .verify-bar .flag-ic{width:24px;height:16px;border-radius:3px;overflow:hidden;display:inline-flex;flex-direction:row;flex:none;border:1px solid rgba(0,0,0,.1);box-shadow:0 1px 3px rgba(0,0,0,.12)} .verify-bar .flag-ic .red{width:27%;background:#EF3340} .verify-bar .flag-ic .tri{flex:1;display:flex;flex-direction:column} .verify-bar .flag-ic .tri i{flex:1;display:block} .verify-bar b{font-weight:600} .vb-toggle{background:none;border:none;font-family:inherit;font-size:13px;font-weight:600;color:var(--accent-dark);cursor:pointer;display:inline-flex;align-items:center;gap:5px} .vb-toggle .car{transition:transform .25s ease;font-size:10px} .verify-bar.open .vb-toggle .car{transform:rotate(180deg)} .vb-panel{max-height:0;overflow:hidden;transition:max-height .4s ease} .verify-bar.open .vb-panel{max-height:560px} .vb-grid{display:grid;grid-template-columns:1fr 1fr;gap:34px;padding:30px 24px 6px;max-width:980px;margin:0 auto;text-align:left} .vb-item{display:flex;gap:14px} .vb-item .ic{width:40px;height:40px;border-radius:50%;background:#fff;border:1px solid var(--hairline);display:flex;align-items:center;justify-content:center;flex:none} .vb-item h5{font-size:14.5px;font-weight:700;letter-spacing:-0.01em;line-height:1.4} .vb-item p{font-size:13px;color:var(--body);margin-top:4px;line-height:1.55} .vb-item a{color:var(--accent-dark);font-weight:600} .vb-reg{max-width:980px;width:calc(100% - 40px);margin:20px auto 18px;background:#fff;border:1px solid var(--hairline);border-radius:12px;padding:13px 20px;display:flex;align-items:center;gap:11px;font-size:13px;text-align:left} .vb-reg b{color:var(--accent-dark)} .vb-close{display:block;margin:0 auto 22px;background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:8px 22px;font-family:inherit;font-size:12.5px;font-weight:600;color:var(--body);cursor:pointer;transition:border-color .15s ease} .vb-close:hover{border-color:#c9ccd2;color:var(--ink)} @media (max-width:760px){.vb-grid{grid-template-columns:1fr}.verify-bar.open .vb-panel{max-height:1400px}} /* ---------- LANGUAGE / RTL ---------- */ .t-ar{display:none !important} body.ar .t-ar{display:inline !important} body.ar .t-en{display:none !important} body.ar .eyebrow{letter-spacing:.05em} body.ar .stage::before{left:auto;right:-50%} body.ar #how svg{transform:scaleX(-1)} body.ar{direction:rtl;font-family:'Cairo',sans-serif} body.ar h1,body.ar h2,body.ar h3,body.ar .sec-title,body.ar .prod-name,body.ar .prod-price{letter-spacing:0} body.ar .vb-grid,body.ar .vb-reg{text-align:right} /* The OVERFLOW CONTAINER must be LTR too, not just the track. A max-content track is far wider than its container, and direction decides which edge it is anchored to: under rtl the track's inline start is the RIGHT edge, so it overflows leftward and the visible window already shows the END of the strip. translateX(-50%) then walks the last cards off-screen and leaves blank space — the row scrolled for a few seconds and went empty. Setting direction on .love-track alone fixed the card ORDER but not the anchoring. Card text stays Arabic: each .love-card carries its own dir="rtl". */ body.ar .marquee,body.ar .love-marquee, body.ar .marquee-track,body.ar .love-track{direction:ltr} .lang-btn{background:#fff;border:1px solid var(--hairline);border-radius:999px;padding:8px 16px;font-family:'Cairo','Inter',sans-serif;font-size:13px;font-weight:700;cursor:pointer;color:var(--ink);text-decoration:none;transition:border-color .15s ease} .lang-btn:hover{border-color:#c9ccd2} /* ---------- APPLY POPUP ---------- */ /* z-index 2147483647 (32-bit int max) is deliberate, not paranoia: the respond.io chat widget injects #respondio__widget at z-index 2147483646 (verified in cdn.respond.io/widget/widget.js), so at our previous z-index of 200 the chat bubble painted over the form's Continue/Pay buttons and swallowed the clicks. int-max is the only value it cannot be beaten at. */ .modal{position:fixed;inset:0;background:rgba(17,18,19,.55);-webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);z-index:2147483647;display:none;align-items:center;justify-content:center;padding:18px} /* Belt and braces. If respond.io ever also uses int-max, source order decides and their node — injected at runtime — comes last, so it would win again. Hiding it while any modal is open removes that race entirely, and a chat bubble over a payment form is noise regardless. visibility (not display) so the widget's own layout code is not disturbed; !important because respond.io sets its z-index inline. */ body:has(.modal.on) #respondio__widget, body:has(.modal.on) [id^="respondio__"], body:has(.modal.on) .respond-io-widget, body:has(.modal.on) .respondio-widget{visibility:hidden !important;pointer-events:none !important} .modal.on{display:flex;animation:modalFade .25s ease} @keyframes modalFade{from{opacity:0}to{opacity:1}} .modal-box{width:100%;max-width:1060px;max-height:min(92vh,880px);background:#fff;border-radius:20px;overflow:hidden;position:relative;animation:modalPop .35s cubic-bezier(.2,.9,.3,1.1)} @keyframes modalPop{from{transform:scale(.95) translateY(14px);opacity:0}to{transform:none;opacity:1}} .modal-box iframe{width:100%;height:100%;border:none} .modal-close{position:absolute;top:12px;right:12px;width:38px;height:38px;border-radius:50%;background:#fff;border:1px solid var(--hairline);font-size:17px;cursor:pointer;z-index:2;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 14px rgba(17,18,19,.1);transition:transform .15s ease} .modal-close:hover{transform:rotate(90deg)} body.ar .modal-close{right:auto;left:12px} @media (max-width:640px){.modal{padding:0}.modal-box{height:100%;max-width:none;border-radius:0}} /* ---------- INLINE APPLY FORM (popup) ---------- */ .modal-box{display:flex;flex-direction:column;background:#fff} .m-scroll{overflow-y:auto;overscroll-behavior:contain;flex:1;padding:26px 26px 40px} #apply-modal .stepper{display:flex;justify-content:center;padding:34px 20px 6px;max-width:520px;margin:0 auto} #apply-modal .st{flex:1;position:relative;text-align:center} #apply-modal .st .b{width:28px;height:28px;border-radius:50%;background:var(--chip);color:var(--muted);font-size:12.5px;font-weight:700;display:flex;align-items:center;justify-content:center;margin:0 auto;position:relative;z-index:2;transition:all .3s ease;border:1px solid var(--hairline)} #apply-modal .st::before{content:'';position:absolute;top:14px;left:-50%;width:100%;height:2px;background:var(--hairline);z-index:1} body.ar #apply-modal .st::before{left:auto;right:-50%} #apply-modal .st:first-child::before{display:none} #apply-modal .st.active .b{background:var(--accent);color:#fff;border-color:var(--accent);transform:scale(1.12)} #apply-modal .st.done .b{background:var(--ok);color:#fff;border-color:var(--ok)} #apply-modal .st.done::before,#apply-modal .st.active::before{background:var(--ok)} #apply-modal .st .l{font-size:11px;font-weight:600;color:var(--muted);margin-top:7px} #apply-modal .st.active .l,#apply-modal .st.done .l{color:var(--ink)} .m-layout{display:grid;grid-template-columns:1fr 290px;gap:22px;align-items:start;max-width:940px;margin:14px auto 0} #apply-modal .step-view{display:none;animation:slideIn .35s cubic-bezier(.2,.7,.2,1)} #apply-modal .step-view.on{display:block} @keyframes slideIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:none}} body.ar #apply-modal .step-view{animation-name:slideInR} @keyframes slideInR{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:none}} #apply-modal .step-title{font-size:clamp(21px,2.6vw,26px);font-weight:800;letter-spacing:-0.02em;line-height:1.2} body.ar #apply-modal .step-title{letter-spacing:0} #apply-modal .step-sub{color:var(--body);font-size:13.5px;margin-top:6px} #apply-modal .fields{margin-top:20px;display:grid;gap:15px} #apply-modal .row-2{display:grid;grid-template-columns:1fr 1fr;gap:12px} #apply-modal .row-2 .mf-field.mf-full{grid-column:auto} #apply-modal label.f .lbl{font-size:12.5px;font-weight:600;margin-bottom:6px;display:block} #apply-modal input[type=text],#apply-modal input[type=email],#apply-modal input[type=tel],#apply-modal input[type=date],#apply-modal select{width:100%;border:1px solid var(--hairline);border-radius:12px;padding:12px 14px;font-family:inherit;font-size:14.5px;background:#fff;color:var(--ink);transition:border-color .15s ease} #apply-modal input[type=date]{position:relative;padding-right:40px;background-image:var(--cal-ic);background-repeat:no-repeat;background-position:right 13px center;background-size:17px;color-scheme:light} #apply-modal input[type=date]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;margin:0} #apply-modal input:focus,#apply-modal select:focus{border-color:#c9ccd2;outline:none} #apply-modal input.errf,#apply-modal select.errf,#apply-modal .ss-btn.errf{border-color:#dc2626} /* custom dropdown chevron, inset from the right edge (native arrow sits too close) */ #apply-modal select:not(.ss-native){-webkit-appearance:none;appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%239aa1ab' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:15px;padding-right:40px} body.ar #apply-modal select:not(.ss-native){background-position:left 14px center;padding-right:14px;padding-left:40px} /* subtle green border on fields already filled in */ #apply-modal input.mf-filled:not(.errf),#apply-modal select.mf-filled:not(.errf),#apply-modal textarea.mf-filled:not(.errf),#apply-modal .ss-btn.mf-filled{border-color:#7cc79f} /* radio-pill group (e.g. GCC application type) — a nicer alternative to a dropdown */ #apply-modal .mf-radios{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:9px;margin-top:2px} #apply-modal .mf-radio{position:relative;cursor:pointer;margin:0} #apply-modal .mf-radio input{position:absolute;opacity:0;pointer-events:none} #apply-modal .mf-radio .box{display:flex;align-items:flex-start;gap:8px;border:1px solid var(--hairline);border-radius:12px;padding:11px 12px;font-size:12px;font-weight:600;color:var(--ink);background:#fff;transition:border-color .15s ease,background .15s ease;min-height:46px} /* align-items:flex-start (not center) because the label can now wrap to 2 lines — centering across the full box height left the dot floating between lines. 2px nudges it to sit level with the first line's cap-height instead. */ #apply-modal .mf-radio .box::before{content:'';width:16px;height:16px;margin-top:2px;border-radius:50%;border:2px solid #cfd3da;flex:none;transition:all .15s ease} #apply-modal .mf-radio input:checked + .box{border-color:var(--accent);background:#fff4ec;color:var(--accent-dark)} #apply-modal .mf-radio input:checked + .box::before{border-color:var(--accent);background:var(--accent);box-shadow:inset 0 0 0 3px #fff} #apply-modal .mf-radio input:focus-visible + .box{outline:2px solid var(--ink);outline-offset:2px} #apply-modal .visa-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px} #apply-modal .visa-opt input,#apply-modal .speed-opt input{position:absolute;opacity:0;pointer-events:none} #apply-modal .visa-opt,#apply-modal .speed-opt{position:relative} #apply-modal .visa-opt .box,#apply-modal .speed-opt .box{border:1px solid var(--hairline);border-radius:13px;padding:12px 14px;cursor:pointer;transition:all .15s ease;display:block} #apply-modal .visa-opt input:checked + .box,#apply-modal .speed-opt input:checked + .box{border-color:var(--accent);background:#fff4ec} #apply-modal .visa-opt .n{font-size:13.5px;font-weight:700} #apply-modal .visa-opt .m{font-size:11.5px;color:var(--muted)} #apply-modal .visa-opt .p{font-size:13.5px;font-weight:700;margin-top:2px} #apply-modal .speed-opts{display:grid;grid-template-columns:1fr 1fr;gap:9px} #apply-modal .speed-opt .n{font-size:13.5px;font-weight:700;display:flex;align-items:center;gap:7px} #apply-modal .speed-opt .n .tagx{background:var(--accent);color:#fff;font-size:9px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;border-radius:999px;padding:2px 7px} #apply-modal .speed-opt .m{font-size:11.5px;color:var(--body);margin-top:2px} #apply-modal .speed-opt .box{display:flex;align-items:center;justify-content:space-between;gap:10px} #apply-modal .speed-opt .sp-main{display:flex;flex-direction:column;min-width:0} #apply-modal .speed-fee{flex:none;font-size:14px;font-weight:800;color:var(--accent-dark)} #apply-modal #mf-doc-slots{grid-template-columns:1fr 1fr;gap:12px} #apply-modal .up{border:1.5px dashed #000000;border-radius:13px;padding:16px;text-align:center;cursor:pointer;transition:all .15s ease;position:relative} #apply-modal .up:hover{border-color:var(--accent)} #apply-modal .up.filled{border-style:solid;border-color:var(--ok);background:#f6fdf8} #apply-modal .up.up-err{border-style:solid;border-color:#dc2626;background:#fef2f2} #apply-modal .up input{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%} #apply-modal .up .t{font-size:12.5px;font-weight:600;margin-top:3px} #apply-modal .up .sx{font-size:11px;color:var(--muted)} #apply-modal .up .fname{font-size:11.5px;color:var(--ok);font-weight:600;margin-top:3px;word-break:break-all} #apply-modal .up-wide{margin-bottom:15px} #apply-modal .up-ic{font-size:22px;line-height:1} #apply-modal .ocr-note{display:none;border-radius:12px;padding:11px 14px;font-size:12.5px;font-weight:600;margin:-6px 0 15px} #apply-modal .ocr-note.on{display:flex;align-items:center;gap:9px} #apply-modal .ocr-spin{width:15px;height:15px;border:2px solid currentColor;border-top-color:transparent;border-radius:50%;flex:none;animation:ocrspin .7s linear infinite} @keyframes ocrspin{to{transform:rotate(360deg)}} /* Full-form loading overlay while the passport is being read (blocks interaction) */ #apply-modal .mf-loading{position:absolute;inset:0;z-index:10;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:16px;background:rgba(255,255,255,.94);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);border-radius:inherit} #apply-modal .mf-loading[hidden]{display:none} #apply-modal .mf-loading-spin{width:54px;height:54px;border:4px solid var(--hairline);border-top-color:var(--accent);border-radius:50%;animation:ocrspin .8s linear infinite} #apply-modal .mf-loading-txt{font-size:14px;font-weight:600;color:var(--ink);max-width:80%;text-align:center} #apply-modal .modal-close{z-index:12} #apply-modal .ocr-note.info{background:#f0f6ff;color:#1d4ed8} #apply-modal .ocr-note.ok{background:#f0fdf4;color:#166534} #apply-modal .ocr-note.warn{background:#fffbeb;color:#92400e} #apply-modal .conditional{display:none;border-inline-start:3px solid var(--accent);padding-inline-start:14px} #apply-modal .conditional.on{display:grid;gap:14px} #apply-modal .form-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:12px} #apply-modal .btn-next{display:inline-flex;align-items:center;gap:9px;background:var(--accent);color:#fff;border:none;border-radius:999px;padding:13px 26px;font-family:inherit;font-size:14.5px;font-weight:600;cursor:pointer;transition:all .18s ease;text-decoration:none} #apply-modal .btn-next:hover{background:var(--accent-dark);transform:translateY(-1px)} #apply-modal .btn-next:disabled{opacity:.45;cursor:not-allowed;transform:none;box-shadow:none;pointer-events:none} /* Pay button = green */ #apply-modal #mf-pay-btn{background:#16a34a;box-shadow:0 1px 2px rgba(17,18,19,.05),0 6px 16px rgba(22,163,74,.30)} #apply-modal #mf-pay-btn:hover{background:#128a3e} #apply-modal .btn-back{background:#fff;border:1px solid var(--hairline);border-radius:999px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--body);cursor:pointer;padding:11px 20px;transition:border-color .18s ease,color .18s ease} #apply-modal .btn-back:hover{border-color:#c9ccd2;color:var(--ink)} #apply-modal .errbox{color:#dc2626;font-size:12.5px;font-weight:500;display:none;margin-top:12px} #apply-modal .errbox.on{display:block} #apply-modal .m-summary{border:1px solid var(--hairline);border-radius:16px;padding:20px;position:sticky;top:0;background:var(--chip)} #apply-modal .m-summary h3{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} #apply-modal .sum-head{font-size:15px;color:var(--ink);margin-top:8px} #apply-modal .sum-head .sum-visa{font-size:15.5px;font-weight:800} #apply-modal .sum-head b{font-weight:800} #apply-modal .sum-speed{font-size:12px;font-weight:600;color:var(--accent-dark);margin-top:2px} #apply-modal .sum-line{display:flex;justify-content:space-between;font-size:12.5px;color:var(--body);margin-top:8px} #apply-modal .sum-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--hairline);margin-top:14px;padding-top:12px} #apply-modal .sum-total .v{font-size:22px;font-weight:800;font-variant-numeric:tabular-nums} #apply-modal .sum-deliv{display:flex;align-items:center;gap:7px;font-size:11.5px;font-weight:600;margin-top:10px} #apply-modal .sum-deliv .dot{width:6px;height:6px;border-radius:50%;background:var(--ok)} #apply-modal .sum-lic{display:flex;gap:8px;background:var(--chip);border-radius:11px;padding:10px 12px;margin-top:14px;font-size:10.5px;color:var(--body);line-height:1.45} #apply-modal .review-grid{border:1px solid var(--hairline);border-radius:13px;overflow:hidden} #apply-modal .rev-row{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;font-size:12.5px;border-bottom:1px solid var(--hairline)} #apply-modal .rev-row:last-child{border-bottom:none} #apply-modal .rev-row .k{color:var(--muted)} #apply-modal .rev-row .v{font-weight:600;text-align:end} #apply-modal .terms{display:flex;gap:8px;align-items:flex-start;margin-top:18px;font-size:10px;line-height:1.5;color:var(--body)} #apply-modal .terms input{width:16px;height:16px;margin-top:2px;accent-color:var(--accent)} #apply-modal .success{text-align:center;padding:34px 0} #apply-modal .success .check{width:64px;height:64px;border-radius:50%;background:#f0fdf4;display:flex;align-items:center;justify-content:center;margin:0 auto 16px;animation:pop2 .5s cubic-bezier(.3,1.5,.5,1)} @keyframes pop2{from{transform:scale(.4);opacity:0}to{transform:scale(1);opacity:1}} /* ---- Step 3: 50/50 — "Your details" left, order summary + payment right ---- Steps 1 and 2 keep the narrow 290px rail with the summary beside the fields, and .m-review stays hidden. On step 3 the columns go equal-width and the three children are placed explicitly: the review fills the left column, while the order summary and the step body (speed → terms → card form) stack in the right one, so the totals sit directly above what the customer is paying. Placement is by column number, so RTL mirrors it automatically. */ #apply-modal .m-review{display:none} #apply-modal .m-review h4{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} /* Speed selector heads the left column — drop .mf-fields' default top margin so it lines up with the order summary opposite it. */ #apply-modal .m-review-speed{margin-top:0;margin-bottom:20px} #mf-form[data-mfstep="3"]{grid-template-columns:1fr 1fr;align-items:start} #mf-form[data-mfstep="3"] .m-review{display:block;grid-column:1;grid-row:1/span 2} #mf-form[data-mfstep="3"] .m-summary{grid-column:2;grid-row:1;position:static} #mf-form[data-mfstep="3"] .m-steps{grid-column:2;grid-row:2} /* The order summary sits directly on top of the "Secure, encrypted payment via Stripe" banner in the right column, and three separate gaps stacked up between them (22px grid row-gap + 20px .fields margin + 18px .mf-pay margin = 60px). Collapse all three so the totals read as one unit with the card form beneath. row-gap only affects this column — .m-review spans both rows as a single item. Desktop only: below 820px the grid becomes one column and the stack is summary → your details → pay, so the summary is not adjacent to the banner and zeroing these would squash three unrelated blocks together. */ @media (min-width:821px){ #mf-form[data-mfstep="3"]{row-gap:0} #mf-form[data-mfstep="3"] .step-view[data-step="3"] .fields{margin-top:0} #mf-form[data-mfstep="3"] .mf-pay{margin-top:0} } @media (max-width:820px){ .m-layout{grid-template-columns:1fr} /* Beats the step-3 50/50 rule above, which is id+attribute and would otherwise keep two columns on phones. The explicit column/row placement has to be undone too — grid-column:2 against a single-column track would generate a phantom second column. */ #mf-form[data-mfstep="3"]{grid-template-columns:1fr} #mf-form[data-mfstep="3"] .m-review, #mf-form[data-mfstep="3"] .m-summary, #mf-form[data-mfstep="3"] .m-steps{grid-column:auto;grid-row:auto} /* Stack as summary → your details → pay, so the review still comes before the card form the way it did when it lived inside the step. */ #mf-form[data-mfstep="3"] .m-review{order:-1} #apply-modal .m-summary{position:static;order:-1;padding:16px} #apply-modal .visa-opts,#apply-modal .speed-opts,#apply-modal .row-2,#apply-modal #mf-doc-slots{grid-template-columns:1fr} } /* ---------- MOBILE SIZING ---------- */ @media (max-width:640px){ /* compact verify banner */ /* On mobile the three parts sit in ONE row - flag, licence text, "How to verify" - instead of wrapping into three stacked lines. Only the middle item may wrap: at this size the licence sentence cannot fit a phone in one line, so it takes the free space and wraps internally while the flag and the toggle stay pinned to the two ends. Logical properties so RTL mirrors it. */ .verify-bar{font-size:11.5px} .verify-bar .vb-in{padding:7px 12px;gap:8px;line-height:1.35;flex-wrap:nowrap;justify-content:flex-start;text-align:start} .verify-bar .flag-ic{width:17px;height:11px;align-self:center} .verify-bar .vb-txt{flex:1 1 auto;min-width:0} /* Single line, never wrapped or shrunk. align-self:center keeps it centred against the two-line licence text rather than sitting on the first line; the flag matches so the row reads as one band. */ .verify-bar .vb-toggle{font-size:11.5px;flex:none;white-space:nowrap;margin-inline-start:auto;align-self:center} /* Below 425px, scale the whole banner down so the 85-character licence sentence still lands in TWO lines instead of spilling to three. Both parts shrink: the toggle is a fixed-width cost sitting next to the sentence, so shrinking only the sentence would not free enough room. Padding and gaps tighten for the same reason. Sizing check at 320px (smallest phone still in use): 320 - 20 padding - 15 flag - 12 gaps - ~68 toggle leaves ~205px for the sentence. Two lines of ~43 characters at Inter's ~0.5em average width needs a font of about 9.5px, which is what the clamp floor lands on. */ @media (max-width:424px){ .verify-bar{font-size:clamp(9px,2.75vw,11px)} .verify-bar .vb-in{padding:6px 10px;gap:6px} .verify-bar .flag-ic{width:15px;height:10px} .verify-bar .vb-toggle{font-size:clamp(9px,2.6vw,10.5px);gap:3px} .verify-bar .vb-toggle .car{font-size:8px} } /* buttons: 44-48px touch target (Apple HIG 44pt / Material 48dp) */ .btn-black{padding:13px 24px;font-size:14.5px} .btn-ghost{padding:11px 20px;font-size:13.5px} .nav-cta{padding:9px 16px;font-size:13px} #apply-modal .btn-next{padding:12px 22px;font-size:14px} /* certainty pill: single line */ .certainty{font-size:clamp(11px,3.2vw,12.5px);padding:8px 12px;max-width:96%} /* Stack the 3 highlights one-per-row, centered, in BOTH locales. English already wraps this way (each phrase is wide); the shorter Arabic phrases otherwise fit two-per-row, so on phones the Arabic block looked different. Forcing a column makes the layout identical regardless of text width. */ .trust-row{flex-direction:column;align-items:center;gap:18px;margin-top:40px;padding:26px 0} .trust-item{font-size:12.5px} .track-form{gap:8px} .track-form input{min-width:0;flex:1;font-size:14px;padding:12px 16px} .track-form .btn-black{padding:12px 20px;font-size:14px;flex:none} .certainty.tcheck{flex-wrap:nowrap;justify-content:center;white-space:nowrap;gap:8px;max-width:100%} .tcheck span{overflow:hidden;text-overflow:ellipsis;min-width:0;white-space:nowrap} /* Hero visa chooser: keep dropdown + Apply on one row on phones */ /* Extra pad on the label side (padding-inline-start), so it lands on the left in English and mirrors to the right in Arabic RTL automatically. */ .hero-choose{flex-wrap:nowrap;gap:8px;padding:6px;padding-inline-start:14px;width:96%} .hero-choose .hero-visa{flex:1;min-width:0;padding:11px 12px} .hero-choose .btn-black{flex:none;padding:11px 16px} .tcheck input[type=date]{font-size:12.5px;padding:6px 28px 6px 12px;min-width:120px;flex:none;background-position:right 9px center;background-size:14px;color:var(--ink);-webkit-text-fill-color:var(--ink);color-scheme:light} .tcheck .dph{font-size:12.5px;inset-inline-start:12px} .tres{font-size:12px;padding:8px 13px} /* iOS Safari auto-zooms on focus when a field's text is <16px. Keeping all text inputs at 16px stops the zoom without disabling pinch-to-zoom. !important is required so this beats the higher-specificity "#apply-modal input[type=text]{font-size:14.5px}" rules. */ input[type=text],input[type=email],input[type=tel],input[type=number],input[type=password],input[type=search],input[type=url],textarea,select,.ss-search,.ss-btn{font-size:16px !important} /* Give every modal field the same height so the date fields match the text fields */ #apply-modal input[type=text],#apply-modal input[type=email],#apply-modal input[type=tel],#apply-modal input[type=date],#apply-modal select,#apply-modal .ss-btn{min-height:48px} /* iOS renders type=date shorter with appearance:none — flex-centre its value to fill the box */ #apply-modal input[type=date]{-webkit-appearance:none;appearance:none;display:flex;align-items:center;font-size:16px !important} #apply-modal input[type=date]::-webkit-date-and-time-value{text-align:start;margin:0} #apply-modal .dwrap .dph{font-size:16px} /* Step 1 mobile: short summary — visa|price + speed + licence only (drop Total & delivery lines) */ #mf-form[data-mfstep="1"] .m-summary .sum-total,#mf-form[data-mfstep="1"] .m-summary .sum-deliv{display:none} /* Step 2 mobile: compact bar — only the visa name + price (the sum-head line) */ #mf-form[data-mfstep="2"] .m-summary{padding:12px 16px;border:none} #mf-form[data-mfstep="2"] .m-summary h3,#mf-form[data-mfstep="2"] .m-summary .sum-speed,#mf-form[data-mfstep="2"] .m-summary .sum-line:not(.sum-head),#mf-form[data-mfstep="2"] .m-summary .sum-total,#mf-form[data-mfstep="2"] .m-summary .sum-deliv,#mf-form[data-mfstep="2"] .m-summary .sum-lic{display:none} #mf-form[data-mfstep="2"] .m-summary .sum-head{margin:0} /* Step 3 mobile: compact breakdown — visa|price, then Express processing|+$40, then total */ #mf-form[data-mfstep="3"] .m-summary{padding:14px 16px;border:none} #mf-form[data-mfstep="3"] .m-summary h3,#mf-form[data-mfstep="3"] .m-summary .sum-speed,#mf-form[data-mfstep="3"] .m-summary .sum-deliv,#mf-form[data-mfstep="3"] .m-summary .sum-lic{display:none} /* Pinned action bar: Back/Continue stay visible while the form scrolls */ #apply-modal .m-scroll{padding-bottom:0} #apply-modal .form-nav{gap:10px;position:sticky;bottom:0;margin:16px -26px 0;padding:12px 26px calc(12px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid var(--hairline);z-index:5} #apply-modal .form-nav .btn-next{flex:1;justify-content:center;padding:15px 20px;font-size:15.5px} #apply-modal .form-nav .btn-back{flex:none;padding:15px 16px} /* Application modal on mobile: the widget is a Web Component, customElements.define("respond-io-widget", ...) in cdn.respond.io's widget.js — a real tag, not a class or id, so ".respond-io-widget" never matches anything. It is also inserted via document.body.insertAdjacentElement("afterend", el), i.e. as a SIBLING of (a child of after ), not a descendant of it — so "body ... respond-io-widget" (descendant combinator) can never reach it either, regardless of tag name. The general sibling combinator (~) is required. On a phone viewport there's still enough room past the modal's edges for a merely invisible (visibility:hidden) widget to catch a stray tap, and respond.io's mobile layout can expand to a near-fullscreen launcher rather than a small bubble, so this removes it from layout entirely while the modal is open. Desktop is untouched. */ body:has(.modal.on) ~ respond-io-widget{display:none !important} } /* ---------- NAV ---------- */ nav{position:sticky;top:0;background:rgba(255,255,255,.9);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid var(--hairline);z-index:50} .nav-in{display:flex;align-items:center;justify-content:space-between;height:68px} .logo{font-size:18px;font-weight:800;letter-spacing:-0.02em;text-decoration:none;color:var(--ink)} .logo span{color:var(--muted);font-weight:600} .nav-links{display:flex;gap:30px;align-items:center;list-style:none} .nav-links a{position:relative;text-decoration:none;color:var(--body);font-size:14px;font-weight:500;white-space:nowrap} .nav-links a:not(.nav-cta)::after{content:'';position:absolute;left:0;bottom:-4px;width:0;height:1.5px;background:var(--ink);transition:width .2s ease} .nav-links a:not(.nav-cta):hover::after{width:100%} .nav-links a:hover{color:var(--ink)} .nav-cta{background:var(--accent);color:#fff !important;border-radius:999px;padding:10px 20px;font-weight:600;transition:background .18s ease} .nav-cta:hover{background:var(--accent-dark)} .burger{display:none;background:none;border:none;font-size:22px;cursor:pointer;color:var(--ink);-webkit-text-fill-color:var(--ink);line-height:1;padding:0} .mobile-menu{display:none;border-top:1px solid var(--hairline);background:#fff;padding:8px 24px 16px;flex-direction:column} .mobile-menu.on{display:flex} .mobile-menu a{text-decoration:none;color:var(--ink);font-size:15px;font-weight:600;padding:13px 2px;border-bottom:1px solid var(--hairline)} .mobile-menu a:last-child{border-bottom:none} .mobile-menu .mm-cta{color:var(--accent-dark)} /* ---------- HERO ---------- */ .hero{padding:104px 0 0;text-align:center;position:relative} .hero h1{font-size:clamp(42px,6vw,70px);font-weight:800;letter-spacing:-0.035em;line-height:1.08;max-width:840px;margin:0 auto;opacity:0;animation:fadeUp .8s cubic-bezier(.2,.7,.2,1) .1s forwards} .hero p.lede{max-width:540px;margin:26px auto 0;font-size:18px;color:var(--body);opacity:0;animation:fadeUp .7s ease .35s forwards} /* Hero pills each sit on their own centered row (not side-by-side) */ header.hero .certainty{display:flex;width:-moz-fit-content;width:fit-content;max-width:100%;margin-inline:auto} /* Hero "Choose your visa" pill: dropdown + Apply button in one row (like the travel-date row) */ .hero-choose{margin-top:26px;gap:6px;padding:6px;animation-delay:.45s;flex-wrap:nowrap;justify-content:center;background:#fff;border:1px solid var(--hairline);border-radius:999px;box-shadow:0 6px 22px rgba(17,18,19,.07)} /* No min-width here on purpose. The phone rule that sets min-width:0 lives EARLIER in this file, and a media query adds no specificity — so any min-width set here would win at every width and push the Apply button out of the pill below ~430px. The desktop widening is in its own min-width query below, which cannot overlap the phone block at all. */ .hero-choose .hero-visa{border:none;background:transparent;padding:12px 16px;font-family:inherit;font-size:15px;font-weight:600;color:var(--ink);min-width:0;max-width:64vw;cursor:pointer;color-scheme:light} /* 390px (was 300px, was 220px) so long names like "30 Days Multiple Entry Visa" do not crowd the caret. Only above the phone breakpoint, where there is room. The pill is width:fit-content, so this select is what sizes the whole "Choose your visa" widget — 390 = 300 * 1.3, a 30% widening. */ @media (min-width:641px){.hero-choose .hero-visa{min-width:390px}} .hero-choose .hero-visa:focus{outline:none} .hero-choose .btn-black{margin:0;padding:13px 30px;font-size:14.5px;border-radius:999px;box-shadow:0 5px 14px rgba(232,96,32,.28)} .hero-choose .btn-black:disabled{opacity:.45;cursor:not-allowed;box-shadow:none} .hero-note{margin-top:14px;background:#ecfdf3;border:1px solid #bbf7d0;color:#166534;font-weight:600;font-size:13px;padding:8px 16px;animation-delay:.55s} .hero-note .dot{background:var(--ok)} /* Mobile floating Apply-now button (toggled by .show via IntersectionObserver) */ .apply-fab{display:none} @media (max-width:900px){ .apply-fab{position:fixed;left:50%;bottom:calc(18px + env(safe-area-inset-bottom,0px));transform:translateX(-50%) translateY(24px);z-index:70;display:inline-flex;align-items:center;gap:8px;padding:14px 26px;font-size:15px;border-radius:999px;opacity:0;pointer-events:none;transition:opacity .25s ease,transform .25s ease;box-shadow:0 10px 28px rgba(232,96,32,.4)} .apply-fab.show{opacity:1;transform:translateX(-50%);pointer-events:auto} #apply-modal.on ~ .apply-fab{opacity:0 !important;pointer-events:none !important} body.ar .apply-fab .arr{transform:scaleX(-1)} } .hero-cta{margin-top:16px;display:flex;gap:14px;justify-content:center;flex-wrap:wrap;opacity:0;animation:fadeUp .7s ease .5s forwards} .hero-cta + .certainty{margin-top:28px} .certainty{display:inline-flex;align-items:center;gap:9px;margin-top:28px;background:var(--chip);border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:500;opacity:0;animation:fadeUp .7s ease .65s forwards;flex-wrap:nowrap;white-space:nowrap;max-width:100%} .certainty .dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:pulse 2s ease infinite;flex:none} .tcheck input[type=date]{position:relative;border:1px solid var(--hairline);border-radius:999px;padding:7px 32px 7px 14px;font-family:inherit;font-size:13px;background-color:#fff;background-image:var(--cal-ic);background-repeat:no-repeat;background-position:right 11px center;background-size:15px;color:var(--ink);color-scheme:light;flex:none;min-height:34px} .tcheck input[type=date]::-webkit-calendar-picker-indicator{opacity:0;cursor:pointer;position:absolute;left:0;top:0;width:100%;height:100%;margin:0} .tcheck input[type=date]:focus{outline:none} /* Custom dd/mm/yyyy placeholder — native date inputs show nothing on mobile when empty. A .dph span sits over the field while empty; JS toggles .has-val once a date is picked. */ .dwrap{position:relative;display:inline-block} #apply-modal .dwrap{display:block;width:100%} .dwrap .dph{position:absolute;top:50%;transform:translateY(-50%);inset-inline-start:14px;color:var(--muted);pointer-events:none;font-size:13px;font-family:inherit;line-height:1} #apply-modal .dwrap .dph{font-size:14.5px} body.ar .dwrap .dph{inset-inline-start:auto;inset-inline-end:14px} .dwrap.has-val .dph{display:none} .dwrap:not(.has-val) input[type=date], .dwrap:not(.has-val) input[type=date]::-webkit-datetime-edit, .dwrap:not(.has-val) input[type=date]::-webkit-datetime-edit-fields-wrapper{color:transparent !important;-webkit-text-fill-color:transparent !important} .dwrap.has-val input[type=date], .dwrap.has-val input[type=date]::-webkit-datetime-edit{color:var(--ink) !important;-webkit-text-fill-color:var(--ink) !important} .tres{display:none;align-items:center;gap:8px;margin:12px auto 0;border-radius:999px;padding:9px 18px;font-size:13.5px;font-weight:500;max-width:92%;text-align:center;animation:fadeUp .35s ease} .tres.show{display:inline-flex} .tres.ok{background:#f0fdf4;color:#166534} .tres.warn{background:#fffbeb;color:#92400e} .tres{flex-wrap:wrap;justify-content:center;row-gap:8px} .tres .go{background:var(--accent);color:#fff;border:none;border-radius:999px;padding:8px 16px;font-size:12.5px;font-weight:600;cursor:pointer;font-family:inherit;transition:background .15s ease;white-space:nowrap} .tres .go:hover{background:var(--accent-dark)} @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(22,163,74,.35)}50%{box-shadow:0 0 0 6px rgba(22,163,74,0)}} @keyframes fadeUp{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}} .trust-row{display:flex;gap:34px;justify-content:center;flex-wrap:wrap;margin-top:56px;padding:36px 0;border-top:1px solid var(--hairline);opacity:0;animation:fadeUp .7s ease .8s forwards} .trust-item{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--body);font-weight:500} /* ---------- FLAG MARQUEE ---------- */ .marquee{overflow:hidden;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);padding:18px 0;position:relative} .marquee::before,.marquee::after{content:'';position:absolute;top:0;bottom:0;width:100px;z-index:2;pointer-events:none} .marquee::before{left:0;background:linear-gradient(90deg,#fff,transparent)} .marquee::after{right:0;background:linear-gradient(-90deg,#fff,transparent)} .marquee-track{display:flex;gap:12px;width:max-content;animation:scroll 45s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} @keyframes scroll{to{transform:translateX(-50%)}} .m-chip{display:inline-flex;align-items:center;gap:9px;background:var(--chip);border-radius:12px;padding:9px 16px;font-size:14px;font-weight:500;white-space:nowrap} .m-chip .flag{font-size:16px} /* ---------- VISA PRODUCTS ---------- */ .speed-toggle{display:flex;justify-content:center;margin-top:44px} .toggle-pill{position:relative;display:inline-flex;background:var(--chip);border-radius:999px;padding:5px} .toggle-pill button{position:relative;z-index:2;background:none;border:none;font-family:inherit;font-size:14px;font-weight:600;padding:10px 26px;cursor:pointer;color:var(--body);transition:color .25s ease;border-radius:999px} .toggle-pill button.on{color:#fff} .toggle-thumb{position:absolute;top:5px;left:5px;height:calc(100% - 10px);background:var(--ink);border-radius:999px;transition:transform .3s cubic-bezier(.3,.8,.3,1), width .3s cubic-bezier(.3,.8,.3,1);z-index:1} .toggle-note{text-align:center;margin-top:14px;font-size:13px;color:var(--muted);min-height:20px} .prod-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(255px,1fr));gap:16px;margin-top:36px} .prod-card{border:1px solid var(--hairline);border-radius:var(--radius-card);padding:26px;display:flex;flex-direction:column;gap:6px;transition:border-color .2s ease, box-shadow .25s ease, transform .25s ease;background:#fff} .prod-card:hover{border-color:#d6d9de;box-shadow:0 16px 36px rgba(17,18,19,.07);transform:translateY(-4px)} .prod-tag{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .prod-name{font-size:19px;font-weight:700;letter-spacing:-0.02em;margin-top:2px} .prod-meta{font-size:13.5px;color:var(--body)} .prod-price{margin-top:14px;font-size:27px;font-weight:800;letter-spacing:-0.02em;font-variant-numeric:tabular-nums} .prod-price small{font-size:13px;font-weight:500;color:var(--muted)} .prod-deliv{font-size:13px;color:var(--body);display:flex;align-items:center;gap:7px} .prod-deliv .dot{width:7px;height:7px;border-radius:50%;background:var(--ok);flex:none} .prod-card .btn-ghost{margin-top:16px;justify-content:center} .prod-card.popular{border-color:var(--accent)} .pop-badge{align-self:flex-start;background:var(--accent);color:#fff;font-size:10.5px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;border-radius:999px;padding:4px 10px;margin-bottom:8px} /* ---------- LICENSE BADGE ---------- */ .gov-badge{display:inline-flex;align-items:center;gap:11px;margin-top:22px;border:1px solid var(--hairline);border-radius:14px;padding:12px 20px;text-align:left;opacity:0;animation:fadeUp .7s ease .75s forwards;background:#fff} .gov-badge .shield{width:34px;height:34px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;flex:none} .gov-badge .t1{font-size:13px;font-weight:700;letter-spacing:-0.01em;line-height:1.35} .gov-badge .t2{font-size:12px;color:var(--muted);line-height:1.35} /* ---------- ELIGIBILITY ---------- */ .elig-panel{border:1px solid var(--hairline);border-radius:var(--radius-card);margin-top:52px;overflow:hidden} .elig-row{display:grid;grid-template-columns:170px 1fr auto;align-items:start;gap:18px;padding:26px 30px;border-bottom:1px solid var(--hairline)} .elig-row:last-child{border-bottom:none} .elig-region{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted);padding-top:10px} .chip-list{display:flex;gap:10px;flex-wrap:wrap} .chip{display:inline-flex;align-items:center;gap:9px;background:var(--chip);border-radius:12px;padding:10px 16px;font-size:14.5px;font-weight:500;white-space:nowrap;transition:transform .15s ease, background .15s ease} .chip:hover{transform:translateY(-2px);background:#efeff2} .chip .flag{font-size:17px;line-height:1} .chip.extra{display:none} .elig-row.expanded .chip.extra{display:inline-flex;animation:chipIn .3s ease both} @keyframes chipIn{from{opacity:0;transform:scale(.92)}to{opacity:1;transform:scale(1)}} .show-all{background:none;border:none;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--body);cursor:pointer;display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding-top:10px} .show-all:hover{color:var(--ink)} .elig-check{max-width:640px;margin:48px auto 0} .elig-search{display:flex;align-items:center;gap:12px;border:1px solid #7b7b7b;border-radius:999px;padding:6px 8px 6px 20px;transition:border-color .15s ease} .elig-search:focus-within{border-color:#c9ccd2} .elig-search select{flex:1;border:none;outline:none;font-family:inherit;font-size:15.5px;padding:12px 0;background:transparent;color:var(--ink);cursor:pointer;appearance:none;-webkit-appearance:none} .elig-quick{display:flex;gap:9px;flex-wrap:wrap;justify-content:center;margin-top:16px} .elig-quick .chip{border:none;cursor:pointer;font-family:inherit} .elig-result{display:none;margin-top:18px;border-radius:16px;padding:20px 22px;animation:fadeUp .35s ease;text-align:center} .elig-result.show{display:block} .elig-result.req{background:#fff4ec;border:1px solid #fdd8bd} .elig-result.free{background:#f0fdf4;border:1px solid #bbf7d0} .elig-result .er-title{font-size:16.5px;font-weight:800;letter-spacing:-0.01em} .elig-result.req .er-title{color:#9a3412} .elig-result.free .er-title{color:#166534} .elig-result .er-sub{font-size:13.5px;margin-top:5px} .elig-result.req .er-sub{color:#c2410c} .elig-result.free .er-sub{color:#15803d} .elig-result .btn-black{margin-top:14px;padding:12px 24px;font-size:14px} /* ---------- HOW IT WORKS ---------- */ .steps{display:grid;grid-template-columns:repeat(3,1fr);gap:26px;margin-top:56px} .step{position:relative;border:1px solid var(--hairline);border-radius:var(--radius-card);padding:28px;transition:transform .25s ease, box-shadow .25s ease} .step:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(17,18,19,.06)} .step-top{display:flex;align-items:center;gap:12px;margin-bottom:14px} .step-num{width:36px;height:36px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--accent);font-weight:800;font-size:15px;display:flex;align-items:center;justify-content:center;flex:none} @media (min-width:901px){ .step:not(:last-child)::after{content:'\2192';position:absolute;top:40px;right:-22px;font-size:19px;color:#c9ccd2;z-index:2} body.ar .step:not(:last-child)::after{content:'\2190';right:auto;left:-22px} } .step-k{font-size:12px;font-weight:600;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)} .step h3{font-size:19px;font-weight:700;letter-spacing:-0.02em;margin:12px 0 8px} .step p{font-size:14.5px;color:var(--body)} .step .time{display:inline-flex;align-items:center;gap:7px;margin-top:16px;font-size:13px;font-weight:600} .step .time .dot{width:7px;height:7px;border-radius:50%;background:var(--ok)} /* ---------- TRACK ---------- */ .track{background:var(--chip);border-radius:var(--radius-card);padding:56px 40px;text-align:center;overflow:hidden;position:relative} .track h2{font-size:clamp(24px,3vw,32px);font-weight:800;letter-spacing:-0.03em} .track p{color:var(--body);margin-top:10px;font-size:15px} .track-form{display:flex;gap:10px;justify-content:center;margin-top:26px;flex-wrap:wrap} .track-form input{border:1px solid var(--hairline);border-radius:999px;padding:14px 22px;font-family:inherit;font-size:15px;min-width:280px;background:#fff} .stages{display:flex;justify-content:center;gap:0;margin-top:38px;max-width:520px;margin-left:auto;margin-right:auto} .stage{flex:1;position:relative;text-align:center} .stage .bubble{width:14px;height:14px;border-radius:50%;background:#dfe1e6;margin:0 auto;position:relative;z-index:2;transition:background .4s ease, transform .4s ease} .stage.active .bubble{background:var(--ink);transform:scale(1.25)} .stage.done .bubble{background:var(--ok)} .stage::before{content:'';position:absolute;top:7px;left:-50%;width:100%;height:2px;background:#dfe1e6;z-index:1} .stage:first-child::before{display:none} .stage.done::before,.stage.active::before{background:var(--ok)} .stage .lbl{font-size:12px;font-weight:600;color:var(--muted);margin-top:10px;transition:color .3s ease} .stage.active .lbl,.stage.done .lbl{color:var(--ink)} /* ---------- WALL OF LOVE ---------- */ .love-marquee{overflow:hidden;margin-top:52px;position:relative} .love-marquee::before,.love-marquee::after{content:'';position:absolute;top:0;bottom:0;width:80px;z-index:2;pointer-events:none} .love-marquee::before{left:0;background:linear-gradient(90deg,#fff,transparent)} .love-marquee::after{right:0;background:linear-gradient(-90deg,#fff,transparent)} /* No `gap` here on purpose. @keyframes scroll translates -50% of the track's own width, which must land exactly on the start of the duplicated set. With flex gap the track is n*card + (n-1)*gap, so 50% falls half a gap short and the loop hops back 8px every cycle. Carrying the gap as a trailing margin on each card makes the width exactly n*(card+gap), so 50% is one whole set. Physical margin-right, not margin-inline-end: the track is forced direction:ltr in both locales (see body.ar .love-track) while individual cards carry dir="rtl", which would flip a logical property to the wrong side. */ .love-track{display:flex;width:max-content;animation:scroll 60s linear infinite;padding:4px 0} .love-track.reverse{animation-direction:reverse;margin-top:16px;animation-duration:70s} .love-marquee:hover .love-track{animation-play-state:paused} .love-card{width:340px;flex:none;margin-right:16px;border:1px solid var(--hairline);border-radius:var(--radius-card);padding:24px;display:flex;flex-direction:column;gap:12px;background:#fff} .stars{color:#f59e0b;font-size:13px;letter-spacing:2px} .love-card p{font-size:14px;color:var(--body)} .love-who{display:flex;align-items:center;gap:12px;margin-top:auto} .avatar{width:36px;height:36px;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px} .love-who .n{font-size:13.5px;font-weight:600} .love-who .d{font-size:12px;color:var(--muted)} .love-more{text-align:center;margin-top:36px} /* ---------- FAQ ---------- */ .faq-list{max-width:720px;margin:48px auto 0} details{border-bottom:1px solid var(--hairline)} summary{list-style:none;cursor:pointer;padding:22px 4px;font-size:16.5px;font-weight:600;letter-spacing:-0.01em;display:flex;justify-content:space-between;align-items:center;gap:16px} summary::-webkit-details-marker{display:none} summary .pm{font-size:20px;font-weight:400;color:var(--muted);transition:transform .25s ease} details[open] summary .pm{transform:rotate(45deg)} details .a{padding:0 4px 24px;color:var(--body);font-size:15px;max-width:640px} /* ---------- ASK AI ---------- */ .askai{text-align:center;padding:84px 0;border-top:1px solid var(--hairline)} .askai h3{font-size:20px;font-weight:700;letter-spacing:-0.02em} .ai-btns{display:flex;gap:14px;justify-content:center;margin-top:26px;flex-wrap:wrap} .ai-btn{width:64px;height:64px;border-radius:18px;background:var(--chip);display:flex;align-items:center;justify-content:center;text-decoration:none;transition:transform .2s ease, background .2s ease, box-shadow .2s ease} .ai-btn:hover{transform:translateY(-4px) rotate(-2deg);background:#efeff2;box-shadow:0 12px 24px rgba(17,18,19,.08)} .ai-btn svg{width:28px;height:28px} .askai .hint{margin-top:18px;font-size:13px;color:var(--muted)} /* ---------- FOOTER ---------- */ footer{border-top:1px solid var(--hairline);padding:64px 0 40px} .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1.2fr;gap:40px} .foot-grid h4{font-size:12px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:16px} .foot-grid ul{list-style:none} .foot-grid li{margin-bottom:10px} .foot-grid a{text-decoration:none;color:var(--body);font-size:14px} .foot-grid a:hover{color:var(--ink)} .foot-brand p{color:var(--body);font-size:14px;margin-top:12px;max-width:280px} .socials{display:flex;gap:10px;margin-top:18px} .socials a{width:36px;height:36px;border-radius:10px;background:var(--chip);display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:var(--ink);text-decoration:none;transition:transform .15s ease} .socials a:hover{transform:translateY(-2px)} .foot-ai{margin-top:22px} .foot-ai-t{font-size:11px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px} body.ar .foot-ai-t{letter-spacing:.04em} .foot-ai .ai-btns{display:flex;gap:8px;justify-content:flex-start;margin:0} .foot-ai .ai-btn{width:36px;height:36px;border-radius:10px} .foot-ai .ai-btn svg{width:16px;height:16px} .filters{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:8px 0 36px} .filter{background:var(--chip);border:none;border-radius:999px;padding:9px 18px;font-family:inherit;font-size:13.5px;font-weight:600;color:var(--body);cursor:pointer;transition:background .15s ease, color .15s ease} .filter.on{background:var(--ink);color:#fff} .filter:hover:not(.on){background:#efeff2} .love-card.hidden{display:none} .rev-hero{text-align:center;padding:70px 0 10px} .rev-hero .stats{display:flex;gap:36px;justify-content:center;flex-wrap:wrap;margin-top:36px} .rev-hero .stat .v{font-size:26px;font-weight:800;letter-spacing:-0.02em} .rev-hero .stat .k{font-size:12.5px;color:var(--muted);font-weight:500;margin-top:2px} .reviews-grid{columns:3;column-gap:16px} .reviews-grid .card{break-inside:avoid;border:1px solid var(--hairline);border-radius:var(--radius-card);padding:26px;margin-bottom:16px;display:flex;flex-direction:column;gap:12px;background:#fff;transition:box-shadow .25s ease} .reviews-grid .card:hover{box-shadow:0 14px 32px rgba(17,18,19,.07)} .reviews-grid .card.hidden{display:none} .reviews-grid .card h3{font-size:15.5px;font-weight:700;letter-spacing:-0.01em} .reviews-grid .card p{font-size:14px;color:var(--body)} .reviews-grid .who{display:flex;align-items:center;gap:12px;margin-top:auto} .reviews-grid .who .n{font-size:13.5px;font-weight:600} .reviews-grid .who .d{font-size:12px;color:var(--muted)} @media (max-width:1000px){.reviews-grid{columns:2}} @media (max-width:640px){.reviews-grid{columns:1}} .foot-bottom{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;margin-top:56px;padding-top:26px;border-top:1px solid var(--hairline);font-size:13px;color:var(--muted)} /* ---------- REVEAL ---------- */ .reveal{opacity:0;transform:translateY(18px);transition:opacity .6s ease, transform .6s ease} .reveal.in{opacity:1;transform:none} .stagger > *{opacity:0;transform:translateY(18px);transition:opacity .55s ease, transform .55s ease} .stagger.in > *{opacity:1;transform:none} .stagger.in > *:nth-child(1){transition-delay:.0s} .stagger.in > *:nth-child(2){transition-delay:.07s} .stagger.in > *:nth-child(3){transition-delay:.14s} .stagger.in > *:nth-child(4){transition-delay:.21s} .stagger.in > *:nth-child(5){transition-delay:.28s} .stagger.in > *:nth-child(6){transition-delay:.35s} .stagger.in > *:nth-child(7){transition-delay:.42s} @media (prefers-reduced-motion: reduce){ *{animation:none !important;transition:none !important} .reveal,.stagger > *{opacity:1;transform:none} .hero h1,.hero p.lede,.hero-cta,.certainty,.trust-row{opacity:1} html{scroll-behavior:auto} } @media (max-width:900px){ section{padding:70px 0} .steps{grid-template-columns:1fr} .elig-row{grid-template-columns:1fr;gap:12px;padding:22px} .elig-region,.show-all{padding-top:0} .foot-grid{grid-template-columns:1fr 1fr} .love-card{width:290px} } /* Collapse the top nav to the burger earlier — links + Apply button overlap on mid-width screens */ @media (max-width:1024px){ .nav-links{display:none} .burger{display:block} } /* soft ambient button shadows (Framer-style) */ .btn-black,.nav-cta,.btn-next,.tres .go{box-shadow:0 1px 2px rgba(17,18,19,.05),0 5px 14px rgba(232,96,32,.20)} .btn-black:hover,.nav-cta:hover,.btn-next:hover,.tres .go:hover{box-shadow:0 2px 4px rgba(17,18,19,.05),0 8px 20px rgba(232,96,32,.28)} .btn-ghost,.btn-back,.lang-btn,.vb-close{box-shadow:0 1px 2px rgba(17,18,19,.04),0 4px 12px rgba(17,18,19,.06)} .btn-ghost:hover,.btn-back:hover,.lang-btn:hover,.vb-close:hover{box-shadow:0 2px 5px rgba(17,18,19,.05),0 6px 16px rgba(17,18,19,.09)} img.flag{width:20px;height:20px;border-radius:50%;border:.5px solid rgba(0,0,0,.1);vertical-align:-4px;object-fit:cover;flex:none} /* ---------- CHECKOUT / STATUS / THANK-YOU (added for the app) ---------- */ .page-wrap{max-width:var(--maxw);margin:0 auto;padding:40px 28px 90px} .doc-page p{color:var(--body);font-size:15.5px;line-height:1.7;margin-top:14px} /* International phone input: flag + dial-code picker */ .phone-field{position:relative;display:flex;align-items:stretch;gap:8px} .phone-field .cc-btn{display:inline-flex;align-items:center;gap:6px;flex:none;border:1px solid var(--hairline);border-radius:12px;background:#fff;padding:0 12px;font-family:inherit;font-size:14px;font-weight:600;color:var(--ink);cursor:pointer;white-space:nowrap} .phone-field .cc-btn:hover{border-color:var(--muted)} .phone-field .cc-flag{display:inline-flex;align-items:center} .phone-field .cc-fimg{width:22px;height:15px;border-radius:2px;object-fit:cover;display:block;border:1px solid rgba(0,0,0,.08)} .phone-field .cc-caret{color:var(--muted)} .phone-field .phone-local{flex:1;min-width:0} .phone-field .cc-panel{position:fixed;z-index:1000;width:min(320px,86vw);max-height:260px;overflow:auto;background:#fff;border:1px solid var(--hairline);border-radius:14px;box-shadow:0 16px 40px rgba(17,18,19,.2);padding:8px} .phone-field .cc-search{width:100%;border:1px solid var(--hairline);border-radius:10px;padding:9px 12px;font-family:inherit;font-size:14px;margin-bottom:6px} .phone-field .cc-opt{display:flex;align-items:center;gap:10px;padding:9px 10px;border-radius:9px;cursor:pointer;font-size:14px} .phone-field .cc-opt:hover{background:var(--chip)} .phone-field .cc-of{flex:none;display:inline-flex;align-items:center} .phone-field .cc-of .cc-fimg{width:24px;height:16px} .phone-field .cc-on{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;color:var(--ink)} .phone-field .cc-od{color:var(--muted);flex:none} /* Embedded Stripe payment (apply modal step 3) */ .mf-pay{margin-top:18px} .mf-pay-head{display:flex;align-items:center;gap:8px;font-size:12.5px;font-weight:600;color:#166534;background:#ecfdf3;border:1px solid #bbf7d0;border-radius:10px;padding:9px 12px;margin-bottom:14px} .mf-pay-head .lock{display:inline-flex;flex:none} #mf-payment-element{min-height:44px} .mf-pay-loading{color:var(--muted);font-size:13.5px;padding:14px 2px} .mf-pay-msg{margin-top:10px;font-size:13px;color:var(--body);min-height:0} .mf-pay-msg.err{color:#b91c1c} /* Doc pages: match the Terms & Conditions page heading style */ .doc-page{counter-reset:docsec} .doc-page .eyebrow{text-align:center !important} .doc-page .sec-title{text-align:center !important;font-size:clamp(32px,4.5vw,48px);line-height:1.12} .doc-page h2{font-size:21px;font-weight:800;letter-spacing:-0.02em;margin-top:38px;display:flex;align-items:center;gap:12px} body.ar .doc-page h2{letter-spacing:0} .doc-page h2::before{counter-increment:docsec;content:counter(docsec);width:30px;height:30px;border-radius:50%;background:#fff;border:2px solid var(--accent);color:var(--accent);font-weight:800;font-size:13.5px;display:inline-flex;align-items:center;justify-content:center;flex:none} /* How-to step cards keep their own numbered badges — no auto-number */ .doc-page .howto-step h2{display:block} .doc-page .howto-step h2::before{content:none;counter-increment:none} .doc-page .doc-list{margin:14px 0 0;padding-inline-start:22px;color:var(--body);font-size:15.5px;line-height:1.7} .doc-page .doc-list li{margin-top:10px} .doc-page .doc-list li strong{color:var(--ink)} .doc-page .doc-note{background:var(--chip);border-radius:12px;padding:14px 16px;margin-top:16px;font-size:14px} .co-grid{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start;margin-top:26px} .co-card{border:1px solid var(--hairline);border-radius:var(--radius-card);padding:26px;background:#fff} .co-summary{position:sticky;top:88px} .co-summary h3{font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .co-visa{font-size:17px;font-weight:800;margin-top:10px} .co-line{display:flex;justify-content:space-between;font-size:13px;color:var(--body);margin-top:8px} .co-total{display:flex;justify-content:space-between;align-items:baseline;border-top:1px solid var(--hairline);margin-top:14px;padding-top:12px} .co-total .v{font-size:24px;font-weight:800;font-variant-numeric:tabular-nums} .co-lic{display:flex;gap:8px;background:var(--chip);border-radius:11px;padding:10px 12px;margin-top:16px;font-size:11px;color:var(--body);line-height:1.5} #payment-element{margin-top:18px} #pay-submit{margin-top:20px;width:100%;justify-content:center} .co-msg{margin-top:14px;font-size:13.5px;font-weight:500;min-height:20px} .co-msg.err{color:#dc2626} .co-note{font-size:12px;color:var(--muted);margin-top:14px;display:flex;align-items:center;gap:8px} .rev-grid{border:1px solid var(--hairline);border-radius:13px;overflow:hidden;margin-top:6px} .rev-row{display:flex;justify-content:space-between;gap:12px;padding:11px 15px;font-size:13px;border-bottom:1px solid var(--hairline)} .rev-row:last-child{border-bottom:none} .rev-row .k{color:var(--muted)} .rev-row .v{font-weight:600;text-align:end} .status-box{max-width:620px;margin:26px auto 0} .status-form{display:flex;gap:10px;justify-content:center;margin-top:22px;flex-wrap:wrap} .status-form input{border:1px solid var(--hairline);border-radius:999px;padding:14px 22px;font-family:inherit;font-size:15px;min-width:300px;background:#fff} .status-result{border:1px solid var(--hairline);border-radius:var(--radius-card);padding:26px;margin-top:28px;background:#fff} .status-result.notfound{background:#fffbeb;border-color:#fde68a} .status-stage{display:inline-flex;align-items:center;gap:8px;background:var(--chip);border-radius:999px;padding:8px 16px;font-size:13.5px;font-weight:700} .status-stage .dot{width:8px;height:8px;border-radius:50%;background:var(--ok)} @media (max-width:820px){.co-grid{grid-template-columns:1fr}.co-summary{position:static;order:-1}} /* ---------- DYNAMIC FORM FIELD GRID (admin-managed fields) ---------- */ #apply-modal .mf-fields{display:grid;grid-template-columns:1fr;gap:15px;margin-top:20px} #apply-modal .mf-field.mf-full{grid-column:1 / -1} #apply-modal .mf-field .lbl{font-size:12.5px;font-weight:600;margin-bottom:6px;display:block} #apply-modal .mf-field .fhelp{font-size:11.5px;color:var(--muted);margin-top:5px} #apply-modal .mf-field[hidden]{display:none} @media (max-width:820px){#apply-modal .mf-fields{grid-template-columns:1fr}} /* ---------- SEARCHABLE SELECT (progressive enhancement of native ignores line-height (it renders with the browser's own control metrics), so Cairo still made it ~10px taller than Inter, leaving the pill 3px taller in Arabic. An explicit height is the only lever that equalises it; 45px matches the English control at the desktop font-size (15px). DESKTOP ONLY — on phones the iOS zoom guard forces select{font-size:16px}, at which Cairo needs 56px; a 45px cap chopped the bottom off the Arabic label ("اختر تأشيرتك"). Below 641px the select goes back to sizing itself, which is what it did before this rule existed and never clipped. */ @media (min-width:641px){ .hero-choose .hero-visa{line-height:1.2;height:45px} } svg.ss-caret { position: relative; left: -9px; } /* Footer text −15% on phones. Each value is its desktop size × 0.85, so the footer keeps its proportions and just scales down where space is tightest. Icon boxes (.socials a, .ai-btn) keep their touch-target dimensions — only the type shrinks. Last in the file, so it beats the same-specificity base rules above without !important. */ @media (max-width:640px){ .foot-grid h4{font-size:10.2px} /* 12 */ .foot-grid a{font-size:11.9px} /* 14 */ .foot-brand p{font-size:11.9px} /* 14 */ .socials a{font-size:11.05px} /* 13 */ .foot-ai-t{font-size:9.35px} /* 11 */ .foot-bottom{font-size:11.05px} /* 13 */ } /* Native