/* Book Page Specific Styles */

/* AddOns Additions (no more inline styles) */

.addons-list {
    display: flex;
    flex-direction: column;
    gap: 1.2rem;
}

.addon-card {
    background: var(--bg-dark);
    border: 2px solid var(--border-color);
    border-radius: 1rem;
    box-shadow: 0 2px 8px rgba(0,0,0,0.07);
    padding: 1.2em 1.4em 1em 1.4em;
    cursor: pointer;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.14s;
    outline: none;
    display: flex;
    flex-direction: column;
    gap: 0.5em;
    position: relative;
}
.addon-card.selected, .addon-card:focus, .addon-card:hover {
    border-color: var(--cta-magenta);
    box-shadow: 0 4px 20px rgba(200,0,161,0.13);
    transform: scale(1.025);
}
.addon-item-label {
    display: flex;
    align-items: center;
    gap: 0.8em;
    background: var(--bg-dark);
    border: 2px solid var(--border-color);
    border-radius: 1rem;
    padding: 1.1em 1.2em 1em 1.1em;
    transition: box-shadow 0.18s, border-color 0.18s, transform 0.14s;
    cursor: pointer;
    margin-bottom: 0.2em;
    font-size: 1.05em;
}
.addon-item-label:hover, .addon-item-label:focus-within {
    border-color: var(--cta-magenta);
    box-shadow: 0 4px 20px rgba(200,0,161,0.13);
    transform: scale(1.025);
}
.addon-item-label input[type="checkbox"] {
    margin-right: 0.7em;
    width: 1.2em;
    height: 1.2em;
    accent-color: var(--cta-magenta);
    border-radius: 0.25em;
    border: 2px solid var(--cta-magenta);
}

.addon-card-title {
    color: var(--cta-magenta) !important;
    font-size: 1.2rem;
    font-weight: 700;
    margin-bottom: 0.2em;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 4px rgba(200,0,161,0.08);
}
.addon-card-price {
    font-size: 1.05rem;
    font-weight: 600;
    color: var(--cta-cyan);
    margin-bottom: 0.2em;
}
.addon-quantity-select {
    width: 4.25rem;
    min-width: 4.25rem;
    padding: 0.25rem 0.35rem;
    text-align: center;
    font-size: 0.95rem;
}
.addon-card input[type="checkbox"] {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.addon-desc {
    font-size: 0.95em;
    color: #888;
    margin-left: 1.2em;
}
.addons-title {
    margin-top: 2rem;
    font-size: 1.3rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}
.booking-summary-below-addons {
    margin-top: 2rem;
}
.booking-summary-subtitle {
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.5rem;
}
.btn-large {
    margin-top: 1.5rem;
    min-width: 220px;
    font-size: 1.1rem;
    font-weight: 700;
    border-radius: 0.7rem;
    padding: 0.85em 2.2em;
    text-align: center;
    display: inline-block;
}

/* Updated to align with dark theme and site style guide */

/* Booking Header Section - matches boat.php styling */
.booking-header {
    position: relative;
    background-color: var(--bg-dark);
    background-image: linear-gradient(to right, var(--blue), var(--purple));
    color: var(--text-light);
    padding: 4rem 0 2.5rem;
    text-align: center;
    margin-bottom: 2rem;
}

.booking-header .hero-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(45deg, var(--blue-70), var(--purple-70));
    z-index: 1;
}

.booking-header .container {
    position: relative;
    z-index: 2;
}

.booking-header h1 {
    font-family: var(--font-alt-heading-1);
    font-size: 2.5rem;
    font-weight: 700;
    margin-bottom: 1rem;
    color: var(--cta-cyan);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}

.booking-header .booking-header-price {
    font-family: var(--font-alt-heading-2);
    font-size: 1.25rem;
    opacity: 0.9;
    color: var(--text-light);
}

.booking-header .booking-header-price span {
    font-weight: 700;
    color: var(--cta-yellow);
}

/* Main Content Area */
.booking-section {
    padding-top: 2rem;
    padding-bottom: 3rem;
    width: 100%;
}

