/* =================================================================
   E CARE RENTAL RESERVATIONS — v8 (larger fonts for older audiences)
   ================================================================= */

/* ── Container ──────────────────────────────────────────────────── */
.reservation-request-container {
  width: 90%; max-width: none;
  margin: 0 auto; padding: 4px;
  box-sizing: border-box; overflow: visible;
}
@media (max-width:600px) { .reservation-request-container { width: 98%; padding: 2px; } }

/* ── Scoped reset ───────────────────────────────────────────────── */
#equipment-form * { box-sizing: border-box !important; }
#equipment-form,
#equipment-form div:not(.ecare-toggle-group):not(.ecare-toggle-pill),
#equipment-form label:not(.ecare-toggle-pill):not(.field-returns-exchange-terms),
#equipment-form input, #equipment-form select,
#equipment-form textarea, #equipment-form span, #equipment-form p {
  text-align: left !important;
}
#equipment-form fieldset, #equipment-form legend {
  margin: 0 !important; padding: 0 !important;
}

/* ── Card shell ─────────────────────────────────────────────────── */
div#equipment-form {
  background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important; width: 100% !important;
}
.reservation-request-container > #equipment-form {
  background: #fff !important;
  border-radius: 16px !important;
  border: 1px solid rgba(15,23,42,.09) !important;
  box-shadow: 0 12px 40px rgba(0,0,0,.11), 0 2px 8px rgba(0,0,0,.06) !important;
  overflow: hidden !important;
}

/* ── Card header ────────────────────────────────────────────────── */
#equipment-form .ecare-form-header {
  background: linear-gradient(135deg,#0f4c8c 0%,#083260 100%) !important;
  padding: 20px 24px !important;
  display: flex !important; align-items: center !important; gap: 14px !important;
}
#equipment-form .ecare-form-header-icon {
  width:56px !important; height:56px !important;
  background:transparent !important; border-radius:50% !important;
  border:none !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  font-size:22px !important; flex-shrink:0 !important;
}
#equipment-form .ecare-form-header-text { flex:1 !important; min-width:0 !important; }
#equipment-form .ecare-form-header-text h2 {
  font-size:19px !important; font-weight:900 !important; color:#fff !important;
  line-height:1.25 !important; text-transform:none !important;
  border:none !important; background:transparent !important;
  margin:0 0 3px !important; padding:0 !important;
}
#equipment-form .ecare-form-header-text p {
  font-size:14px !important; color:rgba(255,255,255,.8) !important;
  font-weight:600 !important; margin:0 !important; padding:0 !important;
}
#equipment-form .ecare-form-header-badge {
  background:rgba(255,255,255,.15) !important; border:1px solid rgba(255,255,255,.3) !important;
  color:#fff !important; font-size:13px !important; font-weight:900 !important;
  padding:7px 16px !important; border-radius:999px !important;
  white-space:nowrap !important; flex-shrink:0 !important;
}
@media(max-width:580px) {
  #equipment-form .ecare-form-header { padding:16px 14px !important; }
  #equipment-form .ecare-form-header-badge { display:none !important; }
}

/* ── Fieldsets ──────────────────────────────────────────────────── */
div#equipment-form fieldset {
  border:none !important; background:transparent !important;
  box-shadow:none !important; display:block !important;
  width:100% !important; overflow:visible !important;
}
div#equipment-form fieldset + fieldset { border-top: 1px solid #e8edf4 !important; }

/* ── Legend strip ───────────────────────────────────────────────── */
div#equipment-form fieldset legend {
  display:flex !important; align-items:center !important;
  justify-content:space-between !important;
  width:100% !important; float:none !important;
  background:#f5f8fc !important; border-bottom:1px solid #dde6f0 !important;
  padding:13px 22px !important; margin:0 !important; line-height:1 !important;
}
div#equipment-form fieldset legend + * { clear:none !important; }
.legend-label {
  display:flex !important; align-items:center !important; gap:8px !important;
  font-size:12px !important; font-weight:900 !important;
  letter-spacing:2px !important; text-transform:uppercase !important; color:#0b3a6a !important;
}
.legend-icon-bubble {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  width:28px !important; height:28px !important;
  background:#0b3a6a !important; border-radius:7px !important;
  font-size:14px !important; flex-shrink:0 !important;
}
.legend-step {
  font-size:14px !important; font-weight:900 !important;
  color:#0b3a6a !important; letter-spacing:.3px !important;
  text-transform:none !important; white-space:nowrap !important;
}

/* ── Field body ─────────────────────────────────────────────────── */
div#equipment-form .ecare-field-body {
  padding: 18px 22px 22px !important;
  display: flex !important; flex-direction: column !important; gap: 14px !important;
}
div#equipment-form .ecare-field-row-2 {
  display: grid !important; grid-template-columns: 1fr 1fr !important;
  gap: 14px !important; width: 100% !important;
}
@media(max-width:580px) {
  div#equipment-form .ecare-field-row-2 { grid-template-columns: 1fr !important; }
  div#equipment-form .ecare-field-body { padding: 14px 14px 18px !important; }
}

/* ── Labels ─────────────────────────────────────────────────────── */
div#equipment-form label.field {
  display:block !important; width:100% !important;
  font-size:12px !important; font-weight:800 !important;
  letter-spacing:1px !important; text-transform:uppercase !important;
  color:#5a6f8a !important; margin:0 0 6px 0 !important;
  padding:0 !important; text-indent:0 !important; line-height:1.2 !important;
}

