/* Fulfillment selection for menu cards and dish details. */
html.fulfillment-open { overflow: hidden; }
body dialog.fulfillment-dialog {
  width: min(820px, calc(100% - 32px));
  max-width: none;
  max-height: calc(100dvh - 36px);
  margin: auto;
  padding: 0;
  border: 2px solid #d1a353;
  border-radius: 23px;
  color: #482b18;
  background: #fff9ed;
  box-shadow: 0 25px 100px #180b0699;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: #d5ac68 #fff6e5;
}
body dialog.fulfillment-dialog::backdrop { background: #180e09ba; backdrop-filter: blur(7px); }
.fulfillment-sheet { position: relative; isolation: isolate; overflow: clip; border-radius: 20px; padding: 26px 36px 33px; background: #fff9ec url("/assets/images/home-temple-background.webp?v=6718ee589432dea0eb16ae6ae137f15e86736a3f") center / 100% 100% no-repeat; }
.fulfillment-close { position: sticky; top: 13px; float: right; z-index: 3; display: grid; place-items: center; width: 43px; height: 43px; margin: -10px -19px -43px 0; padding: 0; border: 1.5px solid #d1a353; border-radius: 50%; background: #fffcf6; color: #620c13; cursor: pointer; box-shadow: 0 3px 10px #5a381b15; }
.fulfillment-close svg { width: 23px; height: 23px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; }
.fulfillment-close:hover { background: #fbead0; }
.fulfillment-heading { padding: 0 27px; text-align: center; }
.fulfillment-brand { width: min(380px, 100%); height: auto; margin: 0 auto; mix-blend-mode: multiply; }
.fulfillment-ornament { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 14px auto 9px; color: #b88131; }
.fulfillment-ornament svg { width: 19px; height: 19px; fill: currentColor; }
.fulfillment-ornament span { width: 76px; height: 1px; background: linear-gradient(90deg, transparent, #ac7527); }
.fulfillment-ornament span:last-child { transform: rotate(180deg); }
body .fulfillment-heading h2 { margin: 0 0 22px; color: #593016; font-size: 25px; font-weight: 600 !important; line-height: 1.35; }
.fulfillment-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 19px; }
.fulfillment-card { min-width: 0; overflow: hidden; border: 1.5px solid #d8b371; border-radius: 18px; background: #fffbf2; box-shadow: 0 4px 12px #5b370c24; transition: box-shadow .18s; }
.fulfillment-card:focus-within, .fulfillment-card:hover { box-shadow: 0 7px 21px #75460e38; }
.fulfillment-card-body { position: relative; padding: 24px 18px; text-align: center; background: #fffbf2; }
.fulfillment-card-body::after { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: 0; opacity: .17; pointer-events: none; background: url("/assets/images/thai-pattern.svg?v=1f5bdc1c4ae7877ad431301b0c071b0f1195b846") -8px bottom / 90px; mask-image: linear-gradient(90deg, #000, transparent 28%, transparent 72%, #000); }
.fulfillment-card-body > :not(.fulfillment-card-icon) { position: relative; z-index: 1; }
.fulfillment-card-icon { position: relative; display: grid; place-items: center; width: 68px; height: 68px; margin: 0 auto 14px; border: 4px solid #fffcf4; border-radius: 50%; background: linear-gradient(140deg, #ac0019, #820012); box-shadow: 0 1px 5px #4d0a111c; color: #f6d47d; }
.fulfillment-card-icon svg { width: 35px; height: 35px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
body .fulfillment-card h3 { margin: 0; font-size: 27px; font-weight: 700 !important; line-height: 1.15; color: #920719; }
.fulfillment-card p { margin: 3px 0 13px; font-size: 16px; line-height: 1.4; color: #625343; }
.fulfillment-action { display: inline-flex; justify-content: center; align-items: center; gap: 11px; width: min(235px, 100%); min-height: 43px; padding: 9px 15px; border: 1px solid #b6262f; border-radius: 99px; background: linear-gradient(135deg, #aa0016, #85000d); color: #fff9ed; font-size: 16px; line-height: 1.3; font-weight: 600 !important; text-decoration: none; }
.fulfillment-action svg { width: 19px; height: 19px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fulfillment-action:hover { background: #700016; }
.fulfillment-dialog :is(a,button):focus-visible { outline: 3px solid #195dae; outline-offset: 3px; }
/* The longer menu label wraps without squeezing the price or adjacent cards. */
body .menu-card .card-footer:has(.fulfillment-trigger) { flex-direction: column; align-items: stretch; gap: 10px; }
body .menu-card .fulfillment-trigger { width: 100%; min-height: 43px; padding: 10px 7px; white-space: normal; font-size: 14px; line-height: 1.3; gap: 6px; }
body .menu-card .fulfillment-trigger .icon { width: 16px; height: 16px; flex: none; }
@media (max-width: 560px) {
  body dialog.fulfillment-dialog { width: calc(100% - 20px); max-height: calc(100dvh - 20px); border-radius: 19px; }
  .fulfillment-sheet { padding: 43px 14px 22px; border-radius: 16px; }
  .fulfillment-close { width: 35px; height: 35px; top: 8px; margin: -34px -5px -1px 0; }
  .fulfillment-close svg { width: 20px; height: 20px; }
  .fulfillment-heading { padding: 0 7px; }
  .fulfillment-brand { width: min(295px, 100%); }
  .fulfillment-ornament { margin: 11px auto 8px; }
  body .fulfillment-heading h2 { max-width: 280px; margin: 0 auto 18px; font-size: 20px; }
  .fulfillment-grid { gap: 12px; }
  .fulfillment-card { border-radius: 13px; }
  .fulfillment-card-body { padding: 20px 12px; }
  .fulfillment-card-icon { width: 55px; height: 55px; border-width: 3px; }
  .fulfillment-card-icon svg { width: 29px; height: 29px; }
  body .fulfillment-card h3 { font-size: clamp(17px, 4.8vw, 22px); }
  .fulfillment-card p { min-height: 35px; margin: 5px 0 9px; font-size: 13px; line-height: 1.35; }
  .fulfillment-action { padding: 8px 7px; min-height: 43px; gap: 5px; font-size: 12px; }
  .fulfillment-action svg { width: 14px; height: 14px; }
  body .menu-card .fulfillment-trigger { min-height: 47px; font-size: 13px; }
  body .menu-card .fulfillment-trigger .icon { display: none; }
}
@media (max-width: 480px) {
  .fulfillment-grid { grid-template-columns: minmax(0, 1fr); }
  .fulfillment-action { font-size: 15px; }
}
@media (prefers-reduced-motion: reduce) { .fulfillment-card { transition: none; } }