/* Grid Layout - Desktop Side-by-Side */
.booking-grid {
    display: grid;
    grid-template-columns: 40% 60%;
    gap: 30px;
    align-items: start;
    margin: 0 auto;
    max-width: 1200px;
    padding: 0 20px;
    box-sizing: border-box;
    width: 100%;
}

/* Typography - Brand Style Guide */
h1 {
    font-family: var(--font-heading);
    font-size: 3rem;
    color: var(--cta-cyan);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h2 {
    font-family: var(--font-heading);
    font-size: 2.5rem;
    color: var(--cta-magenta);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--cta-yellow);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

h4, h5, h6 {
    font-family: var(--font-heading);
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.boat-detail-left h2 {
    color: var(--cta-magenta);
    font-size: 1.8rem;
    border-bottom: 2px solid var(--blue);
    padding-bottom: 0.5rem;
    margin-bottom: 1.5rem;
}

.booking-form-container h2 {
    color: var(--cta-magenta);
}

.booking-form-container h3 {
    color: var(--cta-yellow);
}

p {
    color: var(--text-light);
    line-height: 1.6;
    margin-bottom: 1rem;
}

.spec-label, .price-row span:first-child {
    color: var(--text-light);
    font-weight: 600;
}

.spec-value, .price-row span:last-child {
    color: var(--text-light);
    font-weight: 500;
}

/* Review & Pay Notes and Terms Blocks */
.form-group {
    margin-bottom: 1.7em;
}
.notes-group textarea {
    width: 100%;
    min-height: 3.5em;
    font-size: 1.08em;
    border-radius: 0.7em;
    border: 1px solid #ccc;
    background: #fff;
    color: var(--text-dark);
    padding: 1em 1.2em;
    transition: border-color 0.18s, box-shadow 0.18s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.04);
    resize: vertical;
}
.notes-group textarea:focus {
    border-color: var(--cta-magenta);
    outline: none;
    box-shadow: 0 0 0 2px var(--cta-magenta), 0 2px 8px rgba(200,0,161,0.08);
}
.terms-cancel-group {
    background: var(--bg-dark);
    border-radius: 1em;
    border: 1.5px solid var(--border-color);
    padding: 1.2em 1.4em 1.1em 1.4em;
    margin-bottom: 1.3em;
    box-shadow: 0 2px 12px rgba(200,0,161,0.06);
}

/* --- Trip Questions block: on-brand inputs (cyan accents, brand fonts) --- */
.trip-questions-block {
    box-shadow: 0 0 14px rgba(0,255,255,0.12);
}
.trip-questions-block .trip-question > label {
    font-family: var(--font-heading);
    letter-spacing: 0.3px;
}
.trip-questions-block input[type="text"],
.trip-questions-block input[type="number"],
.trip-questions-block select {
    font-family: var(--font-body);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.trip-questions-block input[type="text"]:focus,
.trip-questions-block input[type="number"]:focus,
.trip-questions-block select:focus {
    border-color: var(--cta-cyan);
    outline: none;
    box-shadow: 0 0 0 2px rgba(0,255,255,0.25);
}
.trip-questions-block input[type="radio"],
.trip-questions-block input[type="checkbox"] {
    accent-color: var(--cta-cyan);
    width: 1.05em;
    height: 1.05em;
    cursor: pointer;
}
.checkbox-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 0.7em;
}
.checkbox-table td {
    vertical-align: top;
    padding: 0.2em 0.6em 0.2em 0;
}
.checkbox-table input[type="checkbox"] {
    accent-color: var(--cta-magenta);
    width: 1.3em;
    height: 1.3em;
    margin-right: 0.7em;
    border-radius: 0.3em;
    border: 2px solid var(--cta-magenta);
}
.checkbox-table label {
    font-size: 1.07em;
    color: var(--text-light);
    font-weight: 500;
    cursor: pointer;
}

/* Two-column layout */
.booking-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 2rem;
}

