/* ==========================================================================
   overa – UI core (Bootstrap 5, data-bs-theme aware, RTL-friendly)
   - Keeps existing class names/behavior
   - Adds image scrim overlay (readability) + optional variants
   - Removes duplicated .img-container blocks
   - Uses logical properties where it helps
   ========================================================================== */

/* --------------------------------------------------------------------------
   1) Theme tokens
-------------------------------------------------------------------------- */

:root{
  /* Modal */
  --overa-modal-backdrop-opacity: .90;

  /* Payment icons */
  --overa-payment-icon-size: 35px;
  --overa-payment-icon-pad: .5em;
  --overa-payment-icon-bg: #fff;

  /* Options/select states */
  --overa-select-active-bg: #b2d8b0;
  --overa-border-default: #d0d0d0;
  --overa-border-selected: var(--bs-success);

  /* Image scrim + overlay text */
  --overa-img-scrim-1: rgba(0,0,0,.55);
  --overa-img-scrim-2: rgba(0,0,0,.20);
  --overa-img-scrim-3: rgba(0,0,0,0);
  --overa-img-overlay-fg: #fff;
  --overa-img-overlay-shadow: 0 1px 2px rgba(0,0,0,.65), 0 0 12px rgba(0,0,0,.35);
}

/* Dark mode via Bootstrap (attribute can be on html OR body) */
:root[data-bs-theme="dark"],
[data-bs-theme="dark"]{
  --overa-select-active-bg: #30694b;
  --overa-border-default: rgba(255,255,255,.28);

  /* Slightly stronger scrim on dark UIs can reduce glare */
  --overa-img-scrim-1: rgba(0,0,0,.62);
  --overa-img-scrim-2: rgba(0,0,0,.26);
}

/* Optional: OS dark mode when data-bs-theme is NOT set */
@media (prefers-color-scheme: dark){
  :root:not([data-bs-theme]){
    --overa-border-default: rgba(255,255,255,.28);
    --overa-img-scrim-1: rgba(0,0,0,.62);
    --overa-img-scrim-2: rgba(0,0,0,.26);
  }
}

/* --------------------------------------------------------------------------
   2) Filler tiles tokens
-------------------------------------------------------------------------- */

:root[data-bs-theme="light"]{
  --filler-border: rgba(0,0,0,.08);
  --filler-letter-flat: rgba(0,0,0,.14);
  --filler-grid: rgba(0,0,0,.03);
  --filler-card-1: rgba(var(--bs-body-bg-rgb), .96);
  --filler-card-2: rgba(var(--bs-body-bg-rgb), .98);
  --filler-tint: rgba(var(--bs-primary-rgb,13,110,253), .04);
}
:root[data-bs-theme="dark"],
[data-bs-theme="dark"]{
  --filler-border: rgba(255,255,255,.06);
  --filler-letter-flat: rgba(255,255,255,.16);
  --filler-grid: rgba(255,255,255,.035);
  --filler-card-1: rgba(var(--bs-body-bg-rgb), .92);
  --filler-card-2: rgba(var(--bs-body-bg-rgb), .95);
  --filler-tint: rgba(var(--bs-primary-rgb,13,110,253), .03);
}

/* --------------------------------------------------------------------------
   3) Filler tiles (missing article images)
-------------------------------------------------------------------------- */

.tile--filler{
  position: relative;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--bs-border-radius);
  min-height: 8rem;
}

.tile--filler .itemWithoutAvatarLabel{
  position: absolute;
  inset-block-start: 50%;
  inset-inline-start: 50%;
  transform: translate(-50%,-50%);
  font-size: clamp(2.75rem, 10vw, 7.5rem);
  line-height: 1;
  letter-spacing: .02em;
  user-select: none;
  pointer-events: none;
  z-index: 0;
}

/* Frosted */
.filler--frosted{
  background:
    linear-gradient(135deg, var(--filler-tint), transparent 60%),
    linear-gradient(135deg, var(--glass-bg-1), var(--glass-bg-2));
  background-blend-mode: screen, normal;

  backdrop-filter: blur(14px) saturate(120%);
  -webkit-backdrop-filter: blur(14px) saturate(120%);
  color: var(--glass-fg);
}
.filler--frosted::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background:
    radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.22), transparent 52%),
    linear-gradient(180deg, var(--glass-glare), transparent 30%),
    radial-gradient(120% 80% at 100% 100%, rgba(0,0,0,.15), transparent 55%);
  mix-blend-mode: screen;
}
.filler--frosted::after{
  content:"";
  position:absolute;
  inset:-25%;
  border-radius:inherit;
  pointer-events:none;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.16) 46%, transparent 62%);
  transform: translateX(-65%) rotate(12deg);
  animation: fillerGlare 18s linear infinite;
  mix-blend-mode: screen;
}
@keyframes fillerGlare{ to { transform: translateX(65%) rotate(12deg); } }

