/* ==========================================================================
   RUA · Campus Visit Booking — the actual product (mockup)
   Single responsive page: booking → confirmation → visit (revisit) states.
   ========================================================================== */

/* ---- Fonts (self-hosted) ------------------------------------------------ */
@font-face { font-family:'Tajawal'; src:url('../fonts/Tajawal-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'Tajawal'; src:url('../fonts/Tajawal-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Tajawal'; src:url('../fonts/Tajawal-ExtraBold.ttf') format('truetype'); font-weight:800; font-display:swap; }
@font-face { font-family:'Tajawal'; src:url('../fonts/Tajawal-Black.ttf') format('truetype'); font-weight:900; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/IBMPlexSansArabic-Light.ttf') format('truetype'); font-weight:300; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/IBMPlexSansArabic-Regular.ttf') format('truetype'); font-weight:400; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/IBMPlexSansArabic-Medium.ttf') format('truetype'); font-weight:500; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/IBMPlexSansArabic-SemiBold.ttf') format('truetype'); font-weight:600; font-display:swap; }
@font-face { font-family:'IBM Plex Sans Arabic'; src:url('../fonts/IBMPlexSansArabic-Bold.ttf') format('truetype'); font-weight:700; font-display:swap; }
@font-face { font-family:'Archivo'; src:url('../fonts/Archivo.ttf') format('truetype'); font-weight:400 800; font-display:swap; }

