/* ============================================================
   pages.css – Responsive redesign for Vouchers, Bookings & Error pages
   ============================================================ */

/* ----------------------------------------------------------
   Page background
   ---------------------------------------------------------- */
#content {
    background-color: #f4f5f7;
}

/* ----------------------------------------------------------
   Card component
   ---------------------------------------------------------- */
.page-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 2rem;
    margin-bottom: 1.5rem;
}

.page-card h2 {
    color: #231F20;
    font-size: 1.25rem;
    font-weight: 700;
    padding-bottom: 0.75rem;
    margin-bottom: 1.25rem;
    border-bottom: 3px solid #ff9900;
}

/* ----------------------------------------------------------
   Form rows (replace table-based form layout)
   ---------------------------------------------------------- */
.form-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 0.875rem;
}

.form-row label {
    min-width: 10.625rem;
    text-align: right;
    font-size: 0.875rem;
    color: #5f6062;
    flex-shrink: 0;
}

.form-row input[type="text"],
.form-row select {
    flex: 1;
    max-width: 100%;
}

.form-row .input-hint {
    font-size: 0.75rem;
    color: #888;
    white-space: nowrap;
}

.form-row .expiry-group {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    flex: 1;
}

.form-row .expiry-group select {
    width: 4.375rem;
    flex: none;
}

.form-row .expiry-group small {
    color: #888;
}

.form-mandatory-note {
    font-size: 0.8125rem;
    color: #5f6062;
    margin-bottom: 1.125rem;
}

/* ----------------------------------------------------------
   Voucher page layout
   ---------------------------------------------------------- */
.voucher-page-intro {
    max-width: 60rem;
    margin: 0 auto 1.5rem;
    padding: 0 0.9375rem;
    font-size: 0.9375rem;
    line-height: 1.6;
}

.voucher-page-intro h1 {
    margin-bottom: 0.5rem;
}

.voucher-page-intro .subtitle {
    color: #888;
    font-size: 1rem;
}

.voucher-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
    align-items: start;
    max-width: 68.75rem;
    margin: 0 auto;
    padding: 0 0.9375rem;
}

.voucher-content {
    background-image: url('../assets/bg-foot.jpg');
    background-repeat: repeat;
    background-size: auto;
    padding: 3.75rem 0;
}

/* Notes/terms list inside card */
.voucher-notes {
    font-size: 0.8125rem;
    color: #5f6062;
    padding-left: 1.125rem;
    margin: 0.75rem 0;
    line-height: 1.7;
}

.voucher-submit-area {
    margin-top: 1.25rem;
}

.voucher-submit-area .terms-check {
    display: flex;
    align-items: flex-start;
    gap: 0.5rem;
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.4;
}

.link-blue {
    color: #1668a2;
    text-decoration: underline;
    font-weight: bold;
}

/* ----------------------------------------------------------
   Booking pages layout
   ---------------------------------------------------------- */
.booking-page {
    max-width: 60rem;
    margin: 0 auto;
    padding: 2.5rem 0.9375rem;
}

.booking-intro {
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.booking-intro a {
    color: #1668a2;
    text-decoration: underline;
    font-weight: bold;
}

.booking-state-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 1.5rem 2rem;
    margin-bottom: 1.5rem;
}

.booking-state-card h2 {
    font-size: 1.8rem;
    margin-bottom: 0.75rem;
    color: #231F20;
}

.booking-state-card select {
    max-width: 25rem;
}

.programs-list {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.program-section {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    padding: 1.75rem 2rem;
}

.program-section ul {
    padding-left: 1.5rem;
    margin: 0.5rem 0 0;
}

.program-section ul li {
    margin-bottom: 0.25rem;
}

.program-section h3 {
    color: #231F20;
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: 0.375rem;
}

.program-section .learn-more {
    font-size: 0.8125rem;
    margin-bottom: 0.875rem;
    display: inline-block;
}

.program-section .no-programs {
    font-size: 0.875rem;
    color: #5f6062;
    font-style: italic;
    padding: 0.5rem 0;
}

.program-table-wrap {
    overflow-x: auto;
    border-radius: 0.5rem;
    border: 1px solid #e8e8e8;
    margin-top: 0.75rem;
}

.program-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.program-table thead tr {
    background: #ff9900;
}

.program-table th {
    color: #fff;
    font-weight: 700;
    padding: 0.625rem 0.875rem;
    text-align: left;
    white-space: nowrap;
}

.program-table td {
    padding: 0.625rem 0.875rem;
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.program-table tbody tr:last-child td {
    border-bottom: none;
}

.program-table tr.filling {
    background-color: #fff5f5;
}

.program-table tr.full {
    background-color: #ffe0e0;
    color: #888;
}

.program-table tr.normal:hover {
    background-color: #fafafa;
}

.program-book-btn {
    margin-top: 1rem;
    text-align: right;
}

.program-book-btn a img {
    display: inline-block;
    vertical-align: middle;
}

/* ----------------------------------------------------------
   book2.php – Multi-step booking form
   ---------------------------------------------------------- */
.booking-steps {
    max-width: 47.5rem;
    margin: 0 auto;
    padding: 2.5rem 0.9375rem;
}

.booking-steps h1 {
    margin-bottom: 1.5rem;
}

.step-card {
    background: #fff;
    border-radius: 0.75rem;
    box-shadow: 0 2px 16px rgba(0, 0, 0, 0.08);
    margin-bottom: 1rem;
    overflow: hidden;
}

.step-card .stepheader {
    background: #f9f9f9;
    border-bottom: 1px solid #eee;
    padding: 1rem 1.5rem;
}

.step-card .stepheader h2 {
    font-size: 1rem;
    margin: 0;
    color: #231F20;
}

.step-card .stepheader a {
    text-decoration: none;
    color: inherit;
}

.step-card .stepcontent {
    padding: 1.5rem;
}

.step-form-rows .form-row label,
.page-card .form-row label {
    text-align: left;
}

.step-form-rows .form-row,
.page-card .form-row {
    margin-bottom: 0.4rem;
}

#step5content .form-row label {
    min-width: 14rem;
}

.step-card .stepcontent p {
    font-size: 0.875rem;
    margin-bottom: 1rem;
    line-height: 1.6;
}

/* Program summary table in step 4 */
.booking-summary-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin: 0.5rem 0;
}

