/* --- Orders Admin Styles --- */
.orders-admin {
  max-width: 1500px;
  /* margin: 0 auto; */
  padding: 2.5rem 1rem;
}

/* --- Calendar Auth (driver portal) --- */
.calendar-auth-page {
  min-height: calc(100vh - 60px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
  background: #ffffff;
}

.calendar-auth-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: 16px;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
  padding: 1.4rem 1.3rem;
}

.calendar-auth-title {
  margin: 0 0 0.4rem 0;
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.5px;
}

.calendar-auth-sub {
  margin: 0 0 1rem 0;
  color: #666;
  font-size: 0.98rem;
  line-height: 1.35;
}

.calendar-auth-label {
  display: block;
  font-weight: 600;
  margin: 0.7rem 0 0.35rem;
  color: #222;
}

.calendar-auth-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  outline: none;
}

.calendar-auth-input:focus {
  border-color: rgba(0, 0, 0, 0.30);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

.calendar-auth-btn {
  margin-top: 1rem;
  width: 100%;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  cursor: pointer;
  background: #111;
  color: #fff;
}

.calendar-auth-btn:hover {
  background: #000;
}

.calendar-auth-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

/* Checkout modal: order details show more/less toggle */
.checkout-details-header {
  margin-bottom: 8px;
}

.checkout-details-toggle {
  border: 0;
  background: transparent;
  color: #0b1324;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
}

.checkout-details-toggle:hover {
  background: rgba(11, 19, 36, 0.06);
}

.checkout-details-toggle:active {
  background: rgba(11, 19, 36, 0.1);
}

.calendar-auth-btn.secondary {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,0.16);
}

.calendar-auth-error {
  margin-top: 0.9rem;
  color: #c0392b;
  font-size: 0.95rem;
}
.orders-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.2rem;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.orders-title {
  font-size: 2.1rem;
  font-weight: 700;
  margin: 0;
  letter-spacing: -1px;
}
.orders-sub {
  color: #888;
  font-size: 1.1rem;
  margin-top: 0.3em;
}
.orders-controls {
  display: flex;
  gap: 0.7em;
  align-items: center;
  margin-top: 0.5em;
}
.orders-search {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.5em 1em;
  font-size: 1em;
  margin-right: 0.5em;
}
.orders-select {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.5em 1em;
  font-size: 1em;
  margin-right: 0.5em;
}
.orders-list {
  width: 100%;
}
.orders-table {
  width: 100%;
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  overflow: hidden;
  border-collapse: separate;
  border-spacing: 0;
}
.orders-table th {
  background: #f7f7fa;
  color: #333;
  font-weight: 600;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid #ececec;
}
.orders-table td {
  padding: 1rem 0.5rem;
  border-bottom: 1px solid #f0f0f0;
  vertical-align: middle;
}
.orders-row {
  cursor: pointer;
  transition: background 0.15s;
}
.orders-row:hover {
  background: #f7f7fa;
}
.action-buttons {
  display: flex;
  gap: 0.5em;
}
.btn-primary {
  border: none;
  border-radius: 6px;
  padding: 0.5em 1.2em;
  font-weight: 600;
  font-size: 1em;
  background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  color: #fff;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
  margin-right: 0.5em;
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.btn-secondary {
  border: 1px solid #e0e0e0;
  border-radius: 6px;
  padding: 0.5em 1.2em;
  font-weight: 600;
  font-size: 1em;
  background: #f7f7fa;
  color: #333;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}
.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}
.status-badge {
  display: inline-block;
  padding: 0.3em 0.9em;
  border-radius: 1em;
  font-size: 0.95em;
  font-weight: 500;
  background: #e9e9ef;
  color: #444;
  text-transform: capitalize;
}
.status-badge.accepted {
  background: #d1f5e6;
  color: #1a7f4c;
      display: flex;
    /* width: fit-content; */
    justify-content: center;
}
.status-badge.queued {
  background: #fff7d6;
  color: #b48a00;
}
.status-badge.refunded {
  background: #ffe0e0;
  color: #c0392b;
}
.orders-cards {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.orders-card {
  background: #fff;
  border-radius: 14px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 1.5rem;
  margin-bottom: 0;
  transition: box-shadow 0.2s;
  cursor: pointer;
}
.orders-card:hover {
  box-shadow: 0 4px 24px rgba(0,0,0,0.13);
}
.orders-card-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.7em;
}
.orders-card-id {
  font-weight: 600;
  font-size: 1.1em;
}
.orders-card-amount {
  font-weight: 500;
  color: #6a82fb;
  font-size: 1.1em;
}
.orders-card-customer {
  color: #555;
  margin-bottom: 0.7em;
}
.orders-card-actions {
  display: flex;
  gap: 0.5em;
}
@media (max-width: 720px) {
  .orders-admin {
    padding: 1.2rem 0.2rem;
  }
  .orders-admin-header {
    flex-direction: column;
    align-items: stretch;
    gap: 0.7rem;
  }
  .orders-table th, .orders-table td {
    padding: 0.7rem 0.3rem;
    font-size: 0.98em;
  }
  .orders-card {
    padding: 1rem;
  }
}
.checkout-open .order-filter-bar {
  z-index: 0 !important;
}
/* --- Checkout Modal Styles --- */
.checkout-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.32);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
}
.checkout-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(20, 30, 40, 0.13);
  padding: 32px 24px 24px 24px;
  min-width: 320px;
  max-width: 95vw;
  max-height: 90vh;
  overflow-y: auto;
  overflow-x: hidden;
  display: flex;
  flex-direction: column;
  /* stretch children to fill modal width so form controls don't leave a gap on small screens */
  align-items: stretch;
  box-sizing: border-box;
}
.checkout-modal {
  position: relative;
  z-index: 10001;
}
.checkout-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #18375d;
  z-index: 10002;
}
.checkout-modal-close:hover {
  background: rgba(2, 52, 75, 0.04);
}
.checkout-modal h2 {
  margin-top: 0;
  margin-bottom: 18px;
  color: #18375d;
}
.checkout-modal .form-box {
  width: 100%;
}
.checkout-details-list {
  font-size: 15px;
  color: #233044;
  margin-bottom: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
input:-webkit-autofill,
textarea:-webkit-autofill,
select:-webkit-autofill {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
}

input:-webkit-autofill:focus,
textarea:-webkit-autofill:focus,
select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  box-shadow: 0 0 0px 1000px #fff inset !important;
  -webkit-text-fill-color: #000 !important;
}

input:-moz-autofill,
textarea:-moz-autofill,
select:-moz-autofill {
  box-shadow: 0 0 0px 1000px #fff inset !important;
  -moz-text-fill-color: #000 !important;
}

input:-webkit-autofill {
  transition: background-color 5000s ease-in-out 0s !important;
}

.modern-phone-row {
  display: flex;
  gap: 12px;
  align-items: stretch;
  margin-top: 0;
  grid-column: 1 / -1;
}
.modern-phone-card {
  display: flex;
  align-items: center;
  background: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  border: 1px solid #e6e8eb;
  padding: 0 14px 0 8px;
  min-width: 120px;
  cursor: pointer;
  position: relative;
  height: 44px;
  user-select: none;
}
.modern-phone-flag {
  font-size: 22px;
  margin-right: 8px;
}
.modern-phone-code {
  font-size: 15px;
  font-weight: 500;
  margin-right: 6px;
}
.modern-phone-arrow {
  margin-left: auto;
  font-size: 13px;
  transition: transform 0.2s;
}
.modern-phone-arrow.open {
  transform: rotate(180deg);
}
.modern-phone-dropdown {
  position: absolute;
  left: 0;
  top: 110%;
  width: 320px;
  max-height: 340px;
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.13);
  border: 1px solid #e6e8eb;
  z-index: 100;
  padding: 10px 0 0 0;
  display: flex;
  flex-direction: column;
}
.modern-phone-search {
  width: 90%;
  margin: 0 auto 8px auto;
  padding: 7px 12px;
  max-height: 260px;
}
.modern-phone-option {
  display: flex;
  align-items: center;
  padding: 7px 18px 7px 14px;
  cursor: pointer;
  transition: background 0.13s;
}
.modern-phone-option:hover {
  background: #f2f6fa;
}
.modern-phone-label {
  flex: 1 1 auto;
  margin-left: 8px;
  font-size: 15px;
}
.modern-phone-input {
  height: 44px;
  font-size: 16px;
  border-radius: 8px;
  border: 1px solid #e6e8eb;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
}
/* --- OrderPage menu card layout fix --- */
.order-menu-card {
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: space-between;
  box-sizing: border-box;
}

.order-menu-card-content {
  flex: 1 1 auto;
}

.order-menu-card-allergens {
  margin-top: auto;
  padding-top: 12px;
  display: flex;
  align-items: center;
  min-height: 40px;
}

.order-menu-card-allergens .diet-badge,
.order-menu-card-allergens .diet-img {
  margin-left: 8px;
}

/* Spacing fixes for OrderPage: ensure the filter/category bar isn't glued to the navbar
   and the details stack has breathing room above the footer/next section. */
/* `.order-filter-bar` uses its natural flow position; when it becomes
  sticky the `top` value in the sticky rule below controls the offset. */

.details-stack {
  /* Give the order details some space below so they don't touch following elements */
  margin-bottom: 24px;
}

@media (max-width: 700px) {
  .order-menu-card {
    min-height: 0;
  }
}

@media (max-width: 900px) {
  html, body{
  overflow-x: hidden;
  }
  .details-stack {
    margin-bottom: 18px;
  }
  .menu-disclaimer {
    margin-top: 50px !important;
  }

}

/* When the search is open on mobile, hide the category filter and arrows
   so only the search input is visible. The `.search-open` class is toggled
   on the `.order-filter-bar` element from React. */
@media (max-width: 800px) {
  .order-filter-bar.search-open {
    /* make the bar take minimal height so the input can expand on its own */
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .order-filter-bar.search-open .filter-categories,
  .order-filter-bar.search-open .filter-scroll-btn {
    display: none !important;
  }
  .order-filter-bar.search-open .filter-search {
    flex: 1 1 auto;
    display: block;
  }
  /* Ensure the search-open state shows the open search input area */
  .order-filter-bar.search-open .filter-search .filter-search-open {
    display: flex;
    width: 100%;
  }
  .order-filter-bar .filter-search .filter-search-open {
    width: 100%;
  }
}

/* When the filter bar becomes stuck (user scrolled), add top spacing to the
   details column so the sticky bar doesn't visually overlap the order form. */
.filter-stuck .details-stack {
  /* use the measured height of the filter bar (set by JS) with a small gap */
  padding-top: calc(var(--order-filter-offset, 56px) + 8px);
  transition: padding-top 160ms ease;
}
@font-face {
  font-family: "Genty Demo";
  font-style: normal;
  font-weight: 400;
  src:
    local("Genty Demo"),
    url("/fonts/GentyDemo-Regular.woff") format("woff");
}

/* --- FAQ styles merged from src/assets/faq.css --- */
:root {
  --cherie-dark: #02344b; /* primary dark blue from existing palette */
  --cherie-mid: #18375d;
  --card-bg: #f6fafc; /* very light blue-ish card background */
}

.faq-page {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 150px;
  padding-bottom: 150px;
  color: var(--cherie-mid);
}

/* two-column FAQ layout similar to the provided screenshot */
.faq-container {
  display: grid;
  grid-template-columns: 46% 1fr; /* left column for title/cta, right for accordion */
  align-items: start; /* vertically center right accordion alongside title */
  gap: 48px;
  max-width: 1200px;
}

.faq-left {
  padding-right: 40px;
  max-width: 560px; /* keep title column narrow like screenshot */
}

.faq-title {
  font-size: 44px;
  line-height: 0.95;
  font-weight: 800;
  margin: 0 0 18px 0;
  color: #081a2a;
}

.faq-desc {
  font-size: 16px;
  color: rgba(2, 52, 75, 0.75);
  margin-bottom: 22px;
  margin-top: 35px;
}

.faq-right {
  padding-left: 20px;
  display: flex;
  justify-content: center;
}

.faq-right .faq-card {
  width: 680px; /* constrain accordion width to look like screenshot */
}

.faq-cta {
  margin-top: 12px;
}

.add-circle {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e6e8eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(2, 52, 75, 0.03);
  transition:
    width 200ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 160ms ease,
    box-shadow 200ms ease,
    background 120ms ease,
    border-radius 200ms ease;
  will-change: width, transform, box-shadow;
  padding: 0;
  font-size: 18px;
  position: relative;
  overflow: hidden;
}
.add-circle:focus {
  outline: none;
  box-shadow: 0 4px 12px rgba(2, 52, 75, 0.08);
}
.add-circle .add-plus {
  font-weight: 700;
  display: inline-block;
  position: relative;
  z-index: 2; /* keep the + above the sliding controls while it animates */
  transition:
    transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 160ms ease;
  transform-origin: right center;
  margin-right: 2px;
}
.acceptdnybut {
  display: flex;
  gap: 10px;
  margin-top: 20px;
  justify-content: center;
}
.add-circle.has-count {
  background: #ffffff;
}
.add-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  color: #18375d;
  font-weight: 700;
  border: 1px solid #e6e8eb;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.faq-cta {
  background: var(--card-bg);
  border: 1px solid rgba(2, 52, 75, 0.08);
  color: var(--cherie-dark);

/* --- Admin Orders styling --- */
.orders-admin {
  padding: 18px 20px;
}
.orders-admin h2 {
  font-size: 20px;
  margin: 0 0 6px 0;
  color: var(--cherie-mid);
}
.orders-admin .orders-list {
  margin-top: 12px;
}
.orders-table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 18px rgba(2, 52, 75, 0.04);
}
.orders-table thead th {
  text-align: left;
  padding: 12px 16px;
  background: linear-gradient(180deg,#fbfdff,#f6fbff);
  border-bottom: 1px solid #eef3f7;
  font-size: 13px;
  color: #12324a;
}
.orders-table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid #f4f7f9;
  vertical-align: middle;
  font-size: 14px;
  color: #213444;
}
.orders-table tbody tr:hover {
  background: #fbfdff;
}

.btn-primary {
  background: linear-gradient(180deg,#066a95,#054f74);
  color: #fff;
  padding: 8px 12px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  font-weight: 600;
}
.btn-primary[disabled] {
  opacity: 0.6;
  cursor: default;
}
.btn-secondary {
  background: #fff;
  color: #18375d;
  padding: 8px 12px;
  border-radius: 8px;
  border: 1px solid #e6e8eb;
  cursor: pointer;
  font-weight: 600;
}

/* Search input and header controls */
.orders-admin input[type="text"], .orders-admin input[type="search"] {
  border: 1px solid #e6e8eb;
  padding: 8px 10px;
  border-radius: 8px;
  min-width: 180px;
}
.orders-admin select {
  border: 1px solid #e6e8eb;
  padding: 8px 10px;
  border-radius: 8px;
}

/* Mobile cards */
@media (max-width: 720px) {
  .orders-table { display: none; }
  .orders-admin .orders-list > div { padding: 6px 0; }
}

/* Modal for OrderModal.jsx */
.modal-backdrop {
  position: fixed !important;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 18, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22000;
  padding: 24px;
  -webkit-overflow-scrolling: touch;
  animation: modal-fadein 0.22s cubic-bezier(.4,1.4,.6,1) both;
}
.modal-backdrop::before {
  content: '';
  position: fixed;
  inset: 0;
  z-index: -1;
}
.modal-card {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 480px;
  max-height: calc(100vh - 60px);
  overflow-y: auto;
  box-shadow: 0 12px 48px 0 rgba(20, 30, 40, 0.18), 0 1.5px 8px 0 rgba(20,30,40,0.08);
  padding: 0 0 24px 0;
  position: relative;
  border: 1.5px solid #f2f4f8;
  animation: modal-scalein 0.22s cubic-bezier(.4,1.4,.6,1) both;
}
.modal-card h3.modal-title {
  background: linear-gradient(90deg, #6a82fb 0%, #fc5c7d 100%);
  color: #fff;
  border-radius: 18px 18px 0 0;
  margin: 0;
  padding: 22px 32px 16px 32px;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.5px;
  box-shadow: 0 2px 8px rgba(20,30,40,0.04);
}
.modal-meta {
  display: flex;
  flex-direction: column;
  gap: 4px;
  color: #243243;
  margin-bottom: 12px;
  padding: 0 32px;
  margin-top: 10px;
}
.modal-section {
  margin-top: 18px;
  padding: 0 32px;
}
.details-grid {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 8px 10px;
  align-items: start;
  font-size: 1rem;
}
.detail-row .label {
  color: #2b3b4b;
  font-weight: 600;
  opacity: 0.85;
}
.detail-row .value {
  color: #334155;
  font-weight: 400;
}
.items-list {
  padding-left: 18px;
  margin: 8px 0 0 0;
}
.item-row {
  margin-bottom: 8px;
  font-size: 1rem;
}
.item-qty {
  font-weight: 700;
  margin-right: 6px;
}
.item-desc {
  color: #18375d;
}
.item-amount {
  margin-left: 8px;
  color: #374151;
}
.modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 2px 8px rgba(2,52,75,0.08);
  font-size: 22px;
  cursor: pointer;
  color: #6a82fb;
  transition: background 0.13s, color 0.13s;
  z-index: 2;
}
.modal-close:hover {
  background: #f7f7fa;
  color: #fc5c7d;
}
@keyframes modal-fadein {
  from { opacity: 0; }
  to { opacity: 1; }
}
@keyframes modal-scalein {
  from { opacity: 0; transform: scale(0.96); }
  to { opacity: 1; transform: scale(1); }
}
.modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: #fff;
  box-shadow: 0 6px 18px rgba(2,52,75,0.08);
  font-size: 20px;
  cursor: pointer;
}
.modal-card h3 { margin-top: 0; color: var(--cherie-mid); }
.modal-card ul { padding-left: 18px; }
.modal-card li { margin-bottom: 8px; }

