/* =========================================================================
   CBD (v32) — auth/booking modal styling.
   Cloned from v30's .modalNewstyle block and recoloured to the CBD palette via
   scoped --b-* variables (scoped to .modalNewstyle so nothing leaks to the rest
   of the theme). Loaded on the homepage (MainAsset) and inner pages
   (top-bar-inner-page). Dark modal + CBD amber accent + cream text, matching the
   dark/light modal split v30 uses (book-table stays light via its own inline CSS).
   ========================================================================= */
.modalNewstyle {
  --b-card:      #25160F;                 /* modal background (CBD dark) */
  --b-dark:      #25160F;                 /* dark text on the amber primary button */
  --b-white:     #F8E7D1;                 /* light text (CBD cream) */
  --b-font:      'Moche', serif;          /* headings */
  --b-body:      'poppins', 'Helvetica Neue', sans-serif;
  --b-lime:      #FFAF34;                 /* primary accent (CBD amber) */
  --b-lime-soft: rgba(255, 175, 52, .16);
}

/* ── MODALS (login / register / OTP / forgot-password / opening-hours) ──── */
.modalNewstyle .modal-content {
  background: var(--b-card); border: 1px solid rgba(255,255,255,.08);
  border-radius: 10px; color: var(--b-white);
}
.modalNewstyle .modal-header { padding: 1.5rem 2rem 1rem; border-bottom: none; }
.modalNewstyle .modal-body   { padding: .5rem 2rem 2rem; }
.modalNewstyle .modal-title,
.modalNewstyle .mdTitle {
  font-family: var(--b-font); font-size: 22px; letter-spacing: 1px;
  text-transform: uppercase; color: var(--b-white);
}
.modalNewstyle .btn-close { filter: invert(1) brightness(1.6); opacity: .7; }
.modalNewstyle .btn-close:hover { opacity: 1; }
.modalNewstyle label,
.modalNewstyle .labelStyle,
.modalNewstyle .form-label { font-size: 13px; color: rgba(255,255,255,.6); margin-bottom: 6px; display: block; }

/* Social / outline buttons */
.modalNewstyle .btnDarkOutline {
  background: transparent; border: 1px solid rgba(255,255,255,.18); color: rgba(255,255,255,.85);
  font-family: var(--b-body); font-size: 12px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  padding: 10px 16px; border-radius: 4px; transition: background .2s, border-color .2s;
  text-align: center; cursor: pointer; display: block; text-decoration: none;
}
.modalNewstyle .btnDarkOutline:hover { background: var(--b-lime-soft); border-color: var(--b-lime); color: var(--b-lime); }

/* Primary button — same recipe as .b-btn-pri */
.modalNewstyle .btnPrimary {
  font-family: var(--b-body); font-size: 13px; font-weight: 900; letter-spacing: 1px; text-transform: uppercase;
  background: var(--b-lime); color: var(--b-dark); border: 2px solid var(--b-lime); border-radius: 4px;
  padding: 12px 20px; transition: background .2s;
}
.modalNewstyle .btnPrimary:hover { background: #ffc061; border-color: #ffc061; color: var(--b-dark); }

/* OR divider */
.modalNewstyle .sideLinesDivider { overflow: hidden; text-align: center; position: relative; }
.modalNewstyle .sideLinesDivider .dividerText {
  display: inline-block; position: relative; padding: 0 16px;
  font-size: 11px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: rgba(255,255,255,.35);
}
.modalNewstyle .sideLinesDivider .dividerText::before,
.modalNewstyle .sideLinesDivider .dividerText::after {
  content: ""; position: absolute; top: 50%; width: 100vw; margin-top: -1px; border-top: 1px solid rgba(255,255,255,.1);
}
.modalNewstyle .sideLinesDivider .dividerText::before { right: 100%; }
.modalNewstyle .sideLinesDivider .dividerText::after  { left: 100%; }

/* Form controls scoped to modal */
.modalNewstyle .form-control,
.modalNewstyle .form-select {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15); color: rgba(255,255,255,.9);
  border-radius: 4px; padding: 10px 14px; font-family: var(--b-body); font-size: 14px;
}
.modalNewstyle .form-control::placeholder { color: rgba(255,255,255,.35); }
/* Inner pages also load the shared style.css, whose `.formStyle .rightIconFld > .form-control`
   reserves 50px on the right for an icon the modal doesn't show — keep it matching the homepage. */
