/* shared.css - Common styles for all Hotel Le Grand pages */
html, body { overflow-x: hidden; margin: 0; padding: 0; }
:root {
    --c-gray-bar: #252525; --c-blood-red: #590404; --c-back-ground: #f7f6f5;
    --c-white: #ffffff; --c-black: #000; --c-dark-grey: #888888;
    --c-light-grey: #e4e4e4; --c-yellow: #ffa700;
    --ff-num: 'inter', sans-serif; --ff-txt: 'Playfair Display', serif;
    --fs-50: 50px; --fs-30: 30px; --fs-22: 22px; --fs-20: 20px;
    --fs-18: 18px; --fs-16: 16px; --fs-14: 14px; --fs-12: 12px;
    --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600;
    --radius: 16px; --bt-radius: 8px; --gap: 24px; --card-bg: #fff;
    --shadow: 2px 2px 7px rgba(0, 0, 0, 0.185);
    --bt-shadow: 1px 1px 4px rgba(0, 0, 0, 0.315);
    --in-shadow: inset 4px 4px 10px #ffe148, inset -4px -4px 10px #d46300;
}

/* ========== HEADER LOGO FIX ========== */
.clogo { max-width: 260px; height: auto; }

/* Desktop header layout */
.bar { background-color: var(--c-gray-bar); width: 100%; }
.header-row { display: flex; align-items: center; width: 100%; }
.header-phone { flex: 0 0 auto; padding-right: 15px; }
.header-logo { flex: 0 0 auto; padding: 0 15px; text-align: left; }
.header-nav { flex: 1; display: flex; align-items: center; justify-content: flex-end; }
.header-nav nav { display: flex; align-items: center; flex-wrap: nowrap; }
.header-nav .booknow { flex-shrink: 0; }