#equipment-form label[for="preferredPickupTime"]{
  margin-top:12px !important;
  display:block !important;
}

div#equipment-form label.field span { color:#d63031 !important; margin-right:1px; }

/* ── Inputs / selects / textarea ────────────────────────────────── */
div#equipment-form input.textbox,
div#equipment-form select.textbox,
div#equipment-form textarea.comments {
  display:block !important; width:100% !important; padding:12px 14px !important;
  border:1.5px solid #d1d9e6 !important; border-radius:8px !important;
  font-size:16px !important; color:#111827 !important;
  background:#fafbfc !important; box-shadow:none !important;
  line-height:1.4 !important; height:auto !important;
  outline:none !important; font-family:inherit !important; margin:0 !important;
  transition:border-color .15s, box-shadow .15s;
}
div#equipment-form input.textbox:focus,
div#equipment-form select.textbox:focus,
div#equipment-form textarea.comments:focus {
  border-color:#3d8bd4 !important;
  box-shadow:0 0 0 3px rgba(61,139,212,.13) !important; background:#fff !important;
}
div#equipment-form input.textbox:disabled {
  background:#f3f4f6 !important; color:#b0bac8 !important;
  border-color:#e4e8ef !important; cursor:not-allowed !important;
}
div#equipment-form textarea.comments { resize:vertical !important; min-height:90px !important; }

/* ── Equipment table ────────────────────────────────────────────── */
#equipment-table {
  width:100% !important; table-layout:fixed !important;
  border-collapse:separate !important; border-spacing:0 !important;
  border:1px solid #dde6f0 !important; border-radius:10px !important;
  overflow:hidden !important; margin:0 !important; background:#fff !important;
}
#equipment-table thead th {
  background:#f0f5fb !important; color:#0b3a6a !important;
  font-size:10px !important; font-weight:900 !important;
  letter-spacing:1.5px !important; text-transform:uppercase !important;
  padding:10px 8px !important; border-bottom:2px solid #d6e8f5 !important;
  white-space:nowrap !important; overflow:hidden !important; text-align:left !important;
}
th.th-rate { text-align:center !important; }
#equipment-table tbody td {
  padding:13px 10px !important; border-bottom:1px solid #f0f4f8 !important;
  font-size:15px !important; color:#374151 !important;
  vertical-align:middle !important; text-align:left !important; overflow:hidden !important;
}
td.td-rate { text-align:center !important; }
#equipment-table tbody tr:last-child td { border-bottom:none !important; }
#equipment-table tbody tr:has(input:checked) td { background:#eef6ff !important; }
#equipment-table tbody tr:hover td { background:#f8fbff !important; cursor:pointer; }
#equipment-table input[type="radio"] {
  width:18px !important; height:18px !important; accent-color:#0b3a6a !important;
  cursor:pointer !important; display:block !important; margin:0 auto !important;
}
#equipment-table td:nth-child(1) { text-align:center !important; padding:10px 4px !important; }
#equipment-table td:nth-child(2) img {
  width:52px !important; height:44px !important;
  object-fit:contain !important; display:block !important; border-radius:4px !important;
}
.ecare-rate-pill {
  display:inline-flex !important; align-items:center !important; justify-content:center !important;
  background:#eef6ff !important; color:#0b3a6a !important;
  border:1px solid rgba(185,221,255,.95) !important; border-radius:999px !important;
  font-size:12px !important; font-weight:800 !important; padding:4px 10px !important; white-space:nowrap !important;
}
.products-table-label {
  font-size:12px !important; font-weight:900 !important; letter-spacing:1.5px !important;
  text-transform:uppercase !important; color:#5a6f8a !important;
  display:block !important; margin:0 0 8px !important; padding:0 !important;
}

/* ── Toggle pills ───────────────────────────────────────────────── */
#rentalStorePickUpSection, #rentalIsFirstFloorAssemblySection {
  padding: 0 22px !important; margin: 0 !important;
}
#rentalStorePickUpSection label.field,
#rentalIsFirstFloorAssemblySection label.field {
  padding: 14px 0 9px !important; margin: 0 !important;
}
.ecare-toggle-group {
  display:flex !important; gap:10px !important; flex-wrap:nowrap !important;
  width:100% !important; padding-bottom:0 !important; margin-bottom:14px !important;
}
.ecare-toggle-pill {
  flex:1 1 0 !important; min-width:0 !important;
  display:flex !important; align-items:center !important; justify-content:center !important;
  gap:8px !important; padding:16px 18px !important;
  border:1.5px solid #d1d9e6 !important; border-radius:10px !important;
  font-size:15px !important; font-weight:800 !important; color:#4a6080 !important;
  background:#f8f9fc !important; cursor:pointer !important;
  box-shadow:0 2px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.8) !important;
  transition:all .18s ease !important; margin:0 !important; text-align:center !important;
}
.ecare-toggle-pill input[type="radio"] { display:none !important; }
.ecare-toggle-pill.active {
  background:linear-gradient(135deg,#e8f3ff 0%,#ddeeff 100%) !important;
  border-color:#3d8bd4 !important; color:#0b3a6a !important; font-weight:900 !important;
  box-shadow:0 0 0 3px rgba(61,139,212,.18), 0 3px 10px rgba(61,139,212,.14) !important;
}
.ecare-toggle-pill:not(.active):hover { background:#f0f4fa !important; border-color:#b5c8e0 !important; }
@media(max-width:420px) {
  .ecare-toggle-group { flex-wrap:wrap !important; }
  .ecare-toggle-pill  { flex:1 1 100% !important; }
}

/* ── Delivery address ───────────────────────────────────────────── */
#delivery-address-section {
  padding:14px 22px 0 !important; margin:0 !important;
  border-top:1px solid #edf1f7 !important;
}
#delivery-address-section .ecare-field-row-2 {
  display:grid !important; grid-template-columns:1fr 1fr !important; gap:14px !important;
}
#delivery-address-section .ecare-field-row-2 + .ecare-field-row-2 { margin-top:14px !important; }

