/* kg-2026.css — modern booking calendar + admin polish (2026 refresh)
   Scoped under .kg-* so it never affects the rest of the legacy theme. */

:root{
  --kg-brand:#0B7385;
  --kg-brand-d:#095e6d;
  --kg-light:#00B4C9;
  --kg-dark:#0D1B1E;
  --kg-muted:#566B6E;
  --kg-line:#e6ebec;
  --kg-free:#1e8e3e;
  --kg-free-bg:#e7f6ec;
  --kg-free-line:#b7e1c4;
  --kg-booked:#c62828;
  --kg-booked-bg:#fde8e8;
}

/* ---------- Booking calendar ---------- */
.kg-legend{
  display:flex; gap:16px; justify-content:center; flex-wrap:wrap;
  margin:4px 0 16px; font-size:12px; color:var(--kg-muted);
}
.kg-lg{ display:inline-flex; align-items:center; }
.kg-lg:before{
  content:""; width:11px; height:11px; border-radius:3px;
  margin-right:6px; display:inline-block;
}
.kg-lg-free:before{ background:var(--kg-free); }
.kg-lg-booked:before{ background:var(--kg-booked); }
.kg-lg-closed:before{
  background:repeating-linear-gradient(45deg,#e0e4e4,#e0e4e4 3px,#f2f4f4 3px,#f2f4f4 6px);
  border:1px solid #d2d8d8;
}

.kg-cal{
  display:flex; gap:10px; padding:2px 0 14px;
  overflow-x:auto; -webkit-overflow-scrolling:touch;
}
.kg-day{
  flex:1 1 0; min-width:108px;
  background:#fff; border:1px solid var(--kg-line); border-radius:14px;
  overflow:hidden; display:flex; flex-direction:column;
  box-shadow:0 1px 2px rgba(13,27,30,.05);
}
.kg-day-head{
  padding:10px 6px; text-align:center;
  background:linear-gradient(180deg,var(--kg-brand),var(--kg-brand-d)); color:#fff;
}
.kg-day-date{ display:block; font-weight:700; font-size:13px; letter-spacing:.2px; }
.kg-day-name{ display:block; font-size:11px; opacity:.85; margin-top:2px; }

.kg-day-slots{ padding:8px; display:flex; flex-direction:column; gap:6px; }
.kg-slot{
  display:block; text-align:center; padding:10px 4px; border-radius:9px;
  font-size:13px; font-weight:600; line-height:1; text-decoration:none;
}
a.kg-slot.is-free{
  background:var(--kg-free-bg); color:var(--kg-free); border:1px solid var(--kg-free-line);
  transition:background .12s,color .12s,border-color .12s,transform .06s;
}
a.kg-slot.is-free:hover,a.kg-slot.is-free:focus{
  background:var(--kg-free); color:#fff; border-color:var(--kg-free);
  text-decoration:none; transform:translateY(-1px);
}
.kg-slot.is-booked{
  background:var(--kg-booked-bg); color:var(--kg-booked); border:1px solid #f5c2c2;
  text-decoration:line-through; cursor:not-allowed;
}
.kg-slot.is-past{ background:transparent; color:#d2d8d9; }

/* Closed day */
.kg-day.is-closed .kg-day-head{
  background:linear-gradient(180deg,var(--kg-muted),#46585a);
}
.kg-day-closed{
  flex:1; min-height:360px; padding:18px 8px; text-align:center;
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start; gap:7px;
  background:repeating-linear-gradient(45deg,#fafbfb,#fafbfb 9px,#f1f4f4 9px,#f1f4f4 18px);
}
.kg-closed-icon{ width:26px; height:26px; color:#9aa7a8; }
.kg-closed-label{
  font-weight:700; color:var(--kg-muted); font-size:13px;
  letter-spacing:.5px; text-transform:uppercase;
}
.kg-closed-reason{
  /* owner's free text, read top-to-bottom down the whole column */
  writing-mode:vertical-rl; text-orientation:mixed;
  font-family:inherit; font-weight:800; font-size:26px; letter-spacing:1px;
  color:var(--kg-brand); line-height:1.1; margin-top:10px;
  max-height:640px; overflow:hidden; text-transform:uppercase;
}

.kg-day.is-weekend .kg-closed-reason{ color:var(--kg-muted); font-size:20px; letter-spacing:2px; }

@media (max-width:600px){
  .kg-day{ min-width:98px; }
  .kg-slot{ padding:9px 3px; }
}

/* ---------- Admin (/mngr) polish ---------- */
.kg-form .form-control{
  height:auto; padding:10px 12px; font-size:15px; border-radius:9px;
}
.kg-form label{ font-weight:600; color:#33484b; font-size:13px; }
.kg-form .help-block{ color:#8c9799; }
.kg-btn{
  background:var(--kg-brand); border-color:var(--kg-brand);
  padding:11px; font-size:15px; font-weight:600; border-radius:9px; margin-top:6px;
}
.kg-btn:hover,.kg-btn:focus{ background:var(--kg-brand-d); border-color:var(--kg-brand-d); }
.kg-zaras-table td,.kg-zaras-table th{ vertical-align:middle; }
.kg-zaras{ margin-top:6px; }

/* Manager header stacks cleanly on phones instead of title/nav colliding */
@media (max-width:767px){
  .page-header > h3{ float:none!important; line-height:1.4; }
  .page-header > p.pull-right{
    float:none!important; clear:both; display:block; margin-top:8px; line-height:2.2;
  }
  .page-header > p.pull-right a{ display:inline-block; }
}

/* ---------- Booking page frame (2026-10) ---------- */
html:has(.kg-hero),body:has(.kg-hero){ overflow-x:hidden; }
/* Car banner above the calendar (the card overlaps its bottom edge, so the car stays visible) */
.kg-hero{
  position:relative; height:400px; margin-bottom:-120px;
  width:100vw; margin-left:calc(50% - 50vw); /* full-bleed, independent of the theme wrapper */
  background:linear-gradient(90deg,rgba(13,27,30,.80) 0%,rgba(13,27,30,.35) 45%,rgba(13,27,30,.05) 100%),
             linear-gradient(0deg,rgba(13,27,30,.55),rgba(13,27,30,0) 45%),
             url(/view/img/kg/booking-bg.webp?v=2) 60% 55% / cover no-repeat, #0D1B1E;
}
.kg-hero-inner{ max-width:1170px; margin:0 auto; padding:70px 20px 0; color:#fff; }
.kg-hero-eyebrow{ color:#00B4C9; font-size:13px; font-weight:700; letter-spacing:.2em; text-transform:uppercase; margin:0 0 10px; }
.kg-hero-title{ font-size:44px; line-height:1.1; font-weight:700; margin:0 0 10px; text-shadow:0 2px 18px rgba(0,0,0,.5); }
.kg-hero-sub{ font-size:18px; color:rgba(255,255,255,.85); margin:0; max-width:520px; }
@media (max-width:767px){
  .kg-hero{ height:300px; margin-bottom:-60px; background-position:center, center, 72% 55%; }
  .kg-hero-inner{ padding-top:40px; }
  .kg-hero-title{ font-size:30px; }
  .kg-hero-sub{ font-size:15px; }
}
.kg-booking{
  position:relative; z-index:1;
  background:#fff; border-radius:18px; margin-top:0; margin-bottom:28px;
  padding-top:6px; padding-bottom:10px; box-shadow:0 20px 60px rgba(0,0,0,.35);
}
.kg-cal-note{ text-align:center; color:var(--kg-muted); margin:4px 0 6px; font-size:14px; }
.kg-cal-note a, .kg-cancel-note a{ color:var(--kg-brand); font-weight:700; white-space:nowrap; }
.kg-cancel-note{
  background:#fff4e5; border:1px solid #ffd59a; color:#7a4b00; border-radius:10px;
  padding:10px 14px; margin:0 0 12px; font-size:15px;
}

/* ---------- Price estimator ---------- */
.kg-calc{
  border:1px solid var(--kg-line); border-radius:16px; padding:18px 18px 12px;
  background:linear-gradient(180deg,#f4fafb,#fff); margin-bottom:14px;
}
.kg-calc-title{ font-size:20px; font-weight:700; color:var(--kg-dark); margin:0 0 2px; }
.kg-calc-title span{ font-size:13px; font-weight:400; color:var(--kg-muted); }
.kg-calc-sub{ color:var(--kg-muted); font-size:14px; margin:0 0 12px; }
.kg-calc-row{ display:flex; flex-wrap:wrap; align-items:center; gap:6px; padding:7px 0; border-top:1px dashed var(--kg-line); }
.kg-calc-lbl{ width:78px; font-weight:600; font-size:13px; color:#33484b; }
.kg-calc-row label{ margin:0; cursor:pointer; font-weight:500; }
.kg-calc-row input[type=radio]{ position:absolute; opacity:0; pointer-events:none; }
.kg-calc-row label span{
  display:inline-block; padding:7px 12px; border-radius:999px; border:1px solid #cfe3e6;
  background:#fff; color:var(--kg-dark); font-size:13px;
}
.kg-calc-row input:checked + span{ background:var(--kg-brand); border-color:var(--kg-brand); color:#fff; }
.kg-calc-row input:focus-visible + span{ outline:2px solid var(--kg-light); outline-offset:2px; }
.kg-calc-size{ width:90px!important; display:inline-block; }
.kg-calc-result{ margin-top:10px; padding:12px 14px; border-radius:12px; background:var(--kg-dark); color:#fff; font-size:15px; }
.kg-calc-result strong{ font-size:22px; color:var(--kg-light); margin-left:4px; }
.kg-calc-result strong.is-na{ font-size:15px; color:#fff; }
.kg-calc-note{ font-size:12px; color:var(--kg-muted); margin:8px 2px 0; }
.kg-calc-defekt{
  margin:10px 0 2px; padding:10px 12px; border-radius:10px; font-size:14px; line-height:1.4;
  background:#fff4e5; border:1px solid #ffd59a; color:#7a4b00;
}
.kg-calc-defekt a{ color:var(--kg-brand); font-weight:700; white-space:nowrap; }
/* The select on pages without Bootstrap (Áraink) */
.kg-calc select.kg-calc-size{
  height:36px; padding:4px 8px; border:1px solid #cfe3e6; border-radius:8px;
  background:#fff; color:var(--kg-dark); font-size:14px; font-family:inherit;
}
.kg-calc input[type=radio]{ margin:0; }
.kg-arrive{ text-align:center; color:var(--kg-muted); font-size:15px; }

/* ---------- Admin additions (2026-10) ---------- */
.kg-tabs{ margin:0 0 14px; }
.kg-tabs a{ display:inline-block; padding:8px 16px; border-radius:999px; border:1px solid var(--kg-line); margin:0 6px 6px 0; color:var(--kg-dark); }
.kg-tabs a.is-on{ background:var(--kg-brand); color:#fff; border-color:var(--kg-brand); }
.kg-price-sec{ border:1px solid var(--kg-line); border-radius:14px; padding:12px 14px; margin-bottom:14px; background:#fff; }
.kg-price-sec h4{ margin:2px 0 10px; font-weight:700; color:var(--kg-dark); }
.kg-price-row{ display:flex; align-items:center; gap:8px; padding:5px 0; border-top:1px solid #f0f3f3; }
.kg-price-row .nm{ flex:1; min-width:0; }
.kg-price-row input.ar{ width:110px; text-align:right; }
.kg-price-row input.changed{ background:#fff7d6; border-color:#e8c547; }
.kg-price-row .eg{ width:80px; color:var(--kg-muted); font-size:12px; }
.kg-sticky-save{ position:sticky; bottom:0; background:rgba(255,255,255,.96); padding:10px 0; border-top:1px solid var(--kg-line); z-index:5; }
.kg-alert{ padding:10px 14px; border-radius:10px; background:#e7f6ec; color:#1e6b35; border:1px solid #b7e1c4; margin-bottom:12px; }
.kg-alert.is-err{ background:#fde8e8; color:#8a1f1f; border-color:#f5c2c2; }
@media (max-width:600px){
  .kg-price-row{ flex-wrap:wrap; }
  .kg-price-row .nm{ flex-basis:100%; }
  .kg-calc-lbl{ width:100%; }
}