/* The public sign-in and booking pages, dressed in the landing page's identity: the hero navy,
   the raised navy, and the copper accent. Layered over Bootstrap 5.3's dark theme, so Bootstrap
   keeps owning the grid and the form mechanics while every colour comes from here. */
:root{
    --navy:#071321;--raised:#0e2233;--panel:#0b1b2a;
    --copper:#d6ae92;--copper-deep:#a17b59;--copper-lit:#e9cbb5;
    --ink:#f0ece7;--dim:#a9b3bf;--hair:#ffffff17;
    /* system-attribution reads these two, so the shared footer inherits the brand automatically. */
    --muted:#8296aa;--line:#ffffff17;
}
html[data-bs-theme=dark]{
    --bs-body-bg:var(--navy);--bs-body-color:var(--ink);--bs-emphasis-color:#fff;
    --bs-secondary-color:var(--dim);--bs-tertiary-color:var(--dim);
    --bs-border-color:#ffffff24;--bs-heading-color:var(--ink);
    --bs-link-color:var(--copper);--bs-link-hover-color:var(--copper-lit);
}

body{
    min-height:100vh;margin:0;color:var(--ink);
    font-family:'Tajawal',sans-serif;font-size:16px;line-height:1.8;
    background:radial-gradient(ellipse at 85% 0,#12365a 0,transparent 55%),var(--navy);
    background-attachment:fixed;
}
h1,h2,h3{font-family:'Cairo',sans-serif}
a{text-decoration:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:3px solid var(--copper);outline-offset:3px}

/* Header: the same lockup as the landing page, so arriving here never feels like another site. */
.auth-header{position:sticky;top:0;z-index:50;background:#071321f2;backdrop-filter:blur(18px);border-bottom:1px solid var(--hair)}
.auth-header .auth-row{width:min(1120px,calc(100% - 48px));margin:auto;min-height:80px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.auth-brand{display:flex;align-items:center;gap:11px;color:inherit;font-family:'Cairo',sans-serif}
.auth-brand img{width:88px;height:72px;object-fit:contain;flex-shrink:0}
.auth-brand>span{border-right:1px solid #ffffff20;padding-right:14px}
.auth-brand strong{display:block;font-weight:800;font-size:17px;line-height:1.6}
.auth-brand small{display:block;font-family:'Tajawal',sans-serif;font-size:9.5px;font-weight:500;color:var(--dim)}
.auth-back{flex-shrink:0;font-size:12px;font-weight:700;color:var(--copper);border:1px solid #d6ae9240;border-radius:6px;padding:9px 15px;transition:background .2s,border-color .2s}
.auth-back:hover{background:#d6ae9212;border-color:var(--copper);color:var(--copper)}

.auth-main{width:min(1120px,calc(100% - 48px));margin:auto;padding:44px 0 34px}
.auth-main.is-narrow{width:min(560px,calc(100% - 40px))}
.auth-main.is-mid{width:min(720px,calc(100% - 40px))}

/* Card: the raised navy plane and the faint copper rings carried over from the branch cards. */
.auth-card{position:relative;overflow:hidden;background:var(--raised);border:1px solid #d6ae9230;border-radius:5px;padding:clamp(24px,4vw,42px)}
.auth-card:before{content:'';position:absolute;left:-60px;top:-60px;width:210px;height:210px;border:1px solid #d6ae9212;border-radius:50%;box-shadow:0 0 0 30px #d6ae9204,0 0 0 60px #d6ae9204;pointer-events:none}
.auth-card>*{position:relative}

.auth-head{margin-bottom:28px}
.auth-head.is-centered{text-align:center}
.auth-seal{width:68px;height:68px;display:grid;place-items:center;margin:0 auto 20px;border-radius:50%;background:var(--navy);border:1px solid #d6ae9245;outline:5px solid #d6ae920d;color:var(--copper);font-size:26px}
.eyebrow{display:inline-flex;align-items:center;gap:11px;color:var(--copper);font-size:12px;font-weight:800;margin-bottom:13px}
.eyebrow:before{content:'';width:26px;height:1px;background:var(--copper-deep)}
.auth-title{font-size:clamp(23px,3vw,31px);font-weight:800;line-height:1.6;letter-spacing:-.5px;color:#f1ece7;margin:0}
.auth-title span{color:var(--copper)}
.auth-lead{color:var(--dim);font-size:14px;margin:11px 0 0}

/* Form controls: navy wells inside the raised card, copper on focus. */
.form-control,.form-select{background-color:var(--navy);border:1px solid #ffffff24;border-radius:5px;color:var(--ink);padding:12px 14px;font-size:15px}
.form-control:focus,.form-select:focus{background-color:var(--navy);border-color:var(--copper);color:var(--ink);box-shadow:0 0 0 3px #d6ae9226}
.form-control::placeholder{color:#75849a}
.form-control-lg{padding:14px 16px;font-size:16px;border-radius:6px}
.form-label{font-size:13px;font-weight:700;color:#ccd6e0;margin-bottom:7px}
.form-check-input{background-color:var(--navy);border-color:#ffffff30}
.form-check-input:focus{border-color:var(--copper);box-shadow:0 0 0 3px #d6ae9226}
.form-check-input:checked{background-color:var(--copper);border-color:var(--copper)}
/* A dark mark on the copper fill; Bootstrap's white one all but vanishes against it. */
.form-check-input:checked[type=checkbox]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3e%3cpath fill='none' stroke='%23132132' stroke-linecap='round' stroke-linejoin='round' stroke-width='3.2' d='m6 10 3 3 6-6'/%3e%3c/svg%3e")}
.form-check-input:checked[type=radio]{background-image:url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23132132'/%3e%3c/svg%3e")}
.form-check-label{font-size:14px;color:#dfe5ec}
textarea.form-control{line-height:1.9}

.btn-brand{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:52px;padding:13px 26px;background:var(--copper);color:#132132;border:1px solid transparent;border-radius:7px;font-family:'Cairo',sans-serif;font-weight:800;font-size:15px;transition:background .2s}
.btn-brand:hover,.btn-brand:focus{background:var(--copper-lit);color:#132132}
.btn-ghost{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:12px 22px;background:transparent;color:#eee9e3;border:1px solid #d6ae9266;border-radius:7px;font-weight:700;font-size:14px;transition:background .2s}
.btn-ghost:hover,.btn-ghost:focus{background:#d6ae9212;color:#fff}
.btn-quiet{background:none;border:0;padding:6px 2px;color:var(--dim);font:inherit;font-size:13px}
.btn-quiet:hover{color:var(--copper)}

.alert{border-radius:5px;font-size:14px}
.alert-danger{background:#37171b;border:1px solid #a3555a55;color:#f2ccce}
.alert-danger strong{color:#fff}

/* Grouped fieldsets on the registration form sit one plane below the card. */
.section-card{background:var(--panel);border:1px dashed #d6ae9238;border-radius:5px;padding:22px}
.section-card h2{font-family:'Cairo',sans-serif;font-size:15px;font-weight:800;color:var(--copper);margin:0 0 16px}
.credentials-box{background:#12283a;border:1px solid #d6ae9245;border-radius:5px}
.credentials-box strong{color:var(--copper-lit)}

.auth-foot{text-align:center;font-size:14px;color:var(--dim);margin-top:24px;padding-top:22px;border-top:1px solid var(--hair)}
.auth-foot a{color:var(--copper);font-weight:800}
.auth-foot a:hover{color:var(--copper-lit)}

body .system-attribution{background:#050e18;border-top:1px solid var(--hair);max-width:none;margin:44px 0 0;padding:20px 16px 24px}
body .system-attribution a{color:#a58a72}

@media(max-width:760px){
    body{font-size:15px}
    .auth-header .auth-row{min-height:68px;width:calc(100% - 32px)}
    .auth-brand img{width:70px;height:58px}
    .auth-brand>span{display:none}
    .auth-main{padding:28px 0 24px}
    .auth-seal{width:58px;height:58px;font-size:22px;margin-bottom:16px}
    .auth-card{border-radius:4px}
}