/* ── Dates row ──────────────────────────────────────────────────── */
#ecare-dates-row {
  display:grid !important; grid-template-columns:1fr 1fr !important;
  gap:14px !important; padding:0 22px !important; margin:16px 0 0 !important;
}
@media(max-width:480px) { #ecare-dates-row { grid-template-columns:1fr !important; } }
#ecare-dates-row #rentalStartDate, #ecare-dates-row #rentalEndDate { margin:0 !important; padding:0 !important; }

/* ── Pricing / Best Rate / Promo — class-based, no wrapper ─────── */
.pricing-card {
  margin: 14px 24px 0 !important;
  border: 1px solid #d6e8f5 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: block !important;
}
.pricing-card-head {
  background: #eef4fb !important;
  border-bottom: 1px solid #d6e8f5 !important;
  padding: 11px 18px !important;
  font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  color: #0b3a6a !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
}
.pricing-line {
  display: flex !important; align-items: center !important;
  padding: 13px 18px !important;
  border-bottom: 1px solid #f0f4f8 !important;
  font-size: 15px !important;
}
.pricing-line:last-of-type { border-bottom: none !important; }
.pricing-line-label { color: #374151 !important; font-weight: 700 !important; flex: 1 !important; }
.pricing-line-rate  { color: #0b3a6a !important; font-size: 14px !important; margin: 0 14px !important; font-weight: 700 !important; }
.pricing-line-cost  { font-weight: 900 !important; color: #111827 !important; font-size: 16px !important; }
.pricing-total {
  background: linear-gradient(135deg, #eef4fb 0%, #f5f9ff 100%) !important;
  padding: 16px 18px !important;
  border-top: 1px solid #d6e8f5 !important;
  display: block !important;
}
.pricing-total-label {
  font-size: 11px !important; color: #0b3a6a !important;
  text-transform: uppercase !important; letter-spacing: 1.5px !important;
  font-weight: 900 !important; margin-bottom: 5px !important;
  display: block !important;
}
.pricing-total-amount {
  font-size: 34px !important; color: #0b3a6a !important;
  font-weight: 900 !important; letter-spacing: -.5px !important;
  display: block !important; line-height: 1.1 !important;
}
.pricing-total-note {
  font-size: 14px !important; color: #0b3a6a !important;
  margin-top: 5px !important; display: block !important; font-weight: 600 !important;
}
.pricing-total-note:last-child {
  font-size: 13px !important; font-weight: 500 !important;
  color: #0b3a6a !important; font-style: italic !important;
}

/* Best rate — simplified friendly card */
.bestrate-card {
  margin: 12px 24px 0 !important;
  border: 1px solid #b7e0c8 !important;
  border-left: 4px solid #1a8a4a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  display: block !important;
  background: #f0faf4 !important;
}
.bestrate-head {
  background: linear-gradient(135deg,#1a8a4a,#155724) !important;
  padding: 11px 18px !important;
  font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  color: #fff !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
}
.bestrate-body {
  padding: 16px 18px !important;
}
.bestrate-main {
  display: flex !important; align-items: flex-start !important;
  gap: 14px !important; margin-bottom: 10px !important;
}
.bestrate-checkmark {
  width: 42px !important; height: 42px !important; flex-shrink: 0 !important;
  background: #1a8a4a !important; color: #fff !important;
  border-radius: 50% !important; font-size: 22px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  font-weight: 900 !important; line-height: 1 !important;
}
.bestrate-message { flex: 1 !important; }
.bestrate-title {
  font-size: 16px !important; font-weight: 900 !important;
  color: #155724 !important; margin-bottom: 5px !important;
}
.bestrate-sub {
  font-size: 14px !important; color: #1a4a2a !important;
  line-height: 1.55 !important;
}
.bestrate-saving-badge {
  display: inline-block !important;
  margin-top: 8px !important;
  background: #155724 !important; color: #fff !important;
  font-size: 13px !important; font-weight: 700 !important;
  padding: 5px 12px !important; border-radius: 999px !important;
}
.bestrate-extend {
  background: #fffbef !important;
  border: 1px solid #ffe5a0 !important;
  border-left: 4px solid #f0a500 !important;
  border-radius: 8px !important;
  padding: 10px 14px !important;
  font-size: 13px !important; color: #5a3e00 !important;
  line-height: 1.55 !important; margin-bottom: 10px !important;
}
.bestrate-footnote {
  font-size: 11px !important; color: #6b8a72 !important;
  font-style: italic !important; margin-top: 6px !important;
}
/* Legacy — kept for backwards compat if any stray references remain */
.bestrate-savings { padding: 0 !important; font-size: 14px !important; color: #155724 !important; display: block !important; }
.bestrate-table   { display: none !important; }
.diff-badge       { display: none !important; }

/* Promo */
.promo-card {
  margin: 12px 24px 20px !important;
  border: 1px solid #ffe5a0 !important;
  border-left: 4px solid #f0a500 !important;
  border-radius: 12px !important;
  overflow: hidden !important;
  background: #fff8e7 !important;
  display: block !important;
}
.promo-head {
  background: #fff3cd !important;
  border-bottom: 1px solid #ffe5a0 !important;
  padding: 11px 18px !important;
  font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: 2px !important; text-transform: uppercase !important;
  color: #7a5c00 !important;
  display: flex !important; align-items: center !important; gap: 6px !important;
}
.promo-body { padding: 16px 18px !important; }
.promo-title { font-size: 16px !important; font-weight: 900 !important; color: #7a5c00 !important; margin-bottom: 8px !important; display: block !important; }
.promo-text  { font-size: 14px !important; color: #5a3e00 !important; line-height: 1.7 !important; }
.promo-fine  { font-size: 13px !important; color: #9a7030 !important; margin-top: 10px !important; line-height: 1.5 !important; display: block !important; }

/* Extend tip */
.extend-tip {
  background: #fffbef !important;
  border: 2px solid #f0a500 !important;
  border-left: 5px solid #f0a500 !important;
  border-radius: 9px !important;
  padding: 12px 16px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #5a3e00 !important;
  line-height: 1.6 !important;
  margin: 8px 16px 14px !important;
  display: block !important;
  box-shadow: 0 2px 8px rgba(240,165,0,.15) !important;
}

@media (max-width: 580px) {
  .pricing-card, .bestrate-card, .promo-card {
    margin-left: 14px !important; margin-right: 14px !important;
  }
}

/* ── Comments ───────────────────────────────────────────────────── */
.ecare-comments-row {
  padding:16px 22px 22px !important; margin:0 !important;
  display:flex !important; flex-direction:column !important;
}
.ecare-comments-row label.field { margin-bottom:6px !important; }
.ecare-comments-row textarea.comments {
  display:block !important; width:100% !important; padding:12px 14px !important;
  border:1.5px solid #d1d9e6 !important; border-radius:8px !important;
  font-size:16px !important; color:#111827 !important;
  background:#fafbfc !important; resize:vertical !important;
  min-height:90px !important; font-family:inherit !important; margin:0 !important;
}
.ecare-comments-row textarea.comments:focus {
  border-color:#3d8bd4 !important;
  box-shadow:0 0 0 3px rgba(61,139,212,.13) !important;
  background:#fff !important; outline:none !important;
}
.textarea-footer {
  font-size:12px !important; color:#9ca3af !important;
  text-align:right !important; margin-top:4px !important; padding:0 !important;
}


/* ── Submit footer ──────────────────────────────────────────────── */
#submit-button {
  background:linear-gradient(135deg,#0f4c8c 0%,#083260 100%) !important;
  padding:22px 24px !important; margin:0 !important;
  display:block !important;
  border:none !important; position:relative !important;
}
#submit-footer-text { display:block !important; margin-bottom:14px !important; }
.submit-almost {
  display:block !important; font-size:17px !important; font-weight:900 !important;
  color:#fff !important; margin:0 0 4px !important; padding:0 !important;
}
.submit-note {
  display:block !important; font-size:13px !important;
  color:rgba(255,255,255,.75) !important; font-weight:500 !important;
  line-height:1.4 !important; margin:0 !important; padding:0 !important;
}
/* All buttons — full width stacked */
#submit-button a, #submit-button a#product-button-submit,
#submit-button a#product-button-reserve, #submit-button a#product-button-quote {
  display:block !important; width:100% !important; box-sizing:border-box !important;
  text-align:center !important; white-space:normal !important;
  color:#0b3a6a !important; font-weight:900 !important;
  letter-spacing:.04em !important; text-transform:uppercase !important;
  border-radius:10px !important;
  border:1px solid rgba(255,255,255,.5) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.22) !important;
  flex-shrink:unset !important;
  text-decoration:none !important; height:auto !important; line-height:1.3 !important;
  transition:transform .15s, box-shadow .15s !important;
}
/* Reserve — primary blue */
#submit-button a#product-button-reserve {
  background:linear-gradient(135deg,#fff 0%,#f0f6ff 100%) !important;
  padding:18px 20px !important; font-size:18px !important;
  margin-bottom:12px !important;
}
/* Quote — secondary grey when payments ON */
#submit-button a#product-button-quote {
  background:rgba(255,255,255,.15) !important;
  border:1px solid rgba(255,255,255,.3) !important;
  color:#fff !important; padding:13px 20px !important;
  font-size:15px !important; font-weight:700 !important;
  box-shadow:none !important;
}
/* Quote — looks like Reserve button when payments OFF */
#submit-button a#product-button-quote.payments-off-btn {
  background:linear-gradient(135deg,#fff 0%,#f0f6ff 100%) !important;
  color:#0b3a6a !important; padding:18px 20px !important;
  font-size:18px !important; font-weight:900 !important;
  border:1px solid rgba(255,255,255,.5) !important;
  box-shadow:0 4px 0 rgba(0,0,0,.2), 0 8px 20px rgba(0,0,0,.22) !important;
  margin-bottom:0 !important;
}
#submit-button a:hover, #submit-button a#product-button-reserve:hover,
#submit-button a#product-button-quote.payments-off-btn:hover {
  transform:translateY(-2px) !important;
  box-shadow:0 6px 0 rgba(0,0,0,.18), 0 12px 28px rgba(0,0,0,.26) !important;
  background:linear-gradient(135deg,#e8f0fe 0%,#d6e8ff 100%) !important;
  color:#0b3a6a !important;
}
#submit-button a#product-button-quote:hover {
  background:rgba(255,255,255,.25) !important;
  transform:translateY(-1px) !important;
  box-shadow:none !important; color:#fff !important;
}
@media(max-width:580px) {
  #submit-button { padding:18px 16px !important; }
  .submit-almost, .submit-note { text-align:center !important; }
}

/* =================================================================
   FEE BREAKDOWN — inside pricing-total section
   ================================================================= */
.fee-breakdown-table {
  width: 100% !important;
  border-collapse: collapse !important;
  margin: 10px 0 0 0 !important;
}
.fee-breakdown-table td {
  padding: 4px 0 !important;
  font-size: 14px !important;
  color: #0b3a6a !important;
  vertical-align: middle !important;
  border: none !important;
  background: transparent !important;
}
.fee-label {
  text-align: left !important;
  font-weight: 600 !important;
  width: 70% !important;
}
.fee-rate {
  font-size: 12px !important;
  font-weight: 500 !important;
  color: #4a6080 !important;
  margin-left: 4px !important;
}
.fee-amount {
  text-align: right !important;
  font-weight: 800 !important;
  white-space: nowrap !important;
}
.fee-tbd {
  color: #9a6c00 !important;
  background: #fff3cd !important;
  border-radius: 6px !important;
  padding: 2px 8px !important;
  font-size: 13px !important;
  font-weight: 900 !important;
}
.fee-divider {
  border-top: 1.5px solid #c8ddf0 !important;
  margin: 10px 0 8px !important;
}
.fee-tbd-note {
  font-size: 15px !important;
  font-weight: 600 !important;
  color: #4a6080 !important;
  margin-left: 4px !important;
}

/* Fee footnote row in bestrate table */
.fee-footnote-row td {
  padding: 6px 16px 10px !important;
  background: #f5f9ff !important;
  border-top: 1px solid #e0eef8 !important;
}
.fee-footnote {
  font-size: 11px !important;
  color: #6b7280 !important;
  font-style: italic !important;
  display: block !important;
}

/* =================================================================
   EMAIL NUDGE — inline hint beneath email field
   ================================================================= */
.email-nudge {
  font-size: 13px !important;
  color: #0b3a6a !important;
  font-weight: 600 !important;
  margin-top: 6px !important;
  padding: 7px 11px !important;
  background: #eef6ff !important;
  border-left: 3px solid #3d8bd4 !important;
  border-radius: 0 6px 6px 0 !important;
  line-height: 1.5 !important;
  display: block !important;
}

/* =================================================================
   EMAIL SUBMIT BANNER — last-chance nudge above submit button
   ================================================================= */
.email-submit-banner {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  background: #fff8e7 !important;
  border-top: 2px solid #f0a500 !important;
  border-bottom: 2px solid #f0a500 !important;
  padding: 14px 22px !important;
  margin: 0 !important;
  animation: bannerFadeIn .3s ease !important;
}
@keyframes bannerFadeIn {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.email-banner-icon {
  font-size: 26px !important;
  flex-shrink: 0 !important;
  line-height: 1 !important;
}
.email-banner-text {
  font-size: 15px !important;
  color: #5a3e00 !important;
  line-height: 1.6 !important;
  font-weight: 500 !important;
}
.email-banner-text strong {
  color: #3a2800 !important;
  font-weight: 900 !important;
}
.email-banner-link {
  color: #0b3a6a !important;
  font-weight: 900 !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
}
.email-banner-link:hover {
  color: #3d8bd4 !important;
}
@media (max-width: 580px) {
  .email-submit-banner { padding: 12px 14px !important; gap: 10px !important; }
  .email-banner-icon   { font-size: 22px !important; }
  .email-banner-text   { font-size: 14px !important; }
}

.email-banner-skip {
  color: #7a5c00 !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  white-space: nowrap !important;
  opacity: .8 !important;
}
.email-banner-skip:hover { opacity: 1 !important; }

/* ── Delivery required explanation ───────────────────────── */

.delivery-required-explainer{
  margin:6px 0 10px 0 !important;
  padding:10px 14px !important;
  background:#fff7e6 !important;
  border-left:4px solid #f0a500 !important;
  border-radius:6px !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:#5a3e00 !important;
  line-height:1.5 !important;
}

.delivery-required-explainer strong{
  color:#7a4f00 !important;
}

.delivery-required-label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.delivery-required-icon{
  font-size:16px !important;
}

/* ── Delivery promotion tip ───────────────────────── */
/* ── Delivery required explanation ───────────────────────── */

.delivery-required-explainer{
  margin:6px 0 10px 0 !important;
  padding:10px 14px !important;
  background:#fff7e6 !important;
  border-left:4px solid #f0a500 !important;
  border-radius:6px !important;
  font-size:14px !important;
  font-weight:600 !important;
  color:#5a3e00 !important;
  line-height:1.5 !important;
}

.delivery-required-explainer strong{
  color:#7a4f00 !important;
}

.delivery-required-label{
  display:flex !important;
  align-items:center !important;
  gap:8px !important;
}

.delivery-required-icon{
  font-size:16px !important;
}


/* ── Store Pickup promotion tip ───────────────────────── */

.pick-promo-tip{
  margin:14px 0 10px 0 !important;
  padding:14px 18px !important;
  background:#f5f8fc !important;
  border-left:5px solid #0b3a6a !important;
  border-radius:9px !important;
  font-size:14px !important;
  font-weight:400 !important;
  color:#0b3a6a !important;
  line-height:1.6 !important;
  box-shadow:0 2px 8px rgba(0,0,0,.06) !important;
}

.pick-promo-tip strong{
  color:#083260 !important;
}


/* ── Delivery promotion tip ───────────────────────── */

.delivery-promo-tip{
  margin:14px 0 18px 0 !important;
  padding:14px 18px !important;
  background:#fffbef !important;
  border-left:5px solid #f0a500 !important;
  border-radius:9px !important;
  font-size:14px !important;
  font-weight:400 !important;
  color:#5a3e00 !important;
  line-height:1.6 !important;
  box-shadow:0 2px 8px rgba(240,165,0,.15) !important;
}

.delivery-promo-tip strong{
  color:#7a4f00 !important;
}


/* ── spacing between pickup and delivery tips ───────────────── */

.pick-promo-tip + .delivery-promo-tip{
  margin-top:8px !important;
}

/* =================================================================
   MOBILE — Equipment Table
   The table lives inside .equipment-table-scroll which provides
   the horizontal scroll container. On desktop it is invisible;
   on mobile it clips & scrolls so nothing overflows the card.
   ================================================================= */

/* Scroll wrapper — injected by JS around the table */
.equipment-table-scroll {
  width: 100% !important;
  overflow-x: auto !important;
  -webkit-overflow-scrolling: touch !important;
  border-radius: 10px !important;
  /* Subtle shadow hint that content is scrollable */
}

/* Remove the old display:block override — table stays a real table */
#equipment-form #equipment-table {
  min-width: 420px !important;   /* keeps cols readable; scroll kicks in below this */
  table-layout: auto !important; /* let columns size naturally, not fixed */
}

@media (max-width: 640px) {

  /* ── Card padding: give the table a bit more breathing room ── */
  div#equipment-form .ecare-field-body { padding: 12px 10px 16px !important; }

  /* ── Table: let it be as wide as it needs; wrapper scrolls ── */
  #equipment-form #equipment-table {
    min-width: 380px !important;
    font-size: 14px !important;
  }

  /* ── Shrink image column ── */
  #equipment-table td:nth-child(2) img {
    width: 40px !important;
    height: auto !important;
  }

  /* ── Equipment name: wrap text so it doesn't force extra width ── */
  #equipment-table td:nth-child(3) {
    white-space: normal !important;
    word-break: break-word !important;
    min-width: 120px !important;
  }

  /* ── Rate columns: tighter ── */
  #equipment-table th.th-rate,
  #equipment-table td.td-rate {
    min-width: 54px !important;
    padding: 10px 4px !important;
  }

  /* ── Rate pills: compact ── */
  .ecare-rate-pill {
    padding: 3px 6px !important;
    font-size: 11px !important;
  }

  /* ── Table header cells ── */
  #equipment-table thead th {
    padding: 8px 6px !important;
    font-size: 9px !important;
  }

  /* ── Table body cells ── */
  #equipment-table tbody td {
    padding: 10px 6px !important;
    font-size: 14px !important;
  }

  /* ── Scroll hint fade on right edge (cosmetic) ── */
  .equipment-table-scroll {
    background:
      linear-gradient(to right, #fff 0%, transparent 16px),
      linear-gradient(to left,  #e8edf4 0%, transparent 20px) right center / 20px 100% no-repeat,
      #fff !important;
    background-attachment: local, scroll !important;
  }

  /* ── Pricing / best-rate / promo cards ── */
  .pricing-card, .bestrate-card, .promo-card {
    margin-left: 10px !important;
    margin-right: 10px !important;
  }

  /* ── Dates row ── */
  #ecare-dates-row {
    grid-template-columns: 1fr !important;
    padding: 0 12px !important;
  }

  /* ── Delivery address section ── */
  #delivery-address-section {
    padding: 12px 12px 0 !important;
  }

  /* ── Legend strip label — prevent overflow ── */
  div#equipment-form fieldset legend {
    padding: 11px 14px !important;
    flex-wrap: wrap !important;
    gap: 6px !important;
  }

  /* ── Toggle pills ── */
  .ecare-toggle-group { flex-wrap: wrap !important; }
  .ecare-toggle-pill  { flex: 1 1 100% !important; padding: 13px 12px !important; }

}

