/* ===============================
   GLOBAL SCALE & TOKENS
   =============================== */
:root{
  /* type scale (clamp keeps things sane across screens) */
  --font-xs: clamp(.75rem, .7rem + .2vw, .85rem);
  --font-sm: clamp(.875rem, .82rem + .25vw, 1rem);
  --font-md: clamp(1rem, .95rem + .3vw, 1.125rem);
  --font-lg: clamp(1.125rem, 1.05rem + .5vw, 1.375rem);
  --font-xl: clamp(1.375rem, 1.2rem + .9vw, 1.875rem);

  /* spacing scale */
  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.25rem;
  --space-6: 1.5rem;

  /* radius */
  --r-4: 4px;
  --r-6: 6px;
  --r-8: 8px;
  --r-12: 12px;

  /* colors */
  --ink: #0b1020;
  --muted: #6b7280;
  --panel: #ffffff;
  --glass: rgba(255,255,255,.2);
  --glass-border: rgba(255,255,255,.25);
  --accent: #5f5fff;
  --accent-2: #1838a3;

  /* backdrops */
  --blur-sm: 8px;
  --blur-md: 12px;

  /* z-index map */
  --z-modal-bg: 9000;
  --z-modal: 9010;
  --z-modal-close: 9020;

  /* timing */
  --t-fast: .2s;
  --t-med: .35s;
    --fp-cyan: rgb(147,208,208);
  --fp-ink: aliceblue;
  --fp-accent: #3b82f6;         /* selected */
  --fp-accent-ink: #ffffff;
  --fp-muted: #bfc7d3;
  --fp-disabled: #a0a0a0;
  --fp-bg: transparent;

  --fp-radius: 6px;
  --fp-gap: .25rem;
  --fp-font: 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; 
  --bc-ink:#eaf0ff;
  --bc-soft:#cbd7ff;
  --bc-muted:#9db3e8;
  --bc-bg: rgba(255,255,255,.08);
  --bc-line: rgba(255,255,255,.18);
  --bc-accent:#4f7dff;
  --bc-accent-2:#2b57db;
  --bc-black:#0a0f23;

  --r4:8px; --r6:10px;
  --gap: .6rem;
  --shadow: 0 10px 30px rgba(0,0,0,.35);
  --font: 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
}

/* ===== Container (narrow) ===== */
.booking-compact{
  width: min(100%, 360px);
  margin: 8px auto;
  background: var(--bc-bg);
  border: 1px solid var(--bc-line);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  color: var(--bc-ink);
  font: var(--font);
  box-shadow: var(--shadow);
  display: grid;
  grid-template-rows: auto auto 1fr auto;
  gap: .25rem;
  padding: .75rem;
}

