/* WASHLY UI v2: brand colours taken from the logo. Loaded after style.css; delete this file + one <link> to revert. */
:root{
  --cyan:#09d0fc;--blue:#0485fb;--royal:#0349c9;--navy:#061634;--navy-2:#0a2552;
  --ink:#071632;--ink-2:#16305e;--foam:#f3f8ff;--muted:#5b6f93;--line:#dce7f7;--sand:#e8f0fc;
  --aqua:#0475ee;--aqua-d:#0349c9;--sky:#09d0fc;
  --brand:linear-gradient(135deg,#0aa2f7 0%,#0475ee 52%,#0349c9 100%);
  --shadow:0 12px 32px rgba(6,22,52,.07);--shadow-lg:0 22px 50px rgba(4,73,201,.14);
}
body{background:radial-gradient(circle at 6% 0,rgba(9,208,252,.16),transparent 26rem),radial-gradient(circle at 100% 10%,rgba(4,117,238,.10),transparent 24rem),linear-gradient(180deg,#eaf4ff 0,#f5f9ff 340px,#f3f8ff 100%)}
body:before{opacity:.25}

/* header */
.top{background:rgba(6,22,52,.94);border-bottom:1px solid rgba(9,208,252,.16);box-shadow:0 10px 30px rgba(6,22,52,.28)}
.logo{gap:10px;letter-spacing:2.5px;font-weight:800;font-size:1.05rem}
.logo-img{height:30px;width:auto;display:block;filter:drop-shadow(0 2px 8px rgba(9,208,252,.35))}
nav a,.link{color:#c5d8f5}
nav a:hover,.link:hover{background:rgba(9,208,252,.14);color:#fff}
.header-bell{color:#c5d8f5}.header-bell b{background:var(--cyan);color:var(--navy)}
.nav-toggle span{background:#fff}

/* buttons, inputs */
.btn,button.btn{background:var(--brand);box-shadow:0 10px 24px rgba(4,117,238,.30);letter-spacing:.1px}
.btn:hover{box-shadow:0 14px 30px rgba(4,117,238,.38)}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line);box-shadow:none}
.btn.ghost:hover{border-color:#9cc3f5;box-shadow:0 8px 18px rgba(6,22,52,.08)}
.btn.block{width:100%;text-align:center}
input,select{border-color:#d3e1f5}
input:hover,select:hover{border-color:#a9c8f0}
input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 4px rgba(4,133,251,.14),0 7px 20px rgba(6,22,52,.05)}
button:focus-visible,a:focus-visible{outline:3px solid #7cc4ff}
a{color:var(--royal)}

/* cards and surfaces */
.card,.step,.tile,.metric-card,.chat,.empty-state{border:1px solid rgba(4,73,201,.08);background:rgba(255,255,255,.95)}
.card:hover,.tile:hover,.metric-card:hover{border-color:rgba(4,133,251,.25)}
.tile:after{background:rgba(9,208,252,.09)}
.stat b{color:var(--royal)}
.ib{background:linear-gradient(135deg,#e2f6ff,#dbe9ff);color:var(--royal)}
.step i{background:var(--brand);box-shadow:0 7px 16px rgba(4,117,238,.28)}
.metric-card:before{background:linear-gradient(var(--cyan),var(--royal))}
.bar{background:linear-gradient(180deg,var(--cyan),var(--royal));box-shadow:0 8px 20px rgba(4,117,238,.22)}
.bars{background:linear-gradient(180deg,rgba(9,208,252,.06),transparent)}
.tagp,.tagp2{background:#e0f3ff;color:var(--royal)}
.banner,.quick-rebook,.cash,.wallet,.cta{background:linear-gradient(135deg,#061634 0%,#0a2f78 60%,#0349c9 100%)}
.banner:after,.cash:after,.wallet:after{background:rgba(9,208,252,.12)}
.flash{background:#e3f2ff;color:#073a86}
.hint{background:#eaf4ff;border-color:#cfe3fb}
.hint.ok{background:#e3f7ee}
.pill{background:#e6effc}
.track li.done i{box-shadow:0 4px 12px rgba(4,117,238,.25)}
.secure .ib{background:#e2f6ff}

/* landing page */
main:has(.hero2) > h1{display:none}
.hero2{display:grid;grid-template-columns:1.05fr .95fr;align-items:center;gap:20px;padding:34px;margin:6px 0 30px;border-radius:28px;color:#fff;position:relative;overflow:hidden;
  background:radial-gradient(circle at 85% 20%,rgba(9,208,252,.28),transparent 22rem),radial-gradient(circle at 0 100%,rgba(4,73,201,.55),transparent 20rem),linear-gradient(145deg,#061634,#0a2552);box-shadow:0 30px 70px rgba(6,22,52,.35)}
.hero2 h1{display:block!important;color:#fff;font-size:2.5rem;line-height:1.08;letter-spacing:-1.2px;margin:0 0 14px}
.hero2 .lead{color:#c5d8f5;font-size:1.08rem;margin:0 0 22px;max-width:30em}
.hero2 .trust{color:#8fb0e0;font-size:.85rem;margin:18px 0 0}
.hero2 .btn.ghost{background:rgba(255,255,255,.08);color:#fff;border:1.5px solid rgba(255,255,255,.28)}
.hero2 .btn.ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.5)}
.hero-logo{width:100%;max-width:430px;height:auto;justify-self:center;filter:drop-shadow(0 18px 40px rgba(9,208,252,.30));animation:float 6s ease-in-out infinite}
@keyframes float{50%{transform:translateY(-8px)}}
@media (prefers-reduced-motion:reduce){.hero-logo{animation:none}}
.feat .card .ib,.svc .ib{margin-bottom:10px}
.svc.hot{border:1.5px solid var(--blue);box-shadow:var(--shadow-lg)}
.from{color:var(--royal);font-weight:800}

/* login / register */
.auth-brand{display:flex;justify-content:center;padding:6px 0 18px}
.auth-brand img{height:74px;width:auto;filter:drop-shadow(0 10px 22px rgba(4,117,238,.35))}
main:has(.auth-brand){max-width:480px}
main:has(.auth-brand) > h1{text-align:center}
main:has(.auth-brand) .card{padding:26px;box-shadow:var(--shadow-lg)}

/* footer */
footer{background:var(--navy);color:#8fb0e0;text-align:center;padding:26px 18px;font-size:.88rem;display:flex;gap:10px;align-items:center;justify-content:center;flex-wrap:wrap}
footer img{height:22px;width:auto}

@media (max-width:760px){
  .hero2{grid-template-columns:1fr;padding:26px 22px;text-align:left;gap:6px}
  .hero2 h1{font-size:2rem}
  .hero-logo{order:-1;max-width:250px;margin:0 auto 4px}
  .hero2 .actions .btn{flex:1 1 100%;text-align:center}
  main{padding-top:24px}
  nav.nav-open{background:#0a2552;border-radius:16px;padding:8px}
}

/* ---- features pack ---- */
textarea{display:block;width:100%;margin-top:6px;padding:13px 14px;font:inherit;border:1.5px solid #d3e1f5;border-radius:14px;background:#fff;color:var(--ink);resize:vertical}
textarea:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 4px rgba(4,133,251,.14)}
label.agree{display:block;font-weight:500;font-size:.92rem;line-height:1.5}
label.agree input{width:auto;display:inline-block;margin:0 8px 0 0;vertical-align:-2px}
footer{flex-direction:column;gap:12px}
.foot-brand{display:flex;gap:10px;align-items:center;justify-content:center}
.foot-links{display:flex;gap:6px 16px;flex-wrap:wrap;justify-content:center}
.foot-links a{color:#8fb0e0;text-decoration:none;font-size:.85rem}.foot-links a:hover{color:#fff;text-decoration:underline}
.wa-float{position:fixed;right:16px;bottom:16px;z-index:30;width:56px;height:56px;border-radius:50%;background:#1fb855;display:grid;place-items:center;box-shadow:0 10px 26px rgba(6,22,52,.35);transition:transform .15s}
.wa-float:hover{transform:scale(1.07)}
.legal h2{font-size:1.05rem;margin:1.4em 0 .4em}.legal p{margin:.4em 0 .8em;color:#243a63}
.faq details{background:#fff;border:1px solid rgba(4,73,201,.1);border-radius:16px;padding:14px 18px;margin-bottom:10px;box-shadow:var(--shadow)}
.faq summary{cursor:pointer;font-weight:700;list-style:none;display:flex;justify-content:space-between;gap:10px}
.faq summary::-webkit-details-marker{display:none}.faq summary:after{content:"+";color:var(--blue);font-size:1.3rem;line-height:1}
.faq details[open] summary:after{content:"–"}.faq details p{margin:.7em 0 .2em;color:var(--muted)}
.photos{display:flex;gap:10px;flex-wrap:wrap;margin:12px 0}
.photos a{position:relative;display:block;width:104px;height:104px;border-radius:14px;overflow:hidden;box-shadow:var(--shadow)}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.photos span{position:absolute;left:6px;bottom:6px;background:rgba(6,22,52,.8);color:#fff;font-size:.7rem;font-weight:700;padding:2px 8px;border-radius:99px}
.invite input[readonly]{background:#f3f8ff}
.export .grid{margin:10px 0}