:root{
  --navy: #071424;         /* deep navy background */
  --gold: #c9a24a;         /* warm gold */
  --muted: #8b94a0;
  --card: #0f1724;         /* dark card base */
  --white: #ffffff;
  --glass: rgba(255,255,255,0.03);
  --radius: 12px;
  --shadow: 0 10px 30px rgba(2,6,23,0.6);
}

*{box-sizing:border-box}
html { scroll-behavior: smooth; }
body{
  margin:0;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: linear-gradient(180deg, var(--navy) 0%, #0a2433 100%);
  color: var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* containers */
.container{ max-width:1100px; margin:0 auto; padding:20px; }

/* header */
.site-header{ position:sticky; top:0; z-index:60; backdrop-filter: blur(6px); padding:10px 0; background: linear-gradient(180deg, rgba(4,12,20,0.6), rgba(4,12,20,0.3)); border-bottom:1px solid rgba(255,255,255,0.03);}
.header-inner{ display:flex; align-items:center; justify-content:space-between; gap:16px; }

/* brand */
.brand{ display:flex; gap:12px; align-items:center; }
.logo{ width:48px; height:48px; object-fit:contain; border-radius:8px; background:transparent; }
.brand-text .company{ font-weight:700; letter-spacing:.3px; }
.brand-text .tag{ font-size:.85rem; color:var(--muted); }

/* nav */
.nav{ display:flex; gap:18px; align-items:center; }
.nav a{ color:var(--white); text-decoration:none; font-weight:600; opacity:0.95; padding:8px; border-radius:8px; }
.nav a:hover{ background:rgba(255,255,255,0.03); color:var(--gold); }

/* hamburger (mobile) */
.hamburger{ display:none; background:transparent; border:0; color:var(--white); font-size:1.4rem; cursor:pointer; }

/* hero */
.hero{ padding:48px 0 24px; }
.hero-card{ background: linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.02)); border-radius:16px; padding:28px; box-shadow:var(--shadow); border:1px solid rgba(255,255,255,0.03); }
.hero-card h1{ margin:0 0 8px; font-size:1.9rem; }
.hero-card p{ margin:0 0 16px; color:var(--muted) }
.hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; }

/* buttons */
.btn{ border:0; border-radius:10px; padding:10px 14px; font-weight:700; cursor:pointer; }
.btn.primary{ background:var(--gold); color:#08121a; }
.btn.ghost{ background:transparent; border:1px solid rgba(255,255,255,0.06); color:var(--white) }
.icon-btn{ display:inline-flex; align-items:center; justify-content:center; padding:8px 10px; border-radius:10px; background:transparent; border:1px solid rgba(255,255,255,0.03); color:var(--white); cursor:pointer; }

/* sections/cards */
.section{ padding:22px 0; }
.card{ background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01)); padding:18px; border-radius:var(--radius); box-shadow: var(--shadow); border:1px solid rgba(255,255,255,0.03); }

/* calendar area */
.calendar-top{ display:flex; justify-content:space-between; align-items:center; gap:12px; margin-bottom:12px; }
.calendar-top .title h2{ margin:0; }
.calendar-top .subtitle{ color:var(--muted); font-size:.95rem; margin-top:6px; }

.controls{ display:flex; align-items:center; gap:8px; }
.month-label{ font-weight:800; font-size:1.05rem; }