/* ---- Tokens ------------------------------------------------------------- */
:root{
  --bg:#EDEFF7;
  --red:#72101F;
  --orange:#D25127;
  --green:#295142;
  --indigo:#382568;
  --indigo-2:#4b3576;
  --ink:#0F1822;
  --card:#ffffff;

  --line:rgba(15,24,34,.13);
  --line-2:rgba(15,24,34,.07);
  --muted:#6a6f7e;
  --muted-2:#9a9fae;

  --red-tint:#fbeeef;
  --orange-tint:#fdf0ea;
  --green-tint:#eaf2ee;
  --indigo-tint:#efecf7;

  --font-head:'Tajawal','IBM Plex Sans Arabic',sans-serif;
  --font-body:'IBM Plex Sans Arabic','Tajawal',sans-serif;
  --font-mono:'Archivo','IBM Plex Sans Arabic',monospace;

  --radius:10px;
  --radius-sm:6px;
  --shadow:0 1px 2px rgba(15,24,34,.05), 0 10px 30px rgba(15,24,34,.07);
  --focus:0 0 0 2.5px rgba(56,37,104,.35);
  --max:1120px;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
html{-webkit-text-size-adjust:100%;}
body{
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
img,svg{display:block;max-width:100%;}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;}
a{color:var(--indigo);}
h1,h2,h3,h4{font-family:var(--font-head);font-weight:800;line-height:1.25;}
:focus-visible{outline:none;box-shadow:var(--focus);border-radius:6px;}
.num{font-family:var(--font-mono);font-feature-settings:"tnum" 1;direction:ltr;unicode-bidi:isolate;}

/* ==========================================================================
   Top bar
   ========================================================================== */
.topbar{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(120deg,var(--indigo-2),var(--indigo));
  color:#fff;box-shadow:0 2px 14px rgba(15,24,34,.16);
}
.topbar-in{max-width:var(--max);margin:0 auto;padding:12px clamp(14px,3vw,26px);
  display:flex;align-items:center;justify-content:space-between;gap:14px;}
.brand{display:flex;align-items:center;gap:12px;min-width:0;}
.brand > div{min-width:0;}
.brand img{width:46px;flex:none;}
.brand .t{font-family:var(--font-head);font-weight:800;font-size:clamp(14px,2vw,19px);line-height:1.25;overflow-wrap:break-word;}
.brand .s{font-size:11.5px;color:rgba(255,255,255,.72);margin-top:1px;line-height:1.35;max-width:52ch;overflow-wrap:break-word;}
@media (max-width:560px){ .brand img{width:38px;} .brand .s{font-size:10.5px;} }
.lang-btn{border:1.4px solid rgba(255,255,255,.5);color:#fff;font-family:var(--font-mono);
  font-weight:600;font-size:13px;padding:6px 14px;border-radius:8px;transition:.15s;flex:none;}
.lang-btn:hover{background:rgba(255,255,255,.14);}

/* booking-page header: logo (right) · centered title (middle) · EN (left)
   Logo is wrapped in a fixed-width span so iOS Safari can't blow up the
   SVG <img> when it's a direct flex child. */
.brand-logo{flex:none;width:46px;line-height:0;}
.brand-logo img{width:46px;height:26px;object-fit:contain;display:block;}
.brand-text{flex:1;min-width:0;text-align:center;padding:0 14px;}
.brand-text .t{font-family:var(--font-head);font-weight:900;font-size:clamp(12px,1.5vw,14px);
  line-height:1.25;color:#fff;overflow-wrap:break-word;}
.brand-text .s{font-weight:400;font-size:clamp(9.5px,1vw,10.5px);color:rgba(255,255,255,.72);margin-top:2px;
  line-height:1.35;overflow-wrap:break-word;}
@media (max-width:560px){ .brand-logo,.brand-logo img{width:40px;} .brand-logo img{height:23px;} .brand-text{padding:0 8px;} }

/* ==========================================================================
   Layout
   ========================================================================== */
.wrap{max-width:var(--max);margin:0 auto;padding:clamp(16px,3vw,30px) clamp(14px,3vw,26px) 120px;}
.hero{margin-bottom:20px;}
.hero h1{font-size:clamp(22px,3.4vw,30px);color:var(--ink);}
.hero p{color:var(--muted);font-size:clamp(13px,1.6vw,15.5px);margin-top:4px;}

.cols{display:grid;grid-template-columns:1fr 360px;gap:clamp(16px,2.4vw,28px);align-items:start;}
@media (max-width:860px){ .cols{grid-template-columns:1fr;} }

.card{background:var(--card);border:1.4px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);}
.pad{padding:clamp(16px,2.2vw,24px);}

.step-title{font-family:var(--font-head);font-weight:800;font-size:17px;color:var(--ink);
  margin:0 0 12px;display:flex;align-items:center;gap:9px;}
.step-title .n{font-family:var(--font-mono);font-size:14px;color:#fff;background:var(--indigo);
  width:26px;height:26px;border-radius:7px;display:grid;place-items:center;flex:none;}
.block{margin-bottom:22px;}

/* ---- Day cards ---------------------------------------------------------- */
.days{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
@media (max-width:640px){ .days{grid-template-columns:repeat(3,1fr);} }
.day{background:var(--card);border:1.5px solid var(--line);border-radius:9px;
  padding:11px 6px;text-align:center;transition:.15s;min-height:74px;}
.day:hover:not([disabled]){border-color:var(--indigo);transform:translateY(-1px);}
.day .dow{display:block;font-size:11.5px;color:var(--muted);}
.day .dnum{display:block;font-family:var(--font-mono);font-weight:700;font-size:21px;color:var(--ink);line-height:1.1;margin:1px 0;}
.day .mon{display:block;font-size:10.5px;color:var(--muted-2);}
.day[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);box-shadow:0 6px 16px rgba(56,37,104,.28);}
.day[aria-pressed="true"] .dow,.day[aria-pressed="true"] .dnum,.day[aria-pressed="true"] .mon{color:#fff;}
.day[disabled]{opacity:.5;cursor:not-allowed;background:#e9ebf3;}
.day .full{display:block;font-size:9.5px;color:var(--red);font-weight:600;margin-top:1px;}

/* ---- Time buttons ------------------------------------------------------- */
.times{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;}
@media (max-width:640px){ .times{grid-template-columns:repeat(3,1fr);} }
.time{background:var(--card);border:1.5px solid var(--line);border-radius:9px;
  padding:13px 4px;transition:.15s;text-align:center;}
.time:hover:not([disabled]){border-color:var(--indigo);transform:translateY(-1px);}
.time .hh{font-family:var(--font-mono);font-weight:700;font-size:16px;color:var(--ink);}
.time .seats{display:block;font-size:10px;color:var(--muted-2);margin-top:2px;}
.time[aria-pressed="true"]{background:var(--indigo);border-color:var(--indigo);box-shadow:0 6px 16px rgba(56,37,104,.28);}
.time[aria-pressed="true"] .hh,.time[aria-pressed="true"] .seats{color:#fff;}
.time[disabled]{opacity:.45;cursor:not-allowed;background:#e6e8f0;}
.time.low .seats{color:var(--orange);font-weight:600;}
.times-hint{font-size:13px;color:var(--muted);padding:14px;background:var(--bg);border-radius:8px;text-align:center;}
.endnote{font-size:13px;color:var(--muted);margin-top:10px;}
.endnote b{font-family:var(--font-mono);color:var(--ink);}

/* ---- Consent ------------------------------------------------------------ */
.consent{display:flex;align-items:flex-start;gap:11px;cursor:pointer;font-size:14px;padding:2px 0;}
.consent input{position:absolute;opacity:0;width:0;height:0;}
.consent .box{width:23px;height:23px;border-radius:6px;border:1.7px solid var(--indigo);
  flex:none;display:grid;place-items:center;color:#fff;transition:.12s;margin-top:1px;}
.consent input:checked + .box{background:var(--indigo);}
.consent .box svg{width:14px;opacity:0;transition:.12s;}
.consent input:checked + .box svg{opacity:1;}
.consent input:focus-visible + .box{box-shadow:var(--focus);}

/* ---- Buttons ------------------------------------------------------------ */
.btn{display:flex;align-items:center;justify-content:center;gap:8px;width:100%;
  font-family:var(--font-head);font-weight:800;font-size:16px;padding:14px;border-radius:9px;transition:.15s;}
.btn svg{width:18px;}
.btn-primary{background:var(--indigo);color:#fff;}
.btn-primary:hover:not(:disabled){background:#2c1d52;}
.btn-primary:disabled{background:#c3c6d6;cursor:not-allowed;}
.btn-ghost{background:#fff;border:1.5px solid var(--indigo);color:var(--indigo);font-weight:700;font-size:14.5px;padding:12px;}
.btn-ghost:hover{background:var(--indigo-tint);}
.btn-ghost.red{border-color:var(--red);color:var(--red);}
.btn-ghost.red:hover{background:var(--red-tint);}
.stack{display:flex;flex-direction:column;gap:10px;}

/* ==========================================================================
   Summary sidebar
   ========================================================================== */
.summary{position:sticky;top:84px;}
.summary h3{font-size:16px;margin-bottom:12px;}
.kv{display:flex;justify-content:space-between;gap:12px;font-size:14px;padding:9px 0;border-top:1px solid var(--line-2);}
.kv:first-of-type{border-top:none;}
.kv .k{color:var(--muted);}
.kv .v{font-weight:600;text-align:left;}
.maplink{color:var(--indigo);font-weight:700;text-decoration:underline;text-underline-offset:2px;}
.maplink:hover{color:#2c1d52;}
.kv .v.ph{color:var(--muted-2);font-weight:400;}
.summary .btn{margin-top:14px;}
.summary .foot{font-size:12px;color:var(--muted);text-align:center;margin-top:9px;}
.expect{background:var(--indigo);color:#fff;border-radius:var(--radius);padding:16px 18px;margin-top:16px;}
.expect h4{color:#fff;font-size:14.5px;margin-bottom:6px;}
.expect p{color:rgba(255,255,255,.85);font-size:13px;}

/* ==========================================================================
   Message bars (states)
   ========================================================================== */
.bars{display:flex;flex-direction:column;gap:10px;margin-bottom:18px;}
.bar{border-radius:9px;padding:12px 15px;font-size:13.5px;display:flex;gap:10px;align-items:flex-start;}
.bar b{display:block;font-size:14.5px;margin-bottom:1px;}
.bar span{color:var(--muted);}
.bar .ic{flex:none;width:20px;margin-top:1px;}
.bar--red{background:var(--red-tint);}    .bar--red b{color:var(--red);}    .bar--red .ic{color:var(--red);}
.bar--orange{background:var(--orange-tint);} .bar--orange b{color:var(--orange);} .bar--orange .ic{color:var(--orange);}
.bar--green{background:var(--green-tint);}  .bar--green b{color:var(--green);}  .bar--green .ic{color:var(--green);}
.bar--indigo{background:var(--indigo-tint);} .bar--indigo b{color:var(--indigo);} .bar--indigo .ic{color:var(--indigo);}

/* ==========================================================================
   Confirmation / Visit views
   ========================================================================== */
.confirm-hero{background:linear-gradient(160deg,#356a55,#295142);color:#fff;
  border-radius:var(--radius) var(--radius) 0 0;padding:26px 22px 22px;text-align:center;}
.confirm-hero .check{width:60px;height:60px;border-radius:50%;background:rgba(255,255,255,.18);
  display:grid;place-items:center;margin:0 auto 12px;}
.confirm-hero .check svg{width:30px;}
.confirm-hero h2{color:#fff;font-size:22px;}
.confirm-hero p{color:rgba(255,255,255,.85);font-size:13.5px;margin-top:3px;}

.visit-hero{background:linear-gradient(120deg,var(--indigo-2),var(--indigo));color:#fff;
  border-radius:var(--radius) var(--radius) 0 0;padding:22px;display:flex;justify-content:space-between;align-items:center;}
.visit-hero h2{color:#fff;font-size:19px;}
.visit-hero img{width:46px;}

.detail{background:var(--indigo);color:#fff;border-radius:var(--radius);padding:18px;text-align:center;margin:18px 0;}
.detail .lab{font-size:12px;color:rgba(255,255,255,.7);}
.detail .date{font-family:var(--font-head);font-weight:800;font-size:19px;color:#fff;margin-top:2px;}
.detail .dtime{font-family:var(--font-mono);font-weight:700;font-size:34px;color:#fff;margin:6px 0 2px;}
.detail .sub{font-family:var(--font-mono);font-size:13px;color:rgba(255,255,255,.78);}
.detail .sub b{color:#fff;}
.info{background:var(--indigo-tint);border-radius:8px;padding:12px 14px;font-size:12.5px;color:#3a2a63;margin:14px 0;display:flex;gap:8px;align-items:flex-start;text-align:right;}
.info svg{width:16px;height:16px;flex:none;margin-top:1px;}
.what h4{font-size:14.5px;margin:14px 0 4px;}
.what p{font-size:13px;color:var(--muted);}
.support{font-size:13px;color:var(--muted);text-align:center;margin-top:12px;}

/* ==========================================================================
   Footer
   ========================================================================== */
.foot-note{max-width:var(--max);margin:0 auto;padding:0 clamp(14px,3vw,26px) 40px;
  text-align:center;color:var(--muted-2);font-size:12px;}
.foot-note a{color:var(--muted);}
.demo-tag{position:fixed;bottom:14px;inset-inline-start:14px;z-index:50;
  background:var(--ink);color:#fff;font-size:11px;padding:5px 11px;border-radius:20px;opacity:.85;}
.demo-tag b{color:#fff;font-weight:700;}

/* mobile: summary confirm as full-width block already; make sticky bottom feel */
@media (max-width:860px){
  .summary{position:static;}
  .expect{margin-top:16px;}
}

.hidden{display:none !important;}
@media (max-width:640px){ .demo-tag{display:none;} }

/* small helper */
.mt{margin-top:16px;}
.center{text-align:center;}