/* ═══════════════════════════════════════════════════════════════════════════
   ACHARYA ANAND — Neumorphic custom form controls (date · time · select)
   Replaces the browser's native (un-themable) date calendar, time picker and
   select dropdown popups with on-brand neumorphic ones. Progressive enhancement:
   without JS (or on touch/mobile) the native controls remain. Tokens from styles.css.
   ═══════════════════════════════════════════════════════════════════════════ */

/* the original native input/select, hidden but present (keeps value + submits) */
.aa-native { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; opacity:0; pointer-events:none; }

.aa-ctl { position:relative; }

/* the visible faux field — mirrors .field / .form-input exactly */
.aa-faux { width:100%; border:none; outline:none; border-radius:14px; background:var(--stone);
  box-shadow:var(--inset); padding:14px 42px 14px 16px; font-family:var(--ui); font-size:14.5px;
  color:var(--ink); font-weight:500; text-align:left; cursor:pointer; position:relative;
  display:flex; align-items:center; min-height:49px; transition:box-shadow .2s; }
.aa-faux:hover { box-shadow:var(--inset),0 0 0 1px rgba(200,164,77,.18); }
.aa-faux.is-open { box-shadow:var(--inset-sm),0 0 0 2px rgba(217,119,6,.35); }
.aa-faux.is-ph { color:#8C7E64; font-weight:400; }   /* placeholder tone */
.aa-faux .aa-val { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
/* chevron / icon on the right */
.aa-faux::after { content:""; position:absolute; right:16px; top:50%; width:14px; height:14px;
  transform:translateY(-50%); background-repeat:no-repeat; background-position:center;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 9l6 6 6-6' stroke='%23C8A44D' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.aa-faux.aa-faux-date::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8A44D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2'/%3E%3Cline x1='16' y1='2' x2='16' y2='6'/%3E%3Cline x1='8' y1='2' x2='8' y2='6'/%3E%3Cline x1='3' y1='10' x2='21' y2='10'/%3E%3C/svg%3E"); }
.aa-faux.aa-faux-time::after { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23C8A44D' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpolyline points='12 7 12 12 15 14'/%3E%3C/svg%3E"); }
.aa-faux.is-open::after { transform:translateY(-50%) rotate(180deg); }
.aa-faux.aa-faux-date.is-open::after, .aa-faux.aa-faux-time.is-open::after { transform:translateY(-50%); }

/* ── the floating popup (calendar / option list / time) ── */
.aa-pop { position:absolute; z-index:9990; min-width:230px; background:var(--stone-2);
  border-radius:18px; box-shadow:12px 12px 28px var(--dark),-9px -9px 22px var(--light),0 0 0 1px var(--line);
  padding:14px; font-family:var(--ui); animation:aaPop .16s ease both; }
@keyframes aaPop { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }

/* calendar */
.aa-cal-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:10px; gap:8px; }
.aa-cal-title { font-family:var(--disp); font-size:17px; font-weight:700; color:var(--ink); }
.aa-nav { width:34px; height:34px; border:none; border-radius:50%; background:var(--stone); cursor:pointer;
  box-shadow:var(--raise-sm); display:flex; align-items:center; justify-content:center; color:var(--navy-800);
  transition:box-shadow .15s,transform .15s; flex-shrink:0; }
.aa-nav:hover { box-shadow:var(--inset-sm); color:var(--saf); }
.aa-nav:active { transform:scale(.94); }
.aa-cal-grid { display:grid; grid-template-columns:repeat(7,1fr); gap:2px; }
.aa-wd { font-size:11px; font-weight:600; color:var(--muted); text-align:center; padding:4px 0; }
.aa-day { aspect-ratio:1; border:none; background:transparent; border-radius:10px; cursor:pointer;
  font-family:var(--ui); font-size:13px; color:var(--ink-2); font-weight:500; transition:background .12s,box-shadow .12s,color .12s; }
.aa-day:hover { box-shadow:var(--raise-sm); color:var(--ink); }
.aa-day.aa-other { color:var(--dark); }
.aa-day.aa-today { box-shadow:inset 0 0 0 1.5px var(--gold); color:var(--saf-2); font-weight:700; }
.aa-day.aa-sel { background:var(--g-cta); color:#fff !important; font-weight:700; box-shadow:3px 3px 8px rgba(180,98,12,.3); }
.aa-cal-foot { display:flex; justify-content:space-between; margin-top:10px; padding-top:8px; border-top:1px solid var(--line); }
.aa-link { background:none; border:none; cursor:pointer; font-family:var(--ui); font-size:12.5px; font-weight:600; color:var(--saf); padding:4px 6px; border-radius:8px; }
.aa-link:hover { color:var(--saf-2); background:rgba(217,119,6,.08); }
/* year/month quick-select strip */
.aa-cal-yr { display:none; max-height:188px; overflow-y:auto; grid-template-columns:repeat(4,1fr); gap:6px; padding:2px; }
.aa-cal.show-yr .aa-cal-grid, .aa-cal.show-yr .aa-wd-row { display:none; }
.aa-cal.show-yr .aa-cal-yr { display:grid; }
.aa-yr { border:none; background:var(--stone); border-radius:10px; padding:9px 0; cursor:pointer; font-family:var(--ui); font-size:13px; font-weight:600; color:var(--ink-2); box-shadow:var(--raise-sm); }
.aa-yr:hover { box-shadow:var(--inset-sm); color:var(--saf); }
.aa-yr.aa-sel { background:var(--g-cta); color:#fff; }
.aa-cal-title { cursor:pointer; }

/* select option list */
.aa-opts { max-height:264px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; }
.aa-opt { text-align:left; border:none; background:transparent; border-radius:10px; padding:10px 12px; cursor:pointer;
  font-family:var(--ui); font-size:14px; color:var(--ink-2); font-weight:500; transition:background .12s,box-shadow .12s; }
.aa-opt:hover { box-shadow:var(--raise-sm); color:var(--ink); }
.aa-opt.aa-sel { background:var(--g-cta); color:#fff; font-weight:600; }
.aa-opt.aa-opt-ph { color:#8C7E64; font-weight:400; }

/* time picker: hour + minute columns */
.aa-time { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.aa-time-col { display:flex; flex-direction:column; }
.aa-time-lab { font-size:11px; font-weight:600; color:var(--muted); text-align:center; margin-bottom:6px; letter-spacing:.04em; }
.aa-time-list { max-height:180px; overflow-y:auto; display:flex; flex-direction:column; gap:2px; padding-right:2px; }
.aa-tcell { border:none; background:transparent; border-radius:8px; padding:7px 0; cursor:pointer; font-family:var(--ui); font-size:13.5px; color:var(--ink-2); font-weight:500; transition:background .12s,box-shadow .12s; }
.aa-tcell:hover { box-shadow:var(--raise-sm); color:var(--ink); }
.aa-tcell.aa-sel { background:var(--g-cta); color:#fff; font-weight:700; }

/* tidy neumorphic scrollbars inside popups */
.aa-opts::-webkit-scrollbar, .aa-time-list::-webkit-scrollbar, .aa-cal-yr::-webkit-scrollbar { width:8px; }
.aa-opts::-webkit-scrollbar-thumb, .aa-time-list::-webkit-scrollbar-thumb, .aa-cal-yr::-webkit-scrollbar-thumb { background:var(--dark); border-radius:8px; }

/* On dark surfaces (e.g. the dark booking/kundli card), faux fields keep the light field look — that's intentional (matches native .field on dark cards). */