/* legend */
.legend{ display:flex; gap:12px; color:var(--muted); margin-bottom:10px; align-items:center; flex-wrap:wrap; }
.dot{ width:10px; height:10px; border-radius:99px; display:inline-block; margin-right:6px; border:1px solid rgba(255,255,255,0.06); }
.dot.available{ background:#f8f7f0; border-color: rgba(0,0,0,0.08); }
.dot.booked{ background:#2b1c1c; }
.dot.today{ background:#cfe7ff; }

/* weekday row */
.weekday-row{ display:grid; grid-template-columns: repeat(7, 1fr); gap:8px; color:var(--muted); font-weight:700; margin-bottom:8px; }

/* calendar grid */
.calendar-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:10px; }
.day{
  background:var(--glass); border-radius:10px; min-height:90px; padding:10px; display:flex; flex-direction:column; justify-content:space-between; cursor:pointer; border:1px solid rgba(255,255,255,0.02);
  transition: transform .06s ease, background .12s ease;
}
.day:hover{ transform:translateY(-2px); background: rgba(255,255,255,0.02); }
.day .date{ font-weight:800; font-size:1rem; color:var(--white); }
.day .meta{ color:var(--muted); font-size:.9rem; }
.day.past{ opacity:0.35; pointer-events:none; }
.day.full{ border-color: rgba(255,0,0,0.12); }

/* modal */
.modal-backdrop{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; background:rgba(0,0,0,0.6); z-index:100; padding:18px; }
.modal{ width:min(720px,96vw); background: #071428; border-radius:14px; overflow:hidden; border:1px solid rgba(255,255,255,0.03); box-shadow:0 30px 80px rgba(2,6,23,0.7); }
.modal-header{ padding:14px 18px; border-bottom:1px solid rgba(255,255,255,0.02); display:flex; justify-content:space-between; align-items:center; }
.modal-title{ font-weight:800; font-size:1.05rem; }
.modal-subtitle{ color:var(--muted); font-size:.95rem; }
.modal-body{ padding:18px; color:var(--white); }

/* times grid */
.times-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(120px,1fr)); gap:10px; margin-bottom:12px; }
.time{
  padding:10px; 
  border-radius:10px; 
  background:rgba(255,255,255,0.02); 
  border:1px solid rgba(255,255,255,0.03); 
  text-align:center; 
  cursor:pointer; 
  color: var(--white);  /* <-- make text white */
  font-weight:600;      /* optional: slightly bolder for readability */
}
.time.booked{ 
  background: rgba(255,255,255,0.01); 
  color:var(--muted); 
  text-decoration:line-through; 
  cursor:not-allowed; 
}
.time:hover:not(.booked){ 
  transform:translateY(-2px); 
  background:rgba(255,255,255,0.03); 
}


/* booking form */
.booking-form{ margin-top:12px; display:none; gap:12px; }
.booking-form[aria-hidden="false"]{ display:block; }
.form-row{ display:flex; flex-direction:column; margin-bottom:8px; }
.form-row label{ font-size:.85rem; color:var(--muted); margin-bottom:6px; }
.form-row input{ padding:8px; border-radius:8px; border:1px solid rgba(255,255,255,0.04); background:rgba(0,0,0,0.2); color:var(--white); }
.form-actions{ display:flex; gap:8px; justify-content:flex-end; margin-top:8px; }
.booking-note{ color:var(--muted); margin-top:8px; font-size:.9rem; }

/* footer */
.site-footer{ padding:20px 0; text-align:center; color: rgba(255,255,255,0.7); border-top:1px solid rgba(255,255,255,0.02); margin-top:24px; }
/* Social media links */
.socials { text-align:center; }
.social-links { display:flex; gap:20px; justify-content:center; margin-top:12px; flex-wrap:wrap; }
.social-link {
  display:flex;
  align-items:center;
  justify-content:center;
  width:48px;
  height:48px;
  border-radius:50%;
  font-size:1.2rem;
  color:var(--white);        /* default icon color */
  background:rgba(255,255,255,0.05);
  transition: all 0.2s;
  text-decoration:none;
}

/* Platform-specific colors */
.social-link.instagram { color: #E1306C; }
.social-link.facebook { color: #1877F2; }
.social-link.linkedin { color: #0A66C2; }

.social-link:hover {
  background: var(--gold);
  color: #08121a;  /* icon turns dark on hover */
}




/* responsive */
@media (max-width: 860px){
  .nav{ display:none; }
  .hamburger{ display:block; }
  .brand-text .company{ font-size:0.98rem; }
  .calendar-grid{ gap:8px; }
  .weekday-row{ font-size:.85rem; }
  .hero-card h1{ font-size:1.4rem; }
  .hero-card p{ font-size:.95rem; }
  .logo{ width:44px; height:44px; }
  .modal{ width:96vw; }
  .times-grid{ grid-template-columns: repeat(2, 1fr); }
}

/* drawer styles */
.mobile-drawer{ position:fixed; right:0; top:0; bottom:0; width:78vw; max-width:360px; background: linear-gradient(180deg, #081424, #02101a); padding:18px; transform:translateX(120%); transition: transform .25s ease; z-index:120; border-left:1px solid rgba(255,255,255,0.03); }
.mobile-drawer.open{ transform:translateX(0); }
.close-drawer{ float:right; background:transparent; border:0; color:var(--white); font-size:1.05rem; }
.drawer-nav{ margin-top:26px; display:flex; flex-direction:column; gap:16px; }
.drawer-nav a{ color:var(--white); text-decoration:none; font-weight:700; padding:8px 2px; }
.social-link.instagram { background: #fff; color: #E1306C; }  /* Instagram pink */
.social-link.facebook { background: #fff; color: #1877F2; }   /* Facebook blue */
.social-link.linkedin { background: #fff; color: #0A66C2; }   /* LinkedIn blue */

.social-link:hover { opacity: 0.8; }