.booking-summary-table td {
    padding: 0.1rem 0;
    vertical-align: top;
    font-size: 0.8125rem;
}

.booking-summary-table td:first-child {
    font-weight: 700;
    color: #888;
    width: 8rem;
    white-space: nowrap;
}

/* Detail review divs */
#customerDetail,
#participantDetail {
    font-size: 0.875rem;
    color: #5f6062;
    margin-top: 0.25rem;
    line-height: 1.6;
}

/* ----------------------------------------------------------
   Status cards (confirmation & error pages)
   ---------------------------------------------------------- */
.status-page {
    background-color: #f4f5f7;
    min-height: 60vh;
    padding: 2.5rem 0.9375rem;
}

.status-card {
    max-width: 40rem;
    margin: 0 auto;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
    padding: 3rem 2.5rem;
    text-align: center;
}

.status-card.success {
    border-top: 6px solid #4caf50;
}

.status-card.error {
    border-top: 6px solid #e53935;
}

.status-icon {
    font-size: 3.5rem;
    margin-bottom: 1rem;
    line-height: 1;
}

.status-card.success .status-icon {
    color: #4caf50;
}

.status-card.error .status-icon {
    color: #e53935;
}

.status-card h1 {
    color: #231F20;
    font-size: 1.6rem;
    margin-bottom: 0.5rem;
}

.status-card h2 {
    color: #5f6062;
    font-size: 1.1rem;
    font-weight: 400;
    margin-bottom: 1.5rem;
}

.status-card p {
    font-size: 0.9375rem;
    line-height: 1.7;
    color: #5f6062;
    margin-bottom: 0.75rem;
    text-align: left;
}

.status-card .error-code {
    background: #fff5f5;
    border: 1px solid #fdd;
    border-radius: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.875rem;
    color: #c62828;
    text-align: left;
    margin-bottom: 1.25rem;
}

.btn-primary {
    display: inline-block;
    background: #ff9900;
    color: #fff;
    padding: 0.875rem 2rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    margin-top: 0.5rem;
    transition: background 0.2s ease;
}

.btn-primary:hover,
.btn-primary:visited:hover {
    background: #e68900;
    color: #fff;
    text-decoration: none;
}

.btn-secondary {
    display: inline-block;
    background: transparent;
    color: #ff9900;
    border: 2px solid #ff9900;
    padding: 0.75rem 1.75rem;
    border-radius: 0.5rem;
    font-weight: 700;
    font-size: 0.9375rem;
    text-decoration: none;
    margin-top: 0.5rem;
    margin-left: 0.75rem;
    transition: all 0.2s ease;
}

.btn-secondary:hover {
    background: #ff9900;
    color: #fff;
    text-decoration: none;
}

.status-actions {
    margin-top: 1.75rem;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* ----------------------------------------------------------
   Responsive overrides
   ---------------------------------------------------------- */
@media (max-width: 56.25rem) { /* 900px */
    .voucher-grid {
        grid-template-columns: 1fr;
    }

    .col-dow {
        display: none;
    }

    .program-table th,
    .program-table td {
        padding: 0.5rem 0.625rem;
    }
}

@media (max-width: 47.9375rem) { /* 767px */
    .voucher-content {
        padding: 2rem 0;
    }

    .page-card,
    .booking-state-card,
    .program-section,
    .step-card .stepcontent {
        padding: 1.25rem 1rem;
    }

    .status-card {
        padding: 2rem 1.25rem;
    }

    .status-card h1 {
        font-size: 1.3rem;
    }

    .status-actions {
        flex-direction: column;
        align-items: center;
    }

    .btn-secondary {
        margin-left: 0;
    }
}

@media (max-width: 37.5rem) { /* 600px */
    .form-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.25rem;
    }

    .form-row label {
        min-width: 0;
        text-align: left;
    }

    .form-row input[type="text"],
    .form-row select {
        width: 100%;
    }

    .form-row .expiry-group {
        width: 100%;
    }

    .booking-page,
    .booking-steps {
        padding: 1.25rem 0.75rem;
    }
}

@media (max-width: 37.5rem) { /* 600px */
    .col-code {
        display: none;
    }

    .program-table {
        font-size: 0.8125rem;
    }

    .program-table th,
    .program-table td {
        padding: 0.4rem 0.5rem;
    }
}

@media (max-width: 30rem) { /* 480px */
    .voucher-grid {
        padding: 0 0.625rem;
    }

    .status-card {
        border-radius: 0;
        padding: 1.75rem 1rem;
    }
}