/* ---------------------------------------------------------
   LUXUS Premium Contact Page Styles
   Scoped under .contact-page-wrapper to prevent layout leaks
   --------------------------------------------------------- */

.contact-page-wrapper {
    background-color: #080808 !important;
    color: #FAF7F2 !important;
    font-family: 'Be Vietnam Pro', sans-serif;
    min-height: 100vh;
    margin-top: var(--header-height, 80px) !important; /* Exact Header Height Spacing */
    padding-bottom: 120px !important; /* Space for Chat FAB at the bottom */
    overflow-x: hidden;
}

/* 1. Hero Section */
.contact-hero {
    height: 300px; /* Compact height 300-360px */
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: radial-gradient(circle at 70% 30%, #24211d 0%, #111 48%, #080808 100%);
    border-bottom: 1px solid rgba(201, 169, 97, 0.15); /* Soft champagne border */
    overflow: hidden;
}

.contact-hero-image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.contact-hero-fallback::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(120deg, transparent 0 58%, rgba(201, 169, 97, 0.08) 58% 59%, transparent 59%),
        linear-gradient(30deg, transparent 0 66%, rgba(250, 247, 242, 0.04) 66% 67%, transparent 67%);
}

.contact-hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(180deg, rgba(8, 8, 8, 0.5) 0%, #080808 100%);
    z-index: 1;
}

.contact-hero-content {
    position: relative;
    z-index: 2;
    max-width: 800px;
    padding: 0 20px;
}

.contact-hero-eyebrow {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 4px;
    color: #C9A961 !important; /* Champagne Gold Eyebrow */
    text-transform: uppercase;
    margin-bottom: 12px;
    display: block;
}

.contact-hero-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.6rem;
    font-weight: 400;
    color: #FAF7F2 !important; /* Ivory Title */
    letter-spacing: 1px;
    margin-bottom: 15px;
}

.contact-hero-subtitle {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 1rem;
    color: rgba(250, 247, 242, 0.75) !important; /* Muted Ivory with contrast */
    line-height: 1.6;
    max-width: 600px;
    margin: 0 auto;
}

/* 2. Main Content Grid */
.contact-main-section {
    padding: 60px 0;
}

.contact-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: start;
}

/* 3. Left Column - Contact Information */
.contact-info-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2.2rem;
    font-weight: 400;
    color: #C9A961;
    margin-bottom: 30px;
    letter-spacing: 0.5px;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: 35px;
}

.contact-info-item {
    display: flex;
    align-items: flex-start;
    gap: 20px;
}

.contact-info-icon {
    color: #C9A961;
    font-size: 1.3rem;
    width: 24px;
    margin-top: 4px;
    text-align: center;
}

.contact-info-label {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 2px;
    color: rgba(250, 247, 242, 0.45);
    text-transform: uppercase;
    margin-bottom: 5px;
}

.contact-info-value {
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 1.1rem;
    color: #FAF7F2;
    line-height: 1.6;
}

.contact-info-value a {
    color: #FAF7F2;
    text-decoration: none;
    transition: color 0.3s ease;
}

.contact-info-value a:hover {
    color: #C9A961;
}

/* 4. Right Column - Booking Form (Dark Surface Theme) */
.contact-form {
    background-color: #111111 !important; /* Dark Surface */
    border: 1px solid rgba(201, 169, 97, 0.15) !important; /* Muted Champagne Border */
    border-radius: 4px !important;
    padding: 40px !important;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5) !important;
}

.contact-form-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 2rem;
    font-weight: 400;
    color: #C9A961 !important;
    margin-bottom: 10px;
}

.contact-form-desc {
    color: rgba(250, 247, 242, 0.6) !important;
    margin-bottom: 40px;
    font-size: 0.95rem;
}

/* Minimal Line Form Fields */
.contact-form .form-group {
    margin-bottom: 30px;
    position: relative;
}

.contact-form .form-label {
    display: block;
    font-family: 'Be Vietnam Pro', sans-serif;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 1.5px;
    color: #C9A961 !important;
    text-transform: uppercase;
    margin-bottom: 8px;
}

.contact-form .form-control {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid rgba(201, 169, 97, 0.25) !important; /* Muted Champagne Line */
    border-radius: 0 !important;
    color: #FAF7F2 !important; /* Ivory Input Text */
    padding: 10px 0 !important;
    font-size: 1rem !important;
    width: 100% !important;
    transition: all 0.3s ease !important;
    box-shadow: none !important;
}

