/* Tropic Trip Maldives Ferry Booking – customer form
   Colours are exactly the logo's: navy #003399 (whale), teal #00b299 and green #33ffb2 (waves),
   aqua #4dffe5 and mint #b2ffe5 (squares), black (wordmark) – plus neutral greys. */
.txb{--txb-brand:#003399;--txb-accent:#00b299;--txb-aqua:#4dffe5;--txb-green:#33ffb2;--txb-mint:#b2ffe5;
	--txb-bg:#f5f6f7;--txb-line:#d9dce1;--txb-text:#111111;--txb-muted:#5c6370;
	--txb-radius:14px;color:var(--txb-text);font-size:16px;line-height:1.45;
	font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif}
.txb *{box-sizing:border-box}
.txb svg{display:inline-block;vertical-align:middle}

/* ---------- Brand frame ---------- */
.txb-shell{max-width:760px;margin:0 auto 24px;background:#fff;border-radius:22px;overflow:hidden;box-shadow:0 18px 50px rgba(0,51,153,.14),0 2px 6px rgba(0,51,153,.06);border:1px solid var(--txb-line)}
.txb-head{display:flex;align-items:center;gap:14px;padding:18px 22px 6px;background:#fff}
.txb-logo{width:60px;height:60px;flex:none;object-fit:contain}
.txb-id{flex:1;min-width:0}
.txb-wordmark{font-family:"Oswald","Roboto Condensed","Arial Narrow","Helvetica Neue",Arial,sans-serif;font-stretch:condensed;font-weight:800;font-size:27px;line-height:1;color:#000;letter-spacing:.3px;white-space:nowrap}
.txb-wordmark span{display:inline-block;margin-left:6px;font-size:13px;font-weight:700;letter-spacing:3.5px;color:var(--txb-brand);vertical-align:middle;font-stretch:normal}
.txb-tag{color:var(--txb-muted);font-size:13.5px;margin-top:5px}
.txb-help{display:flex;align-items:center;gap:8px;background:var(--txb-mint);border:1px solid var(--txb-accent);color:var(--txb-brand) !important;text-decoration:none !important;border-radius:999px;padding:7px 14px 7px 10px;font-size:12px;line-height:1.2;flex:none}
.txb-help span{color:var(--txb-text)}
.txb-help strong{display:block;color:var(--txb-brand);font-size:13.5px}
.txb-help:hover{background:var(--txb-mint)}
.txb-wave{display:block;width:100%;height:30px;margin:2px 0 0}
.txb-body{padding:22px 24px 26px;background:#fff}
.txb-foot{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 22px;padding:14px 18px;background:var(--txb-bg);border-top:1px solid var(--txb-line);font-size:12.5px;color:var(--txb-muted)}
.txb-foot span{display:inline-flex;align-items:center;gap:6px}
.txb-foot svg{color:var(--txb-brand)}
.txb-loading{display:flex;align-items:center;justify-content:center;gap:10px;padding:40px;color:var(--txb-muted)}
.txb-loading span{width:18px;height:18px;border-radius:50%;border:3px solid var(--txb-mint);border-top-color:var(--txb-accent);animation:txbspin .8s linear infinite}
@keyframes txbspin{to{transform:rotate(360deg)}}

/* Content blocks inside the frame */
.txb-card{background:transparent;border:0;padding:0;box-shadow:none}
.txb-title{margin:0 0 14px;font-size:20px;font-weight:700;color:var(--txb-brand);letter-spacing:-.2px}
.txb-muted{color:var(--txb-muted);font-size:14px;margin:6px 0 12px}

/* Steps */
.txb-steps{display:flex;gap:6px;list-style:none;margin:0 0 20px;padding:0;counter-reset:s}
.txb-steps li{flex:1;margin:0;position:relative;padding-top:12px;font-size:12.5px;font-weight:600;color:#8a9099;display:flex;align-items:center;gap:6px}
.txb-steps li:before{content:"";position:absolute;top:0;left:0;right:0;height:5px;border-radius:5px;background:#e6e8eb}
.txb-steps li.on{color:var(--txb-brand)}
.txb-steps li.on:before{background:linear-gradient(90deg,var(--txb-brand),var(--txb-accent))}
.txb-steps li.done{color:var(--txb-brand)}
.txb-steps li.done:before{background:var(--txb-accent)}
.txb-steps span{width:20px;height:20px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;background:#e6e8eb;color:#fff;font-size:11px;font-weight:700;flex:none}
.txb-steps li.on span{background:var(--txb-brand)}
.txb-steps li.done span{background:var(--txb-accent)}

/* Trip type toggle */
.txb-toggle{display:inline-flex;background:var(--txb-bg);border:1px solid var(--txb-line);border-radius:999px;padding:4px;margin-bottom:18px}
.txb-toggle button{border:0;background:transparent;padding:9px 22px;border-radius:999px;font-weight:700;color:var(--txb-muted);cursor:pointer;font-size:14.5px;font-family:inherit}
.txb-toggle button.on{background:var(--txb-brand);color:#fff;box-shadow:0 4px 12px rgba(0,51,153,.25)}
.txb-toggle button:disabled{opacity:.4;cursor:not-allowed}

/* Fields */
.txb-row2{display:flex;gap:12px;align-items:flex-end}
.txb-row2>.txb-field{flex:1;min-width:0}
.txb-field{display:block;margin:0 0 14px}
.txb-field span{display:block;font-size:12.5px;font-weight:700;color:var(--txb-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.txb-field input,.txb-field select,.txb-field textarea{width:100%;padding:12px 14px;border:1.5px solid var(--txb-line);border-radius:12px;font-size:16px;background:#fff;color:var(--txb-text);font-family:inherit;min-height:50px;transition:border-color .15s,box-shadow .15s}
.txb-field select{appearance:auto}
.txb-field input:focus,.txb-field select:focus,.txb-field textarea:focus{outline:0;border-color:var(--txb-accent);box-shadow:0 0 0 4px rgba(0,178,153,.16)}
.txb-swap{border:1.5px solid var(--txb-line);background:#fff;border-radius:50%;width:46px;height:46px;margin-bottom:16px;cursor:pointer;font-size:18px;color:var(--txb-brand);flex:none;transition:transform .2s,border-color .2s}
.txb-swap:hover{border-color:var(--txb-accent);transform:rotate(180deg)}

/* Passenger counters */
.txb-pax{border:1.5px solid var(--txb-line);border-radius:var(--txb-radius);margin:4px 0 12px;background:#fff}
.txb-counter{display:flex;justify-content:space-between;align-items:center;padding:11px 16px}
.txb-counter+.txb-counter{border-top:1px solid var(--txb-line)}
.txb-counter strong{font-weight:700}
.txb-counter small{display:block;color:var(--txb-muted);font-size:13px}
.txb-stepper{display:flex;align-items:center;gap:12px}
.txb-stepper button{width:38px;height:38px;border-radius:50%;border:1.5px solid var(--txb-brand);background:#fff;color:var(--txb-brand);font-size:20px;line-height:1;cursor:pointer;padding:0;font-family:inherit}
.txb-stepper button:hover:not(:disabled){background:var(--txb-brand);color:#fff}
.txb-stepper button:disabled{opacity:.25;cursor:not-allowed}
.txb-stepper output{min-width:22px;text-align:center;font-weight:800;font-size:18px;color:var(--txb-brand)}

/* Buttons */
.txb-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:12px;padding:14px 24px;background:var(--txb-brand);color:#fff !important;font-weight:700;font-size:16px;cursor:pointer;text-decoration:none !important;min-height:52px;font-family:inherit;box-shadow:0 6px 16px rgba(0,51,153,.22);transition:transform .1s,box-shadow .15s,filter .15s}
.txb-btn:hover{filter:brightness(1.12);box-shadow:0 8px 20px rgba(0,51,153,.3)}
.txb-btn:active{transform:translateY(1px)}
.txb-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}
.txb-btn.ghost{background:#fff;color:var(--txb-brand) !important;border:1.5px solid var(--txb-brand);box-shadow:none}
.txb-btn.ghost:hover{background:var(--txb-bg)}
.txb-block{width:100%}
.txb-error{background:#fff1f0;border:1px solid #ffd2cc;color:#a1241a;border-radius:12px;padding:12px 14px;margin:0 0 16px;font-size:15px}

/* Departures */
.txb-leghead{display:flex;justify-content:space-between;align-items:center;gap:10px;margin:4px 0 12px;flex-wrap:wrap}
.txb-leghead small{display:block;text-transform:uppercase;letter-spacing:1.2px;font-size:11px;font-weight:700;color:var(--txb-brand)}
.txb-leghead strong{font-size:19px;color:var(--txb-brand)}
.txb-daynav{display:flex;align-items:center;gap:8px;font-weight:700;font-size:15px}
.txb-daynav button{width:36px;height:36px;border-radius:50%;border:1.5px solid var(--txb-line);background:#fff;cursor:pointer;font-size:18px;color:var(--txb-brand);padding:0}
.txb-daynav button:hover:not(:disabled){border-color:var(--txb-accent)}
.txb-daynav button:disabled{opacity:.3}
.txb-deps{display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:10px;margin-bottom:22px}
.txb-dep{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;border:1.5px solid var(--txb-line);background:#fff;border-radius:var(--txb-radius);padding:13px 15px;cursor:pointer;text-align:left;color:var(--txb-text);font-family:inherit;transition:border-color .15s,box-shadow .15s,transform .1s}
.txb-dep:hover:not(.off){border-color:var(--txb-accent);box-shadow:0 6px 16px rgba(0,178,153,.15)}
.txb-dep .t{font-size:25px;font-weight:800;color:var(--txb-brand);letter-spacing:-.5px}
.txb-dep .s{font-size:12.5px;color:var(--txb-brand);font-weight:700}
.txb-dep .s.low{color:#b45f00}
.txb-dep .n{font-size:12px;color:var(--txb-muted)}
.txb-dep.on{border-color:var(--txb-accent);background:var(--txb-mint);box-shadow:0 0 0 2px var(--txb-accent) inset}
.txb-dep.on:after{content:"✓";position:absolute;top:10px;right:10px;width:22px;height:22px;border-radius:50%;background:var(--txb-accent);color:#fff;font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.txb-dep.off{opacity:.55;cursor:not-allowed;background:var(--txb-bg)}
.txb-dep.off .t{color:#8a9099}
.txb-dep.off .s{color:var(--txb-muted)}
.txb-empty{padding:16px;background:var(--txb-bg);border-radius:12px;color:var(--txb-muted);margin-bottom:20px}

/* Fares panel (step 2) */
.txb-fares{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px;margin:4px 0 18px}
.txb-fares>div{background:var(--txb-mint);border:1px solid var(--txb-accent);border-radius:var(--txb-radius);padding:12px 14px}
.txb-fares>div span{display:block;font-size:12.5px;color:var(--txb-muted);font-weight:600}
.txb-fares>div strong{display:block;color:var(--txb-brand);font-size:20px;font-weight:800;margin-top:2px}
.txb-fares small{grid-column:1/-1;color:var(--txb-muted);font-size:13px}

/* Price summary (navy card) */
.txb-price{background:var(--txb-brand);color:#fff;border-radius:16px;padding:16px 18px;margin:8px 0 18px;position:relative;overflow:hidden}
.txb-price:after{content:"";position:absolute;right:-30px;bottom:-40px;width:160px;height:90px;border-radius:50%;background:radial-gradient(closest-side,rgba(77,255,229,.22),transparent)}
.txb-price>div{display:flex;justify-content:space-between;gap:10px;padding:3px 0;position:relative;z-index:1}
.txb-price>div.txb-muted{display:block;color:rgba(255,255,255,.75);margin:0 0 8px;font-size:13px}
.txb-price .sub{color:rgba(255,255,255,.75);font-size:13.5px}
.txb-price .tot{border-top:1px solid rgba(255,255,255,.18);margin-top:8px;padding-top:10px;font-weight:800;font-size:20px;color:#fff}
.txb-price .tot span:last-child{color:var(--txb-aqua)}

.txb-nav{display:flex;justify-content:space-between;gap:10px;flex-wrap:wrap}
.txb-paybtns{display:flex;gap:10px;flex-wrap:wrap;margin-left:auto}

/* Passenger forms */
.txb-paxcard{border:1.5px solid var(--txb-line);border-radius:var(--txb-radius);padding:14px 16px 2px;margin:0 0 16px;background:#fff}
.txb-paxcard legend{font-weight:800;color:var(--txb-brand);padding:2px 10px;font-size:14.5px;background:var(--txb-mint);border-radius:999px;border:1px solid var(--txb-accent)}
.txb-summary{background:#fff;border:1.5px dashed var(--txb-accent);border-radius:12px;padding:11px 14px;font-size:14px;margin:6px 0 10px}
.txb-terms{margin:0 0 10px;font-size:14px}
.txb-terms summary{cursor:pointer;color:var(--txb-brand);font-weight:700}
.txb-terms p{color:var(--txb-muted)}
.txb-check{display:flex;gap:10px;align-items:center;margin:8px 0 18px;font-size:15px;cursor:pointer}
.txb-check input{width:20px;height:20px;accent-color:var(--txb-accent)}
.txb-wp{margin:-4px 0 14px;font-size:14px;background:var(--txb-mint);border-radius:10px;padding:8px 10px}
.txb-hp{position:absolute !important;left:-9999px !important;height:1px;width:1px;opacity:0}
.txb-secure{text-align:center;color:var(--txb-muted);font-size:13px;margin:14px 0 0}

/* Booking result page */
.txb-result{text-align:center}
.txb-badge{display:inline-flex;align-items:center;gap:6px;border-radius:999px;padding:8px 18px;font-weight:800;margin-bottom:6px;font-size:15px}
.txb-badge.ok{background:var(--txb-mint);color:var(--txb-brand);border:1px solid var(--txb-accent)}
.txb-badge.warn{background:#fff6e0;color:#8a5300;border:1px solid #ffe2a6}
.txb-badge.bad{background:#fff1f0;color:#a1241a;border:1px solid #ffd2cc}
.txb-ref{margin:16px 0}
.txb-ref span{display:block;color:var(--txb-muted);font-size:12px;text-transform:uppercase;letter-spacing:1.2px;font-weight:700}
.txb-ref strong{font-size:32px;letter-spacing:4px;color:var(--txb-brand);font-weight:800}
.txb-leg{display:flex;justify-content:space-between;align-items:center;text-align:left;border:1.5px solid var(--txb-line);border-left:5px solid var(--txb-accent);border-radius:12px;padding:12px 16px;margin:0 0 10px;background:#fff}
.txb-leg small{display:block;text-transform:uppercase;font-size:11px;letter-spacing:1px;font-weight:700;color:var(--txb-brand)}
.txb-leg strong{display:block;color:var(--txb-brand)}
.txb-leg span{font-size:14px;color:var(--txb-muted)}
.txb-time{font-size:28px;font-weight:800;color:var(--txb-brand)}
.txb-actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:16px}

@media (max-width:560px){
	.txb-shell{border-radius:16px}
	.txb-head{padding:14px 14px 4px;gap:10px;flex-wrap:wrap}
	.txb-logo{width:48px;height:48px}
	.txb-wordmark{font-size:22px}
	.txb-wordmark span{font-size:11px;letter-spacing:2.5px}
	.txb-tag{font-size:12.5px}
	.txb-help{width:100%;justify-content:center;margin-top:6px}
	.txb-help span{display:flex;gap:6px;align-items:center}
	.txb-help strong{display:inline}
	.txb-body{padding:18px 16px 20px}
	.txb-row2{flex-direction:column;align-items:stretch;gap:0}
	.txb-swap{align-self:center;margin:-6px 0 8px;transform:rotate(90deg)}
	.txb-swap:hover{transform:rotate(270deg)}
	.txb-nav .txb-btn,.txb-paybtns{width:100%}
	.txb-paybtns .txb-btn{flex:1}
	.txb-deps{grid-template-columns:repeat(2,1fr)}
	.txb-steps li{font-size:11px}
	.txb-foot{justify-content:flex-start;padding:12px 16px}
}

/* Route picker: every stop visible as its own button */
.txb-route{display:flex;flex-direction:column;align-items:stretch;gap:4px;margin:0 0 16px}
.txb-stops{flex:1;min-width:0}
.txb-lbl{display:block;font-size:12.5px;font-weight:700;color:var(--txb-muted);margin-bottom:6px;text-transform:uppercase;letter-spacing:.5px}
.txb-chips{display:flex;flex-wrap:wrap;gap:8px}
.txb-chip{display:inline-flex;align-items:center;gap:7px;border:1.5px solid var(--txb-line);background:#fff;color:var(--txb-text);border-radius:12px;padding:11px 14px;font-size:15px;font-weight:700;cursor:pointer;font-family:inherit;min-height:48px;flex:1 1 0;min-width:120px;justify-content:center;transition:border-color .15s,background .15s}
.txb-chip svg{color:var(--txb-brand)}
.txb-chip:hover{border-color:var(--txb-accent)}
.txb-chip.on{border-color:var(--txb-accent);background:var(--txb-mint);color:var(--txb-brand);box-shadow:0 0 0 1px var(--txb-accent) inset}
.txb-route .txb-swap{align-self:center;margin:2px 0;transform:rotate(90deg);width:40px;height:40px}
.txb-route .txb-swap:hover{transform:rotate(270deg)}
@media (max-width:560px){
	.txb-route{flex-direction:column;align-items:stretch;gap:6px}
	.txb-route .txb-swap{align-self:center;margin:0;transform:rotate(90deg)}
	.txb-route .txb-swap:hover{transform:rotate(270deg)}
}

.txb-qr{display:inline-flex;flex-direction:column;align-items:center;gap:6px;border:2px solid var(--txb-accent);border-radius:16px;padding:12px 14px 10px;margin:0 0 16px;background:#fff}
.txb-qr svg{display:block;width:170px;height:170px}
.txb-qr span{font-size:12px;font-weight:700;color:var(--txb-brand);text-transform:uppercase;letter-spacing:.8px}
.txb-terms ol{margin:8px 0 4px 20px;padding:0;color:var(--txb-muted)}
.txb-terms li{margin:4px 0}

/* ---------- Mixed fare groups (Maldivian / work permit vs other nationalities) ---------- */
.txb-mixnote{border:2px solid var(--txb-brand);border-left-width:6px;background:#fff;border-radius:var(--txb-radius);padding:14px 16px;margin:4px 0 18px}
.txb-mixnote strong{display:block;color:var(--txb-brand);font-size:16px;margin-bottom:4px}
.txb-mixnote strong:before{content:"⚠ ";}
.txb-mixnote p{margin:6px 0;font-size:14.5px}
.txb-mixnote .grp{background:var(--txb-mint);border-radius:10px;padding:8px 12px;margin:6px 0;font-size:14px}
.txb-mixnote .grp span{display:block;font-size:12px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--txb-brand)}
.txb-mixnote .tip{color:var(--txb-muted);font-size:13.5px}
.txb-price-mixed{opacity:.75}