@media (max-width: 420px) {
  /* Very small phones — tighten card padding even further */
  div#equipment-form .ecare-field-body { padding: 10px 8px 14px !important; }
  #equipment-form #equipment-table { min-width: 340px !important; }
  .reservation-request-container { width: 100% !important; padding: 0 !important; }
}

/* =================================================================
   DATEPICKER — Custom jQuery UI theme (E Care navy style)
   ================================================================= */
.ui-datepicker {
  font-family: 'Segoe UI', Arial, sans-serif !important;
  font-size: 15px !important;
  border: 1px solid #c5d8ee !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 32px rgba(11,58,106,.18), 0 2px 8px rgba(0,0,0,.10) !important;
  padding: 0 !important;
  overflow: hidden !important;
  background: #fff !important;
  width: auto !important;
  z-index: 9999 !important;
}
.ui-datepicker-header {
  background: linear-gradient(135deg,#0f4c8c,#083260) !important;
  border: none !important;
  border-radius: 0 !important;
  padding: 12px 8px !important;
  color: #fff !important;
  font-weight: 900 !important;
  display: flex !important; align-items: center !important;
}
.ui-datepicker-title {
  font-size: 15px !important; font-weight: 900 !important;
  color: #fff !important; text-align: center !important;
  flex: 1 !important; line-height: 1.3 !important;
}
.ui-datepicker-title select {
  font-size: 14px !important; font-weight: 700 !important;
  color: #0b3a6a !important; border-radius: 6px !important;
  border: 1px solid #b0c8e8 !important;
  padding: 3px 6px !important; background: #fff !important;
  cursor: pointer !important;
}
.ui-datepicker-prev,
.ui-datepicker-next {
  background: rgba(255,255,255,.15) !important;
  border-radius: 6px !important;
  top: 50% !important; transform: translateY(-50%) !important;
  width: 32px !important; height: 32px !important;
  display: flex !important; align-items: center !important; justify-content: center !important;
  cursor: pointer !important; border: none !important;
  transition: background .15s !important;
}
.ui-datepicker-prev { left: 8px !important; }
.ui-datepicker-next { right: 8px !important; }
.ui-datepicker-prev:hover,
.ui-datepicker-next:hover {
  background: rgba(255,255,255,.30) !important;
}
.ui-datepicker-prev span,
.ui-datepicker-next span {
  background: none !important;
  border: none !important;
  width: auto !important; height: auto !important;
  top: auto !important; left: auto !important;
  margin: 0 !important; position: static !important;
  overflow: visible !important; text-indent: 0 !important;
  font-size: 16px !important; color: #fff !important; font-weight: 900 !important;
}
.ui-icon-circle-triangle-w::before { content: "‹" !important; }
.ui-icon-circle-triangle-e::before { content: "›" !important; }
.ui-datepicker table {
  width: 100% !important; border-collapse: collapse !important;
  font-size: 14px !important; margin: 0 !important;
}
.ui-datepicker th {
  background: #f0f5fb !important;
  color: #0b3a6a !important;
  font-size: 11px !important; font-weight: 900 !important;
  letter-spacing: 1px !important; text-transform: uppercase !important;
  padding: 8px 4px !important; text-align: center !important;
  border: none !important;
}
.ui-datepicker td {
  padding: 2px !important; text-align: center !important;
  border: none !important;
}
.ui-datepicker td a,
.ui-datepicker td span {
  display: flex !important; align-items: center !important;
  justify-content: center !important;
  width: 34px !important; height: 34px !important;
  border-radius: 50% !important;
  font-size: 14px !important; font-weight: 600 !important;
  color: #111827 !important; text-decoration: none !important;
  transition: background .12s, color .12s !important;
  background: transparent !important; border: none !important;
  margin: 0 auto !important;
}
.ui-datepicker td a:hover {
  background: #d6e8f5 !important; color: #0b3a6a !important;
}
.ui-datepicker td.ui-datepicker-today a {
  background: #e8f3ff !important;
  color: #0b3a6a !important;
  font-weight: 900 !important;
  border: 2px solid #3d8bd4 !important;
}
.ui-datepicker td.ui-datepicker-current-day a,
.ui-state-active {
  background: linear-gradient(135deg,#0f4c8c,#083260) !important;
  color: #fff !important;
  font-weight: 900 !important;
  border-radius: 50% !important;
}
.ui-datepicker td.ui-state-disabled span {
  color: #c8d5e3 !important;
  background: transparent !important;
}
.ui-datepicker-calendar tbody { padding: 6px 8px !important; }
.ui-datepicker-calendar { padding: 6px 8px 10px !important; }
/* Mobile — make picker wider & touch-friendly */
@media (max-width: 640px) {
  .ui-datepicker {
    width: calc(100vw - 32px) !important;
    left: 16px !important;
    right: 16px !important;
    max-width: 340px !important;
    font-size: 16px !important;
  }
  .ui-datepicker td a,
  .ui-datepicker td span {
    width: 40px !important; height: 40px !important; font-size: 15px !important;
  }
  .ui-datepicker th { padding: 10px 4px !important; font-size: 12px !important; }
}

/* =================================================================
   STORE PICK-UP TIME SELECTOR
   ================================================================= */
#rentalPickupTimeSection {
  padding: 0 22px 4px !important;
  margin: 0 !important;
}
#rentalPickupTimeSection label.field {
  padding: 14px 0 9px !important;
  margin: 0 !important;
}
.pickup-time-note {
  font-size: 12px !important;
  color: #5a6f8a !important;
  font-weight: 600 !important;
  margin-top: 7px !important;
  padding: 7px 11px !important;
  background: #f0f5fb !important;
  border-left: 3px solid #3d8bd4 !important;
  border-radius: 0 6px 6px 0 !important;
  line-height: 1.5 !important;
  display: block !important;
}
@media (max-width: 580px) {
  #rentalPickupTimeSection { padding: 0 14px 4px !important; }
}

