:root{
  --blue:#0BA3E8;
  --blue2:#0BA3E8;
  --bg:#f6f9ff;
  --card:#ffffff;
  --text:#0f172a;
  --muted:#475569;
  --border:#e2e8f0;
  --staff-action-blue:#0BA3E8;

  /* follow brand color */
  --navBorder: var(--blue);
  --footerBlue: var(--blue);

  --public-max-width: 1180px;
  --public-shell-width: calc(100% - 32px);
  --public-page-padding: 24px;
  --public-page-gap: 24px;
  --public-section-gap: 42px;
  --public-card-radius: 8px;
  --public-card-border: 1px solid #d7e3f3;
  --public-card-shadow: 0 12px 30px rgba(15,23,42,.06);
  --public-control-height: 44px;
  --public-button-height: 44px;
  --public-focus-ring: 0 0 0 3px rgba(11,163,232,.16);
  --public-text: #0f172a;
  --public-muted: #475569;
  --public-border: #d7e3f3;
  --public-surface: #ffffff;
  --public-page-bg: #f6f9fc;
  --public-success: #15803d;
  --public-warning: #b45309;
  --public-danger: #b91c1c;
  --public-info: #0369a1;
  --public-icon-badge: 44px;
}

*{box-sizing:border-box;}
html{ min-height:100%; }
body{ min-height:100vh; }

body{
  margin:0;
  display:flex;
  flex-direction:column;
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
  background: var(--bg);
  color: var(--text);
  line-height:1.6;
}

main{
  flex:1 0 auto;
  min-height:0;
  overflow:visible;
}

a{text-decoration:none;color:inherit;}
.container,
.public-container{
  width: var(--public-shell-width);
  max-width: var(--public-max-width);
  margin:0 auto;
}

/* NAV */
.topbar{
  background:#ffffff;
  border-bottom: 1px solid #e6eef5;
  box-shadow: 0 3px 16px rgba(8,42,84,.05);
  position:sticky;
  top:0;
  z-index:20;
}

.topbar-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  /* ✅ lock header height so nav doesn't grow */
  height:86px;
  padding:0 !important;
}

.brand{
  display:flex;
  align-items:center;
  gap:12px;
  color: var(--text);
  min-width:0;
}
.brand-title{font-weight:800;}

/* ✅ logo bigger but contained */
.brand-logo{
  height: 74px !important;
  width:auto !important;
  max-height: 74px !important;
  object-fit:contain;
  display:block;
  background:transparent;
  border:none;
  border-radius:0;
  padding:0;
  box-shadow:none;
}

.nav,
.nav-menu,
.nav-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap;}
.nav-actions{gap:8px;}
.nav-link{
  color: var(--text);
  min-height: var(--public-button-height);
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px !important;
  border-radius:8px;
  font-weight:800;
  font-size:13px !important;
  line-height:1.2 !important;
}
.nav-link:hover{
  color: var(--blue);
  background: rgba(27,163,232,.10);
}
.nav-cta{
  background: var(--staff-action-blue);
  color:#fff !important;
  min-width: 124px;
  padding-inline:17px !important;
}
.nav-cta:hover{
  background: var(--staff-action-blue);
  color:#fff;
}

/* Mobile nav (public site) */
.nav-toggle{
  display:none;
  width: var(--public-button-height);
  height: var(--public-button-height);
  align-items:center;
  justify-content:center;
  border:1px solid var(--public-border);
  background:#fff;
  border-radius:8px;
  padding:0;
  cursor:pointer;
  font-size:18px;
}

@media (min-width: 901px){
  .nav-toggle{ display:none !important; }
  .nav,
  .nav-menu,
  .nav-actions{ display:flex !important; }
}

@media (max-width: 900px){
  .topbar-inner{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    height:74px;
    flex-wrap:nowrap;
  }
  .brand-logo{height:58px!important;max-height:58px!important}
  .nav{ margin-left:auto; gap:8px; }
  .nav-toggle{ order:2; display:inline-flex; }
  .nav-actions{ order:1; display:flex; gap:6px; }
  .nav-actions .nav-link{ width:auto; white-space:nowrap; }
  .nav-menu{
    position:absolute;
    left:16px;
    right:16px;
    top:calc(100% + 8px);
    width:auto;
    order:3;
    flex-direction:column;
    align-items:flex-start;
    gap:8px;
    padding:12px;
    margin-top:0;
    background:#fff;
    border:1px solid var(--border);
    border-radius:8px;
    box-shadow:0 18px 44px rgba(15,23,42,.12);
    display:none;
  }
  .nav-link{
    width:100%;
  }
  .nav-actions .nav-link{ padding:8px 10px !important; font-size:12px !important; }
  .nav-menu.nav-open{ display:flex; }
}

@media (max-width: 480px){
  :root{ --public-shell-width: calc(100% - 24px); --public-page-padding: 18px; --public-page-gap: 18px; }
  .topbar-inner{height:68px}
  .brand-logo{height:52px!important;max-height:52px!important}
  .nav-actions .nav-link{min-width:0;padding-inline:10px!important}
}