@media (min-width: 768px) {
    .booking-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* Left column - Boat details */
.boat-detail-left {
    background-color: var(--bg-dark);
    border-radius: 8px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    height: fit-content;
    margin-bottom: 30px;
}

.boat-summary {
    margin-bottom: 1.5rem;
}

.boat-summary h2 {
   font-size: 2rem;
    font-family: var(--font-heading);
    color: var(--cta-magenta);
    margin-bottom: 1rem;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.boat-summary h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--cta-yellow);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.boat-features-list {
    list-style: none;
    padding: 0;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.8rem;
    margin-bottom: 20px;
}

.boat-features-list li {
    color: var(--text-light);
    padding: 0.8rem 1rem;
    border-radius: 6px;
    border-left: 3px solid var(--cta-cyan);
    font-size: 0.9rem;
    word-break: break-word;
    max-width: 100%;
    box-sizing: border-box;
}

.boat-image {
    width: 100%;
    height: auto;
    overflow: hidden;
    border-radius: 8px;
    margin-bottom: 25px;
}

.boat-image img {
    width: 100%;
    height: auto;
    max-height: 350px;
    object-fit: contain;
    display: block;
}

.boat-description {
    color: var(--text-light);
    margin-bottom: 20px;
    padding: 0 10px;
    line-height: 1.6;
}

.boat-specs {
    background-color: var(--bg-dark);
    padding: 15px;
    border-radius: 8px;
}

.spec-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
}

.spec-label {
    font-weight: bold;
    color: var(--text-light);
}

.spec-value {
    color: var(--text-light);
}

/* Right column - Booking Form */
.booking-form-container {
    background-color: var(--bg-dark);
    border-radius: 8px;
    border: 1px solid var(--border-color);
    padding: 1.5rem;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Booking Steps */
.booking-steps {
    display: flex;
    margin-bottom: 2rem;
    padding-bottom: 0.5rem;
    position: relative;
    border-bottom: 2px solid var(--border-color);
    width: 100%;
    box-sizing: border-box;
}

.step {
    padding: 1rem 0.5rem;
    text-align: center;
    position: relative;
    color: var(--text-light);
    font-size: 0.9rem;
    transition: all 0.2s ease;
    cursor: default;
    margin: 0 0.25rem;
}

@media (min-width: 769px) {
    .step {
      flex: 1;
    }
}

.step:not(:last-child)::after {
    content: '→';
    position: absolute;
    top: 50%;
    right: -0.5rem;
    transform: translateY(-50%);
    color: var(--border-color);
    font-size: 1rem;
    z-index: 1;
}

.step::before {
    content: attr(data-step);
    width: 24px;
    height: 24px;
    background-color: var(--bg-dark);
    color: var(--text-light);
    border-radius: 50%;
    display: block;
    margin: 0 auto 0.5rem;
    line-height: 24px;
    font-weight: 600;
    transition: all 0.2s ease;
}

.booking-steps-wrapper {
    overflow-x: auto;
    max-width: 100%;
    -webkit-overflow-scrolling: touch;
}

.booking-steps {
    display: flex;
    flex-wrap: nowrap;
    width: 100%;
    gap: 6px;
}

.booking-steps .step {
    flex: 1;
    padding: 5px 6px;
    background: #1e1e1e;
    color: #fff;
    border-radius: 6px;
    font-size: 12px;
    max-width: 90px; /* adjust as needed */
    text-align: center;
    white-space: normal; /* <— allows wrapping */
    word-break: break-word; /* prevent overflow */
}

.booking-steps .active {
    color: var(--cta-yellow);
    font-weight: 600;
}

.booking-steps .active::before {
    background-color: var(--blue);
    color: var(--text-light);
    box-shadow: 0 0 0 2px rgba(10, 38, 194, 0.3);
}

/* Booking Summary */
.booking-summary {
    margin-bottom: 14px;
    /* No padding/box: its background was the SAME dark as the container behind it,
       so the box was invisible and only inset the content ~16px — making Customer
       Info, Tip, Gift Card and Taxes narrower than (and unaligned with) the
       Payment Options card below. Flattened so every block sits at the column edge
       and lines up with Payment Options. */
    padding: 0;
    background-color: transparent;
    border-radius: 0;
}

.booking-summary h3 {
    font-size: 1.3rem;
    margin-top: 0;
    margin-bottom: 0.6rem;
    color: var(--cta-yellow);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

.summary-date {
    color: var(--cta-magenta);
    font-family: var(--font-heading);
    font-size: 1.1em;
    font-weight: 700;
    margin-bottom: 0.4em;
    text-transform: uppercase;
    letter-spacing: 1px;
}

.summary-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    color: var(--text-light);
}

.summary-item.total {
    margin-top: 15px;
    padding-top: 15px;
    border-top: 1px solid var(--border-color);
    font-weight: bold;
    font-size: 18px;
}

/* Booking Form */
.booking-form {
    background-color: var(--bg-dark);
}

.booking-form h3 {
    font-size: 1.5rem;
    margin-top: 2rem;
    margin-bottom: 1rem;
    color: var(--cta-yellow);
    font-family: var(--font-heading);
    text-transform: uppercase;
    letter-spacing: 1px;
}

/* Form Elements */
.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: var(--text-light);
}

