/* ---------- Base / Reset ---------- */
* { box-sizing: border-box; scroll-behavior: smooth;}
html,body { height:100%; }
body {
  margin:0;
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  color:#222;
  background: linear-gradient(180deg,#fff,#fffaf8);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  line-height:1.4;
  padding-bottom: 4rem;
}
#shopping-cart {
  position: fixed;
  top: 16px;
  right: 16px;
  font-size: 24px;
  cursor: pointer;
  z-index: 1000;
  background-color: rgba(255, 138, 241, 0.157);
  border-radius: 20%;
  border-color: transparent;
}
/* ---------- Layout ---------- */
.container { max-width:1100px; margin:0 auto; padding:16px; }

header {
  text-align:center;
  padding:20px 8px;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(11,11,11,0.06);
  margin-bottom:16px;
}
.brand {
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
}
.logo img {
  width:76px;
  height:76px;
  border-radius:12px;
  background:linear-gradient(135deg,#ffeff6,#feeef6);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;color:#b8326e;font-family:"Great Vibes",cursive;font-size:28px;
  box-shadow: 0 6px 18px rgba(184,50,110,0.08);
}
h1 { margin:0; font-family:"Great Vibes",cursive; color:#b8326e; font-size:34px; }
p.sub { margin:6px 0 0; color:#5b5b5b; font-weight:500; }

nav { display:flex; gap:10px; justify-content:center; margin-top:10px; flex-wrap:wrap; }
nav a { color:#444; text-decoration:none; font-weight:600; font-size:14px; padding:6px 10px; border-radius:8px; }
nav a:hover { background:#fff4f9; color:#b8326e; }

/* ---------- Hero / Intro ---------- */

.images{
  text-align: center;
}
.images img{

  width:35%;
  height: 15%;
  border-radius: 20px;
}
.intro {
  display:grid;
  grid-template-columns: 1fr;
  gap:12px;
  align-items:center;
  text-align:center;
  margin-bottom: 18px;
}
.intro .tag { color:#b8326e; font-weight:600; font-family:"Playfair Display",serif; font-size:18px; }
.intro p { color:#444; margin:0 auto; max-width:760px; }

/* ---------- Services grid ---------- */
.services-grid {
  display:grid;
  gap:12px;
  grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
}

.category {
  background: #fff;
  padding:12px;
  border-radius:12px;
  box-shadow: 0 6px 18px rgba(11,11,11,0.04);
  border:1px solid rgba(184,50,110,0.03);
}
.category h3 {
  margin:0 0 8px 0;
  font-family:"Playfair Display",serif;
  color:#b8326e;
  font-size:18px;
}

.service {
  display:flex;
  gap:8px;
  align-items:center;
  justify-content:space-between;
  padding:8px 0;
  border-top:1px dashed rgba(0,0,0,0.04);
}
.service:first-of-type { border-top:none; }
.service .left { max-width:62%; }
.service h4 { margin:0; font-size:15px; color:#222; }
.service p.meta { margin:4px 0 0; color:#666; font-size:13px; }

.btn {
  background:#b8326e; color:#fff; border:none; padding:8px 12px; border-radius:8px; cursor:pointer;
  font-weight:600; font-size:14px; white-space:nowrap;
  box-shadow: 0 6px 18px rgba(184,50,110,0.12);
}
.btn.ghost { background:transparent; color:#b8326e; border:1px solid #f1c7da; box-shadow:none; }

/* ---------- Modal ---------- */
.modal-backdrop {
  position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background: rgba(10,10,10,0.45); z-index:60;
  padding:16px;
}
.modal { background:#fff; width:100%; max-width:720px; border-radius:12px; padding:18px; box-shadow:0 18px 50px rgba(11,11,11,0.2); max-height:90vh; overflow:auto; }
.modal header { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:12px; }
.modal header h3 { margin:0; color:#b8326e; font-family:"Playfair Display",serif; }
.modal .instructions {color: #e75480;}
.close { background:transparent; border:none; font-size:18px; padding:6px; cursor:pointer; color:#666; }

.form-row { display:flex; gap:8px; margin-bottom:10px; flex-wrap:wrap; }
label { font-size:13px; color:#555; display:block; margin-bottom:6px; }
input[type="text"], input[type="email"], input[type="tel"], select {
  width:100%; padding:10px; border-radius:8px; border:1px solid #eee; font-size:14px;
}

.calendar-row { display:flex; gap:12px; align-items:flex-start; flex-wrap:wrap; margin-bottom:12px; }
input[type="date"] { padding:8px; border-radius:8px; border:1px solid #eee; font-size:14px; }

.slots { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.slot { padding:8px 10px; border-radius:8px; border:1px solid #eee; cursor:pointer; font-weight:600; }
.slot:hover { transform:translateY(-2px); }
.slot.disabled { opacity:0.45; cursor:not-allowed; }

.summary { background:#fff7fb; border:1px solid #ffe7f2; padding:10px; border-radius:8px; color:#444; margin-bottom:12px; }


/* ---------- Info blocks ---------- */
.info { display:grid; grid-template-columns:1fr; gap:12px; margin-top:14px; }
.info .box { background:#fff; padding:12px; border-radius:10px; box-shadow:0 6px 18px rgba(11,11,11,0.04); }
.muted { color:#666; font-size:13px; }
a{
    text-decoration: none;
    color: inherit;
    font-weight: bold;
}
/* -------------- FullCalendar UI (cuz why not) ---------- */
.fc .fc-button {
background-color: #ff69b4;   /* Hot pink */
border: none;
color: white;
font-weight: 500;
}

.fc .fc-button:hover {
background-color: #ff1493;   /* Deep pink */
}
.fc-today-button.fc-button.fc-button-primary, 
.fc-dayGridMonth-button.fc-button.fc-button-primary.fc-button-active {
  background-color: #993653;
}


.fc .fc-button:active,
.fc .fc-button.fc-button-active {
background-color: #e75480;   /* Slightly darker pink */
box-shadow: none;
}
.fc .fc-highlight{
background-color: #993653; 
}
.fc-daygrid-day.selected-date{
background-color: #993653; 
}
.slot.selected {
background-color: #ff69b4; /* hot pink */
color: #fff;
border: 1px solid #ff1493; /* optional: darker pink border */
}

/* ---------- Footer ---------- */
footer { text-align:center; margin-top:18px; color:#444; font-size:13px; padding:16px; }

/* ---------- Small screens ---------- */
@media (max-width:560px) {
  h1 { font-size:28px; }
  .logo { width:64px; height:64px; font-size:24px; }
  .modal { padding:14px; }
}