/* Orders admin improvements */
.orders-admin {
  padding: 18px;
}
.orders-admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 16px;
  margin-bottom: 18px;
}
.orders-title { margin: 0; font-size: 22px; color: var(--cherie-mid); }
.orders-sub { color: #6b7280; font-size: 13px; margin-top: 6px; }
.orders-controls { display: flex; gap: 10px; align-items: center; }
.orders-search { padding: 8px 10px; border-radius: 8px; border: 1px solid #e6e8eb; min-width: 220px; }
.orders-select { padding: 8px 10px; border-radius: 8px; border: 1px solid #e6e8eb; }

.orders-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  box-shadow: 0 2px 18px rgba(2,52,75,0.03);
  border-radius: 10px;
  overflow: hidden;
}
.orders-table thead tr { background: #fbfdff; }
.orders-table thead th { text-align: left; padding: 12px 16px; font-size: 13px; color: #213444; }
.orders-table tbody tr.orders-row { cursor: pointer; }
.orders-table tbody td { padding: 14px 16px; border-bottom: 1px solid #f4f7f9; vertical-align: middle; }

/* Alternating row backgrounds to visually separate items */
.orders-table tbody tr:nth-child(odd) { background: #ffffff; }
.orders-table tbody tr:nth-child(even) { background: #fbfeff; }
.order-id { font-weight: 700; color: #0b2740; }
.order-customer { color: #344050; }
.order-amount { color: #0b2740; font-weight: 600; }
.order-status { text-align: left; }
.action-buttons { display: flex; gap: 8px; 
    justify-content: center; }

/* Status badges */
.status-badge { display: inline-block; padding: 6px 10px; border-radius: 999px; font-weight: 700; font-size: 13px; text-transform: capitalize; }
.status-badge.queued { background: #fff7ed; color: #b45309; border: 1px solid rgba(180,83,9,0.08); }
.status-badge.accepted { background: #ecfdf5; color: #065f46; border: 1px solid rgba(6,95,70,0.06); }
.status-badge.refunded { background: #fff1f2; color: #9f1239; border: 1px solid rgba(159,18,57,0.06); }

/* Mobile card layout */
.orders-cards { display: grid; gap: 12px; }
.orders-card { border: 1px solid #e6e6e6; padding: 12px; border-radius: 10px; background: #fff; }

/* Alternate card backgrounds on mobile for clearer separation */
.orders-cards .orders-card:nth-child(odd) { background: #ffffff; }
.orders-cards .orders-card:nth-child(even) { background: #fbfdff; }
.orders-card-top { display:flex; justify-content: space-between; align-items: center; }
.orders-card-id { font-weight: 700; color: #0b2740; }
.orders-card-amount { color: #344050; font-weight: 600; }
.orders-card-customer { margin-top: 8px; color: #4b5563; }
.orders-card-actions { margin-top: 10px; display:flex; gap:8px; }

/* Modal improvements */
.modal-title { margin: 0 0 6px 0; }
.modal-meta { display:flex; gap: 16px; flex-wrap:wrap; color:#243243; margin-bottom: 12px; }
.modal-section { margin-top: 14px; }
.details-grid { display:grid; grid-template-columns: 160px 1fr; gap: 8px 16px; align-items: start; }
.detail-row { display: contents; }
.detail-row .label { color: #2b3b4b; font-weight: 700; }
.detail-row .value { color: #334155; }
.items-list { padding-left: 18px; margin: 8px 0 0 0; }
.item-row { margin-bottom: 8px; }
.item-qty { font-weight: 700; margin-right: 6px; }
.item-desc { color: #18375d; }
.item-amount { margin-left: 8px; color: #374151; }

@media (max-width: 720px) {
  .orders-admin-header { flex-direction: column; align-items: flex-start; gap: 12px; }
  .orders-controls { width: 100%; }
  .orders-search { width: 100%; min-width: 0; }
  .details-grid { grid-template-columns: 1fr; }
}

/* Ensure header controls and list align to the same centered content width */
.orders-admin > .orders-admin-header,
.orders-admin .orders-list {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
  width: calc(100% - 36px);
}

/* Make controls fit the list width on larger screens */
.orders-admin .orders-controls { align-items: center; }
.orders-admin .orders-controls > * { vertical-align: middle; }

/* Improve order card look in mobile list */
.orders-admin .orders-list > div > div[style] {
  background: linear-gradient(180deg,#ffffff,#fbfdff);
}

/* Small utility */
.text-muted { color: #6b7b86; font-size: 13px; }

  padding: 14px 24px;
  border-radius: 12px;
  cursor: pointer;
  font-weight: 600;
}

.faq-right .faq-card {
  /* keep the wrapper neutral; each item becomes its own white card */
  background: transparent;
  border-radius: 0;
  padding: 0;
  box-shadow: none;
  border: none;
}

.faq-accordion-item {
  background: #ffffff; /* each question gets its own white card */
  border-radius: 12px;
  border: 1px solid rgba(2, 52, 75, 0.06);
  box-shadow: 0 8px 22px rgba(2, 52, 75, 0.04);
  overflow: hidden;
}

.faq-accordion-item + .faq-accordion-item {
  margin-top: 18px;
}

.faq-accordion-header {
  width: 100%;
  text-align: left;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: transparent;
  border: none;
  padding: 20px 22px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 16px;
  color: var(--cherie-mid);
}

.faq-accordion-header:hover {
  background: rgba(2, 52, 75, 0.02);
}

.faq-accordion-item.open .faq-accordion-header {
  background: rgba(2, 52, 75, 0.02);
}

.faq-icon {
  font-size: 20px;
  color: var(--cherie-dark);
  margin-left: 12px;
}

.faq-accordion-body {
  /* closed state: hide with max-height + opacity + translateY for a smooth collapse */
  max-height: 0;
  opacity: 0;
  transform: translateY(-8px);
  overflow: hidden;
  transition:
    max-height 360ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 260ms ease,
    transform 280ms cubic-bezier(0.2, 0.9, 0.2, 1);
  color: rgba(2, 52, 75, 0.9);
}

/* inner padding that appears when open */
.faq-accordion-body-inner {
  padding: 0 20px 20px 20px;
  line-height: 1.6;
}

.faq-accordion-body.open {
  /* large enough max-height to hold content; keeps smooth animation without JS height measurement */
  max-height: 600px; /* should be > content height */
  opacity: 1;
  transform: translateY(0);
}

.faq-left {
  padding-right: 20px;
}
.faq-right {
  padding-left: 10px;
}

/* Date input wrapper: show an overlay placeholder for native date inputs (which don't render placeholder text) */
.date-input-wrapper {
  position: relative;
}
.date-input-wrapper input[type="date"] {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 44px;
  padding: 10px 44px 10px 14px; /* leave room on the right for native calendar icon */
  border-radius: 8px;
  border: 1px solid #e6e8eb;
  background: #fff;
  box-sizing: border-box;
  font-size: 14px;
  color: #0f172a;
}
/* Show a native-style placeholder inside date inputs on WebKit/Blink browsers
   by using the internal datetime edit pseudo-element. This injects the
   input's placeholder attribute when the control has no value. Non-WebKit
   browsers will still see the regular placeholder attribute as a fallback.
*/
.date-input-wrapper input[type="date"]::-webkit-datetime-edit {
  color: #0f172a;
}
.date-input-wrapper input[type="date"]:not([value])::-webkit-datetime-edit {
  /* hide actual edit text when there's no value so we can show placeholder */
  color: transparent;
}
.date-input-wrapper
  input[type="date"]:not([value])::-webkit-datetime-edit:before {
  content: attr(placeholder);
  color: #6b7280;
}

/* On mobile, hide the native dd/mm/yyyy text when no date is selected and rely
   only on the floating label. Once a value exists (data-has-value="true"), the
   browser-rendered date remains visible. */


/* For Firefox / other engines we keep the placeholder attribute as a fallback; nothing else needed. */

/* Fallback overlay placeholder + floating label behavior for date inputs. */
.date-input-wrapper {
  position: relative;
}
.date-input-wrapper .date-fake-placeholder {
  position: absolute;
  left: 12px;  /* align with other inputs' horizontal padding */
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  color: #747477; /* match other input placeholders */
  font-size: 14px; /* same base size as regular placeholders */
  font-weight: 200;
  font-family: Segoe UI;
  display: none; /* hidden by default (desktop); enabled only on mobile via media query above */
  pointer-events: none; /* allow taps to reach the input */
  z-index: 3; /* over the input */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition:
    top 150ms ease,
    transform 150ms ease,
    font-size 150ms ease,
    color 150ms ease,
    opacity 140ms ease,
    visibility 140ms ease;
}
/* When focused (and before a value is chosen), float the label to the top of the input */
.date-input-wrapper input[type="date"]:focus + .date-fake-placeholder {
  top: 4px;
  transform: none;
  font-size: 11px;
  color: #6b7280;
}
/* Once a value exists, hide the label entirely */
.date-input-wrapper[data-has-value="true"] .date-fake-placeholder {
  opacity: 0;
  visibility: hidden;
}
.faq-accordion-body-inner p {
  margin: 0;
  margin-top: 16px;
}
@media (max-width: 800px) {
  .date-input-wrapper[data-has-value="false"] input[type="date"] {
    color: transparent !important; /* hide dd/mm/yyyy text */
  }
  .date-input-wrapper[data-has-value="false"] input[type="date"]::-webkit-datetime-edit {
    color: transparent !important;
  }
  .date-input-wrapper[data-has-value="false"]
    input[type="date"]::-webkit-datetime-edit:before {
    content: '';
  }

  /* On mobile we show the custom floating label inside the date input */
  .date-input-wrapper .date-fake-placeholder {
    display: block;
  }
}
@media (max-width: 900px) {
  .faq-container {
    grid-template-columns: 1fr;
    gap: 28px;
    margin-top: 100px;
    margin-bottom: 100px;
  }
  .faq-left {
    padding-right: 0;
    text-align: center;
  }
  .faq-desc {
    margin-top: 0px;
    margin-bottom: 5px;
  }
  .faq-title {
    font-size: 36px;
  }
  .faq-right {
    padding-left: 0;
  }

  /* Mobile-friendly adjustments for the FAQ accordion */
  .faq-page {
    padding-top: 60px; /* reduce large vertical whitespace on small screens */
    padding-bottom: 60px;
  }

  /* Allow the accordion wrapper to be fluid on mobile (prevent horizontal scrolling) */
  .faq-right .faq-card {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 0 8px; /* small inner padding so cards don't touch edges */
  }

  /* Make each accordion header easier to tap */
  .faq-accordion-header {
    padding: 16px;
    font-size: 17px;
    min-height: 56px; /* meet mobile touch target guidelines */
  }

  .faq-icon {
    font-size: 22px;
  }

  .faq-accordion-body-inner {
    padding: 0 16px 16px 16px;
  }
}

/* Extra small phones: tighten spacing and font sizes */
@media (max-width: 600px) {
  .faq-page {
    padding-top: 40px;
    padding-bottom: 40px;
  }
  .faq-title {
    font-size: 28px;
  }
  .faq-desc {
    font-size: 15px;
  }
  .faq-accordion-header {
    font-size: 16px;
    padding: 14px;
  }
  .faq-accordion-item + .faq-accordion-item {
    margin-top: 14px;
  }
  .faq-left {
    padding-right: 0;
  }
}

/* Additional checkout modal layout styles: two-column on desktop, stacked on mobile */
.checkout-modal {
  max-width: min(94vw, 1160px);
  width: 100%;
  padding: 28px;
  max-height: min(90vh, 900px);
  display: flex;
  flex-direction: column;
}
.checkout-modal-content {
  display: flex;
  gap: 18px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
  height: min(calc(90vh - 110px), 800px);
  width: 100%;
  box-sizing: border-box;
}
.checkout-modal-left {
  flex: 40 1 0;
  background: #e6eff4;
  padding: 12px;
  border-radius: 6px;
  display: flex;
  flex-direction: column;
  min-height: 0;
  min-width: 0;
  box-sizing: border-box;
  overflow: hidden;
}
.checkout-modal-right {
  flex: 57 1 0;
  /* Plain block scroll container: the form-box grows with its content and this
     element scrolls when the modal is too short (e.g. zoomed in). Using flex
     here would squeeze the form-box to the column height and make the fields
     overlap instead of scrolling. */
  display: block;
  min-width: 0;
  height: 100%;
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
}
.checkout-modal-right .form-box {
  display: flex;
  flex-direction: column;
  /* Fill the column when there's room, but grow past it when the modal is too
     short so .checkout-modal-right's overflow-y:auto shows a scrollbar. */
  min-height: 100%;
  width: 100%;
  justify-content: flex-start;
}

/* ── Small desktop / large laptop (801px – 1024px): two-col but tighter gaps ── */
@media (min-width: 801px) and (max-width: 1024px) {
  .checkout-modal { padding: 16px; max-height: min(92vh, 900px); }
  .checkout-modal-content { gap: 10px; height: min(calc(92vh - 80px), 820px); }
  .checkout-modal-left { flex: 38 1 0; padding: 10px; }
  .checkout-modal-right { flex: 55 1 0; }
  .checkout-modal-right .form-grid { gap: 7px; }
  .checkout-modal h2 { font-size: 1.1em; margin-bottom: 10px; }
}
.checkout-summary-items {
  flex: 1 1 auto;
  overflow: auto;
  padding-right: 6px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 14px;
  min-height: 0;
  height: calc(100% - 90px); /* leave space for totals area */
  /* prevent grid items from stretching to fill the full height when there are few items */
  align-content: start;
  align-items: start;
  grid-auto-rows: min-content;
}

/* If there's only one item (or the empty placeholder), let it span both columns so it stretches horizontally */
.checkout-summary-items > *:only-child {
  grid-column: 1 / -1;
}

/* Style the empty placeholder to center and stretch horizontally */
.checkout-summary-items > .empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  min-height: 120px;
  color: rgba(2, 52, 75, 0.8);
}
.checkout-summary-items .summary-line {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: rgba(255, 255, 255, 0.75);
  border-radius: 6px;
  box-sizing: border-box;
  overflow: hidden;
  white-space: normal;
  word-break: break-word;
}
.checkout-summary-bottom {
  margin-top: 12px;
  flex: 0 0 auto;
  background: transparent;
  padding-top: 8px;
  position: sticky;
  bottom: 0;
  /* ensure totals area has a fixed height so left/right align */
  height: 90px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Right column: the grid grows to fill the available height. Rows share that
   height equally (grid-auto-rows: 1fr) so the inputs themselves get taller and
   fill the space, keeping only a small gap — instead of dumping the slack into
   large gaps between fixed-height fields. */
.checkout-modal-right .form-grid {
  overflow: visible;
  min-height: 0;
  padding-right: 6px;
  gap: 10px;
  /* grow to fill, but never shrink below the inputs' natural height */
  flex: 1 0 auto;
  grid-auto-rows: minmax(38px, 1fr);
}
/* Stretch every control to fill its (taller) row. */
.checkout-modal-right .form-grid > * {
  align-self: stretch;
  min-height: 0;
}
.checkout-modal-right .form-grid input,
.checkout-modal-right .form-grid select,
.checkout-modal-right .form-grid .date-input-wrapper,
.checkout-modal-right .form-grid .date-input-wrapper input[type="date"],
.checkout-modal-right .form-grid .phone-input {
  height: 100%;
}
/* Let the select centre its text now that it can be taller than its old 38px. */
.checkout-modal-right .form-grid select {
  line-height: normal;
}
.checkout-modal-right textarea {
  flex: 0 0 80px;
  margin-top: 8px;
}
.checkout-modal-right > .form-box > div[style] {
  flex: 0 0 auto;
}

@media (max-width: 800px) {
  .date-label-mobile {
    display: block !important;
  }
  /* Mobile: make modal adapt to viewport, remove fixed heights and stack content */
  .checkout-modal {
    width: 96%;
    margin: 12px;
    padding: 14px;
    max-height: calc(100vh - 32px);
  }
  .checkout-modal-content {
    flex-direction: column;
    height: auto;
  }
  .checkout-modal-left,
  .checkout-modal-right {
    flex: initial;
    width: auto;
    height: auto;
  }
  .checkout-modal-left {
    max-height: none;
    padding: 0px;
    min-width: auto;
  }
  .checkout-modal .form-box {
    width: auto;
  }
  /* Make left items single-column on mobile and limit its scroll area */
  .checkout-summary-items {
    grid-template-columns: 1fr;
    height: auto;
    max-height: none;
    overflow: visible;
  }

  /* Totals area: don't use sticky on mobile (can cause overflow issues) */
  .checkout-summary-bottom {
    position: static;
    box-shadow: none;
    height: auto;
    padding-top: 12px;
  }

  /* Right column form: allow the inputs area to scroll but keep Pay visible */
  .checkout-modal-right .form-box {
    height: auto;
  }
  /* Disable internal scrolling for inputs; let the whole modal scroll.
     Reset the desktop "grow & spread" behaviour so the stacked mobile
     layout keeps natural spacing. */
  .checkout-modal-right .form-grid {
    max-height: none;
    overflow: visible;
    flex: 0 1 auto;
    align-content: normal;
  }
  .checkout-modal-right textarea {
    flex: 0 0 90px;
  }
}

/* Make checkout modal fullscreen on small devices and ensure it's above the navbar */
@media (max-width: 800px) {
  .checkout-modal-overlay {
    position: fixed;
    width: 100vw;
    height: auto;
    min-height: 100vh;
    display: flex;
    align-items: stretch;
    justify-content: center;
    z-index: 200000; /* very high to sit above navbars and other UI */
    background: rgba(0, 0, 0, 0.42);
  }

  .details-stack {
    padding-top: 0px !important;
  }

  .checkout-modal {
    width: 100%;
    min-height: 100vh;
    max-height: none;
    margin: 0;
    border-radius: 0;
  }

  @media (max-width: 600px) {
    .date-label-mobile {
      display: block !important;
      font-size: 13px; /* slightly smaller on phones */
      font-weight: 400;
      color: #757575;
      margin-left: 15px;
      line-height: 1.1;
    }
    /* ensure fake placeholder and input align for small screens */
    .date-input-wrapper .date-fake-placeholder {
      left: 12px;
      right: 12px;
      font-size: 15px;
    }
    .date-input-wrapper input[type="date"] {
      padding-left: 12px;
    }
  }

  .checkout-modal-left {
    display: none;
  }
  /* Make inner content fill and allow internal scrolling areas */
  .checkout-modal-content {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .checkout-modal-left,
  .checkout-modal-right {
    height: auto;
  }
  .checkout-summary-items {
    max-height: calc(100% - 180px);
  }
  .checkout-modal-right .form-grid {
    max-height: calc(100% - 160px);
  }
}

/* When allergens overlay is open, lower the z-index of the category filter so
   it can't overlap the allergens modal. */
.allergens-open .order-filter-bar {
  z-index: 0 !important;
}

/* Hide the mobile cart button while checkout modal is open */
.checkout-open .mobile-cart-button {
  display: none !important;
}

body {
  margin: 0;
  overflow-x: hidden;
  background-color: #f4f1ed;

  color: #18375d;
  font-family: "Poppins", sans-serif;
}

.content-editor-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
.content-row {
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 12px;
}
.content-key {
  font-weight: 600;
  margin-bottom: 8px;
}
.content-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.content-inputs label {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.content-inputs textarea {
  min-height: 80px;
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
}
.editor-actions {
  margin-top: 16px;
}
.editor-message {
  margin-top: 8px;
  color: #0a7d37;
}

/* --- Admin MenuEditor layout --- */
.i18n-stack {
  display: flex;
  gap: 12px;
  justify-content: space-around;
  align-items: flex-start;
  width: 100%;
}

.i18n-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 0;
  min-width: 0;
  width: 100%;
}

.i18n-field label {
  display: block;
  font-size: 12px;
  line-height: 1.2;
  margin: 0 0 4px;
  color: #6b7280;
}

.i18n-field input,
.i18n-field textarea {
  width: 100%;
  box-sizing: border-box;
}

.i18n-field input,
.i18n-field textarea,
.menu-item-type select,
.item-price {
  padding: 8px 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  box-sizing: border-box;
}

.item-desc {
  width: 100%;
  resize: vertical;
  box-sizing: border-box;
}

/* Tweak MenuEditor layout so section descriptions sit under the titles cleanly */

/* Use a two-column grid for the section header: main content + actions column */
.menu-editor-section .section-header {
  display: flex;
  flex-direction: column; /* stack title inputs and description vertically */
  gap: 12px;
  align-items: stretch;
}

/* Inside the main column, lay out name inputs as three equal columns */
.menu-editor-section .section-header .i18n-stack {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr; /* EN wider, FR/ES narrower */
  gap: 12px;
  align-items: start;
}

/* Description row should match the name inputs width and take full available space */
.section-desc-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
  align-items: start;
  width: 100%;
}

/* Place the delete button (and other actions) in the actions column */
.menu-editor-section .section-header .btn-danger {
  align-self: flex-start;
  margin-top: 8px;
}

/* Row containing the moved reorder controls under the header */
.menu-reorder-controls-row {
  margin-top: 6px;
  display: flex;
  gap: 8px;
  align-items: center;
}

/* Responsive: stack on smaller screens */
@media (max-width: 900px) {
  .menu-editor-section .section-header {
    grid-template-columns: 1fr;
  }
  .menu-editor-section .section-header .i18n-stack,
  .section-desc-row {
    grid-template-columns: 1fr;
  }
  .menu-editor-section .section-header .btn-danger {
    justify-self: start;
  }
}
.terms-popup{
  right: 10px;
}
.acceptdnybut{
  flex-direction: column;
    /* align-content: center; */
    align-items: center;
}
.menu-item-meta {
  display: grid;
  grid-template-columns: 1fr 160px;
  gap: 12px;
  align-items: end;
  margin-top: 25px;
}

/* Admin: age restriction toggle button */
.age-btn {
  background: #fff;
  border: 1px solid #e6e8eb;
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 700;
  color: #18375d;
}
.age-btn.is-selected {
  background: #ffd9d9;
  border-color: #ffb3b3;
  color: #9b1c1c;
}
.age-badge {
  font-size: 13px;
}

/* Public menu: age restriction notice under section title */
.section-age-notice {
  margin: 8px 0 12px 0;
  color: #6b4633; /* warmer text color to contrast the pale background */
  border-radius: 10px;
  font-size: 14px;
  background: #fff6ef; /* pale peach background similar to the reference image */
  border: 1px solid rgba(171, 126, 92, 0.16); /* subtle warm border */
  padding: 12px 16px;
  line-height: 1.4;
  display: block;
  box-shadow: none;
}

.section-alcohol-locked-notice {
  margin: 6px 0 12px 0;
  color: #7a1e1e;
  border-radius: 10px;
  font-size: 14px;
  font-weight: 600;
  background: #fff0f0;
  border: 1px solid rgba(200, 80, 80, 0.22);
  padding: 10px 16px;
  line-height: 1.4;
  display: block;
}

.menu-item-type {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.discoverServices {
  font-size: 20px;
  color: #02344b;
  font-weight: 600;
  transition: color 0.3s ease-in-out;
  margin-top: -30px;
  display: flex;
  margin-bottom: -30px;
  align-items: center;
  justify-content: center;
}

.discoverServices:hover {
  color: #011722;
}

/* --- Discover our services slider (reuses Swiper nav arrows) --- */
.servicesSliderSection {
  width: 100%;
  display: flex;
  justify-content: center;
  padding: 10px 0 10px;
}

/* CHANGED: make slider wrap a centered container instead of full viewport width */
.servicesSliderWrap {
  width: 100%;
  max-width: 1500px;
  margin: 36px auto 80px;
  padding: 0 16px;
  position: relative;
  /* Center the Swiper viewport (it can be wider than the slides) */
  text-align: center;
}

/* --- Services slider paginator (pill style like screenshot) --- */
.services-controls {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);

  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;

  padding: 10px 16px;
  min-width: 140px;

  z-index: 5;
}

.services-btn {
  appearance: none;
  border: none;
  background: transparent;
  color: #111827;
  padding: 0;
  line-height: 1;

  width: 28px;
  height: 28px;
  border-radius: 999px;

  display: grid;
  place-items: center;
  cursor: pointer;

  font-size: 20px;
  font-weight: 600;
}
.contact_icon_circle:hover {
  background-color: rgb(3, 84, 121);
}
.servicesSliderWrap .serviceCardCta a:hover {
  color: rgb(3, 84, 121);
}
.services-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.date-label-mobile {
  display: none;
}

.services-btn:active {
  transform: translateY(0.5px);
}

.services-btn:focus-visible {
  outline: 2px solid rgba(24, 55, 93, 0.55);
  outline-offset: 2px;
}

.services-counter {
  font-size: 14px;
  font-weight: 600;
  color: #111827;
  letter-spacing: 0.2px;
  min-width: 56px;
  text-align: center;
}

.servicesSwiper {
  padding: 18px 0 24px;
}

/* Let Swiper handle centering (avoid wrapper width hacks that break translate math) */
.servicesSwiper .swiper-wrapper {
  width: auto;
  margin: 0;
}

/* Critical for Swiper `slidesPerView: 'auto'`: slides must have an explicit width */
.servicesSwiper .swiper-slide {
  height: auto;
  display: flex;
  width: 430px;
}

.servicesSwiper .swiper-slide > * {
  width: 100%;
}

.serviceCard {
  position: relative;
  height: 600px;
  /* Keep consistent with `.servicesSwiper .swiper-slide` */
  width: 430px;
  border-radius: 18px;
  overflow: hidden;
  background: #e9e7e4;
}

.serviceCardMedia,
.serviceCardMedia img {
  width: 430px;
  height: 100%;
}

.serviceCardMedia img {
  object-fit: cover;
  display: block;
}

/* --- Services Swiper: match the previous site's "pg" parallax carousel look --- */

/* Add side peeks to the Swiper viewport */
.servicesSliderWrap .swiper {
  /* Make the swiper viewport shrink-to-fit and center it */
  width: auto;
  max-width: 100%;
  padding: 24px 80px; /* side peeks */
  text-align: left; /* reset so slide content isn't centered */
}

/* IMPORTANT: don't add gap here; use Swiper's spaceBetween */
.servicesSliderWrap .swiper-wrapper {
  display: flex;
}

/* If your markup uses a custom class on slides, this will apply.
   (If not, we’ll adjust to target .swiper-slide only.) */
.servicesSliderWrap .services-slide {
  margin: 0;
  flex: 0 0 430px;
  width: 430px;
  min-width: 430px;
}

/* Depth/overlap scaling */
.servicesSliderWrap .services-slide .serviceCard {
  transform: scale(0.94);
  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;
  will-change: transform;
}

.servicesSliderWrap .swiper-slide-prev .serviceCard,
.servicesSliderWrap .swiper-slide-next .serviceCard {
  transform: scale(0.97);
}

.servicesSliderWrap .swiper-slide-active .serviceCard {
  transform: scale(1);
}

/* Ensure active slide sits on top */
.servicesSliderWrap .swiper-slide {
  z-index: 1;
}
.servicesSliderWrap .swiper-slide-prev,
.servicesSliderWrap .swiper-slide-next {
  z-index: 2;
}
.servicesSliderWrap .swiper-slide-active {
  z-index: 3;
}

/* Card frame sizing aligned with slide width */
.servicesSliderWrap .serviceCard {
  position: relative;
  height: 600px;
  width: 430px;
  border-radius: 15px;
  overflow: hidden;
}

/* --- Services slider: ensure image is the same size as the card --- */
.servicesSliderWrap .serviceCardMedia {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Fill the card exactly */
.servicesSliderWrap .serviceCardMedia img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* The white box behind the text */
.servicesSliderWrap .serviceCardInfo {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 5;

  background: #f4f1ed; /* matches your palette from earlier */
  border-radius: 14px;
  padding: 14px 14px 12px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.12);
}

/* Make sure the text looks like the screenshot */
.servicesSliderWrap .serviceCardTitle {
  margin: 0;
  font-size: 13px;
  letter-spacing: 0.08em;
  font-weight: 800;
  color: #02344b;
}

.servicesSliderWrap .serviceCardDesc {
  margin: 10px 0 12px;
  font-size: 12px;
  line-height: 1.35;
  color: #0d3a4e;
  opacity: 0.95;
}

.servicesSliderWrap .serviceCardCta a {
  font-size: 12px;
  letter-spacing: 0.08em;
  color: #02344b;
  font-weight: 700;
}

.serviceCardCta a::before {
  height: 0;
}
/* --- Services slider: ensure image is the same size as the card --- */
.servicesSliderWrap .serviceCardMedia {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

/* Fill the card exactly */
.servicesSliderWrap .serviceCardMedia img {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  will-change: transform;
}

/* Ensure the info box remains on top of the image (keep old text on image) */
.servicesSliderWrap .serviceCardInfo {
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 14px;
  z-index: 6;
  transform: translateZ(0);
  backface-visibility: hidden;
  will-change: transform, opacity;
  -webkit-font-smoothing: antialiased;
}

/* Make sure card stays the clipping container */
.servicesSliderWrap .serviceCard {
  overflow: hidden;
}

/* IMPORTANT: remove the old mobile overscan for services slider */
@media (max-width: 820px) {
  .servicesSliderWrap .serviceCardMedia img {
    width: 100% !important;
    height: 100% !important;
  }
}

@media (max-width: 820px) {
  .servicesSliderWrap .services-slide {
    flex: 0 0 95vw;
    width: 95vw;
    min-width: 95vw;
  }

  .servicesSliderWrap .serviceCard {
    width: 95vw;
    height: 500px;
  }

  .servicesSliderWrap .swiper {
    padding: 24px 10px;
  }

  .servicesSliderWrap .serviceCardMedia img {
    width: 180%;
    height: 180%;
  }
}

/* Keep your old 700px tweaks too (optional but safe) */
@media (max-width: 700px) {
  .servicesSwiper .swiper-slide {
    width: 260px;
  }

  .serviceCard {
    height: 360px;
  }

  .servicesSliderSection .swiper-button-prev,
  .servicesSliderSection .swiper-button-next {
    width: 46px;
    height: 46px;
  }
}
.allergen-picker {
  margin-top: 6px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.menu-item-allergens-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.menu-item-allergens-row .allergen-picker {
  flex: 1;
}

.allergen-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #4b5563;
  cursor: pointer;
}

.allergen-btn.is-selected {
  border: 2px solid #8b5dff;
  background-color: #f3f0ff;
}

.menu-section-lm-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-weight: 600;
  color: #18375d;
  cursor: pointer;
  margin: 8px 0;
}

/* MenuEditor reorder arrows (match allergen button look & feel) */
.menu-reorder-controls {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

.menu-reorder-label {
  font-size: 12px;
  font-weight: 600;
  color: #6b7280;
  margin-right: 2px;
}

/* Make the arrow buttons look like the allergen buttons */
.menu-reorder-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  background-color: #ffffff;
  color: #4b5563;
  cursor: pointer;
  padding: 0;
}

.menu-reorder-btn:hover {
  background-color: #f8fafc;
}

.menu-reorder-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.menu-reorder-btn:focus-visible {
  outline: 2px solid rgba(139, 93, 255, 0.35);
  outline-offset: 2px;
}

.menu-editor-legend {
  margin-top: 24px;
}

.allergen-legend-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 12px;
  align-items: center;
}

.allergen-legend-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.capitalize {
  text-transform: capitalize;
}

@media (max-width: 768px) {
  .menu-item-meta {
    grid-template-columns: 1fr;
  }
}
@media (max-width: 768px) {
  .content-inputs {
    grid-template-columns: 1fr;
  }
}

:root {
  --dark: 0;
  --transition: 0.28s;
  --font-size: 1.1rem;
  --bg: #2c6b53;
  --color: #ffffff;
}
.unselectable {
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
::selection {
  background: #aa0606;
  color: white;
}
.whatsapp-link {
  color: green;
  margin-left: 5px;
  display: inline-flex;
  gap: 5px;
  align-items: center;
  margin-right: 5px;
}
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: #aa0606;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #aa0606;
}
.anpcsafty {
  display: flex;
  gap: 5px;
}

a {
  position: relative;
  cursor: pointer;
  text-decoration: none;
}

a::before {
  content: "";
  position: absolute;
  width: 100%;
  height: 3px;
  border-radius: 4px;
  background-color: #aa0606;
  bottom: 0;
  left: 0;
  transform-origin: right;
  transform: scaleX(0);
  transition: transform 0.3s ease-in-out;
}

a:hover::before {
  transform-origin: left;
  transform: scaleX(1);
}
.navbarrightright a::before {
  text-decoration: none;
  height: 0px;
}

.secondContainer {
  margin-bottom: 60px;
}

/* OrderPage allergens (text-only popup) */
.order-allergens {
  margin-top: 10px; /* bigger spacing above allergens */
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #000000;
}

.order-allergens-label {
  font-size: 12px;
  letter-spacing: 0.2px;
}

.order-allergens-info {
  width: 22px;
  height: 22px;
  border-radius: 9999px;
  border: 1px solid #cbd5e1;
  background: #ffffff;
  color: #475569;
  font-size: 12px;
  line-height: 20px;
  text-align: center;
  cursor: pointer;
  padding: 0;
}

/* Order menu disclaimer */
.menu-disclaimer {
  text-align: center;
  font-size: 15px;
  color: #6b7280;
  margin-top: -50px;
  margin-bottom: 100px;
}

.order-allergens-info:hover {
  background: #f8fafc;
}

.order-allergens-info:focus {
  outline: 2px solid rgba(170, 6, 6, 0.35);
  outline-offset: 2px;
}

.order-allergens-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
}

.order-allergens-modal {
  width: min(520px, 92vw);
  max-height: 80vh;
  overflow: auto;
  background: #ffffff;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25);
}

.order-allergens-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
}

.order-allergens-title {
  margin: 0;
  font-size: 20px;
  color: #18375d;
}

.order-allergens-close {
  border: 1px solid #d1d5db;
  background: #ffffff;
  border-radius: 10px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  font-size: 20px;
  line-height: 28px;
  color: #334155;
}

.order-allergens-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 8px;
  border-top: 1px solid #e5e7eb;
}

.order-allergens-chip {
  padding: 8px 10px;
  border: 1px solid #e5e7eb;
  background: #f8fafc;
  border-radius: 9999px;
  font-size: 14px;
  color: #0f172a;
}

/* Diet icon small square used on order page */
.diet-img {
  width: 18px;
  height: 18px;
  object-fit: contain;
  display: inline-block;
}

/* Diet badge styling (small uppercase codes) */
/* Diet badge styling (small uppercase codes) */
.diet-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  height: 20px;
  box-sizing: border-box;
  text-transform: uppercase;
}
/* Variant backgrounds: ensure strong contrast so the small codes are visible */
.diet-badge--vegetarian {
  color: #0b8a46;
} /* green */
.diet-badge--vegan {
  color: #0b8a46;
} /* darker green */
.diet-badge--halal {
  color: #0b8a46;
} /* blue */

/* Tooltip for diet badges (custom styled) */
.diet-badge-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: default;
}

/* The tooltip bubble */
.diet-badge-wrap::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%);
  background: rgba(20, 20, 20, 0.92);
  color: #fff;
  padding: 8px 10px;
  border-radius: 6px;
  font-size: 14px;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition:
    opacity 160ms ease,
    transform 160ms cubic-bezier(0.2, 0.9, 0.2, 1);
  z-index: 1600;
}

/* Small arrow */
.diet-badge-wrap::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 6px solid rgba(20, 20, 20, 0.92);
  opacity: 0;
  transition: opacity 160ms ease;
  z-index: 1600;
}

/* Show tooltip on hover or keyboard focus */
.diet-badge-wrap:hover::after,
.diet-badge-wrap:focus::after,
.diet-badge-wrap:focus-visible::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: auto;
}
.diet-badge-wrap:hover::before,
.diet-badge-wrap:focus::before,
.diet-badge-wrap:focus-visible::before {
  opacity: 1;
}

/* Make tooltip larger on touch devices when active (helpful for tap) */
@media (hover: none) and (pointer: coarse) {
  .diet-badge-wrap::after {
    bottom: calc(100% + 14px);
    padding: 10px 12px;
    font-size: 15px;
  }
}

/* Admin dashboard allergen 2-letter badges */
.allergen-code-badge {
  display: inline;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.5px;
  color: #334155;
}
.hero-second.fade-in-delay {
  animation-delay: 1s;
}
.hero-content {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 100;
  color: #424242;
  flex-direction: column;
  gap: 60px;
}

.hero-images {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}
.hero-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58vw;
  max-width: 640px;
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  background: radial-gradient(
    circle at 50% 50%,
    rgba(255, 255, 255, 0.62),
    rgba(255, 255, 255, 0.36) 36%,
    rgba(255, 229, 204, 0) 68%
  );
  filter: blur(38px);
  z-index: -1;
  pointer-events: none;
}
.hero-first {
  display: flex;
  flex-direction: column;
  gap: 30px;
  align-items: center;
}

.hero-first span {
  font-size: 25px;
  font-weight: 700;
  font-family: "Coco Gothic", sans-serif;
  color: white;
  letter-spacing: 5px;
}
.newtextSecondCotainer {
  display: flex;
  justify-content: center;
  align-items: center;
}
.containernewtextSecondCotainer {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1300px;
}
.containernewtextSecondCotainer span {
  color: white;
  font-family: "Coco Gothic", sans-serif;
  font-size: 22px;
  font-style: italic;

  line-height: 1.3em;
  text-align: center;
}
.hero-img {
  width: 500px;
  height: auto;
  max-width: 100%;
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.fade-in {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 0s forwards;
}

.fade-in-delay {
  opacity: 0;
  animation: fadeIn 1s ease-in-out 0.5s forwards;
}
.framer-button {
  outline-color: hsl(0 0% calc(var(--dark) * 100%));
  --padding: calc(var(--font-size) * 0.75);
  cursor: pointer;
  letter-spacing: calc(var(--font-size) * 0.02);
  font-family: Poppins, sans-serif;
  font-weight: bold;
  background: var(--bg);
  font-size: var(--font-size);
  border-radius: calc(var(--font-size) * 0.5);
  border: 4px solid
    hsl(
      0 0% calc((40 + (var(--dark) * 20)) * 1%) /
        calc(0.3 + (var(--hovered, 0) * 0.8))
    );
  color: var(--color);
  position: relative;
  transition: border-color var(--transition);
}

.framer-button__content {
  background: var(--bg);
  padding: calc(var(--font-size) * 0.5) calc(var(--font-size) * 1.26);
  overflow: hidden;
  display: grid;
  grid-template-columns:
    calc((var(--font-size) * 1.75) * (1 - var(--hovered, 0)))
    1fr calc((var(--font-size) * 1.75) * var(--hovered, 0));
  align-items: center;
  transition: grid-template-columns var(--transition);
}

.framer-button::after {
  content: "";
  position: absolute;
  inset: calc(var(--font-size) * -0.025);
  background: hsl(0 0% calc(var(--dark) * 100%) / 0.45);
  filter: blur(calc(var(--font-size) * 0.75));
  scale: var(--hovered, 0);
  z-index: -1;
  transition: scale var(--transition);
}

.framer-button:hover {
  --hovered: 1;
}

.framer-button__icon-left {
  padding-right: var(--padding);
  width: var(--font-size);
}

.framer-button__icon-right {
  padding-left: var(--padding);
  width: var(--font-size);
}

.framer-button__image {
  position: fixed;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  z-index: -1;
  opacity: 0.6;
  scale: 1.3;
}

.framer-button__svg {
  display: inline-block;
  transition:
    translate var(--transition) ease-in-out,
    opacity var(--transition) ease-in-out;
}

.framer-button:is(:focus-visible, :hover) {
  --hovered: 1;
}

.framer-button__icon-right svg {
  stroke-width: 3;
  translate: calc((1 - var(--hovered, 0)) * (var(--font-size) * 3)) 8%;
  width: calc(var(--font-size) * 1);
  opacity: var(--hovered, 0);
  margin-top: 3px;
}

.framer-button__icon-left svg {
  stroke-width: 3;
  translate: calc(((var(--hovered, 0) * var(--font-size)) * -3) + 10%) 8%;
  width: calc(var(--font-size) * 1.2);
  margin-top: 3px;
  color: #ffffff;
}

.mobile {
  display: none !important;
}

.hamburger {
  font-size: 30px;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgb(0 0 0 / 10%);
  backdrop-filter: blur(20px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 10000;
  opacity: 0;
  animation: fadeIn 0.5s forwards;
}

.close-button {
  position: absolute;
  top: 20px;
  right: 20px;
  font-size: 30px;
  background: none;
  border: none;
  cursor: pointer;
}

.dashboard-content {
  padding: 24px;
}

@media (max-width: 820px) {
  .dashboard-content {
    padding: 0;
  }
}

.menu-editor-section {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}

.menu-editor-section .section-header {
  display: flex;
  gap: 12px;
  margin-bottom: 12px;
}

.menu-section-description{
  margin-top: -10px;
  font-size: 14px;
  margin-bottom: 2px;
}

/* OrderPage: per-category collapsible info under the category title */
.menu-section-collapsed {
  margin-bottom: 6px;
}

.menu-section-collapsed-btn {
  width: fit-content;
  max-width: 100%;
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  padding: 0;
  border: 0;
  background: transparent;
  color: #0b1324;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  text-decoration: none;
}

.menu-section-collapsed-btn:hover {
  opacity: 0.85;
}

.menu-section-collapsed-btn.is-open {
  opacity: 1;
}

.menu-section-collapsed-body {
  margin-top: 8px;
  padding: 0;
  border-radius: 0;
  background: transparent;
  border: 0;
  font-size: 14px;
  line-height: 1.45;
  color: #111827;
}


.menu-editor-section .section-header input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 4px;
  font-size: 16px;
}

.section-items {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.menu-editor-item {
  display: grid;
  gap: 12px;
  align-items: start;
}

.menu-editor-item .item-name,
.menu-editor-item .item-desc,
.menu-editor-item .item-price {
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 15px;
  box-sizing: border-box;
  width: 100%;
}

.menu-editor-item .item-price {
  width: 100%;
}

.section-header {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  justify-content: space-between;
}
.section-header .i18n-group {
  flex: 1;
}
.section-header .btn-danger {
  align-self: center;
}

.menu-editor-item .btn-danger {
  width: 150px;
}

.i18n-group {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
.i18n-field label {
  display: block;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 4px;
}
.i18n-field .item-name,
.i18n-field .item-desc {
  width: 100%;
  display: block;
  box-sizing: border-box;
}

.menu-editor-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 8px;
}

.btn-primary {
  background: #0ea5e9;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s ease;
}
.btn-primary:hover {
  background: #0284c7;
}
.btn-primary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-secondary {
  background: #f3f4f6;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover {
  background: #e5e7eb;
}

.btn-danger {
  background: #ef4444;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0 8px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

/* Status text (separate component) */
.status-text {
  color: #065f46;
  background: #d1fae5;
  border: 1px solid #a7f3d0;
  padding: 6px 10px;
  border-radius: 8px;
}

/* Place the trash on the left edge of the pill */
.add-popup-btn.add-trash {
  position: absolute;
  left: 10px;
  z-index: 3;
}

/* Center the count exactly in the pill */
.add-popup-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
}

@media (max-width: 768px) {
  .i18n-group {
    grid-template-columns: 1fr;
  }
  .menu-editor-item .btn-danger {
    width: auto;
  }
}

.mobile-menu-links {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 20px;
  font-family: "Poppins", sans-serif;
  font-size: 17px;
}

.mobile-menu-links a {
  font-size: 24px;
  color: white;
  text-decoration: none;
  font-weight: 600;
}
.terms-popup {
  /* Make the popup a small fixed widget instead of a full-screen overlay
     so the rest of the site remains interactable while the popup is shown. */
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: auto;
  height: auto;
  display: flex;
  z-index: 1000;
  align-items: flex-end;
  justify-content: flex-end;
  /* Allow clicks to pass through the container to underlying page
     except where we explicitly enable pointer events on the popup itself. */
  pointer-events: none;
}
.anpc a::before {
  height: 0px;
}
.anpc2 a::before {
  height: 0px;
}
.popup-content {
  background-color: #f7f7f7;
  padding: 20px;
  border-color: #08628f;
  border-width: 2px;
  border-radius: 10px;
  border-style: solid;
  box-shadow: 0 4px 8px #0003;
  text-align: center;
  /* Make the actual popup interactive */
  pointer-events: auto;
}
.popup-content h2 {
  font-family: "Coco Gothic", sans-serif;
  margin: 0 0 10px;
  color: #18375d;
}
.anpc {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 5px;
  margin-bottom: 30px;
}
.anpc2 {
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 20px;
  margin-top: 5px;
  margin-bottom: 30px;
  flex-direction: column;
}
.popup-content p {
  font-family: "Coco Gothic", sans-serif;
  color: #18375d;

  margin: 0 0 15px;
}
.popup-content .button {
  border-radius: 5px;
}
.popup-content a {
  color: #aa0606;
}
.terms-page {
  color: #333;
  padding: 50px;
}
.terms-img {
  display: flex;
  justify-content: center;
  align-items: center;
}
.terms-nav {
  background-color: #f8f8f8;
  border-bottom: 1px solid #ddd;
  position: sticky;
  top: 0;
  z-index: 10;
  margin-bottom: 20px;
}

.terms-nav ul {
  display: flex;
  justify-content: center;
  list-style: none;
  padding: 10px 0;
  margin: 0;
  gap: 30px;
}
.terms-nav li{
  text-align: center;
}

.terms-nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
}

.terms-nav a:hover {
  color: #007bff;
}
.terms-img img {
  width: 300px;
}
.terms-img a::before {
  height: 0;
}
.second-wave {
  border-top: #2c6b53;
  border-top-width: 5px;
  border-style: solid;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}
.second-wave2 svg {
  border-top: #2c6b53;
  border-top-width: 5px;
  border-style: solid;
  border-left-width: 0;
  border-right-width: 0;
  border-bottom-width: 0;
}
.second-wave2 {
  margin-bottom: -10px;
}
.second-container {
  height: 40vh;
}

.second-text {
  width: 600px;
}
.second-text-desc {
  font-size: 20px;
  font-family: "Coco Gothic", sans-serif;
  color: #623e2a;
}
.second-text-title {
  font-family: "Genty Demo", sans-serif;
  font-size: 55px;
  color: #623e2a;
}
.bold {
  font-weight: 700;
}
.second-img {
  width: 380px;
  height: 430px;
  border-radius: 15px;
}
.second-img2 {
  display: none;
  width: 380px;
  height: 430px;
  border-top-left-radius: 15px;
  border-bottom-left-radius: 15px;
}

.second-container {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 100px;
}

.third {
  height: 100vh;
  background-color: #2c6b53;
}

.rotate {
  transform: rotate(180deg);
}

.secondImageContainer img {
  width: 1210px;
  height: 600px;
  border-radius: 35px;
  box-shadow: rgba(255, 255, 255, 0.16) 0px 2px 4px;
}
.secondImageContainer {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}

.secontTitle {
  font-size: 80px;
  font-family: "Genty Demo", sans-serif;
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
  margin-top: 20px;
}

.linieeee {
  margin-left: 5px;
  margin-right: 5px;
}

.card {
  width: 300px;
  color: #fff;
  height: 250px;
  border-radius: 25px;
  padding: 20px;
  padding-top: 45px;
  background-color: #ffffff0e;
  box-shadow: rgba(255, 255, 255, 0.16) 0px 2px 4px;
  transition: all 0.3s ease-in-out;
}

.card:hover {
  background-color: #ffffff00;
  transform: scale(1.05);
  box-shadow: rgba(255, 255, 255, 0.56) 0px 2px 4px;
}
.secondContainer img {
  position: absolute;
  width: 350px;
  margin-left: 350px;
  margin-top: 160px;
}

.middle {
  width: 450px;
  height: 250px;
  border-radius: 25px;
  padding: 20px;
  padding-top: 45px;
}

.card span {
  font-size: 25px;
  font-family: "Coco gothic", sans-serif;
}
.cardspantitle {
  font-size: 24px !important;
}
.secondCardContainer {
  display: flex;
  justify-content: center;
  gap: 20px;
}
.cherryImage {
  position: absolute;
  width: 600px;
  margin-left: 80%;
  margin-right: 60%;
  bottom: 0;
}

.navbar {
  display: flex;
  width: 100vw;
  justify-content: center;
  position: fixed;
  margin-top: 20px;
  z-index: 9999999;
}

.navbarcontainer {
  display: flex;
  width: 95vw;
  height: 50px;
  border-radius: 15px;
  background-color: rgb(0 0 0 / 15%);
  backdrop-filter: blur(15px);
  align-items: center;
  padding: 5px;
  box-shadow:
    rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(186, 186, 187, 0.15) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
}
.thirdcontainer2 {
  position: relative;
  height: 100vh;
  overflow: hidden;
}

.thirdcardcontainer2 {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
}
.navbarleft {
  width: calc(100% / 3);
  margin-left: 20px;
}
.navbarrightright {
  width: calc(100% / 3);
  margin-right: 20px;
  display: flex;
  justify-content: flex-end;
}
.navbarright {
  width: calc(100%);
  display: flex;
  gap: 20px;
  justify-content: flex-end;
  margin-right: 20px;
}

.navbarright a {
  text-decoration: none;
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
}

.navbarleft img {
  width: 80px;
}
.thirdcontainer {
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  gap: 50px;
}
.thirdTitler {
  font-size: 80px;
  font-family: "Genty Demo", sans-serif;
  color: #fff;
}
.thirdcards {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}
.thirdcardsimg {
  position: relative;
  width: 300px;
  height: 300px;
  border-radius: 15px;
  overflow: hidden;
}

.thirdcardsimg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.contact-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.contact-main {
  flex: 1;
  padding: 60px 20px;
  display: flex;
  justify-content: center;
}

.contact-card {
  width: 100%;
  max-width: 720px;
  background: #fff;
  padding: 40px 48px 48px;
  box-shadow: 0 0 0 1px #e5e5e5;
  border-radius: 4px;
  margin-top: 100px;
  margin-bottom: 100px;
}

.contact-title {
  margin: 0;
  font-size: 24px;
}

.contact-subtitle {
  margin: 16px 0 32px;
  font-size: 14px;
  color: #333;
}

.contact-grid {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  margin-bottom: 24px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-label {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  border: none;
  outline: none;
  border-bottom: 2px solid #111;
  padding: 10px 4px 6px;
  font-size: 14px;
  font-family: "poppins", sans-serif;
  background: transparent;
}

.form-input.has-error {
  border-bottom-color: #c0392b;
}
#commandId {
  margin-bottom: 24px;
}
.textarea {
  resize: vertical;
}

.divider {
  height: 1px;
  background: #d9d9d9;
  margin: 28px 0;
}

.submit-btn {
  width: 100%;
  background: #fafafa;
  color: #111;
  border: 2px solid #111;
  padding: 14px 20px;
  font-size: 14px;
  letter-spacing: 1px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
  min-height: 48px;
}

.submit-btn:hover {
  background: #111;
  color: #fff;
}

.submit-btn:disabled {
  opacity: 0.7;
  cursor: not-allowed;
}

.submit-btn.is-sending,
.submit-btn.is-success {
  background: #111;
  color: #fff;
}

.submit-btn.is-error {
  background: #c0392b;
  border-color: #c0392b;
  color: #fff;
}

.btn-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: btnspin 0.8s linear infinite;
}

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

.error-text {
  color: #c0392b;
  font-size: 12px;
  margin-top: 6px;
}

.success-text {
  margin-top: 16px;
  font-size: 13px;
  color: #0a7d39;
}

.server-error-text {
  margin-top: 12px;
  font-size: 13px;
  color: #c0392b;
}
.thirdcardsimg .hoverOverlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1;
}

.thirdcardsimg .hoverOverlay span {
  color: white;
  font-size: 20px;
  font-family: "Poppins", sans-serif;
  text-align: center;
}

.thirdcardsimg:hover img {
  filter: blur(5px);
  opacity: 0.7;
}

.thirdcardsimg:hover .hoverOverlay {
  opacity: 1;
}

.thirdcardstitle,
.thirdcardsdesc {
  transition: opacity 0.3s ease;
}

.thirdcards:hover .thirdcardstitle,
.thirdcards:hover .thirdcardsdesc {
  opacity: 40%;
}

.backgroundthird {
  background-color: #e8ffc3;
  margin-top: 0px !important;
  height: 75vh;
}
.waveewada svg {
  display: block;
  height: 70px;
  position: relative;
  width: calc(100% + 1.3px);
}
.thirdwrapper {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-top: 150px;
}
.forcecolor {
  color: #2c6b53 !important;
}
.second_wrapper a {
  margin-top: 30px;
}
.second_wrapper a::before {
  background-color: transparent !important;
}
.thirdca .swiper-pagination-bullet {
  background: #000000 !important;
}
.thirdca .swiper-pagination-bullet-active {
  background: #2c6b53 !important;
}
.thirdcardsimg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, rgb(10, 10, 10), transparent);
  z-index: 1;
}

.rotatewdw {
  transform: rotate(180deg);
}

.thirdcardsimg img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}
.thirdcardstitle {
  font-family: "Genty Demo", sans-serif;
  font-size: 38px;
  color: white;
  margin-top: -25px;
  z-index: 9999;
  text-align: center;
}
.spacingfooter {
  display: flex;
  align-items: center;
}
.spacingfooter i {
  color: #fff;
  width: 30px;
}
.thirdcardsdesc {
  font-family: "Poppins", sans-serif;
  color: rgb(192, 192, 192);
  margin-top: -5px;
  z-index: 9999;
  font-style: italic;
}

.swiper-pagination-bullet {
  background: #fff !important;
}
.swiper-pagination-bullet-active {
  background: #aa0606 !important;
}

.swiper-button-prev,
.swiper-button-next {
  color: white !important;
}
.swiper-3d .swiper-slide-shadow-right {
  background: transparent !important;
}
.swiper-3d .swiper-slide-shadow-left {
  background: transparent !important;
}
.footerforthcontainer {
  color: rgb(192, 192, 192);
  font-size: 20px;
  font-family: "Coco Gothic", sans-serif;
  font-style: italic;
  margin-top: 40px;
  margin-bottom: 10px;
}

.footercontainer {
  height: 70vh;
  display: flex;
  justify-content: center;
  gap: 10vw;
  align-items: center;
  margin-top: 80px;
}
.imagesfooter {
  width: 30vw;
  position: absolute;
  left: 0;
  padding-bottom: 300px;
}
.imagesfooter2 {
  width: 35vw;
  position: absolute;
  right: 0;
  margin-top: 120px;
}
.footerleft {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-direction: column;
  width: 60vw;
  background-color: #08000049;
  height: fit-content;
  padding: 100px;
  border-radius: 80px;
}
.oldddd {
  color: #2b2b2b3d;
}
.footerright img {
  width: auto;
  height: 70vh;
}
.dwAHDUAHWDUYAHUD {
  display: flex;
  justify-content: center;
  flex-direction: column;
  z-index: 999;
}
.adyhwayudh {
  display: flex;
  z-index: 999;
}
.footerTitle {
  font-size: 100px;
  font-family: "Genty Demo", sans-serif;
  color: #fff;
}
.footerSmall {
  font-size: 20px;
  font-family: "Poppins", sans-serif;
  color: #fff;
}

.titlehero {
  font-size: 80px !important;
  font-family: "Poppins", sans-serif !important;
  color: #fff;
  letter-spacing: 2px;
}
.descherowrap {
  width: 30vw;
}
.deschero {
  font-size: 18px !important;
  font-family: "Poppins", sans-serif !important;
  color: #cfcfcf !important;
  letter-spacing: 1px;
  font-weight: 500 !important;
}

.hero-first {
  width: 60vw;
}

.footerbo2ttom a {
  color: #aa0606;
}
.marggintop {
  margin-top: -60px;
}

.parallax-container {
  perspective: 1px;
  height: 100vh;
  overflow-x: hidden;
  overflow-y: auto;
}

.parallax {
  transform: translateZ(-1px) scale(2);
  height: 100%;
  width: 100%;
}

.hero-content {
  position: relative;
  z-index: 100;
  transform: translateZ(0);
}

.triangle-shape {
  position: absolute;
  top: 0;
  left: 35vw;
  width: 0;
  height: 0;
  border-top: 100vh solid transparent;
  border-left: 5vw solid rgb(10, 10, 10);
  filter: drop-shadow(5px 0px 10px rgba(0, 0, 0, 0.692));
}
.movingdivscroll {
  transition: transform 0.5s ease-out;
}
.herotriangleshape {
  background-color: rgb(10, 10, 10);
  width: 35vw;
  height: 100vh;
  position: relative;
}

.button {
  cursor: pointer;
  position: relative;
  padding: 10px 24px;
  width: 250px;
  font-size: 18px;
  color: #18375d;
  border: 2px solid #fff;
  border-radius: 14px;
  background-color: #fff;
  font-weight: 500;
  transition: all 0.3s cubic-bezier(0.23, 1, 0.32, 1);
  box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;
  overflow: hidden;
  font-size: 16px;
  font-family: "Poppins", sans-serif;
}

.lang-dropdown {
  position: relative;
  display: inline-block;
  cursor: pointer;
}

.lang-button {
  background: none;
  border: none;
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 16px;
}

.arrow {
  transition: transform 0.3s ease;
}

.arrow.open {
  transform: rotate(180deg);
}

.lang-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background-color: rgb(0 0 0 / 10%);
  backdrop-filter: blur(50px);
  box-shadow:
    rgba(0, 0, 0, 0.02) 0px 1px 3px 0px,
    rgba(186, 186, 187, 0.15) 0px 0px 0px 1px,
    rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  color: #fff;
  border-radius: 6px;
  overflow: hidden;
  z-index: 100;
}
.flag-icon {
  width: 20px;
  height: 15px;
}
.mobile-flags {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 5px;
}
.centeeeer {
  text-align: center;
}
.lang-menu div {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  cursor: pointer;
}

.lang-menu div:hover {
  background: #f0f0f0;
}

.lang-menu img {
  width: 20px;
  height: auto;
}

.wdcvwd {
  display: flex;
  justify-content: center;
  align-items: center;
}
.wdcvwd img {
  width: 90vw;
  height: 75vh;
  border-radius: 25px;
  margin-top: 60px;
  margin-bottom: 60px;
}

.storyContainer {
  width: 100vw;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  margin-bottom: 120px;
}

.storyTitle {
  font-size: 80px;
  font-family: "Genty Demo", sans-serif;
  color: #fff;
  margin-top: 70px;
  margin-right: 20px;
}

.storyContent {
  width: calc(60vw + 200px);
  height: 456px;
  background-color: #08000049;
  border-radius: 80px;
  display: flex;
}
.storyContentContainer {
  width: calc(60vw + 200px);
  height: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  margin-top: 20px;
}

.storyImageLeft {
  position: absolute;
  left: 0;
  width: 42vw;
  margin-left: -170px;
  margin-top: 180px;
}
.storyImageRight {
  position: absolute;
  right: 0;
  width: 27vw;
  margin-top: 250px;
  padding-right: 70px;
}
.lps {
  margin-left: 10px;
}
.storyText {
  margin: 20px;
  color: white;
  display: flex;
  flex-direction: column;
  font-size: 18px;
  font-family: "Coco Gothic", sans-serif;
  color: white;
  font-style: italic;
  justify-content: center;
  width: 100%;
  align-items: center;
}
.storyinnertext {
  width: 80%;
  line-height: 1.3em;
}
.left-1 {
  margin-left: 25%;
}
.left-2 {
  margin-left: 24.5%;
}
.left-3 {
  margin-left: 23.5%;
}
.left-4 {
  margin-left: 22.5%;
}
.left-5 {
  margin-left: 20%;
}
.left-6 {
  margin-left: 19%;
}
.left-7 {
  margin-left: 19%;
}
.left-8 {
  margin-left: 19%;
}
.left-9 {
  margin-left: 18.5%;
}
.left-10 {
  margin-left: 18%;
}
.storyVideo {
  display: flex;
  justify-content: center;
  width: 100vw;
}
.storyVideo {
  color: rgb(192, 192, 192);
  font-size: 20px;
  font-family: "Coco Gothic", sans-serif;
  font-style: italic;
  margin-top: 35px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}
.storyVideo span {
  margin-top: 3px;
}
.videoStory {
  width: 25px;
}
.button::before {
  content: "";
  position: absolute;
  inset: 0;
  margin: auto;
  width: 50px;
  height: 50px;
  border-radius: inherit;
  scale: 0;
  z-index: -1;
  background-color: #02344b;
  transition: all 0.6s cubic-bezier(0.23, 1, 0.32, 1);
}

.button:hover::before {
  scale: 7;
}

.videoLink {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color 0.3s ease;
}
.storyVideo a {
  text-decoration: none;
}
.videoLink a {
  text-decoration: none;
}

.navbarleft a::before {
  background-color: transparent !important;
}
.videoLink:hover {
  color: white;
}
.button:hover {
  color: #f3f8ff;
  scale: 1.1;
  box-shadow: 0 0px 20px #2c6b533d;
}

.button:active {
  scale: 1;
}
.footerbo2ttom {
  color: #fff;
  font-family: Poppins, sans-serif;
  margin-bottom: 30px;
  display: flex;
  justify-content: center;
}

.second_container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -80px;
  margin-bottom: 80px;
}

.second_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 1260px;
  gap: 20px;
}
.minorder {
  margin-top: -10px;
}

/* --- OrderPage filter bar --- */
.order-filter-bar {
  margin: 18px auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: calc(100% - 48px);
  max-width: 1180px; /* try to match container width */
  box-sizing: border-box;
  background: #eef3f7;
  padding: 8px 12px;
  border-radius: 999px;
  margin-top: 30px;
  box-shadow: 0 6px 18px rgba(20, 30, 40, 0.06);
  border: 1px solid rgba(0, 0, 0, 0.04);
  /* make the category/search bar sticky below the fixed navbar */
  position: sticky;
  /* increase the offset so the rounded filter bar sits visually separated from the navbar */
  top: 104px; /* adjust if your navbar height changes */
  z-index: 1200; /* above most content but below the navbar which uses a very large z-index */
}

.filter-categories {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
}
.filter-categories::-webkit-scrollbar {
  display: none;
}

.filter-categories {
  cursor: grab;
  -webkit-overflow-scrolling: touch;
  touch-action: pan-y; /* allow vertical page scroll while we handle horizontal drag */
}
.filter-categories.dragging {
  cursor: grabbing;
  user-select: none;
  -webkit-user-select: none;

  /* allow categories area to take remaining space and center its items */
  .filter-categories {
    flex: 1 1 auto;
    justify-content: center;
    align-items: center;
    padding-left: 6px; /* small offset from left arrow */
  }
}
.filter-cat-btn {
  user-select: none;
  -webkit-user-select: none;
}

.filter-cat-btn {
  background: transparent;
  border: none;
  padding: 8px 14px;
  border-radius: 999px;
  font-weight: 600;
  color: #233044;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s,
    transform 0.08s;
}
.filter-cat-btn.is-active,
.filter-cat-btn:hover {
  background: #18375d;
  color: #fff;
}

.filter-search {
  position: absolute;
  right: 12px;
  top: 50%;
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 30;
}
.filter-search input {
  border: none;
  padding: 8px 12px;
  border-radius: 999px;
  min-width: 200px;
  max-width: 420px;
  outline: none;
  background: rgba(0, 0, 0, 0.03);
}
.filter-search-btn {
  background: #117b38;
  color: #fff;
  border: none;
  padding: 8px 12px;
  border-radius: 999px;
  cursor: pointer;
  font-weight: 700;
}

.search-toggle-btn {
  background: transparent;
  border: none;
  padding: 6px 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #233044;
  font-size: 16px;
}
.search-toggle-btn i {
  pointer-events: none;
}

.filter-search-input {
  width: 0;
  opacity: 0;
  transform: translateX(6px);
  transition:
    width 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 180ms ease,
    transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1);
  border: none;
  padding: 6px 10px;
  border-radius: 999px;
  outline: none;
  background: rgba(0, 0, 0, 0.03);
}
.filter-search.open .filter-search-input,
.filter-search.open .filter-search-input:focus {
  width: 220px;
  max-width: 420px;
  opacity: 1;
  transform: translateX(0);
}

/* make sure the toggle button appears before the input visually */
.filter-search {
  position: relative;
}
.filter-search .filter-search-input {
  order: 2;
}
.filter-search .search-toggle-btn {
  order: 1;
}

.filter-search-open {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  flex-direction: row-reverse;
}
.filter-search-close {
  background: transparent;
  border: none;
  padding: 4px 8px;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #233044;
}
.filter-search-close:hover {
  color: #174ea6;
}

.filter-scroll-btn {
  background: transparent;
  border: none;
  padding: 6px 8px;
  margin: 0 6px;
  border-radius: 8px;
  cursor: pointer;
  color: #233044; /* symbol color */
  font-size: 14px; /* slightly smaller/thinner glyph */
  font-weight: 300; /* use a lighter weight for thinner appearance */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: color 120ms ease;
}
.filter-scroll-btn--left {
  margin-left: 4px;
}
.filter-scroll-btn--right {
  margin-right: 4px;
}

/* hover changes the symbol color (not the button background) */
.filter-scroll-btn:hover {
  color: #174ea6;
}

/* active / pressed state */
.filter-scroll-btn:active,
.filter-scroll-btn:focus-visible {
  color: #0f3b82;
}

@media (max-width: 880px) {
  /* slightly smaller offset for narrow widths where the navbar is more compact */
  .order-filter-bar {
    width: calc(100% - 32px);
    padding: 8px;
    top: 92px;
  }
  .filter-search input {
    min-width: 120px;
  }
}

@media (max-width: 520px) {
  /* mobile: keep a comfortable gap from the navbar */
  .order-filter-bar {
    align-items: stretch;
    gap: 10px;
    padding: 10px;
    top: 86px;
  }
  .filter-search {
    justify-content: flex-end;
  }
}
.second_desc {
  text-align: center;
  font-size: 15px;
  color: #18375d;
  font-family: "Poppins", sans-serif;
}

.wave_img {
  width: 100vw;
  margin-top: -250px;
  height: 500px;
}

.wave_img2 {
  width: 100vw;
  margin-top: -150px;
  height: 500px;
}

.story_container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 50px;
  margin-bottom: 35px;
}

.story_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  width: 55vw;
  gap: 35px;
}

.story_desc {
  text-align: center;
  font-size: 15px;
  color: #18375d;
  font-family: "Poppins", sans-serif;
}
.story_desc_highlight {
  text-align: center;
  font-size: 17px;
  color: #18375d;
  text-transform: uppercase;
  font-weight: 600;
  font-family: "Poppins", sans-serif;
  margin-bottom: 80px;
}

.footer_container {
  display: flex;
  align-items: center;
  width: 90vw;
  justify-content: space-between;
}
.footer_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 100px;
}
.footer_desc {
  font-size: 14px;
  color: #18375d !important;
  font-family: "Poppins", sans-serif;
}
.footer_desc a {
  color: #18375d;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  min-width: 44px;
  border-radius: 8px;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Footer link row (desktop) */
.footer_desc_wrapper {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.footer_desc_wrapper .linieeee {
  margin: 0 6px;
  opacity: 0.7;
}

/* Cookie consent (banner + modal)
   Styled to match the existing .terms-popup /.popup-content look (fonts + colors).
*/
.cookie-consent-banner {
  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 9999;
  width: min(420px, calc(100vw - 40px));
  height: auto;
}

.cookie-consent-banner-inner {
  background-color: #f7f7f7;
  padding: 18px;
  border: 2px solid #08628f;
  border-radius: 10px;
  box-shadow: 0 4px 8px #0003;
  text-align: left;
  font-family: "Coco Gothic", sans-serif;
  color: #18375d;
  display: grid;
  gap: 10px;
}

.cookie-consent-text {
  font-size: 14px;
  line-height: 1.35;
}

.cookie-consent-text strong {
  display: block;
  font-family: "Coco Gothic", sans-serif;
  font-size: 18px;
  margin-bottom: 4px;
}

.cookie-consent-links a {
  color: #aa0606;
  text-decoration: none;
  font-weight: 600;
}

.cookie-consent-links {
  margin-top: 6px;
}

.cookie-consent-buttons {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}

.cookie-consent-buttons .button {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

/* Make "Accept all" span full width for prominence */
.cookie-consent-buttons .button:last-child {
  grid-column: 1 / -1;
}

@media (max-width: 420px) {
  .cookie-consent-banner {
    right: 12px;
    bottom: 12px;
    width: calc(100vw - 24px);
  }
  .cookie-consent-buttons {
    grid-template-columns: 1fr;
  }
  .cookie-consent-buttons .button:last-child {
    grid-column: auto;
  }
}

.cookie-consent-overlay {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: rgba(0, 0, 0, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 18px;
}

.cookie-consent-modal {
  width: min(680px, 100%);
  max-height: min(80vh, 720px);
  overflow: auto;
  background: #f7f7f7;
  color: #18375d;
  border: 2px solid #08628f;
  border-radius: 12px;
  padding: 18px;
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.22);
  font-family: "Coco Gothic", sans-serif;
}

.cookie-consent-modal h2 {
  margin: 0 0 10px;
  font-family: "Coco Gothic", sans-serif;
  color: #18375d;
}

.cookie-consent-options {
  display: grid;
  gap: 12px;
  margin: 16px 0;
}

.cookie-consent-option {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  gap: 14px;
  padding: 14px;
  border: 1px solid rgba(8, 98, 143, 0.35);
  border-radius: 10px;
  background: #fff;
  transition: transform 120ms ease, box-shadow 120ms ease, border-color 120ms ease;
}

.cookie-consent-option:hover {
  border-color: rgba(8, 98, 143, 0.55);
  box-shadow: 0 6px 18px rgba(2, 52, 75, 0.08);
}

.cookie-consent-option strong {
  font-size: 16px;
  letter-spacing: 0.2px;
}

.cookie-consent-option-desc {
  display: block;
  opacity: 0.85;
  font-size: 13px;
  margin-top: 4px;
}

/* Checkbox sizing so it doesn't look like a default browser form */
.cookie-consent-option input[type="checkbox"] {
  width: 18px;
  height: 18px;
  accent-color: #08628f;
}

.cookie-consent-option input[type="checkbox"][disabled] {
  opacity: 0.55;
}

.cookie-consent-actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 10px;
}

.cookie-consent-actions .button {
  width: 100%;
  min-height: 44px;
  border-radius: 10px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
}

@media (max-width: 520px) {
  .cookie-consent-actions {
    grid-template-columns: 1fr;
  }
}

.cookie-consent-modal button:focus-visible,
.cookie-consent-banner button:focus-visible {
  outline: 2px solid #18375d;
  outline-offset: 2px;
}

.cookie-consent-footnote {
  margin-top: 12px;
  font-size: 13px;
  opacity: 0.9;
}

.cookie-consent-footnote a {
  color: #aa0606;
  font-weight: 600;
}

.footer-cookie-preferences {
  background: transparent;
  border: none;
  padding: 6px 10px;
  margin: 0;
  color: #18375d;
  text-decoration: none;
  cursor: pointer;
  font: inherit;
  min-height: 44px;
  min-width: 44px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* No hover "box" background in footer links */
.footer_desc a:hover,
.footer-cookie-preferences:hover {
  background: transparent;
}

.footer_desc a:focus-visible,
.footer-cookie-preferences:focus-visible {
  outline: 2px solid rgba(24, 55, 93, 0.55);
  outline-offset: 2px;
}
.footer_logos a::before {
  background-color: transparent !important;
}
.footer_logos a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  min-height: 44px;
  min-width: 44px;
  border-radius: 10px;
}
.footer_logos img {
  width: 200px;
  height: auto;
  max-width: 100%;
}
.contact_wrapper {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  width: 55vw;
  justify-content: space-between;
}

.contact_wrapper2 {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: -50px;
}
.contact_container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  flex-direction: column;
}
.contact_container2 {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  flex-direction: column;
}
.contact_icons_wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.contact_title {
  font-size: 16px;
  font-weight: 600;
  margin-bottom: 10px;
}

.contact_desc {
  font-size: 14px;
  margin-bottom: 5px;
}

.contact_icon_circle {
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: #18375d;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #fff;
}

.contact_icons_wrapper a::before {
  background-color: transparent !important;
}

.auth-page-container {
  min-height: 80vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  box-sizing: border-box;
}

.auth-card {
  width: 100%;
  max-width: 420px;
  background: #ffffff;
  color: #0b1a12;
  padding: 1.4rem 1.3rem;
  border-radius: 16px;
  border: 1px solid rgba(0, 0, 0, 0.10);
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
}

.auth-card h2 {
  margin-bottom: 12px;
}

.auth-actions {
  display: flex;
  gap: 8px;
  margin-top: 12px;
  justify-content: flex-end;
}

/* Admin auth inputs/buttons (match calendar auth card look) */
.auth-label {
  display: block;
  font-weight: 600;
  margin: 0.7rem 0 0.35rem;
  color: #222;
}

.auth-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  padding: 0.65rem 0.85rem;
  border-radius: 10px;
  border: 1px solid rgba(0, 0, 0, 0.12);
  background: #fff;
  outline: none;
}

.auth-input:focus {
  border-color: rgba(0, 0, 0, 0.30);
  box-shadow: 0 0 0 4px rgba(0, 0, 0, 0.06);
}

.auth-actions.auth-actions-stack {
  flex-direction: column;
  align-items: stretch;
  justify-content: flex-start;
  gap: 10px;
}

.auth-btn {
  width: 100%;
  border: 1px solid rgba(0,0,0,0.12);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-weight: 700;
  cursor: pointer;
  background: #111;
  color: #fff;
}

.auth-btn:hover {
  background: #000;
}

.auth-btn:disabled {
  opacity: 0.65;
  cursor: not-allowed;
}

.auth-btn.secondary {
  background: #fff;
  color: #111;
  border: 1px solid rgba(0,0,0,0.16);
}

.auth-message {
  margin-top: 12px;
  color: #ef4444;
}

.input-with-label {
  display: contents;
}
.input-label {
  display: block;
  font-size: 13px;
  color: #18375d;
  margin-bottom: 4px;
}

input[type="date"] {
  -webkit-appearance: textfield;
  appearance: auto;
}

@media (max-width: 700px) {
  .form-grid {
    grid-template-columns: 1fr;
  }
  .input-label {
    margin-left: 2px;
  }
}
@media (max-width: 720px) {
  .auth-card {
    padding: 16px;
  }
  .auth-actions {
    flex-direction: column;
    align-items: stretch;
  }
}
@media (max-width: 1980px) {
  .footerTitle {
    font-size: 90px;
  }
  .footerSmall {
    font-size: 20px;
  }
}
@media (max-width: 1600px) {
  .storyText {
    font-size: 16px;
  }
}
@media (max-width: 1440px) {
  .hero-first span {
    font-size: 22px;
  }
  .hero-glow {
    width: 48vw;
    max-width: 500px;
  }
  .containernewtextSecondCotainer {
    width: 90vw;
  }
  .footerTitle {
    font-size: 70px;
  }
  .footerSmall {
    font-size: 16px;
  }
}
@media (max-width: 1366px) {
  .hero-first span {
    font-size: 20px;
  }
  .hero-glow {
    width: 44vw;
    max-width: 440px;
  }

  .hero-img {
    width: 350px;
  }
  .containernewtextSecondCotainer {
    width: 90vw;
  }
}
@media (max-width: 1280px) {
  .containernewtextSecondCotainer span {
    font-size: 17px;
  }
}
@media (max-width: 1128px) {
  .footerTitle {
    font-size: 60px;
  }
}
@media (max-width: 768px) {
  .order-hero {
    padding: 20px 20px !important;
  }
  .contact_wrapper {
    width: 90vw;
  }
  .contact_title {
    text-align: end;
  }
  .footer_container {
    margin-top: 50px;
    justify-content: center;
    align-items: center;
    flex-direction: column;
  }
  .footer_logos {
    display: flex;
    flex-direction: column;
  }
  .second_wrapper {
    width: 90vw;
  }
  .second_container {
    margin-top: -20px;
  }
  .contact_wrapper2 {
    margin-top: -10px;
  }
  .story_desc_highlight {
    margin-top: 0px;
    margin-bottom: 120px;
  }
  .story_container {
    margin-top: 25px;
    margin-bottom: 0px;
  }
  .wave_img2 {
    height: 200px;
    margin-top: -100px;
  }
  .wave_img {
    height: 200px;
    margin-top: -100px;
  }

  .story_wrapper {
    width: 90vw;
  }

  .fotetercontr {
    background: linear-gradient(to top, rgba(0, 255, 0, 0.11) 30%, transparent);
  }
  .storyImageLeft {
    display: none;
  }
  .storyImageRight {
    display: none;
  }
  .storyVideo {
    margin-top: 0px;
    margin-bottom: 100px;
  }
  .storyContentContainer {
    width: 90vw;
  }

  .footer_desc_wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    text-align: center;
  }
  .linieeee {
    display: none;
  }
  .footer_wrapper {
    margin-top: 20px;
  }
  .storyContent {
    height: auto;
    width: 100vw;
  }
  .storyText {
    font-size: 17px;
    text-align: center;
  }
  .storyinnertext {
    margin-top: 150px;
    width: 95%;
  }
  .storyContent {
    background-color: transparent;
    height: auto;
  }
  .storyContainer {
    margin-bottom: 0px;
  }
  .imagesfooter {
    display: none;
  }
  .imagesfooter2 {
    display: none;
  }
  .footerleft {
    background-color: transparent;
    padding: 0;
    width: 100vw;
  }
  .adyhwayudh {
    justify-content: center;
  }
  .footerbo2ttom {
    margin-left: 0;
    display: flex;
    justify-content: center;
    margin-bottom: 0;
    padding-bottom: 20px;
    margin-top: -20px;
  }
  .hero-first span {
    font-size: 16px;
    letter-spacing: 8px;
  }
  .hero-img {
    width: 300px;
    max-width: none;
  }
  .hero-first span {
    font-size: 19px;
  }
  .hero-content {
    gap: 70px;
  }
  .pc {
    display: none;
  }
  .mobile {
    display: flex !important;
  }
  .hero-glow {
    width: 70vw;
    max-width: 360px;
    filter: blur(24px);
  }
  .thirdcardsdesc {
    margin-top: -20px;
  }
  .second-img2 {
    display: block;
  }
  .second-img {
    display: none;
  }
  .second-container {
    height: 60vh;
  }

  .second-text-title {
    font-size: 35px;
  }
  .second-text-desc {
    font-size: 15px;
  }
  .second-text {
    width: calc(100vw - 100px);
    display: flex;
    margin-left: 10px;
    flex-direction: column;
  }
  .second-container {
    justify-content: flex-start;
  }
  .second-img2 {
    position: absolute;
    right: 0;
    width: 90px;
    z-index: -1;
  }
  .second-wave {
    overflow: hidden;
  }
  .second-wave2 {
    overflow: hidden;
  }
  .second-wave-svg {
    height: 130px;
  }
  .footerright {
    display: none;
  }
  .footerTitle {
    text-align: center;
    font-size: 70px;
  }
  .spacingfooter i {
    width: 25px;
  }
  .spacingfooter {
    margin-left: 30px;
  }

  .secondContainer {
    margin-bottom: 50px;
  }
  .swiper-slide {
    height: auto !important;
  }

  .wdcvwd {
    display: none;
  }
  .thirdTitler {
    font-size: 50px;
    text-align: center;
  }
  .secontTitle {
    font-size: 60px;
    text-align: center;
  }
  .storyContentContainer {
    height: 400px;
  }
  .secontTitle span {
    width: 80vw;
  }
  .navbarleft {
    margin-left: 10px;
  }
  .navbarrightright .button {
    display: none;
  }
  .navbarrightright {
    width: -webkit-fill-available;
    margin-right: 5px;
  }
  .anpc {
    flex-direction: column;
    margin-top: 5px;
  }

  .anpcsafty {
    display: flex;
    gap: 5px;
    width: 248px;
    flex-wrap: wrap;
    justify-content: center;
  }
}

.mobile-cart-button {
  display: none !important;
  position: fixed;
  right: 18px;
  bottom: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: #18375d;
  color: #fff;
  font-size: 22px;
  border: none;
  z-index: 20000;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin-bottom: 50px;
}

.mobile-cart-button .cart-emoji {
  font-size: 22px;
}

.mobile-cart-badge {
  position: absolute;
  top: -6px;
  right: -6px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 12px;
  background: #ff5a5a;
  color: white;
  font-size: 12px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

@media (max-width: 768px) {
  .mobile-cart-button {
    display: flex !important;
  }
}

@keyframes fadeIn {
  to {
    opacity: 1;
  }
}

.herooooo {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
}
.heroo {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
}

.swiper {
  width: 100%;
  height: auto;
}

.swiper-slide {
  display: flex;
  justify-content: center;
  align-items: center;
}

.swiper-slide img.slidess-img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

.order-hero {
  text-align: center;
  padding: 20px 20px;
}
.order-hero h1 {
  font-family: "Coco Gothic", sans-serif;
  font-size: 36px;
  color: #18375d;
  margin: 0;
}
.order-hero p {
  color: #6b7b8d;
}

.order-container {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 30px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto 80px auto;
  margin-bottom: 300px;
}
.order-list {
  flex: 1;
}

.order-list {
  min-width: 0;
}
.order-cart {
  width: 320px;
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.06);
  height: fit-content;
}
.menu-section {
  margin-bottom: 22px;
}
.menu-section h2 {
  font-size: 18px;
  margin-bottom: 12px;
  color: #18375d;
}
.menu-section-lm-hr {
  border: none;
  border-top: 3px solid rgba(24, 55, 93, 0.55);
  margin: 22px 0 0 0;
  border-radius: 15px;
  width: 100%;
}
.menu-items {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

/* Non-purchasable/info-only items should always take a full row (span 2 columns) */
.menu-items > .menu-item.menu-item--full {
  grid-column: 1 / -1;
}

.menu-items > .menu-item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
}
.menu-item {
  display: flex;
  justify-content: space-between;
  /* allow left/right columns to stretch to same height so we can pin allergens to bottom */
  align-items: stretch;
  background: #eef3f7;
  padding: 12px;
  border-radius: 8px;
  margin: 0;
  min-height: 70px;
  /* subtle base appearance and smooth hover transition */
  transition:
    box-shadow 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 180ms ease;
  will-change: box-shadow, transform;
  position: relative; /* allow absolute-positioned controls that don't affect layout */
}

/* Visual indicator for chosen items: a dark blue bar on the left that does not affect layout */
.menu-item.menu-item--chosen::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: #02344b; /* strong dark blue */
  border-radius: 6px 0 0 6px;
  z-index: 5;
}
.menu-item-left {
  flex: 1;
  min-width: 0;
  /* layout children vertically; keep title+desc together at the top */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* If allergens exist, push them to the bottom of the left column */
.menu-item-left .order-allergens {
  margin-top: auto;
}
.menu-item-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  justify-content: flex-start; /* keep price at the top */
  gap: 6px;
  min-width: 120px;
  align-self: stretch; /* let this column stretch to full card height */
  height: 100%;
  position: relative; /* anchor for any inner absolute elements if needed */
}

/* Hover / focus effect: subtle shadow and slight lift */
.menu-items > .menu-item:hover,
.menu-items > .menu-item:focus-within {
  box-shadow: 0 12px 28px rgba(2, 52, 75, 0.06);
  transform: translateY(-3px);
}

/* Reduce lift on very small screens to avoid layout shifts */
@media (max-width: 520px) {
  .menu-items > .menu-item:hover,
  .menu-items > .menu-item:focus-within {
    transform: none;
    box-shadow: 0 8px 18px rgba(2, 52, 75, 0.05);
  }
}
.menu-item strong {
  display: block;
  color: #18375d;
}
.menu-desc {
  font-size: 13px;
  color: #000000;
  margin-top: 6px;
  white-space: pre-line;
}

.menu-price {
  font-weight: 700;
  margin-bottom: 6px;
  text-align: center;
}
.menu-price-qty {
  font-weight: 400;
  font-size: 13px;
  color: #4f5b68; /* slightly muted to match the line style */
}
.menu-price-unit {
  font-weight: 700;
  font-size: 15px; /* keep the unit price visually prominent */
  color: #18375d;
}
.menu-lineqty {
  font-size: 13px;
  color: #4f5b68;
  margin-top: 2px;
  text-align: right;
}
.add-inner {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  /* start slightly to the right so it can slide in from the right */
  /* start slightly to the left so it can slide in from the left */
  transform: translateY(-50%) translateX(-22px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  padding: 0 8px;
  opacity: 0;
  pointer-events: none;
  transform-origin: left center;
  /* fade then slide in; small delay makes the sequence feel like a scroll from the right */
  transition:
    opacity 180ms ease 70ms,
    transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
.cart-controls button {
  padding: 4px 8px;
  margin: 0 6px;
}
.cart-summary {
  margin-top: 12px;
  display: flex;
  justify-content: space-between;
}
.total {
  font-weight: 700;
}
.checkout {
  width: 100%;
  margin-top: 12px;
  padding: 10px;
  background: #0f3553;
  color: #fff;
  border: none;
  border-radius: 6px;
  cursor: pointer;
}
.empty {
  color: #6b7b8d;
}
.menu-group-title {
  font-size: 26px !important;
  margin: 22px 0 10px 0;
  color: #18375d;
}

@media (max-width: 900px) {
  .order-container {
    display: flex;
    flex-direction: column;
    padding: 10px;
    margin-bottom: 150px;
    margin: 0;
  }
  .order-cart {
    width: 100%;
  }
}

.details-stack {
  position: sticky;
  top: 120px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-self: flex-start;
  z-index: 5;
}
.summary-box,
.form-box {
  background: #e6eff4;
  padding: 18px;
  border-radius: 8px;
  box-sizing: border-box;
}
.summary-box h3,
.form-box h3 {
  color: #18375d;
  margin: 0 0 12px 0;
}
.summary-content {
  background: #dde9ee;
  padding: 12px;
  border-radius: 6px;
}
.summary-title {
  font-weight: 700;
  margin-bottom: 10px;
}
.summary-line {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}

.summary-box {
  min-width: 0;
}
.summary-content {
  min-width: 0;
}
.summary-line {
  align-items: center;
  gap: 8px;
}
.summary-line--stacked {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 6px 0;
  gap: 8px;
}
.summary-item-left {
  flex: 1 1 auto;
  min-width: 0;
}
.summary-item-price {
  color: #6b7280; /* muted gray */
  font-weight: 600;
  margin-top: 4px;
  font-size: 13px;
}
.summary-item-controls {
  display: inline-flex;
  align-items: center;
  margin-top: 2px;
  gap: 2px;
}
/* Make the items list scrollable when it grows too tall so totals and checkout remain visible */
.summary-items {
  overflow: visible;
  max-height: none;
}

@media (max-width: 700px) {
  .summary-items {
    max-height: none;
  }
}

/* Subtle scrollbar for WebKit browsers */
.summary-items::-webkit-scrollbar {
  width: 8px;
}
.summary-items::-webkit-scrollbar-track {
  background: transparent;
}
.summary-items::-webkit-scrollbar-thumb {
  background: rgba(0, 0, 0, 0.08);
  border-radius: 6px;
}

/* Progressive expand control under the summary list (looks like text, not a button) */
.summary-show-more-row {
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: flex-start;
  padding-top: 8px;
}

.summary-show-more {
  cursor: pointer;
  font-size: 12px;
  font-weight: 600;
  color: rgba(24, 55, 93, 0.9);
  text-decoration: underline;
  text-underline-offset: 3px;
  user-select: none;
}

.summary-show-more--secondary {
  opacity: 0.75;
}

.summary-show-more:focus {
  outline: 2px solid rgba(24, 55, 93, 0.25);
  outline-offset: 2px;
  border-radius: 6px;
}
.qty-btn-mini {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(2, 52, 75, 0.551);
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 12px;
  color: rgba(2, 52, 75, 0.85);
  transition:
    background 120ms ease,
    transform 100ms ease;
}
.qty-btn-mini:hover {
  background: rgba(2, 52, 75, 0.04);
  transform: translateY(-1px);
}
.qty-display-mini {
  border: none;
  background: transparent;
  padding: 0 6px;
  font-weight: 500;
  font-size: 15px;
  color: rgba(2, 52, 75, 0.9);
  cursor: pointer;
}
.qty-input-mini {
  width: 56px;
  height: 32px;
  padding: 4px 8px;
  border-radius: 8px;
  border: 1px solid rgba(2, 52, 75, 0.08);
  text-align: center;
  font-size: 14px;
}
.summary-item-name {
  flex: 1 1 auto;
  min-width: 0;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.summary-line .right {
  flex: 0 0 auto;
  margin-left: 8px;
  white-space: nowrap;
}
.summary-delivery {
  display: flex;
  justify-content: space-between;
  margin-top: 0px;
  font-weight: 600;
}

.total-to-pay {

  font-weight: 800;
  display: flex;
  justify-content: space-between;
}

.form-grid {
  display: grid;
  /* always stack inputs vertically: single column */
  grid-template-columns: 1fr;
  gap: 10px;
}
.form-grid > * {
  min-width: 0;
}
.form-box input,
.form-box textarea {
  width: 100%;
  padding: 10px 12px;
  border-radius: 6px;
  border: 1px solid #e6e8eb;
  box-sizing: border-box;
  display: block;
}

.form-box input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  background: #fff;
  color: #18375d;
  font-size: 14px;
  line-height: 1.2;
  padding: 10px 12px;
  height: 38px; /* fixed height to match other inputs */
  text-align: left;
  box-sizing: border-box;
}

.form-box input[type="date"]::-webkit-datetime-edit {
  color: #18375d;
}

.form-box input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit {
  color: #9ca3af;
}

.form-box input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  padding: 0;
}

.form-box input[type="date"]::-webkit-date-and-time-value {
  text-align: left;
}

/* Order phone input row */
.form-box select {
  width: 100%;
  padding: 0 32px 0 12px;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #e6e8eb;
  box-sizing: border-box;
  display: block;
  background-color: #fff;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b7280' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  color: #9ca3af;
  font-size: 14px;
  font-family: inherit;
  font-weight: inherit;
  line-height: 38px;
  -webkit-appearance: none;
  appearance: none;
}

.form-box select.select--has-value {
  color: #18375d;
}

/* Order page: match select placeholder to input placeholder appearance.
   Body color is #18375d so input placeholders render as ~rgba(24,55,93,0.54)
   in Chrome. Use rgba at 0.45 opacity so the select empty state looks similar. */
.order-page .form-box select:not(.select--has-value) {
  color: rgba(24, 55, 93, 0.45);
}
.order-page .form-box select.select--has-value {
  color: #18375d;
}

.form-box select option {
  color: #18375d;
}

.form-grid .phone-row {
  display: flex;
  gap: 10px;
  align-items: stretch;
  margin-top: 0; /* children already have margin-top */
  grid-column: 1 / -1; /* keep phone row on a single row */
}

.form-grid .country-code-select {
  flex: 0 0 74px;
  min-width: 64px;
}

.form-grid .phone-input {
  flex: 1 1 auto;
  min-width: 0;
}
.phone-input {
  display: flex;
  align-items: center;
  width: 100%;
  height: 38px;
  border-radius: 6px;
  border: 1px solid #e6e8eb;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.07);
  background: #fff;
  box-sizing: border-box;
}
.phone-input .PhoneInput {
  display: flex;
  align-items: center;
  width: 100%;
}
.phone-input .PhoneInputCountrySelect,
.phone-input .PhoneInputCountry {
  flex: 0 0 68px;
  min-width: 64px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  height: 100%;
  margin-right: 8px;
}
.phone-input .PhoneInputCountrySelect select {
  background: transparent;
  border: none;
  height: 100%;
  padding: 0;
}
.phone-input .PhoneInputInput,
.phone-input input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  padding: 10px 8px;
  border: none;
  background: transparent;
  font-size: 13px;
  font-weight: 500;
  box-sizing: border-box;
  margin-top: 0px;
}
.phone-input .PhoneInputInput:focus,
.phone-input input:focus {
  outline: none;
}
.phone-input:focus-within {
  border-color: #000000;
}
.phone-input.input-error {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px #dc2626 inset;
}

/* placeholder color match for other inputs */
.phone-input .PhoneInputInput::placeholder,
.phone-input input::placeholder {
  color: #9ca3af; /* same muted gray used elsewhere (date placeholder / muted text) */
  opacity: 1; /* ensure consistent opacity across browsers */
}
.phone-input .PhoneInputInput:-ms-input-placeholder,
.phone-input input:-ms-input-placeholder {
  color: #9ca3af;
}
.phone-input .PhoneInputInput::-ms-input-placeholder,
.phone-input input::-ms-input-placeholder {
  color: #9ca3af;
}

.form-box textarea {
  height: 110px;
  resize: vertical;
}
.form-box .input-error,
.form-grid select.input-error,
.form-grid .phone-input.input-error,
.form-grid .country-code-select[data-invalid="1"] {
  border-color: #dc2626;
  box-shadow: 0 0 0 1px #dc2626 inset;
}
.paynow {
  background: #18375d;
  color: #fff;
  padding: 12px;
  border-radius: 6px;
  border: none;
  width: 100%;
  margin-top: 8px;
}

.paynow:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Make enabled Pay buttons visually brighter / elevated */
.paynow:not(:disabled) {
  background: #2b5573; /* brighter/desaturated blue */
  box-shadow: 0 8px 20px rgba(12, 34, 56, 0.12);
  transition:
    background-color 180ms ease,
    transform 120ms ease,
    box-shadow 160ms ease;
}
.paynow:not(:disabled):active {
  transform: translateY(1px);
}
.paynow:not(:disabled):hover {
  background: #1e3f57;
}

/* Mobile inline checkout: hidden by default, shown only on small screens */
.mobile-inline-checkout {
  display: none;
}

/* Expand the mobile breakpoint to 900px so most phones/tablet portrait widths show the inline card */
@media (max-width: 900px) {
  /* show the inline checkout card and hide the full-screen modal and desktop checkout button */
  .mobile-inline-checkout {
    display: flex !important;
    margin: 12px 0;
    position: relative;
    justify-content: center;
    align-items: center;
    z-index: 20; /* sit above simple page elements (not overlays) */
  }
  .filter-search.open .filter-search-input,
  .filter-search.open .filter-search-input:focus {
    width: 80%;
  }
  .PhoneInputInput {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
  }
  /* Make the inline card visually match the desktop checkout right column */
  .mobile-inline-checkout .form-box {
    width: 95%;
    display: flex;
    flex-direction: column;
    gap: 10px;
    /* pale-blue card background like desktop left pane */
    background: #e6eff4;
    border-radius: 16px;
    padding: 18px;
    box-sizing: border-box;
    border: 1px solid rgba(2, 52, 75, 0.04);
  }

  /* Inputs appear as white rounded boxes with subtle shadow inside the pale-blue card */
  .mobile-inline-checkout .form-box .form-grid input,
  .mobile-inline-checkout .form-box .form-grid select,
  .mobile-inline-checkout .form-box textarea {
    background: #ffffff;
    border: 1px solid rgba(2, 52, 75, 0.06);
    box-shadow: 0 6px 14px rgba(2, 52, 75, 0.06);
    border-radius: 10px;
    padding: 12px 14px;
    font-size: 14px;
    color: #18375d;
  }
  /* Select elements need height:auto + line-height reset because .form-box select sets
     height:38px (border-box) and line-height:38px. Adding 12px vertical padding without
     resetting these clips the text inside the shrunken content area. */
  .mobile-inline-checkout .form-box .form-grid select {
    height: auto;
    min-height: 38px;
    line-height: 1.4;
    padding-right: 36px;
  }
  .mobile-inline-checkout .form-box textarea {
    height: 110px;
  }

  .mobile-inline-checkout .mobile-inline-title {
    margin: 0 0 6px 0;
    color: #18375d;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    font-size: 16px;
  }

  /* Keep the same two-column form layout on wider phones/tablets; stack on narrow devices */
  .mobile-inline-checkout .form-grid {
    display: grid;
    gap: 10px;
    margin-bottom: 6px;
  }

  /* Ensure inputs and textarea sizes are consistent with desktop form */
  .mobile-inline-checkout .form-box input,
  .mobile-inline-checkout .form-box textarea,
  .mobile-inline-checkout .form-box select {
    padding: 10px 12px;
    border-radius: 8px;
    border: 1px solid #e6e8eb;
    background: #fff;
    font-size: 14px;
  }
  .mobile-inline-checkout .form-box select {
    height: auto;
    min-height: 38px;
    line-height: 1.4;
    padding-right: 36px;
  }

  .mobile-inline-checkout .form-box textarea {
    height: 100px;
  }

  /* Make the Pay button prominent and full-width like desktop */
  .mobile-inline-checkout .paynow {
    width: 100%;
    padding: 14px;
    border-radius: 10px;
    font-weight: 700;
    background: #5b6f84; /* slightly desaturated blue to match mock */
    color: #fff;
    box-shadow: 0 4px 12px rgba(11, 32, 54, 0.12);
  }

  /* Hide modal and desktop checkout button on small screens */
  .checkout-modal-overlay {
    display: none !important;
  }
  .checkout-modal {
    display: none !important;
  }
  .checkout-btn {
    display: none !important;
  }

  /* On very narrow screens stack form fields into a single column */
  @media (max-width: 420px) {
    .mobile-inline-checkout .form-grid {
      grid-template-columns: 1fr;
    }
  }
}

.qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}
.qty-btn {
  background: #fff;
  border: 1px solid #c9d6dc;
  padding: 6px 10px;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background 0.2s ease;
  width: 30px;
}

