/* Tasheer appointment form — BookAppointment.pk blue palette. */

:root {
    --bapnil-primary: #1f468a;
    --bapnil-dark: #173568;
    --bapnil-accent: #dce8ff;
    --bapnil-line: #d5e0f0;
    --bapnil-ink: #24344f;
    --bapnil-muted: #61718b;
}

* { box-sizing: border-box; }

/*
 * The document is sized by its own content, not by the frame it is embedded in.
 * That lets app.js report a true content height so the parent page can grow the
 * iframe: the form then expands on the page as each step appears, with no inner
 * scrollbar, exactly like the GAMCA booking form. Do not put a fixed viewport
 * height or an internal scroll container back here, or the measurement is
 * clamped and the frame can no longer shrink or grow with the form.
 */
html, body {
    margin: 0;
    padding: 0;
}

body.website-embed {
    display: block;
    background: #f3f6fb;
    color: var(--bapnil-ink);
    /* Same stack as assets/booking/style.css so both forms render Urdu and
       English identically. Noto Sans Arabic is a Naskh face; do not switch this
       to Nastaliq, which makes the Tasheer form look like a different product. */
    font-family: "Noto Sans Arabic", "Segoe UI", Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
}

/* ---------- header / content / footer ---------- */

.fixed-header {
    display: flex;
    align-items: center;
    padding: 15px 20px;
    background: linear-gradient(135deg, var(--bapnil-dark), var(--bapnil-primary));
    color: #fff;
}

/* One header only: the request title and the language toggle. The former brand
   row was removed so this form does not show two stacked header bars. */
.title-bar {
    display: flex;
    flex: 1 1 auto;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    font-size: 20px;
    font-weight: 800;
}

.language-toggle {
    display: inline-flex;
    overflow: hidden;
    padding: 0;
    border: 1px solid rgba(255, 255, 255, .5);
    border-radius: 999px;
    background: rgba(255, 255, 255, .14);
    color: #fff;
    font: inherit;
    font-size: 13px;
    cursor: pointer;
}

.language-toggle span { padding: 6px 13px; }
.language-toggle.ur-active .toggle-ur,
.language-toggle.en-active .toggle-en { background: var(--bapnil-accent); color: var(--bapnil-dark); font-weight: 900; }

.scroll-pane {
    padding: 18px 18px 26px;
}

.independent-notice {
    margin: 0 0 16px;
    padding: 13px 16px;
    border: 1px solid #d0dff4;
    border-inline-start: 4px solid var(--bapnil-primary);
    border-radius: 10px;
    background: #edf3fc;
    color: #29466f;
    font-size: 13.5px;
    line-height: 1.55;
}

/* ---------- steps ---------- */

#tasheerForm { display: grid; gap: 16px; }

/* `display: grid` above beats the browser's `[hidden]` default, so hiding the
   form on success needs its own rule as well as the inline style the script
   sets. Without this the form stayed on screen behind the reference number. */
#tasheerForm[hidden] { display: none; }

/* Clipped rather than pushed off-canvas: an off-canvas element widens the RTL
   page and gives the whole form a horizontal scrollbar. */