.modalNewstyle .formStyle .rightIconFld > .form-control { padding-right: 14px; }
.modalNewstyle .form-control:focus,
.modalNewstyle .form-select:focus {
  background: rgba(255,255,255,.09); border-color: var(--b-lime);
  box-shadow: 0 0 0 2px var(--b-lime-soft); color: var(--b-white); outline: none;
}

/* Links */
.modalNewstyle .simpleLink { color: var(--b-lime); text-decoration: none; font-size: 13px; transition: color .2s; }
.modalNewstyle .simpleLink:hover { color: #ffc061; text-decoration: underline; }
.modalNewstyle .linkStyle2 { color: var(--b-lime); font-size: 12px; font-weight: 600; text-decoration: none; transition: color .2s; }
.modalNewstyle .linkStyle2:hover { color: #ffc061; }
.modalNewstyle .textPrimary { color: var(--b-lime) !important; }

/* Checkboxes — force Bootstrap's default float layout. Inner pages also load
   newthemechangeui.css, whose global .form-check-input turns it position:absolute
   with the wrong size/offset; these scoped rules keep the modals identical to the homepage. */
.modalNewstyle .form-check { padding-left: 24px; }
.modalNewstyle .form-check-label { color: rgba(255,255,255,.6); font-size: 12px; line-height: 1.5; }
.modalNewstyle .form-check-input {
  background-color: rgba(255,255,255,.06); border-color: rgba(255,255,255,.3);
  position: static; float: left; width: 16px; height: 16px; margin-top: 4px; margin-left: -24px;
}
.modalNewstyle .form-check-input:checked { background-color: var(--b-lime); border-color: var(--b-lime); }

/* Error / OTP */
.modalNewstyle .errorMsg { color: #ff6b6b; font-size: 12px; min-height: 1.2em; }
.modalNewstyle #timer { font-size: 13px; color: rgba(255,255,255,.55); }

/* Opening-hours content */
.modalNewstyle .openingHourModalContent .titleLbl { font-family: var(--b-font); font-size: 14px; letter-spacing: .5px; text-transform: uppercase; color: var(--b-lime); }
.modalNewstyle .openingHourModalContent .simpleList { list-style: none; padding: 0; margin: 0 0 1rem; color: rgba(255,255,255,.75); }
.modalNewstyle .openingHourModalContent .hrs { margin-top: 1.25rem; }
.modalNewstyle .openingHourModalContent p { font-size: 14px; color: rgba(255,255,255,.6); line-height: 1.65; }
.modalNewstyle .infoIcon { color: var(--b-lime); }

/* =========================================================================
   Header auth (desktop) — Login/Register links + user icon & dropdown on the
   amber header bars (pill + inner). Loaded on the homepage and inner pages.
   ========================================================================= */
.cbd-auth { display: inline-flex; align-items: center; gap: 8px; }
.cbd-auth-link { font-family: 'Moche', serif; font-size: 15px; color: #1F130D; cursor: pointer; transition: color .2s; white-space: nowrap; }
.cbd-auth-link:hover { color: #EE4A3A; }
.cbd-auth-sep { color: #1F130D; opacity: .45; }

.cbd-user { position: relative; }
.cbd-user-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  width: 40px; height: 40px; border: 0; border-radius: 999px; cursor: pointer;
  background: #25160F; color: #F8E7D1;
}
.cbd-user-drop {
  position: absolute; top: calc(100% + 10px); right: 0; min-width: 210px;
  background: #FFF8EF; border: 1px solid rgba(37, 22, 15, .12); border-radius: 10px;
  padding: 8px; box-shadow: 0 16px 40px rgba(0, 0, 0, .18);
  display: none; flex-direction: column; z-index: 400;
}
.cbd-user-drop.is-open { display: flex; }
.cbd-user-drop a {
  font-family: 'poppins', 'Helvetica Neue', sans-serif; font-size: 14px; color: #25160F;
  padding: 9px 12px; border-radius: 6px; text-decoration: none; transition: background .15s, color .15s;
}
.cbd-user-drop a:hover { background: rgba(238, 74, 58, .1); color: #EE4A3A; }