@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Outfit:wght@400;500;600;700&display=swap');

/* Public Booking Form Premium Redesign */

.tm-booking-container,
.tm-booking-page-wrap {
    --tm-radius: 8px;
    --tm-radius-lg: 12px;
    --tm-border: #e6e8ec;
    --tm-text: #23262f;
    --tm-text-muted: #777e90;
    --tm-shadow: 0px 8px 24px rgba(0, 0, 0, 0.05);
    --tm-shadow-lg: 0px 16px 36px rgba(0, 0, 0, 0.08);
    --tm-accent: #f29222;

    font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--tm-text);
    margin: 30px auto;
    max-width: 1200px;
}

/* Steps Wizard Progress */
.tm-steps {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 40px;
    position: relative;
}

.tm-steps::before {
    content: '';
    position: absolute;
    top: 16px;
    left: 8%;
    width: 84%;
    height: 2px;
    background: #e6e8ec;
    z-index: 1;
}

.tm-step {
    display: flex;
    align-items: center;
    gap: 12px;
    position: relative;
    z-index: 2;
    background: #ffffff;
    padding: 0 16px;
}

.tm-step__num {
    width: 34px;
    height: 34px;
    background: #ffffff;
    color: var(--tm-text-muted);
    border: 2px solid var(--tm-border);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Outfit', sans-serif;
    font-weight: 700;
    font-size: 14px;
    transition: all 0.3s ease;
}

.tm-step__text {
    display: flex;
    flex-direction: column;
}

.tm-step__title {
    font-family: 'Outfit', sans-serif;
    font-size: 14px;
    font-weight: 700;
    color: var(--tm-text-muted);
    transition: all 0.3s ease;
}

.tm-step__sub {
    font-size: 11px;
    color: var(--tm-text-muted);
    font-weight: 500;
}

/* Active Step */
.tm-step--active .tm-step__num {
    background: var(--tm-accent);
    color: #ffffff;
    border-color: var(--tm-accent);
    box-shadow: 0px 4px 10px rgba(242, 146, 34, 0.2);
}

.tm-step--active .tm-step__title {
    color: var(--tm-text);
}

/* Completed Step */
.tm-step--completed .tm-step__num {
    background: var(--tm-accent);
    color: #ffffff;
    border-color: var(--tm-accent);
}

/* Step content animations */
.tm-step-content {
    display: none;
}

.tm-step-content--active {
    display: block;
    animation: tmSlideUp 0.4s ease-out;
}

@keyframes tmSlideUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* STEP 1: Two-column grid layout */
.tm-step1-grid-container {
    display: grid;
    grid-template-columns: 380px 1fr;
    gap: 32px;
    align-items: start;
}

@media (max-width: 991px) {
    .tm-step1-grid-container {
        grid-template-columns: 1fr;
    }
}

/* Map Panel Left Side */
.tm-map-panel {
    display: flex;
    flex-direction: column;
    gap: 16px;
    width: 100%;
}

.tm-map-top-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--tm-border);
    padding-bottom: 16px;
    flex-wrap: wrap;
    gap: 12px;
}

.tm-welcome-txt {
    font-family: 'Outfit', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: var(--tm-text);
}

.tm-legend-date-wrap {
    display: flex;
    align-items: center;
    gap: 20px;
}

.tm-map-legend-items {
    display: flex;
    gap: 16px;
}

.tm-legend-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.tm-legend-color {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    display: inline-block;
}

.tm-legend-color--available {
    background: #777e90;
    opacity: 0.15;
    border: 1.5px solid #777e90;
}

.tm-legend-color--reserved {
    background: #f39200;
    border: 1.5px solid #f39200;
}

.tm-legend-color--occupied {
    background: #ef466f;
    border: 1.5px solid #ef466f;
}

.tm-legend-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text-muted);
}

.tm-header-date-box {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 700;
}

.tm-header-date-lbl {
    color: var(--tm-text-muted);
}

.tm-header-date-val {
    color: var(--tm-text);
}

/* Sidebar Right Side Form */
.tm-form-sidebar {
    background: #ffffff;
    /* border: 1px solid var(--tm-border); */
    border-radius: var(--tm-radius-lg);
    padding: 24px;
    /* box-shadow: var(--tm-shadow); */
}

.tm-sidebar-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 20px;
    color: var(--tm-text);
}

/* Selected Table Indicator Box */
.tm-selected-table-indicator {
    background: #fffcf6;
    border: 1.5px dashed var(--tm-accent);
    border-radius: var(--tm-radius);
    padding: 12px;
    text-align: center;
    font-weight: 700;
    font-size: 14px;
    color: var(--tm-accent);
    margin-bottom: 20px;
    text-transform: uppercase;
}

.tm-sidebar-fields {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tm-field-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tm-field-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text-muted);
}