.form-control {
    width: 100%;
    padding: 0.75rem 1rem;
    background-color: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    color: var(--text-dark);
    font-size: 1rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.form-control:focus {
    border-color: var(--cta-magenta);
    box-shadow: 0 0 0 2px rgba(255, 0, 255, 0.15);
    outline: none;
}

/* Error messages */
.error {
    color: var(--red);
    font-size: 14px;
    margin-top: 5px;
    display: block;
}

/* OTP Section */
.otp-section {
    margin-bottom: 30px;
    text-align: center;
}

.otp-form {
    max-width: 300px;
    margin: 0 auto;
}

.demo-otp-box {
    background-color: var(--bg-dark);
    padding: 15px;
    border-radius: 8px;
    margin: 15px auto;
    border-left: 4px solid var(--blue);
    text-align: center;
    max-width: 80%;
}

.demo-otp-box p {
    margin: 5px 0;
    color: var(--text-light);
}

/* OTP Input Fields */
.otp-inputs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

.otp-inputs input {
    width: 40px;
    height: 50px;
    font-size: 1.5rem;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: var(--text-dark);
}

/* Success message */
.success-message {
    display: flex;
    align-items: center;
    padding: 15px;
    background-color: rgba(40, 167, 69, 0.1);
    color: #28a745;
    border-radius: 6px;
    margin-bottom: 20px;
    border: 1px solid rgba(40, 167, 69, 0.2);
}

.success-message svg {
    margin-right: 10px;
    fill: #28a745;
}

/* Customer Info */
.customer-info {
    background-color: var(--bg-dark);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 12px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.customer-info p {
    margin: 5px 0;
    color: var(--text-light);
}

.customer-info strong {
    color: var(--text-light);
    font-weight: 600;
}

/* The global h3 carries margin-top: 2rem — fine between page sections, but it
   leaves a big gap above the "Customer Info" title inside its own padded box.
   Scoped override only (other h3s keep their spacing). */
.customer-info h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
}

/* --- Enhanced Checkbox Table Styling --- */
.form-group.terms-cancel-group {
  margin: 1.5em 0 1em 0;
  display: block;
}
.checkbox-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0 0.7em;
  margin-bottom: 0.5em;
}
.checkbox-table td {
  padding: 0.3em 0.5em 0.3em 0;
  vertical-align: middle;
}
.checkbox-table label {
  font-size: 1.08em;
  color: var(--text-light);
  margin-left: 0.3em;
  font-family: var(--font-body);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.checkbox-table input[type='checkbox'] {
  width: 1.25em;
  height: 1.25em;
  accent-color: var(--cta-magenta);
  margin-right: 0.2em;
  background: var(--bg-dark);
  border: 1.5px solid var(--border-color);
}

/* --- Customer Info Table --- */
.customer-info-table {
  width: 100%;
  background: var(--bg-dark);
  border-radius: 10px;
  border: 1px solid var(--border-color);
  margin: 0.3em 0;
  font-size: 1.08em;
  overflow: hidden;
  color: var(--text-light);
  font-family: var(--font-body);
}
.customer-info-table th, .customer-info-table td {
  padding: 0.55em 1em;
  text-align: left;
  border-bottom: 1px solid var(--border-color);
  color: var(--text-light);
}
.customer-info-table th {
  background: var(--bg-dark);
  color: var(--cta-cyan);
  font-family: var(--font-heading);
  font-weight: 600;
  width: 140px;
  border-bottom: 1px solid var(--border-color);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.customer-info-table td {
  background: var(--bg-dark);
  color: var(--text-light);
  border-bottom: 1px solid var(--border-color);
  font-family: var(--font-body);
}
.customer-info-table tr:last-child th, .customer-info-table tr:last-child td {
  border-bottom: none;
}

/* Responsive for customer info table */
@media (max-width: 600px) {
  .customer-info-table th, .customer-info-table td {
    padding: 0.6em 0.6em;
    font-size: 0.98em;
  }
  .customer-info-table th {
    width: 90px;
  }
}

/* --- Enhanced Booking Summary Table --- */
.summary-table.card-block {
  /* Flattened (was its own bordered, padded card). The rows now sit directly inside
     the .booking-summary box, so the summary reads as ONE card like the addon cards
     below — not a box floating inside another box, which is what left the extra space. */
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  margin-bottom: 0;
  color: var(--text-light);
  font-family: var(--font-body);
}
.summary-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35em 0;
  border-bottom: 1px solid var(--border-color);
  font-size: 1em;
  letter-spacing: 0.01em;
  color: var(--text-light);
}
.summary-row:last-child {
  border-bottom: none;
}
.summary-label {
  color: var(--cta-cyan);
  font-size: 1em;
  font-family: var(--font-heading);
  text-transform: uppercase;
  letter-spacing: 1px;
}
.summary-amount {
  color: var(--cta-yellow);
  font-weight: 700;
  font-size: 1em;
  font-family: var(--font-heading);
}
.summary-subtotal .summary-label, .summary-subtotal .summary-amount {
  font-weight: bold;
  color: var(--pink);
}

/* End enhanced review page styles */


/* Desktop padding adjustment */
.desktop-padding {
    padding-top: 0;
}

@media (min-width: 992px) {
    .desktop-padding {
        padding-top: 30px;
    }
}

/* Customer verified info */
.customer-info {
    background-color: var(--bg-dark);
    padding: 12px 14px;
    border-radius: 8px;
    margin-bottom: 6px;
}

.customer-info p {
    margin: 6px 0;
    color: var(--text-light);
}

/* Dark Theme Specific Overrides */
.dark-theme .success-message {
    background-color: rgba(40, 167, 69, 0.2);
}

.dark-theme .btn-yellow {
    background-color: #FFD700;
    color: #2d2d2d;
}

/* Mobile Responsive - These styles will be overridden for mobile */
.boat-detail-left, .booking-form-container {
    box-sizing: border-box;
    padding: 15px;
}

/* Responsive container fixes */
.container {
    width: 100%;
    padding-left: 15px;
    padding-right: 15px;
    box-sizing: border-box;
}

/* Ensure text content doesn't overflow */
.boat-description, .boat-features-list, .boat-specs {
    max-width: 100%;
    word-wrap: break-word;
    overflow-wrap: break-word;
}

@media (max-width: 576px) {
    .booking-grid {
        grid-template-columns: 1fr;
        padding: 0 15px;
    }
}

@media (max-width: 768px) {
    /* Reset grid to single column layout */
    .booking-grid {
        grid-template-columns: 1fr;
        padding: 0;
        width: 100%;
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    /* Ensure container doesn't overflow */
    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 10px;
        padding-right: 10px;
        overflow-x: hidden;
    }
    
    /* Make buttons full width on mobile */
    button[type="submit"], .btn-yellow {
        width: 100%;
        max-width: none;
    }
    
    .boat-detail-left {
        margin-bottom: 20px;
        margin-left: 10px;
        margin-right: 10px;
        width: calc(100% - 20px);
    }

    .booking-form-container {
        margin-left: 10px;
        margin-right: 10px;
        width: calc(100% - 20px);
        overflow: hidden;
    }
    
    /* Ensure content fits within viewport */
    .boat-image {
        width: 100%;
        height: auto;
    }
    
    .boat-image img {
        max-width: 100%;
        height: auto;
    }
    
    /* Make feature lists single column on mobile */
    .boat-features-list {
        grid-template-columns: 1fr !important;
        width: 100%;
    }
    
    .boat-features-list li {
        box-sizing: border-box;
        width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
    
    /* Auto-scroll to booking steps on mobile */
    .booking-steps-wrapper {
        overflow-x: auto;
        max-width: 100%;
    }

    .booking-steps {
        width: max-content;
    }
    
    .booking-steps .step {
        flex: 0 0 auto;
        max-width: 110px;
        font-size: 13px;
    }

    /* Prevent summary text from overflowing */
    .booking-summary,
    .restyled-summary,
    .summary-table,
    .summary-row {
        max-width: 100%;
        overflow-wrap: break-word;
        word-wrap: break-word;
    }
}

/* Tablet Responsive */
@media (min-width: 769px) and (max-width: 1024px) {
    .booking-grid {
        grid-template-columns: 1fr 1.5fr;
    }
}

/* -------------------------------------------------------
   Coupon & Gift-Card promo input rows
   Shared layout for any "input + apply button" combo.
   ------------------------------------------------------- */
.promo-input-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    width: 100%;
}

.promo-input {
    flex: 1 1 0%;
    min-width: 0;          /* allow shrinking inside flex */
    font-size: 1em;
    padding: 0.45em 0.75em;
    border-radius: 6px;
    border: 1.5px solid var(--cta-magenta);
    background: var(--bg-dark, #1a1a2e);
    color: var(--text-light, #fff);
    font-family: var(--font-body);
    box-sizing: border-box;
}

.promo-input::placeholder {
    color: var(--text-muted, #888);
    opacity: 0.7;
}

.promo-apply-btn {
    flex: 0 0 auto;
    white-space: nowrap;
    padding: 0.45em 1.2em !important;
    font-size: 1em !important;
}

@media (max-width: 480px) {
    .promo-input-row {
        gap: 0.4em;
    }
    .promo-input {
        font-size: 0.9em;
        padding: 0.5em 0.6em;
    }
    .promo-apply-btn {
        padding: 0.5em 0.9em !important;
        font-size: 0.9em !important;
    }
}

/* PayPal Pay Later messaging — Brand Style Guide */
.paypal-paylater-info {
    margin-top: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.paypal-paylater-decision {
    margin: 0;
    text-align: center;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-size: 1.1rem;
    color: var(--cta-yellow);
    padding-bottom: 0.6rem;
    border-bottom: 2px solid var(--cta-magenta);
}
.paypal-paylater-card {
    background: var(--bg-dark);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--cta-magenta);
    border-radius: 16px;
    padding: 1.1em 1.3em;
}
.paypal-paylater-card h4 {
    margin: 0 0 0.5em 0;
    font-family: var(--font-heading);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--cta-cyan);
    font-size: 1.1rem;
}
.paypal-paylater-card p {
    margin: 0 0 0.7em 0;
    font-family: var(--font-body);
    color: var(--text-light);
    font-size: 0.98rem;
    line-height: 1.5;
}
.paypal-paylater-card ul {
    margin: 0;
    padding-left: 1.2em;
    font-family: var(--font-body);
    color: #b8b8b8;
    font-size: 0.92rem;
    line-height: 1.5;
}
.paypal-paylater-card li {
    margin-bottom: 0.35em;
}
.paypal-paylater-card sup {
    color: var(--cta-magenta);
}

/* ── Agreement rows (main page) ─────────────────────────────────────────────── */
.agr-row {
    display: grid;
    grid-template-columns: 1.4em 1fr auto;
    align-items: center;
    gap: 0.75em;
    padding: 0.85em 0;
    border-bottom: 1px solid rgba(255,255,255,.07);
}
.agr-row:last-child { border-bottom: none; }
.agr-row input[type="checkbox"] {
    pointer-events: none;
}
/* Clearly-visible custom checkbox: native accent-color / disabled greying is too
   faint on the dark theme. Empty = cyan outline; checked = magenta box + white check. */
.agr-row input[type="checkbox"],
.agr-agree-label input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 1.4em;
    height: 1.4em;
    margin: 0;
    flex-shrink: 0;
    border: 2px solid var(--cta-cyan);
    border-radius: 4px;
    background: transparent;
    position: relative;
    cursor: pointer;
    opacity: 1;
}
.agr-row input[type="checkbox"]:checked,
.agr-agree-label input[type="checkbox"]:checked {
    background: var(--cta-magenta);
    border-color: var(--cta-magenta);
}
.agr-row input[type="checkbox"]:checked::after,
.agr-agree-label input[type="checkbox"]:checked::after {
    content: '';
    position: absolute;
    left: 0.42em;
    top: 0.16em;
    width: 0.3em;
    height: 0.62em;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}
.agr-row label {
    font-family: var(--font-body);
    font-size: 1em;
    font-weight: 600;
    color: var(--text-light);
    line-height: 1.35;
    cursor: default;
}
.btn-agr-read {
    white-space: nowrap;
    background: transparent;
    border: 1.5px solid var(--cta-cyan);
    color: var(--cta-cyan);
    border-radius: 4px;
    padding: 0.35em 1em;
    font-family: var(--font-heading);
    font-size: 0.8em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    cursor: pointer;
    transition: background .15s, color .15s;
}
.btn-agr-read:hover { background: var(--cta-cyan); color: #000; }

/* ── Agreement <dialog> modals ─────────────────────────────────────────────── */
dialog.agr-dialog {
    background: var(--bg-dark);
    color: var(--text-light);
    border: 2px solid var(--cta-cyan);
    border-radius: 8px;
    padding: 0;
    max-width: 760px;
    width: 92vw;
    max-height: 88vh;
    margin: auto;
    box-shadow: 0 0 48px rgba(0,255,255,.10), 0 12px 48px rgba(0,0,0,.85);
    /* display is NOT set here — browser hides closed dialogs natively */
}
dialog.agr-dialog[open] {
    display: flex;
    flex-direction: column;
}
dialog.agr-dialog::backdrop {
    background: rgba(0,0,0,.82);
    backdrop-filter: blur(4px);
}
@media (max-width: 600px) {
    dialog.agr-dialog {
        width: 98vw;
        max-height: 92vh;
        border-radius: 10px;
    }
    .agr-dialog-header { padding: 0.9em 1.1em; }
    .agr-dialog-header > span { font-size: 0.9em; }
    .agr-dialog-body { padding: 1.1em 1.1em; font-size: 0.93em; }
    .agr-dialog-footer { padding: 0.9em 1.1em; flex-wrap: wrap; gap: 0.8em; }
    .agr-row label { font-size: 0.9em; }
    .btn-agr-read { font-size: 0.75em; padding: 0.3em 0.75em; }
}

/* Header */
.agr-dialog-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1em;
    padding: 1.1em 1.6em;
    background: rgba(0,255,255,.05);
    border-bottom: 2px solid var(--cta-cyan);
}
.agr-dialog-header > span {
    font-family: var(--font-heading);
    font-size: 1.1em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    color: var(--cta-cyan);
    line-height: 1.25;
}
.agr-close-btn {
    flex-shrink: 0;
    background: none;
    border: none;
    color: rgba(245,245,245,.55);
    font-size: 1.6em;
    line-height: 1;
    cursor: pointer;
    padding: 0 0.1em;
    transition: color .15s;
}
.agr-close-btn:hover { color: var(--cta-magenta); }

/* Body */
.agr-dialog-body {
    overflow-y: auto;
    padding: 1.6em 2em;
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.97em;
    line-height: 1.85;
    color: rgba(245,245,245,.92);
}
.agr-entity {
    font-family: var(--font-heading);
    font-size: 0.75em;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: rgba(245,245,245,.35);
    margin: 0 0 1.8em;
}
.agr-dialog-body h3 {
    font-family: var(--font-heading);
    font-size: 0.95em;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--cta-magenta);
    margin: 2em 0 0.6em;
    padding-bottom: 0.35em;
    border-bottom: 1px solid rgba(255,0,255,.22);
}
.agr-dialog-body h3:first-of-type { margin-top: 0; }
.agr-dialog-body p {
    font-family: var(--font-body);
    font-size: 0.95em;
    color: rgba(245,245,245,.9);
    margin: 0 0 1.1em;
}
.agr-dialog-body strong {
    color: var(--text-light);
    font-weight: 700;
}

/* Footer */
.agr-dialog-footer {
    display: flex;
    align-items: flex-start;
    gap: 1.2em;
    padding: 1.1em 2em;
    border-top: 1px solid rgba(255,255,255,.1);
    background: rgba(255,255,255,.03);
}
.agr-agree-label {
    display: flex;
    align-items: flex-start;
    gap: 0.65em;
    cursor: pointer;
    flex: 1;
    font-family: var(--font-body);
    font-size: 0.95em;
    font-weight: 600;
    color: var(--text-light);
    line-height: 1.4;
}
.agr-agree-label input[type="checkbox"] {
    margin-top: 0.12em;
}
.btn-agr-close-text {
    flex-shrink: 0;
    background: none;
    border: 1px solid rgba(255,255,255,.22);
    color: rgba(245,245,245,.5);
    border-radius: 4px;
    padding: 0.4em 1.1em;
    font-family: var(--font-body);
    font-size: 0.88em;
    cursor: pointer;
    white-space: nowrap;
    transition: border-color .15s, color .15s;
}
.btn-agr-close-text:hover {
    border-color: rgba(255,255,255,.55);
    color: var(--text-light);
}

/* OTP delivery-channel chooser (email vs text message) */
.otp-channel-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 1.25rem;
    margin-top: .35rem;
}
.otp-channel-opt {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-weight: 400;
    cursor: pointer;
    margin: 0;
}
.otp-channel-opt input[type="radio"] {
    width: auto;
    margin: 0;
    accent-color: var(--cta-cyan, #19c3e6);
}

/* ── "Change Your Selection" on the review page (2026-08-24) ─────────────────
   Deliberately a SECONDARY control: it sits under the chosen date/time, and it
   must not compete with Pay Now. Outline, not fill. */
.summary-change {
  margin: .35rem 0 1rem;
  text-align: center;
}
.summary-change-btn {
  display: inline-block;
  padding: .5rem 1.1rem;
  border: 1px solid var(--cta-cyan, #22d3ee);
  border-radius: 4px;
  color: var(--cta-cyan, #22d3ee);
  background: transparent;
  font-family: 'Oswald', sans-serif;
  font-size: .85rem;
  letter-spacing: .04em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background .15s ease, color .15s ease;
}
.summary-change-btn:hover,
.summary-change-btn:focus {
  background: var(--cta-cyan, #22d3ee);
  color: #0b1220;
  text-decoration: none;
}

/* ── Privacy reassurance above the details fields (2026-08-24) ───────────────
   Quiet by design: it is a reassurance, not a warning. Loud styling here makes
   people wonder what the catch is. */
.privacy-note {
  margin: 0 0 1.1rem;
  padding: .55rem .8rem;
  border-left: 2px solid var(--cta-cyan, #22d3ee);
  background: rgba(34, 211, 238, .06);
  border-radius: 0 3px 3px 0;
  font-size: .88rem;
  line-height: 1.5;
  color: #c8d4e0;
}