/* =================================================================
   E CARE RENTAL RESERVATIONS — step bars + submit shimmer patch
   (v4, CSS-only)
   -----------------------------------------------------------------
   Append this block to /assets/css/rental-reservations.css.

   What it does:
     1. STEP BARS: navy gradient background (matches "DELIVERY
        OPTIONS" / "RENTAL JOURNEY" header bars on the page).
     2. STEP BUBBLES: WHITE circles with a soft navy ring and the
        ORIGINAL native emoji rendered in full color inside (person,
        test tube, megaphone). The OS renders the emoji in its
        native multicolor form.
     3. "STEP X OF 3" PILL: gold background, navy text — flipped
        from the translucent-white version. Reads as a brand
        accent against the navy bar.
     4. SUBMIT BUTTONS: glass-shimmer sweep animation identical
        to the hero phone-number pill.

   The "Before You Submit" / ack-block section is now styled
   inline by the PHP that renders it (reservations-ack-section.php).
   No CSS or JS rules for that section live here.

   No PHP edits required for THIS file.
   ================================================================= */

/* =================================================================
   1+2+3.  STEP BARS — navy with WHITE emoji bubbles + GOLD step pill
   ================================================================= */

/* Legend strip → navy bar (overrides the light-gray rule above) */
div#equipment-form fieldset legend {
  background: linear-gradient(180deg, #0f4c8c 0%, #083260 100%) !important;
  border-bottom: 1px solid #061d44 !important;
}

