/*
 * The order configuration window (menu_order_configuration; _private/docs/order-config-popup.md).
 * Loaded by front/layouts/masterNew.blade.php under the flag, where css/tailwind.min.css used to be: before Bootstrap,
 * so the cascade the window was built on stays the same. The window markup uses no Tailwind classes.
 */

/*
 * 1. The base the window was laid out on: Tailwind 2.2.19's preflight (box-sizing, margins, borders, images as
 *    blocks, plain buttons), taken from css/tailwind.min.css and limited to the window. :where() adds no specificity.
 */
:where(#multistepModal),:where(#multistepModal) *,:where(#multistepModal)::after,:where(#multistepModal) *::after,:where(#multistepModal)::before,:where(#multistepModal) *::before{box-sizing:border-box}
:where(#multistepModal) hr{height:0;color:inherit}
:where(#multistepModal) abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
:where(#multistepModal) b,:where(#multistepModal) strong{font-weight:bolder}
:where(#multistepModal) code,:where(#multistepModal) kbd,:where(#multistepModal) pre,:where(#multistepModal) samp{font-family:ui-monospace,SFMono-Regular,Consolas,'Liberation Mono',Menlo,monospace;font-size:1em}
:where(#multistepModal) small{font-size:80%}
:where(#multistepModal) sub,:where(#multistepModal) sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
:where(#multistepModal) sub{bottom:-.25em}
:where(#multistepModal) sup{top:-.5em}
:where(#multistepModal) table{text-indent:0;border-color:inherit}
:where(#multistepModal) button,:where(#multistepModal) input,:where(#multistepModal) optgroup,:where(#multistepModal) select,:where(#multistepModal) textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}
:where(#multistepModal) button,:where(#multistepModal) select{text-transform:none}
:where(#multistepModal) [type=button],:where(#multistepModal) [type=reset],:where(#multistepModal) [type=submit],:where(#multistepModal) button{-webkit-appearance:button}
:where(#multistepModal)::-moz-focus-inner,:where(#multistepModal) *::-moz-focus-inner{border-style:none;padding:0}
:where(#multistepModal) :-moz-focusring{outline:1px dotted ButtonText}
:where(#multistepModal) :-moz-ui-invalid{box-shadow:none}
:where(#multistepModal) legend{padding:0}
:where(#multistepModal) progress{vertical-align:baseline}
:where(#multistepModal)::-webkit-inner-spin-button,:where(#multistepModal) *::-webkit-inner-spin-button,:where(#multistepModal)::-webkit-outer-spin-button,:where(#multistepModal) *::-webkit-outer-spin-button{height:auto}
:where(#multistepModal) [type=search]{-webkit-appearance:textfield;outline-offset:-2px}
:where(#multistepModal)::-webkit-search-decoration,:where(#multistepModal) *::-webkit-search-decoration{-webkit-appearance:none}
:where(#multistepModal)::-webkit-file-upload-button,:where(#multistepModal) *::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
:where(#multistepModal) summary{display:list-item}
:where(#multistepModal) blockquote,:where(#multistepModal) dd,:where(#multistepModal) dl,:where(#multistepModal) figure,:where(#multistepModal) h1,:where(#multistepModal) h2,:where(#multistepModal) h3,:where(#multistepModal) h4,:where(#multistepModal) h5,:where(#multistepModal) h6,:where(#multistepModal) hr,:where(#multistepModal) p,:where(#multistepModal) pre{margin:0}
:where(#multistepModal) button{background-color:transparent;background-image:none}
:where(#multistepModal) fieldset{margin:0;padding:0}
:where(#multistepModal) ol,:where(#multistepModal) ul{list-style:none;margin:0;padding:0}
:where(#multistepModal),:where(#multistepModal) *,:where(#multistepModal)::after,:where(#multistepModal) *::after,:where(#multistepModal)::before,:where(#multistepModal) *::before{box-sizing:border-box;border-width:0;border-style:solid;border-color:currentColor}
:where(#multistepModal) hr{border-top-width:1px}
:where(#multistepModal) img{border-style:solid}
:where(#multistepModal) textarea{resize:vertical}
:where(#multistepModal) input::placeholder,:where(#multistepModal) textarea::placeholder{opacity:1;color:#9ca3af}
:where(#multistepModal) [role=button],:where(#multistepModal) button{cursor:pointer}
:where(#multistepModal) :-moz-focusring{outline:auto}
:where(#multistepModal) table{border-collapse:collapse}
:where(#multistepModal) h1,:where(#multistepModal) h2,:where(#multistepModal) h3,:where(#multistepModal) h4,:where(#multistepModal) h5,:where(#multistepModal) h6{font-size:inherit;font-weight:inherit}
:where(#multistepModal) a{color:inherit;text-decoration:inherit}
:where(#multistepModal) button,:where(#multistepModal) input,:where(#multistepModal) optgroup,:where(#multistepModal) select,:where(#multistepModal) textarea{padding:0;line-height:inherit;color:inherit}
:where(#multistepModal) code,:where(#multistepModal) kbd,:where(#multistepModal) pre,:where(#multistepModal) samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace}
:where(#multistepModal) audio,:where(#multistepModal) canvas,:where(#multistepModal) embed,:where(#multistepModal) iframe,:where(#multistepModal) img,:where(#multistepModal) object,:where(#multistepModal) svg,:where(#multistepModal) video{display:block;vertical-align:middle}
:where(#multistepModal) img,:where(#multistepModal) video{max-width:100%;height:auto}
:where(#multistepModal) [hidden]{display:none}
:where(#multistepModal),:where(#multistepModal) *,:where(#multistepModal)::after,:where(#multistepModal) *::after,:where(#multistepModal)::before,:where(#multistepModal) *::before{border-color:#e5e7eb}

/* 2. The window's named blocks: what the Tailwind utility classes in its markup did, with their exact values. */
.order-config-form { width: 100%; }

.order-config-heading { color: #000; font-size: 1.25rem; line-height: 1.75rem; font-weight: 700; }

.order-config-type-screen { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 2.25rem; width: 100%; }
.order-config-type-intro { width: 66.666667%; }

.order-config-tiles { display: flex; justify-content: center; align-items: center; gap: 2.25rem; width: 100%; max-width: 28rem; }
.order-config-tile { display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 0.875rem; width: 100%; padding-top: 1.5rem; padding-bottom: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.order-config-tile-label { color: #000; font-size: 1rem; line-height: 1.5rem; font-weight: 400; }

.order-config-auth { width: 100%; max-width: 24rem; }

.order-config-branches-wrap { max-width: 24rem; }
.order-config-branches { display: flex; justify-content: center; align-items: center; gap: 2.25rem; }
.order-config-branch { width: 100%; }

.order-config-addresses { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); width: 100%; }
.order-config-address-list { display: grid; grid-template-columns: repeat(1, minmax(0, 1fr)); gap: 0.75rem; }
.order-config-address { display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.order-config-new-address-tile { display: flex; flex-direction: column; padding: 1.5rem; box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }

.order-config-address-search { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; width: 100%; }
.order-config-address-field { width: 75%; }
.order-config-address-input { width: 100%; border-radius: 1.5rem; padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 1.25rem; line-height: 1.75rem; }
.order-config-address-submit { width: 25%; }
.order-config-address-button { display: inline-block; width: 100%; border-radius: 1.5rem; padding-top: 0.625rem; padding-bottom: 0.625rem; font-weight: 700; }

.order-config-day { color: #000; }
.order-config-region-select { width: 100%; }
.order-config-confirm-actions { gap: 0.75rem; }

.order-config-spinner { display: flex; justify-content: center; align-items: center; }
.order-config-spinner-wheel { width: 1.25rem; height: 1.25rem; border-bottom-width: 2px; border-radius: 9999px; animation: spin 1s linear infinite; }

@keyframes spin {
  to { transform: rotate(360deg); }
}

@media (min-width: 768px) {
  .order-config-address-list { grid-column: span 3 / span 3; grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .order-config-new-address { grid-column: span 2 / span 2; }
  .order-config-address-field { width: 58.333333%; }
}

@media (min-width: 1024px) {
  .order-config-addresses { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* 3. The window's own styles (moved from css/front.css). */
#multistepContent {
  position: relative;
  transition: all 0.5s ease-in-out;
  min-height: 300px;
  opacity: 1;
  display: flex;
  justify-content: center;
  align-items: center;

  & h1,
  & h2,
  & h3,
  & h4,
  & h5,
  & h6,
  & p {
    color: #000000;
  }
}

#multistepModal * {
  transition: all 0.2s ease-in-out;
}

/*================== NEW STYLE FOR MULTISTEPS 25.11.24 ===================*/
#multistepModal a {
  position: relative;
}

#multistepModal #authForm,
#multistepModal .order-config-welcome {
  max-width: 80%;
}

/* A guest's start screen carries the legacy welcome tiles (Alik 19.10): the same frames and sizes as in #authForm. */
#multistepModal .order-config-welcome {
  margin-inline: auto;
}

#multistepModal #authForm a.order-config-tile-guest,
#multistepModal .order-config-welcome a.order-config-tile-guest,
#multistepModal #multistepForm a.order-config-tile-delivery {
  flex: 0 0 60%;
}

#multistepModal #authForm .order-config-tiles {
  max-width: 100%;
}

#multistepModal #multistepForm .order-config-tiles {
  width: 100%;
  max-width: 36rem;
  margin: 0 auto;
}

#multistepModal a.order-config-tile,
#multistepModal a.order-config-address {
  min-height: 160px;
  border-radius: 15px !important;
  position: relative;
  text-align: center;
  padding-inline: 15px;
}

#multistepModal a.order-config-tile-login,
#multistepModal a.order-config-tile-takeaway {
  box-shadow: none !important;
  border: 1px solid #b1b1b1;
}

#multistepModal a.order-config-tile-login svg,
#multistepModal a.order-config-tile-takeaway svg {
  filter: brightness(0);
}

#multistepModal #authForm a.order-config-tile-guest:after,
#multistepModal .order-config-welcome a.order-config-tile-guest:after,
#multistepModal #multistepForm a.order-config-tile-delivery:after {
  content: "";
  border: 1px solid var(--primary);
  width: calc(100% - 10px);
  height: calc(100% - 10px);
  position: absolute;
  border-radius: 7px;
  top: 5px;
  left: 5px;
}

#multistepModal #authForm a.order-config-tile-guest path,
#multistepModal .order-config-welcome a.order-config-tile-guest path,
#multistepModal #multistepForm a.order-config-tile-delivery path {
  fill: var(--primary);
}

#multistepModal #authForm a.order-config-tile-guest span,
#multistepModal .order-config-welcome a.order-config-tile-guest span {
  font-size: 1.1rem;
  font-weight: bold;
}

#multistepModal a.order-config-tile-login span {
  font-size: 1.1rem;
}

#multistepModal .modal-header {
  border: 0;
  padding-bottom: 0;
}

body #multistepModal .modal-header .close span {
  color: #000;
  font-weight: 100;
  opacity: 1;
  font-size: 2.5rem;
  line-height: 0;
}

/* The four-stage indicator over every wizard step (Alik 19.10, 03.B): number + label, a passed stage opens again. */
#multistepModal .order-config-stages {
  width: 100%;
  text-align: center;
}

#multistepModal .order-config-stages ol {
  display: flex;
  justify-content: center;
  gap: 0.75rem;
  margin: 0 0 0.5rem;
  padding: 0;
  list-style: none;
}

#multistepModal .order-config-stages li > button,
#multistepModal .order-config-stages li > span {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  min-width: 5.5rem;
  padding: 0;
  border: 0;
  background: none;
  color: #9ca3af;
  font-size: 0.875rem;
  line-height: 1.2;
}

#multistepModal .order-config-stages li > button {
  cursor: pointer;
}

/* Four stages fit a phone (Alik 19.10: the first stage says who orders). */
@media (max-width: 480px) {
  #multistepModal .order-config-stages ol {
    gap: 0.5rem;
  }

  #multistepModal .order-config-stages li > button,
  #multistepModal .order-config-stages li > span {
    min-width: 4.5rem;
  }
}

#multistepModal .order-config-stage-number {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 1.75rem;
  height: 1.75rem;
  border: 2px solid currentColor;
  border-radius: 50%;
  font-weight: 700;
}

#multistepModal .order-config-stages li.is-done > button {
  color: var(--primary);
}

#multistepModal .order-config-stages li.is-done .order-config-stage-number {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

#multistepModal .order-config-stages li.is-current > span {
  color: #000;
  font-weight: 700;
}

#multistepModal .order-config-stages li.is-current .order-config-stage-number {
  border-color: var(--primary);
  color: var(--primary);
}


@media screen and (max-width:768px) {
  #multistepModal .order-config-tiles {
    flex-direction: column-reverse;
    gap: 1.25rem;
  }

  #multistepModal #authForm a.order-config-tile-guest path,
  #multistepModal .order-config-welcome a.order-config-tile-guest path,
  #multistepModal #multistepForm a.order-config-tile-delivery path {
    fill: #fff;
  }

  #multistepModal #authForm a.order-config-tile-guest span,
  #multistepModal .order-config-welcome a.order-config-tile-guest span,
  #multistepModal #multistepForm a.order-config-tile-delivery span {
    color: #fff;
  }

  #multistepModal a.order-config-tile,
  #multistepModal a.order-config-address {
    min-height: 130px;
  }

  #multistepModal #authForm a.order-config-tile-guest,
  #multistepModal .order-config-welcome a.order-config-tile-guest,
  #multistepModal #multistepForm a.order-config-tile-delivery {
    background: var(--primary) !important;
    flex: 0 0 100%;
  }

  #multistepModal #multistepContent {
    min-height: unset;
  }

  #multistepModal #authForm,
  #multistepModal .order-config-welcome {
    max-width: 100%;
  }

  #multistepModal #authForm p,
  #multistepModal .order-config-welcome-text {
    font-size: 16px;
    font-weight: normal;
  }

  #multistepModal a.order-config-tile-login,
  #multistepModal a.order-config-tile-takeaway {
    padding: 12px 0;
    min-height: auto !important;
  }
}

/*================== END NEW STYLE FOR MULTISTEPS 25.11.24 ===================*/
/* «חזור» (Alik 19.10): small, an outline in the Site colour, at the window's start edge below the step.
   Not a .modal-footer: front.css fills every .modal-footer .btn with the primary colour. */
#multistepModal .order-config-back {
  display: flex;
  justify-content: flex-start;
  margin-top: 1.5rem;
}

/* The loading spinner overlays the window's bottom instead of keeping an empty 52px band under every screen
   (Alik 19.10: «חזור» lower, closer to the corner). */
#multistepModal #loading-spinner {
  position: absolute;
  inset-inline: 0;
  bottom: 0;
  pointer-events: none;
}

/* A step's «חזור» sits in the bottom corner of the step area (#multistepContent is relative, min-height 300px),
   with room kept below the step so it never covers it. */
#multistepModal #multistepContent:has(.order-config-back) {
  padding-bottom: 3.25rem;
}

#multistepModal #multistepContent .order-config-back {
  position: absolute;
  bottom: 0;
  inset-inline-start: 0;
  margin: 0;
}

#multistepModal .order-config-back .btn {
  padding: 0.25rem 1.25rem;
  border: 1px solid var(--primary);
  background: #fff;
  color: var(--primary);
}

#multistepModal .order-config-back .btn:hover,
#multistepModal .order-config-back .btn:focus-visible {
  background: var(--primary);
  color: #fff;
}

#multistepModal {
  .modal-header {
    border: 0;
  }

  .modal-body {
    .order-config-title {
      color: #000;
      font-weight: 600;
      font-size: 1.5rem;
      text-align: center;
      margin-block-end: 1rem;
    }

    .order-type-choice {
      display: grid;
      grid-auto-columns: 1fr;
      grid-auto-flow: column;
      gap: 1rem;
    }

    .order-type-choice button {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: .75rem;
      padding: 1.25rem .5rem;
      background: #fff;
      border: 2px solid #dbdbdb;
      border-radius: 10px;
      font-weight: 600;
    }

    .order-type-choice button[aria-pressed="true"] {
      border-color: var(--primary);
      color: var(--primary);
    }

    .order-type-choice.loading button {
      opacity: .6;
      pointer-events: none;
    }

    /* Alik 19.10: the type tile the draft chose, marked when «חזור» comes back to the type screen
       (the legacy tiles keep their own frames; !important beats the takeaway tile's box-shadow: none). */
    a.order-config-tile[aria-pressed="true"] {
      box-shadow: 0 0 0 2px var(--primary) !important;
    }

    /* «שנה סניף» and «חזור»: the Branch, saved address or day already chosen (Alik 19.10, №42). */
    a[aria-current="true"] {
      box-shadow: 0 0 0 2px var(--primary);

      span {
        color: var(--primary);
      }
    }

    .order-details {
      position: relative;
      border: 1px solid #dbdbdb;
      border-radius: 10px;
      padding: 1rem;
    }

    .order-details p {
      display: flex;
      align-items: center;
      gap: 10px;
      margin-bottom: 1rem;
    }

    .order-details a {
      position: absolute;
      inset-block-end: .5rem;
      inset-inline-end: 1rem;
      text-decoration: underline;
    }

    /* Confirm screen (phase 2c): a changed row's applied value, struck through next to the new one in bold. */
    .order-details del {
      color: #6c757d;
    }
  }

  .modal-footer {
    border: 0;
  }
}

body:has(#multistepContent) {
  .pac-container {
    z-index: 10000;
  }
}

@keyframes fade-in {
  from {
    opacity: 0;
  }
}

@keyframes fade-out {
  to {
    opacity: 0;
  }
}

@keyframes slide-from-bottom {
  from {
    transform: translateY(90px);
  }
}

@keyframes slide-to-top {
  to {
    transform: translateY(-90px);
  }
}

.slide-it {
  view-transition-name: slide-it;
}

::view-transition-old(slide-it) {
  animation: 180ms cubic-bezier(0.4, 0, 1, 1) both fade-out,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-to-top;
}

::view-transition-new(slide-it) {
  animation: 420ms cubic-bezier(0, 0, 0.2, 1) 90ms both fade-in,
    600ms cubic-bezier(0.4, 0, 0.2, 1) both slide-from-bottom;
}