/* =========================================================
   BIRTHDAY PLANNER THEME — polished (drop‑in)
   - Keeps your HTML and class names intact
   - Cleaner tokens, consistent shadows, responsive tweaks
   - Accessible focus rings & hover states
   - Optional .brand-logo support inside .nav
   ========================================================= */

/* 0) TOKENS & BASE --------------------------------------------------------- */
:root{
  /* Brand palette (HSL triplets) */
  --pink:   340 86% 61%;
  --purple: 267 74% 62%;
  --blue:   206 90% 57%;
  --mint:   172 65% 46%;
  --yellow:  44 100% 53%;
  --orange:  21 98% 56%;

  /* Surfaces & text */
  --bg:     0 0% 100%;
  --panel:  0 0% 100%;
  --ink:    228 14% 15%;
  --muted:  228 10% 40%;
  --border: 228 20% 88%;

  /* Layout scale */
  --radius:    14px;
  --radius-lg: 18px;
  --s1: clamp(6px,.6vw,10px);
  --s2: clamp(10px,.9vw,14px);
  --s3: clamp(14px,1.2vw,18px);
  --s4: clamp(18px,1.6vw,24px);
  --s5: clamp(24px,2.2vw,36px);

  /* Focus ring */
  --ring: 206 90% 57%;
  --ring-size: 3px;

  /* Elevation */
  --e1: 0 8px 22px hsl(228 30% 10% / .08);
  --e2: 0 14px 32px hsl(228 30% 10% / .14);

  /* Button glow */
  --btn-glow: 0 14px 36px hsl(var(--blue) / .30);
  --btn-glow-ring: 0 0 0 6px hsl(var(--blue) / .18);
}

*,*::before,*::after{ box-sizing: border-box }
html{ -webkit-text-size-adjust:100% }
body,h1,h2,h3,p{ margin:0 }
img,svg{ display:block; max-width:100% }
button,input,select,textarea{ font:inherit; color:inherit; outline:none }

