/* ==========================================================================
   Barari Gold — modal shell
   --------------------------------------------------------------------------
   The storefront's dialogs are still Bootstrap 4 modals: bootstrap.bundle
   loads at the foot of app.blade.php and custom.js opens them with
   $(…).modal('show') — Buy now's shipping step, the sign-in prompt, the
   out-of-stock notice, quick view, the review form. FE-02 took Bootstrap's
   stylesheet away and base.css kept only the two shims that hide a closed
   modal and its backdrop, so an open one fell into the page flow at the top
   (or the foot) of <body> as unstyled markup.

   This sheet is the shell those scripts expect, in the house skin: a fixed
   overlay, an umber backdrop, a centred white dialog on the auth panel's
   border and radius, and Bootstrap's own state classes (.fade, .show,
   .modal-open) for the open and close. It styles the frame only. What sits
   inside a dialog is that dialog's markup; the barari-modal__* parts below
   are for bodies written in the house vocabulary (Buy now first).

   Loaded on every page from app.blade.php because the modals are in the
   layout, not on one screen. After base.css, whose .modal-backdrop shim it
   overrides on purpose.

   RTL — logical properties throughout; nothing here has a mirrored pair.
   ========================================================================== */

/* -- Overlay and backdrop -- */

/* Closed: base.css's .modal:not(.show) { display:none }. Opening, Bootstrap
   writes display:block inline, reflows, then adds .show. */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
  overflow-x: hidden;
  overflow-y: auto;
  outline: 0;
}

.modal-open { overflow: hidden; }

.modal-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1040;
  background: var(--barari-surface-deep);
  opacity: .62;
}

.modal-backdrop.fade { transition: opacity .2s linear; }
.modal-backdrop.fade:not(.show) { opacity: 0; }

.modal.fade { transition: opacity .2s linear; }
.modal.fade:not(.show) { opacity: 0; }

/* The one movement: the dialog settles up into place as it opens. */
.modal.fade .modal-dialog {
  transform: translateY(12px);
  transition: transform .28s var(--barari-ease);
}

.modal.show .modal-dialog { transform: none; }

@media (prefers-reduced-motion: reduce) {
  .modal.fade,
  .modal-backdrop.fade,
  .modal.fade .modal-dialog { transition: none; }
}

/* -- Dialog and its card -- */

.modal-dialog {
  position: relative;
  inline-size: auto;
  max-width: 520px;
  margin-block: var(--barari-space-8);
  margin-inline: auto;
  padding-inline: var(--barari-space-4);
  pointer-events: none;
}

.modal-dialog.modal-sm { max-width: 400px; }
.modal-dialog.modal-lg { max-width: 820px; }
.modal-dialog.modal-xl { max-width: 1140px; }

.modal-dialog-centered {
  display: flex;
  align-items: center;
  min-block-size: calc(100% - 2 * var(--barari-space-8));
}

.modal-content {
  position: relative;
  display: flex;
  flex-direction: column;
  inline-size: 100%;
  pointer-events: auto;
  background: var(--barari-surface-field);
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-card);
  box-shadow: var(--barari-shadow-lift);
  color: var(--barari-ink);
  outline: 0;
}

.modal-body {
  position: relative;
  flex: 1 1 auto;
  padding: var(--barari-space-7);
}

@media (max-width: 575px) {
  .modal-dialog { margin-block: var(--barari-space-4); }
  .modal-dialog-centered { min-block-size: calc(100% - 2 * var(--barari-space-4)); }
  .modal-body { padding-block: var(--barari-space-6); padding-inline: var(--barari-space-5); }
}

/* -- House parts for dialog bodies -- */

.barari-modal__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--barari-space-4);
  margin-block-end: var(--barari-space-2);
}

.barari-modal__title {
  font-family: var(--barari-font-display);
  font-size: 28px;
  font-weight: 400;
  line-height: var(--barari-leading-tight);
  color: var(--barari-ink);
}

.barari-modal__close {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 36px;
  block-size: 36px;
  margin-block-start: -6px;
  margin-inline-end: -10px;
  border: 0;
  border-radius: var(--barari-radius-sharp);
  background: transparent;
  color: var(--barari-ink-60);
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  transition: background var(--barari-duration) var(--barari-ease), color var(--barari-duration) var(--barari-ease);
}

.barari-modal__close:hover { background: var(--barari-wash); color: var(--barari-ink); }

.barari-modal__note {
  font-size: var(--barari-text-ui);
  line-height: var(--barari-leading-body);
  color: var(--barari-ink-60);
  max-width: 46ch;
  margin-block-end: var(--barari-space-6);
}

/* The answer row: the main action last, so it sits at the reading end. */
.barari-modal__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--barari-space-2);
}

@media (max-width: 575px) {
  .barari-modal__actions > .barari-btn { flex: 1 1 auto; }
}

/* A name for a screen reader and none on screen (basket.css's pattern). */
.barari-modal__sr {
  position: absolute;
  inline-size: 1px;
  block-size: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* -- Buy now: the shipping step --
   One bordered row per method in the checkout's choice-card manner: the
   chosen row takes the brown edge and a wash, the cost reads on the end. */

.barari-buynow__options {
  display: grid;
  gap: var(--barari-space-2);
  min-inline-size: 0;
  margin-block-end: var(--barari-space-6);
  border: 0;
}

.barari-buynow__option {
  display: flex;
  align-items: center;
  gap: var(--barari-space-3);
  padding-block: 14px;
  padding-inline: 16px;
  border: 1px solid var(--barari-rule);
  border-radius: var(--barari-radius-sharp);
  background: var(--barari-surface-field);
  cursor: pointer;
  transition: border-color var(--barari-duration) var(--barari-ease), background var(--barari-duration) var(--barari-ease);
}

.barari-buynow__option:hover { border-color: var(--barari-ink-52); }

.barari-buynow__option:has(input:checked) {
  border-color: var(--barari-brown);
  background: var(--barari-wash);
}

.barari-buynow__option:has(input:focus-visible) {
  outline: 2px solid var(--barari-bronze);
  outline-offset: 2px;
}

.barari-buynow__option input {
  flex: none;
  inline-size: 16px;
  block-size: 16px;
  margin: 0;
  accent-color: var(--barari-brown);
}

/* The row draws the focus ring; a second one on the radio would double it. */
.barari-buynow__option input:focus-visible { outline: none; }

.barari-buynow__option-text {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-inline-size: 0;
}

.barari-buynow__option-name {
  font-size: var(--barari-text-ui);
  font-weight: 500;
  color: var(--barari-ink);
}

.barari-buynow__option-time {
  font-size: var(--barari-text-meta);
  color: var(--barari-ink-60);
}

.barari-buynow__option-cost {
  font-size: var(--barari-text-ui);
  font-weight: 500;
  color: var(--barari-ink);
  white-space: nowrap;
}

.barari-buynow__submit { display: block; inline-size: 100%; }