.contact-form .form-control::placeholder {
    color: rgba(250, 247, 242, 0.35) !important; /* High contrast placeholder */
}

.contact-form .form-control:focus {
    border-bottom-color: #C9A961 !important; /* Focus State */
    background: transparent !important;
}

/* Calendar icon styling */
.contact-form input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: invert(1) sepia(50%) saturate(1000%) hue-rotate(15deg);
    cursor: pointer;
}

/* Deep readable red error texts */
.contact-form .text-danger {
    font-size: 0.8rem !important;
    color: #ff6b6b !important;
    margin-top: 6px !important;
    display: block !important;
    font-weight: 500 !important;
}

/* Champagne CTA Button with black text */
.btn-luxury-submit {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: #C9A961 !important;
    color: #080808 !important;
    border: 1px solid #C9A961 !important;
    padding: 16px 30px !important;
    font-family: 'Be Vietnam Pro', sans-serif !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    letter-spacing: 2px !important;
    text-transform: uppercase !important;
    width: 100% !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    margin-top: 15px !important;
}

.btn-luxury-submit:hover:not(:disabled) {
    background: transparent !important;
    color: #C9A961 !important;
    border-color: #C9A961 !important;
}

.btn-luxury-submit:disabled {
    background: rgba(201, 169, 97, 0.4) !important;
    border-color: transparent !important;
    color: rgba(8, 8, 8, 0.6) !important;
    cursor: not-allowed;
}

/* Toast container and feedback alignments */
.contact-toast-container {
    position: fixed;
    top: 90px;
    right: 20px;
    z-index: 10000;
}

.contact-toast {
    background-color: #121212 !important;
    border: 1px solid rgba(250, 247, 242, 0.1) !important;
    border-radius: 4px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.5) !important;
    color: #FAF7F2 !important;
    min-width: 320px;
    padding: 16px 20px !important;
    margin-bottom: 10px;
    animation: slideIn 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-toast.toast-success {
    border-left: 4px solid #C9A961 !important; /* Soft champagne success line */
}

.contact-toast.toast-error {
    border-left: 4px solid #ff5252 !important; /* Soft red error line */
}

/* 5. Google Maps Section */
.contact-map-section {
    padding-bottom: 40px;
}

.contact-map-container {
    border: 1px solid rgba(201, 169, 97, 0.2);
    border-radius: 4px;
    overflow: hidden;
    height: 400px;
    background: #111;
}

.contact-map-container iframe {
    width: 100%;
    height: 100%;
    border: 0;
    filter: grayscale(1) invert(0.92) contrast(1.2) sepia(10%);
}

@keyframes slideIn {
    from {
        transform: translateX(100%);
        opacity: 0;
    }
    to {
        transform: translateX(0);
        opacity: 1;
    }
}

/* ---------------------------------------------------------
   Responsive Layout (Viewport Adaptations)
   --------------------------------------------------------- */

/* Tablet Viewport (768px) */
@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: 1fr;
        gap: 60px;
    }
    .contact-main-section {
        padding: 50px 0;
    }
    .contact-hero {
        height: 280px;
    }
    .contact-hero-title {
        font-size: 2.2rem;
    }
}

/* Mobile Viewport (390px) */
@media (max-width: 575px) {
    .contact-hero {
        height: 250px;
    }
    .contact-hero-title {
        font-size: 1.8rem;
    }
    .contact-main-section {
        padding: 30px 20px !important; /* Minimum padding-horizontal 20px */
    }
    .contact-info-title, .contact-form-title {
        font-size: 1.6rem;
    }
    .contact-info-list {
        gap: 25px;
    }
    .contact-form {
        padding: 30px 20px !important; /* Make sure form fields have breathing space */
    }
}

/* -- Form Validation Error Styles -------------------------------------------- */
.form-error-message {
    display: block;
    min-height: 1.4rem;
    margin-top: 6px;
    color: #ff6b6b;
    font-size: 0.85rem;
    font-weight: 500;
    font-family: 'Be Vietnam Pro', sans-serif;
}

.form-error-message:empty {
    margin-top: 0;
    min-height: 0;
}

.contact-form .form-control.is-invalid {
    border-bottom-color: #ff6b6b !important;
    box-shadow: none !important;
}

.contact-form .form-control.is-invalid:focus {
    border-bottom-color: #ff6b6b !important;
    box-shadow: 0 2px 0 0 rgba(255, 107, 107, 0.4) !important;
}