/* Header */
.bc-head{ text-align:center; padding: .25rem .25rem .5rem }
.bc-title{ margin:0; font-weight:700; font-size: 1.05rem; color:#dbe7ff }
.bc-sub{ margin:.15rem 0 0; font-size:.85rem; color:var(--bc-soft) }

/* Step pills */
.bc-steps{
  display:flex; justify-content:center; gap:.4rem; padding:.25rem 0 .35rem;
}
.bc-step{
  width:28px; height:28px; border-radius:50%;
  border:none; color:var(--bc-ink); background:transparent;
  display:grid; place-items:center; cursor:pointer; font-weight:700;
  transition: background .2s ease, border-color .2s ease, transform .1s ease;
}
.bc-step:hover{ border-color:transparent }
.bc-step.is-active{ background:linear-gradient(0deg, var(--bc-accent) 0%, transparent 30%);}

/* Panels (only one visible) */
.bc-pane{ display:none; }
.bc-pane.is-active{ display:block; }

/* Section title */
.bc-sec{ margin:.25rem 0 .5rem; font-size:.95rem }

/* Form fields */
.bc-form{ display:grid; gap:.45rem }
.bc-label{ font-weight:600; color:#dfe7ff; font-size:.95rem }
.bc-input,.bc-textarea{
  width:100%; padding:.55rem .65rem; border-radius: var(--r4);
  border:1px solid #8fb5ff; background:#fff; color:#112a57; outline:none;
  transition: border-color .2s ease, box-shadow .2s ease;
  width: 100%;
  padding: .6rem .75rem;
  font-size: var(--font-sm);
  color:#fff;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-6);
  backdrop-filter: blur(var(--blur-sm));
}
.bc-input:focus,.bc-textarea:focus{
  border-color: var(--bc-accent);
  box-shadow: 0 0 0 3px rgba(79,125,255,.25);
}
.bc-textarea{ min-height: 84px; resize: vertical }
.bc-input::placeholder,
.bc-textarea::placeholder{ color:#fff; opacity:.85 }
/* Time grid (2 columns) */
.bc-timegrid{
  display:grid; grid-template-columns: repeat(2,1fr); gap:.45rem;
}
.bc-time{
  padding:.5rem .4rem; border-radius: var(--r4);
  border:1px solid #8fb5ff; background:transparent; color:#e2ecff;
  font-weight:600; cursor:pointer; transition: background .2s ease, color .2s ease;
}
.bc-time:hover{ background:#d2e2ff; color:#0c1a38 }
.bc-time.is-selected{ background:var(--bc-accent); color:#fff; border-color:var(--bc-accent) }

.bc-tz{ text-align:center; color:var(--bc-muted); margin:.35rem 0 .5rem }

/* Footer nav */
.bc-nav{
  display:flex; gap:.5rem; justify-content:space-between; padding-top:.35rem;
}
.bc-navbtn{
  flex:1; padding:.55rem .65rem; border-radius: var(--r6);
  border:1px solid var(--bc-soft); background:#1d2952; color:#eaf0ff; cursor:pointer;
  transition: filter .2s ease;
}
.bc-navbtn[disabled]{ opacity:.45; cursor:not-allowed }
.bc-navbtn--primary{
  border:none; background: linear-gradient(90deg, var(--bc-accent-2), var(--bc-accent)); font-weight:700;
}
.bc-navbtn:hover:not([disabled]){ filter: brightness(1.08) }

/* Primary submit */
.bc-btn{
  width:100%; padding:.65rem .75rem; border:none; border-radius: var(--r6);
  background: linear-gradient(90deg, var(--bc-accent-2), var(--bc-accent));
  color:#fff; font-weight:700; cursor:pointer; transition: filter .2s ease;
}
.bc-btn:hover{ filter: brightness(1.06) }

/* Modal (kept tiny) */
.bc-modal{ position:fixed; inset:0; display:grid; place-items:center; background:rgba(0,0,0,.55); z-index:9999 }
.bc-modal[hidden]{ display:none }
.bc-modal__content{
  width:220px; padding:1rem; background:rgba(21,27,61,.92); border:1px solid var(--bc-line);
  border-radius:12px; color:#eaf0ff; display:grid; gap:.6rem; justify-items:center;
}
.bc-modal__content--sm{ width:260px }
.bc-modal__txt,.bc-modal__msg{ margin:0; text-align:center }
.bc-spinner{ width:40px; height:40px; border-radius:50%; border:4px solid #e6ecff; border-top-color:#2b57db; animation:spin 1s linear infinite }
@keyframes spin{ to{ transform: rotate(360deg) } }

/* Flatpickr fit for narrow area */
.flatpickr-calendar{ border:none !important; box-shadow:none !important; background:transparent !important; color:var(--bc-ink) !important }
.flatpickr-calendar.inline{ margin-top:.35rem !important; max-width:100% !important; }
.dayContainer{ display:grid !important; grid-template-columns:repeat(7,1fr) !important; grid-auto-rows: 1.8rem !important; gap:.25rem !important }
.flatpickr-day{ width:100% !important; height:100% !important; line-height:1.8rem !important; border-radius:8px !important; color:var(--bc-ink) !important; background:transparent !important }
.flatpickr-day.selected{ background: var(--bc-accent) !important; color:#fff !important }
.flatpickr-weekday{ color:#a9c8ff !important; text-align:center !important; font-weight:600 !important }
.flatpickr-prev-month, .flatpickr-next-month{ color:#a9c8ff !important }

/* better defaults */
*,
*::before,
*::after{ box-sizing: border-box }
html,body{ height:100% }
body{
  margin:0;
  color:var(--panel);
  background:#000;
  font: 400 var(--font-md)/1.5 system-ui, -apple-system, Segoe UI, Roboto, Inter, Arial, sans-serif;
}

/* motion respect */
@media (prefers-reduced-motion: reduce){
  *{ animation: none !important; transition: none !important }
}

/* ===============================
   MODAL OVERLAY
   =============================== */

/* single definition (removed duplicates) */
#modalOverlay{
  position: fixed;
  inset: 0;
  display: none;              /* toggle via JS */
  align-items: center;
  justify-content: center;
  background: rgba(0,0,0,.75);
  z-index: var(--z-modal-bg);
  pointer-events: auto;
}

/* visible state helper (optional) */
#modalOverlay.is-open{ display:flex }

/* MODAL PANEL */
#modal{
  position: relative;
  width: min(92vw, 520px);
  max-height: min(90vh, 780px);
  overflow: hidden;
  border-radius: var(--r-8);
  background: color-mix(in oklab, var(--accent-2) 20%, transparent);
  backdrop-filter: blur(var(--blur-sm));
  border: 1px solid rgba(255,255,255,.12);
  padding: var(--space-5);
  text-align: left;
  z-index: var(--z-modal);
}

/* optional compact mode if you need the tiny chip look */
#modal.is-compact{
  width: 7.5rem; max-width: 7.5rem;
  padding: var(--space-2);
  text-align: center;
}

/* close button */
#modal .close{
  position: absolute;
  top: var(--space-2);
  right: var(--space-2);
  background: none;
  border: 0;
  color: #ebebff;
  font-size: var(--font-lg);
  line-height: 1;
  cursor: pointer;
  z-index: var(--z-modal-close);
}

/* headings + copy */
#modal h2{
  margin: 0 0 var(--space-3);
  font-size: var(--font-xl);
  font-weight: 700;
}
#modal p{
  margin: 0 0 var(--space-3);
  font-size: var(--font-sm);
  color: #e8ecff;
}

/* decorative shapes (kept, but isolated & sized) */
.modal-shapes{
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}
.modal-shapes .shape{
  position: absolute;
  border-radius: 50%;
  background: rgba(24,56,163,.22);
  backdrop-filter: blur(var(--blur-md));
}
.modal-shapes .circle-small{  width: 64px;  height: 64px;  top: 12px;  right: 12px; }
.modal-shapes .circle-medium{ width: 96px;  height: 96px;  bottom: 16px; right: 16px; }
.modal-shapes .circle-large{  width: 140px; height: 140px; bottom: 24px; left: 24px; }

/* ===============================
   GENERIC MODAL FORM
   =============================== */
.modal-form{
  display: grid;
  gap: var(--space-3);
  position: relative;
  z-index: 1; /* above shapes */
}
.modal-form .form-group{ margin: 0 }

.modal-form label{
  display:block;
  margin-bottom: var(--space-1);
  font-size: var(--font-sm);
  color: #eaf1ff;
}

.modal-form input,
.modal-form textarea,
.modal-form select{
  width: 100%;
  padding: .65rem .75rem;
  font-size: var(--font-sm);
  color:#000;
  background:#fff;
  border:1px solid #d0d5dd;
  border-radius: var(--r-6);
}
.modal-form textarea{ resize: vertical; min-height: 120px }

/* submit */
.btn-submit{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:.5ch;
  padding: .6rem .9rem;
  font-weight: 700;
  font-size: var(--font-sm);
  color:#222;
  background:#ffb600;
  border:0;
  border-radius: var(--r-6);
  cursor:pointer;
  transition: filter var(--t-fast) ease;
}
.btn-submit:hover{ filter: brightness(1.08) }
.btn-submit:active{ filter: brightness(.96) }

/* disclaimer */
.disclaimer{
  margin-top: var(--space-2);
  font-size: var(--font-xs);
  color:#c7cad3;
  line-height:1.4;
}

/* small screens */
@media (max-width: 480px){
  #modal{ width: 94vw; padding: var(--space-4) }
  #modal h2{ font-size: var(--font-lg) }
  .btn-submit{ width:100% }
}

/* ===============================
   FIND CONSULTANT CARD (fc-*)
   =============================== */
.find-consultant{
  width: min(92vw, 480px);
  margin: var(--space-5) auto;
  padding: var(--space-4);
  color:#fff;
  background: transparent;
  border-radius: var(--r-12);
  position: relative;
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(var(--blur-sm));
}

.fc-header{ position:relative; margin-bottom: var(--space-3) }

.fc-circle{
  width: 64px; height:64px;
  border: 2px solid #fff;
  border-radius: 50%;
  display: grid; place-items:center;
  animation: fc-rotate 6s linear infinite;
  margin-inline: auto;
}
@keyframes fc-rotate{ to{ transform: rotate(360deg) } }

.fc-dot{
  position:absolute; left:50%; top:50%;
  width:6px; height:6px; border-radius:50%;
  background:#fff; transform: translate(-50%,-50%);
}

.fc-header h2{
  margin: var(--space-3) 0 0;
  font-size: var(--font-md);
  text-transform: lowercase;
  letter-spacing: .02em;
  text-align: center;
}

.fc-text{
  margin: var(--space-2) 0 var(--space-3);
  font-size: var(--font-sm);
  text-align:center;
}

.fc-form{ display:grid; gap: var(--space-3) }
.fc-row{ display:grid; grid-template-columns: 1fr 1fr; gap: var(--space-3) }

.fc-row input,
.fc-row select,
.fc-form textarea{
  width: 100%;
  padding: .6rem .75rem;
  font-size: var(--font-sm);
  color:#fff;
  background: var(--glass);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-6);
  backdrop-filter: blur(var(--blur-sm));
}
.fc-form textarea{ min-height: 120px; resize: vertical }

.fc-row select{
  appearance:none;
  background-image: url("data:image/svg+xml;charset=US-ASCII,%3csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3e%3cpath fill='%23FFF' d='M0,0 L5,6 L10,0 Z'/%3e%3c/svg%3e");
  background-repeat:no-repeat;
  background-position:right .6rem center;
  background-size:10px 6px;
}

/* placeholders */
.fc-row input::placeholder,
.fc-form textarea::placeholder{ color:#fff; opacity:.85 }

/* call-to-action */
.fc-form button{
  padding: .7rem .95rem;
  margin-top: var(--space-1);
  font-weight: 700;
  font-size: var(--font-sm);
  color:#fff;
  background: linear-gradient(90deg, #131354, #5f5fff);
  background-size: 200% 100%;
  background-position: left center;
  border:0;
  border-radius: var(--r-6);
  cursor:pointer;
  transition: background-position var(--t-med) ease;
}
.fc-form button:hover{ background-position: right center }

@media (max-width: 640px){
  .fc-row{ grid-template-columns: 1fr }
}

/* ===============================
   STEP TRACKER + MULTISTEP GRID
   =============================== */

/* container that can hold the flow */
.form-container{
  width: 100%;
  max-width: 920px;
  margin: 0 auto;
}

/* progress bar */
.progress-bar{
  height: 8px;
  width: 100%;
  background: #ffffff38;
  border-radius: var(--r-8);
  overflow: hidden;
  margin-bottom: var(--space-4);
}
.progress-bar .progress{
  height: 100%;
  width: 100%; /* update via JS */
  background: var(--accent);
  transition: width var(--t-med) ease;
}

h2.step-title{
    color: blue;
  margin: 0 0 var(--space-3);
  font-size: var(--font-lg);
  text-align: center;
}

/* options grid */
.options-grid{
  display:grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
@media (max-width: 900px){
  .options-grid{ grid-template-columns: repeat(2,1fr) }
}
@media (max-width: 560px){
  .options-grid{ grid-template-columns: 1fr }
}

.option-card{
  position: relative;
  padding: var(--space-4);
  text-align:center;
  background: var(--glass);
  border: 2px solid transparent;
  border-radius: var(--r-8);
  cursor: pointer;
  transition: transform var(--t-fast) ease, border-color var(--t-fast) ease;
  backdrop-filter: blur(var(--blur-sm));
}
.option-card:hover{ transform: translateY(-4px); border-color: #fff }

.option-card input{
  position:absolute; inset:0; opacity:0; pointer-events:none;
}

.option-card img{
  width: 56px; height:56px; object-fit: contain;
  margin-bottom: var(--space-2);
}
.option-card span{
  display:block; font-size: var(--font-sm);
}

.option-card:has(input:checked){
  border-color:#fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,.25) inset;
}

/* nav buttons */
.navigation-buttons{
  display:flex; gap: var(--space-3); justify-content: space-between;
}
.btn-back,.btn-next{
  padding: .65rem 1rem;
  font-size: var(--font-sm);
  color:#fff;
  border:0; border-radius: var(--r-8);
  cursor:pointer;
  background: linear-gradient(90deg, #131354, #5f5fff);
  background-size: 200% 100%;
  background-position: left center;
  transition: background-position var(--t-med) ease;
}
.btn-back:hover,.btn-next:hover{ background-position: right center }

/* step tracker */
.step-tracker{
  position: relative;
  display:flex; gap: var(--space-3);
  justify-content: space-between;
  max-width: 720px;
  margin: var(--space-4) auto;
}
.step-tracker::before{
  content:"";
  position:absolute; left:0; right:0; top:50%;
  height:2px; background:#555; transform: translateY(-50%);
  z-index:0;
}
.step-circle{
  position:relative; z-index:1;
  width: 34px; height:34px;
  display:grid; place-items:center;
  font-size: var(--font-sm);
  color:#fff;
  background:#2700a86d;
  border:2px solid #fff;
  border-radius:50%;
  cursor:pointer;
  transition: transform var(--t-fast) ease, background var(--t-fast) ease;
}
.step-circle.is-active{
  background: var(--accent);
  transform: scale(1.06);
}

/* ===============================
   SERVICES STRIP
   =============================== */
.services{
  position: relative;
  z-index: 1;
  display:flex;
  gap: var(--space-3);
  padding: clamp(1rem, 2vw, 2rem) clamp(.75rem, 1.5vw, 1.5rem);
  isolation: isolate;
}
.service-item{
  flex: 1 1 0;
  min-width: 220px;
  border-radius: var(--r-12);
  padding: var(--space-4);
  cursor: pointer;
  background: linear-gradient(-161deg,#252544,#aec7d3,#252544);
  border: 1px solid rgba(255,255,255,.35);
  backdrop-filter: blur(var(--blur-sm));
  transition: transform var(--t-med) ease, background var(--t-med) ease, opacity var(--t-med) ease;
  opacity:.85;
}
.service-item:hover{
  opacity:.95;
  transform: translateY(-6px);
  background: linear-gradient(161deg,#bad2d0,#000000,#252544);
}

.service-heading{
  margin: var(--space-5) 0 var(--space-3);
  font-size: var(--font-lg);
  line-height:1.2;
  text-align:center;
  transition: opacity var(--t-fast) ease;
}

.service-image-wrapper{
  width: 120px; height:120px;
  margin: 0 auto var(--space-3);
  position: relative;
  transition: transform var(--t-fast) ease;
}
.service-img{
  width: 100%; height:100%; object-fit: contain;
  transition: transform var(--t-med) ease;
  transform-origin: center;
}

.service-text{
  font-size: var(--font-md);
  text-align:center;
  pointer-events:none;
}

.service-description{
  margin-top: var(--space-3);
  font-size: var(--font-sm);
  line-height:1.5;
  opacity:0;
  transform: translateY(8px);
  transition: opacity var(--t-med) ease, transform var(--t-med) ease;
}

/* hover interactions */
.service-item:hover .service-heading{ opacity:0 }
.service-item:hover .service-image-wrapper{ transform: translateY(-8px) }
.service-item:hover .service-img{ transform: scale(1.15) rotate(12deg) }
.service-item:hover .service-description{ opacity:1; transform: translateY(-2px) }

@media (max-width: 900px){
  .services{ flex-wrap: wrap }
  .service-item{ min-width: calc(50% - var(--space-3)/2) }
}
@media (max-width: 560px){
  .service-item{ min-width: 100% }
}

/* ===============================
   OVERLAY FORM (ISOLATED)
   =============================== */
form.my-overlay-form{
  position: relative;
  isolation: isolate;
  z-index: 10;
  width: min(92vw, 960px);
  height: auto;            /* let content define height */
  margin: 0 auto;
  padding: var(--space-5);
  background: rgba(255,255,255,.08);
  border-left: 2px solid aliceblue;
  border-radius: var(--r-8);
  display:flex;
  align-items:center;
  justify-content:center;
  pointer-events: auto !important;
}
form.my-overlay-form *{ pointer-events: auto !important }

form.my-overlay-form .slide-text{
  position: relative;
  z-index: 11;
  max-width: 640px;
  color:#fff;
  backdrop-filter: blur(var(--blur-sm));
  padding: var(--space-4);
  border-radius: var(--r-8);
}

/* ===============================
   UTILS
   =============================== */
.hide{ display:none !important }
.center{ display:grid; place-items:center }
.max-w-sm{ max-width: 480px }
.max-w-md{ max-width: 720px }
.max-w-lg{ max-width: 960px }




.services * {
    color: #ffffff;
  pointer-events: auto !important;
}
  /* Hover effects */
  .service-item:hover .service-heading {
    opacity: 0;
  }
  .service-item:hover .service-image-wrapper {
    transform: translateY(calc(-1 * var(--lift)));
  }
 .service-item:hover .service-img {
  /* rotate 180° AND then move up 100px */
  transform: scale(1.5) translateY(-100px) rotate(270deg) ;
}

  .service-item:hover .service-description {
    opacity: 1;
    transform: translateY(-120px);
  }
  .service-item:hover .service-text {
    transform: scale(1.5) translateY(-145px);
  }
.service-img {
  transition: transform 0.4s ease;
  transform-origin: center center;
}

.service-heading,
.service-text,
.service-description {
  transition: opacity 0.4s ease,
              transform 0.4s ease;
}
/* =========================================
   FLATPICKR – CLEAN INLINE + POPUP THEME
   ========================================= */


/* ---- input sizing (kept fluid, capped) ---- */
.flatpickr-input{
  width: 100%;
  max-width: 250px;
  box-sizing: border-box;
  margin: 0 auto .5rem; /* centered with bottom space */
  font: var(--fp-font);
}

/* ---- base calendar (applies to popup & inline) ---- */
.flatpickr-calendar{
  border: none !important;
  box-shadow: none !important;
  background: var(--fp-bg) !important;
  color: var(--fp-ink) !important;
  font: var(--fp-font) !important;
}

/* ---- inline container: centered & sized ---- */
.flatpickr-calendar.inline{
  display: block !important;
  position: relative !important;
  margin: 0 auto !important;      /* center horizontally */
  width: auto !important;
  max-width: 380px !important;     /* tweak as needed */
  padding: .25rem .5rem;           /* breathing room */
  border: none !important;
  box-shadow: none !important;
  background: var(--fp-bg) !important;
}

/* =========================
   HEADER (month + arrows)
   ========================= */
.flatpickr-months{
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;   /* title centered */
  position: relative !important;
  padding: .25rem 0 !important;
  color: var(--fp-cyan) !important;
}
.flatpickr-months .flatpickr-month{
  font-size: .9rem !important;
  color: var(--fp-cyan) !important;
}
.flatpickr-current-month,
.flatpickr-year{
  color: var(--fp-cyan) !important;
}

/* arrows pinned to edges, stay cyan */
.flatpickr-prev-month,
.flatpickr-next-month{
  position: absolute !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--fp-cyan) !important;
}
.flatpickr-prev-month{ left: .5rem !important; }
.flatpickr-next-month{ right: .5rem !important; }

/* SVG arrow color enforcement */
.flatpickr-prev-month svg path,
.flatpickr-next-month svg path{
  stroke: var(--fp-cyan) !important;
  fill: var(--fp-cyan) !important;
}

/* =========================
   WEEKDAY LABELS ROW
   ========================= */
.flatpickr-weekdays{
  margin: 0 auto !important;
  padding: 0 !important;
  background: transparent !important;
  color: var(--fp-ink) !important;
}
.flatpickr-weekdaycontainer{
  display: grid !important;
  grid-template-columns: repeat(7,1fr) !important;
  gap: var(--fp-gap) !important;
}
.flatpickr-weekday{
  text-align: center !important;
  color: var(--fp-cyan) !important;
  font-weight: 600 !important;
}

/* =========================
   DAYS GRID (true 7-col)
   ========================= */
/* Flatpickr wraps days in .dayContainer inside .flatpickr-days */
.flatpickr-days{
  /* let inner .dayContainer handle the grid */
  padding: 0 !important;
  background: transparent !important;
}
.dayContainer{
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-auto-rows: 2.1rem !important;    /* uniform height per tile */
  gap: var(--fp-gap) !important;
}

/* day tiles */
.flatpickr-day{
  width: 100% !important;
  height: 100% !important;
  margin: 0 !important;
  border-radius: var(--fp-radius) !important;
  line-height: 2.1rem !important;       /* vertical centering to match row height */
  font-size: .9rem !important;
  text-align: center !important;
  color: var(--fp-ink) !important;
  border: none !important;
  background: transparent !important;
}

/* today ring (subtle) */
.flatpickr-day.today{
  box-shadow: inset 0 0 0 2px var(--fp-cyan) !important;
  color: var(--fp-ink) !important;
}

/* selected & range states */
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background-color: var(--fp-accent) !important;
  color: var(--fp-accent-ink) !important;
}
.flatpickr-day.inRange{
  background: color-mix(in oklab, var(--fp-accent) 22%, transparent) !important;
  color: var(--fp-ink) !important;
}

/* hover feedback */
.flatpickr-day:hover{
  box-shadow: inset 0 0 0 2px var(--fp-accent) !important;
}

/* disabled days */
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{
  color: var(--fp-disabled) !important;
  cursor: not-allowed !important;
  opacity: .6 !important;
}

/* =========================
   INLINE-ONLY COLOR OVERRIDES
   ========================= */
.flatpickr-calendar.inline .flatpickr-day,
.flatpickr-calendar.inline .flatpickr-weekdays{
  color: var(--fp-ink) !important;
}

/* =========================
   RESPONSIVE TWEAKS
   ========================= */
@media (max-width: 640px){
  .flatpickr-calendar.inline{
    max-width: 320px !important;
    padding: .25rem .35rem;
  }
  .dayContainer{
    grid-auto-rows: 1.9rem !important;
  }
  .flatpickr-day{
    line-height: 1.9rem !important;
    font-size: .85rem !important;
  }
  .flatpickr-months .flatpickr-month{
    font-size: .85rem !important;
  }
}

/* =========================
   UTILITY: spin (if used)
   ========================= */
@keyframes spin{ to{ transform: rotate(360deg) } }
.animate-spin{ animation: spin 1s linear infinite; }
/* ===== Date input (the text field) ===== */
#inlineCalendar.flatpickr-input{
  width: 100%;
  max-width: 280px;
  padding: .55rem .75rem;
  color: #eaf0ff;
  background: linear-gradient(180deg, rgba(110,148,255,.22), rgba(50,86,210,.18));
  border: 1px solid rgba(173,197,255,.55);
  border-radius: 10px;
  outline: none;
  box-shadow: 0 6px 20px rgba(0,0,0,.18) inset, 0 1px 0 rgba(255,255,255,.12);
  transition: box-shadow .2s ease, border-color .2s ease, background .2s ease;
  backdrop-filter: blur(8px);
}
#inlineCalendar.flatpickr-input::placeholder{ color:#cfe0ff; opacity:.85 }
#inlineCalendar.flatpickr-input:focus{
  border-color: #7aa5ff;
  box-shadow: 0 0 0 3px rgba(86,130,255,.25), 0 6px 20px rgba(0,0,0,.18) inset;
}

/* ===== Calendar container ===== */
.flatpickr-calendar{
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  color: #eaf0ff !important;
  font: 14px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif !important;
}
.flatpickr-calendar.inline{
  margin-top:.35rem !important;
  padding:.25rem .35rem !important;
}

/* ===== Header (month + year) ===== */
.flatpickr-months{
  display:flex !important; align-items:center !important; justify-content:center !important;
  color:#bcd4ff !important; margin-bottom:.35rem !important;
}

/* Month dropdown */
.flatpickr-monthDropdown-months{
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  color:#0d1c44;
  background: rgba(255,255,255,.95);
  border:1px solid #8fb5ff;
  border-radius: 8px;
  padding:.35rem .6rem;
  margin-right:.4rem;
  cursor:pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,.6), 0 4px 16px rgba(19,45,120,.12);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath fill='%23122a6f' d='M1 2l5 5 5-5'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position: right .45rem center; background-size:12px 8px;
}
.flatpickr-monthDropdown-months:focus{ outline:none; border-color:#5f8cff; box-shadow:0 0 0 3px rgba(95,140,255,.25) }

/* Year input (spinners) */
.numInputWrapper{
  position: relative;
  display:inline-flex; align-items:center;
  border:1px solid #8fb5ff; border-radius:8px; overflow:hidden;
  background:#fff; color:#0d1c44;
}
.numInputWrapper input.numInput{
  width: 4.2rem !important;
  padding:.35rem .5rem;
  border:0; outline:0;
  color:#0d1c44;
  background:transparent;
  text-align:center;
  font-weight:600;
}
.numInputWrapper span.arrowUp,
.numInputWrapper span.arrowDown{
  border-left:1px solid #8fb5ff;
  width: 1.6rem; height:50%;
  background: linear-gradient(180deg,#f7faff,#eaf2ff);
  cursor:pointer;
}
.numInputWrapper span.arrowUp:hover,
.numInputWrapper span.arrowDown:hover{ background:#e7efff }

/* Prev/Next arrows color */
.flatpickr-prev-month, .flatpickr-next-month{ color:#bcd4ff !important }
.flatpickr-prev-month svg path, .flatpickr-next-month svg path{ fill:#bcd4ff !important; stroke:#bcd4ff !important }

/* ===== Weekdays row ===== */
.flatpickr-weekday{ color:#9fc0ff !important; font-weight:600 !important }

/* ===== Days grid (glass tiles) ===== */
.dayContainer{
  display:grid !important; grid-template-columns:repeat(7,1fr) !important; gap:.25rem !important;
}
.flatpickr-day{
  width:100% !important; height:2rem !important; line-height:2rem !important;
  margin:0 !important; text-align:center !important; border-radius:10px !important;
  color:#eaf0ff !important; background: rgba(255,255,255,.05) !important;
  border:1px solid rgba(173,197,255,.35) !important;
  transition: transform .12s ease, background .15s ease, border-color .15s ease;
  backdrop-filter: blur(6px);
}
.flatpickr-day:hover{ transform: translateY(-1px); background: rgba(173,197,255,.18) !important; border-color:#9fb9ff !important }
.flatpickr-day.today{ box-shadow: inset 0 0 0 2px #8fb5ff !important }
.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange{
  background:#4f7dff !important; color:#fff !important; border-color:#4f7dff !important;
}
.flatpickr-day.inRange{
  background: rgba(79,125,255,.25) !important; border-color: rgba(79,125,255,.35) !important;
}
.flatpickr-day.flatpickr-disabled,
.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay{ color:#9aa9d4 !important; opacity:.6 !important }
:root{
    --pg-gap: 14px;
    --pg-radius: 12px;
    --pg-bg: rgb(255, 255, 255);
    --pg-ink: #1551ea;
    --pg-line: transparent;
  }
  .pin-grid{
    position: relative;
    color: var(--pg-ink);
    font: 14px/1.45 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
    margin: 0 auto;
    max-width: 1100px;
  }
  .pin-grid__sticky{
    position: sticky;
    top: 0;
    height: 100vh;
    padding: 2rem 1rem;
    backdrop-filter: blur(6px);
    border-bottom: 1px solid var(--pg-line);
    display: grid;
    grid-template-columns: auto;
    align-content: start;
  }
  .pin-grid__title{
    margin: 0 0 .75rem;
    font-size: clamp(18px, 2vw, 28px);
    font-weight: 700;
    letter-spacing: .2px;
    color: #dce6ff;
  }
  .pin-grid__grid{
    list-style: none;
    padding: 0;
    margin: 0;
    height: 100%;
    overflow: hidden; /* we reveal by making rows visible, rest stays clipped */
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--pg-gap);
    align-content: start;
  }
  .card{
    height: 140px; /* your card height */
    border-radius: var(--pg-radius);
    background: var(--pg-bg);
    border: 1px solid var(--pg-line);
    display: grid; place-items: center;
    color:#9ec2ff; font-weight:700; font-size: 18px;

    /* reveal animation */
    opacity: 0;
    transform: translateY(14px);
    filter: blur(2px);
    transition: opacity .45s ease, transform .45s ease, filter .45s ease;
  }
  .card.is-visible{
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }

  /* each scroll "stage" is a viewport tall */
  .pin-grid__stages > .stage{
    height: 100vh;
  }

  @media (max-width: 640px){
    .card{ height: 120px }
    .pin-grid__grid{ grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  }