/* FDAS front-end membership ordering - e-commerce grid + basket + modal/sheet. */
:root{
  --fo-navy:#1a2b49; --fo-blue:#2c6ecb; --fo-ink:#23303f; --fo-muted:#6b7480;
  --fo-line:#e3e7ec; --fo-bg:#f6f7f9; --fo-radius:12px; --fo-green:#1f9d57; --fo-red:#c0392b;
}
#fdas-order *{box-sizing:border-box}
#fdas-order{max-width:1180px;margin:0 auto 40px;padding:0 16px;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;color:var(--fo-ink)}
#fdas-order h2{font-weight:800;color:var(--fo-navy)}
.fo-layout{display:grid;grid-template-columns:1fr 340px;gap:26px;align-items:start}
@media(max-width:880px){ .fo-layout{grid-template-columns:1fr} }

/* Membership grid */
.fo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:18px}
.fo-card{background:#fff;border:1px solid var(--fo-line);border-radius:var(--fo-radius);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 2px 10px rgba(16,24,40,.05)}
.fo-card-img{position:relative;aspect-ratio:16/10;background:#eef1f5 center/cover no-repeat;display:flex;align-items:center;justify-content:center}
.fo-card-img.is-empty{background:#f0f2f5}
/* logo.png is a wide canvas with the crest ink in the left ~25% (x:2-175 of 702)
   and the rest transparent. Crop to a square (cover) and pan with object-position
   so the crest lands dead-centre (its centre is ~12.6% across, so -4.8% here),
   then size it large and centre the box in the card image area. */
.fo-card-img.is-empty img{display:block;height:90%;aspect-ratio:1/1;width:auto;object-fit:cover;object-position:-4.8% center;margin:auto;opacity:.22;filter:grayscale(1)}
/* Delivery badge (top-left of the product image): digital vs posted card */
.fo-card-badge{position:absolute;top:10px;left:10px;z-index:1;display:inline-flex;align-items:center;gap:5px;
  padding:5px 10px;border-radius:999px;font-size:11px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
  color:#fff;line-height:1;box-shadow:0 1px 4px rgba(16,24,40,.25)}
.fo-card-badge svg{width:13px;height:13px}
.fo-card-badge.is-digital{background:var(--fo-green)}
.fo-card-badge.is-postal{background:var(--fo-navy)}
.fo-card-body{padding:16px;display:flex;flex-direction:column;gap:6px;flex:1}
.fo-card-name{font-weight:700;font-size:17px;color:var(--fo-navy)}
.fo-card-year{font-size:12px;color:var(--fo-muted);margin-top:-4px}
.fo-card-price{font-size:22px;font-weight:800;color:var(--fo-navy)}
.fo-card-note{font-size:12px;color:var(--fo-muted)}
.fo-card-waters{font-size:12px;color:var(--fo-muted);line-height:1.4}
.fo-card .fo-add{margin-top:auto;border:none;background:var(--fo-blue);color:#fff;padding:10px 16px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
.fo-card .fo-add:hover{background:#2560b4}

/* Basket */
.fo-basket{background:#fff;border:1px solid var(--fo-line);border-radius:var(--fo-radius);padding:18px;position:sticky;top:20px;box-shadow:0 2px 10px rgba(16,24,40,.05)}
.fo-basket h3{margin:0 0 12px;font-size:17px;color:var(--fo-navy)}
.fo-bitems{display:flex;flex-direction:column;gap:10px;margin-bottom:0}
.fo-bitem{display:flex;gap:10px;align-items:center;border-bottom:1px solid #f0f2f5;padding-bottom:10px}
.fo-bitem:last-child{border-bottom:none}
.fo-bthumb{width:46px;height:46px;border-radius:8px;object-fit:cover;background:#eef1f5;flex-shrink:0}
.fo-bthumb-ph{display:flex;align-items:center;justify-content:center;font-weight:700;font-size:15px;color:#fff;background:var(--fo-navy)}
.fo-bitem .meta{flex:1;min-width:0}
.fo-bitem .meta b{display:block;font-size:14px}
.fo-bitem .meta small{color:var(--fo-muted);font-size:12px}
.fo-bitem .price{font-weight:700;white-space:nowrap}
.fo-bitem .rm{background:none;border:none;color:var(--fo-red);cursor:pointer;font-size:16px;line-height:1}
.fo-bitem-fee .meta{padding-left:2px}
.fo-summary{margin-top:14px;padding-top:12px;border-top:2px solid var(--fo-line)}
.fo-fee .fo-line{display:flex;justify-content:space-between;color:var(--fo-muted);font-size:14px;padding:0 0 8px}
.fo-total{display:flex;justify-content:space-between;font-size:19px;font-weight:800;color:var(--fo-navy)}
.fo-empty{color:var(--fo-muted);font-size:14px;padding:10px 0}
.fo-email{margin:14px 0}
.fo-email label{display:block;font-size:13px;font-weight:600;margin-bottom:5px}
/* 16px, not 15: iOS Safari auto-zooms the page whenever a focused field computes
   under 16px, and the zoom is what threw the sheet around. Keep every focusable
   control in the ordering UI at 16px or larger. */
.fo-input{width:100%;padding:10px 12px;border:1px solid var(--fo-line);border-radius:9px;font-size:16px;background:#fff;color:var(--fo-ink);font-family:inherit}
.fo-input:focus{outline:none;border-color:var(--fo-blue);box-shadow:0 0 0 3px rgba(44,110,203,.15)}
/* Native date input: on touch devices datepicker.js swaps its dropdown for the
   OS picker, so a type=date field takes the place of the text one. Height is
   matched to the other fields, and nothing else is touched - in particular, do
   NOT set -webkit-appearance:none here: on Android Chrome that suppresses the
   built-in calendar indicator, which is the control that opens the OS picker. */
input[type="date"].fo-input{min-height:44px;line-height:1.2}
input[type="date"].fo-input::-webkit-date-and-time-value{text-align:left}
/* Date input: typeable, with a calendar-icon trigger on the right (datepicker.js). */
.el-dp-wrap{position:relative;display:block;width:100%}
.el-dp-wrap > input{width:100%;padding-right:42px}
.el-dp-icon{position:absolute;top:50%;right:5px;transform:translateY(-50%);display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;border:none;background:none;color:var(--fo-muted);cursor:pointer;border-radius:7px}
.el-dp-icon:hover{color:var(--fo-blue);background:rgba(44,110,203,.08)}
.el-dp-icon svg{width:18px;height:18px}
.fo-pay{width:100%;border:none;background:var(--fo-navy);color:#fff;padding:13px;border-radius:999px;font-size:15px;font-weight:500;cursor:pointer;margin-top:6px}
.fo-pay:disabled{opacity:.55;cursor:not-allowed}
.fo-secure{text-align:center;color:var(--fo-muted);font-size:12px;margin-top:10px}

/* Field + bottom-right validation (condensed) */
.fo-field{margin-bottom:4px}
.fo-field label{display:block;font-size:13px;font-weight:600;margin-bottom:2px}
.fo-field .fo-err{display:block;text-align:right;color:var(--fo-red);font-size:12px;min-height:0;margin-top:2px}
.fo-row{display:flex;gap:12px;flex-wrap:wrap}
.fo-copyaddr{display:inline-block;margin:0 0 10px;padding:7px 13px;border:1px solid var(--fo-blue);background:#eef4fd;color:var(--fo-blue);border-radius:999px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit}
.fo-copyaddr:hover{background:#e0ecfb}
/* "Same address as …" tickbox: pre-fills and collapses the address fields */
.fo-samecheck{display:flex;align-items:center;gap:10px;margin:0 0 12px;padding:12px 14px;border:1px solid var(--fo-line);border-radius:11px;background:var(--fo-bg);cursor:pointer;font-size:14px;color:var(--fo-ink);font-weight:500}
.fo-samecheck input{width:18px;height:18px;flex-shrink:0;accent-color:var(--fo-blue);cursor:pointer}
.fo-row > .fo-field{flex:1;min-width:160px}

/* Member photo dropzone */
.fo-photo{margin-top:4px}
.fo-photo .fo-dropzone{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px;
  width:100%;min-height:126px;padding:18px;text-align:center;cursor:pointer;
  border:2px dashed var(--fo-line);border-radius:11px;background:var(--fo-bg);color:var(--fo-muted);
  transition:border-color .15s ease,background .15s ease}
.fo-photo .fo-dropzone:hover{border-color:var(--fo-blue);background:#fff}
.fo-dz-icon{color:var(--fo-blue);line-height:0}
.fo-dz-text strong{display:block;font-size:14px;font-weight:600;color:var(--fo-ink)}
.fo-dz-text small{font-size:12px;color:var(--fo-muted)}
.fo-photo .fo-photoprev{display:none;width:84px;height:84px;border-radius:10px;object-fit:cover;border:1px solid var(--fo-line);flex-shrink:0}
.fo-photo .fo-dropzone.has-photo{flex-direction:row;justify-content:flex-start;text-align:left;min-height:0;gap:14px;background:#fff}
.fo-photo .fo-dropzone.has-photo .fo-photoprev{display:block}
.fo-photo .fo-dropzone.has-photo .fo-dz-icon{display:none}
.fo-photo .fo-dropzone.has-photo .fo-dz-text small{display:none}

/* Modal / iOS sheet */
/* Stay in the layout when closed (visibility, not display:none) so the panel can
   animate on the way IN and OUT. On close, visibility flips to hidden only after
   the slide-out finishes (the .36s delay). */
.fo-modal{position:fixed;inset:0;z-index:2000;visibility:hidden;transition:visibility 0s linear .36s}
.fo-modal.open{visibility:visible;transition-delay:0s}
.fo-modal-bd{position:absolute;inset:0;background:rgba(15,22,38,.55);opacity:0;transition:opacity .3s ease}
.fo-modal.open .fo-modal-bd{opacity:1}
.fo-modal-panel{position:absolute;top:50%;left:50%;transform:translate(-50%,-46%);opacity:0;width:560px;max-width:calc(100vw - 28px);max-height:calc(100vh - 56px);overflow:hidden;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.3);transition:opacity .25s ease,transform .34s cubic-bezier(.32,.72,0,1)}
.fo-modal.open .fo-modal-panel{transform:translate(-50%,-50%);opacity:1}
.fo-modal-head{flex:none;display:flex;align-items:center;justify-content:space-between;padding:18px 22px 14px}
.fo-modal-head h3{margin:0;font-size:18px;color:var(--fo-navy)}
.fo-modal-x{background:none;border:none;font-size:26px;line-height:1;color:var(--fo-muted);cursor:pointer}
/* Wizard step bar: sub-label + progress dots */
.fo-modal-steps{flex:none;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 22px 12px;border-bottom:1px solid var(--fo-line)}
.fo-modal-sub{font-size:12px;font-weight:600;letter-spacing:.02em;text-transform:uppercase;color:var(--fo-muted)}
.fo-dots{display:inline-flex;gap:6px}
.fo-dot{width:7px;height:7px;border-radius:50%;background:#d7dce3;transition:all .2s ease}
.fo-dot.is-done{background:var(--fo-blue);opacity:.5}
.fo-dot.is-on{background:var(--fo-blue);transform:scale(1.35)}
.fo-modal-body{padding:16px 22px;overflow-y:auto;flex:1 1 auto;-webkit-overflow-scrolling:touch}
.fo-modal-foot{flex:none;display:flex;gap:8px;align-items:center;padding:12px 22px;border-top:1px solid var(--fo-line)}
.fo-modal-foot .fo-modal-back{border:1px solid var(--fo-line);background:none;color:var(--fo-ink);padding:8px 16px;border-radius:999px;font-size:14px;font-weight:500;cursor:pointer}
.fo-modal-foot .fo-modal-next,.fo-modal-foot .fo-modal-save{margin-left:auto;border:none;background:var(--fo-blue);color:#fff;padding:9px 22px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer}

/* Review / confirmation step */
.fo-review-head{display:flex;align-items:center;gap:14px;padding-bottom:14px;border-bottom:1px solid var(--fo-line)}
.fo-review-photo{width:60px;height:60px;border-radius:10px;object-fit:cover;border:1px solid var(--fo-line);flex-shrink:0}
.fo-review-type{font-weight:700;font-size:16px;color:var(--fo-navy)}
.fo-review-price{font-size:15px;font-weight:800;color:var(--fo-navy)}
.fo-review-list{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:14px 0 0}
.fo-review-list dt{color:var(--fo-muted);font-size:13px}
.fo-review-list dd{margin:0;font-size:14px;color:var(--fo-ink);text-align:right;word-break:break-word}
@media(max-width:600px){
  /* Bottom sheet: slides straight up/down, no fade (opacity:1 always).
     --fo-kb / --fo-vvh are written by ordering.js from window.visualViewport:
     iOS shrinks the visual viewport for the keyboard but leaves the layout
     viewport (and anything position:fixed) alone, so without this the sheet
     sits underneath the keyboard and Safari drags the page about trying to
     reveal the focused field. Sitting on top of the keyboard and capping the
     panel to the height still visible keeps it still. */
  .fo-modal-panel{top:auto;bottom:var(--fo-kb,0px);left:0;transform:translateY(100%);opacity:1;width:100%;max-width:100%;border-radius:18px 18px 0 0;
    max-height:min(90vh, calc(var(--fo-vvh,90vh) - 12px))}
  .fo-modal.open .fo-modal-panel{transform:translateY(0);opacity:1}
  /* Datepicker selects are focusable too - keep them out of the zoom trigger. */
  .el-datepicker-month,.el-datepicker-year{font-size:16px}
  /* Title left, close X right; extra top room for the grab handle. */
  .fo-modal-head{position:relative;justify-content:space-between;padding-top:24px}
  .fo-modal-head .fo-modal-x{margin:-6px -8px 0 0}   /* nudge the X up and toward the edge */
  .fo-modal-head::before{content:"";position:absolute;top:8px;left:50%;transform:translateX(-50%);width:42px;height:5px;border-radius:3px;background:#d7dce3}
}
/* Scroll lock while a sheet is open. iOS Safari does not honour overflow:hidden
   on <body>, so the page behind kept rubber-banding; pinning the body does hold
   it. ordering.js writes body.style.top = -scrollY and puts the offset back on
   close. Only pinned on the sheet breakpoint - on desktop, position:fixed would
   drop the scrollbar and shift the layout sideways instead. */
body.fo-noscroll{overflow:hidden}
@media(max-width:600px){ body.fo-noscroll{position:fixed;left:0;right:0;width:100%} }

/* Homepage membership carousel - native Apple-style scroll-snap. The slider's
   right edge is pushed out to the viewport, so cards run off-screen on the right
   and the next card "peeks"; the first card stays aligned with the page content. */
.fo-home{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif}
.fo-slider{
  margin-right:calc(50% - 50vw);        /* bleed the right edge out to the viewport */
  overflow-x:auto;
  scroll-snap-type:x mandatory;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;                 /* Firefox: hide the scrollbar */
}
.fo-slider::-webkit-scrollbar{display:none}
.fo-slider-track{display:inline-flex;align-items:stretch;gap:18px;padding:6px 40px 8px 0}
.fo-slide{flex:0 0 auto;width:280px;scroll-snap-align:start}
.fo-slide .fo-card{height:100%}
@media(min-width:768px){ .fo-slide{width:300px} }

/* Glassy arrows below the track, aligned right (they stay within the page gutter) */
.fo-slider-arrows{display:flex;justify-content:flex-end;gap:12px;margin-top:18px}
.fo-slider-arrow{width:44px;height:44px;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;
  color:var(--fo-navy);border:1px solid var(--fo-line);background:#fff;box-shadow:0 2px 8px rgba(16,24,40,.08);transition:transform .2s ease,box-shadow .2s ease}
.fo-slider-arrow:hover{box-shadow:0 4px 14px rgba(16,24,40,.15);transform:scale(1.05)}
.fo-slider-arrow:active{transform:scale(.95)}
.fo-slider-arrow svg{width:20px;height:20px}

/* Added-to-basket confirmation sheet (reuses the .fo-modal shell + mobile sheet) */
.fo-confirm .fo-modal-panel{width:420px;text-align:center}
.fo-confirm-body{padding:30px 26px 8px}
.fo-confirm-tick{display:inline-flex;align-items:center;justify-content:center;width:60px;height:60px;border-radius:50%;background:#e8f7ee;color:var(--fo-green);margin-bottom:14px}
.fo-confirm-tick svg{width:30px;height:30px}
.fo-confirm-body h3{margin:0 0 6px;font-size:20px;color:var(--fo-navy)}
.fo-confirm-body p{margin:0;color:var(--fo-muted);font-size:14px}
.fo-confirm-foot{display:flex;gap:10px;padding:18px 26px 26px}
.fo-confirm-foot > *{flex:1;padding:12px 14px;border-radius:999px;font-size:14px;font-weight:600;cursor:pointer;text-decoration:none;text-align:center}
.fo-confirm-more{background:none;border:1px solid var(--fo-line);color:var(--fo-ink);font-family:inherit}
.fo-confirm-more:hover{background:var(--fo-bg)}
.fo-confirm-go{background:var(--fo-navy);color:#fff;border:none;display:flex;align-items:center;justify-content:center}
.fo-confirm-go:hover{background:#12203c;color:#fff}
@media(max-width:600px){ .fo-confirm .fo-modal-panel{width:100%} }

/* Datepicker theme (reused datepicker.js) */
/* Fixed, not absolute: the ordering sheet pins <body> while it is open, which
   breaks absolute positioning against the document. datepicker.js positions it
   in viewport coordinates and closes it on scroll to match. */
.el-datepicker-dropdown{display:none;position:fixed;z-index:2100;width:268px;background:#fff;border:1px solid var(--fo-line);border-radius:12px;box-shadow:0 16px 40px rgba(0,0,0,.18);padding:12px;font-size:13px;color:var(--fo-ink)}
.el-datepicker-dropdown.open{display:block}
.el-datepicker-header{display:flex;align-items:center;gap:8px;margin-bottom:10px}
.el-datepicker-nav{width:32px;height:32px;box-sizing:border-box;border:1px solid var(--fo-line);background:#fff;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--fo-ink);flex-shrink:0}
.el-datepicker-nav svg{width:16px;height:16px}
.el-datepicker-title{display:flex;gap:6px;flex:1}
.el-datepicker-month,.el-datepicker-year{flex:1;height:32px;box-sizing:border-box;padding:0 8px;border:1px solid var(--fo-line);border-radius:7px;font-size:13px;background:#fff}
.el-datepicker-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
.el-datepicker-weekdays span{text-align:center;font-size:11px;font-weight:700;color:var(--fo-muted);padding:4px 0}
.el-datepicker-days{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
.el-datepicker-day{display:flex;align-items:center;justify-content:center;height:32px;border-radius:7px;cursor:pointer}
.el-datepicker-day:hover{background:#eef3fb}
.el-datepicker-day.disabled{visibility:hidden}
.el-datepicker-day.today{color:var(--fo-blue);font-weight:700}
.el-datepicker-day.selected{background:var(--fo-blue);color:#fff}
.el-datepicker-footer{display:flex;justify-content:space-between;margin-top:10px;padding-top:8px;border-top:1px solid var(--fo-line)}
.el-datepicker-today,.el-datepicker-clear{background:none;border:none;cursor:pointer;font-size:13px;font-weight:600;padding:4px 6px;border-radius:6px}
.el-datepicker-today{color:var(--fo-blue)} .el-datepicker-clear{color:var(--fo-muted)}

/* Sales disabled: "memberships unavailable" notice on the join page (migration 029) */
.fo-unavailable{display:flex;flex-direction:column;align-items:center;text-align:center;gap:14px;max-width:560px;margin:20px auto 40px;padding:34px 26px;background:var(--fo-bg);border:1px solid var(--fo-line);border-radius:14px}
.fo-unavailable svg{width:44px;height:44px;color:var(--fo-navy);opacity:.8}
.fo-unavailable p{margin:0;font-size:16px;line-height:1.55;color:var(--fo-ink)}