/* d9 customizer -- item dialog / bottom sheet.
 *
 * Extracted from default9.css so default8 can use the same customizer. Everything the
 * dialog needs travels together: the #d9cust <dialog> element itself, its ::backdrop,
 * the d9c- component classes and the d9-qty stepper it reuses. Media queries are kept
 * intact -- the dialog turns into a bottom sheet on narrow screens, and flattening them
 * makes it render that way on desktop too.
 *
 * The :root block below is derived from the variables these rules actually consume, so
 * a var() can't go undefined and silently fall back (an undefined --brand-ink is how
 * the Add to cart label ended up dark-on-brand instead of white).
 *
 * --brand is deliberately NOT redefined here: each template sets its own (default8
 * derives it from the store's --main-color), so the dialog picks up whatever colour
 * the restaurant already uses.
 */
:root {
  --bad: #b3261e;
  --brand-ink: #ffffff;
  --brand-tint: color-mix(in srgb, var(--brand) 8%, #ffffff);
  --field: #ffffff;
  --field-line: #c9c9c9;
  --hairline: #e7e7e7;
  --hairline-2: #d6d6d6;
  --ink: #191919;
  --ink-2: #494949;
  --muted: #767676;
  --r-lg: 16px;
  --r-md: 12px;
  --r-pill: 999px;
  --shadow-lg: 0 12px 32px -8px rgba(0,0,0,.18);
  --shadow-md: 0 4px 16px -4px rgba(0,0,0,.12), 0 1px 3px rgba(0,0,0,.06);
  --surface: #ffffff;
  --surface-2: #f7f7f7;
}

.d9-qty {
    flex: none; display: inline-flex; align-items: center; height: 28px;
    border: 1px solid var(--field-line); border-radius: var(--r-pill); overflow: hidden; background: var(--surface);
}
.d9-qty button { width: 26px; height: 26px; border: 0; background: transparent; color: var(--ink-2); cursor: pointer; font-size: 15px; line-height: 1; }
.d9-qty button:hover { color: var(--ink); background: var(--surface-2); }
.d9-qty span { min-width: 18px; text-align: center; font-weight: 650; font-size: 13px; }
/* ---- d9 customizer (new item dialog / bottom sheet) ----------------------- */ body.d9c-lock { overflow: hidden; }
#d9cust {
    border: 0; padding: 0; background: transparent; max-width: none; max-height: none;
    /* svh (small viewport) = viewport with iOS Safari toolbars VISIBLE — the only
       always-safe height for a bottom-anchored sheet; 100vh (and dvh in the
       <dialog> top layer, per WebKit bug) counts the area BEHIND the bottom
       toolbar, cropping the Add-to-cart footer. vh kept as old-browser fallback. */
    width: 100vw; height: 100vh; height: 100svh; display: grid; place-items: center;
}
#d9cust:not([open]) { display: none; }
#d9cust::backdrop { background: rgba(0,0,0,.45); }
.d9c-shell {
    position: relative; width: min(860px, 94vw); max-height: 88vh; max-height: 88svh;
    background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
    display: flex; flex-direction: column; overflow: hidden;
}
.d9c-x {
    position: absolute; top: 12px; left: 12px; z-index: 5; width: 44px; height: 44px;
    border-radius: 50%; border: 1px solid var(--hairline); background: var(--surface); color: var(--ink);
    display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow-md);
}
.d9c-x:hover { background: var(--surface-2); }
.d9c-shell.noimg .d9c-body { padding-top: 64px; }
/* keep the title clear of the floating X */ .d9c-img { flex: none; height: 190px; background: var(--surface-2); }
.d9c-img img { width: 100%; height: 100%; object-fit: cover; display: block; }
.d9c-body { overflow-y: auto; padding: 20px 22px 8px; overscroll-behavior: contain; }
.d9c-head { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; padding-right: 8px; }
#d9cust .d9c-img + .d9c-body .d9c-head { padding-right: 0; }
.d9c-head h2 { font-weight: 750; font-size: 20px; letter-spacing: -.015em; margin: 0; }
.d9c-price { font-weight: 700; font-size: 17px; white-space: nowrap; }
.d9c-descr { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; margin: 6px 0 0; }
.d9c-group { margin-top: 20px; }
.d9c-gh { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.d9c-gh h3 { font-weight: 700; font-size: 14.5px; letter-spacing: -.01em; margin: 0; }
.d9c-req {
    font-size: 10.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
    color: var(--brand); background: var(--brand-tint); border-radius: var(--r-pill); padding: 3px 9px;
}
.d9c-hint { font-size: 12px; color: var(--muted); }
.d9c-opts { display: flex; flex-direction: column; border: 1px solid var(--hairline); border-radius: var(--r-md); overflow: hidden; }
.d9c-opt {
    display: flex; align-items: center; gap: 12px; padding: 12px 14px; cursor: pointer;
    border-bottom: 1px solid var(--hairline); font-size: 14px; background: var(--surface);
}
.d9c-opt:last-child { border-bottom: 0; }
.d9c-opt:hover { background: var(--surface-2); }
.d9c-opt input[type=radio], .d9c-opt input[type=checkbox] {
    flex: none; width: 18px; height: 18px; accent-color: var(--brand); margin: 0; cursor: pointer;
}
.d9c-optname { flex: 1; min-width: 0; }
.d9c-optcost { color: var(--muted); font-size: 13px; font-weight: 600; white-space: nowrap; }
.d9c-opt-qty { cursor: default; }
/* topping rows: placement segmented control + Extra chip. Tighter vertical rhythm than plain option rows so the dense 2-col topping grid reads calmly (Direction A). */ .d9c-top { cursor: default; gap: 9px; padding-top: 9px; padding-bottom: 9px; align-items: center; }
.d9c-top .d9c-optname { font-size: 13.5px; }
/* dense two-column option grid (toppings) */ .d9c-grid2 { display: grid; grid-template-columns: 1fr 1fr; }
.d9c-grid2 .d9c-opt { border-bottom: 1px solid var(--hairline); }
.d9c-grid2 .d9c-opt:nth-child(odd) { border-right: 1px solid var(--hairline); }
.d9c-grid2 .d9c-opt:nth-last-child(1), .d9c-grid2 .d9c-opt:nth-last-child(2):nth-child(odd) { border-bottom: 0; }
/* collapsible topping sections */ .d9c-ghbtn {
    width: 100%; border: 0; background: var(--surface-2); cursor: pointer;
    border-radius: var(--r-md); padding: 11px 13px; font: inherit; text-align: left;
    display: flex; align-items: center; gap: 10px; margin-bottom: 0;
}
.d9c-ghbtn:hover { background: var(--hairline); }
.d9c-ghbtn h3 { flex: 1; }
.d9c-count {
    background: var(--brand); color: var(--brand-ink); border-radius: var(--r-pill);
    font-size: 11.5px; font-weight: 700; padding: 2px 8px;
}
.d9c-chev { transition: transform .15s; color: var(--ink-2); }
.d9c-topgroup .d9c-opts { margin-top: 8px; }
.d9c-topgroup.collapsed .d9c-opts { display: none; }
.d9c-topgroup.collapsed .d9c-chev { transform: rotate(-90deg); }
/* size pills */ .d9c-sizes { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.d9c-size {
    border: 1px solid var(--field-line); border-radius: var(--r-md); background: var(--field);
    padding: 10px 12px; cursor: pointer; display: flex; align-items: baseline; justify-content: space-between; gap: 8px;
}
.d9c-size input { position: absolute; opacity: 0; pointer-events: none; }
.d9c-size .d9c-sizename { font-weight: 650; font-size: 14px; }
.d9c-size .d9c-sizecost { color: var(--muted); font-size: 13px; font-weight: 600; }
.d9c-size.on { border-color: var(--brand); background: var(--brand-tint); }
.d9c-size.on .d9c-sizename, .d9c-size.on .d9c-sizecost { color: var(--brand); }
.d9c-select { margin-top: 2px; }
.d9c-seg3 { display: inline-flex; flex: none; border: 1px solid var(--field-line); border-radius: var(--r-pill); overflow: hidden; }
.d9c-seg3 button {
    border: 0; background: var(--surface); color: var(--ink-2); cursor: pointer;
    font: inherit; font-size: 12.5px; font-weight: 600; padding: 6px 8px; min-width: 34px;
    display: inline-grid; place-items: center;
}
.d9c-seg3 button svg { width: 17px; height: 17px; }
.d9c-seg3 button svg { display: block; opacity: .75; }
.d9c-seg3 button.on svg { opacity: 1; }
.d9c-seg3 button + button { border-left: 1px solid var(--field-line); }
.d9c-seg3 button:hover { background: var(--surface-2); }
.d9c-seg3 button.on { background: var(--brand); color: var(--brand-ink); }
.d9c-extra {
    flex: none; border: 1px solid var(--field-line); background: var(--surface); color: var(--ink-2);
    border-radius: var(--r-pill); font: inherit; font-size: 12px; font-weight: 600; padding: 6px 11px; cursor: pointer;
}
.d9c-extra:disabled { opacity: .4; cursor: default; }
.d9c-extra.on { border-color: var(--brand); background: var(--brand); color: #fff; font-weight: 700; }
/* included/default toppings: a "No" (remove) button in the seg + an Included tag */ .d9c-seg3 .d9c-none { min-width: 34px; font-size: 11.5px; font-weight: 650; }
.d9c-seg3 .d9c-none.on { background: var(--bad); color: #fff; }
.d9c-incl-tag {
    font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
    color: var(--brand); background: var(--brand-tint); border-radius: var(--r-pill);
    padding: 1px 7px; margin-left: 6px; white-space: nowrap;
}
.d9c-input {
    width: 100%; height: 44px; padding: 0 14px; font: inherit; color: var(--ink);
    background: var(--field); border: 1px solid var(--field-line); border-radius: var(--r-md);
}
.d9c-input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
textarea.d9c-notes { min-height: 64px; padding: 10px 14px; resize: vertical; }
.d9c-foot {
    flex: none; display: flex; gap: 12px; align-items: center; padding: 14px 22px calc(14px + env(safe-area-inset-bottom));
    border-top: 1px solid var(--hairline); background: var(--surface);
}
.d9c-mainqty { height: 44px !important; }
.d9c-mainqty button { width: 40px !important; height: 42px !important; font-size: 18px !important; }
.d9c-mainqty span { min-width: 26px !important; font-size: 15px !important; }
.d9c-add {
    flex: 1; height: 46px; padding: 0 18px; background: var(--brand); color: var(--brand-ink);
    border: 0; border-radius: var(--r-md); font: inherit; font-weight: 700; font-size: 15px; cursor: pointer;
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.d9c-add:hover { filter: brightness(1.06); }
.d9c-add:disabled { opacity: .6; cursor: default; }
.d9c-cancel {
    flex: none; height: 46px; padding: 0 18px; background: var(--surface-2); color: var(--ink);
    border: 1px solid var(--hairline-2); border-radius: var(--r-md); font: inherit; font-weight: 600; font-size: 15px; cursor: pointer;
}
.d9c-cancel:hover { background: var(--surface); }
/* Keep the "Add to cart" label + price on one line each — they were wrapping to multiple lines and overflowing the fixed-height button on narrow footers. */ .d9c-add > span { white-space: nowrap; }
.d9c-add > span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* Hide search in header nav on mobile - it's in order info bar */ /* Show mobile search button in order bar on mobile */ .d9c-sub { margin: 4px 0 10px 30px; border-left: 2px solid var(--hairline-2); padding-left: 12px; }
.d9c-subgroup { margin-top: 10px; }
.d9c-subgroup .d9c-gh h3 { font-size: 13px; }
@media (max-width: 720px) {
  .d9c-grid2 { grid-template-columns: 1fr; }
  .d9c-grid2 .d9c-opt { border-right: 0 !important; }
  .d9c-grid2 .d9c-opt:nth-last-child(2):nth-child(odd) { border-bottom: 1px solid var(--hairline); }
}
@media (max-width: 560px) {
  /* single-line topping rows: name leads, placement seg + Extra sit right (iOS convention: label left, control right). Extra chip only appears once a placement is chosen — a disabled pill on every row is noise. */ .d9c-top { flex-wrap: nowrap; gap: 8px; }
  .d9c-top .d9c-optname { order: -1; }
  .d9c-top .d9c-extra:disabled { display: none; }
  .d9c-seg3 button { min-width: 30px; padding: 6px 7px; }
}
@media (max-width: 640px) {
  #d9cust { place-items: end center; }
  .d9c-shell {
        width: 100vw; max-height: 92vh; max-height: 92svh; border-radius: var(--r-lg) var(--r-lg) 0 0;
        animation: d9c-up .22s ease;
    }
  .d9c-img { height: 160px; }
  .d9c-add { padding: 0 14px; gap: 8px; }
  .d9c-cancel { padding: 0 14px; }
}