/* Label text → white */
div#equipment-form fieldset legend .legend-label {
  color: #fff !important;
}

/* "Step X of 3" → GOLD pill with navy text */
div#equipment-form fieldset legend .legend-step {
  background: linear-gradient(180deg, #ffc933 0%, #f5b301 100%) !important;
  border: 1px solid #d49600 !important;
  color: #0b3a6a !important;
  padding: 5px 14px !important;
  border-radius: 999px !important;
  font-size: 11px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  box-shadow: 0 2px 6px rgba(212, 150, 0, .35) !important;
}

/* Icon bubble → WHITE CIRCLE with native color emoji inside.
   The emoji entity (👤 / 🧪 / 📢) is already in
   the PHP markup; we just style the wrapper into a white circle and
   size the emoji so it sits nicely centered. */
div#equipment-form fieldset legend .legend-icon-bubble {
  background: #ffffff !important;
  border: 1.5px solid rgba(255, 255, 255, .8) !important;
  border-radius: 50% !important;
  width: 34px !important;
  height: 34px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 18px !important;
  line-height: 1 !important;
  color: initial !important;             /* let emoji render in native color */
  text-indent: 0 !important;
  overflow: visible !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18),
              inset 0 -1px 2px rgba(0, 0, 0, .06) !important;
  flex-shrink: 0 !important;
}