.conticon { max-width: 28px; max-height: 28px; }
.contdt { font-family: var(--ff-num); font-size: var(--fs-14); font-weight: var(--fw-light); color: var(--card-bg); }
.navtxt { font-family: var(--ff-txt); font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--card-bg); border: transparent; background-color: transparent; cursor: pointer; text-decoration: none; padding: 5px 10px !important; white-space: nowrap; }
.navtxt:hover, .navtxt:focus { text-decoration: underline; color: var(--c-yellow); }
.offcanvas .btn-close { filter: invert(1); opacity: 1; }
.offcanvas-top { height: 100vh !important; max-height: 100vh !important; transition: transform 0.3s ease-in-out !important; background-color: #000000 !important; color: #fff; }
.offcanvas-top .offcanvas-body { overflow-y: auto; height: calc(100vh - 56px); padding: 1rem 2rem; background-color: #000000 !important; color: #fff; }
.offcanvas-top .offcanvas-header { border-bottom: 1px solid rgba(255,255,255,0.1); background-color: #000000 !important; color: #fff; }
.booknow { display: inline-block; background: #d4a017; color: #fff; padding: 5px 20px; border-radius: 30px; font-size: 14px; font-weight: bold; text-decoration: none; text-align: center; white-space: nowrap; transition: all 0.3s ease; box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.2); }
.booknow:hover { background: #b8860b; transform: translateY(-2px); box-shadow: 0px 6px 10px rgba(0, 0, 0, 0.3); color:#fff; }
.menui { width: 30px; height: 30px; filter: invert(1); }

/* ========== FOOTER ========== */
.footer { width:100%; background-color: var(--c-gray-bar); }
.fhd { font-family: var(--ff-txt); font-size: var(--fs-16); font-weight: var(--fw-medium); color: var(--card-bg); }
.ftet { font-size: var(--fs-12); font-weight: var(--fw-light); color: var(--c-white); }
.ficon { width: 24px; height: 24px; margin-right: 5px; }
.ftbt { background-color: transparent; border-top: 2px solid var(--c-yellow); }
.cprt { font-family: var(--ff-num); font-size: var(--fs-12); font-weight: var(--fw-regular); color: var(--c-white); }
.privacy-links a { text-decoration:none; color:var(--c-white); font-size: 13px; }
.privacy-links a:hover { color: var(--c-yellow); }
.privacy-links { display:flex; justify-content:center; gap:15px; }
.topc { font-family: var(--ff-txt); font-size: var(--fs-30); font-weight: var(--fw-medium); color: var(--c-blood-red); }

/* ========== BOOK NOW MODAL ========== */
.booking-modal-overlay { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); z-index: 99999; align-items: center; justify-content: center; backdrop-filter: blur(4px); }
.booking-modal-overlay.active { display: flex; }
.booking-modal { background: #fff; border-radius: 16px; max-width: 500px; width: 90%; max-height: 90vh; overflow-y: auto; box-shadow: 0 20px 60px rgba(0,0,0,0.3); animation: modalSlideIn 0.3s ease; }
@keyframes modalSlideIn { from { opacity: 0; transform: translateY(-30px); } to { opacity: 1; transform: translateY(0); } }
.booking-modal-header { background: linear-gradient(135deg, #252525, #3a3a3a); color: #fff; padding: 20px 25px; border-radius: 16px 16px 0 0; display: flex; justify-content: space-between; align-items: center; }
.booking-modal-header h3 { margin: 0; font-family: var(--ff-txt); font-size: 22px; }
.booking-modal-close { background: none; border: none; color: #fff; font-size: 28px; cursor: pointer; line-height: 1; padding: 0 5px; }
.booking-modal-close:hover { color: var(--c-yellow); }
.booking-modal-body { padding: 25px; }
.booking-modal-body .form-group { margin-bottom: 18px; }
.booking-modal-body label { display: block; font-weight: 600; margin-bottom: 6px; color: #333; font-size: 14px; }
.booking-modal-body input, .booking-modal-body select, .booking-modal-body textarea { width: 100%; padding: 10px 14px; border: 1px solid #ddd; border-radius: 8px; font-size: 14px; transition: border 0.3s; font-family: var(--ff-num); }
.booking-modal-body input:focus, .booking-modal-body select:focus, .booking-modal-body textarea:focus { border-color: #d4a017; outline: none; box-shadow: 0 0 0 3px rgba(212,160,23,0.15); }
.booking-modal-body .form-row { display: flex; gap: 15px; }
.booking-modal-body .form-row .form-group { flex: 1; }
.booking-submit { width: 100%; padding: 12px; background: linear-gradient(135deg, #d4a017, #b8860b); color: #fff; border: none; border-radius: 30px; font-size: 16px; font-weight: bold; cursor: pointer; transition: all 0.3s; font-family: var(--ff-txt); }
.booking-submit:hover { background: linear-gradient(135deg, #b8860b, #8B6914); transform: translateY(-2px); box-shadow: 0 4px 15px rgba(184,134,11,0.4); }
.booking-submit:disabled { opacity: 0.6; cursor: not-allowed; }
.booking-success { display: none; text-align: center; padding: 30px; }
.booking-success .checkmark { font-size: 60px; color: #27ae60; margin-bottom: 15px; }
.booking-success h4 { color: #27ae60; margin-bottom: 10px; }
.booking-success p { color: #666; }

/* ========== RESPONSIVE BREAKPOINTS ========== */
/* Large desktops (1400px+) */
@media(min-width:1400px) {
    .clogo { max-width: 280px; }
    .navtxt { font-size: 17px; padding: 5px 14px !important; }
}

/* Desktop (992px - 1399px) */
@media(max-width:1399px) {
    .clogo { max-width: 220px; }
    .navtxt { font-size: 15px; padding: 5px 8px !important; }
    .contdt { font-size: 13px; }
}

/* Tablet landscape (768px - 991px) */
@media(max-width:991px) {
    .clogo { max-width: 180px; }
    .navtxt { font-size: 14px; padding: 4px 6px !important; }
    .header-phone { display: none !important; }
    .booknow { font-size: 13px; padding: 4px 14px; }
}

/* Tablet portrait (576px - 767px) */
@media(max-width:767px) {
    .clogo { max-width: 190px; }
    .topc { font-size: 24px; }
    .footer { padding: 30px 15px !important; }
    .fhd { font-size: 14px; }
    .ftet { font-size: 11px; }
    .cprt { font-size: 10px; text-align: center !important; }
    .privacy-links { justify-content: center; margin-top: 10px; }
    .booking-modal-body .form-row { flex-direction: column; gap: 0; }
}

/* Mobile (< 576px) */
@media(max-width:575px) {
    .clogo { max-width: 160px; }
    .topc { font-size: 22px; }
    .gti, .gtii { font-size: 16px; }
    .footer .row > div { text-align: center !important; margin-bottom: 15px; }
    .footer .clogo { display: block; margin: 0 auto; }
}

/* Extra small mobile (< 400px) */
@media(max-width:400px) {
    .clogo { max-width: 140px; }
    .booking-modal { width: 95%; }
}