/* 1) GLOBAL --------------------------------------------------------------- */
body{
  font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background:
    radial-gradient(20px 20px at 12% 10%, hsl(var(--yellow)/.16) 20%, transparent 21%) repeat,
    radial-gradient(24px 24px at 80% 22%, hsl(var(--blue)/.14) 18%, transparent 19%) repeat,
    linear-gradient(180deg, #fff, hsl(0 0% 99%));
  background-size: 220px 220px, 240px 240px, auto;
  color: hsl(var(--ink));
  line-height: 1.6;
}

h1,h2{
  text-align:center;
  font-weight:800;
  color:hsl(var(--ink));
  letter-spacing:-.02em;
}

/* 2) PANELS --------------------------------------------------------------- */
.container,.form-container{
  width:100%;
  max-width:1000px;
  margin: var(--s5) auto;
  background: hsl(var(--panel));
  padding: var(--s5);
  border-radius: var(--radius-lg);
  border: 1px solid hsl(var(--border));
  box-shadow: var(--e2);
  position: relative;
  overflow: hidden;
}

/* Subtle confetti as a decorative overlay (non-interactive) */
.container::before,.form-container::before{
  content:"";
  position:absolute; inset: -20% -10% auto auto; height:160px; width:160px;
  background:
    radial-gradient(circle at 20% 30%, hsl(var(--pink)) 5px, transparent 6px),
    radial-gradient(circle at 60% 60%, hsl(var(--mint)) 5px, transparent 6px),
    radial-gradient(circle at 80% 20%, hsl(var(--purple)) 5px, transparent 6px),
    radial-gradient(circle at 35% 80%, hsl(var(--orange)) 5px, transparent 6px);
  filter: blur(.2px); opacity:.25; transform: rotate(-12deg);
  pointer-events:none;
}

/* Universal focus ring */
:where(a,button,input,select,textarea,.fc .fc-button):focus-visible{
  box-shadow: 0 0 0 var(--ring-size) hsl(var(--ring)/.45);
  border-color: hsl(var(--ring));
}

/* 3) NAVIGATION ----------------------------------------------------------- */
.nav{
  position: sticky; top: 0; z-index: 30;
  background: hsl(var(--panel)/.85);
  -webkit-backdrop-filter: blur(8px) saturate(140%);
  backdrop-filter: blur(8px) saturate(140%);
  padding: var(--s2);
  text-align: center;
  border-bottom: 1px solid hsl(var(--border));
}
/* Optional logo image inside .nav */
.nav .brand-logo{
  height: 46px; width: 46px; object-fit: cover;
  border-radius: 50%;
  box-shadow: 0 6px 16px hsl(0 0% 0% / .15);
  vertical-align: middle; margin-right: 10px;
}
.nav a{
  display:inline-block; margin:6px 8px; text-decoration:none;
  padding: 10px 16px; color:#fff; font-weight:800;
  border-radius:999px; border:0;
  background: linear-gradient(90deg, hsl(var(--pink)), hsl(var(--blue)));
  box-shadow: 0 8px 18px hsl(206 90% 57% / .25);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.nav a:hover{ transform: translateY(-1px); filter: brightness(1.05) }

/* 4) FORMS --------------------------------------------------------------- */
label{
  display:block; margin: var(--s2) 0 var(--s1);
  font-weight:800; color:hsl(var(--muted));
}
input,select,textarea{
  width:100%; padding:12px 14px; margin-bottom: var(--s3);
  border:1px solid hsl(var(--border)); border-radius:12px; background:#fff;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
input::placeholder,textarea::placeholder{ color:hsl(var(--muted)/.8) }
input:hover,select:hover,textarea:hover{ border-color: hsl(var(--blue)) }
input:focus,select:focus,textarea:focus{
  border-color:hsl(var(--blue)); box-shadow: 0 0 0 var(--ring-size) hsl(var(--blue)/.35);
}

input[type="submit"],button{
  background: linear-gradient(90deg, hsl(var(--blue)), hsl(var(--purple)));
  color:#fff; font-weight:900; border:none; border-radius:999px;
  padding:12px 18px; cursor:pointer;
  box-shadow: 0 10px 24px hsl(206 90% 57% / .25);
  transition: transform .15s ease, filter .15s ease, opacity .15s ease, box-shadow .2s ease;
}
input[type="submit"]:hover,button:hover{ transform: translateY(-1px); filter: brightness(1.05) }
button[disabled],input[type="submit"][disabled]{ opacity:.6; cursor:not-allowed }

/* 5) BOOKING TABLE -------------------------------------------------------- */
.booking-table{
  border:1px solid hsl(var(--border)); border-radius: var(--radius);
  overflow:hidden; box-shadow: var(--e1); background:#fff; margin-top: var(--s3);
}
.booking-table table{ width:100%; border-collapse:collapse; background:transparent }
.booking-table th,.booking-table td{
  padding:14px 16px; border-bottom:1px solid hsl(var(--border)); text-align:center;
}
.booking-table th{
  color:#222; font-weight:900; letter-spacing:.02em; text-transform:uppercase;
  font-size:12px; background: linear-gradient(90deg, hsl(var(--yellow)), hsl(var(--mint)));
}
.booking-table tr:nth-child(even) td{ background:hsl(0 0% 98%) }
.booking-table tr:hover td{ background:hsl(206 90% 57% / .06) }

/* 6) ACTION BUTTONS ------------------------------------------------------- */
a.button{
  display:inline-flex; align-items:center; justify-content:center;
  padding:10px 14px; background: linear-gradient(90deg, hsl(var(--purple)), hsl(var(--pink)));
  color:#fff; text-decoration:none; border-radius:999px; font-size:14px; font-weight:800;
  box-shadow: 0 8px 18px hsl(267 74% 62% / .25);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
a.button:hover{ transform: translateY(-1px); filter: brightness(1.05) }
.action-links{ display:flex; justify-content:center; gap:10px; flex-wrap:wrap }

/* 7) FULLCALENDAR --------------------------------------------------------- */
#calendar{
  font-family: inherit; max-width:1000px; margin: var(--s5) auto;
  background:#fff; border-radius: var(--radius-lg); padding: var(--s3);
  border:1px solid hsl(var(--border)); box-shadow: var(--e2);
}
.fc .fc-toolbar-title{
  font-size: clamp(18px,1.8vw,24px); font-weight:900; color:hsl(var(--ink));
}
.fc .fc-col-header-cell{
  background: linear-gradient(90deg, hsl(var(--pink)), hsl(var(--blue)));
  color:#fff; font-weight:800; padding:8px 0; border:none;
}
.fc .fc-col-header-cell-cushion{ color:#fff !important; text-decoration:none }
.fc .fc-button{
  background: linear-gradient(90deg, hsl(var(--blue)), hsl(var(--purple)));
  border:0; border-radius:999px; padding:8px 12px; font-size:.9rem; font-weight:800; color:#fff;
  box-shadow: 0 8px 18px hsl(206 90% 57% / .25);
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.fc .fc-button:hover{ transform: translateY(-1px); filter: brightness(1.05) }
.fc .fc-button:disabled{ background:hsl(var(--border)); color:hsl(var(--muted)); box-shadow:none; cursor:not-allowed }
.fc .fc-today-button{ background: linear-gradient(90deg, hsl(var(--mint)), hsl(var(--yellow))) !important; color:#222 !important }
.fc .fc-daygrid-day-frame{ padding:6px; transition: background .12s ease, box-shadow .12s ease; border-radius:10px }
.fc .fc-daygrid-day-frame:hover{ background:hsl(206 90% 57% / .06) }
.fc .fc-day-today{ background:hsl(var(--blue) / .10) !important; outline:2px dashed hsl(var(--blue)) !important; outline-offset:-2px }
.fc .fc-event{
  border:none; border-radius:12px; padding:4px 8px; font-size:.85rem; font-weight:800; color:#222;
  background:
    linear-gradient(90deg, hsl(var(--yellow)/.9), hsl(var(--orange)/.9)),
    url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='6' cy='6' r='3' fill='%23ffffff22'/%3E%3C/svg%3E");
  box-shadow: 0 8px 18px hsl(21 98% 56% / .15);
  transition: transform .12s ease;
}
.fc .fc-event:hover{ transform: translateY(-1px) }
.fc-daygrid-day{ cursor:pointer }

/* 8) ICON CIRCLES (centering) -------------------------------------------- */
.sidebar li i:first-child,
.navbar li i:first-child,
.topbar .admin-icon i,
.header .admin-icon i,
.circle-icon{
  display:inline-block; width:32px; height:32px; line-height:32px; text-align:center;
  border-radius:50%; vertical-align:middle;
}
@media (max-width:1024px){
  .sidebar li i:first-child,.navbar li i:first-child,.topbar .admin-icon i,.header .admin-icon i,.circle-icon{
    width:28px; height:28px; line-height:28px;
  }
}
.sidebar li .circle,.nav .circle,.topbar .circle,.header .circle{
  display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:50%;
}
.sidebar li .circle>i,.nav .circle>i,.topbar .circle>i,.header .circle>i{ line-height:1 }

/* 9) UNIVERSAL BUTTON HOVER GLOW (keeps original colors) ------------------ */
:where(.nav a,
       button,.btn,.button,
       input[type="button"],input[type="submit"],
       .fc .fc-button,a.button){
  transition: box-shadow .25s ease, transform .15s ease, filter .25s ease;
  will-change: transform, box-shadow, filter;
}
:where(.nav a,
       button,.btn,.button,
       input[type="button"],input[type="submit"],
       .fc .fc-button,a.button):hover{
  box-shadow: var(--btn-glow), 0 8px 18px hsl(var(--blue) / .20);
  transform: translateY(-1px);
}
:where(button,.btn,.button,
       input[type="button"],input[type="submit"],
       a.btn,a.button):hover{
  filter:none; background:revert; color:inherit;
}
:where(.nav a,
       button,.btn,.button,
       input[type="button"],input[type="submit"],
       .fc .fc-button,a.button):active{
  transform: translateY(0);
  box-shadow: 0 6px 14px hsl(var(--blue) / .22);
}
:where(.nav a,
       button,.btn,.button,
       input[type="button"],input[type="submit"],
       .fc .fc-button,a.button):focus-visible{
  outline:2px solid transparent;
  box-shadow: 0 0 0 3px hsl(var(--ring) / .45), var(--btn-glow);
}

/* 10) RESPONSIVE ---------------------------------------------------------- */
@media (max-width:768px){
  .container,.form-container{ width:94%; padding: var(--s3) }
  .nav{ display:flex; flex-wrap:wrap; gap:8px; justify-content:center }
  .nav a{ flex: 1 1 auto; font-size:14px; padding:10px }
  .booking-table table{ display:block; width:100%; overflow-x:auto; border:0 }
  .booking-table th,.booking-table td{ font-size:14px; padding:10px }
  #calendar{ padding: var(--s3) }
}
@media (max-width:480px){
  h1,h2{ font-size:1.25rem }
  .nav a{ font-size:12px; padding:8px 10px }
  .booking-table th,.booking-table td{ font-size:12px; padding:8px }
}

/* 11) PRINT --------------------------------------------------------------- */
@media print{
  .nav{ display:none !important }
  .container,.form-container,#calendar{ border:1px solid #bbb; box-shadow:none; background:#fff }
}

/* Background image + transparency */
body{
  /* Image path (relative to /css/) */
  --bg-image: url('../uploads/Background.jpg');

  /* White tint on top of the image:
     lower = more image (e.g. .35), higher = less image (e.g. .75) */
  --bg-tint: rgba(255,255,255,.55);
}

/* Render the image + tint layers */
body::before{
  content:"";
  position: fixed; inset: 0;
  z-index: -2;
  background: var(--bg-image) center / cover no-repeat fixed;
  pointer-events: none;
}
body::after{
  content:"";
  position: fixed; inset: 0;
  z-index: -1;
  background: var(--bg-tint);
  pointer-events: none;
}