/* HERO (Banner Image Only + Fully Visible) */
.hero{
  padding: 56px 0 36px;

  /* ✅ show FULL image (no crop) */
  background: url("/static/images/banner.jpg") center/contain no-repeat;

  /* ✅ give space so you don't see blank if image is smaller */
  background-color: #0BA3E8;
}

/* optional: make hero area taller so the whole banner shows nicely */
@media (min-width: 900px){
  .hero{
    padding: 70px 0 60px;
    min-height: 320px;
    display:flex;
    align-items:center;
  }
}

.hero-inner{text-align:center;}
.hero h1{
  margin:0 0 10px;
  font-size:clamp(22px, 2.8vw, 34px);
  letter-spacing:-.5px;
}
.hero p{
  margin:0 auto 14px;
  max-width:75ch;
  color:var(--muted);
  font-size:15px;
}
.hero-actions{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:14px;
}

.hero-banner{
  background-image: var(--hero-banner, url("/static/images/banner.jpg"));
  background-position: var(--hero-focal, center);
  background-size: contain;
  background-repeat: no-repeat;
}

.hero-banner-configured{
  background-size: cover;
}

@media (max-width: 720px){
  .hero-banner{
    background-image: var(--hero-mobile-banner, var(--hero-banner, url("/static/images/banner.jpg")));
  }
}

.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height: var(--public-button-height);
  padding:11px 18px;
  border-radius:8px;
  border:1px solid transparent;
  font-weight:800;
  font-size:14px;
  line-height:1.2;
  cursor:pointer;
  text-align:center;
}