.qty-btn:hover {
  background: #f0f0f0;
}

.qty-btn:active {
  background: #e0e0e0;
}

/* Prevent the generic .qty-btn hover/active rules from greying the
   add-circle (which reuses the qty-btn class). Keep the add-circle
   visually white even when pressed/clicked; we handle its visual
   affordance via box-shadow and border changes elsewhere. */
.add-circle.qty-btn,
.add-circle.qty-btn:hover,
.add-circle.qty-btn:active {
  background: #ffffff;
}

.qty {
  min-width: 22px;
  text-align: center;
}

/* New add-widget (compact + circle that expands to full controls) */
.add-widget {
  /* absolutely place the widget over the card so expanding doesn't reflow content
     anchor to the bottom-right of the right column so the price remains at the top */
  position: absolute;
  right: -4px;
  left: auto;
  bottom: -2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  z-index: 40;
  pointer-events: auto;
}

.add-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #ffffff;
  border: 1px solid #e6e8eb;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(2, 52, 75, 0.03);
  /* enable smooth width/shape transitions when expanding to a pill */
  position: relative;
  overflow: hidden;
  transition:
    width 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    border-radius 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    transform 160ms ease,
    box-shadow 160ms ease,
    background 120ms ease;
  padding: 0;
  font-size: 15px;
}
.add-circle:focus {
  outline: none;
  box-shadow: 0 4px 12px rgba(2, 52, 75, 0.08);
}
.add-circle .add-plus {
  font-weight: 700;
  font-size: 18px;
}
.add-circle.has-count {
  background: #ffffff;
}
/* Internal container revealed when the circle expands (defined earlier to enable slide-from-right) */

