/* ===============================
   Dex Booking – Widget & Checkout (refined)
   =============================== */

/* ---------- Design Tokens ---------- */
:root {
  --dexbk-card-bg: #fff;
  --dexbk-card-border: #e8eaef;
  --dexbk-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

  --dexbk-label: #0b123d;
  --dexbk-muted: #6b7280;

  --dexbk-border: #e5e7ef;
  --dexbk-divider: rgba(0, 0, 0, 0.08);

  --dexbk-primary: #000;
  --dexbk-accent: #e1b763;
}

/* ---------- Card ---------- */
.dexbk-card {
  background: var(--dexbk-card-bg);
  border: 1px solid var(--dexbk-card-border);
  border-radius: 20px;
  box-shadow: var(--dexbk-shadow);
  padding: 20px;
  max-width: 420px;
  display: flex;
  gap: 12px;
  flex-direction: column;
}

.dexbk-card__title {
  font-weight: 800;
  font-size: 20px;
  margin: 0 0 10px;
}

/* ---------- Labels ---------- */
.dexbk-label,
.dexbk-guest-label {
  font-weight: 800;
  font-size: 15px;
  color: var(--dexbk-label);
}

.dexbk-guest-label { margin: 8px 0; }

/* ---------- Calendar ---------- */
.dexbk-calendar { margin: 6px 0; }

.dexbk-date,
input.flatpickr-input,
input.flatpickr-mobile {
  display: none !important;
  visibility: hidden !important;
}

.dexbk-calendar .flatpickr-calendar {
  width: 100% !important;
  box-sizing: border-box;
  padding: 8px !important;
  border: 1px solid var(--dexbk-border) !important;
  border-radius: 14px;
  box-shadow: none !important;
}

.dexbk-calendar .flatpickr-current-month { white-space: nowrap !important; }

.dexbk-calendar .flatpickr-months,
.dexbk-calendar .flatpickr-weekdays,
.dexbk-calendar .flatpickr-days {
  width: 100% !important;
  margin: 0 !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months { display: none !important; }
.flatpickr-current-month .cur-year { display: inline-block !important; opacity: 1 !important; }
.flatpickr-day { border-radius: 10px; }
.flatpickr-day.today { border: 1px solid var(--dexbk-primary); }
.flatpickr-day.selected { background: var(--dexbk-primary); color: #fff; }

.dexbk-calendar .dayContainer {
  display: grid !important;
  grid-template-columns: repeat(7, 1fr) !important;
  grid-auto-rows: 40px;
  width: 100% !important;
  max-width: none !important;
}

.dexbk-calendar .flatpickr-day {
  width: 100% !important;
  height: 100% !important;
  line-height: 40px;
  border-radius: 10px;
}

/* ---------- Guests (Row Layout) ---------- */
.dexbk-guest-block.dexbk-row {
  display: flex;
  gap: 10px;
  align-items: flex-end;
  flex-direction: row;
  flex-wrap: wrap;
}

.dexbk-guest-block.dexbk-row .dexbk-guest-item {
  flex: 1 1 180px;
  min-width: 180px;
}

.dexbk-guest-line {
  border: 1px solid var(--dexbk-border);
  border-radius: 14px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  background: #fff;
  margin-bottom: 12px;
}

.dexbk-btn-circle {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--dexbk-border);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  background: #fff;
}

.dexbk-btn-minus { background: #eef1f4; color: #8e94a1; }
.dexbk-btn-plus  { background: var(--dexbk-primary); color: #fff; border-color: var(--dexbk-primary); }

.dexbk-qty {
  width: 52px;
  height: 36px;
  text-align: center;
  font-weight: 800;
  padding: 6px 10px;
  border: 1px solid var(--dexbk-border);
  border-radius: 10px;
  background: #fff;
}

/* ---------- Divider ---------- */
.dexbk-divider { height: 1px; background: var(--dexbk-divider); }

/* ---------- Total Row ---------- */
.dexbk-total-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-weight: 800;
  font-size: 15px;
}

/* Support both historic and current markup */
.dexbk-total-row .dexbk-total-amount,
.dexbk-total-row .amount { font-weight: 900; }

/* ---------- Actions ---------- */
.dexbk-actions { display: grid; gap: 12px; margin-top: 12px; }

.dexbk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 56px;
  border-radius: 16px;
  border: 1px solid transparent;
  text-decoration: none;
  cursor: pointer;
  font-weight: 900;
  font-size: 16px;
}
.dexbk-btn.primary { background: var(--dexbk-primary); color: var(--dexbk-accent); }
.dexbk-btn.ghost   { background: #fff; border-color: var(--dexbk-border); color: var(--dexbk-primary); }
.dexbk-btn:focus-visible { outline: 2px solid var(--dexbk-primary); outline-offset: 2px; }

/* ---------- Mobile Sticky Button ---------- */
#dexbk-sticky-btn { display: none; }

/* ---------- Modal ---------- */
.dexbk-modal {
  position: fixed;
  inset: 0;
  display: none;                /* hidden by default */
  z-index: 10000;               /* above sticky button (z 9999) */
}

/* Be robust even if another rule says display:block !important */
#dexbk-modal[aria-hidden="true"]  { display: none !important; }
#dexbk-modal[aria-hidden="false"] { display: block !important; }

.dexbk-modal__overlay { position: absolute; inset: 0; background: rgba(0,0,0,0.45); }

.dexbk-modal__panel {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  max-height: 85vh;
  background: #fff;
  border-top-left-radius: 18px;
  border-top-right-radius: 18px;
  box-shadow: 0 12px 40px rgba(0,0,0,.22);
  transform: translateY(100%);   /* start off-screen */
  transition: transform .25s ease;
  will-change: transform;
  display: grid;
  grid-template-rows: auto 1fr;
}

#dexbk-modal[aria-hidden="false"] .dexbk-modal__panel { transform: translateY(0); }

/* Modal header/body basics */
.dexbk-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--dexbk-border);
}
.dexbk-modal__header h3 { margin: 0; font-size: 16px; font-weight: 800; line-height: 1.2; }

