/* ===================================
   Forms & Tables
   =================================== */
.prebooking-form-table {
    width: 100%;
    background: var(--bg-white);
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border-color);
}

.prebooking-form-table th {
    padding: 20px;
    font-weight: 600;
    color: var(--text-dark);
    width: 200px;
    vertical-align: top;
    background: var(--bg-gray-50);
}

.prebooking-form-table td {
    padding: 20px;
}

.prebooking-form-table tr {
    border-bottom: 1px solid var(--border-light);
}

.prebooking-form-table tr:last-child {
    border-bottom: none;
}

/* Form inputs */
.prebooking-form-table input[type="text"],
.prebooking-form-table input[type="email"],
.prebooking-form-table input[type="number"],
.prebooking-form-table input[type="date"],
.prebooking-form-table select,
.prebooking-form-table textarea {
    padding: 12px 16px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
    font-size: 14px;
    transition: all 0.2s ease;
    background: var(--bg-white);
    color: var(--text-dark);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.prebooking-form-table input[type="text"]:focus,
.prebooking-form-table input[type="email"]:focus,
.prebooking-form-table input[type="number"]:focus,
.prebooking-form-table input[type="date"]:focus,
.prebooking-form-table select:focus,
.prebooking-form-table textarea:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-focus);
    outline: none;
}

.prebooking-form-table .regular-text {
    width: 100%;
    max-width: 500px;
}

.prebooking-form-table .large-text {
    width: 100%;
    max-width: 600px;
}

.prebooking-form-table .small-text {
    width: 100px;
}

.prebooking-form-table textarea {
    min-height: 120px;
    resize: vertical;
}

/* Improve ergonomics of range blocks (plages de dates) */
.range-block {
    margin-bottom: 20px;
    padding: 20px;
    border: 1px solid var(--border-light);
    border-radius: 8px;
    background: var(--bg-white);
    /* subtle colored shadow using primary light (#4ec4c4 => rgb(78,196,196)) */
    box-shadow: 0 6px 18px rgba(78,196,196,0.09);
    transition: transform 0.12s ease, box-shadow 0.12s ease, border-color 0.12s ease;
    /* accent left border + subtle background tint for stronger differentiation */
    border-left: 4px solid rgba(78,196,196,0.9);
    background: rgba(78,196,196,0.03);
}

/* Top row inside a range-block: keep inputs aligned and wrap on small screens */
.range-block > div:first-child {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    flex-wrap: wrap;
}

.range-block label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    font-size: 12px;
}

.range-block input[type="date"],
.range-block input[type="number"] {
    padding: 6px;
    border: 1px solid var(--border-color);
    border-radius: 6px;
}

/* Remove button for a range block (when present) */
.remove-range-btn {
    margin-left: 8px;
    padding: 6px 12px;
    background-color: #dc3545;
    color: #fff;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 12px;
    white-space: nowrap;
}

@media (max-width: 720px) {
    .range-block > div:first-child {
        gap: 10px;
    }
    .range-block input[type="date"], .range-block input[type="number"] {
        min-width: 120px;
        width: 100%;
    }
}