.tm-field-group input,
.tm-field-group select,
.tm-field-group textarea {
    padding: 10px 14px;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    font-size: 14px;
    font-weight: 500;
    outline: none;
    transition: all 0.2s ease;
    background: #ffffff;
    color: var(--tm-text);
}

.tm-field-group input:focus,
.tm-field-group select:focus,
.tm-field-group textarea:focus {
    border-color: var(--tm-accent);
    box-shadow: 0 0 0 3px rgba(242, 146, 34, 0.1);
}

.tm-field-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.tm-readonly-input {
    background: #f8f9fa !important;
    color: var(--tm-text-muted) !important;
    cursor: not-allowed;
}

.tm-special-request-link-wrap {
    margin-top: 4px;
}

.tm-add-special-btn {
    background: transparent;
    border: none;
    color: var(--tm-accent);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0;
}

.tm-plus-circle {
    display: inline-flex;
    width: 18px;
    height: 18px;
    border: 2px solid var(--tm-accent);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
}

/* Main Buttons */
.button.tm-btn-book {
    width: 100%;
    padding: 12px;
    background: var(--tm-accent);
    color: #ffffff;
    border: none;
    border-radius: var(--tm-radius);
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    margin-top: 10px;
}

.button.tm-btn-book:hover:not(:disabled) {
    background: #df8018;
}

.button.tm-btn-book:disabled {
    background: #e6e8ec;
    color: var(--tm-text-muted);
    cursor: not-allowed;
}

/* STEP 2: Redesign (Confirm Details & Pay) */
.tm-step2-grid-container {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: 32px;
    align-items: start;
}

@media (max-width: 991px) {
    .tm-step2-grid-container {
        grid-template-columns: 1fr;
    }
}

.tm-details-overview-panel {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Booking Details Card */
.tm-details-card {
    background: #ffffff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg);
    padding: 24px;
    box-shadow: var(--tm-shadow);
}

.tm-card-title {
    font-family: 'Outfit', sans-serif;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 16px;
    color: var(--tm-text);
}

.tm-card-subtitle-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--tm-border);
    padding-bottom: 16px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 12px;
}

.tm-card-subtitle-row h4 {
    margin: 0;
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    color: var(--tm-accent);
}

.tm-meta-pills {
    display: flex;
    gap: 10px;
}

.tm-meta-pill {
    background: #f4f5f6;
    border-radius: 20px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 600;
    color: var(--tm-text-muted);
    display: flex;
    align-items: center;
    gap: 4px;
}

