/* Base template imported from source page */
/* Consolidated CSS variables and resets */
:root {
  --bg-start: #A7E8E0;
  --bg-end: #C9F5F1;
  --accent1: #7c3aed;
  --accent2: #377dff;
  --muted: #3f4b55;

  --background: 0 0% 100%;
  --foreground: 0 0% 3.9%;
  --border: 0 0% 89.8%;
  --ring: 0 0% 3.9%;
}

html, :host {
  line-height: 1.5;
  -webkit-text-size-adjust: 100%;
  -moz-tab-size: 4;
  tab-size: 4;
  font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji";
  font-feature-settings: normal;
  font-variation-settings: normal;
}

*,
*::before,
*::after {
  box-sizing: border-box;
  border-width: 0;
  border-style: solid;
  border-color: hsl(var(--border));
  outline-color: hsl(var(--ring) / .5);
}

body { background-color: hsl(var(--background)); color: hsl(var(--foreground)); margin: 0; line-height: inherit; }

.brand-top{position:sticky;top:0;background:transparent;padding:18px 12px;z-index:2000}
.brand-inner{max-width:1100px;margin:0 auto;display:block;position:relative;text-align:center}
.logo a{font-family:'Dancing Script',cursive;font-size:56px;color:#e9cfff;text-decoration:none;position:relative;padding-bottom:16px;display:inline-block}
.logo a::after{content:'';position:absolute;left:50%;transform:translateX(-50%);bottom:6px;width:240px;height:8px;border-radius:8px;background:linear-gradient(90deg,#7c3aed,#5a22d6);box-shadow:0 10px 30px rgba(124,58,237,0.18)}
.right-controls{display:flex;align-items:center;gap:12px;position:absolute;right:12px;top:50%;transform:translateY(-50%)}
.qr-btn{background:#fff;border-radius:12px;border:none;padding:6px;box-shadow:0 8px 26px rgba(0,0,0,0.12);cursor:pointer;width:54px;height:54px;display:flex;align-items:center;justify-content:center}
.qr-btn img{width:44px;height:44px;display:block;border-radius:8px}
.nav-toggle{background:transparent;color:var(--accent1);border:none;padding:.35rem .6rem;border-radius:999px;cursor:pointer;box-shadow:0 6px 18px rgba(124,58,237,0.06)}
.app{max-width:1100px;margin:24px auto;padding:12px}
.hero{display:flex;justify-content:center;align-items:center;min-height:64vh}
.card{background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.02));padding:34px;border-radius:20px;box-shadow:0 30px 80px rgba(92,36,179,0.08);text-align:center;max-width:720px;width:100%}
.booking-card h2{margin:0 0 .2rem;font-family:'Dancing Script',cursive;color:#fff;font-size:28px}
.booking-card .muted{color:rgba(255,255,255,0.9);margin-bottom:8px}
.booking-card input[type="text"], .booking-card input[type="date"], .booking-card input{width:100%;padding:.95rem;border-radius:14px;border:1px solid rgba(255,255,255,0.06);margin-top:12px;background:rgba(255,255,255,0.04);color:#fff}
.step-controls{display:flex;justify-content:flex-end;margin-top:12px}
.btn{border:none;padding:.8rem 1.0rem;border-radius:12px;font-weight:700;cursor:pointer}
.btn.primary{background:linear-gradient(90deg,var(--accent2),var(--accent1));color:#fff;box-shadow:0 12px 36px rgba(124,58,237,0.12)}
.contact-area{max-width:1100px;margin:18px auto;display:flex;gap:18px;justify-content:center;padding:0 12px}
.btn.wide{flex:1;padding:14px 18px;border-radius:12px}
.btn-text{background:#2d9bf6;color:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(45,155,246,0.12)}
.btn-call{background:linear-gradient(90deg,#8b5cf6,#6b46c1);color:#fff;border-radius:12px;box-shadow:0 12px 30px rgba(107,70,198,0.12)}
.calendar-wrapper{margin-top:18px}
.calendar-label{display:block;margin-bottom:8px;color:rgba(255,255,255,0.85)}
.requests{margin-top:18px;font-weight:700;color:rgba(255,255,255,0.88)}
/* Large centered home QR */
.home-qr{display:block;margin:18px auto 12px;width:420px;height:420px;max-width:86vw;max-height:86vw;object-fit:cover;border-radius:18px;box-shadow:0 36px 80px rgba(11,10,20,0.55);cursor:pointer;border:1px solid rgba(255,255,255,0.06)}
.home-qr[hidden]{display:none}
/* QR modal */
.qr-overlay{position:fixed;inset:0;background:linear-gradient(rgba(0,0,0,0.6),rgba(0,0,0,0.85));display:flex;align-items:center;justify-content:center;z-index:99999;padding:24px}
.qr-card-modal{background:linear-gradient(180deg,#ffffff11,#ffffff07);padding:20px;border-radius:14px;max-width:420px;width:100%;text-align:center;box-shadow:0 30px 80px rgba(0,0,0,0.6)}
.qr-card-modal img{max-width:320px;border-radius:14px;display:block;margin:8px auto}
.qr-actions{display:flex;gap:10px;justify-content:center;margin-top:12px}
.qr-actions a{padding:.6rem .85rem;border-radius:10px;color:#fff;text-decoration:none;font-weight:700}
.qr-actions .call{background:linear-gradient(90deg,#6b46c1,#8b5cf6)}
.qr-actions .sms{background:linear-gradient(90deg,#2d9bf6,#2da3f6)}
.qr-actions .download{background:rgba(255,255,255,0.06);color:#fff}
/* calendar grid cells */
#calendarGrid{background:transparent}
#calendarGrid .cal-day{background:linear-gradient(180deg,rgba(255,255,255,0.02),rgba(255,255,255,0.01));padding:12px;border-radius:8px;color:#fff;text-align:center}
#calendarGrid .cal-day.disabled{opacity:0.28}
#calendarGrid .cal-day.selected{background:linear-gradient(90deg,var(--accent2),var(--accent1));box-shadow:0 12px 32px rgba(124,58,237,0.16)}

/* small buttons */
.btn.small{padding:.36rem .6rem;border-radius:8px;font-size:.9rem}

/* edit modal tweaks */
.qr-card-modal input{background:transparent;color:#fff}
@media(max-width:600px){
  body{background:linear-gradient(180deg,#0b1220,#1b1b2b)}
  .brand-inner{padding:0 8px}
  .logo a{font-size:36px}
  .hero{min-height:58vh}
  .card{background:linear-gradient(180deg,#15202b,#0e1620);box-shadow:0 30px 80px rgba(0,0,0,0.6)}
  .booking-card input{background:rgba(255,255,255,0.03);border:1px solid rgba(255,255,255,0.04);color:#fff}
  .calendar-wrapper{background:linear-gradient(180deg,#0f1720,#191b24);padding:18px;border-radius:12px;margin-top:16px}
}
@media(min-width:601px){
  .logo a{font-size:48px}
}