/* Booking components on top of /css/style.css + /css/namari-color.css (nuat.hu, Namari theme).
   Only what the site CSS doesn't cover. Palette taken from the site: gold #d2b356, ink #111,
   borders #e1e1e1, soft bg #f5f5f5, muted #9c9c9c. */

.nb { text-align: left; margin: 0 auto; }
.nb { --gold:#d2b356; --ink:#111; --line:#e1e1e1; --soft:#f5f5f5; --muted:#9c9c9c; --err:#b33a3a;
      max-width: 980px; padding: 20px 20px 40px; }
.nb-top { padding: 10px 0 0; }
/* beats Namari's `.row img { height:auto; max-width:100% }` */
.nb .nb-top img.nb-logo { height: 56px; width: auto; max-width: none; }
.nb .card > p:first-child, .nb .card > h3:first-child { padding-top: 0; margin-top: 0; }

/* Admin page title (public pages use the site's .section-heading) */
.nb h1 { font-size: 34px; font-weight: 700; padding: 20px 0 0; }
.nb h1:after { content:""; display:block; width:30px; height:5px; background:var(--gold); margin:22px 0 20px; }
.nb .nb-step { font-size: 14px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase;
         color: var(--muted); padding: 30px 0 10px; }
.nb h3 { font-size: 20px; padding: 0 0 10px; }
@media (max-width: 480px) { .nb h1 { font-size: 24px; font-weight: 800; } }

