/**
 * Elneeru Travel Bookings – Frontend CSS
 * Slots into .booking-card / .booking-body from style.css.
 */

.el-booking {
  width     : 100%;
  box-sizing: border-box;
  font-family: 'DM Sans', sans-serif;
  color     : #f5f0e8;
}

/* ── Price header ─────────────────────────────────────────────── */
.el-header {
  background: #a8c957;
  padding   : 24px;
}
.el-header-price-row {
  display    : flex;
  align-items: baseline;
  flex-wrap  : wrap;
  gap        : 8px;
}
/* booking-price, booking-price-label, booking-price-orig,
   booking-price-per, booking-save all come from style.css */

/* ── Field group ──────────────────────────────────────────────── */
.el-field {
  display      : block;
  width        : 100%;
  box-sizing   : border-box;
  margin-bottom: 14px;
}

.el-field-label {
  display       : block;
  font-size     : 0.7rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color         : rgba(245,240,232,0.5);
  margin-bottom : 6px;
  font-family   : 'DM Sans', sans-serif;
  font-weight   : 400;
}

.el-req { color: #c4622d; }

.el-auto-tag {
  background    : #4a7c59;
  color         : #f5f0e8;
  font-size     : 9px;
  font-weight   : 700;
  padding       : 2px 7px;
  letter-spacing: .5px;
  margin-left   : 6px;
  vertical-align: middle;
  text-transform: uppercase;
}

/* Return date field — no top margin, sits flush under date */
.el-field-return {
  margin-top   : -8px;   /* pull up close to date */
  margin-bottom: 14px;
  padding-top  : 0;
}

/* ── Shared info-static row ───────────────────────────────────── */
/* Used for both return date display and departure time display   */
.el-info-static {
  display    : flex;
  align-items: center;
  gap        : 8px;
  padding    : 11px 14px;
  background : rgba(255,255,255,0.03);
  border     : 1px solid rgba(255,255,255,0.1);
  font-size  : 0.9rem;
  width      : 100%;
  box-sizing : border-box;
  min-height : 44px;
}

/* ── Departure time — visually locked ─────────────────────────── */
/* Muted appearance, no-cursor, lock icon signals read-only       */
.el-info-locked {
  cursor  : default;
  opacity : 0.72;           /* slightly dimmed vs interactive elements */
  border-style: dashed;     /* dashed border = not interactive */
  user-select: none;
}
.el-tr-emoji { font-size: 16px; flex-shrink: 0; }
.el-tr-label { font-weight: 700; color: rgba(245,240,232,0.75); letter-spacing: .5px; font-size: 12px; }
.el-tr-sep   { color: rgba(245,240,232,0.3); }
.el-tr-sub   { font-size: 12px; color: rgba(245,240,232,0.45); }
.el-locked-icon {
  font-size  : 11px;
  margin-left: auto;
  opacity    : 0.4;
}

/* ── Return date states ───────────────────────────────────────── */
.el-return-ph  { color: rgba(245,240,232,0.35); font-style: italic; font-size: 0.85rem; }
.el-return-ok  { font-weight: 600; color: #f5f0e8; display: block; }
.el-return-trip {
  display   : block;
  margin-top: 6px;
  color     : #f5f0e8;
  font-size : 11px;
  font-style: italic;
  line-height: 1.5;
}
.el-trip-label {
  font-size  : 11px;
  color      : rgba(245,240,232,0.38);
  font-style : italic;
  margin-top : 4px;
  min-height : 15px;
  padding-left: 2px;
}

/* ── Date list ─────────────────────────────────────────────────── */
.el-date-list {
  display              : grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap                  : 8px;
  width                : 100%;
}

button.el-date-row,
button.el-date-row:hover,
button.el-date-row:focus {
  appearance      : none !important;
  -webkit-appearance: none !important;
  display         : flex !important;
  flex-direction  : column !important;
  align-items     : center !important;
  padding         : 9px 13px !important;
  background      : rgba(255,255,255,0.05) !important;
  border          : 1px solid rgba(255,255,255,0.15) !important;
  border-radius   : 0 !important;
  color           : #f5f0e8 !important;
  font-family     : 'DM Sans', sans-serif !important;
  cursor          : pointer !important;
  min-width       : 0 !important;
  width           : 100% !important;
  min-height      : auto !important;
  max-width       : none !important;
  box-shadow      : none !important;
  outline         : none !important;
  transition      : border-color .18s, background .18s !important;
  text-align      : center !important;
  line-height     : normal !important;
}
button.el-date-row:hover {
  border-color: rgba(168,201,87,0.5) !important;
  background  : rgba(168,201,87,0.08) !important;
}
button.el-date-row.active,
button.el-date-row.active:hover,
button.el-date-row.selected,
button.el-date-row.selected:hover {
  background  : #a8c957 !important;
  border-color: #a8c957 !important;
  color       : #1a2e1a !important;
}
.el-dr-day { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; opacity: .75; display: block; line-height: 1.2; }
.el-dr-num { font-family: 'Bebas Neue', sans-serif; font-size: 24px; line-height: 1; letter-spacing: .5px; display: block; }
.el-dr-mon { font-size: 9px; opacity: .8; display: block; line-height: 1.3; }
.el-date-row.is-hidden { display: none !important; }

.el-more-dates-btn,
.el-more-dates-btn:hover,
.el-more-dates-btn:focus {
  appearance      : none !important;
  -webkit-appearance: none !important;
  display         : inline-flex !important;
  align-items     : center !important;
  justify-content : center !important;
  margin-top      : 10px !important;
  padding         : 10px 14px !important;
  border          : 1px solid rgba(168,201,87,0.25) !important;
  background      : rgba(168,201,87,0.08) !important;
  color           : #f5f0e8 !important;
  font-family     : 'DM Sans', sans-serif !important;
  font-size       : 12px !important;
  font-weight     : 700 !important;
  letter-spacing  : 1px !important;
  text-transform  : uppercase !important;
  cursor          : pointer !important;
  box-shadow      : none !important;
  width: 100%;
}

/* Flatpickr fallback */
input.el-select,
input.el-select:focus {
  display      : block !important;
  width        : 100% !important;
  box-sizing   : border-box !important;
  background   : rgba(255,255,255,0.05) !important;
  border       : 1px solid rgba(255,255,255,0.15) !important;
  border-radius: 0 !important;
  color        : #f5f0e8 !important;
  padding      : 12px 16px !important;
  font-family  : 'DM Sans', sans-serif !important;
  font-size    : 0.9rem !important;
  outline      : none !important;
  min-height   : auto !important;
  max-width    : 100% !important;
  cursor       : pointer !important;
}
input.el-select:focus { border-color: #a8c957 !important; }

/* ── Traveller counter ────────────────────────────────────────── */
.el-qty-row {
  display    : flex;
  align-items: stretch;
  width      : 100%;
}

button.el-qty-btn,
button.el-qty-btn:hover,
button.el-qty-btn:focus {
  appearance      : none !important;
  -webkit-appearance: none !important;
  display         : inline-flex !important;
  align-items     : center !important;
  justify-content : center !important;
  flex-shrink     : 0 !important;
  width           : 52px !important;
  min-width       : 52px !important;
  height          : 52px !important;
  min-height      : 52px !important;
  background      : rgba(255,255,255,0.08) !important;
  border          : 1px solid rgba(255,255,255,0.15) !important;
  border-radius   : 0 !important;
  color           : #f5f0e8 !important;
  font-size       : 1.4rem !important;
  cursor          : pointer !important;
  line-height     : 1 !important;
  padding         : 0 !important;
  box-shadow      : none !important;
  outline         : none !important;
  transition      : background .2s !important;
  font-family     : 'DM Sans', sans-serif !important;
}
button.el-qty-btn:hover { background: rgba(168,201,87,0.2) !important; }
button.el-qty-btn:disabled { opacity: .35 !important; cursor: not-allowed !important; }

.el-qty-val {
  flex           : 1;
  display        : flex;
  align-items    : center;
  justify-content: center;
  font-size      : 1.1rem;
  font-weight    : 600;
  color          : #f5f0e8;
  background     : rgba(255,255,255,0.05);
  border-top     : 1px solid rgba(255,255,255,0.15);
  border-bottom  : 1px solid rgba(255,255,255,0.15);
  border-left    : none;
  border-right   : none;
  min-height     : 52px;
  user-select    : none;
  font-family    : 'DM Sans', sans-serif;
}
/* ── Total amount block ────────────────────────────────────────────── */
.el-total-bar {
  display        : flex;
  flex-direction : column;
  align-items    : stretch;
  gap            : 10px;
  padding        : 16px;
  background     : rgba(0,0,0,0.2);
  margin-bottom  : 16px;
  width          : 100%;
  box-sizing     : border-box;
}
.el-total-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.el-total-lbl {
  font-size     : 0.7rem;
  letter-spacing: 0;
  text-transform: none;
  color         : rgba(245,240,232,0.45);
  font-family   : 'DM Sans', sans-serif;
  font-weight   : 500;
}
.booking-total-price {
  font-family   : 'Bebas Neue', sans-serif;
  font-size     : 2.6rem;
  color         : #a8c957;
  letter-spacing: 2px;
  line-height   : 1;
}
.el-total-meta {
  font-size: 12px;
  color: rgba(245,240,232,0.55);
  line-height: 1.5;
}
.el-total-sub {
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.08);
  font-size: 12px;
  color: rgba(245,240,232,0.4);
  line-height: 1.5;
  min-height: 18px;
}
/* .booking-total-price from style.css handles the Bebas Neue lime price */

/* ── Payment options ──────────────────────────────────────────── */
.el-pay-group {
  display       : grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap           : 8px;
  margin-bottom : 14px;
  width         : 100%;
}
.el-pay-heading {
  margin-bottom : 8px;
}
.el-pay-opt {
  display        : flex;
  cursor         : pointer;
  width          : 100%;
}
.el-pay-opt input[type=radio] { display: none; }
.el-pay-inner {
  flex          : 1;
  display       : flex;
  flex-direction: column;
  justify-content: space-between;
  gap           : 6px;
  min-height    : 88px;
  padding       : 12px 14px;
  background    : rgba(255,255,255,0.04);
  border        : 1px solid rgba(255,255,255,0.10);
  transition    : border-color .18s, background .18s;
  box-sizing    : border-box;
}
.el-pay-opt:has(input:checked) .el-pay-inner {
  border-color: #a8c957;
  background  : rgba(168,201,87,0.08);
}
.el-pay-adv .el-pay-inner { border-color: rgba(196,98,45,0.3); }
.el-pay-adv:has(input:checked) .el-pay-inner {
  border-color: #a8c957;
  background  : rgba(168,201,87,0.08);
}
.el-pay-title { font-size: 12px; font-weight: 700; color: #f5f0e8; text-transform: uppercase; letter-spacing: .8px; }
.el-pay-sub   { display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.el-pay-amount {
  display: block;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  line-height: 1;
  color: #f5f0e8;
  letter-spacing: 1px;
}
.el-pay-note {
  display: block;
  font-size: 11px;
  color: rgba(245,240,232,0.55);
  line-height: 1.35;
}
.el-pay-opt:has(input:checked) .el-pay-amount {
  color: #a8c957;
}
.el-pay-dot {
  width          : 18px;
  height         : 18px;
  flex-shrink    : 0;
  border         : 1px solid rgba(255,255,255,0.2);
  border-radius  : 50%;
  display        : flex;
  align-items    : center;
  justify-content: center;
  transition     : background .18s, border-color .18s;
}
.el-pay-opt:has(input:checked) .el-pay-dot {
  background  : #a8c957;
  border-color: #a8c957;
}
.el-pay-opt:has(input:checked) .el-pay-dot::after {
  content         : '';
  width           : 6px;
  height          : 6px;
  background      : #1a2e1a;
  border-radius   : 50%;
  display         : block;
}

/* ── Book button ──────────────────────────────────────────────── */
.el-book-btn,
.el-book-btn:focus {
  display        : block !important;
  width          : 100% !important;
  background     : #a8c957 !important;
  color          : #1a2e1a !important;
  border         : none !important;
  padding        : 18px !important;
  font-family    : 'DM Sans', sans-serif !important;
  font-size      : 0.95rem !important;
  font-weight    : 700 !important;
  letter-spacing : 0 !important;
  text-transform : none !important;
  cursor         : pointer !important;
  border-radius  : 0 !important;
  text-align     : center !important;
  min-height     : auto !important;
  box-shadow     : none !important;
  transition     : all .2s !important;
  line-height    : normal !important;
  margin-top     : 0 !important;
}
.el-book-btn:hover {
  background: #c4622d !important;
  color     : #fff !important;
  transform : translateY(-2px) !important;
}

/* ── WC / Razorpay safety ─────────────────────────────────────── */
.el-form { margin: 0; width: 100%; display: flex; flex-direction: column; }
.el-booking { position: relative; z-index: 1; }
.el-booking * { box-sizing: border-box; }
/*wrapper*/
/* wrapper */
.el-row-meta {
  display: block;
  margin-top: 12px;
}

.el-row-meta .el-field {
  margin: 0;
}

.el-row-meta > .el-field:not(.el-field-return) {
  display: none;
}

.el-row-meta .el-field.el-field-return {
  margin-top: 10px;
  margin-bottom: 14px;
}

.el-row-meta .el-field.el-field-return .el-info-static {
  min-height: 72px;
  align-items: flex-start;
  justify-content: center;
  flex-direction: column;
  border-style: dashed;
}

.el-row-meta .el-field.el-field-return .el-trip-label {
  display: none;
}

@media (max-width: 420px) {
  .el-date-list {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
  .el-pay-group {
    grid-template-columns: 1fr;
  }
}
.el-total-top {
  display: flex;
  flex-wrap: wrap;
}

.el-total-meta {
  width: 100%;
  order: 2;
}

.booking-total-price {
  margin-left: auto;
}