/* ============================================================================
   fm-datepicker.css — shared brand date picker
   ----------------------------------------------------------------------------
   Pairs with fm-datepicker.js. Ungated: the component is used on any page that
   needs a date, with or without fm_shell.

   The delivery-date picker's styles currently live in a <style> block inside
   view/cart/basket.php. When that page migrates to this component, delete the
   .fm-datefield / .fm-datepop rules from that block — these supersede them.
   ========================================================================== */

:root{
  --fmd-blue1:#0061fe; --fmd-blue2:#0039c7; --fmd-blue4:#87c2ff; --fmd-blue5:#e8effd;
  --fmd-navy:#121d3c;  --fmd-neon:#ccff00;
  --fmd-navy60:rgba(18,29,60,.6); --fmd-navy30:rgba(18,29,60,.3);
  --fmd-font:'Ambit','Open Sans','Helvetica Neue',Arial,sans-serif;
}

.fm-datefield{font-family:var(--fmd-font);display:inline-block;max-width:100%}
.fm-datefield__label{display:block;font-size:12px;font-weight:700;color:var(--fmd-navy60);margin-bottom:6px}
.fm-datefield__control{position:relative;display:inline-flex;align-items:center;max-width:100%}

.fm-datefield__display{
  width:190px;max-width:100%;height:44px;
  padding:0 44px 0 16px;
  border:2px solid var(--fmd-blue4);
  border-radius:60px;
  font-family:var(--fmd-font);font-size:14px;color:var(--fmd-navy);
  background:#fff;outline:none;cursor:pointer;
  transition:border-color .15s ease,box-shadow .15s ease;
}
.fm-datefield__display::placeholder{color:var(--fmd-navy30)}
.fm-datefield__display:focus{border-color:var(--fmd-blue1);box-shadow:0 0 0 3px rgba(0,97,254,.15)}

.fm-datefield__btn{
  position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:32px;height:32px;border:0;background:none;padding:0;cursor:pointer;
  display:flex;align-items:center;justify-content:center;color:var(--fmd-blue1);
}
.fm-datefield__btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2}
.fm-datefield__btn:focus-visible{outline:2px solid var(--fmd-blue1);outline-offset:2px;border-radius:50%}

/* ------------------------------- popover -------------------------------- */
.fm-datepop{
  position:absolute;top:calc(100% + 8px);left:0;z-index:1200;
  width:288px;padding:14px;
  background:#fff;
  border:1px solid var(--fmd-blue5);
  border-radius:20px;
  box-shadow:0 18px 48px rgba(18,29,60,.18);
  font-family:var(--fmd-font);
}
.fm-datepop[hidden]{display:none}

.fm-datepop__head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:10px}
.fm-datepop__label{font-size:14px;font-weight:700;color:var(--fmd-navy)}
.fm-datepop__nav{
  width:32px;height:32px;border:0;background:none;border-radius:50%;cursor:pointer;
  color:var(--fmd-blue1);display:flex;align-items:center;justify-content:center;
  transition:background .12s ease;
}
.fm-datepop__nav:hover:not([disabled]){background:var(--fmd-blue5)}
.fm-datepop__nav[disabled]{opacity:.3;cursor:not-allowed}

.fm-datepop__grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.fm-datepop__dow{
  text-align:center;font-size:10px;font-weight:700;letter-spacing:.5px;
  color:var(--fmd-navy30);text-transform:uppercase;padding:4px 0 6px;
}
.fm-datepop__blank{height:34px}
.fm-datepop__day{
  height:34px;border:0;background:none;border-radius:10px;cursor:pointer;
  font-family:var(--fmd-font);font-size:13px;color:var(--fmd-navy);
  display:flex;align-items:center;justify-content:center;
  transition:background .12s ease,color .12s ease;
}
.fm-datepop__day:hover:not([disabled]){background:var(--fmd-blue5);color:var(--fmd-blue1)}
.fm-datepop__day[disabled]{color:var(--fmd-navy30);opacity:.45;cursor:not-allowed}
.fm-datepop__day--today{box-shadow:inset 0 0 0 1.5px var(--fmd-blue4)}
.fm-datepop__day--sel,
.fm-datepop__day--sel:hover{background:var(--fmd-blue1);color:#fff;font-weight:700}
.fm-datepop__day:focus-visible{outline:2px solid var(--fmd-navy);outline-offset:-2px}

.fm-datepop__foot{
  display:flex;justify-content:space-between;gap:8px;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--fmd-blue5);
}
.fm-datepop__link{
  border:0;background:none;padding:4px 6px;cursor:pointer;
  font-family:var(--fmd-font);font-size:12px;color:var(--fmd-blue1);border-radius:8px;
}
.fm-datepop__link:hover{background:var(--fmd-blue5)}
.fm-datepop__link:focus-visible{outline:2px solid var(--fmd-blue1);outline-offset:1px}

/* a range pair sitting side by side */
.fm-daterange{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.fm-daterange__sep{padding-bottom:12px;font-size:13px;color:var(--fmd-navy60)}

@media (max-width:520px){
  .fm-datefield,.fm-datefield__control,.fm-datefield__display{width:100%}
  .fm-datepop{width:calc(100vw - 48px);max-width:300px}
  .fm-daterange{gap:10px}
  .fm-daterange > .fm-datefield{flex:1 1 100%}
  .fm-daterange__sep{display:none}
}

@media (prefers-reduced-motion:reduce){
  .fm-datefield__display,.fm-datepop__nav,.fm-datepop__day{transition:none}
}