/* === LL_FILE_START ===
 * File name: promo-calendar.css
 * Description: Styles for promo calendar modal UI (months grid + payment section + JS-positioned floating total box).
 */

.ll-promo-wrap { padding:14px; }

/* Top bar */
.ll-promo-top {
  display:flex;
  justify-content:space-between;
  gap:16px;
  align-items:flex-start;
}

.ll-promo-price,
.ll-promo-total {
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:10px 12px;
  background:#fff;
  min-width:180px;
}

.ll-promo-price-label,
.ll-promo-total-label {
  font-size:12px;
  opacity:.7;
  margin-bottom:4px;
}

.ll-promo-price-value,
.ll-promo-total-value {
  font-size:20px;
  font-weight:700;
}

.ll-promo-total { text-align:right; }
.ll-promo-total .ll-promo-pay { margin-top:8px; }

/* ✅ JS-floating total box (promo-calendar.js sets top/right dynamically) */
.ll-promo-total.ll-promo-total-floating {
  position: fixed !important;
  z-index: 9999 !important;
  width: 200px;         /* optional */
  background: #fff;
}

/* Sub hints */
.ll-promo-sub { margin:10px 0 12px; }
.ll-promo-hint { font-size:13px; opacity:.85; }
.ll-promo-hint-green { font-weight:700; opacity:1; margin-bottom:4px; }

/* Calendar months grid */
.ll-promo-calendars {
  display:grid;
  grid-template-columns:repeat(3, minmax(240px, 1fr));
  gap:14px;
}

@media (max-width: 640px) {
  .ll-promo-calendars { grid-template-columns: 1fr; }

  /* ✅ Make room for the fixed bottom bar */
  .ll-promo-wrap {
    padding-bottom: calc(140px + env(safe-area-inset-bottom, 0px));
  }

  /* ✅ Bottom-fixed bar on mobile (real bottom bar, not sticky) */
  .ll-promo-top {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(12px + env(safe-area-inset-bottom, 0px));
    z-index: 10000;

    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 10px 12px;

    display: flex;
    flex-direction: row;
    gap: 12px;
    align-items: flex-start;
    justify-content: space-between;
  }

  /* Make boxes fit nicely in the bar */
  .ll-promo-price,
  .ll-promo-total {
    min-width: 0;
    width: auto;
    border: none;
    padding: 0;
    background: transparent;
  }

  /* Keep pay button usable */
  .ll-promo-total {
    text-align: right;
  }

  /* IMPORTANT: kill JS floating on mobile */
  .ll-promo-total.ll-promo-total-floating {
    position: static !important;
    top: auto !important;
    right: auto !important;
    width: auto !important;
  }
}

#dashboard-modal-content-container {
  overflow: auto;
  max-height: 80vh; /* or whatever your modal uses */
}

/* Month */
.ll-promo-month {
  border:1px solid #e5e7eb;
  border-radius:12px;
  padding:10px;
  background:#fff;
}

.ll-promo-month.is-hidden { display:none; }

.ll-promo-month-title { font-weight:700; margin-bottom:8px; }
.ll-promo-grid { display:grid; grid-template-columns:repeat(7, 1fr); gap:6px; }
.ll-promo-dow { font-size:12px; text-align:center; opacity:.6; }

/* Day cells */
.ll-promo-cell {
  border:1px solid #e5e7eb;
  border-radius:10px;
  padding:8px 0;
  text-align:center;
  cursor:pointer;
  user-select:none;
  background:#fff;
  position:relative;
}

.ll-promo-cell input { position:absolute; opacity:0; pointer-events:none; }
.ll-promo-daynum { font-size:14px; font-weight:600; }
.ll-promo-cell:hover { border-color:#94a3b8; }
.ll-promo-empty { border:none; background:transparent; }

.ll-promo-cell.is-disabled { cursor:not-allowed; }

.ll-promo-cell.is-booked {
  cursor:not-allowed;
  background:#16a34a;
  color:#fff;
  border-color:#16a34a;
  opacity:1;
}

.ll-promo-cell.is-booked .ll-promo-daynum { color:#fff; }
.ll-promo-cell.is-disabled:not(.is-booked) { opacity:.35; background:#f8fafc; }

.ll-promo-cell.is-checked { border-color:#16a34a; box-shadow:0 0 0 2px rgba(22,163,74,.15); }

/* View more */
.ll-promo-viewmore-row { margin-top:10px; }
.ll-promo-viewmore { text-decoration: underline; cursor:pointer; }

/* Payment box */
.ll-promo-paybox {
  margin-top:14px;
  padding:12px;
  border:1px solid #e5e7eb;
  border-radius:12px;
  background:#fff;
}

.ll-promo-paybox-title { font-weight:700; margin-bottom:10px; }

.ll-promo-selected-wrap { margin: 0 0 12px 0; }
.ll-promo-selected-title { font-weight:700; margin-bottom:6px; }
.ll-promo-selected-list { margin:0; padding-left:18px; }
.ll-promo-selected-total { margin-top:8px; font-weight:700; }

.ll-promo-hide { display:none !important; }

/* Hide the top/right or bottom total box once payment flow starts */
.ll-promo-wrap.is-payment-mode .ll-promo-top {
  display: none !important;
}