.dexbk-modal__close {
  all: unset;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 10px;
}
.dexbk-modal__close:focus-visible { outline: 2px solid var(--dexbk-primary); outline-offset: 2px; }

.dexbk-modal__body {
  padding: 14px 16px;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}

/* ---------- Checkout ---------- */
.dexbk-checkout {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 24px;
}

.dexbk-checkout .left,
.dexbk-checkout .right {
  background: #fff;
  border: 1px solid #eee;
  border-radius: 16px;
  font-family: "Catamaran", Sans-Serif;
  padding: 16px;
}

.dexbk-checkout .left * {
  box-sizing: border-box;
  max-width: 100%;
}

.dexbk-checkout .dexbk-field input,
.dexbk-checkout .dexbk-field textarea,
.dexbk-checkout select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 10px;
  overflow-wrap: break-word;
  word-break: break-word;
}

.dexbk-checkout .dexbk-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* Fix checkbox spacing */
.dexbk-checkout input[type="checkbox"] { width: auto; margin: 0 6px 0 0; }
.dexbk-checkout label { display: flex; align-items: center; gap: 6px; }

/* Summary rows (works with either .dexbk-summary or .summary-body) */
.dexbk-summary .title { font-weight: 600; margin-bottom: 10px; }
.dexbk-summary .row,
.summary-body .row {
  display: flex;
  justify-content: space-between;
  padding: 6px 0;
}
.dexbk-summary .row.total,
.summary-body .row.total {
  border-top: 1px dashed #ddd;
  margin-top: 6px;
  padding-top: 10px;
  font-weight: 700;
}

/* Additional overflow fix */
.dexbk-checkout .left {
  overflow-x: hidden;
  overflow-y: auto;
  max-height: 90vh;
}

/* ---------- Checkout: Promo inline row ---------- */
.dexbk-checkout .dexbk-promo-row {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}

.dexbk-checkout .dexbk-promo-row input.dexbk-promo {
  flex: 1 1 auto;
  height: 48px;                 /* taller input */
  padding: 10px 12px;
  border: 1px solid #ddd;
  border-radius: 12px;
  font-weight: 600;
  box-sizing: border-box;
}

.dexbk-checkout .dexbk-promo-apply {
  all: unset;                   /* avoid global button styles */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;                 /* matches input */
  padding: 0 16px;
  border-radius: 12px;
  cursor: pointer;
  border: 1px solid var(--dexbk-border);
  background: var(--dexbk-primary);
  color: var(--dexbk-accent);
  font-weight: 800;
  letter-spacing: .2px;
  white-space: nowrap;
}
.dexbk-checkout .dexbk-promo-apply:disabled { opacity: .6; cursor: not-allowed; }
.dexbk-checkout .dexbk-promo-apply:focus-visible { outline: 2px solid var(--dexbk-primary); outline-offset: 2px; }

/* Stack nicely on very narrow screens */
@media (max-width: 420px) {
  .dexbk-checkout .dexbk-promo-row { flex-wrap: wrap; }
  .dexbk-checkout .dexbk-promo-apply { width: 100%; }
}

/* ---------- Mobile / Responsive ---------- */
@media (max-width: 1000px) {
  .dexbk-card__title { display: none; }

  .dexbk-card {
    background: var(--dexbk-card-bg);
    border: none;
    box-shadow: none;
    padding: 20px;
    max-width: 400px;
    display: flex;
    gap: 12px;
    flex-direction: column;
  }

  #dexbk-sticky-btn {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: 1px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #fff;
    color: #000;
    font-weight: 700;
    letter-spacing: 0.2px;
    z-index: 9999;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18);
    border-radius: 20px 20px 0 0;
    border: 1px solid #e6e6e6;
    padding-bottom: max(0px, env(safe-area-inset-bottom));
  }

  #dexbk-sticky-btn button {
    all: unset;
    cursor: pointer;
    line-height: 56px;
    padding: 0 18px;
    color: #000;
  }

  body.dexbk-has-sticky { padding-bottom: calc(80px + max(0px, env(safe-area-inset-bottom))); }

  .dexbk-widget-inline:not(.dexbk-in-modal) { display: none !important; }

  body.dexbk-open { overflow: hidden; }
  body.dexbk-open #dexbk-sticky-btn { display: none !important; }

  .dexbk-modal__body .dexbk-card.dexbk-widget {
    margin: auto;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }

  .dexbk-guest-block.dexbk-row { gap: 5px; flex-wrap: nowrap; }
  .dexbk-guest-block.dexbk-row .dexbk-guest-item { flex: 1 1 auto; min-width: 150px; }

  .dexbk-checkout { display: flex; flex-direction: column; }
  .dexbk-checkout .right { order: -1; margin-bottom: 16px; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .dexbk-modal__panel { transition: none; }
}