:root { --ink:#13213a; --muted:#60708a; --line:#d8e1ee; --surface:#fff; --soft:#f4f8fd; --brand:#1264d6; --brand-dark:#0b4fae; --brand-pale:#eaf3ff; --ok:#157347; }
* { box-sizing:border-box; }
body { margin:0; min-width:320px; color:var(--ink); background:linear-gradient(135deg,#eef5ff 0%,#f7faff 52%,#edf4ff 100%); font:16px/1.5 Arial,Helvetica,sans-serif; }
.page-shell { min-height:100vh; padding:32px 16px; display:grid; place-items:center; }
.support-card { width:min(100%,760px); overflow:hidden; background:var(--surface); border:1px solid rgba(19,33,58,.08); border-radius:20px; box-shadow:0 18px 55px rgba(23,62,110,.14); }
.card-header { position:relative; padding:38px 42px 26px; border-bottom:1px solid var(--line); }
.brand { display:flex; align-items:center; min-height:28px; }.brand img { display:block; width:auto; height:28px; max-width:150px; object-fit:contain; }
.language-form { position:absolute; top:28px; right:32px; display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--muted); }.language-form select { width:auto; padding:7px 26px 7px 9px; font-size:.82rem; }.language-label-mobile { display:none; }
html[dir="rtl"] .language-form { right:auto; left:32px; } html[dir="rtl"] .reason-option-content { text-align:right; }
h1 { max-width:470px; margin:29px 0 7px; font-size:clamp(1.65rem,4vw,2.25rem); line-height:1.15; letter-spacing:-.035em; } .card-header p { margin:0; color:var(--muted); }
#support-form { padding:30px 42px 42px; }.field { margin:0 0 20px; } label { display:block; margin-bottom:7px; font-size:.94rem; font-weight:700; } label span { color:var(--brand); }
input, select, textarea { width:100%; min-height:46px; border:1px solid #b9c9df; border-radius:10px; padding:11px 12px; color:var(--ink); background:#fff; font:inherit; outline:none; transition:border-color .18s,box-shadow .18s; } textarea { min-height:130px; resize:vertical; } select { appearance:auto; cursor:pointer; } input:focus,select:focus,textarea:focus { border-color:var(--brand); box-shadow:0 0 0 3px rgba(18,100,214,.15); } small { display:block; margin-top:5px; color:var(--muted); font-size:.8rem; }.optional-text { color:var(--muted); font-weight:400; }.field-hint { margin:0 0 7px; }.field-hint-alert { display:flex; align-items:flex-start; gap:8px; padding:10px 11px; border:1px solid #c6dcf7; border-radius:10px; color:#285580; background:#f1f7ff; line-height:1.4; }.field-hint-alert span { display:grid; flex:0 0 17px; width:17px; height:17px; place-items:center; margin-top:1px; border-radius:50%; color:#fff; background:var(--brand); font-size:.72rem; font-weight:700; line-height:1; }
.reason-step { margin:0; padding:0; border:0; }.reason-step legend { margin:0 0 13px; padding:0; font-size:1rem; font-weight:750; }.reason-options { display:grid; grid-template-columns:1fr; gap:10px; }.reason-option { display:block; min-width:0; margin:0; cursor:pointer; }.reason-option input { position:absolute; width:1px; min-height:1px; opacity:0; pointer-events:none; }.reason-option-content { display:flex; min-height:82px; flex-direction:row; align-items:center; gap:14px; padding:16px 18px; border:1px solid #cbd8e8; border-radius:14px; color:var(--ink); background:#fff; font-size:.96rem; font-weight:700; line-height:1.3; transition:border-color .18s,background .18s,box-shadow .18s,transform .18s; }.reason-icon { display:grid; flex:0 0 38px; width:38px; height:38px; place-items:center; border-radius:11px; color:var(--brand); background:var(--brand-pale); font-size:1.25rem; line-height:1; }.reason-option:hover .reason-option-content { border-color:#86afe7; transform:translateY(-2px); box-shadow:0 7px 16px rgba(28,88,158,.1); }.reason-option input:focus-visible + .reason-option-content { outline:3px solid rgba(18,100,214,.28); outline-offset:2px; }.reason-option input:checked + .reason-option-content { border-color:var(--brand); background:var(--brand-pale); box-shadow:0 0 0 1px var(--brand); }.reason-option input:checked + .reason-option-content .reason-icon { color:#fff; background:var(--brand); }
#form-details { margin-top:28px; animation:form-reveal .28s ease-out both; } @keyframes form-reveal { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:translateY(0); } }
.grid-two,.grid-phone { display:grid; grid-template-columns:1fr; gap:0; }
.legacy-country-field { display:none; }.date-fields { margin:0 0 20px; padding:0; border:0; }.date-fields legend { margin:0 0 7px; padding:0; font-size:.94rem; font-weight:700; }.date-parts { display:grid; grid-template-columns:minmax(0,1fr) minmax(105px,1.5fr) minmax(0,1fr); gap:10px; }.date-parts label { min-width:0; margin:0; color:var(--muted); font-size:.8rem; font-weight:700; }.date-parts input,.date-parts select { margin-top:5px; text-align:center; }.date-parts select { padding-right:26px; padding-left:10px; text-align:left; }.phone-field .iti { width:100%; }.phone-field .iti__country-list { z-index:30; border-color:#b9c9df; border-radius:12px; box-shadow:0 14px 30px rgba(19,59,112,.18); }.phone-field .iti__search-input { border-radius:8px; }.phone-field .iti__selected-country { border-radius:9px 0 0 9px; }.phone-field .iti--separate-dial-code .iti__selected-dial-code { color:var(--ink); }
.country-combobox,.date-control { position:relative; }.select-source { position:absolute!important; width:1px!important; height:1px!important; min-height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }.country-options { position:absolute; z-index:20; top:calc(100% + 6px); right:0; left:0; max-height:248px; overflow:auto; padding:6px; border:1px solid #b9c9df; border-radius:12px; background:#fff; box-shadow:0 14px 30px rgba(19,59,112,.18); }.country-option { display:block; width:100%; border:0; border-radius:8px; padding:10px 11px; color:var(--ink); background:transparent; text-align:left; font:inherit; cursor:pointer; }.country-option:hover,.country-option:focus { color:#063b85; background:var(--brand-pale); outline:0; }
.date-control input { padding-right:50px; }.date-control > button { position:absolute; top:6px; right:6px; display:grid; width:34px; height:34px; place-items:center; border:0; border-radius:8px; color:var(--brand); background:var(--brand-pale); font-size:1rem; cursor:pointer; }.date-control > button:hover { background:#dcecff; }.date-calendar { position:absolute; z-index:21; top:calc(100% + 7px); left:0; width:min(320px,calc(100vw - 60px)); padding:12px; border:1px solid #b9c9df; border-radius:14px; background:#fff; box-shadow:0 16px 34px rgba(19,59,112,.2); }.date-calendar-header { display:grid; grid-template-columns:36px 1fr 36px; align-items:center; margin-bottom:10px; text-align:center; text-transform:capitalize; }.date-calendar-header button { width:32px; height:32px; border:0; border-radius:8px; color:var(--brand); background:transparent; font-size:1.55rem; line-height:1; cursor:pointer; }.date-calendar-header button:hover:not(:disabled) { background:var(--brand-pale); }.date-calendar-header button:disabled { color:#aebbd0; cursor:default; }.date-weekdays,.date-days { display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center; }.date-weekdays { margin-bottom:4px; color:var(--muted); font-size:.74rem; font-weight:700; }.date-day { height:36px; border:0; border-radius:9px; color:var(--ink); background:transparent; font:inherit; cursor:pointer; }.date-day:hover:not(:disabled) { color:#063b85; background:var(--brand-pale); }.date-day.is-today { box-shadow:inset 0 0 0 1px #90b8ed; }.date-day.is-selected { color:#fff; background:var(--brand); box-shadow:none; }.date-day:disabled { color:#c4cfdd; cursor:default; }
.check-panel { margin:2px 0 20px; padding:18px; border:1px solid #c9ddf7; border-radius:12px; background:#f2f8ff; }.check-panel h2 { margin:0 0 5px; font-size:1rem; }.check-panel p { margin:0 0 12px; color:#526985; font-size:.91rem; }
.checkbox { display:flex; align-items:flex-start; gap:10px; cursor:pointer; font-weight:600; }.checkbox input { flex:0 0 18px; width:18px; min-height:18px; margin:3px 0 0; accent-color:var(--brand); }.checkbox span { color:var(--ink); }
.cf-turnstile { min-height:65px; margin:25px 0 8px; }.privacy { margin:8px 0 22px; color:var(--muted); font-size:.82rem; }.button { display:inline-flex; min-height:48px; width:100%; align-items:center; justify-content:center; border:0; border-radius:10px; padding:11px 18px; background:var(--brand); color:#fff; font:700 1rem/1 Arial,Helvetica,sans-serif; cursor:pointer; text-decoration:none; transition:background .18s,transform .18s; }.button:hover { background:var(--brand-dark); }.button:disabled { cursor:wait; opacity:.72; }.button-secondary { width:auto; margin-top:8px; background:#24314a; }.button-secondary:hover { background:#182237; }
.alert { margin:26px 42px -5px; padding:13px 15px; border:1px solid #f0b5bd; border-radius:10px; color:#8e1622; background:#fff0f2; }.result { padding:42px; text-align:center; }.result h2 { margin:0 0 10px; font-size:1.45rem; }.result p { max-width:470px; margin:0 auto 22px; color:var(--muted); }.result-success h2 { color:var(--ok); }
.honeypot,.visually-hidden { position:absolute!important; width:1px!important; height:1px!important; padding:0!important; margin:-1px!important; overflow:hidden!important; clip:rect(0,0,0,0)!important; white-space:nowrap!important; border:0!important; }
@media (max-width:620px) { .page-shell { padding:0; place-items:stretch; }.support-card { border:0; border-radius:0; box-shadow:none; }.card-header,#support-form,.result { padding-left:22px; padding-right:22px; }.card-header { padding-top:27px; }.language-form { position:static; flex-direction:column; align-items:flex-start; gap:5px; margin-top:17px; }.language-form label { display:block; margin:0; }.language-form select { width:100%; }.language-label-default { display:none; }.language-label-mobile { display:inline; } html[dir="rtl"] .language-form { right:auto; left:auto; align-items:flex-end; } h1 { margin-top:30px; }.reason-option-content { min-height:78px; padding:14px 16px; }.reason-icon { flex:0 0 36px; width:36px; height:36px; }.date-calendar { width:calc(100vw - 44px); max-width:320px; }.alert { margin-left:22px; margin-right:22px; } }