/* =================================================================
   4.  SUBMIT BUTTONS — glass-shimmer sweep (matches hero phone pill)
   ================================================================= */

#submit-button a#product-button-reserve,
#submit-button a#product-button-quote.payments-off-btn,
#submit-button a#product-button-quote {
  position: relative !important;
  overflow: hidden !important;
}

#submit-button a#product-button-reserve > *,
#submit-button a#product-button-quote.payments-off-btn > *,
#submit-button a#product-button-quote > * {
  position: relative;
  z-index: 1;
}

/* PRIMARY buttons (white background) — navy-tinted sweep so it shows */
#submit-button a#product-button-reserve::before,
#submit-button a#product-button-quote.payments-off-btn::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    115deg,
    rgba(11, 58, 106, 0)    0%,
    rgba(11, 58, 106, 0.18) 50%,
    rgba(11, 58, 106, 0)    100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 0;
  animation: ecare-submit-shimmer 4s ease-in-out infinite;
  animation-delay: 1.6s;
}

/* SECONDARY quote (translucent on navy band) — bright white sweep */
#submit-button a#product-button-quote:not(.payments-off-btn)::before {
  content: "";
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    115deg,
    rgba(255, 255, 255, 0)    0%,
    rgba(255, 255, 255, 0.45) 50%,
    rgba(255, 255, 255, 0)    100%
  );
  transform: skewX(-20deg);
  pointer-events: none;
  z-index: 0;
  animation: ecare-submit-shimmer 4s ease-in-out infinite;
  animation-delay: 2.8s;
}

@keyframes ecare-submit-shimmer {
  0%, 30%   { left: -75%; }
  65%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  #submit-button a#product-button-reserve::before,
  #submit-button a#product-button-quote::before,
  #submit-button a#product-button-quote.payments-off-btn::before {
    animation: none !important;
  }
}