.nb .muted { color: var(--muted); } .nb .small { font-size: 13px; }
.nb .err { color: var(--err); font-weight: 600; } .nb .warn { color: #b5651d; }

/* Cards */
.nb .card { background:#fff; border:1px solid var(--line); border-radius:3px; padding:20px; margin:15px 0; }
.nb .card.ok { border-top: 5px solid var(--gold); }
.nb .card.ai { background: var(--soft); border-color: var(--soft); }

/* Service / slot / day tiles */
.nb .services, .nb .slots { display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:12px; }
.nb .days { display:grid; grid-template-columns:repeat(auto-fill,minmax(90px,1fr)); gap:8px; }
.nb .svc, .nb .slot, .nb .day { display:flex; flex-direction:column; padding:14px 16px; background:#fff;
      border:2px solid var(--line); border-radius:3px; color:var(--ink); transition:border-color .3s linear, color .3s linear; }
.nb .svc b, .nb .slot b { font-weight: 600; }
.nb .svc span, .nb .slot small, .nb .day small { color: var(--muted); font-size: 13px; }
.nb .svc:hover, .nb .slot:hover, .nb .day:hover { border-color: var(--gold); color: var(--ink); }
.nb .svc.on, .nb .day.on { border-color: var(--gold); background: #fbf7ea; }
.nb .slot.rec { border-left: 5px solid var(--gold); }
.nb .day { padding: 8px; text-align: center; font-size: 14px; }
.nb .day.none { opacity: .4; }

/* Forms: inputs come from style.css; buttons mimic the site's .button */
.nb .form { display:flex; flex-direction:column; gap:12px; max-width: 460px; }
.nb .form label { display:flex; flex-direction:column; gap:2px; font-size:14px; font-weight:600; }
.nb .form label.check { flex-direction:row; align-items:flex-start; gap:8px; font-weight:400; }
.nb .form label.check input { height:auto; margin-top:4px; }
.nb input:not([type=checkbox]):not([type=radio]), .nb select { width:100%; font-family:inherit; font-size:15px; }
.nb input:focus, .nb select:focus { border-color: var(--gold); }
.nb .ai .row { display:flex; gap:10px; padding:0; max-width:none; }
.nb .ai input { flex:1; margin:0; }
.nb button { font-family:'Open Sans',sans-serif; font-size:14px; font-weight:700; color:var(--ink);
      background:transparent; border:3px solid var(--ink); padding:9px 18px; cursor:pointer;
      transition:all .3s linear; align-self:flex-start; }
.nb button:hover { border-color:var(--gold); color:var(--gold); }
.nb button.danger { border-color:var(--err); color:var(--err); }
.nb button.danger:hover { background:var(--err); color:#fff; }
.nb button.link { border:0; padding:0 4px; color:var(--err); }
.nb .hp { position:absolute; left:-9999px; }
.nb .narrow { max-width:360px; margin:40px auto; }

/* Admin */
.nb .adminbar { display:flex; gap:16px; align-items:center; }
.nb .adminbar .grow { flex:1; }
.nb .hints { border-left:5px solid var(--gold); }
.nb .hints ul { margin:6px 0 0 18px; }
.nb .week { display:flex; flex-direction:column; gap:10px; margin-top:15px; }
.nb .wday { background:#fff; border:1px solid var(--line); border-radius:3px; padding:12px 14px; }
.nb .wday-h { display:flex; justify-content:space-between; gap:8px; }
.nb .timeline { position:relative; height:18px; background:var(--soft); border-radius:2px; margin:8px 0; overflow:hidden; }
.nb .timeline .bk, .nb .timeline .blk { position:absolute; top:0; bottom:0; }
.nb .timeline .bk { background:var(--gold); }
.nb .timeline .blk { background:repeating-linear-gradient(45deg,#ccc 0 4px,transparent 4px 8px); }
.nb .bkrow { display:flex; gap:12px; align-items:center; font-size:14px; padding:3px 0; flex-wrap:wrap; }
.nb .bkrow span:first-child { font-variant-numeric:tabular-nums; min-width:92px; }
.nb .bkrow form { margin-left:auto; }
.nb .grid2 { display:grid; grid-template-columns:1fr 1fr; gap:15px; }

@media (max-width: 700px) { .nb .grid2 { grid-template-columns:1fr; } .nb .ai .row { flex-direction:column; } }

.nb .nb-help { margin-top: 30px; }
#booking .section-heading { padding-top: 90px; } /* clear the absolute #header (71px) */
@media (max-width: 480px) { #booking .section-heading { padding-top: 70px; } }

/* Payment */
.nb .nb-pay { border:1px solid var(--line); border-radius:3px; padding:10px 14px 12px; margin:4px 0; }
.nb .nb-pay legend { font-size:14px; font-weight:600; padding:0 4px; }
.nb .nb-pay label.check { margin:6px 0; }
.nb .nb-pay input[type=radio] { height:auto; width:auto; margin-top:4px; flex:none; }
.nb .pay { display:inline-block; font-size:11px; font-weight:700; letter-spacing:.5px; text-transform:uppercase;
           padding:1px 6px; border-radius:2px; background:var(--soft); color:var(--muted); margin-left:6px; }
.nb .pay.paid { background:#e8f3ea; color:#2f6b3f; }

/* Trust strip (booking start page) */
.nb .nb-trust { display:flex; gap:16px; align-items:flex-start; background:var(--soft); border-radius:10px; padding:16px 18px; margin:0 0 10px; }
.nb .nb-trust img { width:72px; height:72px; border-radius:50%; object-fit:cover; flex:none; max-width:none; }
.nb .nb-trust ul { list-style:none; margin:0 0 8px; padding:0; display:flex; flex-wrap:wrap; gap:4px 18px; font-size:14px; font-weight:600; }
.nb .nb-trust li:before { content:"✓ "; color:var(--gold); }
.nb .nb-trust q { font-style:italic; font-size:14px; color:#444; }
.nb .nb-trust-who { font-size:13px; color:var(--muted); margin-left:4px; }
@media (max-width:480px) { .nb .nb-trust img { width:52px; height:52px; } }
/* "Most popular" badge on treatment tiles */
.nb .svc { position:relative; }
.nb .svc.popular { border-color:var(--gold); }
.nb .nb-badge { position:absolute; top:-10px; right:10px; background:var(--gold); color:#fff; font-size:11px; font-weight:700;
                letter-spacing:.5px; text-transform:uppercase; padding:2px 8px; border-radius:3px; }
.nb .svc .nb-badge { color:#fff; font-size:11px; }