/* Transafrik — Nuit Royale navy + gold. Deliberately NOT Eburni teal:
   a stranger's real operator site, as the plug-in test intends. */
:root {
  --navy: #1e3a8a; --navy-dark: #12275e; --gold: #d9a514; --ink: #1c2430;
  --paper: #f7f5ef; --card: #ffffff; --line: #e3ddcd; --muted: #6c7280;
  --ok: #177245; --bad: #b3261e;
}
* { box-sizing: border-box; }
body { margin: 0; font-family: 'Segoe UI', system-ui, -apple-system, Arial, sans-serif; color: var(--ink); background: var(--paper); }
a { color: var(--navy); }
.muted { color: var(--muted); }

.site-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 1rem; padding: .55rem 1rem; background: var(--navy-dark); color: #fff; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: .6rem; text-decoration: none; color: #fff; }
.brand-logo { width: 46px; height: 46px; object-fit: contain; border-radius: 8px; background: #fff; }
.brand-lockup { height: 58px; width: auto; display: block; }
.foot-lockup { height: 74px; margin-bottom: .4rem; }
.tabs { display: flex; gap: .5rem; margin: 1rem 0 .4rem; }
.tab-btn { border: 1.5px solid var(--navy); background: #fff; color: var(--navy); border-radius: 999px; padding: .5rem 1.2rem; font-weight: 800; cursor: pointer; font-size: 1rem; }
.tab-btn.on { background: var(--navy); color: #fff; }
.site-foot a { color: #f3d67b; }
.brand-name { font-weight: 800; letter-spacing: .22em; font-size: 1.05rem; }
.main-nav { display: flex; gap: .9rem; flex-wrap: wrap; margin-left: auto; }
.main-nav a { color: #e8e4d8; text-decoration: none; font-size: .92rem; }
.main-nav a:hover { color: var(--gold); }
.lang-toggle { background: var(--gold); color: #221a00; border: 0; border-radius: 999px; padding: .35rem .8rem; font-weight: 700; cursor: pointer; }

.hero { background: linear-gradient(rgba(10, 22, 54, .62), rgba(10, 22, 54, .62)), url('assets/cities/hero.webp') center/cover; color: #fff; padding: 2.6rem 1rem 3rem; text-align: center; }
.hero .kicker { color: var(--gold); text-transform: uppercase; letter-spacing: .18em; font-size: .8rem; font-weight: 700; }
.hero h1 { font-size: clamp(1.8rem, 5vw, 3rem); margin: .4rem 0; }
.hero p { max-width: 640px; margin: 0 auto; color: #e8e4d8; }
.wrap { max-width: 1060px; margin: 0 auto; padding: 1.2rem 1rem 2.4rem; }
.hero .wrap { padding-bottom: 0; }
.box-holder { max-width: 860px; margin: -1.4rem auto 0; position: relative; z-index: 5; padding: 0 1rem; }

h2.sec { margin: 2rem 0 .8rem; font-size: 1.35rem; color: var(--navy-dark); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 1rem; }
.card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; }
.card img { width: 100%; height: 140px; object-fit: cover; display: block; }
.card .pad { padding: .8rem .95rem 1rem; }
.card h3 { margin: .1rem 0 .35rem; font-size: 1.02rem; }
.card p { margin: .2rem 0; font-size: .9rem; }
.why { display: grid; grid-template-columns: repeat(auto-fit, minmin(220px, 1fr)); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; }
.why .card { padding: 1rem; }
.price { color: var(--navy); font-weight: 800; }
.btn { display: inline-block; background: var(--navy); color: #fff; border: 0; border-radius: 10px; padding: .6rem 1.1rem; font-weight: 700; cursor: pointer; text-decoration: none; }
.btn.gold { background: var(--gold); color: #221a00; }
.btn.ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.danger { background: var(--bad); }

.site-foot { background: var(--navy-dark); color: #cfd6ea; padding: 1.6rem 1rem 2.2rem; margin-top: 2rem; }
.foot-cols { max-width: 1060px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.2rem; }
.foot-logo { background: #fff; }

/* forms */
form.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: .8rem; align-items: end; }
label.f { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; }
label.f input, label.f select, label.f textarea { padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 9px; font-size: 1rem; background: #fff; }
.strip { display: flex; gap: .45rem; overflow-x: auto; padding: .3rem 0 .5rem; }
.chip-day { flex: 0 0 auto; border: 1.5px solid var(--line); background: #fff; border-radius: 10px; padding: .4rem .55rem; text-align: center; cursor: pointer; font-size: .8rem; line-height: 1.25; }
.chip-day.on { border-color: var(--navy); background: var(--navy); color: #fff; }
.chip-day small { display: block; opacity: .75; }
table.times { width: 100%; border-collapse: collapse; background: #fff; }
table.times td, table.times th { border-bottom: 1px solid var(--line); padding: .5rem .6rem; text-align: left; font-size: .92rem; }
.notice { background: #fff8e1; border: 1px solid var(--gold); border-radius: 10px; padding: .7rem .9rem; }
.okbox { background: #e8f5ec; border: 1px solid var(--ok); border-radius: 10px; padding: .8rem 1rem; }
.errbox { background: #fdecea; border: 1px solid var(--bad); border-radius: 10px; padding: .8rem 1rem; }

/* ------- booking box (embed/booking-box.js) ------- */
.ta-box { background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: 0 10px 30px rgba(18, 39, 94, .16); text-align: left; }
.ta-box-head { background: var(--navy); color: #fff; padding: .7rem 1rem; display: flex; gap: .7rem; align-items: baseline; }
.ta-box-title { font-weight: 800; letter-spacing: .14em; }
.ta-box-sub { color: #f3d67b; font-size: .88rem; }
.ta-box-body { padding: 1rem; }
.ta-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: .7rem; align-items: end; }
.ta-form-col { grid-template-columns: 1fr; }
.ta-field { display: flex; flex-direction: column; gap: .3rem; font-size: .85rem; font-weight: 600; border: 0; padding: 0; margin: 0; }
.ta-field input, .ta-field select { padding: .55rem .6rem; border: 1px solid var(--line); border-radius: 9px; font-size: 1rem; }
.ta-btn { background: var(--gold); color: #221a00; border: 0; border-radius: 10px; padding: .62rem 1.1rem; font-weight: 800; cursor: pointer; }
.ta-btn:disabled { opacity: .45; cursor: not-allowed; }
.ta-btn-sm { padding: .42rem .8rem; }
.ta-btn-ghost { background: transparent; color: var(--navy); border: 1.5px solid var(--navy); margin-left: .5rem; }
.ta-h { margin: .2rem 0 .8rem; color: var(--navy-dark); }
.ta-list { display: flex; flex-direction: column; gap: .6rem; margin-bottom: .8rem; }
.ta-card { display: flex; justify-content: space-between; align-items: center; gap: 1rem; border: 1px solid var(--line); border-radius: 12px; padding: .65rem .8rem; }
.ta-card-side { display: flex; align-items: center; gap: .7rem; }
.ta-muted { color: var(--muted); font-size: .88rem; }
.ta-err { background: #fdecea; color: var(--bad); border-radius: 8px; padding: .5rem .7rem; margin-bottom: .7rem; font-size: .9rem; }
.ta-seats { display: flex; flex-direction: column; gap: .35rem; margin-bottom: .6rem; overflow-x: auto; }
.ta-seat-row { display: flex; gap: .35rem; }
.ta-seat { width: 40px; height: 40px; border-radius: 9px 9px 4px 4px; border: 1.5px solid var(--navy); background: #fff; color: var(--navy); font-weight: 700; cursor: pointer; }
.ta-seat-on { background: var(--navy); color: #fff; }
.ta-seat-taken { border-color: var(--line); background: #eee; color: #aaa; cursor: not-allowed; }
.ta-seat-gap { width: 40px; height: 40px; }
.ta-phone { display: flex; gap: .5rem; align-items: stretch; }
.ta-chip { background: var(--navy); color: #fff; border-radius: 9px; padding: .55rem .6rem; font-weight: 700; }
.ta-phone input { flex: 1; }
.ta-radio { display: inline-flex; align-items: center; margin-right: 1rem; font-weight: 500; }
.ta-recap { font-weight: 700; }
.ta-success { text-align: center; }
.ta-ref { font-size: 1.25rem; font-weight: 800; color: var(--navy-dark); }
.ta-qr { width: 180px; height: 180px; }