.add-circle .add-plus {
  display: inline-block;
  position: relative;
  z-index: 2; /* keep the + above the sliding controls while it animates */
  transition:
    transform 220ms cubic-bezier(0.2, 0.9, 0.2, 1),
    opacity 160ms ease;
  transform-origin: right center;
}

.add-popup-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  font-size: 14px;
  padding: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.add-popup-count {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  min-width: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  line-height: 20px;
}

.add-popup-input {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  width: 28px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  font-weight: 700;
  font-size: 14px;
  border: none;
  background: transparent;
  color: inherit;
  padding: 0;
  margin: 0;
  box-sizing: border-box;
  display: inline-block;
  vertical-align: middle;
  appearance: textfield;
  -moz-appearance: textfield;
  -webkit-appearance: textfield;
}
.add-popup-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(2, 52, 75, 0.06);
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.9);
}

/* remove default spinner controls for number inputs */
input.add-popup-input::-webkit-outer-spin-button,
input.add-popup-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
input.add-popup-input[type="number"] {
  appearance: textfield;
  -moz-appearance: textfield;
}

/* When widget is active (hover/focus) expand the circle into a pill and reveal inner controls */
.add-widget:hover .add-circle,
.add-widget:focus-within .add-circle {
  width: 120px;
  border-radius: 20px;
}
/* move the + slightly left so it visually becomes part of the pill while keeping it visible */
.add-widget:hover .add-circle .add-plus,
.add-widget:focus-within .add-circle .add-plus {
  opacity: 1;
  transform: translateX(36px) scale(0.96);
}
.add-widget:hover .add-circle .add-inner,
.add-widget:focus-within .add-circle .add-inner {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(-50%) translateX(0);
  /* small delay so the inner controls feel like they scroll in after the pill expands */
  transition-delay: 80ms;
}