.filler--frosted .itemWithoutAvatarLabel{
  color: var(--engrave-ink);
  filter: blur(.4px);
  text-shadow:
    -1px -1px 0 var(--engrave-hl),
     1px  1px 0 var(--engrave-sh);
  opacity: .95;
}

@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))){
  .filler--frosted{
    background:
      linear-gradient(135deg, var(--filler-tint), transparent 60%),
      linear-gradient(180deg, var(--filler-card-1), var(--filler-card-2));
  }
}

/* Neutral */
.filler--neutral{
  background:
    linear-gradient(180deg, var(--filler-card-1), var(--filler-card-2)),
    linear-gradient(135deg, var(--filler-tint), transparent 60%);
  background-blend-mode: normal, screen;
  border: 1px solid var(--filler-border);
}
.filler--neutral::before{
  content:"";
  position:absolute;
  inset-block-start: 0;
  inset-inline-end: 0;
  width: 48px;
  height: 48px;
  pointer-events:none;
  background:
    conic-gradient(from 225deg,
      transparent 0 84deg,
      rgba(255,255,255,.14) 84deg 86deg,
      transparent 86deg 360deg);
  -webkit-mask: radial-gradient(46px at 100% 0, transparent 46px, #000 47px);
          mask: radial-gradient(46px at 100% 0, transparent 46px, #000 47px);
  opacity: .6;
}
.filler--neutral::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  pointer-events:none;
  background: radial-gradient(120% 60% at 0% 0%, rgba(255,255,255,.06), transparent 60%);
  animation: fillerDrift 22s ease-in-out infinite alternate;
}
@keyframes fillerDrift{
  from { background-position: 0% 0%; }
  to   { background-position: 100% 100%; }
}
.filler--neutral .itemWithoutAvatarLabel{
  color: var(--filler-letter-flat);
  text-shadow: none;
  filter: none;
  opacity: 1;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  .filler--frosted::after,
  .filler--neutral::after{
    animation: none;
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   4) Bootstrap tweaks: modal backdrop, nav links, offcanvas
-------------------------------------------------------------------------- */

.modal-backdrop{ --bs-backdrop-opacity: var(--overa-modal-backdrop-opacity); }

.nav-link{ color: inherit; }

.offcanvas-start{ max-width: 50vw; }
@media (min-width: 992px){
  .offcanvas-start{ max-width: 360px; }
}

/* Scrolling navbar container */
#navbarContainer{
  z-index: 1030;
  padding-bottom: 0;
}
.navbar{
  width: 100%;
  margin-bottom: 0;
}
#categoryLinksList .nav-link.active{
  border-inline-start: 3px solid var(--color-standard);
}

/* --------------------------------------------------------------------------
   5) Payment icons
-------------------------------------------------------------------------- */

.payment-icons{
  display: flex;
  align-items: center;
  gap: .5em;
  margin-inline-end: auto;
}
.payment-icons img{
  height: var(--overa-payment-icon-size);
  padding: var(--overa-payment-icon-pad);
  background-color: var(--overa-payment-icon-bg);
}

/* --------------------------------------------------------------------------
   6) Item options / selects
-------------------------------------------------------------------------- */

.selectInput{
  border: 1px solid var(--overa-border-default);
  transition: border-color .3s, background-color .3s;
}
.selectInputActive{
  background-color: var(--overa-select-active-bg);
  border-color: var(--overa-border-selected);
}
.selectInputActive .badge-price,
.selectInputActive .text-description{
  background: var(--bs-success) !important;
}
.selectInputActive .form-check-input:checked{
  background-color: var(--bs-success) !important;
  border-color: var(--bs-success) !important;
  color: #fff;
}

/* --------------------------------------------------------------------------
   7) Checkout list styling (global – consider scoping if it affects other pages)
-------------------------------------------------------------------------- */

ol{ padding-inline-start: 40px; }

.no-indication{
  list-style-type: none;
  padding-inline-start: 0;
}
.no-indication ul{ padding-inline-start: 20px; }

ul{
  list-style-type: disc;
  padding-inline-start: 0;
}

/* --------------------------------------------------------------------------
   8) Time slots
-------------------------------------------------------------------------- */

#timeSlots .selected{
  background-color: var(--bs-success) !important;
  color: #fff;
}
#timeSlots .unavailable{
  border: 1px solid var(--bs-secondary);
  opacity: 0.1;
  pointer-events: none;
}
#timeSlots .progress-bar{ transition: width 1s ease; }
#timeSlots .slot-grid{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(70px, 1fr));
  gap: 10px;
  font-size: 1.25em;
}
#timeSlots .slot-card{
  border: 1px solid var(--bs-success);
  border-radius: .25rem;
  padding: 10px;
  position: relative;
  text-align: center;
}

