/* Standalone book-now page (optional direct URL) */
.reservation-page.ftco-section {
    padding-top: 5rem;
    padding-bottom: 3rem;
    background-size: cover;
    background-position: center;
}

/* Embedded on homepage — compact, matches Olivier sendmail form */
.reservation-embed.ftco-section {
    padding-top: 2.5rem;
    padding-bottom: 2.5rem;
    background: #1a1a1a;
}

#reservation {
    scroll-margin-top: 6.5rem;
}

#reservation-success-notice {
    scroll-margin-top: 6.5rem;
}

.reservation-box {
    background: #222;
    padding: 22px 20px;
    border-radius: 10px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.22);
    width: 100%;
}

.reservation-title {
    color: #c49b63;
    margin-bottom: 18px;
    font-size: 1.125rem;
    font-weight: 500;
    line-height: 1.35;
}

.reservation-form label {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.92);
    font-size: 0.8125rem;
    line-height: 1.3;
}

.reservation-form .form-control-dark {
    width: 100%;
    padding: 7px 9px;
    margin-bottom: 12px;
    border: none;
    border-radius: 5px;
    background: #333;
    color: #fff;
    font-size: 0.875rem;
    line-height: 1.35;
}

.reservation-form textarea.form-control-dark {
    min-height: 72px;
    resize: vertical;
}

.reservation-form .form-control-dark:focus {
    outline: 1px solid #c49b63;
    outline-offset: 0;
}

.reservation-form .form-control-dark.is-invalid {
    outline: 1px solid #dc3545;
}

.reservation-form select.form-control-dark {
    appearance: auto;
    padding-top: 6px;
    padding-bottom: 6px;
}

.reservation-form .field-hint {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.55);
    margin: -8px 0 10px;
    line-height: 1.35;
}

.reservation-form .field-error {
    color: #ff8a8a;
    font-size: 0.75rem;
    margin: -8px 0 10px;
    line-height: 1.35;
}

.reservation-form .btn-submit {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-radius: 5px;
    background: #c49b63;
    color: #fff;
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: background 0.2s;
    margin-top: 4px;
}

.reservation-form .btn-submit:hover {
    background: #a67c52;
}

.reservation-form .back-home {
    display: block;
    text-align: center;
    margin-top: 14px;
    color: #c49b63;
    text-decoration: none;
    font-size: 0.875rem;
}

.reservation-form .back-home:hover {
    color: #fff;
}

.reservation-alert {
    padding: 8px 12px;
    border-radius: 5px;
    margin-bottom: 12px;
    font-size: 0.8125rem;
    line-height: 1.4;
}

.reservation-alert-success {
    background: rgba(40, 167, 69, 0.2);
    border: 1px solid rgba(40, 167, 69, 0.45);
    color: #b8f0c6;
}

#reservation-success-notice {
    scroll-margin-top: 150px;
    outline: none;
}

.reservation-alert-error {
    background: rgba(220, 53, 69, 0.15);
    border: 1px solid rgba(220, 53, 69, 0.4);
    color: #ffb3bd;
}

.reservation-form .char-count {
    text-align: right;
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.5);
    margin: -8px 0 10px;
}

.reservation-form .reservation-date-wrap {
    position: relative;
    margin-bottom: 12px;
    display: block;
    cursor: pointer;
}

.reservation-form .reservation-date-wrap .reservation_date {
    cursor: pointer;
    width: 100%;
    box-sizing: border-box;
    padding-right: 2.25rem !important;
    margin-bottom: 0 !important;
}

/* Icon lịch trong ô Date (góc phải) — pseudo-element tránh xung đột touch-enhancement.css với button */
.reservation-form .reservation-date-wrap::after {
    content: "\f073";
    font-family: 'icomoon' !important;
    speak: never;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    font-size: 15px;
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.75);
    pointer-events: none;
    z-index: 1;
}

.reservation-form .reservation-date-wrap:hover::after,
.reservation-form .reservation-date-wrap:focus-within::after {
    color: #c49b63;
}

.datepicker.dropdown-menu {
    z-index: 10000 !important;
    background: #fff !important;
    color: #212529 !important;
    padding: 8px 10px !important;
    min-width: 260px;
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.18);
}

/* Header tháng/năm + mũi tên — template ép th { height:20px } khiến dòng tiêu đề bị mất */
.datepicker table {
    width: 100%;
    margin: 0;
}

.datepicker thead tr:first-child th {
    height: auto !important;
    min-height: 34px;
    padding: 8px 6px !important;
    color: #222 !important;
    background: #f3f3f3 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    line-height: 1.35 !important;
    overflow: visible !important;
    vertical-align: middle !important;
}

.datepicker th.datepicker-switch {
    width: auto !important;
    min-width: 150px;
    color: #222 !important;
    font-size: 14px !important;
    font-weight: 600 !important;
}

.datepicker th.prev,
.datepicker th.next {
    width: 32px !important;
    color: #333 !important;
    font-size: 16px !important;
    font-weight: 700 !important;
}

.datepicker thead tr:first-child th:hover {
    background: #e8e8e8 !important;
}

.datepicker thead tr:last-child th.dow {
    height: auto !important;
    padding: 6px 0 !important;
    color: #666 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    background: transparent !important;
}

.datepicker td,
.datepicker tbody th {
    color: #333 !important;
    font-size: 13px !important;
}

.datepicker tfoot th.today,
.datepicker tfoot th.clear {
    height: auto !important;
    padding: 8px 0 !important;
    color: #007bff !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    background: transparent !important;
}

.datepicker td.active,
.datepicker td.active:hover {
    background: #007bff !important;
    color: #fff !important;
}

.datepicker td.today {
    background: #e7f1ff !important;
}