/* Villa Boutique Amani — themed date picker.
 *
 * Upgrades every <input type="date"> on the page into a brand-matched
 * calendar: cream card, teal ink, gold selection with the zellige star
 * behind it — the same language as the booking calendar.
 *
 * The native input keeps its value and name, so every existing form
 * submits exactly as before; only the presentation changes.
 */

/* The wrapper keeps the field's original layout footprint */
.amdp-wrap{position:relative;display:block}
.amdp-wrap.amdp-inline{display:inline-block}

/* The visible, read-only field the guest actually taps */
.amdp-field{
  width:100%;
  font:inherit;
  padding:11px 46px 11px 13px;
  border:1px solid #E0D5C7;
  border-radius:10px;
  background:#fff;
  color:#111;
  cursor:pointer;
  text-align:left;
  -webkit-appearance:none;appearance:none;
}
.amdp-field:hover{border-color:#C8A463}
.amdp-field:focus{outline:none;border-color:#C8A463;box-shadow:0 0 0 3px rgba(200,164,99,.16)}
/* "Select a date" is now the default state on the homepage (the fields no
   longer ship pre-filled), so this placeholder is what most visitors read
   first. #9B7E47 measured 3.84:1 on white — under the 4.5:1 AA floor. */
.amdp-field.amdp-empty{color:#8A6F3C}

/* Typing mode (fiche d'arrivée): the field is a real text box, so it needs a
   text caret rather than the pointer, and 16px so iPad Safari does not zoom
   the whole page when it gets focus. Tabular figures keep the digits from
   shifting sideways as the mask inserts its dashes. */
.amdp-field.amdp-typed{
  cursor:text;
  font-size:16px;
  font-variant-numeric:tabular-nums;
  letter-spacing:.02em;
}
.amdp-field.amdp-typed::placeholder{color:#8A6F3C;opacity:1}
/* Incomplete or impossible (31-02-2026): flagged, never silently discarded. */
.amdp-field.amdp-typed.amdp-bad{border-color:#a3402d;box-shadow:0 0 0 3px rgba(163,64,45,.14)}


/* Calendar glyph on the right of the box */
.amdp-ico{
  position:absolute;top:50%;right:4px;transform:translateY(-50%);
  width:40px;height:40px;border:0;background:transparent;padding:0;
  display:flex;align-items:center;justify-content:center;
  color:#9B7E47;cursor:pointer;border-radius:9px;transition:background .15s,color .15s;
}
.amdp-ico:hover{background:rgba(200,164,99,.14);color:#0E5A5A}
.amdp-ico svg{width:18px;height:18px}

/* ── The popup calendar ─────────────────────────────────────────────── */
.amdp-pop{
  position:absolute;z-index:1200;top:calc(100% + 6px);left:0;
  width:290px;max-width:calc(100vw - 24px);
  background:#FDFBF7;
  border:1px solid #E0D5C7;
  border-radius:16px;
  box-shadow:0 26px 60px -28px rgba(14,90,90,.5);
  padding:12px;
  display:none;
  font-family:'Jost',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
}
.amdp-pop.open{display:block;animation:amdpIn .18s cubic-bezier(.2,.7,.2,1) both}
.amdp-pop.amdp-up{top:auto;bottom:calc(100% + 6px)}
.amdp-pop.amdp-right{left:auto;right:0}
@keyframes amdpIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

/* Month header */
.amdp-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.amdp-nav{
  width:32px;height:32px;border:1px solid #E0D5C7;border-radius:9px;background:#fff;
  color:#0E5A5A;font-size:15px;line-height:1;cursor:pointer;
  display:flex;align-items:center;justify-content:center;transition:.15s;
}
.amdp-nav:hover{border-color:#C8A463;background:#FDFBF7}
.amdp-title{
  flex:1;text-align:center;font-family:'Cormorant Garamond',Georgia,serif;
  font-size:17px;font-weight:600;color:#0E5A5A;cursor:pointer;padding:4px 8px;border-radius:8px;
}
.amdp-title:hover{background:rgba(200,164,99,.12)}

/* Weekday row */
.amdp-dows{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.amdp-dows span{
  text-align:center;font-size:9px;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:#9B7E47;padding:5px 0;
}

/* Day grid */
.amdp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.amdp-day{
  position:relative;aspect-ratio:1;min-height:34px;
  display:flex;align-items:center;justify-content:center;
  border:1px solid transparent;border-radius:9px;background:transparent;
  color:#0E5A5A;font-size:13px;font-weight:500;cursor:pointer;
  transition:background .14s,border-color .14s,color .14s;
}
.amdp-day:hover:not(:disabled){background:rgba(200,164,99,.14);border-color:#C8A463}
.amdp-day.amdp-out{color:#C4BCAC;font-weight:400}
.amdp-day:disabled{color:#D5CEC0;cursor:not-allowed;background:transparent}
.amdp-day.amdp-today{border-color:#C8A463;font-weight:700}
/* Selected day carries the zellige star, matching the booking calendar */
.amdp-day.amdp-sel{
  background:linear-gradient(135deg,#e6cc93,#C8A463);
  color:#0E5A5A;font-weight:800;
  border-color:rgba(14,90,90,.3);
  box-shadow:0 6px 14px -7px rgba(200,164,99,.7);
  overflow:hidden;
}
.amdp-day.amdp-sel::before{
  content:"";position:absolute;inset:1px;border-radius:8px;
  background:url('/amani/zellige-teal.svg') center/26px no-repeat;
  opacity:.4;pointer-events:none;
}
.amdp-day.amdp-sel span{position:relative;z-index:1}

/* Footer shortcuts */
.amdp-foot{display:flex;gap:6px;margin-top:10px;padding-top:10px;border-top:1px solid #F0EBE0}
.amdp-foot button{
  flex:1;padding:8px;border:1px solid #E0D5C7;border-radius:99px;background:#fff;
  color:#0E5A5A;font-family:inherit;font-size:10px;font-weight:800;
  letter-spacing:.07em;text-transform:uppercase;cursor:pointer;transition:.15s;
}
.amdp-foot button:hover{border-color:#C8A463;background:#FDFBF7}
.amdp-foot .amdp-clear{color:#a3402d}

/* Year / month quick-jump panel */
.amdp-jump{display:none;grid-template-columns:repeat(3,1fr);gap:5px;max-height:214px;overflow-y:auto}
.amdp-pop.amdp-jumping .amdp-jump{display:grid}
.amdp-pop.amdp-jumping .amdp-dows,
.amdp-pop.amdp-jumping .amdp-grid{display:none}
.amdp-jump button{
  padding:9px 4px;border:1px solid #E0D5C7;border-radius:9px;background:#fff;
  color:#0E5A5A;font-family:inherit;font-size:12px;cursor:pointer;transition:.15s;
}
.amdp-jump button:hover{border-color:#C8A463;background:#FDFBF7}
.amdp-jump button.on{background:linear-gradient(135deg,#e6cc93,#C8A463);border-color:#C8A463;font-weight:800}

/* Phones: the calendar becomes a centred sheet so it is never clipped
   by a table cell or a short container. */
@media(max-width:560px){
  .amdp-pop{
    position:fixed;top:50%;left:50%;right:auto;bottom:auto;
    transform:translate(-50%,-50%);
    width:min(346px,calc(100vw - 24px));
    max-height:calc(100vh - 28px);overflow:auto;
    padding:14px;
  }
  /* The desktop flip classes (.amdp-up/.amdp-right) out-rank the sheet rule
     and threw the calendar above the viewport — on small screens the sheet is
     ALWAYS centered, whatever the opener decided. */
  .amdp-pop.amdp-up,.amdp-pop.amdp-right{
    top:50%;left:50%;right:auto;bottom:auto;transform:translate(-50%,-50%);
  }
  .amdp-pop.open{animation:amdpInM .2s cubic-bezier(.2,.7,.2,1) both}
  @keyframes amdpInM{from{opacity:0;transform:translate(-50%,-46%)}to{opacity:1;transform:translate(-50%,-50%)}}
  .amdp-day{min-height:44px;font-size:14.5px}
  /* Dim the page behind the sheet */
  .amdp-veil{
    position:fixed;inset:0;z-index:1199;background:rgba(14,90,90,.35);
    -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);
  }
}
/* The veil only exists on small screens */
.amdp-veil{display:none}
@media(max-width:560px){.amdp-veil.on{display:block}}

/* Dark owner theme support */
html[data-owner-theme="dark"] .amdp-field{background:#0f2323;color:#F7F4EE;border-color:#1B7676}
html[data-owner-theme="dark"] .amdp-pop{background:#152d2d;border-color:#1B7676}
html[data-owner-theme="dark"] .amdp-title,
html[data-owner-theme="dark"] .amdp-day{color:#e8dfcb}
html[data-owner-theme="dark"] .amdp-nav,
html[data-owner-theme="dark"] .amdp-foot button,
html[data-owner-theme="dark"] .amdp-jump button{background:#0f2323;color:#e8dfcb;border-color:#1B7676}
html[data-owner-theme="dark"] .amdp-day.amdp-out{color:#6d7a76}
html[data-owner-theme="dark"] .amdp-foot{border-top-color:#1B7676}

@media(prefers-reduced-motion:reduce){
  .amdp-pop.open{animation:none}
  .amdp-day,.amdp-nav,.amdp-foot button{transition:none}
}

/* Touch devices only, so the desktop look is untouched: the calendar glyph sits
   at 40px, just under the 44px a fingertip reliably hits — and on the villa's
   tablet it is right beside the field you are typing into, so a near miss opens
   the calendar over what you were doing. */
@media (pointer:coarse){
  .amdp-ico{width:46px;height:46px}
  .amdp-field{padding-right:52px}
}