/* For narrow screens, place popup below the button to avoid overflow */
@media (max-width: 520px) {
  /* On narrow screens, expand the circle slightly and reveal inner controls below */
  .add-widget:hover .add-circle,
  .add-widget:focus-within .add-circle {
    width: 120px;
    border-radius: 22px;
  }
  .add-widget:hover .add-circle .add-inner,
  .add-widget:focus-within .add-circle .add-inner {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%);
  }
}

@media (max-width: 1100px) {
  .order-container {
    flex-direction: column;

  }
  .order-list {
    order: 1;
  }
  .details-stack {
    order: 2;
    position: sticky;
    top: 120px;
    width: 100%;
    z-index: 5;
  }
}

@media (max-width: 700px) {
  .menu-items {
    grid-template-columns: 1fr;
  }
  .form-grid {
    grid-template-columns: 1fr;
  }
}

.admin-layout {
  display: flex;
  min-height: 100vh;
}

@media (max-width: 820px) {
  .admin-layout {
    display: block;
    min-height: 100vh;
  }
}

.affiliate-title {
  margin-top: 0;
}
.affiliate-table-wrap {
  overflow-x: auto;
  margin-bottom: 20px;
}
.affiliate-table {
  border-collapse: collapse;
  width: 100%;
  min-width: 900px;
  background: #fff;
}
.affiliate-table-head-row {
  background: #f5f5f5;
}
.affiliate-th {
  text-align: left;
  padding: 10px 12px;
  font-size: 13px;
  font-weight: 600;
  border-bottom: 1px solid #e5e5e5;
}
.affiliate-row {
  border-top: 1px solid #e5e5e5;
}
.affiliate-td {
  padding: 10px 12px;
  font-size: 13px;
  vertical-align: top;
}
.affiliate-link-btn {
  background: none;
  border: none;
  color: #2c6b53;
  cursor: pointer;
  text-decoration: underline;
  padding: 0;
  font-size: 13px;
}
.affiliate-code-cell {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Affiliate Mobile Cards */
.affiliate-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.affiliate-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 1rem;
}

.affiliate-card.affiliate-empty {
  text-align: center;
  color: #6b7280;
  padding: 2rem;
}

.affiliate-card.affiliate-card-editing {
  border: 2px solid #2c6b53;
}

.affiliate-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.affiliate-card-code {
  font-weight: 700;
  font-size: 1.1rem;
  color: #0b2740;
}

.affiliate-status-badge {
  display: inline-block;
  padding: 0.25em 0.75em;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
}

.affiliate-status-badge.active {
  background: #ecfdf5;
  color: #065f46;
}

.affiliate-status-badge.disabled {
  background: #fef2f2;
  color: #991b1b;
}

.affiliate-villa-badge {
  display: inline-block;
  padding: 0.2em 0.65em;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 700;
  background: #eef6ff;
  color: #1d4ed8;
  border: 1px solid #bfdbfe;
  margin-left: 6px;
  vertical-align: middle;
  letter-spacing: 0.01em;
}

.affiliate-villa-checkbox-label {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 0.9rem;
}

.affiliate-villa-checkbox {
  width: 16px;
  height: 16px;
  accent-color: #1d4ed8;
  cursor: pointer;
  flex-shrink: 0;
}

.affiliate-villa-checkbox-text {
  display: flex;
  align-items: center;
  gap: 6px;
}

.affiliate-form-group--villa {
  grid-column: 1 / -1;
}

.affiliate-card-row {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-bottom: 0.5rem;
}

.affiliate-card-label {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.85rem;
}

.affiliate-card-value {
  color: #1f2937;
}

.affiliate-card-link {
  color: #2c6b53;
  word-break: break-all;
  font-size: 0.9rem;
}

.affiliate-card-field {
  margin-bottom: 0.75rem;
}

.affiliate-card-field label {
  display: block;
  margin-bottom: 0.35rem;
}

.affiliate-card-field input,
.affiliate-card-field select {
  width: 100%;
  box-sizing: border-box;
}

.affiliate-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.affiliate-card-actions button {
  flex: 1;
  min-width: 100px;
}

/* ============================================
   AFFILIATES DASHBOARD - NEW DESIGN
   ============================================ */

.affiliates-dashboard {
  width: 100%;
}

.affiliates-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.affiliates-header h2 {
  font-size: 1.5rem;
  font-weight: 700;
  color: #0b2740;
  margin: 0;
}

.affiliates-form-section {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

/* Stats Cards */
.affiliates-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.affiliates-stat-card {
  background: #fff;
  border-radius: 16px;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
  transition: transform 0.2s, box-shadow 0.2s;
}

.affiliates-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.affiliates-stat-card .stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  background: #f0fdf4;
  color: #15803d;
}

.affiliates-stat-card.active .stat-icon {
  background: #ecfdf5;
  color: #059669;
}

.affiliates-stat-card.revenue .stat-icon {
  background: #eff6ff;
  color: #2563eb;
}

.affiliates-stat-card.commission .stat-icon {
  background: #fef3c7;
  color: #d97706;
}

.affiliates-stat-card.orders .stat-icon {
  background: #f3e8ff;
  color: #9333ea;
}

.affiliates-stat-card .stat-content {
  display: flex;
  flex-direction: column;
}

.affiliates-stat-card .stat-value {
  font-size: 1.35rem;
  font-weight: 700;
  color: #0b2740;
  line-height: 1.2;
}

.affiliates-stat-card .stat-label {
  font-size: 0.8rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.affiliates-stat-card .stat-sub {
  font-size: 0.72rem;
  color: #9ca3af;
  margin-top: 0.15rem;
}

/* Section */
.affiliates-section {
  background: #fff;
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  border: 1px solid #e5e7eb;
}

.affiliates-section h3 {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0b2740;
  margin: 0 0 1rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.affiliates-section h3 i {
  color: #6b7280;
}

/* Empty State */
.affiliates-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #6b7280;
}

.affiliates-empty i {
  font-size: 3rem;
  color: #d1d5db;
  margin-bottom: 1rem;
}

.affiliates-empty p {
  margin: 0;
  font-size: 0.95rem;
}

/* Table */
.affiliates-table-container {
  overflow-x: auto;
}

.affiliates-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 800px;
}

.affiliates-table th {
  text-align: left;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  background: #f9fafb;
  border-bottom: 1px solid #e5e7eb;
}

.affiliates-table-row td {
  padding: 1rem;
  border-bottom: 1px solid #f3f4f6;
  vertical-align: middle;
}

.affiliates-table-row:last-child td {
  border-bottom: none;
}

.affiliates-table-row:hover {
  background: #fafafa;
}

.affiliates-table-row.editing {
  background: #f0fdf4;
}