.font-taxes{ font-size: min(12px, 1.75vh); }

/* --------------------------------------------------------------------------
   9) Typography
-------------------------------------------------------------------------- */

body{
  font-family: "Open Sans", sans-serif;
  font-weight: 300;
}

.text-description h5,
.text-overlay h5,
.text-content h5{
  font-size: 1rem;
}
.text-overlay p,
.text-content p{
  font-size: .9rem;
}

@media (max-width: 768px){
  .text-overlay h5,
  .text-content h5,
  .option-name{
    font-size: .9rem;
  }
  .text-overlay p,
  .text-content p,
  .option-remark{
    font-size: .8rem;
  }
}

/* --------------------------------------------------------------------------
   10) Menu scroll hide
-------------------------------------------------------------------------- */

.hidden{
  transform: translateY(-100%);
  transition: transform .3s ease-in-out;
}

/* --------------------------------------------------------------------------
   11) Category section spacing
-------------------------------------------------------------------------- */

.categorySection > h2,
.categorySection > p{
  padding-inline: 1rem;
}
.categorySection > h2{
  padding-block-start: 1rem;
}

/* --------------------------------------------------------------------------
   12) Image blur loading
-------------------------------------------------------------------------- */

.imgBlur{ filter: blur(5px); }
.imgLoaded{
  filter: blur(0);
  transition: filter 1s ease-out;
}

/* --------------------------------------------------------------------------
   13) Badges + option content
-------------------------------------------------------------------------- */

.option-badge-content{ text-align: start; }

/* --------------------------------------------------------------------------
   14) Modal spacing + close button stacking
-------------------------------------------------------------------------- */

.modal-header,
.modal-footer{
  padding: .5rem 1rem !important;
}

:where(
  h5, p,
  .text-content h5,
  .text-overlay h5,
  .text-overlay p,
  .option-text-content h5
){
  margin-block: 0;
  padding-block-start: 0;
}

.modal-body{ scroll-behavior: smooth; }
.btn-close{ z-index: 1051; }

/* --------------------------------------------------------------------------
   15) Option groups + custom form tweaks
-------------------------------------------------------------------------- */

.option-group-section{ margin-block-start: 15px; }

.option-checkbox{
  margin-inline-end: 8px;
  pointer-events: none;
}

/* --------------------------------------------------------------------------
   16) Image container + overlay (SCRIM approach)
   - Scrim provides contrast; text stays clean.
   - Keep your existing .text-overlay and .text-description markup.
-------------------------------------------------------------------------- */

.img-container{
  position: relative;
  width: 100%;
  display: block;
  overflow: hidden;
}

/* Image fill */
.img-container > img,
.img-container img{
  width: 100%;
  display: block;
  object-fit: cover;
}

/* Scrim overlay (default: TOP) */
.img-container::after{
  content:"";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 1;

  background: linear-gradient(
    to bottom,
    var(--overa-img-scrim-1) 0%,
    var(--overa-img-scrim-2) 35%,
    var(--overa-img-scrim-3) 70%
  );
}

/* If you need bottom scrim for some cards, add .scrim--bottom to the container */
.img-container.scrim--bottom::after{
  background: linear-gradient(
    to top,
    var(--overa-img-scrim-1) 0%,
    var(--overa-img-scrim-2) 35%,
    var(--overa-img-scrim-3) 70%
  );
}

/* If you need both ends, add .scrim--both */
.img-container.scrim--both::after{
  background:
    linear-gradient(to bottom, var(--overa-img-scrim-1) 0%, var(--overa-img-scrim-2) 35%, var(--overa-img-scrim-3) 70%),
    linear-gradient(to top,    var(--overa-img-scrim-1) 0%, var(--overa-img-scrim-2) 35%, var(--overa-img-scrim-3) 70%);
}

/* Overlay text sits above scrim */
.text-overlay{
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  z-index: 2;
}

/* Make overlay text readable; keep RTL friendly */
.text-overlay,
.text-overlay *{
  color: var(--overa-img-overlay-fg);
  text-shadow: var(--overa-img-overlay-shadow);
}

/* Badge above everything */
.img-container .badge{
  z-index: 3;
  transform: none;
}

/* Keep .text-description as a layout wrapper but remove background box styling */
.text-description{
  color: currentColor;
  width: calc(100% - .5rem);
  padding: .25rem;
  box-sizing: border-box;
}

/* --------------------------------------------------------------------------
   17) Shopping cart avatars
-------------------------------------------------------------------------- */

.item-avatar{
  width: 100px;
  height: auto;
}
.item-badge-avatar{
  width: 25px;
  height: auto;
  border-radius: 3px;
}
@media (max-width: 576px){
  .item-avatar{ width: 75px; }
}