.btn-primary{background:var(--blue);color:#fff;}
.btn-primary:hover{background:var(--blue2);}

.btn-secondary{
  background: rgba(27,163,232,.10);
  color: var(--text);
  border: 1px solid rgba(27,163,232,.18);
}
.btn-secondary:hover{
  background: rgba(27,163,232,.16);
}

.public-success-shell{
  flex:1;
  min-height:calc(100vh - 170px);
  padding:24px 16px 38px;
  background:#f6f9fc;
  color:#102033;
}

.public-success-page{
  width:min(100%,var(--public-max-width,1180px));
  margin:0 auto;
}

.public-success-hero{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:150px minmax(0,1fr) minmax(220px,.72fr);
  align-items:center;
  gap:24px;
  border:1px solid #cdebd8;
  border-radius:22px;
  background:linear-gradient(135deg,#f1fbf5 0%,#fff 52%,#effaf4 100%);
  box-shadow:0 18px 45px rgba(15,23,42,.08);
  padding:30px 34px;
}

.public-success-icon-wrap{
  position:relative;
  width:120px;
  height:120px;
  display:grid;
  place-items:center;
}

.public-success-check{
  width:76px;
  height:76px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#16a34a,#047857);
  color:#fff;
  font-size:36px;
  box-shadow:0 16px 32px rgba(22,163,74,.25);
}

.public-success-sparkle{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#86efac;
  opacity:.85;
}

.public-success-sparkle.is-one{left:16px;top:26px}
.public-success-sparkle.is-two{right:18px;top:42px;width:5px;height:5px}
.public-success-sparkle.is-three{left:28px;bottom:30px;width:5px;height:5px}
.public-success-sparkle.is-four{right:30px;bottom:18px}

.public-success-main h1{
  margin:0;
  color:#0f172a;
  font-size:clamp(30px,4vw,42px);
  line-height:1.05;
  letter-spacing:0;
}

.public-success-main p{
  margin:9px 0 0;
  color:#475569;
  font-size:16px;
  line-height:1.45;
}

.public-success-reference{
  border-left:3px solid #bbf7d0;
  padding-left:18px;
}

.public-success-reference span{
  display:block;
  color:#1f3b57;
  font-size:13px;
  font-weight:900;
}

.public-success-reference strong{
  display:block;
  margin:7px 0 0;
  color:#15803d;
  font-size:clamp(26px,3.6vw,34px);
  font-weight:1000;
  line-height:1;
  overflow-wrap:anywhere;
}

.public-success-reference p{
  margin:7px 0 0;
  color:#0f172a;
  font-size:15px;
  font-weight:900;
}

.public-success-notice{
  display:flex;
  align-items:center;
  gap:10px;
  margin:18px 0 0;
  padding:12px 14px;
  border:1px solid #bbf7d0;
  border-radius:12px;
  background:#f0fdf4;
  color:#166534;
  font-size:13px;
  font-weight:900;
}

.public-success-notice.info{
  border-color:#bae6fd;
  background:#f0f9ff;
  color:#075985;
}

.public-detail-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:18px;
  margin-top:18px;
}

.public-detail-card,
.public-receipt-card{
  border:1px solid #dbe7ef;
  border-radius:16px;
  background:#fff;
  box-shadow:0 12px 28px rgba(15,23,42,.06);
  padding:18px;
}

.public-detail-card.is-wide,
.public-receipt-card.is-wide{
  grid-column:1/-1;
}

.public-detail-card h2,
.public-receipt-card h2{
  display:flex;
  align-items:center;
  gap:10px;
  margin:0 0 12px;
  color:#0f172a;
  font-size:18px;
  letter-spacing:0;
}

.public-detail-card h2 i,
.public-receipt-card h2 i{
  width:28px;
  height:28px;
  display:inline-grid;
  place-items:center;
  border-radius:9px;
  background:#f0fdf4;
  color:#15803d;
  font-size:14px;
}

.public-detail-row{
  display:grid;
  grid-template-columns:minmax(180px,.9fr) minmax(0,1fr);
  align-items:center;
  gap:18px;
  padding:11px 0;
  border-top:1px solid #eef4f7;
}

.public-detail-row:first-of-type{border-top:0}

.public-detail-label{
  display:inline-flex;
  align-items:center;
  gap:12px;
  color:#475569;
  font-size:13px;
  font-weight:900;
}

.public-detail-label i{
  width:22px;
  color:#0BA3E8;
  font-size:16px;
  text-align:center;
}

.public-detail-row strong{
  color:#0f172a;
  font-size:14px;
  font-weight:900;
  text-align:right;
  overflow-wrap:anywhere;
}

.public-status-badge{
  display:inline-flex;
  width:max-content;
  align-items:center;
  border-radius:999px;
  padding:5px 10px;
  background:#eaf6ff;
  color:#0369a1;
  border:1px solid #bae6fd;
  font-size:12px;
  font-weight:1000;
}

.public-status-badge.ok{
  background:#dcfce7;
  color:#15803d;
  border-color:#86efac;
}

.public-status-badge.warn{
  background:#fff7ed;
  color:#c2410c;
  border-color:#fed7aa;
}

.public-status-badge.bad{
  background:#fef2f2;
  color:#b91c1c;
  border-color:#fecaca;
}

.public-reference-wrap{
  display:inline-flex;
  flex-direction:column;
  align-items:flex-end;
  gap:6px;
}

.public-action-row{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-top:18px;
}

.public-action-row .btn{
  min-height:42px;
  min-width:210px;
  justify-content:center;
  text-decoration:none;
  border-radius:8px;
}

.public-action-row .btn-outline{
  border:2px solid var(--footerBlue,var(--blue,#0BA3E8));
  background:#fff;
  color:var(--footerBlue,var(--blue,#0BA3E8));
  font-weight:900;
  box-shadow:0 10px 24px rgba(11,163,232,.08);
}

.public-action-row .btn-outline:hover{
  background:#eaf7fe;
  color:var(--footerBlue,var(--blue,#0BA3E8));
}

.public-action-row .btn i{margin-right:8px}

.public-qr-wrap{
  display:grid;
  place-items:center;
  gap:10px;
  padding-top:4px;
}

.public-qr-wrap img{
  max-width:240px;
  width:100%;
  border:1px solid var(--public-border,#d7e3f3);
  border-radius:12px;
  padding:10px;
  background:#fff;
}

@media (max-width:900px){
  .public-success-hero{grid-template-columns:120px minmax(0,1fr)}
  .public-success-reference{grid-column:1/-1}
  .public-detail-grid{grid-template-columns:1fr}
}

@media (max-width:540px){
  .public-success-shell{padding:20px 12px 30px}
  .public-success-hero{grid-template-columns:1fr;text-align:center;padding:22px 18px;border-radius:16px}
  .public-success-icon-wrap{width:110px;height:110px;margin:0 auto}
  .public-success-reference{border-left:0;border-top:3px solid #bbf7d0;padding:14px 0 0}
  .public-detail-card,.public-receipt-card{border-radius:14px}
  .public-detail-row{grid-template-columns:1fr;gap:5px}
  .public-detail-row strong,.public-reference-wrap{text-align:left;align-items:flex-start}
  .public-action-row{display:grid;grid-template-columns:1fr}
  .public-action-row .btn{width:100%;min-width:0}
}

.public-event-page{
  --event-accent: #16A34A;
}

.public-event-page a:not(.btn){
  color: var(--event-accent);
}

.public-event-hero{
  --event-focal: 50% 50%;
  position: relative;
  min-height: 520px;
  display: flex;
  align-items: center;
  isolation: isolate;
  background: linear-gradient(135deg, #dbeafe, #f6f9ff);
  background-image: var(--event-hero-image);
  background-position: var(--event-focal);
  background-size: cover;
  color: #fff;
}

.public-event-hero::before{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(2,12,28,.50);
}

.public-event-overlay-none::before{ background: transparent; }
.public-event-overlay-light::before{ background: rgba(255,255,255,.18); }
.public-event-overlay-medium_dark::before{ background: rgba(2,12,28,.50); }
.public-event-overlay-dark::before{ background: rgba(2,12,28,.72); }

.public-event-hero-empty{
  color: #0f172a;
  background-image: linear-gradient(135deg, #e8f5ff, #f8fbff);
}

.public-event-hero-empty::before{
  background: rgba(255,255,255,.18);
}

.public-event-hero-inner{
  display: grid;
  gap: 14px;
  max-width: 920px;
}

.public-event-hero-left .public-event-hero-inner{
  justify-items: start;
  text-align: left;
}

.public-event-hero-center .public-event-hero-inner{
  justify-items: center;
  text-align: center;
}

.public-event-hero-right .public-event-hero-inner{
  justify-items: end;
  text-align: right;
}

.public-event-preview-badge{
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: 4px 10px;
  border-radius: 999px;
  background: rgba(255,255,255,.88);
  color: var(--event-accent);
  font-weight: 900;
  font-size: 12px;
}

.public-event-hero p,
.public-event-hero h1{
  margin: 0;
}

.public-event-hero p{
  font-size: 14px;
  font-weight: 900;
  text-transform: uppercase;
}

.public-event-hero h1{
  max-width: 12ch;
  font-size: clamp(42px, 8vw, 86px);
  line-height: .95;
  letter-spacing: 0;
}

.public-event-hero-meta{
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  font-weight: 900;
}

.public-event-actions{
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 8px;
}

.public-event-primary{
  background: var(--event-accent);
  color: #fff;
}

.public-event-outline{
  border-color: var(--event-accent);
  background: #fff;
  color: var(--event-accent);
}

.public-event-section{
  background: #fff;
}

.public-event-grid{
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 360px);
  gap: 24px;
  align-items: start;
}

.public-event-card{
  display: grid;
  gap: 18px;
  padding: 24px;
  border: 1px solid var(--border);
  border-top: 4px solid var(--event-accent);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 12px 28px rgba(15,23,42,.06);
}

.public-event-card h2{
  margin: 0;
  color: var(--event-accent);
  font-size: 24px;
}

.public-event-detail-list{
  display: grid;
  gap: 14px;
}

.public-event-detail-list div{
  display: grid;
  gap: 2px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--border);
}

.public-event-detail-list div:last-child{
  border-bottom: 0;
  padding-bottom: 0;
}

.public-event-detail-list span,
.public-event-detail-list small{
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

.public-event-detail-list span{
  color: var(--event-accent);
}

.public-event-poster-card img{
  width: 100%;
  border-radius: 10px;
  object-fit: cover;
}

.public-event-empty-media{
  display: grid;
  place-items: center;
  gap: 6px;
  min-height: 260px;
  padding: 20px;
  border: 1px dashed #b8d2ea;
  border-radius: 10px;
  background: #f8fbff;
  color: #0f2747;
  text-align: center;
}

.public-event-empty-media span{
  color: var(--muted);
  font-size: 13px;
  font-weight: 800;
}

@media (max-width: 720px){
  .public-event-hero{
    min-height: 580px;
    background-image: var(--event-mobile-hero-image, var(--event-hero-image));
  }

  .public-event-hero-inner,
  .public-event-hero-left .public-event-hero-inner,
  .public-event-hero-right .public-event-hero-inner{
    justify-items: center;
    text-align: center;
  }

  .public-event-hero h1{
    max-width: 10ch;
  }

  .public-event-grid{
    grid-template-columns: 1fr;
  }
}

/* SECTION */
.section{ padding: 20px 0 34px; }

/* ICON CARDS */
.cards{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:20px;
}
@media (min-width: 900px){
  .cards{grid-template-columns: repeat(3, 1fr);}
}
.card{
  background:var(--card);
  border:var(--public-card-border);
  border-radius:var(--public-card-radius);
  padding:16px;
  box-shadow:var(--public-card-shadow);
}
.icon-top{
  width:44px;
  height:44px;
  border-radius:12px;
  background: rgba(27,163,232,.12);
  display:flex;
  align-items:center;
  justify-content:center;
  margin-bottom:10px;
}
.icon-top svg{
  width:21px;
  height:21px;
  fill: var(--blue);
}
.card h3{margin:0 0 8px;font-size:16px;}
.card p{margin:0;color:var(--muted);font-size:14px;}

/* ABOUT + MAP */
.about-map{
  display:grid;
  grid-template-columns: 1fr;
  gap:16px;
  margin-top:18px;
  align-items:stretch;
}
@media (min-width: 900px){
  .about-map{
    grid-template-columns: 1fr 1.2fr;
  }
}
.about-card{
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(2,6,23,.05);
}
.map-wrap{
  margin-top:0;
  background:#fff;
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  box-shadow:0 10px 30px rgba(2,6,23,.05);
}
.about-card,
.map-wrap{
  height:100%;
  display:flex;
  flex-direction:column;
}
.map-frame{
  flex:1;
  min-height:320px;
  position:relative;
  overflow:hidden;
  border-radius:12px;
  background:#eef2ff;
  border:1px solid var(--border);
}
.map-frame iframe{
  position:absolute;
  top:0;left:0;
  width:100%;
  height:100%;
  border:0;
  filter: grayscale(0.05);
}
.route-map-fallback.is-hidden{
  opacity: 0;
  pointer-events: none;
}
.route-card-preview{
  margin-top: 10px;
  min-height: 160px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background:
    radial-gradient(circle at 18% 16%, rgba(11,163,232,.08), transparent 42%),
    radial-gradient(circle at 86% 84%, rgba(11,79,191,.06), transparent 46%),
    linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
  overflow: hidden;
  position: relative;
}
.route-card-preview .route-vector-shell{
  height: 100%;
  padding: 6px;
}
.route-card-preview .route-vector-svg{
  border-radius: 8px;
}
.route-card-preview .route-line{
  stroke-width: 10;
}
.route-card-preview .route-point{
  stroke-width: 2;
}
.route-card-preview .route-point-start{
  stroke-width: 3;
}
.route-card-preview .route-point-label{
  font-size: 11px;
  stroke-width: 3;
}
.route-card-preview .route-point-label-start{
  font-size: 12px;
  stroke-width: 4;
}
.route-vector-map{
  position:absolute;
  inset:0;
  z-index: 2;
  display:none;
  background:
    radial-gradient(circle at 18% 16%, rgba(11,163,232,.12), transparent 42%),
    radial-gradient(circle at 86% 84%, rgba(11,79,191,.10), transparent 46%),
    linear-gradient(180deg, #f8fbff 0%, #eef5fb 100%);
}
.route-vector-map.is-ready{ display:block; }
.route-vector-shell{
  width:100%;
  height:100%;
  padding: 8px;
}
.route-vector-svg{
  width:100%;
  height:100%;
  display:block;
  border-radius: 10px;
  background: transparent;
}
.route-bg{
  fill: rgba(255,255,255,.72);
}
.route-grid-line{
  stroke: rgba(100,116,139,.14);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
.route-line{
  fill: none;
  stroke: #0ba3e8;
  stroke-width: 14;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-opacity: .95;
  vector-effect: non-scaling-stroke;
  filter: drop-shadow(0 6px 12px rgba(11,163,232,.22));
}
.route-point{
  fill: #0BA3E8;
  stroke: #ffffff;
  stroke-width: 3;
  vector-effect: non-scaling-stroke;
}
.route-point-start{
  fill: #16a34a;
  stroke: #ffffff;
  stroke-width: 4;
}
.route-point-group:focus-visible circle,
.route-point-group:hover circle{
  stroke: #111827;
  stroke-width: 3;
}
.route-point-label{
  font-size: 14px;
  font-weight: 700;
  fill: #0f172a;
  paint-order: stroke;
  stroke: rgba(255,255,255,.98);
  stroke-width: 4;
  stroke-linejoin: round;
  letter-spacing: .1px;
}
.route-point-label-start{
  font-size: 16px;
  font-weight: 800;
  stroke-width: 5;
}

/* FOOTER */
.footer{
  margin-top:0;
  background: var(--footerBlue);
  color:#fff;
  padding: 16px 0;
}

/* you can keep these even if footer-inner removed */
.footer-inner{
  display:grid;
  grid-template-columns: 1fr;
  gap:18px;
}
@media(min-width: 900px){
  .footer-inner{grid-template-columns: 1.2fr 1fr 1fr;}
}
.footer-title{font-weight:800;margin-bottom:6px;}
.footer-head{font-weight:800;margin-bottom:8px;}
.footer-muted{color:rgba(255,255,255,.90);font-size:14px;}
.footer-link{display:block;color:rgba(255,255,255,.92);font-size:14px;margin:6px 0;}
.footer-link:hover{text-decoration:underline;}

.footer-bottom{
  padding-top: 0;
  border-top: none;
  color: rgba(255,255,255,.95);
  font-size: 13px;
  text-align: center;
}

/* Social icons */
.footer-socials{
  display:flex;
  gap:12px;
  margin-top:12px;
  flex-wrap:wrap;
}
.social{
  width:34px;
  height:34px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.18);
  transition:.2s ease;
  font-size:16px;
}
.social:hover{
  transform:translateY(-2px);
  background:rgba(255,255,255,.18);
}
.social.x i{ color:#ffffff; }
.social.facebook i{ color:#0BA3E8; }
.social.linkedin i{ color:#0BA3E8; }
.social.youtube i{ color:#FF0000; }
.social.instagram i{
  background: linear-gradient(45deg,#F58529,#DD2A7B,#8134AF,#515BD4);
  -webkit-background-clip:text;
  -webkit-text-fill-color:transparent;
}
.social.tiktok i{ color:#ffffff; }

/* Mobile collapsible footer */
.footer-toggle{ display:none; }

@media (max-width: 768px){
  .footer{
    position:static;
    padding:10px 0 8px;
  }

  .footer-inner{
    display:none;
    gap:12px;
    margin-top:10px;
  }

  .footer-toggle{
    display:flex;
    width:100%;
    align-items:center;
    justify-content:space-between;
    background:rgba(255,255,255,.08);
    border:1px solid rgba(255,255,255,.18);
    color:#fff;
    padding:10px 12px;
    border-radius:12px;
    font-weight:800;
    cursor:pointer;
  }

  .footer-toggle-icon{
    opacity:.9;
    transition:transform .2s ease;
  }

  .footer.is-open .footer-inner{
    display:grid;
    grid-template-columns:1fr;
  }

  .footer.is-open .footer-toggle-icon{
    transform:rotate(180deg);
  }

  .footer-bottom{
    margin-top:10px;
    padding-top:8px;
    font-size:12px;
  }
  main{ padding-bottom:0; }
}

/* ===== Shirt Selection Layout (Jumia-style) ===== */
.shirt-layout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 32px;
  align-items: center;
}

.shirt-form { padding: 24px; }

.shirt-preview {
  display: flex;
  justify-content: center;
  align-items: center;
}

.shirt-preview img {
  max-width: 100%;
  max-height: 360px;
  object-fit: contain;
}

.shirt-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
}

.shirt-table th {
  text-align: left;
  padding-bottom: 8px;
}

.shirt-table td { padding: 10px 0; }

.qty-input { width: 90px; }

@media (max-width: 768px) {
  .shirt-layout { grid-template-columns: 1fr; }
  .shirt-preview { margin-top: 24px; }
}

/* Order Summary */
.order-summary-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 32px;
  align-items: start;
}

.order-summary-card h2 { margin-bottom: 6px; }

.summary-block { margin-top: 16px; }

.summary-row {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  font-size: 14px;
}

.summary-divider {
  margin: 20px 0;
  border: none;
  border-top: 1px solid var(--border);
}

.summary-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 12px;
}

.summary-table th,
.summary-table td {
  padding: 10px 0;
  border-bottom: 1px solid var(--border);
  font-size: 14px;
}

.full-width { width: 100%; }

.order-summary-side { display: flex; align-items: center; }

.summary-highlight {
  background: linear-gradient(
    135deg,
    rgba(27,163,232,0.10),
    rgba(27,163,232,0.03)
  );
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 24px;
}

.summary-highlight h3 { margin-top: 0; }

.summary-points {
  margin-top: 12px;
  padding-left: 18px;
}

.summary-points li {
  margin-bottom: 6px;
  font-size: 14px;
}

@media (max-width: 768px) {
  .order-summary-layout { grid-template-columns: 1fr; }
}

/* Totals row */
.order-total {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  padding: 10px 0;
  border-top: 1px dashed var(--border);
}
.order-total strong { font-size: 17px; }

button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* =========================
   PROFESSIONAL FORM UI
   ========================= */
.page-title{
  margin: 0 0 6px;
  font-size: clamp(20px, 2.2vw, 28px);
  letter-spacing: -0.3px;
}

.page-subtitle{
  margin: 0;
  color: var(--muted);
  max-width: 70ch;
  font-size: 14px;
}

.form-wrap{
  margin-top: 18px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}

@media (min-width: 900px){
  .form-wrap{
    grid-template-columns: 1.2fr .8fr;
    align-items: start;
  }
}

.form-card{ padding: 22px; }

.form-grid{
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
  margin-top: 14px;
}

@media (min-width: 720px){
  .form-grid{
    grid-template-columns: 1fr 1fr;
    gap: 14px 16px;
  }
}

.form-field{
  display:flex;
  flex-direction:column;
  gap: 6px;
}

.form-label{
  font-weight: 800;
  font-size: 13px;
  color: var(--text);
}

.form-hint{
  font-size: 12px;
  color: var(--muted);
  margin-top: 4px;
}

.form-input,
.form-select,
.public-form-control,
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="password"],
select,
textarea{
  width: 100%;
  min-height: var(--public-control-height);
  border-radius: 8px;
  border: 1px solid var(--public-border);
  padding: 10px 12px;
  outline: none;
  background: #fff;
  color: var(--public-text);
  font-size: 14px;
  font-family: inherit;
  transition: border-color .15s ease, box-shadow .15s ease;
  box-sizing: border-box;
  appearance: none;
}

.form-input:focus,
.form-select:focus,
.public-form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="password"]:focus,
select:focus,
textarea:focus{
  border-color: rgba(27,163,232,.7);
  box-shadow: var(--public-focus-ring);
}

textarea{height:auto;min-height:96px;resize:vertical}
select{
  padding-right:36px;
  background-image:linear-gradient(45deg, transparent 50%, #64748b 50%),linear-gradient(135deg, #64748b 50%, transparent 50%);
  background-position:calc(100% - 18px) 50%,calc(100% - 13px) 50%;
  background-size:5px 5px,5px 5px;
  background-repeat:no-repeat;
}

input[type="checkbox"],
input[type="radio"]{
  width:18px;
  height:18px;
  min-height:0;
  padding:0;
  border:1px solid #94a3b8;
  border-radius:5px;
  appearance:none;
  display:inline-grid;
  place-content:center;
  vertical-align:middle;
}
input[type="radio"]{border-radius:50%}
input[type="checkbox"]:checked,
input[type="radio"]:checked{border-color:var(--blue);background:var(--blue)}
input[type="checkbox"]:checked::after{content:"";width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);margin-bottom:2px}
input[type="radio"]:checked::after{content:"";width:8px;height:8px;border-radius:50%;background:#fff}
input[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible{outline:0;box-shadow:var(--public-focus-ring)}

.form-input::placeholder{ color: rgba(71,85,105,.75); }

.form-actions{
  display:flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

.alert{
  border: 1px solid var(--border);
  background: #fff;
  border-radius: 14px;
  padding: 12px 14px;
  font-size: 14px;
}

.alert-error{
  border-color: rgba(239,68,68,.35);
  background: rgba(239,68,68,.06);
}

.alert-success{
  border-color: rgba(34,197,94,.35);
  background: rgba(34,197,94,.08);
}

.alert-info{
  border-color: rgba(27,163,232,.25);
  background: rgba(27,163,232,.08);
}

.side-card{ padding: 20px; }

.side-title{
  margin: 0 0 8px;
  font-size: 16px;
}

.side-list{
  margin: 10px 0 0;
  padding-left: 18px;
  color: var(--muted);
  font-size: 14px;
}
.side-list li{ margin-bottom: 6px; }

/* Scoped portal UI so it doesn't break public pages */
.portal {
  --bg: #f6f9fc;
  --card: #ffffff;
  --text: #0f172a;
  --muted: #64748b;
  --blue: #0ba3e8;
  --blue2: #0BA3E8;
  --border: #e2e8f0;
  --green: #16a34a;
  --red: #ef4444;
  --amber: #f59e0b;
  background: var(--bg);
  min-height: 100vh;
  color: var(--text);
  font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial;
}

.portal a { color: inherit; text-decoration: none; }
.portal .layout { display: grid; grid-template-columns: 260px 1fr; min-height: 100vh; }
.portal .sidebar {
  background: linear-gradient(180deg, #0BA3E8 0%, #0ba3e8 100%);
  color: #fff;
  padding: 18px 14px;
  position: sticky;
  top: 0;
  height: 100vh;
}
.portal .brand {
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.15);
}
.portal .brand img { width: 36px; height: 36px; object-fit: contain; background:#fff; border-radius: 10px; padding: 4px;}
.portal .brand strong { font-size: 13px; letter-spacing: .8px; text-transform: uppercase; }
.portal .nav { margin-top: 16px; display: grid; gap: 6px; }
.portal .nav a {
  display:flex; align-items:center; gap:10px;
  padding: 10px 12px;
  border-radius: 14px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.12);
  transition: transform .12s ease, background .12s ease;
  font-weight: 700;
  font-size: 13px;
}
.portal .nav a:hover { transform: translateY(-1px); background: rgba(255,255,255,0.13); }
.portal .nav .muted { opacity: .9; font-weight: 600; }

.portal .main { padding: 18px 20px 28px; }
.portal .topbar {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 12px 14px;
  display:flex;
  justify-content: space-between;
  align-items:center;
  gap: 12px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.portal .topbar h1 { margin:0; font-size: 16px; letter-spacing:.2px; }
.portal .topbar .crumb { font-size: 12px; color: var(--muted); margin-top: 2px; }
.portal .userbox { display:flex; align-items:center; gap:10px; }
.portal .avatar {
  width: 38px; height: 38px;
  border-radius: 14px;
  background: #eaf6ff;
  border: 1px solid #cfeaff;
  display:flex; align-items:center; justify-content:center;
  font-weight: 900; color: #0BA3E8;
}
.portal .userbox .meta { line-height: 1.1; }
.portal .userbox .meta strong { display:block; font-size: 13px; }
.portal .userbox .meta span { display:block; font-size: 11px; color: var(--muted); }

.portal .btn {
  display:inline-flex; align-items:center; justify-content:center;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: #fff;
  font-weight: 800;
  font-size: 12px;
  cursor:pointer;
}
.portal .btn-primary { background: var(--blue); border-color: #0BA3E8; color:#fff; }
.portal .btn-primary:hover { background: #0BA3E8; }
.portal .btn-ghost { background: transparent; color:#fff; border-color: rgba(255,255,255,0.22); }
.portal .btn-danger { background: #fff; border-color: #fecaca; color: #991b1b; }

.portal .grid { display:grid; gap: 14px; margin-top: 14px; }
.portal .grid.kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px){ .portal .layout { grid-template-columns: 1fr; } .portal .sidebar{ height:auto; position: relative; } .portal .grid.kpis { grid-template-columns: repeat(2, 1fr);} }
@media (max-width: 650px){ .portal .grid.kpis { grid-template-columns: 1fr;} }

.portal .card {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 14px;
  box-shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
}
.portal .card h2 { margin:0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .9px; }
.portal .kpi { display:flex; align-items:flex-end; justify-content: space-between; gap: 10px; }
.portal .kpi strong { font-size: 22px; }
.portal .kpi span { color: var(--muted); font-size: 12px; font-weight: 700; }
.portal .badge {
  display:inline-flex; align-items:center; gap: 6px;
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 900;
  border: 1px solid var(--border);
}
.portal .badge-green { background: #ecfdf5; color: #065f46; border-color: #a7f3d0; }
.portal .badge-red { background: #fef2f2; color: #991b1b; border-color: #fecaca; }
.portal .badge-amber { background: #fffbeb; color:#92400e; border-color:#fde68a; }
.portal .badge-blue { background: #eff6ff; color:#0BA3E8; border-color:#bfdbfe; }

.portal table { width: 100%; border-collapse: collapse; }
.portal th, .portal td { padding: 10px; border-bottom: 1px solid var(--border); font-size: 12px; text-align:left; }
.portal th { color: var(--muted); text-transform: uppercase; font-size: 11px; letter-spacing: .8px; }
.portal .row-actions { display:flex; gap: 8px; align-items:center; }

.portal .form-row { display:grid; gap: 10px; grid-template-columns: 1fr 1fr; }
.portal .form-row-3 { display:grid; gap: 10px; grid-template-columns: 1fr 1fr 1fr; }
.portal .form-input {
  width: 100%;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  outline: none;
  font-weight: 700;
  font-size: 12px;
  background: #fff;
}
.portal .form-input:focus { border-color: #86d7ff; box-shadow: 0 0 0 4px rgba(11,163,232,0.12); }
.portal .help { font-size: 12px; color: var(--muted); margin-top: 8px; }
.countdown-box{
  text-align:center;
  margin-top:8px;
}

.countdown-head{
  font-size:12px;
  letter-spacing:1px;
  text-transform:uppercase;
  color:#888;
}

.countdown-value{
  display:flex;
  justify-content:center;
  gap:12px;
  font-size:28px;
  font-weight:700;
}

.countdown-value span{
  min-width:40px;
}

.countdown-meta{
  display:flex;
  justify-content:center;
  gap:28px;
  font-size:11px;
  color:#999;
}


/* =========================
   LANDING ANIMATIONS
   ========================= */

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.anim-hero { opacity: 0; animation: fadeUp .7s ease forwards; }

.anim-card { opacity: 0; animation: fadeUp .55s ease forwards; }
.anim-delay-1 { animation-delay: .10s; }
.anim-delay-2 { animation-delay: .20s; }
.anim-delay-3 { animation-delay: .30s; }

/* Hover lift for cards/sections */
.hover-lift{
  transition: transform .2s ease, box-shadow .2s ease;
}
.hover-lift:hover{
  transform: translateY(-4px);
  box-shadow: 0 14px 30px rgba(15,23,42,.10);
}

/* Title underline sweep */
.title-sweep{ position: relative; display: inline-block; }
.title-sweep::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  height:3px;
  width:0%;
  background: var(--blue);
  border-radius:999px;
  animation: lineGrow .7s ease forwards;
}
@keyframes lineGrow { to { width:100%; } }

/* Countdown digits: stable width + flip */
.countdown-value .count-num{
  min-width: 44px;
  display:inline-flex;
  justify-content:center;
  font-variant-numeric: tabular-nums;
  will-change: transform, opacity;
}

@keyframes flipIn{
  0%   { transform: translateY(6px); opacity: .25; }
  100% { transform: translateY(0);   opacity: 1; }
}
.countdown-value .count-num.flip{
  animation: flipIn .18s ease;
}

/* Map skeleton shimmer */
.map-frame.is-loading iframe{ opacity: 0; }
.map-skeleton{
  position:absolute;
  inset:0;
  background: linear-gradient(90deg, #eef2ff 25%, #f8fafc 37%, #eef2ff 63%);
  background-size: 400% 100%;
  animation: shimmer 1.2s ease infinite;
}
@keyframes shimmer{
  0% { background-position: 100% 0; }
  100% { background-position: 0 0; }
}
.map-frame:not(.is-loading) .map-skeleton{ display:none; }
.map-frame iframe{
  transition: opacity .35s ease;
  opacity: 1;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce){
  .anim-hero, .anim-card, .title-sweep::after, .countdown-value .count-num.flip, .map-skeleton{
    animation: none !important;
  }
  .hover-lift{ transition: none !important; }
}

/* Align table columns neatly */
.staff-table{
  width: 100%;
  table-layout: fixed;
}

.staff-table th,
.staff-table td{
  text-align: left;
  vertical-align: middle;
}

/* Stop email from pushing layout */
.staff-table .email-cell{
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Actions: keep in one clean row */
.action-cell{
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  flex-wrap: nowrap;
}

.action-cell form{
  margin: 0;       /* important: prevents misalignment */
}

/* Optional: smaller consistent buttons */
.btn-sm{
  padding: 8px 12px;
  border-radius: 10px;
}

/* Remove button red */
.btn-danger{
  border: 1px solid #ef4444 !important;
  background: #fee2e2 !important;
  color: #b91c1c !important;
}

.btn-danger:hover{
  background: #fecaca !important;
}