/* =========================================================
   BIRTHDAY PLANNER THEME (drop-in only CSS)
   — Kekalkan HTML & class sedia ada
   — Ceria, bersih, accessible, mobile-first
   — Tanpa ubah struktur HTML / function
========================================================= */

/* 0) Token & asas */
:root{
  /* Palet ceria */
  --pink: 340 86% 61%;
  --purple: 267 74% 62%;
  --blue: 206 90% 57%;
  --mint: 172 65% 46%;
  --yellow: 44 100% 53%;
  --orange: 21 98% 56%;

  --bg: 0 0% 100%;
  --panel: 0 0% 100%;
  --ink: 228 14% 15%;
  --muted: 228 10% 40%;
  --border: 228 20% 88%;

  --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);

  --ring: 206 90% 57%;
  --ring-size: 3px;

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

*,*::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 }

/* ===========================
   Global Styles
   =========================== */
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: -0.02em;
}

.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;
}

/* Confetti halus di panel (pseudo-element, tak ubah HTML) */
.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;
}

/* Fokus universal */
: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));
}

/* ===========================
   Navigation Bar
   =========================== */
.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));
}
.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;
}
.nav a:hover{ transform: translateY(-1px); filter: brightness(1.05) }

/* ===========================
   Form Styles
   =========================== */
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;
}
input[type="submit"]:hover, button:hover{ transform: translateY(-1px); filter: brightness(1.05) }
button[disabled], input[type="submit"][disabled]{ opacity: .6; cursor: not-allowed }

/* ===========================
   Booking Table Styles (scoped)
   =========================== */
.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) }

/* ===========================
   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;
}
a.button:hover{ transform: translateY(-1px); filter: brightness(1.05) }
.action-links{
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
}

/* ===========================
   FullCalendar Custom Styles
   =========================== */
#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);
}

/* Header title */
.fc .fc-toolbar-title{
  font-size: clamp(18px,1.8vw,24px);
  font-weight: 900;
  color: hsl(var(--ink));
}

/* Day header row (Mon, Tue…) */
.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;
}

/* Calendar buttons */
.fc .fc-button{
  background: linear-gradient(90deg, hsl(var(--blue)), hsl(var(--purple)));
  border: 0;
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 0.9rem;
  font-weight: 800;
  color:#fff;
  text-transform: none;
  box-shadow: 0 8px 18px hsl(206 90% 57% / .25);
  transition: transform .15s ease, filter .15s 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;
}

/* Today button — hijau segar */
.fc .fc-today-button{
  background: linear-gradient(90deg, hsl(var(--mint)), hsl(var(--yellow))) !important;
  color:#222 !important;
}

/* Day cells */
.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);
}

/* Today highlight */
.fc .fc-day-today{
  background: hsl(var(--blue) / .10) !important;
  outline: 2px dashed hsl(var(--blue)) !important;
  outline-offset: -2px;
}

/* Events */
.fc .fc-event{
  border: none;
  border-radius: 12px;
  padding: 4px 8px;
  font-size: 0.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) }

/* Empty date cursor */
.fc-daygrid-day{ cursor: pointer; }

/* ===========================
   Mobile Responsive Styles
   =========================== */
@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 }
}

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