/* Code Cell */
.affiliate-code-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.affiliate-code-badge {
  background: linear-gradient(135deg, #0b2740 0%, #1e3a5f 100%);
  color: #fff;
  padding: 0.35rem 0.75rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
}

.copy-link-btn {
  background: #f3f4f6;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  cursor: pointer;
  color: #6b7280;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.copy-link-btn:hover {
  background: #2c6b53;
  color: #fff;
}

/* Commission Badge */
.commission-badge {
  background: #fef3c7;
  color: #92400e;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
}

/* Revenue Value */
.revenue-value {
  font-weight: 600;
  color: #059669;
}

/* Orders Count */
.orders-count {
  font-weight: 600;
  color: #0b2740;
}

/* Status Badge */
.status-badge {
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
}

.status-badge.active {
  background: #ecfdf5;
  color: #065f46;
}

.status-badge.disabled {
  background: #fef2f2;
  color: #991b1b;
}

/* Contact Link */
.contact-link {
  color: #2563eb;
  text-decoration: none;
  font-size: 0.9rem;
}

.contact-link:hover {
  text-decoration: underline;
}

.no-contact {
  color: #9ca3af;
}

/* Actions */
.affiliate-actions {
  display: flex;
  gap: 0.5rem;
}

.action-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.action-btn.revenue {
  background: #eff6ff;
  color: #2563eb;
}

.action-btn.revenue:hover {
  background: #2563eb;
  color: #fff;
}

.action-btn.edit {
  background: #f3f4f6;
  color: #6b7280;
}

.action-btn.edit:hover {
  background: #fef3c7;
  color: #d97706;
}

/* Edit Row */
.affiliate-edit-input {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.85rem;
  width: 100%;
  box-sizing: border-box;
}

.affiliate-edit-input:focus {
  outline: none;
  border-color: #2c6b53;
  box-shadow: 0 0 0 3px rgba(44, 107, 83, 0.1);
}

.affiliate-edit-select {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 6px;
  font-size: 0.85rem;
  background: #fff;
  cursor: pointer;
}

.affiliate-edit-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.btn-sm {
  padding: 0.4rem 0.75rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 500;
  border: none;
  cursor: pointer;
  transition: all 0.2s;
}

.btn-sm.btn-primary {
  background: #2c6b53;
  color: #fff;
}

.btn-sm.btn-primary:hover {
  background: #245745;
}

.btn-sm.btn-secondary {
  background: #f3f4f6;
  color: #374151;
}

.btn-sm.btn-secondary:hover {
  background: #e5e7eb;
}

.btn-sm.btn-danger {
  background: #fef2f2;
  color: #dc2626;
}

.btn-sm.btn-danger:hover {
  background: #dc2626;
  color: #fff;
}

.affiliate-edit-error {
  color: #dc2626;
  font-size: 0.75rem;
  margin-top: 0.5rem;
}

/* Mobile responsive */
@media (max-width: 768px) {
  .affiliates-stats {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .affiliates-stat-card {
    padding: 1rem;
  }
  
  .affiliates-stat-card .stat-icon {
    width: 40px;
    height: 40px;
    font-size: 1rem;
  }
  
  .affiliates-stat-card .stat-value {
    font-size: 1.1rem;
  }
  
  .affiliates-stat-card .stat-label {
    font-size: 0.7rem;
  }
  
  .affiliates-section {
    padding: 1rem;
    overflow: hidden;
  }
  
  .affiliates-table-container {
    margin: 0 -1rem;
    padding: 0 1rem;
  }
}

@media (max-width: 480px) {
  .affiliates-stats {
    grid-template-columns: 1fr;
  }
  
  .affiliates-header {
    flex-direction: column;
    align-items: stretch;
  }
  
  .affiliates-header button {
    width: 100%;
    justify-content: center;
  }
}

/* Affiliate Form - New Design */
.affiliate-form {
  padding: 0;
}

.affiliate-form-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: #0b2740;
  margin: 0 0 1.25rem 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.affiliate-form-title i {
  color: #2c6b53;
}

.affiliate-form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}

.affiliate-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.affiliate-form-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.affiliate-form-input,
.affiliate-form-select {
  padding: 0.65rem 0.85rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
  transition: all 0.2s;
  background: #fff;
}

.affiliate-form-input:focus,
.affiliate-form-select:focus {
  outline: none;
  border-color: #2c6b53;
  box-shadow: 0 0 0 3px rgba(44, 107, 83, 0.1);
}

.affiliate-form-input::placeholder {
  color: #9ca3af;
}

.affiliate-form-hint {
  font-size: 0.75rem;
  color: #6b7280;
}

.affiliate-form-link-preview {
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  margin-bottom: 1rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: #6b7280;
  word-break: break-all;
}

.affiliate-form-link-preview i {
  color: #2c6b53;
  flex-shrink: 0;
}

.affiliate-form-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.affiliate-form-error {
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  color: #dc2626;
  font-size: 0.875rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Revenue Modal - New Design */
.revenue-modal {
  background: #fff;
  border-radius: 20px;
  max-width: 600px;
  width: 90%;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.revenue-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 1px solid #f3f4f6;
}

.revenue-modal-title-section {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.revenue-modal-code {
  background: linear-gradient(135deg, #0b2740 0%, #1e3a5f 100%);
  color: #fff;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 0.03em;
  display: inline-block;
  width: fit-content;
}

.revenue-modal-title {
  font-size: 1.25rem;
  font-weight: 600;
  color: #0b2740;
  margin: 0.5rem 0 0 0;
}

.revenue-modal-close {
  background: #f3f4f6;
  border: none;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6b7280;
  transition: all 0.2s;
}

.revenue-modal-close:hover {
  background: #e5e7eb;
  color: #374151;
}

.revenue-modal-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  padding: 1rem 1.5rem;
  background: #f9fafb;
}

.revenue-modal-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.revenue-stat-value {
  font-size: 1.25rem;
  font-weight: 700;
  color: #0b2740;
}

.revenue-stat-label {
  font-size: 0.75rem;
  color: #6b7280;
  margin-top: 0.25rem;
}

.revenue-modal-tabs {
  display: flex;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0;
}

.revenue-tab {
  padding: 0.5rem 1rem;
  border: none;
  background: #f3f4f6;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 500;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}

.revenue-tab:hover {
  background: #e5e7eb;
}

.revenue-tab.active {
  background: #2c6b53;
  color: #fff;
}

.revenue-modal-chart {
  padding: 1rem 1.5rem 1.5rem;
  flex: 1;
  min-height: 280px;
}

.revenue-chart-loading {
  height: 240px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9ca3af;
  font-size: 1.5rem;
}

@media (max-width: 480px) {
  .revenue-modal {
    width: 95%;
    max-height: 85vh;
  }
  
  .revenue-modal-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .revenue-modal-stat {
    flex-direction: row;
    justify-content: space-between;
    padding: 0.5rem 0;
    border-bottom: 1px solid #e5e7eb;
  }
  
  .revenue-modal-stat:last-child {
    border-bottom: none;
  }
  
  .revenue-stat-label {
    margin-top: 0;
    order: -1;
  }
  
  .revenue-modal-tabs {
    overflow-x: auto;
    padding-bottom: 0.5rem;
  }
  
  .revenue-tab {
    white-space: nowrap;
  }
}

/* ============================================
   END AFFILIATES DASHBOARD
   ============================================ */

.btn-primary {
  background: #2c6b53;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.btn-primary:hover {
  filter: brightness(0.95);
}
.btn-secondary {
  background: #eee;
  color: #333;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.btn-secondary:hover {
  filter: brightness(0.98);
}
.with-icon {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.tiny-icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: #555;
  font-size: 14px;
  padding: 4px;
  line-height: 1;
}
.btn-row {
  display: flex;
  gap: 10px;
}

.add-inner {
  position: absolute;
  left: 8px;
  right: 8px;
  top: 50%;
  /* start hidden slightly to the right and slide in toward the left when the pill expands
     (we anchor the widget at bottom-right so animation should originate from the right) */
  transform: translateY(-50%) translateX(22px);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: space-between;
  padding: 0 8px;
  opacity: 0;
  pointer-events: none;
  transform-origin: right center;
  /* fade then slide in; small delay makes the sequence feel like a scroll from the right */
  transition:
    opacity 180ms ease 70ms,
    transform 260ms cubic-bezier(0.2, 0.9, 0.2, 1);
}

.admin-input {
  padding: 8px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
  background: #fff;
  color: #111;
}
.admin-input:focus {
  border-color: #2c6b53;
  box-shadow: 0 0 0 2px rgba(44, 107, 83, 0.1);
}
.muted-note {
  font-size: 12px;
  color: #555;
  margin-bottom: 12px;
}
.mt-12 {
  margin-top: 12px;
}

.revenue-chart {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: 12px 4px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fafafa;
}
.revenue-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.revenue-bar {
  background: #2c6b53;
  width: 28px;
  border-radius: 4px;
  transition: height 0.25s ease;
}
.revenue-bar-value {
  font-size: 11px;
}
.modal-title {
  margin: 0;
}
.btn-danger {
  background: #b91c1c;
  color: #fff;
  border: none;
  padding: 10px 16px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
.btn-danger:hover {
  filter: brightness(0.95);
}
.error-text {
  color: #b00020;
  font-size: 12px;
}

.edit-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.edit-actions-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}
.modal-content {
  position: relative;
  background: #ffffff;
  border-radius: 14px;
  width: min(520px, 92vw);
  max-height: 82vh;
  padding: 20px 22px 18px;
  box-shadow: 0 18px 45px rgba(15, 23, 42, 0.22);
  display: flex;
  flex-direction: column;
  animation: modal-scalein 160ms ease-out;
}
.modal {
  background: #fff;
  padding: 24px;
  border-radius: 10px;
  width: min(640px, 90vw);
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.modal-section {
  margin: 12px 0;
}
.icon-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 20px;
  color: #555;
}

.filter-btn {
  margin-right: 8px;
  padding: 6px 10px;
  background: #eee;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 12px;
}
.filter-btn.is-active {
  background: #2c6b53;
  color: #fff;
}

.mini-bar-chart {
  display: flex;
  gap: 6px;
  align-items: flex-end;
  padding: 12px 4px;
  border: 1px solid #e5e5e5;
  border-radius: 8px;
  background: #fafafa;
}
.mini-bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}
.mini-bar {
  background: #2c6b53;
  width: 28px;
  border-radius: 4px;
}
.mini-bar-value {
  font-size: 11px;
}
.chart-container {
  height: 240px;
}

/* Secret affiliate revenue editor (hidden 5x click on Orders via Affiliates card) */
.secret-revenue-modal {
  background: radial-gradient(circle at top left, #fdf2ff 0, #ffffff 40%, #f0f9ff 100%);
  border: 1px solid #e5e7eb;
  border-radius: 16px;
  padding: 22px 22px 18px;
}

.secret-revenue-modal .modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

.secret-revenue-modal h3 {
  margin: 0;
  font-size: 1.1rem;
  font-weight: 700;
  color: #18375d;
}

.secret-revenue-modal .modal-body {
  padding-top: 6px;
}

.secret-hint {
  font-size: 0.85rem;
  line-height: 1.5;
  color: #4b5563;
  background: #f9fafb;
  border-radius: 10px;
  border: 1px dashed #d1d5db;
  padding: 8px 10px;
  margin-bottom: 12px;
}

.secret-revenue-modal .form-row {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 10px;
}

.secret-revenue-modal .form-row label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #374151;
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 14px;
}

@media (max-width: 640px) {
  .modal-content.secret-revenue-modal {
    width: 94vw;
    max-height: 88vh;
    padding: 18px 16px 14px;
  }

  .secret-revenue-modal h3 {
    font-size: 1rem;
  }
}

.affiliate-section .tiny-icon-btn {
  appearance: none;
  background: transparent;
  border: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.affiliate-section .tiny-icon-btn:hover {
  background: rgba(0, 0, 0, 0.06);
}
.affiliate-section .affiliate-link-btn {
  appearance: none;
  background: transparent;
  border: 0;
  color: #2c6b53;
  text-decoration: underline;
  padding: 0;
  font-size: 13px;
}
.affiliate-section .btn-primary {
  background: #2c6b53;
}
.affiliate-section .btn-secondary {
  background: #eee;
}
.affiliate-table tbody tr:nth-child(odd) {
  background: #fbfbfb;
}
.affiliate-table a {
  word-break: break-all;
}
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
}
.badge.is-active {
  background: #e6f4ee;
  color: #2c6b53;
}
.badge.is-disabled {
  background: #f9e8e8;
  color: #aa0606;
}
.sidebar {
  width: 92px;
  background: #fff;
  border-right: 1px solid #eee;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 18px 8px;
  gap: 18px;
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  z-index: 40;
  /* Allow the icons to scroll when the viewport is short (e.g. browser zoom,
     small laptops) instead of overflowing and clipping the bottom items. */
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: none; /* Firefox */
}

.sidebar::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

.sidebar-logo img {
  width: 48px;
  height: 48px;
  object-fit: contain;
  border-radius: 10px;
}

.sidebar-icons {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  align-items: center;
}

.sidebar-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  border: none;
  background: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  color: #18375d;
  font-size: 18px;
  transition:
    background 0.18s,
    transform 0.12s;
}

.sidebar-icon.is-active {
  background: #e6f4ee;
  color: #2c6b53;
}

.sidebar-icon:hover {
  background: #f4f8f6;
  transform: translateX(3px);
}

.sidebar-bottom {
  margin-top: auto;
  margin-bottom: 8px;
  padding-top: 8px;
}

/* Adapt spacing to the available height so all icons stay visible without
   clipping on short viewports / browser zoom. Falls back to scrolling. */
@media (max-height: 860px) {
  .sidebar { padding: 12px 8px; gap: 12px; }
  .sidebar-icons { gap: 10px; margin-top: 4px; }
}

@media (max-height: 720px) {
  .sidebar { padding: 10px 6px; gap: 8px; }
  .sidebar-logo img { width: 40px; height: 40px; }
  .sidebar-icons { gap: 7px; margin-top: 2px; }
  .sidebar-icon { width: 42px; height: 42px; font-size: 16px; border-radius: 10px; }
}

@media (max-height: 600px) {
  .sidebar-logo img { width: 34px; height: 34px; }
  .sidebar-icons { gap: 5px; }
  .sidebar-icon { width: 38px; height: 38px; font-size: 15px; }
}

.content-area {
  margin-left: 92px;
  padding: 28px;
  flex: 1;
  /* Flex items default to min-width:auto, which refuses to shrink below the
     intrinsic width of wide children (e.g. the affiliates table's min-width).
     min-width:0 lets it shrink so inner overflow-x:auto containers can scroll
     instead of blowing the layout out of the viewport when zoomed in. */
  min-width: 0;
  background: transparent;
  min-height: 100vh;
}

/* --- Responsive admin navigation: bottom bar on mobile --- */
.bottom-nav {
  display: none; /* enabled on small screens */
}

/* Hide bottom nav when modal is open */
body.modal-open .bottom-nav {
  display: none !important;
}

@media (max-width: 820px) {
  .sidebar {
    display: none;
  }

  .content-area {
    margin-left: 0;
    padding: 18px;
    /* reserve space for the bottom nav (plus safe-area) */
    padding-bottom: calc(86px + env(safe-area-inset-bottom, 0px));
  }

  .bottom-nav {
    display: block;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100vw;
    z-index: 2147483000; /* stay above all page content */
    background: #fff;
    border-top: 1px solid rgba(0, 0, 0, 0.10);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    box-shadow: 0 -10px 24px rgba(0, 0, 0, 0.08);
    transform: translateZ(0); /* reduce chances of flicker on mobile */
    /* defensive: prevent any layout rules from placing it in document flow */
    margin: 0;
    max-width: 100vw;
  }

  .bottom-nav-inner {
    display: flex;
    gap: 8px;
    align-items: center;
    padding: 10px 10px;
    height: 66px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
  }

  /* subtle scrollbar like the category navbar; doesn't become visually heavy */
  .bottom-nav-inner::-webkit-scrollbar {
    height: 6px;
  }
  .bottom-nav-inner::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.22);
    border-radius: 20px;
  }

  .bottom-nav-item {
    appearance: none;
    border: 0;
    background: transparent;
    color: rgba(0, 0, 0, 0.82);
    min-width: 72px;
    height: 54px;
    border-radius: 14px;
    padding: 6px 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    cursor: pointer;
    scroll-snap-align: start;
    flex: 0 0 auto;
    transition: background 160ms ease, color 160ms ease;
  }

  .bottom-nav-item:hover {
    background: rgba(0, 0, 0, 0.06);
  }

  .bottom-nav-item i {
    font-size: 18px;
    line-height: 1;
  }

  .bottom-nav-label {
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
  }

  .bottom-nav-item.is-active {
    background: #2563eb;
    color: #fff;
  }

  .bottom-nav-item:active {
    transform: translateY(1px);
  }

  .bottom-nav-item--logout {
    margin-left: 4px;
    background: rgba(0, 0, 0, 0.05);
  }
}

.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.locationsSection {
  width: 100%;
  padding: 72px 0 20px;
}

.locationsInner {
  max-width: 1220px;
  margin: 0 auto;
  padding: 0 20px;
}

.locationsTitle {
  font-size: 20px;
  color: #02344b;
  font-weight: 600;
  transition: color 0.3s ease-in-out;
  margin-top: -65px;
  display: flex;
  margin-bottom: 50px;
  align-items: center;
  justify-content: center;
}

.locationsGrid {
  display: flex;
  flex-direction: column;
}

.locationRow {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-template-areas: "text image";
  align-items: center;
}

.locationRowReverse {
  grid-template-areas: "image text";
}

.locationRowReverse .locationText .locationHeading {
  flex-direction: row-reverse;
}
.locationRowReverse .locationText .locationDesc {
  margin-left: 50px;
  max-width: none;
  text-align: right;
  text-wrap: balance;
}
.locationRowReverse .locationImage {
  justify-self: end;
}

.locationText {
  grid-area: text;
  color: #1f3f67;
}

.locationHeading {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.locationName {
  font-size: 18px;
  letter-spacing: 1.8px;
  font-weight: 600;
  color: #1c3e68;
}

.locationHeadingLine {
  height: 1px;
  width: 400px;
  max-width: 100%;
  background: #cbd7ea;
  display: block;
}

.locationsGrid .locationRow:nth-child(2) .locationHeadingLine {
  width: 470px;
}

.locationsGrid .locationRow:nth-child(3) .locationHeadingLine {
  width: 355px;
}

.locationDesc {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.8;
  color: #234267;
  max-width: 520px;
}

.locationImage img {
  width: 630px;
  height: 400px;
  display: block;
}

@media (max-width: 1030px) {
  /* Layout adjustments for tablet and mobile widths (now applied at 1030px)
     This merges the previous 1024px and 640px mobile rules so the
     locations section uses the mobile-friendly presentation at <=1030px. */

  .locationsSection {
    padding: 0;
    margin-bottom: 30px;
  }

  .locationsGrid {
    gap: 52px;
    align-items: center;
  }

  .locationRow,
  .locationRowReverse {
    grid-template-columns: 1fr;
    /* mobile stacking: text above image */
    grid-template-areas:
      "text"
      "image";
  }

  .locationText {
    /* allow full-width stacking behavior */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    width: 100vw;
    max-width: none;
  }

  .locationsTitle {
    font-size: 20px;
    margin-bottom: 42px;
    margin-top: 0px;
  }

  .locationHeading {
    gap: 10px;
    width: 100%;
    gap: 0;
    justify-content: center;
    position: relative;
  }

  .locationHeading::before,
  .locationHeading::after {
    content: "";
    flex: 1;
    height: 1px;
    background: #cbd7ea;
    margin: 0 14px;
  }

  .locationHeadingLine {
    width: 0px;
    min-width: 0px;
  }

  .locationDesc {
    text-align: center;
    width: 90vw;
    max-width: none;
    font-size: 13px;
    line-height: 1.7;
    margin: 0 0 12px;
  }

  .locationImage {
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .locationImage img {
    height: 240px;
    width: 90vw;
    border-radius: 15px;
    object-fit: cover;
  }

  .locationRowReverse .locationImage {
    justify-self: center;
  }

  /* Ensure reverse rows display centered text on mobile */
  .locationRowReverse .locationText .locationDesc {
    max-width: none;
    margin-left: 0;
    text-align: center;
  }

  .locationRowReverse .locationText .locationHeading {
    flex-direction: row;
  }

  .locationsInner {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
  }

  .locationsGrid .locationRow:nth-child(2) .locationHeadingLine,
  .locationsGrid .locationRow:nth-child(3) .locationHeadingLine {
    width: 0px;
    min-width: 0px;
  }
}

@media (max-width: 1550px) {
  .second_container {
    margin-top: 0px;
  }
}

/* =====================================================
   RESPONSIVE DASHBOARD COMPONENTS
   ===================================================== */

/* --- Driver Form Card (CalendarUsers) --- */
.driver-form-card {
  background: #fff;
  padding: 1.25rem;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  max-width: 420px;
  width: 100%;
}

/* Database section add-entry form */
.driver-form-card.db-form-grid {
  max-width: 920px;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem 1rem;
  align-items: end;
}

.db-form-field {
  min-width: 0;
}

.db-form-grid .driver-form-label {
  margin-top: 0;
}

.db-form-submit {
  grid-column: 1 / -1;
  margin-top: 0.5rem;
}

@media (max-width: 720px) {
  .driver-form-card.db-form-grid {
    grid-template-columns: 1fr;
  }
}

.driver-form-label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  margin-top: 12px;
  color: #222;
}

.driver-form-label:first-child {
  margin-top: 0;
}

.driver-form-input {
  width: 100%;
  max-width: 100%;
  box-sizing: border-box;
  margin-right: 0;
  padding: 0.5em 0.85em;
  font-size: 0.95em;
}

.driver-color-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.driver-color-picker {
  width: 44px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 10px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.driver-color-picker-sm {
  width: 40px;
  height: 36px;
  padding: 0;
  border: 1px solid rgba(0,0,0,0.15);
  border-radius: 8px;
  background: #fff;
  cursor: pointer;
  flex-shrink: 0;
}

.driver-form-submit {
  margin-top: 12px;
}

.driver-form-msg {
  margin-top: 12px;
  font-size: 0.95rem;
}

.driver-form-msg.error {
  color: #c0392b;
}

.driver-form-msg.success {
  color: #1a7f4c;
}

/* --- Driver Table --- */
.driver-table {
  max-width: 1200px;
}

.driver-table th,
.driver-table td {
  padding: 0.75rem 0.5rem;
  font-size: 0.95rem;
}

.driver-edit-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
      justify-content: center;
}

.driver-color-dot {
  width: 16px;
  height: 16px;
  border-radius: 4px;
  border: 1px solid rgba(0,0,0,0.15);
  flex-shrink: 0;
}

.driver-color-code {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 0.9rem;
}

/* --- Driver Cards (Mobile) --- */
.driver-cards {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.driver-card {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.07);
  padding: 1rem;
}

.driver-card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.driver-card-email {
  font-weight: 600;
  color: #0b2740;
  word-break: break-all;
}

.driver-card-row {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}

.driver-card-label {
  font-weight: 600;
  color: #6b7280;
  font-size: 0.9rem;
}

.driver-edit-row-mobile {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  width: 100%;
}

.driver-edit-row-mobile .orders-search {
  width: 100%;
  max-width: none;
}

.driver-edit-btns {
  display: flex;
  gap: 0.5rem;
}

.driver-card-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}

.driver-card-actions .btn-secondary,
.driver-card-actions .btn-danger {
  flex: 1;
  min-width: 120px;
}

/* Small button variants */
.btn-sm {
  padding: 0.4em 0.8em;
  font-size: 0.9rem;
}

/* --- Order Modal Responsive --- */
.order-modal-overlay {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(10, 18, 32, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 22000;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
  overflow: hidden;
  overscroll-behavior: contain;
}

.order-modal-card {
  background: #fff;
  border-radius: 12px;
  width: 100%;
  max-width: 920px;
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
  box-shadow: 0 6px 32px rgba(20, 30, 40, 0.16);
  padding: 0 0 24px 0;
  position: relative;
  border: 1px solid #e6e8eb;
}

.order-modal-close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: none;
  background: #fff;
  box-shadow: 0 1px 4px rgba(2,52,75,0.08);
  font-size: 20px;
  cursor: pointer;
  color: #6a82fb;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
}

.order-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px 24px 12px 24px;
  flex-wrap: wrap;
  gap: 12px;
}

.order-modal-title-wrap {
  display: flex;
  flex-direction: column;
}

.order-modal-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: #0f1724;
}

.order-modal-ref {
  color: #6b7280;
  margin-top: 4px;
  font-size: 0.9rem;
}

.order-modal-header-actions {
  display: flex;
  gap: 8px;
}

.order-modal-meta {
  padding: 0 24px 12px 24px;
  display: flex;
  gap: 18px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.order-modal-meta-item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.order-modal-meta-label {
  color: #2b3b4b;
  font-weight: 600;
  opacity: 0.9;
  font-size: 0.9rem;
}

.order-modal-section {
  margin-top: 12px;
  padding: 0 24px;
}

.order-modal-section-title {
  margin: 0 0 12px 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1a2340;
}

.order-modal-details-grid {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
}

.order-modal-details-box {
  background: #fbfdff;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #eef2f7;
}

.order-modal-items-box {
  background: #fff;
  padding: 14px;
  border-radius: 8px;
  border: 1px solid #eef2f7;
}

.order-modal-details-heading {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 8px;
}

.order-modal-details-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
}

.order-modal-detail-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  gap: 8px;
}

.order-modal-detail-label {
  color: #2b3b4b;
  font-weight: 600;
}

.order-modal-detail-value {
  color: #334155;
}

.order-modal-items-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.order-modal-items-total {
  font-size: 13px;
  color: #64748b;
}

.order-modal-items-list {
  padding-left: 16px;
  margin: 0;
}

.order-modal-item {
  margin-bottom: 8px;
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px;
}

.order-modal-item-qty {
  font-weight: 700;
  margin-right: 4px;
}

.order-modal-item-desc {
  color: #18375d;
}

.order-modal-item-price {
  margin-left: auto;
  color: #374151;
}

@media (max-width: 720px) {
  .order-modal-card {
    max-width: 100%;
    border-radius: 0;
    max-height: 100vh;
    height: 100vh;
  }
  
  .order-modal-overlay {
    padding: 0;
    align-items: flex-start;
    overflow: hidden;
  }
  
  .order-modal-header {
    padding: 16px 16px 12px 16px;
  }
  
  .order-modal-meta {
    padding: 0 16px 12px 16px;
    flex-direction: column;
    gap: 12px;
  }
  
  .order-modal-section {
    padding: 0 16px;
    padding-bottom: 24px;
  }
  
  .order-modal-details-grid {
    grid-template-columns: 1fr;
  }
  
  .order-modal-detail-row {
    grid-template-columns: 1fr;
    gap: 2px;
  }
}

/* --- Accept Order Modal --- */
.accept-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.32);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.accept-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(20, 30, 40, 0.13);
  padding: 28px 24px 24px 24px;
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.accept-modal-close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #18375d;
}

.accept-modal-title {
  margin: 0 0 16px 0;
  color: #18375d;
  font-size: 1.3rem;
}

.accept-modal-details {
  font-size: 15px;
  color: #233044;
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.accept-modal-warning {
  background: #fff7ed;
  color: #b45309;
  border: 1px solid rgba(180,83,9,0.1);
  padding: 12px;
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 0.95rem;
}

.accept-modal-field {
  margin-bottom: 16px;
}

.accept-modal-field label {
  display: block;
  font-weight: 600;
  margin-bottom: 8px;
  color: #222;
}

.accept-modal-field .orders-select {
  width: 100%;
}

.accept-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 20px;
}

/* --- Manual order modal (wider, two-column layout) --- */
.manual-order-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(20, 30, 40, 0.13);
  padding: 24px 24px 20px 24px;
  width: 100%;
  max-width: 880px;
  max-height: 90vh;
  position: relative;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.manual-order-header {
  margin-bottom: 12px;
}

.manual-order-subtitle {
  margin: 4px 0 0;
  font-size: 0.9rem;
  color: #6b7280;
}

.manual-order-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 4px;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.05fr);
  gap: 20px 28px;
}

.manual-order-section {
  min-width: 0;
}

.manual-order-section-left {
  grid-column: 1 / 2;
}

.manual-order-section-right {
  grid-column: 2 / 3;
}

.manual-order-section-title {
  margin: 0 0 8px 0;
  font-size: 0.98rem;
  font-weight: 600;
  color: #111827;
}

.manual-order-section-header {
  margin-bottom: 8px;
}

.manual-order-section-subtitle {
  margin: 0;
  font-size: 0.85rem;
  color: #6b7280;
}

.manual-order-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 20px;
}

.manual-order-grid-span {
  grid-column: 1 / -1;
}

.manual-order-notes {
  grid-column: 1 / 2;
}

.manual-order-notes-textarea {
  width: 100%;
}

.manual-order-items {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 260px;
  overflow-y: auto;
  padding-right: 4px;
}

.manual-order-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 90px auto;
  gap: 8px;
  align-items: center;
}

.manual-order-row .orders-search {
  max-width: 100%;
}

.manual-order-item-input {
  font-size: 0.94rem;
}

.manual-order-summary {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.manual-order-total {
  font-weight: 600;
  font-size: 0.98rem;
}

.manual-order-error {
  margin-top: 12px;
}

.manual-order-footer {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid #e5e7eb;
}

@media (max-width: 480px) {
  .accept-modal {
    padding: 20px 16px;
    max-width: 100%;
    border-radius: 0;
    max-height: 100vh;
  }
  
  .accept-modal-overlay {
    padding: 0;
  }
  
  .accept-modal-actions {
    flex-direction: column;
  }
  
  .accept-modal-actions button {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .manual-order-modal {
    max-width: 100%;
    width: 100%;
    border-radius: 0;
    height: 100vh;
    max-height: 100vh;
    margin: 0;
    display: flex;
    flex-direction: column;
  }

  .manual-order-body {
    grid-template-columns: minmax(0, 1fr);
    max-height: none;
    overflow-y: auto;
    padding-right: 0;
  }

  .manual-order-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .manual-order-footer {
    flex-direction: column;
    gap: 8px;
  }

  /* Let the whole sheet scroll naturally on mobile instead of a tall inner scroller */
  .accept-modal-overlay {
    align-items: stretch;
    padding: 0;
    overflow-y: hidden;
  }
}

/* --- Calendar Order Modal --- */
.calendar-modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.32);
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}

.calendar-modal {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(20, 30, 40, 0.13);
  padding: 24px;
  width: 100%;
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
}

.calendar-modal-close {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  font-size: 20px;
  cursor: pointer;
  color: #18375d;
}

.calendar-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.calendar-modal-title {
  margin: 0;
  font-size: 1.3rem;
  color: #18375d;
}

.calendar-modal-driver-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.35em 0.75em;
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid rgba(6,95,70,0.1);
  border-radius: 999px;
  font-weight: 600;
  font-size: 0.9rem;
}

.calendar-modal-driver-dot {
  width: 10px;
  height: 10px;
  border-radius: 999px;
}

.calendar-modal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 20px;
}

.calendar-modal-left,
.calendar-modal-right {
  background: #fafafa;
  border: 1px solid rgba(0,0,0,0.06);
  border-radius: 12px;
  padding: 16px;
}

.calendar-modal-right {
  background: #fff;
}

.calendar-modal-section-title {
  font-weight: 700;
  margin-bottom: 12px;
  color: #18375d;
}

.calendar-modal-info-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 0.95rem;
}

.calendar-modal-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}

.calendar-modal-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.calendar-modal-field label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
}

.calendar-modal-field .orders-search,
.calendar-modal-field .orders-select {
  width: 100%;
  box-sizing: border-box;
  padding: 0.55em 0.85em;
}

.calendar-modal-textarea {
  resize: vertical;
  min-height: 80px;
}

.calendar-modal-error {
  background: #fff1f2;
  color: #9f1239;
  padding: 10px;
  border-radius: 8px;
  margin-top: 12px;
  font-size: 0.95rem;
}

.calendar-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* --- Driver notes --- */
.calendar-modal-notes-msg {
  font-size: 0.9rem;
  color: #15803d;
}

/* --- Order images --- */
.calendar-modal-images {
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid #e9e9ee;
}

.calendar-modal-images-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.calendar-image-thumb {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e9e9ee;
  background: #f3f4f6;
}

.calendar-image-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.calendar-image-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #9ca3af;
  font-size: 1.2rem;
}