.tm-details-rows {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.tm-detail-row {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    line-height: 1.5;
}

.tm-detail-lbl {
    font-weight: 500;
    color: var(--tm-text-muted);
}

.tm-detail-val {
    font-weight: 600;
    color: var(--tm-text);
}

/* Payment Card & Checkout Options */
.tm-payment-card {
    background: #ffffff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg);
    padding: 24px;
    box-shadow: var(--tm-shadow);
}

.tm-payment-form-box {
    margin-bottom: 20px;
}

.tm-commbank-card-container {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tm-hosted-field {
    height: 42px;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    background: #fcfcfd;
    padding: 0 14px;
    display: flex;
    align-items: center;
    box-sizing: border-box;
}

.tm-card-expiry-wrap {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

/* Checkbox Styles */
.tm-checkbox-container {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    cursor: pointer;
    user-select: none;
    font-size: 13px;
    line-height: 1.4;
    color: var(--tm-text-muted);
}

.tm-checkbox-container input {
    display: none;
}

.tm-checkbox-checkmark {
    width: 18px;
    height: 18px;
    border: 2px solid var(--tm-border);
    border-radius: 4px;
    display: inline-block;
    position: relative;
    flex-shrink: 0;
    transition: all 0.2s ease;
    background: #ffffff;
}

.tm-checkbox-container input:checked+.tm-checkbox-checkmark {
    background: var(--tm-accent);
    border-color: var(--tm-accent);
}

.tm-checkbox-container input:checked+.tm-checkbox-checkmark::after {
    content: '';
    position: absolute;
    left: 5px;
    top: 2px;
    width: 4px;
    height: 8px;
    border: solid #ffffff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.tm-checkbox-text a {
    color: var(--tm-accent);
    text-decoration: none;
    font-weight: 600;
}

.tm-checkbox-text a:hover {
    text-decoration: underline;
}

/* Policies Panel (Step 2 Right Side) */
.tm-policies-panel {
    background: #ffffff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg);
    padding: 24px;
    box-shadow: var(--tm-shadow);
}

.tm-policy-heading {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 700;
    color: var(--tm-text);
    margin-top: 0;
    margin-bottom: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.tm-policy-list {
    margin: 0;
    padding-left: 20px;
    font-size: 13px;
    color: var(--tm-text-muted);
    line-height: 1.6;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.tm-confirm-actions-wrap {
    margin-top: 32px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.button.tm-btn-confirm {
    width: 100%;
    padding: 14px;
    background: var(--tm-accent);
    color: #ffffff;
    border: none;
    border-radius: var(--tm-radius);
    font-family: 'Outfit', sans-serif;
    font-size: 16px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
}

.button.tm-btn-confirm:hover:not(:disabled) {
    background: #df8018;
}

.button.tm-btn-confirm:disabled {
    background: #e6e8ec;
    color: var(--tm-text-muted);
    cursor: not-allowed;
}

.tm-back-to-map-btn {
    background: transparent;
    border: none;
    color: var(--tm-text-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
}

.tm-back-to-map-btn:hover {
    color: var(--tm-text);
    text-decoration: underline;
}

/* STEP 3 Confirmation Card Design */
.tm-confirmed-card {
    background: #ffffff;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius-lg);
    padding: 48px;
    box-shadow: var(--tm-shadow-lg);
    text-align: center;
    max-width: 700px;
    margin: 0 auto;
}

.tm-success-checkmark-circle {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eaf6ea;
    color: #45b26b;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 24px auto;
}

.tm-checkmark-icon {
    font-size: 36px;
    font-weight: bold;
}

.tm-confirmed-title {
    font-family: 'Outfit', sans-serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--tm-text);
    margin-top: 0;
    margin-bottom: 8px;
}

.tm-confirmed-booking-id {
    font-size: 15px;
    color: var(--tm-text-muted);
    margin-bottom: 32px;
}

.tm-confirmed-booking-id strong {
    color: var(--tm-text);
    font-size: 16px;
}

/* Confirmation 4-grid layout */
.tm-confirmed-details-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 32px;
}

@media (max-width: 767px) {
    .tm-confirmed-details-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .tm-confirmed-details-grid {
        grid-template-columns: 1fr;
    }
}

.tm-conf-grid-card {
    background: #f8f9fa;
    border: 1px solid var(--tm-border);
    border-radius: var(--tm-radius);
    padding: 20px 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.tm-conf-card-icon {
    font-size: 24px;
}

.tm-conf-card-val {
    font-size: 13px;
    font-weight: 700;
    color: var(--tm-text);
    line-height: 1.4;
}

.tm-thank-you-txt {
    font-family: 'Outfit', sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--tm-text-muted);
    margin-bottom: 32px;
}

.tm-conf-actions-footer {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.tm-google-cal-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: #ffffff;
    border: 1px solid var(--tm-border);
    padding: 12px 24px;
    border-radius: var(--tm-radius);
    font-size: 14px;
    font-weight: 600;
    color: var(--tm-text);
    text-decoration: none;
    transition: all 0.2s ease;
}

.tm-google-cal-btn:hover {
    background: #f4f5f6;
    border-color: var(--tm-text-muted);
}

.tm-manage-res-link {
    color: var(--tm-accent);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
}

.tm-manage-res-link:hover {
    text-decoration: underline;
}

/* System Notices */
.tm-form-status-notice {
    padding: 12px;
    border-radius: var(--tm-radius);
    text-align: center;
    font-size: 14px;
    margin-top: 24px;
    font-weight: 600;
}

.tm-form-status-notice.success {
    background: #eaf6ea;
    color: #45b26b;
}

.tm-form-status-notice.error {
    background: #fbeaea;
    color: #ef466f;
}

/* ==========================================================================
   Responsive — Tablet (≤ 991px)
   ========================================================================== */
@media (max-width: 991px) {

    /* Container: add horizontal padding so nothing touches the screen edge */
    .tm-booking-container,
    .tm-booking-page-wrap {
        margin: 20px auto;
        padding: 0 16px;
    }

    /* Step 1 & 2 grids already collapse to 1-column at this breakpoint.
       Ensure map panel and form sidebar sit comfortably. */
    .tm-map-panel {
        order: 2;
        /* form first, map second on tablet/mobile */
    }

    .tm-form-sidebar {
        order: 1;
    }

    /* Shrink the map viewport min-height on tablet */
    .tm-map-viewport {
        min-height: 280px;
        padding: 16px;
    }

    /* Step 2: details + policies stacking */
    .tm-policies-panel {
        /* No sticky behaviour needed on small screens */
        position: static;
    }

    /* Step progress bar — compress spacing */
    .tm-steps {
        margin-bottom: 28px;
    }

    .tm-step {
        padding: 0 10px;
        gap: 8px;
    }
}

/* ==========================================================================
   Responsive — Mobile (≤ 767px)
   ========================================================================== */
@media (max-width: 767px) {

    /* Container */
    .tm-booking-container,
    .tm-booking-page-wrap {
        margin: 12px auto;
        padding: 0 12px;
    }

    /* ---- Step wizard ---- */
    .tm-steps {
        margin-bottom: 24px;
        gap: 0;
    }

    /* Hide the connector line on mobile */
    .tm-steps::before {
        display: none;
    }

    .tm-step {
        flex-direction: column;
        align-items: center;
        text-align: center;
        padding: 0 4px;
        gap: 6px;
        flex: 1;
    }

    .tm-step__text {
        align-items: center;
    }

    .tm-step__title {
        font-size: 11px;
    }

    .tm-step__sub {
        display: none;
        /* hide sub-label on very small screens */
    }

    .tm-step__num {
        width: 30px;
        height: 30px;
        font-size: 13px;
    }

    /* ---- Map panel top bar ---- */
    .tm-map-top-bar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tm-legend-date-wrap {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        width: 100%;
    }

    .tm-map-legend-items {
        flex-wrap: wrap;
        gap: 10px;
    }

    .tm-welcome-txt {
        font-size: 16px;
    }

    /* Shrink map on mobile */
    .tm-map-viewport {
        min-height: 220px;
        padding: 10px;
    }

    /* ---- Sidebar form ---- */
    .tm-form-sidebar {
        padding: 18px;
    }

    /* ---- Time row: stack on very narrow screens ---- */
    .tm-field-row {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    /* ---- Step 2: Booking Details Card ---- */
    .tm-details-card,
    .tm-payment-card,
    .tm-policies-panel {
        padding: 18px;
    }

    .tm-card-subtitle-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }

    .tm-meta-pills {
        flex-wrap: wrap;
    }

    /* Detail row: allow values to wrap */
    .tm-detail-row {
        flex-direction: column;
        gap: 2px;
    }

    .tm-detail-val {
        word-break: break-word;
    }

    /* Payment card expiry row stays 2-col — it's short enough */
    .tm-card-row {
        flex-direction: column;
        gap: 16px;
    }

    /* ---- Step 3: Confirmation card ---- */
    .tm-confirmed-card {
        padding: 28px 18px;
    }

    .tm-confirmed-title {
        font-size: 20px;
    }

    .tm-success-checkmark-circle {
        width: 56px;
        height: 56px;
        margin-bottom: 16px;
    }

    .tm-checkmark-icon {
        font-size: 28px;
    }

    .tm-conf-actions-footer {
        gap: 12px;
    }

    .tm-google-cal-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 16px;
    }
}

/* ==========================================================================
   Responsive — Small phone (≤ 480px)
   ========================================================================== */
@media (max-width: 480px) {

    .tm-booking-container,
    .tm-booking-page-wrap {
        padding: 0 8px;
    }

    .tm-form-sidebar {
        padding: 14px;
        border-radius: var(--tm-radius);
    }

    .tm-selected-table-indicator {
        font-size: 12px;
        padding: 10px;
    }

    .tm-sidebar-title {
        font-size: 16px;
    }

    .tm-field-group input,
    .tm-field-group select,
    .tm-field-group textarea {
        font-size: 16px;
        /* prevent iOS zoom on focus */
    }

    .button.tm-btn-book {
        font-size: 14px;
        padding: 11px;
    }

    .button.tm-btn-confirm {
        font-size: 14px;
        padding: 12px;
    }

    .tm-confirm-actions-wrap {
        margin-top: 20px;
    }

    /* Confirmed details grid already goes 2-col at 767px and 1-col at 480px */
}

/* ==========================================================================
   Manage Reservation Page
   ========================================================================== */

/* Scoped wrapper for the manage-page — sets width/padding here so inline
   styles can be removed from the PHP template.                              */
.tm-manage-page-wrap {
    padding: 60px 20px;
    max-width: 600px;
    margin: 0 auto;
}

/* Modify-form 2-col grid */
.tm-mod-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

/* Time slots grid */
.tm-slots-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

/* Loading / empty message inside slots grid */
.tm-slots-loading {
    grid-column: 1 / -1;
    /* span all columns regardless of count */
    text-align: center;
    font-size: 13px;
    color: var(--tm-text-muted);
    padding: 8px 0;
}

.tm-slots-empty {
    color: #ef466f;
}

@media (max-width: 767px) {

    .tm-manage-page-wrap {
        padding: 32px 12px;
    }

    .tm-management-card {
        padding: 24px 16px !important;
    }

    /* Stack guests + date fields */
    .tm-mod-form-grid {
        grid-template-columns: 1fr;
    }

    /* Time slots: 3-across on mobile */
    .tm-slots-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 480px) {

    .tm-manage-page-wrap {
        padding: 20px 8px;
    }

    .tm-management-card {
        padding: 18px 12px !important;
        border-radius: 8px !important;
    }

    /* Time slots: 2-across on small phones */
    .tm-slots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}