/* Hide "Already have an account? Login Here" prompt on reservation page */
/* Target the card containing the login link within the booking Livewire component */

/* Primary: Hide card containing login link (modern browsers with :has() support) */
body.page-reservation .card.mb-1.bg-white:has(a[href*="/account/login"]),
body.page-reservation .card.mb-1.bg-white:has(a[href*="/login"]) {
    display: none !important;
}

/* Fallback 1: Hide card-body containing login link */
body.page-reservation .card.mb-1.bg-white .card-body:has(a[href*="/account/login"]),
body.page-reservation .card.mb-1.bg-white .card-body:has(a[href*="/login"]) {
    display: none !important;
}

/* Fallback 2: Hide the login link itself and its parent card-body */
body.page-reservation .card.mb-1.bg-white .card-body a[href*="/account/login"],
body.page-reservation .card.mb-1.bg-white .card-body a[href*="/login"] {
    display: none !important;
}

/* Fallback 3: Hide parent card when it contains only the login prompt */
body.page-reservation .card.mb-1.bg-white .card-body:only-child:has(a[href*="/account/login"]),
body.page-reservation .card.mb-1.bg-white .card-body:only-child:has(a[href*="/login"]) {
    display: none !important;
}

/* Ensure we don't hide the header card (which contains .local-header) */
body.page-reservation .card.mb-1.bg-white:has(.local-header) {
    display: block !important;
}

/* Language selector styling for reservation pages */
body.page-reservation .language-selector a,
body.page-reservation-success .language-selector a,
body.page-reservation .language-selector button,
body.page-reservation-success .language-selector button {
    padding: 4px 8px;
    font-size: 0.85rem;
}

/* ===== GSTS: Reservation Select Time – UX Upgrade (scoped) ===== */
.gsts-reservation-timeslots{
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 10px;
}

.gsts-reservation-timeslots .gsts-reservation-timeslot{
  min-height: 52px;
  padding: 12px 20px;
  font-size: 1.08rem;
  font-weight: 700;
  line-height: 1.1;

  border-radius: 12px;

  background: #ff6a00;
  border: 1px solid #ff6a00;
  color: #111;

  transition:
    transform .12s ease,
    box-shadow .12s ease,
    background-color .18s ease,
    border-color .18s ease,
    color .18s ease;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.gsts-reservation-timeslots .gsts-reservation-timeslot:hover{
  background: #ff5a00;
  border-color: #ff5a00;
  transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0,0,0,.14);
}

.gsts-reservation-timeslots .gsts-reservation-timeslot:focus,
.gsts-reservation-timeslots .gsts-reservation-timeslot:focus-visible{
  outline: none;
  box-shadow: 0 0 0 4px rgba(255,106,0,.28), 0 6px 16px rgba(0,0,0,.14);
}

/* Selected state: premium dark and unmistakable */
.gsts-reservation-timeslots .gsts-reservation-timeslot.gsts-is-selected,
.gsts-reservation-timeslots .gsts-reservation-timeslot.active,
.gsts-reservation-timeslots .gsts-reservation-timeslot.is-active{
  background: #111;
  border-color: #111;
  color: #fff;
  transform: none;
  box-shadow: 0 10px 22px rgba(0,0,0,.22);
}

/* Small screens: slightly tighter */
@media (max-width: 420px){
  .gsts-reservation-timeslots{
    gap: 10px;
  }
  .gsts-reservation-timeslots .gsts-reservation-timeslot{
    min-height: 48px;
    padding: 10px 16px;
    font-size: 1.02rem;
    border-radius: 10px;
  }
}
/* ===== end GSTS Reservation Select Time – UX Upgrade ===== */

/* ===== GSTS Reservation Time Slots – UX Polish (Mobile-first, RTL-safe) ===== */

.gsts-reservation-timeslots{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-top: 12px;
}

/* Base button (mobile-first) */
.gsts-reservation-timeslots .gsts-reservation-timeslot{
  min-width: 150px;
  min-height: 48px;

  padding: 10px 14px;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
  white-space: normal;

  border-radius: 12px;
  background: #ff6a00;
  border: 1px solid #ff6a00;
  color: #111;

  transition:
    background-color .18s ease,
    box-shadow .15s ease,
    transform .12s ease;

  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Hover / tap feedback */
.gsts-reservation-timeslots .gsts-reservation-timeslot:hover{
  background: #ff5a00;
  border-color: #ff5a00;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(0,0,0,.14);
}

/* Focus (accessibility) */
.gsts-reservation-timeslots .gsts-reservation-timeslot:focus,
.gsts-reservation-timeslots .gsts-reservation-timeslot:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,106,0,.28);
}

/* Selected state */
.gsts-reservation-timeslots .gsts-reservation-timeslot.gsts-is-selected,
.gsts-reservation-timeslots .gsts-reservation-timeslot.active{
  background: #111;
  border-color: #111;
  color: #fff;
  box-shadow: 0 8px 18px rgba(0,0,0,.22);
  transform: none;
  position: relative;
}

/* Checkmark for selected (RTL-aware) */
.gsts-reservation-timeslots
.gsts-reservation-timeslot.gsts-is-selected::after,
.gsts-reservation-timeslots
.gsts-reservation-timeslot.active::after{
  content: "✓";
  position: absolute;
  top: 6px;
  right: 8px;
  font-size: .95rem;
  font-weight: 900;
  opacity: .9;
}

html[dir="rtl"]
.gsts-reservation-timeslots
.gsts-reservation-timeslot.gsts-is-selected::after,
html[dir="rtl"]
.gsts-reservation-timeslots
.gsts-reservation-timeslot.active::after{
  right: auto;
  left: 8px;
}

/* RTL layout polish */
html[dir="rtl"] .gsts-reservation-timeslots{
  flex-direction: row-reverse;
}

/* Tablet & up */
@media (min-width: 480px){
  .gsts-reservation-timeslots{
    gap: 12px;
  }
  .gsts-reservation-timeslots .gsts-reservation-timeslot{
    min-width: 170px;
    padding: 12px 18px;
    font-size: 1.05rem;
  }
}

/* Desktop */
@media (min-width: 768px){
  .gsts-reservation-timeslots .gsts-reservation-timeslot{
    min-width: 185px;
    min-height: 52px;
    font-size: 1.08rem;
  }
}

/* ===== end GSTS Reservation Time Slots – UX Polish ===== */

/* Reservation header CTA buttons: orange outline (GastroWeb only) */
.gsts-res-header-cta {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
}
.gsts-res-header-cta:hover,
.gsts-res-header-cta:focus {
  border-color: var(--bs-primary) !important;
  color: var(--bs-primary) !important;
  background: transparent !important;
}