.calendar-image-delete {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: none;
  border-radius: 50%;
  background: rgba(11, 19, 36, 0.72);
  color: #fff;
  font-size: 0.7rem;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.calendar-image-delete:hover {
  background: #b91c1c;
}

.calendar-image-add {
  aspect-ratio: 1 / 1;
  border: 1.5px dashed #c7cbd4;
  border-radius: 8px;
  background: #fafbfc;
  color: #4b5563;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.calendar-image-add:hover:not(:disabled) {
  border-color: #0b1324;
  color: #0b1324;
}

.calendar-image-add:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

@media (max-width: 720px) {
  .calendar-modal {
    padding: 20px 16px;
    max-width: 100%;
    border-radius: 0;
    max-height: 100vh;
  }
  
  .calendar-modal-overlay {
    padding: 0;
  }
  
  .calendar-modal-grid {
    grid-template-columns: 1fr;
  }
  
  .calendar-modal-form-grid {
    grid-template-columns: 1fr;
  }
  
  .calendar-modal-actions {
    flex-direction: column;
  }
  
  .calendar-modal-actions button {
    width: 100%;
  }
}

/* --- Calendar Component --- */
.calendar-admin {
  padding: 1rem 0;
}

.calendar-wrap {
  background: #fff;
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
  overflow: hidden;
}

/* FullCalendar mobile adjustments */
@media (max-width: 820px) {
  .calendar-wrap {
    padding: 8px;
    border-radius: 8px;
  }
  
  .calendar-wrap .fc-toolbar {
    flex-direction: column;
    gap: 10px;
  }
  
  .calendar-wrap .fc-toolbar-chunk {
    display: flex;
    justify-content: center;
  }
  
  .calendar-wrap .fc-toolbar-title {
    font-size: 1.1rem !important;
  }
  
  .calendar-wrap .fc-button {
    padding: 6px 10px !important;
    font-size: 0.85rem !important;
  }
  
  .calendar-wrap .fc-event {
    font-size: 0.8rem;
  }
}

/* --- Affiliates Responsive --- */
@media (max-width: 900px) {
  .affiliate-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  
  .affiliate-table {
    min-width: 800px;
  }
}

.admin-card {
  background: #fff;
  border: 1px solid #e5e7eb;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}

.admin-card-title {
  margin: 0 0 16px 0;
  font-size: 1.1rem;
  color: #18375d;
}

.admin-form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 12px;
}

.admin-form-label {
  font-weight: 600;
  font-size: 0.9rem;
  color: #333;
}

@media (max-width: 600px) {
  .admin-card {
    padding: 16px;
  }
  
  .btn-row {
    flex-direction: column;
  }
  
  .btn-row button {
    width: 100%;
  }
}

/* --- Content Editor Responsive --- */
@media (max-width: 900px) {
  .content-inputs {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 600px) {
  .content-row {
    padding: 10px;
  }
  
  .content-key {
    font-size: 0.9rem;
  }
  
  .content-inputs textarea {
    min-height: 60px;
  }
}

/* --- Menu Editor Additional Responsive --- */
@media (max-width: 820px) {
  .menu-editor-section {
    padding: 12px;
  }
  
  .i18n-stack {
    flex-direction: column;
    gap: 12px;
  }
  
  .i18n-stack .i18n-field {
    width: 100%;
  }
  
  .i18n-field input,
  .i18n-field textarea,
  .i18n-field .item-name,
  .i18n-field .item-desc {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  .menu-editor-item .item-name,
  .menu-editor-item .item-desc,
  .menu-editor-item .item-price {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  .section-desc-row {
    grid-template-columns: 1fr;
  }
  
  .section-desc-row textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
  
  .menu-item-meta {
    grid-template-columns: 1fr;
  }
  
  .menu-item-allergens-row {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .menu-item-allergens-row .allergen-picker {
    width: 100%;
  }
  
  .menu-reorder-controls {
    width: 100%;
    justify-content: flex-start;
  }
  
  .menu-editor-actions {
    flex-direction: column;
    align-items: stretch;
  }
  
  .menu-editor-actions button {
    width: 100%;
  }
  
  .allergen-legend-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .menu-editor-section .section-header {
    flex-direction: column;
  }
  
  .menu-editor-section .section-header .i18n-stack {
    grid-template-columns: 1fr;
    width: 100%;
  }
  
  .menu-editor-section .section-header input {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box;
  }
}

/* --- General Dashboard Mobile Improvements --- */
@media (max-width: 820px) {
  .orders-admin-header {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
  }
  
  .orders-controls {
    flex-direction: column;
    width: 100%;
  }
  
  .orders-controls .orders-search {
    width: 100%;
    max-width: none;
    min-width: 0;
  }
  
  .orders-controls .orders-select {
    width: 100%;
  }
  
  .orders-controls .btn-primary {
    width: 100%;
  }
  
  .orders-title {
    font-size: 1.5rem;
  }
  
  .driver-form-card {
    max-width: 100%;
  }
}

/* --- Ensure proper scrolling on mobile admin --- */
@media (max-width: 820px) {
  .content-area {
    overflow-x: hidden;
  }
  
  .dashboard-content {
    overflow-x: hidden;
  }
  
  .orders-admin {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* =====================================================
   ANALYTICS DASHBOARD STYLES
   ===================================================== */
.analytics-dashboard {
  padding: 0;
  max-width: 1400px;
}

.analytics-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
  gap: 1rem;
}

.analytics-header h2 {
  margin: 0;
  font-size: 1.5rem;
  font-weight: 700;
  color: #1a1a1a;
}

.analytics-loading,
.analytics-error {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 3rem;
  font-size: 1rem;
  color: #666;
}

.analytics-error {
  color: #dc3545;
  flex-direction: column;
}

.analytics-error button {
  margin-top: 1rem;
}

/* Analytics Grid */
.analytics-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1.5rem;
}

.analytics-grid.small {
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.75rem;
}

/* Analytics Cards */
.analytics-card {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  position: relative;
  transition: box-shadow 0.2s ease, transform 0.2s ease;
}

.analytics-card:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  transform: translateY(-2px);
}

.analytics-card.primary {
  border-left: 4px solid #18375d;
}

.analytics-card.success {
  border-left: 4px solid #28a745;
}

.analytics-card.warning {
  border-left: 4px solid #ffc107;
}

.analytics-card.alert {
  border-left: 4px solid #dc3545;
  background: linear-gradient(135deg, #fff5f5 0%, #fff 100%);
}

.analytics-card.mini {
  padding: 1rem;
  flex-direction: column;
  align-items: flex-start;
}

.analytics-card.mini.ga {
  border-left: 4px solid #4285f4;
  background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
}

.card-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #f5f5f5;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
  color: #666;
  margin-bottom: 0.5rem;
}

.analytics-card.primary .card-icon {
  background: #e8edf3;
  color: #18375d;
}

.analytics-card.success .card-icon {
  background: #e8f5e9;
  color: #28a745;
}

.analytics-card.warning .card-icon {
  background: #fff8e1;
  color: #ffc107;
}

.analytics-card.alert .card-icon {
  background: #ffebee;
  color: #dc3545;
}

.card-content {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  flex: 1;
}

.card-label {
  font-size: 0.85rem;
  color: #666;
  font-weight: 500;
}

.card-value {
  font-size: 1.75rem;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.2;
}

.analytics-card.mini .card-value {
  font-size: 1.35rem;
}

.card-sub {
  font-size: 0.8rem;
  color: #888;
}

.mini-chart {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  opacity: 0.8;
}

/* Analytics Sections */
.analytics-section {
  background: #fff;
  border: 1px solid #e5e5e5;
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
}

.analytics-section.full-width {
  grid-column: 1 / -1;
}

.analytics-section h3 {
  margin: 0 0 1rem 0;
  font-size: 1.1rem;
  font-weight: 600;
  color: #1a1a1a;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.analytics-section h3 i {
  color: #18375d;
}

/* Analytics Columns Layout */
.analytics-columns {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1rem;
}

@media (max-width: 900px) {
  .analytics-columns {
    grid-template-columns: 1fr;
  }
}

/* Analytics Tables */
.analytics-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.9rem;
}

.analytics-table th,
.analytics-table td {
  padding: 0.75rem 0.5rem;
  text-align: left;
  border-bottom: 1px solid #f0f0f0;
}

.analytics-table th {
  font-weight: 600;
  color: #666;
  font-size: 0.8rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.analytics-table tbody tr:hover {
  background: #fafafa;
}

.analytics-table .rank {
  width: 30px;
  color: #888;
  font-weight: 600;
}

.analytics-table .item-name {
  font-weight: 500;
}

.analytics-table .qty,
.analytics-table .count {
  font-weight: 600;
  color: #1a1a1a;
}

.analytics-table .revenue {
  font-weight: 600;
  color: #28a745;
}

.analytics-table .percent {
  color: #666;
}

.analytics-table .avg {
  color: #666;
}

/* Agent Badge */
.agent-badge {
  display: inline-flex;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #18375d;
  color: #fff;
  font-weight: 600;
  font-size: 0.8rem;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}

/* Affiliate Badges */
.affiliate-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: #e3f2fd;
  color: #1976d2;
  border-radius: 4px;
  font-weight: 600;
  font-size: 0.85rem;
}

.direct-badge {
  display: inline-block;
  padding: 0.25rem 0.6rem;
  background: #f5f5f5;
  color: #666;
  border-radius: 4px;
  font-weight: 500;
  font-size: 0.85rem;
}

/* Status Bars */
.status-bars {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.status-bar {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}

.status-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.status-name {
  font-weight: 500;
  color: #333;
  font-size: 0.9rem;
}

.status-count {
  font-weight: 600;
  color: #1a1a1a;
}

.status-progress {
  height: 8px;
  background: #f0f0f0;
  border-radius: 4px;
  overflow: hidden;
}

.status-fill {
  height: 100%;
  border-radius: 4px;
  transition: width 0.3s ease;
}

.status-fill.queued {
  background: linear-gradient(90deg, #ffc107, #ffca28);
}

.status-fill.accepted {
  background: linear-gradient(90deg, #28a745, #34ce57);
}

.status-fill.refunded {
  background: linear-gradient(90deg, #dc3545, #e35d6a);
}

/* Simple Bar Chart */
.chart-container {
  padding: 1rem 0;
}

.simple-bar-chart {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  height: 200px;
  gap: 4px;
  padding: 0 0.5rem;
}

.bar-group {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 60px;
  height: 100%;
}

.bar {
  width: 100%;
  background: linear-gradient(180deg, #18375d 0%, #122d4d 100%);
  border-radius: 4px 4px 0 0;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 4px;
  min-height: 4px;
  position: relative;
  cursor: pointer;
  transition: opacity 0.2s;
}

.bar:hover {
  opacity: 0.85;
}

.bar-value {
  font-size: 0.65rem;
  font-weight: 600;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0,0,0,0.3);
  white-space: nowrap;
  overflow: hidden;
}

.bar-label {
  font-size: 0.7rem;
  color: #888;
  margin-top: 4px;
  white-space: nowrap;
}

/* GA Setup Instructions */
.ga-setup-note {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #f0f7ff;
  border-radius: 8px;
  margin-top: 1rem;
  font-size: 0.9rem;
  color: #1976d2;
}

.ga-setup-note i {
  margin-top: 2px;
}

.ga-setup-link {
  color: #1565c0;
  text-decoration: underline;
  margin-left: 4px;
}

.ga-instructions {
  font-size: 0.9rem;
  line-height: 1.6;
  color: #444;
}

.ga-instructions ol {
  padding-left: 1.5rem;
  margin: 1rem 0;
}

.ga-instructions li {
  margin-bottom: 1rem;
}

.ga-instructions ul {
  margin-top: 0.5rem;
  padding-left: 1.5rem;
}

.ga-instructions ul li {
  margin-bottom: 0.35rem;
}

.ga-instructions code {
  background: #f5f5f5;
  padding: 0.15rem 0.4rem;
  border-radius: 4px;
  font-family: 'Monaco', 'Consolas', monospace;
  font-size: 0.85em;
}

.ga-instructions pre {
  background: #1a1a1a;
  color: #e0e0e0;
  padding: 1rem;
  border-radius: 8px;
  overflow-x: auto;
  margin: 0.75rem 0;
}

.ga-instructions pre code {
  background: none;
  padding: 0;
  color: #4caf50;
}

.ga-note {
  display: flex;
  gap: 0.75rem;
  padding: 1rem;
  background: #fff8e1;
  border-radius: 8px;
  margin-top: 1.5rem;
  color: #8d6e00;
}

.ga-note i {
  color: #ffc107;
  margin-top: 2px;
}

.ga-note.warning {
  background: #fff3e0;
  color: #e65100;
}

.ga-note.warning i {
  color: #ff9800;
}

.ga-success-note {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: #e8f5e9;
  border-radius: 8px;
  margin-top: 1rem;
  color: #2e7d32;
  font-size: 0.9rem;
}

.ga-success-note i {
  color: #4caf50;
}

.ga-loading {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 2rem;
  color: #666;
}

.ga-current-config {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 1rem;
  background: #e3f2fd;
  border-radius: 8px;
  margin-bottom: 1.5rem;
  color: #1565c0;
  font-size: 0.9rem;
}

.ga-current-config i {
  color: #2196f3;
  margin-top: 2px;
}

/* No Data State */
.no-data {
  color: #888;
  font-style: italic;
  text-align: center;
  padding: 2rem;
}

/* Analytics Footer */
.analytics-footer {
  display: flex;
  justify-content: flex-end;
  padding: 1rem 0;
  font-size: 0.8rem;
  color: #888;
}

/* Button variations */
.btn-sm {
  padding: 0.4rem 0.8rem;
  font-size: 0.85rem;
}

.btn-secondary {
  background: #f5f5f5;
  color: #333;
  border: 1px solid #ddd;
  padding: 0.5rem 1rem;
  border-radius: 8px;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.btn-secondary:hover {
  background: #e8e8e8;
  border-color: #ccc;
}

.btn-secondary:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* Mobile Responsive */
@media (max-width: 768px) {
  .analytics-header {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .analytics-grid {
    grid-template-columns: 1fr;
  }
  
  .analytics-grid.small {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .card-value {
    font-size: 1.5rem;
  }
  
  .analytics-card.mini .card-value {
    font-size: 1.2rem;
  }
  
  .simple-bar-chart {
    height: 150px;
  }
  
  .bar-value {
    display: none;
  }
  
  .analytics-table {
    font-size: 0.8rem;
  }
  
  .analytics-table th,
  .analytics-table td {
    padding: 0.5rem 0.25rem;
  }
  
  .agent-badge {
    width: 24px;
    height: 24px;
    font-size: 0.7rem;
  }
}

@media (max-width: 480px) {
  .analytics-grid.small {
    grid-template-columns: 1fr;
  }
  
  .analytics-card {
    padding: 1rem;
  }
  
  .analytics-section {
    padding: 1rem;
  }
}

/* ═══════════════════════════════════════════════════════
   ADMIN SETTINGS PAGE
   ═══════════════════════════════════════════════════════ */

.settings-page {
  padding: 1.5rem;
  max-width: 900px;
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.settings-error-msg {
  color: #ef4444;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.5rem 0;
}

.settings-saved-text {
  color: #22c55e;
  font-size: 0.8rem;
  font-weight: 600;
  margin-left: 0.5rem;
  animation: savedFadeIn 0.25s ease;
}

@keyframes savedFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.settings-section {
  background: #fff;
  border-radius: 14px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.settings-section h3 {
  font-size: 1.15rem;
  color: #0a2540;
  margin: 0 0 0.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.settings-section h3 i {
  color: #18375d;
}

.settings-hint {
  color: #6b7280;
  font-size: 0.85rem;
  margin: 0 0 1rem;
}

/* ── Settings Calendar ── */
.settings-calendar {
  max-width: 420px;
  margin-bottom: 1rem;
}

.cal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}

.cal-month-label {
  font-weight: 700;
  font-size: 1rem;
  color: #0a2540;
}

.cal-nav-btn {
  background: #e6eff4;
  border: none;
  border-radius: 8px;
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #0a2540;
  font-size: 0.85rem;
  transition: background 0.2s;
}

.cal-nav-btn:hover {
  background: #18375d;
  color: #fff;
}

.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  margin-bottom: 4px;
}

.cal-weekday {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #6b7280;
  padding: 4px 0;
}

.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.cal-cell {
  aspect-ratio: 1;
  border: none;
  border-radius: 8px;
  background: #f3f6f9;
  font-size: 0.85rem;
  font-weight: 600;
  color: #0a2540;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}

.cal-cell:hover:not(.past):not(.empty) {
  background: #18375d;
  color: #fff;
}

.cal-cell.blocked {
  background: #ef4444;
  color: #fff;
}

.cal-cell.blocked:hover:not(.past) {
  background: #dc2626;
}

.cal-cell.past {
  opacity: 0.35;
  cursor: not-allowed;
}

.cal-cell.empty {
  background: transparent;
  cursor: default;
}

/* ── Quick Add ── */
.settings-quick-add {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 1rem;
}

.settings-quick-add input[type="date"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
}

/* ── Blocked dates list ── */
.blocked-dates-list h4 {
  font-size: 0.9rem;
  color: #0a2540;
  margin: 0.5rem 0;
}

.blocked-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.blocked-tag {
  background: #fef2f2;
  color: #ef4444;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.blocked-tag button {
  background: none;
  border: none;
  cursor: pointer;
  color: #ef4444;
  font-size: 0.75rem;
  padding: 0;
  display: flex;
}

.blocked-tag button:hover {
  color: #b91c1c;
}

/* ── Buttons ── */
.btn-add {
  background: #2c6b53;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-weight: 600;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.2s;
  white-space: nowrap;
}

.btn-add:hover:not(:disabled) {
  background: #122d4d;
}

.btn-add:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-remove {
  background: #fef2f2;
  color: #ef4444;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 0.5rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}

.btn-remove:hover {
  background: #ef4444;
  color: #fff;
}

/* ── Cities ── */
.cities-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.city-row,
.city-add-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}

.city-name-input {
  flex: 1;
  min-width: 150px;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
}

.city-date-wrapper {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.city-date-wrapper label {
  font-size: 0.8rem;
  color: #6b7280;
  white-space: nowrap;
}

.city-date-wrapper input[type="date"] {
  padding: 0.5rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
}

.btn-save-cities {
  background: #0a2540;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.6rem 1.25rem;
  font-weight: 600;
  font-size: 0.9rem;
  cursor: pointer;
  transition: background 0.2s;
  margin-top: 0.5rem;
}

.btn-save-cities:hover:not(:disabled) {
  background: #163a5e;
}

.btn-save-cities:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* TVA rate input row */
.tva-rate-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 0.75rem;
}

.tva-rate-input {
  width: 100px;
  padding: 0.45rem 0.75rem;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 1rem;
  outline: none;
  transition: border-color 0.2s;
}

.tva-rate-input:focus {
  border-color: #18375d;
}

.tva-rate-symbol {
  font-weight: 700;
  font-size: 1.1rem;
  color: #18375d;
}

/* Affiliate table: TVA header note */
.tva-header-note {
  font-size: 0.7rem;
  font-weight: 400;
  color: #9ca3af;
  display: block;
}

/* Affiliate table: Amount Due column */
.commission-due-value {
  display: block;
  font-weight: 700;
  color: #b45309;
}

.commission-due-formula {
  display: block;
  font-size: 0.68rem;
  color: #9ca3af;
  margin-top: 0.1rem;
}

.settings-loading {
  padding: 2rem;
  text-align: center;
  color: #6b7280;
}

@media (max-width: 600px) {
  .settings-page {
    padding: 1rem;
  }

  .settings-section {
    padding: 1rem;
  }

  .city-row,
  .city-add-row {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-quick-add {
    flex-direction: column;
    align-items: stretch;
  }
}

.checkout-modal-right select option:disabled,
.form-box select option:disabled {
  color: #9ca3af;
  font-style: italic;
}

.blocked-date-msg {
  display: block;
  color: #ef4444;
  font-size: 0.78rem;
  font-weight: 600;
  margin-top: 4px;
  animation: blockedFadeIn 0.25s ease;
}

@keyframes blockedFadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Order page banner box ───────────────────────────────────────────────── */
@keyframes open247-dot {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.6; }
}
.order-hero-title-row {
  margin-top: 100px;
  margin-bottom: 10px;
}
.order-banner-box {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: calc(100% - 48px);
  max-width: 1180px;
  margin: 0 auto 0;
  padding: 10px 28px;
  background: #8dd58f73;
  border-radius: 999px;
  border: 1px solid rgba(52, 211, 153, 0.25);
  font-size: 15px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #2d6a4f;
  margin-top: -7px;
  text-align: center;
  white-space: normal;
  word-break: break-word;
  overflow-wrap: break-word;
  text-transform: uppercase;
  cursor: default;
  user-select: none;
  box-sizing: border-box;
  box-shadow: 0 2px 8px rgba(20, 30, 40, 0.05);
}
@media (max-width: 600px) {
  .order-banner-box {
    width: calc(100% - 24px);
    padding: 8px 14px;
    font-size: 12px;
    border-radius: 16px;
    letter-spacing: 0.04em;
  }
}
.order-banner-box::before {
  content: '';
  display: inline-block;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #2d6a4f;
  flex-shrink: 0;
}
.order-villas-page .order-banner-box {
  background: #8dd58f73;
  border-color: rgba(52, 211, 153, 0.25);
  color: #2d6a4f;
}
.order-villas-page .order-banner-box::before {
  background: #2d6a4f;
}

/* ── Villa order rows/cards in dashboard ─────────────────────────────────── */
.orders-row--villa {
  background: #fdf6ee !important;
}
.orders-row--villa:hover {
  background: #faeedd !important;
}
.orders-card--villa {
  background: #fdf6ee;
  border-left: 3px solid #CAAA98;
}
.villa-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 700;
  background: #CAAA98;
  color: #1F150C;
  letter-spacing: 0.3px;
  vertical-align: middle;
}

/* ── Settings banner fields ──────────────────────────────────────────────── */
.banner-fields {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}
.banner-field {
  flex: 1 1 260px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.settings-label {
  font-size: 13px;
  font-weight: 600;
  color: #374151;
}
.banner-textarea {
  width: 100%;
  padding: 8px 10px;
  border-radius: 8px;
  border: 1px solid #d1d5db;
  font-size: 13px;
  resize: vertical;
  box-sizing: border-box;
  font-family: inherit;
}

/* ── Villas page: phone input matches other inputs ───────────────────────── */
.order-villas-page .phone-input {
  background: #f5f1ea;
  border-color: rgba(31, 21, 12, 0.25);
  box-shadow: none;
}
.order-villas-page .phone-input .PhoneInputInput,
.order-villas-page .phone-input input {
  background: transparent;
  color: #1F150C;
}
.order-villas-page .phone-input .PhoneInputInput::placeholder,
.order-villas-page .phone-input input::placeholder {
  color: rgba(31, 21, 12, 0.45);
}
/* Mobile: transparent phone input */
.order-villas-page .mobile-inline-checkout .phone-input {
  background: transparent;
}
.order-villas-page .mobile-inline-checkout .phone-input .PhoneInputInput,
.order-villas-page .mobile-inline-checkout .phone-input input {
  color: #6b6660;
}
.order-villas-page .mobile-inline-checkout .phone-input .PhoneInputInput::placeholder,
.order-villas-page .mobile-inline-checkout .phone-input input::placeholder {
  color: #9c948e;
}
.order-villas-page .phone-input .PhoneInputCountrySelectArrow {
  color: #1F150C;
}
.order-villas-page .phone-input:focus-within {
  border-color: #1F150C;
  box-shadow: 0 0 0 3px rgba(31, 21, 12, 0.12);
}

/* ── Cash payment button & confirm row ───────────────────────────────────── */
.cash-btn {
  background: #6b4f1e !important;
}
.cash-btn:not(:disabled) {
  background: #7c5c25 !important;
  box-shadow: 0 8px 20px rgba(107, 79, 30, 0.18) !important;
}
.cash-btn:not(:disabled):hover {
  background: #8f6b2e !important;
}
.cash-cancel-btn {
  background: #6b7280 !important;
  box-shadow: none !important;
}
.cash-cancel-btn:not(:disabled):hover {
  background: #4b5563 !important;
}
.cash-confirm-row {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 4px;
}
.cash-confirm-label {
  font-size: 13px;
  font-weight: 600;
  color: #6b4f1e;
  flex: 1 1 100%;
}

/* ── Affiliates header actions group ─────────────────────────────────────── */
.affiliates-header-actions {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

.affiliates-page-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  font-size: 0.88rem;
  padding: 7px 13px;
  border-radius: 8px;
  border: 1px solid rgba(27,55,93,0.22);
  background: #fff;
  color: #18375d;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.affiliates-page-link:hover {
  background: #18375d;
  color: #fff;
}

@media (max-width: 640px) {
  .affiliates-header-actions {
    width: 100%;
    flex-direction: column;
  }
  .affiliates-page-link,
  .affiliates-header-actions .btn-primary {
    width: 100%;
    justify-content: center;
  }
}

/* ── Order-Villas page colour overrides ──────────────────────────────────── */
/*
  Palette:
    Primary   #1F150C  (deep espresso brown)
    Secondary #CAAA98  (warm sand / terracotta)
    Background #f5f1ea (warm parchment)
*/

.order-villas-page {
  background: #f5f1ea;
  min-height: 100vh;
}

/* Hero text */
.order-villas-page .order-hero h1 {
  color: #1F150C;
}
.order-villas-page .order-hero p {
  color: #5a4233;
}

/* Category filter bar */
.order-villas-page .order-filter-bar {
  background: #f5f1ea;
}
.order-villas-page .filter-cat-btn {
  color: #1F150C;
  border-color: rgba(31,21,12,0.18);
}
.order-villas-page .filter-cat-btn.is-active,
.order-villas-page .filter-cat-btn:hover {
  background: #1F150C;
  color: #f5f1ea;
}
.order-villas-page .filter-scroll-btn {
  color: #1F150C;
  background: transparent;
}
.order-villas-page .filter-scroll-btn:hover {
  color: #CAAA98;
}

/* Menu items */
.order-villas-page .menu-item {
  box-shadow: 0 6px 18px rgba(31, 21, 12, 0.10);
  background: #f5f1ea;
}
.order-villas-page .menu-section h2 {
  color: #1F150C;
}
.order-villas-page .menu-section-description {
  color: #5a4233;
}
.order-villas-page .menu-item {
  border-bottom-color: rgba(31,21,12,0.1);
}
.order-villas-page .menu-item strong {
  color: #1F150C;
}
.order-villas-page .menu-desc {
  color: #5a4233;
}
.order-villas-page .menu-price-unit,
.order-villas-page .menu-price-qty {
  color: #1F150C;
}

/* Chosen item indicator bar */
.order-villas-page .menu-item.menu-item--chosen::before {
  background: #1F150C;
}

/* Add to cart circle */
.order-villas-page .add-circle,
.order-villas-page .add-circle.qty-btn,
.order-villas-page .add-circle.qty-btn:hover,
.order-villas-page .add-circle.qty-btn:active {
  background: #f5f1ea;
  border-color: rgba(31, 21, 12, 0.20);
  color: #1F150C;
}
.order-villas-page .add-circle.has-count {
  background: #f5f1ea;
  color: #1F150C;
}
.order-villas-page .add-circle .add-plus,
.order-villas-page .add-popup-btn,
.order-villas-page .add-popup-count {
  color: #1F150C;
}

/* Summary / checkout box */
.order-villas-page .summary-box,
.order-villas-page .form-box {
  background: #f5f1ea;
}
.order-villas-page .summary-box h3,
.order-villas-page .summary-item-name,
.order-villas-page .summary-item-price,
.order-villas-page .total-to-pay,
.order-villas-page .summary-delivery {
  color: #1F150C;
}

/* Qty mini buttons in summary */
.order-villas-page .qty-btn-mini,
.order-villas-page .qty-display-mini {
  color: #1F150C;
  border-color: rgba(31,21,12,0.25);
}

/* Pay / checkout button */
.order-villas-page .paynow,
.order-villas-page .checkout-btn {
  background: #1F150C;
  color: #f5f1ea;
}
.order-villas-page .paynow:not(:disabled) {
  background: #1F150C;
  box-shadow: 0 8px 20px rgba(31,21,12,0.18);
}
.order-villas-page .paynow:not(:disabled):hover {
  background: #3a2518;
  transform: translateY(-2px);
  box-shadow: 0 12px 26px rgba(31,21,12,0.22);
}

/* Search input */
.order-villas-page .filter-search-input {
  background: #f5f1ea;
  color: #1F150C;
  border-color: rgba(31,21,12,0.2);
}
.order-villas-page .filter-search-close {
  color: #1F150C;
}
.order-villas-page .search-toggle-btn {
  color: #1F150C;
}

/* Allergens info button */
.order-villas-page .order-allergens-info {
  background: rgba(31,21,12,0.1);
  color: #1F150C;
  border-color: rgba(31,21,12,0.2);
}

/* Checkout modal */
.order-villas-page .checkout-modal {
  background: #f5f1ea;
}
.order-villas-page .checkout-modal h2 {
  color: #1F150C;
}
.order-villas-page .checkout-modal-left {
  background: #f5f1ea;
}
.order-villas-page .checkout-modal-close {
  color: #1F150C;
}
.order-villas-page .checkout-summary-bottom {
  background: #f5f1ea;
}

/* Form inputs inside villas checkout — desktop modal */
.order-villas-page .form-box input,
.order-villas-page .form-box select,
.order-villas-page .form-box textarea {
  border-color: rgba(31,21,12,0.25);
  background-color: #f5f1ea;
  color: #1F150C;
}
/* Select placeholder (no value chosen) should look like input placeholder — lighter */
.order-villas-page .form-box select:not(.select--has-value) {
  color: rgba(31,21,12,0.45);
}
/* Selected value uses the full dark brown; override the generic blue select--has-value rule */
.order-villas-page .form-box select.select--has-value {
  color: #1F150C;
}
.order-villas-page .form-box input:focus,
.order-villas-page .form-box select:focus,
.order-villas-page .form-box textarea:focus {
  border-color: #1F150C;
  box-shadow: 0 0 0 3px rgba(31,21,12,0.12);
}

/* Form inputs — mobile inline form only */
.order-villas-page .mobile-inline-title {
  color: #1F150C;
}
.order-villas-page .mobile-inline-checkout .form-box input,
.order-villas-page .mobile-inline-checkout .form-box textarea,
.order-villas-page .mobile-inline-checkout .form-box input[type="date"] {
  background: transparent;
  border-color: rgba(31,21,12,0.25);
  color: #6b6660;
}
.order-villas-page .mobile-inline-checkout .form-box input::placeholder,
.order-villas-page .mobile-inline-checkout .form-box textarea::placeholder {
  color: #9c948e;
}
.order-villas-page .mobile-inline-checkout .form-box input[type="date"]::-webkit-datetime-edit {
  color: #6b6660;
}
.order-villas-page .mobile-inline-checkout .form-box input[type="date"]:not(:focus):not(:valid)::-webkit-datetime-edit {
  color: #9c948e;
}
.order-villas-page .mobile-inline-checkout .form-box select,
.order-villas-page .mobile-inline-checkout .form-box .form-grid select {
  background-color: #f5f1ea !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%236b6660' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  border-color: rgba(31,21,12,0.25);
  color: rgba(31,21,12,0.6) !important;
  -webkit-appearance: none;
  appearance: none;
  height: auto !important;
  min-height: 38px !important;
  line-height: 1.4 !important;
  padding-right: 36px !important;
}
.order-villas-page .mobile-inline-checkout .form-box select.select--has-value,
.order-villas-page .mobile-inline-checkout .form-box .form-grid select.select--has-value {
  color: #1F150C !important;
}
.order-villas-page .mobile-inline-checkout .form-box input:focus,
.order-villas-page .mobile-inline-checkout .form-box select:focus,
.order-villas-page .mobile-inline-checkout .form-box textarea:focus {
  border-color: #1F150C;
  box-shadow: 0 0 0 3px rgba(31,21,12,0.12);
}

/* Section-level HR divider */
.order-villas-page .menu-section-lm-hr {
  border-color: rgba(31,21,12,0.2);
}

/* Disclaimer */
.order-villas-page .menu-disclaimer {
  color: #5a4233;
}

/* Mobile cart button */
.order-villas-page .mobile-cart-button {
  background: #1F150C;
  color: #f5f1ea;
}

/* Summary sticky footer — inherits box bg so no inline override needed */
.order-villas-page .order-summary-sticky-footer {
  background: #f5f1ea;
}

/* Box shadow on summary box — matches the rounded category filter bar style */
.order-villas-page .summary-box {
  box-shadow: 0 6px 18px rgba(31, 21, 12, 0.10);
  border: 1px solid rgba(31, 21, 12, 0.08);
}

/* ── Footer colour overrides (villas page only) ─────────────────────────── */
.order-villas-page .contact_wrapper2 {
  background: #f5f1ea;
}
.order-villas-page .footer_wrapper {
  background: #f5f1ea;
}
.order-villas-page .contact_title {
  color: #1F150C;
}
.order-villas-page .contact_desc {
  color: #1F150C;
}
.order-villas-page .contact_icon_circle {
  background-color: #CAAA98;
  color: #1F150C;
  border-color: rgba(31, 21, 12, 0.15);
}
.order-villas-page .contact_icon_circle:hover {
  background-color: #1F150C;
  color: #f5f1ea;
}
.order-villas-page .contact_icon {
  color: inherit;
}
.order-villas-page .footer_desc,
.order-villas-page .footer_desc a,
.order-villas-page .footer-cookie-preferences {
  color: #1F150C !important;
}
.order-villas-page .footer_desc a:hover,
.order-villas-page .footer-cookie-preferences:hover {
  color: #CAAA98 !important;
}
.order-villas-page .footer_desc_wrapper .linieeee {
  color: #1F150C;
}

/* ── Success Page ────────────────────────────────────────────────────────── */
.success-pg .wave_img2 {
  margin-top: -50px;
}
.success-pg {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  background: #f7f5f0;
}

.success-pg__main {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 24px 60px;
  text-align: center;
}

/* ── Check icon ── */
.success-pg__icon-wrap {
  width: 80px;
  height: 80px;
  color: #18375d;
  margin-bottom: 28px;
}

.success-pg__check-svg {
  width: 100%;
  height: 100%;
}

.success-pg__check-circle {
  stroke-dasharray: 157;
  stroke-dashoffset: 157;
  animation: success-circle 0.55s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

.success-pg__check-tick {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: success-tick 0.35s cubic-bezier(0.4, 0, 0.2, 1) 0.6s forwards;
}

@keyframes success-circle {
  to { stroke-dashoffset: 0; }
}
@keyframes success-tick {
  to { stroke-dashoffset: 0; }
}

/* ── Headings ── */
.success-pg__title {
  font-family: "Coco Gothic", sans-serif;
  font-size: 36px;
  color: #18375d;
  margin: 0 0 10px;
}

.success-pg__subtitle {
  font-size: 16px;
  color: #6b7b8d;
  margin: 0 0 28px;
  max-width: 420px;
}

/* ── Order ID pill ── */
.success-pg__order-id {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  padding: 8px 20px;
  margin-bottom: 44px;
  box-shadow: 0 2px 8px rgba(20, 30, 40, 0.06);
}

.success-pg__order-id-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #9ca3af;
}

.success-pg__order-id-value {
  font-size: 14px;
  font-weight: 700;
  color: #18375d;
}

/* ── Steps ── */
.success-pg__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: 28px 32px;
  max-width: 560px;
  width: 100%;
  margin-bottom: 40px;
  box-shadow: 0 4px 16px rgba(20, 30, 40, 0.06);
}

.success-pg__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
}

.success-pg__step-num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #18375d;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.success-pg__step-title {
  font-size: 13px;
  font-weight: 700;
  color: #18375d;
  margin: 0 0 3px;
}

.success-pg__step-desc {
  font-size: 12px;
  color: #6b7b8d;
  margin: 0;
  line-height: 1.5;
}

.success-pg__step-divider {
  width: 1px;
  align-self: stretch;
  background: #e2e8f0;
  margin: 4px 16px;
  flex-shrink: 0;
}

/* ── CTA button ── */
.success-pg__btn {
  display: inline-block;
  background: #18375d;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 14px 36px;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 6px 18px rgba(24, 55, 93, 0.22);
}

.success-pg__btn:hover {
  background: #0f2440;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(24, 55, 93, 0.28);
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .success-pg__title { font-size: 28px; }
  .success-pg__steps {
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
    padding: 20px;
    gap: 16px;
  }
  .success-pg__step {
    flex-direction: row;
    text-align: left;
    align-items: flex-start;
  }
  .success-pg__step-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
}

@media (max-width: 900px) {

  .order-banner-box {
    font-size: 13px;
  }
}

/* ── Order Monitor ─────────────────────────────────────────────────────────── */

/* Idle / start screen */
.monitor-idle {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 60vh;
  text-align: center;
  padding: 40px 24px;
  gap: 16px;
}
.monitor-idle-icon {
  font-size: 56px;
  color: #b5935a;
  margin-bottom: 8px;
}
.monitor-idle-title {
  font-size: 1.8rem;
  font-weight: 700;
  margin: 0;
}
.monitor-idle-desc {
  font-size: 0.97rem;
  color: #666;
  max-width: 440px;
  line-height: 1.6;
  margin: 0;
}
.monitor-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 8px;
  padding: 14px 36px;
  background: #1a1a1a;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.monitor-start-btn:hover { background: #333; transform: scale(1.03); }
.monitor-start-btn i { font-size: 0.9em; }

/* Active monitor screen — full-viewport overlay */
@keyframes monitor-flash {
  0%, 45%  { background: #0a0a0a; }
  50%, 95% { background: #9b1313; }
  100%     { background: #0a0a0a; }
}

.monitor-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  background: #0a0a0a;
  color: #fff;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 24px;
  padding: 32px 20px;
  overflow-y: auto;
}
.monitor-screen--alert {
  animation: monitor-flash 0.6s infinite;
}

/* Clock */
.monitor-clock {
  font-size: clamp(7.875rem, 27vw, 18rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  font-variant-numeric: tabular-nums;
  color: #fff;
  line-height: 1;
  text-shadow: 0 0 40px rgba(255,255,255,0.15);
}

/* Status label */
.monitor-status {
  font-size: 2.475rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.monitor-listening-label {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #aaa;
}
.monitor-dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #4caf50;
  animation: monitor-blink 1.2s infinite;
}
@keyframes monitor-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.2; }
}
.monitor-alert-label {
  color: #ffdd57;
  font-size: 2.925rem;
  animation: monitor-pulse-text 0.6s infinite alternate;
}
@keyframes monitor-pulse-text {
  from { opacity: 1; }
  to   { opacity: 0.6; }
}

/* Order alert cards */
.monitor-orders-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 520px;
}
.monitor-order-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 12px;
  padding: 16px 20px;
  backdrop-filter: blur(6px);
}
.monitor-order-info {
  display: flex;
  flex-direction: column;
  gap: 3px;
  flex: 1;
  min-width: 0;
}
.monitor-order-id {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
}
.monitor-order-detail {
  font-size: 0.85rem;
  color: #ccc;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.monitor-order-source {
  color: #b5935a;
  font-weight: 600;
  text-transform: uppercase;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
}
.monitor-order-amount {
  font-size: 1.1rem;
  font-weight: 700;
  color: #7ed957;
  margin-top: 4px;
}
.monitor-validate-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 22px;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 999px;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.2s, transform 0.15s;
}
.monitor-validate-btn:hover { background: #219150; transform: scale(1.04); }

/* Hide sidebar, bottom nav and scrollbar while monitor is active */
body.monitor-active .bottom-nav,
body.monitor-active .sidebar { display: none !important; }
body.monitor-active { overflow: hidden !important; }

/* Stop button */
.monitor-stop-btn {
  position: fixed;
  bottom: 28px;
  right: 28px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 24px;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.25);
  color: #fff;
  border-radius: 999px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}
.monitor-stop-btn:hover { background: rgba(255,255,255,0.2); }
/**
 * Swiper 12.1.2
 * Most modern mobile touch slider and framework with hardware accelerated transitions
 * https://swiperjs.com
 *
 * Copyright 2014-2026 Vladimir Kharlampidi
 *
 * Released under the MIT License
 *
 * Released on: February 18, 2026
 */

:root {
  --swiper-theme-color: #007aff;
  /*
  --swiper-preloader-color: var(--swiper-theme-color);
  --swiper-wrapper-transition-timing-function: initial;
  */
}
:host {
  position: relative;
  display: block;
  margin-left: auto;
  margin-right: auto;
  z-index: 1;
}
.swiper {
  margin-left: auto;
  margin-right: auto;
  position: relative;
  overflow: hidden;
  list-style: none;
  padding: 0;
  /* Fix of Webkit flickering */
  z-index: 1;
  display: block;
}
.swiper-vertical > .swiper-wrapper {
  flex-direction: column;
}
.swiper-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
  z-index: 1;
  display: flex;
  transition-property: transform;
  transition-timing-function: var(--swiper-wrapper-transition-timing-function, initial);
  box-sizing: content-box;
}
.swiper-android .swiper-slide,
.swiper-ios .swiper-slide,
.swiper-wrapper {
  transform: translate3d(0px, 0, 0);
}
.swiper-horizontal {
  touch-action: pan-y;
}
.swiper-vertical {
  touch-action: pan-x;
}
.swiper-slide {
  flex-shrink: 0;
  width: 100%;
  height: 100%;
  position: relative;
  transition-property: transform;
  display: block;
}
.swiper-slide-invisible-blank {
  visibility: hidden;
}
/* Auto Height */
.swiper-autoheight,
.swiper-autoheight .swiper-slide {
  height: auto;
}
.swiper-autoheight .swiper-wrapper {
  align-items: flex-start;
  transition-property: transform, height;
}
.swiper-backface-hidden .swiper-slide {
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* 3D Effects */
.swiper-3d.swiper-css-mode .swiper-wrapper {
  perspective: 1200px;
}
.swiper-3d .swiper-wrapper {
  transform-style: preserve-3d;
}
.swiper-3d {
  perspective: 1200px;
  .swiper-slide,
  .swiper-cube-shadow {
    transform-style: preserve-3d;
  }
}

/* CSS Mode */
.swiper-css-mode {
  > .swiper-wrapper {
    overflow: auto;
    scrollbar-width: none; /* For Firefox */
    -ms-overflow-style: none; /* For Internet Explorer and Edge */
    &::-webkit-scrollbar {
      display: none;
    }
  }
  > .swiper-wrapper > .swiper-slide {
    scroll-snap-align: start start;
  }
  &.swiper-horizontal {
    > .swiper-wrapper {
      scroll-snap-type: x mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-slides-offset-before);
      scroll-margin-inline-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-inline-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-vertical {
    > .swiper-wrapper {
      scroll-snap-type: y mandatory;
    }
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-slides-offset-before);
      scroll-margin-block-start: var(--swiper-slides-offset-before);
    }
    > .swiper-wrapper > .swiper-slide:last-child {
      margin-block-end: var(--swiper-slides-offset-after);
    }
  }
  &.swiper-free-mode {
    > .swiper-wrapper {
      scroll-snap-type: none;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: none;
    }
  }
  &.swiper-centered {
    > .swiper-wrapper::before {
      content: '';
      flex-shrink: 0;
      order: 9999;
    }
    > .swiper-wrapper > .swiper-slide {
      scroll-snap-align: center center;
      scroll-snap-stop: always;
    }
  }
  &.swiper-centered.swiper-horizontal {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-inline-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      height: 100%;
      min-height: 1px;
      width: var(--swiper-centered-offset-after);
    }
  }
  &.swiper-centered.swiper-vertical {
    > .swiper-wrapper > .swiper-slide:first-child {
      margin-block-start: var(--swiper-centered-offset-before);
    }
    > .swiper-wrapper::before {
      width: 100%;
      min-width: 1px;
      height: var(--swiper-centered-offset-after);
    }
  }
}

/* Slide styles start */
/* 3D Shadows */
.swiper-3d {
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom,
  .swiper-slide-shadow,
  .swiper-slide-shadow-left,
  .swiper-slide-shadow-right,
  .swiper-slide-shadow-top,
  .swiper-slide-shadow-bottom {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 10;
  }
  .swiper-slide-shadow {
    background: rgba(0, 0, 0, 0.15);
  }
  .swiper-slide-shadow-left {
    background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-right {
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-top {
    background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
  .swiper-slide-shadow-bottom {
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
  }
}
.swiper-lazy-preloader {
  width: 42px;
  height: 42px;
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: -21px;
  margin-top: -21px;
  z-index: 10;
  transform-origin: 50%;
  box-sizing: border-box;
  border: 4px solid var(--swiper-preloader-color, var(--swiper-theme-color));
  border-radius: 50%;
  border-top-color: transparent;
}
.swiper:not(.swiper-watch-progress),
.swiper-watch-progress .swiper-slide-visible {
  .swiper-lazy-preloader {
    animation: swiper-preloader-spin 1s infinite linear;
  }
}
.swiper-lazy-preloader-white {
  --swiper-preloader-color: #fff;
}
.swiper-lazy-preloader-black {
  --swiper-preloader-color: #000;
}
@keyframes swiper-preloader-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
/* Slide styles end */
:root {
  --swiper-navigation-size: 44px;
  /*
  --swiper-navigation-top-offset: 50%;
  --swiper-navigation-sides-offset: 4px;
  --swiper-navigation-color: var(--swiper-theme-color);
  */
}
.swiper-button-prev,
.swiper-button-next {
  position: absolute;

  width: var(--swiper-navigation-size);
  height: var(--swiper-navigation-size);

  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--swiper-navigation-color, var(--swiper-theme-color));
  &.swiper-button-disabled {
    opacity: 0.35;
    cursor: auto;
    pointer-events: none;
  }
  &.swiper-button-hidden {
    opacity: 0;
    cursor: auto;
    pointer-events: none;
  }
  .swiper-navigation-disabled & {
    display: none !important;
  }
  svg {
    width: 100%;
    height: 100%;
    object-fit: contain;
    transform-origin: center;
    fill: currentColor;
    pointer-events: none;
  }
}

.swiper-button-lock {
  display: none;
}

.swiper-button-prev,
.swiper-button-next {
  top: var(--swiper-navigation-top-offset, 50%);
  margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
}
.swiper-button-prev {
  left: var(--swiper-navigation-sides-offset, 4px);
  right: auto;
  .swiper-navigation-icon {
    transform: rotate(180deg);
  }
}
.swiper-button-next {
  right: var(--swiper-navigation-sides-offset, 4px);
  left: auto;
}
.swiper-horizontal {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    top: var(--swiper-navigation-top-offset, 50%);
    margin-top: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-left: 0;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    left: var(--swiper-navigation-sides-offset, 4px);
    right: auto;
  }
  .swiper-button-next,
  & ~ .swiper-button-next,
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    right: var(--swiper-navigation-sides-offset, 4px);
    left: auto;
  }
  .swiper-button-prev,
  & ~ .swiper-button-prev,
  &.swiper-rtl .swiper-button-next,
  &.swiper-rtl ~ .swiper-button-next {
    .swiper-navigation-icon {
      transform: rotate(180deg);
    }
  }
  &.swiper-rtl .swiper-button-prev,
  &.swiper-rtl ~ .swiper-button-prev {
    .swiper-navigation-icon {
      transform: rotate(0deg);
    }
  }
}
.swiper-vertical {
  .swiper-button-prev,
  .swiper-button-next,
  ~ .swiper-button-prev,
  ~ .swiper-button-next {
    left: var(--swiper-navigation-top-offset, 50%);
    right: auto;
    margin-left: calc(0px - (var(--swiper-navigation-size) / 2));
    margin-top: 0;
  }
  .swiper-button-prev,
  ~ .swiper-button-prev {
    top: var(--swiper-navigation-sides-offset, 4px);
    bottom: auto;
    .swiper-navigation-icon {
      transform: rotate(-90deg);
    }
  }
  .swiper-button-next,
  ~ .swiper-button-next {
    bottom: var(--swiper-navigation-sides-offset, 4px);
    top: auto;
    .swiper-navigation-icon {
      transform: rotate(90deg);
    }
  }
}
:root {
  /*
  --swiper-pagination-color: var(--swiper-theme-color);
  --swiper-pagination-left: auto;
  --swiper-pagination-right: 8px;
  --swiper-pagination-bottom: 8px;
  --swiper-pagination-top: auto;
  --swiper-pagination-fraction-color: inherit;
  --swiper-pagination-progressbar-bg-color: rgba(0,0,0,0.25);
  --swiper-pagination-progressbar-size: 4px;
  --swiper-pagination-bullet-size: 8px;
  --swiper-pagination-bullet-width: 8px;
  --swiper-pagination-bullet-height: 8px;
  --swiper-pagination-bullet-border-radius: 50%;
  --swiper-pagination-bullet-inactive-color: #000;
  --swiper-pagination-bullet-inactive-opacity: 0.2;
  --swiper-pagination-bullet-opacity: 1;
  --swiper-pagination-bullet-horizontal-gap: 4px;
  --swiper-pagination-bullet-vertical-gap: 6px;
  */
}
.swiper-pagination {
  position: absolute;
  text-align: center;
  transition: 300ms opacity;
  transform: translate3d(0, 0, 0);
  z-index: 10;
  &.swiper-pagination-hidden {
    opacity: 0;
  }
  .swiper-pagination-disabled > &,
  &.swiper-pagination-disabled {
    display: none !important;
  }
}
/* Common Styles */
.swiper-pagination-fraction,
.swiper-pagination-custom,
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-bullets.swiper-pagination-horizontal {
  bottom: var(--swiper-pagination-bottom, 8px);
  top: var(--swiper-pagination-top, auto);
  left: 0;
  width: 100%;
}
/* Bullets */
.swiper-pagination-bullets-dynamic {
  overflow: hidden;
  font-size: 0;
  .swiper-pagination-bullet {
    transform: scale(0.33);
    position: relative;
  }
  .swiper-pagination-bullet-active {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-main {
    transform: scale(1);
  }
  .swiper-pagination-bullet-active-prev {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-prev-prev {
    transform: scale(0.33);
  }
  .swiper-pagination-bullet-active-next {
    transform: scale(0.66);
  }
  .swiper-pagination-bullet-active-next-next {
    transform: scale(0.33);
  }
}
.swiper-pagination-bullet {
  width: var(--swiper-pagination-bullet-width, var(--swiper-pagination-bullet-size, 8px));
  height: var(--swiper-pagination-bullet-height, var(--swiper-pagination-bullet-size, 8px));
  display: inline-block;
  border-radius: var(--swiper-pagination-bullet-border-radius, 50%);
  background: var(--swiper-pagination-bullet-inactive-color, #000);
  opacity: var(--swiper-pagination-bullet-inactive-opacity, 0.2);
  button& {
    border: none;
    margin: 0;
    padding: 0;
    box-shadow: none;
    appearance: none;
  }
  .swiper-pagination-clickable & {
    cursor: pointer;
  }

  &:only-child {
    display: none !important;
  }
}
.swiper-pagination-bullet-active {
  opacity: var(--swiper-pagination-bullet-opacity, 1);
  background: var(--swiper-pagination-color, var(--swiper-theme-color));
}

.swiper-vertical > .swiper-pagination-bullets,
.swiper-pagination-vertical.swiper-pagination-bullets {
  right: var(--swiper-pagination-right, 8px);
  left: var(--swiper-pagination-left, auto);
  top: 50%;
  transform: translate3d(0px, -50%, 0);
  .swiper-pagination-bullet {
    margin: var(--swiper-pagination-bullet-vertical-gap, 6px) 0;
    display: block;
  }
  &.swiper-pagination-bullets-dynamic {
    top: 50%;
    transform: translateY(-50%);
    width: 8px;
    .swiper-pagination-bullet {
      display: inline-block;
      transition:
        200ms transform,
        200ms top;
    }
  }
}
.swiper-horizontal > .swiper-pagination-bullets,
.swiper-pagination-horizontal.swiper-pagination-bullets {
  .swiper-pagination-bullet {
    margin: 0 var(--swiper-pagination-bullet-horizontal-gap, 4px);
  }
  &.swiper-pagination-bullets-dynamic {
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    .swiper-pagination-bullet {
      transition:
        200ms transform,
        200ms left;
    }
  }
}
.swiper-horizontal.swiper-rtl > .swiper-pagination-bullets-dynamic .swiper-pagination-bullet {
  transition:
    200ms transform,
    200ms right;
}
/* Fraction */
.swiper-pagination-fraction {
  color: var(--swiper-pagination-fraction-color, inherit);
}
/* Progress */
.swiper-pagination-progressbar {
  background: var(--swiper-pagination-progressbar-bg-color, rgba(0, 0, 0, 0.25));
  position: absolute;
  .swiper-pagination-progressbar-fill {
    background: var(--swiper-pagination-color, var(--swiper-theme-color));
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    transform: scale(0);
    transform-origin: left top;
  }
  .swiper-rtl & .swiper-pagination-progressbar-fill {
    transform-origin: right top;
  }
  .swiper-horizontal > &,
  &.swiper-pagination-horizontal,
  .swiper-vertical > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-vertical.swiper-pagination-progressbar-opposite {
    width: 100%;
    height: var(--swiper-pagination-progressbar-size, 4px);
    left: 0;
    top: 0;
  }
  .swiper-vertical > &,
  &.swiper-pagination-vertical,
  .swiper-horizontal > &.swiper-pagination-progressbar-opposite,
  &.swiper-pagination-horizontal.swiper-pagination-progressbar-opposite {
    width: var(--swiper-pagination-progressbar-size, 4px);
    height: 100%;
    left: 0;
    top: 0;
  }
}
.swiper-pagination-lock {
  display: none;
}