.honeypot {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

.form-card {
    display: none;
    padding: 20px;
    border: 1px solid var(--bapnil-line);
    border-radius: 16px;
    background: #fff;
    box-shadow: 0 10px 26px rgba(31, 70, 138, .06);
}

.form-card.visible { display: block; animation: card-in .22s ease; }
@keyframes card-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.form-card .step-number {
    display: inline-grid;
    width: 30px;
    height: 30px;
    margin-bottom: 10px;
    place-items: center;
    border-radius: 9px;
    background: #e5edfb;
    color: #1f468a;
    font-size: 14px;
    font-weight: 900;
}

.form-card fieldset { margin: 0; padding: 0; border: 0; }

.form-card legend {
    padding: 0 0 12px;
    color: var(--bapnil-dark);
    font-size: 18px;
    font-weight: 900;
    line-height: 1.35;
}

.choice-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.choice {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 15px 16px;
    border: 1.5px solid var(--bapnil-line);
    border-radius: 12px;
    background: #f8faff;
    font-weight: 700;
    cursor: pointer;
}

.choice:hover { border-color: #9bb5df; }
.choice input { flex: 0 0 auto; width: 20px; height: 20px; accent-color: var(--bapnil-primary); }
.choice:has(input:checked) { border-color: var(--bapnil-primary); background: #eaf1fd; }

.two-columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }

.field-row { display: grid; gap: 6px; margin: 14px 0 0; }
.field-row label { color: #294b7b; font-size: 14.5px; font-weight: 800; }

.field-row input,
.field-row select {
    width: 100%;
    min-height: 48px;
    padding: 11px 13px;
    border: 1px solid #bfcee5;
    border-radius: 10px;
    background: #fff;
    color: #24344f;
    font: inherit;
}

.field-row input[type="file"] { padding: 9px; background: #f8faff; }
.field-row input:focus,
.field-row select:focus { border-color: var(--bapnil-primary); outline: 0; box-shadow: 0 0 0 3px rgba(31, 70, 138, .13); }
.field-row input:invalid:not(:placeholder-shown) { border-color: #d8a1a1; }

.field-hint { color: var(--bapnil-muted); font-size: 12.5px; line-height: 1.45; }

.fixed-row {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 6px;
}

.fixed-row span {
    padding: 6px 11px;
    border: 1px solid #d5e0f0;
    border-radius: 999px;
    background: #f0f5fd;
    color: #38577e;
    font-size: 12.5px;
    font-weight: 700;
}

.chosen-file { color: var(--bapnil-primary); font-size: 12.5px; font-weight: 700; }

/* ---------- coming-soon card ---------- */

.notice-card {
    padding: 26px 22px;
    border: 1px solid #f0d9a4;
    background: #fffaf0;
    text-align: center;
}

.notice-card .notice-icon { display: block; margin-bottom: 8px; font-size: 30px; }
.notice-card h2 { margin: 0 0 10px; color: #7a5a12; font-size: 20px; }
.notice-card p { margin: 0 auto 18px; max-width: 52ch; color: #6b5a2f; font-size: 14.5px; }
.notice-card .inline-button { margin: 0 6px; }

/* ---------- payment step (mirrors assets/booking/style.css) ---------- */

.conditional { display: none; margin-top: 12px; }
.conditional.visible { display: block; animation: reveal .2s ease both; }
@keyframes reveal { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

.price {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 15px;
    border: 1px solid var(--bapnil-line);
    border-radius: 12px;
    background: #f0f5fd;
    font-weight: 800;
}

.price strong { direction: ltr; color: #1f468a; font-size: 21px; }

.fee-disclosure {
    margin: 0 0 14px;
    padding: 11px 13px;
    border-radius: 10px;
    background: #f0f5fd;
    color: #405777;
    font-size: 12.5px;
    line-height: 1.65;
}

.payment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

.payment-details { display: none; direction: ltr; margin-top: 12px; text-align: left; }
.payment-details.visible { display: block; animation: reveal .2s ease both; }

.payment-account-card {
    display: grid;
    grid-template-columns: 108px minmax(0, 1fr) 104px;
    gap: 14px;
    align-items: center;
    padding: 14px 16px;
    border: 1px solid #bfcee5;
    border-radius: 14px;
    background: #fff;
    box-shadow: 0 6px 16px rgba(31, 70, 138, .07);
}

.payment-brand { display: grid; justify-items: center; gap: 6px; min-width: 0; font-size: 14px; text-align: center; }
.payment-brand strong { display: block; color: #252525; font-size: 15px; line-height: 1.15; }

.payment-brand-mark {
    display: grid;
    width: 54px;
    height: 54px;
    place-items: center;
    border-radius: 15px;
    background: #f1f3f3;
    font-size: 23px;
    font-weight: 900;
    line-height: 1;
}

.payment-account-card.jazzcash .payment-brand-mark { background: #fff2b9; color: #c61c35; }
.payment-account-card.easypaisa .payment-brand-mark { background: #edf7ed; color: #3b286d; }
.payment-account-card.hbl .payment-brand-mark { background: #eaf8f7; color: #008c84; font-size: 17px; }

.payment-account-info { min-width: 0; }

.payment-field-label {
    display: inline-block;
    margin: 2px 0 5px;
    padding: 2px 7px;
    border-radius: 4px;
    background: var(--bapnil-primary);
    color: #fff;
    font-size: 10px;
    font-weight: 800;
    line-height: 1.35;
}

.payment-account-number,
.payment-account-title { overflow-wrap: anywhere; color: #29466f; font-weight: 900; line-height: 1.15; }
.payment-account-number { margin: 0 0 9px; font-size: 20px; letter-spacing: .2px; }
.payment-account-title { font-size: 17px; }

.payment-qr-image {
    display: block;
    width: 100%;
    aspect-ratio: 1;
    object-fit: contain;
    border-radius: 8px;
    background: #f3f3f3;
}

.payment-proof { padding: 13px; border: 1.5px dashed var(--bapnil-primary); border-radius: 12px; background: #fff; }
.payment-proof label { display: block; margin-bottom: 8px; color: #294b7b; font-size: 14.5px; font-weight: 800; }
.payment-proof input[type="file"] { width: 100%; direction: ltr; }

/* ---------- buttons ---------- */

.inline-button,
.ghost-button,
.submit-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 48px;
    padding: 12px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--bapnil-primary);
    color: #fff !important;
    font: inherit;
    font-weight: 800;
    text-decoration: none !important;
    cursor: pointer;
}

.inline-button:hover,
.submit-button:hover { background: #173568; }

.ghost-button { border: 1.5px solid #d0dff4; background: #fff; color: #1f468a !important; }
.ghost-button:hover { border-color: var(--bapnil-primary); background: #edf3fc; }

.submit-button { width: 100%; margin-top: 6px; font-size: 16px; }
.submit-button.processing { opacity: .75; cursor: progress; }
.submit-spinner { display: none; }
.submit-button.processing .submit-spinner { display: inline; animation: spin .9s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.agreement {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin: 16px 0 8px;
    color: #405777;
    font-size: 13px;
    line-height: 1.5;
}

.agreement input { flex: 0 0 auto; width: 19px; height: 19px; margin-top: 3px; accent-color: var(--bapnil-primary); }

.policy-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px; margin: 0 0 16px; font-size: 13px; text-align: center; }
.policy-links a { color: var(--bapnil-primary); font-weight: 700; }

.error {
    display: none;
    margin: 12px 0 0;
    padding: 12px 14px;
    border-inline-start: 4px solid #c43838;
    border-radius: 8px;
    background: #fff0f0;
    color: #7d2222;
    font-size: 13.5px;
}

.error.visible { display: block; }

/* ---------- success ---------- */

.success-screen {
    display: none;
    padding: 30px 22px;
    border: 1px solid #d0dff4;
    border-radius: 16px;
    background: #fff;
    text-align: center;
}

.success-screen.visible { display: block; }
.success-icon {
    display: grid;
    width: 54px;
    height: 54px;
    margin: 0 auto 12px;
    place-items: center;
    border-radius: 50%;
    background: #e2f5ee;
    color: #087a55;
    font-size: 28px;
    font-weight: 900;
}

.success-screen h2 { margin: 0 0 10px; color: var(--bapnil-dark); font-size: 20px; }
.success-screen p { margin: 0 0 18px; color: var(--bapnil-muted); font-size: 14px; }

.reference-number {
    display: inline-block;
    margin: 0 0 14px;
    padding: 12px 20px;
    border: 1px dashed #9bb5df;
    border-radius: 11px;
    background: #f0f5fd;
    color: #1f468a;
    font-size: 20px;
    font-weight: 900;
    letter-spacing: .04em;
    direction: ltr;
}

/* ---------- footer ---------- */

.fixed-footer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 11px 16px;
    background: var(--bapnil-dark);
    color: #dce8ff;
    font-size: 13px;
}

.fixed-footer a { color: #fff; text-decoration: none; }
.fixed-footer a:hover { text-decoration: underline; }
.fixed-footer { flex-wrap: wrap; padding: 16px; }
.fixed-footer p { margin: 0; }
.fixed-footer .whatsapp-help { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 20px; border: 1px solid rgba(255,255,255,.18); border-radius: 10px; background: #128c4a; color: #fff; box-shadow: 0 4px 12px rgba(0,0,0,.16); font-weight: 800; text-decoration: none; transition: background .15s ease, box-shadow .15s ease; }
.fixed-footer .whatsapp-help:hover { background: #0f753d; box-shadow: 0 6px 16px rgba(0,0,0,.2); text-decoration: none; }
.whatsapp-icon { width: 22px; height: 22px; flex: 0 0 auto; }
.fixed-footer .whatsapp-help:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }

@media (max-width: 620px) {
    body.website-embed { font-size: 15px; }
    .two-columns,
    .choice-grid,
    .payment-grid { grid-template-columns: 1fr; }
    .payment-account-card { grid-template-columns: 72px minmax(0, 1fr) 68px; gap: 8px; padding: 11px; }
    .payment-brand-mark { width: 44px; height: 44px; border-radius: 12px; font-size: 19px; }
    .payment-brand strong { font-size: 12px; }
    .payment-field-label { font-size: 9px; }
    .payment-account-number { font-size: 15px; }
    .payment-account-title { font-size: 13px; }
    .price strong { font-size: 19px; }
    .scroll-pane { padding: 14px 12px 22px; }
    .form-card { padding: 16px; }
    .form-card legend { font-size: 17px; }
    .fixed-header { padding: 12px 14px; }
    .title-bar { font-size: 17px; }
}

.field-error { display: block; color: #b42318; font-size: 0.875rem; margin-top: 6px; }
[aria-invalid="true"] { border-color: #b42318; }

.payment-grid > .payment-details { grid-column: 1 / -1; margin: 0; }

[hidden] { display: none !important; }
.applicant-details { margin: 20px 0; padding: 20px 0; border-bottom: 1px solid #d5e0f0; }
.applicant-details:first-child { margin-top: 0; }
.family-only { margin-top: 20px; }
#familyBookingChoices .choice-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.family-booking-type { display: grid; gap: 10px; margin-top: 14px; }
.field-row input[type="file"]:not([aria-invalid="true"]) { border-color: #bfcee5; }

.fee-disclosure a { color: var(--bapnil-primary); font-weight: 700; }

/* Accessible embassy-aware appointment calendar on desktop and mobile. */
.tasheer-calendar-source{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;overflow:hidden!important;clip-path:inset(50%);white-space:nowrap}
.tasheer-date-calendar{padding:12px;background:#fff;border:1px solid #d5dfe9;border-radius:12px;margin:8px 0 0;font-family:inherit;direction:ltr;max-width:100%}
.calendar-header{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:12px;color:#173568}
.calendar-header button{width:32px;min-height:32px;border:0;border-radius:8px;background:#edf2f8;color:#173568;font-size:21px;cursor:pointer}
.calendar-days{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center}
.calendar-weekday{font-size:10px;font-weight:700;color:#61718b;padding:4px 0}
.calendar-days button{width:100%;min-height:34px;padding:5px 0;border:1px solid #c9d6e8;border-radius:7px;background:#eaf0fa;color:#173568;font-size:13px;font-weight:700;cursor:pointer}
.calendar-days button:disabled{background:transparent;border-color:transparent;color:#bac0c8;cursor:default;font-weight:400;opacity:1}
.calendar-days button[aria-pressed=true]{background:#315087;color:#fff;border-color:#315087}
.calendar-days button:focus-visible{outline:2px solid #315087;outline-offset:2px}
.calendar-status{margin:8px 0;color:#61718b;font-size:13px}

[hidden]{display:none!important}.payment-timing{margin:18px 0}.payment-timing .payment-grid{display:grid;grid-template-columns:1fr;gap:12px}#payLaterNote{padding:16px;background:#edf6ff;border:1px solid #c9d9ef;border-radius:12px;line-height:1.7;color:#254772}
/* Slightly inset mobile fields; labels and controls share the same alignment. */
@media(max-width:767px){#tasheerForm .field-row{width:94%;max-width:100%;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}#tasheerForm .field-row input,#tasheerForm .field-row select{min-width:0;max-width:100%;box-sizing:border-box}}

@media(max-width:767px){html body #tasheerForm .form-card .field-row{width:94%!important;max-width:94%!important;margin-inline:auto!important;justify-self:center!important}}

@media(max-width:767px){html body #tasheerForm .form-card .field-row{width:88%!important;max-width:88%!important;margin-inline:auto!important}}

@media(max-width:767px){html body #tasheerForm .form-card .field-row:has(>select:not(.tasheer-calendar-source)){width:80%!important;max-width:80%!important}html body #tasheerForm input[type=date]{width:100%!important;min-width:0!important;min-height:46px;appearance:auto;-webkit-appearance:auto;padding:10px 12px;box-sizing:border-box;direction:ltr}}

/* Full available width with compact control height, as requested. */
@media(max-width:767px){html body #tasheerForm .form-card .field-row,html body #tasheerForm .form-card .field-row:has(>select:not(.tasheer-calendar-source)){width:100%!important;max-width:100%!important;margin-inline:0!important}html body #tasheerForm .field-row input:not([type=file]),html body #tasheerForm .field-row select:not(.tasheer-calendar-source){height:42px!important;min-height:42px!important;padding:8px 12px!important;line-height:1.4!important}html body #tasheerForm .field-row input[type=date]{height:42px!important;min-height:42px!important;padding:8px 12px!important}}

/* Native select text stays vertically centred inside the compact control. */
@media(max-width:767px){html body #tasheerForm .field-row select:not(.tasheer-calendar-source){height:42px!important;min-height:42px!important;padding-top:0!important;padding-bottom:0!important;padding-inline:12px 30px!important;line-height:normal!important;vertical-align:middle;box-sizing:border-box}}

.passport-date-dialog{width:min(360px,calc(100vw - 32px));max-height:85vh;padding:20px;border:1px solid #cbded4;border-radius:16px;box-sizing:border-box;color:#173f35;background:#fff;box-shadow:0 16px 60px #0003}.passport-date-dialog::backdrop{background:#073e3b66}.passport-date-dialog header{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:18px}.passport-date-dialog header strong{font-size:16px}.date-close{background:#eef5f1;border:0;border-radius:8px;font-size:24px;width:34px;height:34px;color:#174f43}.passport-date-selects{display:grid;grid-template-columns:1.2fr 1fr;gap:12px;margin-bottom:18px}.passport-date-selects label{font-size:12px;font-weight:700}.passport-date-selects select{display:block;width:100%;height:42px;margin-top:5px;padding:0 9px;border:1px solid #bdd6c9;border-radius:8px;background:white;color:#174f43;font:inherit;font-size:15px}.passport-date-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:5px;text-align:center;direction:ltr}.date-weekday{font-size:10px;color:#668074;padding-bottom:8px}.passport-date-grid button{height:36px;padding:0;border:1px solid #dbe8e1;border-radius:7px;background:#f5faf7;color:#174f43;font-size:14px;cursor:pointer}.passport-date-grid button[aria-pressed=true]{background:#187a63;color:#fff}.date-cancel{width:100%;margin-top:16px;padding:10px;background:#f0f6f2;border:1px solid #d1e1d8;border-radius:8px;color:#174f43}.passport-calendar-field{cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23187a63' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M7 3v4m10-4v4M3 11h18'/%3E%3C/svg%3E")!important;background-position:right 12px center!important;background-repeat:no-repeat!important;padding-right:38px!important}

/* Separate contact, fee and payment sections in the merged final step. */
@media(max-width:767px){html body #tasheerForm .form-card[data-step="8"]>.price{margin-top:24px!important;margin-bottom:16px!important}html body #tasheerForm .form-card[data-step="8"]>.payment-timing{margin-top:24px!important;margin-bottom:20px!important}html body #tasheerForm #payNowFields{margin-top:24px!important;padding-top:18px!important;border-top:1px solid #dce7e1}html body #tasheerForm #payNowFields>fieldset>legend{margin-bottom:14px!important}html body #tasheerForm #paymentDetails:not(:empty){margin-top:20px!important}html body #tasheerForm #paymentProofWrap.visible{margin-top:22px!important}}

@media(max-width:767px){html body #tasheerForm .tasheer-upload-row{position:relative}html body #tasheerForm .tasheer-upload-label{display:flex!important;flex-direction:column;align-items:center;justify-content:center;gap:8px;min-height:138px;padding:20px!important;border:2px dashed #aeb7bf;border-radius:14px;background:linear-gradient(135deg,#fafbfc,#e9edf0);color:#202428!important;font-size:15px!important;font-weight:700;cursor:pointer;text-align:center;box-sizing:border-box}html body #tasheerForm .tasheer-upload-label:before{content:'↑';display:grid;place-items:center;width:42px;height:42px;border-radius:12px;background:#dde3e7;font-size:28px;color:#454e55}html body #tasheerForm .tasheer-upload-label:after{content:'Tap to browse · JPEG / PNG / WebP / PDF · Up to 10 MB';font-size:11px;font-weight:400;color:#657079;line-height:1.5}html body #tasheerForm .tasheer-upload-input{position:absolute!important;width:1px!important;height:1px!important;min-height:0!important;padding:0!important;clip-path:inset(50%);overflow:hidden}html body #tasheerForm .tasheer-upload-row:focus-within>.tasheer-upload-label{outline:2px solid #66717a;outline-offset:3px}html body #tasheerForm .tasheer-upload-row .chosen-file:not(:empty){padding:10px 12px;background:#eef7f1;border-radius:8px;color:#215640;font-size:12px;overflow-wrap:anywhere}}

/* Submitted Tasheer form must not reserve a blank flex area above the reference. */
html body.website-embed #tasheerForm[hidden]{display:none!important}
@media(max-width:767px){
 html.m-app-booking body.website-embed .scroll-pane:has(#successScreen.visible){gap:12px}
 html.m-app-booking body.website-embed #successScreen.visible{flex:0 0 auto;margin-block:auto!important;width:100%;box-sizing:border-box}
}