/* Assignment 2 (Dynamic site additions */

/* overrides for chatbot contrast */
:root {
    --primary: #3d38a3;
}

/* THEME TRANSITIONS */
.theme-ready,
.theme-ready body,
.theme-ready .site-header,
.theme-ready .site-footer,
.theme-ready .panel,
.theme-ready .site-nav,
.theme-ready .nav-inner a,
.theme-ready .lightbox-card,
.theme-ready .auth-card {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* PAGE LOAD FADE-IN + GOOGLE TRANSLATE BODY FIX
   Merged from three separate body blocks to avoid contradictions
   Reference: MDN (2024) CSS Cascade https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade */
body {
    opacity: 0;
    top: 0 !important;
    position: static !important;
}

    body.page-ready {
        opacity: 1;
        transition: opacity 0.25s ease-in;
    }

    body.page-leaving {
        opacity: 0 !important;
        transition: opacity 0.12s ease-out !important;
    }

/* Desktop nav safety override */
@media (min-width: 768px) {
    .site-nav[hidden] {
        display: block !important;
    }

    [data-nav-toggle] {
        display: none !important;
    }
}

/* SVG icon colour inheritance for light/dark mode */
.icon, .mini-icon, .social-lb-ico {
    color: inherit;
    fill: currentColor;
}

.nav-inner a svg, .footer-links svg {
    color: inherit;
}

/* GALLERY CAROUSEL */
.gallery-carousel {
    position: relative;
    text-align: center;
}

.carousel-viewport {
    position: relative;
    min-height: 300px;
}

.carousel-slide {
    display: none;
}

    .carousel-slide.active {
        display: block;
    }

.carousel-img {
    max-width: 100%;
    max-height: 500px;
    border-radius: var(--radius);
    object-fit: contain;
}

.carousel-caption {
    margin-top: 0.5rem;
    font-size: 0.9rem;
}

.carousel-controls {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 1rem;
}

.carousel-counter {
    min-width: 60px;
}

/* FORM HINTS & VALIDATION MESSAGES */
.hint-error {
    color: var(--primary);
}

.hint-success {
    color: #155724;
    font-weight: 600;
}

.hint-small {
    font-size: 0.75rem;
}

.hint-block {
    font-size: 0.78rem;
    display: block;
    margin-top: 0.25rem;
}

.password-hint {
    font-size: 0.75rem;
}

/* SUCCESS / ALERT BOXES */
.alert-success {
    background: #d4edda;
    color: #155724;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1rem;
}

    .alert-success a {
        font-weight: 600;
        color: #155724;
    }

/* PRICING SECTION (Review / Confirmation) */
.price-box {
    margin-top: 1rem;
    padding: 1rem;
    border-top: 2px solid var(--primary);
}

    .price-box h3 {
        margin-top: 0;
    }

.price-total {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--primary);
}

.price-note {
    font-size: 0.85rem;
}

.icon-inline {
    width: 16px;
    height: 16px;
    vertical-align: middle;
}

/* SPACING UTILITIES */
.mt-sm {
    margin-top: 0.5rem;
}

.mt-md {
    margin-top: 1rem;
}

.mt-lg {
    margin-top: 1.5rem;
}

.mb-md {
    margin-bottom: 1rem;
}

.mb-lg {
    margin-bottom: 2rem;
}

/* INLINE FORM WRAPPERS */
.form-inline {
    display: inline;
}

/* PROPERTY DETAILS CARDS */
.property-card {
    margin-bottom: 2rem;
}

.property-gallery {
    margin-top: 1rem;
}

.property-actions {
    margin-top: 1rem;
}

/* TIER MAX GUESTS HINT */
.tier-max-hint {
    display: block;
    margin-top: 0.5rem;
}

/* BOOKING ACTIONS SPACING */
.booking-actions-bottom {
    margin-top: 1rem;
}

/* PROFILE EDIT PANEL */
.profile-edit-form {
    margin-top: 1rem;
}

.profile-logout {
    margin-top: 0.5rem;
}

/* CONTACT EMAIL LINK */
.contact-email-link {
    margin-top: 1rem;
}

/* NOSCRIPT MAP FALLBACK */
.map-fallback {
    max-width: 100%;
    height: auto;
}

/* LANGUAGE SELECTOR */
.lang-select {
    background: var(--panel, #f5f5f5);
    color: var(--text, #222);
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    padding: 0.3rem 0.5rem;
    font-size: 0.8rem;
    font-family: inherit;
    cursor: pointer;
}

/* CHATBOT WIDGET */
.chat-toggle-btn {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 900;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    background: var(--primary, #2f2ad9);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s ease, opacity 0.2s ease;
}

    .chat-toggle-btn:hover {
        transform: scale(1.08);
    }

    .chat-toggle-btn.hidden {
        opacity: 0;
        pointer-events: none;
        transform: scale(0.8);
    }

.chat-panel {
    position: fixed;
    bottom: 1.5rem;
    right: 1.5rem;
    z-index: 950;
    width: 360px;
    max-width: calc(100vw - 2rem);
    height: 480px;
    max-height: calc(100vh - 3rem);
    background: var(--bg, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.18);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateY(20px);
    opacity: 0;
    pointer-events: none;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

    .chat-panel.open {
        transform: translateY(0);
        opacity: 1;
        pointer-events: auto;
    }

.chat-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--primary, #2f2ad9);
    color: #fff;
}

.chat-title {
    font-weight: 600;
    font-size: 0.95rem;
}

.chat-close-btn {
    background: none;
    border: none;
    color: #fff;
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
}

.chat-messages {
    flex: 1;
    overflow-y: auto;
    padding: 0.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.chat-msg {
    max-width: 85%;
    padding: 0.5rem 0.75rem;
    border-radius: 12px;
    font-size: 0.88rem;
    line-height: 1.4;
    word-wrap: break-word;
}

.chat-msg-bot {
    align-self: flex-start;
    background: var(--panel, #f0f0f0);
    color: var(--text, #222);
}

.chat-msg-user {
    align-self: flex-end;
    background: var(--primary, #2f2ad9);
    color: #fff;
}

.chat-typing {
    opacity: 0.6;
    font-style: italic;
}

.chat-input-row {
    display: flex;
    gap: 0.4rem;
    padding: 0.5rem 0.75rem;
    border-top: 1px solid var(--border, #ddd);
    background: var(--bg, #fff);
}

.chat-input {
    flex: 1;
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    padding: 0.45rem 0.65rem;
    font-size: 0.88rem;
    font-family: inherit;
    background: var(--bg, #fff);
    color: var(--text, #222);
}

.chat-send-btn, .chat-mic-btn {
    border: none;
    background: var(--primary, #2f2ad9);
    color: #fff;
    border-radius: 8px;
    padding: 0.45rem 0.7rem;
    cursor: pointer;
    font-size: 1rem;
}

.chat-mic-btn {
    background: var(--panel, #eee);
    color: var(--text, #222);
}

/* Chatbot header actions (voice toggle + close) */
.chat-header-actions {
    display: flex;
    gap: 0.3rem;
    align-items: center;
}

.chat-header-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
}

.chat-voice-toggle {
    background: none;
    border: none;
    color: rgba(255,255,255,0.5);
    cursor: pointer;
    padding: 0.2rem;
    border-radius: 4px;
}

    .chat-voice-toggle:hover {
        color: #fff;
    }

    .chat-voice-toggle.chat-voice-active {
        color: #fff;
        background: rgba(255,255,255,0.2);
    }

/* Chatbot input row icon sizing */
.chat-input-icon {
    width: 18px;
    height: 18px;
    fill: currentColor;
    pointer-events: none;
}

/* Voice input active state (recording) */
.chat-mic-active {
    background: #dc3545;
    color: #fff;
}

    .chat-mic-active .chat-input-icon {
        fill: #fff;
    }

/* Voice output (text-to-speech) button on bot messages */
.chat-speak-btn {
    display: inline-block;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.75rem;
    padding: 0.15rem 0.3rem;
    margin-left: 0.4rem;
    opacity: 0.5;
    vertical-align: middle;
    border-radius: 4px;
}

    .chat-speak-btn:hover {
        opacity: 1;
        background: var(--panel, #eee);
    }

/* Clickable links in bot messages
   Single declaration — removed two duplicate blocks
   Reference: MDN (2024) CSS Cascade https://developer.mozilla.org/en-US/docs/Web/CSS/Cascade */
.chat-link {
    color: #4a90d9;
    text-decoration: underline;
    font-weight: 600;
}

    .chat-link:hover {
        color: #2f6bb4;
    }

/* PAGE TRANSITIONS (smooth navigation)
   page-loaded removed — page-ready is the class applied by page-transition.js */
.no-transition,
.no-transition *,
.no-transition *::before,
.no-transition *::after {
    transition: none !important;
}

/* AFTER no-transition is removed, theme toggle transitions work */
html.theme-ready,
html.theme-ready body,
html.theme-ready .site-header,
html.theme-ready .site-footer,
html.theme-ready .panel,
html.theme-ready .site-nav,
html.theme-ready .nav-inner a {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* GOOGLE TRANSLATE OVERRIDES */

/* Hide the container created for GT to attach to */
.gt-hidden {
    display: none !important;
}

/* Hide the top-of-page banner/toolbar Google adds */
.goog-te-banner-frame,
.goog-te-banner-frame.skiptranslate,
iframe.goog-te-banner-frame {
    display: none !important;
    height: 0 !important;
}

/* Hide the default language gadget/widget */
.goog-te-gadget,
.goog-te-gadget-simple,
.goog-te-gadget-icon,
#google_translate_element,
.goog-te-spinner-pos {
    display: none !important;
}

/* Hide the "Translate" link/bar text */
.goog-te-menu-value,
.goog-te-menu-value span {
    display: none !important;
}

/* Hide the tooltip/popup that appears on hover over translated text */
.goog-te-ftab,
.goog-te-balloon-frame,
#goog-gt-tt,
.goog-tooltip,
.goog-tooltip:hover {
    display: none !important;
}

/* Hide all "skiptranslate" wrappers Google creates */
.skiptranslate,
body > .skiptranslate {
    display: none !important;
}

/* Hide Google Translate hidden voting form — injected by GT script
   Removes WAVE "missing form label" errors caused by GT's internal inputs */
#goog-gt-votingHiddenPane {
    display: none !important;
    visibility: hidden !important;
}

/* Google Translate adds font-size markup to text — remove it */
font[style] {
    font-size: inherit !important;
}

/* CHATBOT ACTION BUTTONS */
.chat-action-btn {
    display: inline-block;
    background: none;
    border: 1px solid var(--primary, #2f2ad9);
    color: var(--primary, #2f2ad9);
    border-radius: 8px;
    padding: 0.3rem 0.7rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    margin: 0.2rem 0.2rem 0.2rem 0;
}

    .chat-action-btn:hover {
        background: var(--primary, #2f2ad9);
        color: #fff;
    }

/* Cancel confirmation row */
.chat-confirm-row {
    display: flex;
    gap: 0.5rem;
    padding: 0.4rem 0;
}

.chat-confirm-yes {
    border-color: #dc3545;
    color: #dc3545;
}

    .chat-confirm-yes:hover {
        background: #dc3545;
        color: #fff;
    }

.chat-confirm-no {
    border-color: #28a745;
    color: #28a745;
}

    .chat-confirm-no:hover {
        background: #28a745;
        color: #fff;
    }

/* Chatbot icon buttons */
.chat-icon-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.chat-btn-icon {
    flex-shrink: 0;
    vertical-align: middle;
}

/* CHATBOT WIZARD OPTIONS */
.chat-options-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.4rem 0;
    max-width: 100%;
}

.chat-option-btn {
    display: inline-block;
    background: var(--bg, #fff);
    border: 1px solid var(--primary, #2f2ad9);
    color: var(--primary, #2f2ad9);
    border-radius: 10px;
    padding: 0.4rem 0.75rem;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    line-height: 1.3;
    transition: background-color 0.15s ease, color 0.15s ease;
}

    .chat-option-btn:hover {
        background: var(--primary, #2f2ad9);
        color: #fff;
    }

/* Date picker inside chat */
.chat-date-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-wrap: wrap;
    padding: 0.3rem 0;
}

.chat-date-input {
    border: 1px solid var(--border, #ddd);
    border-radius: 8px;
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    font-family: inherit;
    background: var(--bg, #fff);
    color: var(--text, #222);
}

/* COOKIE CONSENT BANNER + SETTINGS MODAL
   Reference: ICO (2024) Cookie guidance
   https://ico.org.uk/for-organisations/guide-to-pecr/guidance-on-the-use-of-cookies-and-similar-technologies/ */

/* Banner (fixed to bottom of screen) */
.cookie-banner {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: var(--panel, #f4f5f7);
    border-top: 2px solid var(--primary, #2f2ad9);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.15);
    padding: 1rem;
}

.cookie-banner-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
}

.cookie-banner-text {
    flex: 1;
    min-width: 280px;
    font-size: 0.88rem;
    line-height: 1.5;
    color: var(--text, #222);
}

.cookie-banner-link {
    color: var(--primary, #2f2ad9);
    font-weight: 600;
}

.cookie-banner-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    flex-shrink: 0;
}

/* Cookie buttons */
.cookie-btn {
    padding: 0.5rem 1rem;
    border-radius: 10px;
    border: 1px solid var(--border, #ddd);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
}

.cookie-btn-accept {
    background: var(--primary, #2f2ad9);
    color: #fff;
    border-color: var(--primary, #2f2ad9);
}

    .cookie-btn-accept:hover {
        opacity: 0.9;
    }

.cookie-btn-essential {
    background: var(--bg, #fff);
    color: var(--text, #222);
}

    .cookie-btn-essential:hover {
        background: var(--panel, #eee);
    }

.cookie-btn-settings {
    background: none;
    color: var(--primary, #2f2ad9);
    border-color: var(--primary, #2f2ad9);
}

    .cookie-btn-settings:hover {
        background: var(--panel, #f0f0f0);
    }

/* Settings modal overlay */
.cookie-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

.cookie-modal-card {
    background: var(--bg, #fff);
    border: 1px solid var(--border, #ddd);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0,0,0,0.2);
    padding: 1.5rem;
    width: 100%;
    max-width: 520px;
    max-height: 85vh;
    overflow-y: auto;
    color: var(--text, #222);
}

.cookie-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.cookie-modal-title {
    margin: 0;
    font-size: 1.2rem;
}

.cookie-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    cursor: pointer;
    color: var(--text, #222);
    line-height: 1;
}

.cookie-modal-desc {
    font-size: 0.88rem;
    color: var(--muted, #666);
    margin-bottom: 1rem;
}

/* Cookie category rows */
.cookie-category {
    border: 1px solid var(--border, #ddd);
    border-radius: 10px;
    padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
}

.cookie-cat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
}

.cookie-cat-desc {
    font-size: 0.82rem;
    color: var(--muted, #666);
    margin: 0.4rem 0 0;
}

.cookie-always-on {
    font-size: 0.78rem;
    color: #28a745;
    font-weight: 600;
    white-space: nowrap;
}

/* Toggle switch */
.cookie-toggle {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 24px;
    flex-shrink: 0;
}

    .cookie-toggle input {
        opacity: 0;
        width: 0;
        height: 0;
    }

.cookie-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: #ccc;
    border-radius: 24px;
    transition: background 0.2s ease;
}

    .cookie-slider::before {
        content: "";
        position: absolute;
        height: 18px;
        width: 18px;
        left: 3px;
        bottom: 3px;
        background: #fff;
        border-radius: 50%;
        transition: transform 0.2s ease;
    }

.cookie-toggle input:checked + .cookie-slider {
    background: var(--primary, #2f2ad9);
}

    .cookie-toggle input:checked + .cookie-slider::before {
        transform: translateX(20px);
    }

.cookie-toggle input:focus-visible + .cookie-slider {
    box-shadow: 0 0 0 3px rgba(47,42,217,0.3);
}

.cookie-modal-actions {
    display: flex;
    gap: 0.5rem;
    margin-top: 1rem;
    flex-wrap: wrap;
}

/* Cookie policy table */
.cookie-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.88rem;
}

    .cookie-table th, .cookie-table td {
        text-align: left;
        padding: 0.5rem 0.75rem;
        border-bottom: 1px solid var(--border, #ddd);
    }

    .cookie-table th {
        font-weight: 600;
        color: var(--muted, #666);
        font-size: 0.8rem;
        text-transform: uppercase;
    }

/* Mobile: stack banner vertically */
@media (max-width: 600px) {
    .cookie-banner-inner {
        flex-direction: column;
        align-items: stretch;
    }

    .cookie-banner-actions {
        flex-direction: column;
    }

    .cookie-btn {
        text-align: center;
    }
}

/* Footer grid — 4 columns for Legal section */
@media (min-width: 900px) {
    .footer-grid {
        grid-template-columns: 2fr 1fr 1fr 1fr;
    }
}

/* "Coming Soon" social login toast */
.coming-soon-toast {
    position: fixed;
    bottom: 2rem;
    left: 50%;
    transform: translateX(-50%);
    background: var(--text, #222);
    color: var(--bg, #fff);
    padding: 0.6rem 1.2rem;
    border-radius: 10px;
    font-size: 0.88rem;
    font-weight: 600;
    z-index: 9999;
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    opacity: 1;
    transition: opacity 0.4s ease;
}

.toast-fade {
    opacity: 0;
}

.social-coming-soon {
    opacity: 0.5;
    cursor: default;
    position: relative;
}

    .social-coming-soon:hover {
        opacity: 0.7;
    }

/* CHATBOT WIDGET OVERRIDES — High contrast */
.chat-header {
    background: #3d38a3 !important;
}

.chat-toggle-btn {
    background: #3d38a3 !important;
}

.chat-title {
    color: #fff !important;
}

.chat-action-btn,
.chat-option-btn {
    color: #3d38a3 !important;
    border-color: #3d38a3 !important;
}

    .chat-action-btn:hover,
    .chat-option-btn:hover {
        background: #3d38a3 !important;
        color: #fff !important;
    }

.chat-msg-user {
    background: #3d38a3 !important;
}

.chat-send-btn {
    background: #3d38a3 !important;
}

.chat-link {
    color: #3d38a3 !important;
}

.cookie-btn-accept {
    background: #3d38a3 !important;
    border-color: #3d38a3 !important;
}

.cookie-btn-settings {
    color: #3d38a3 !important;
    border-color: #3d38a3 !important;
}

[data-theme="dark"] .chat-action-btn,
[data-theme="dark"] .chat-option-btn {
    color: #b0adff !important;
    border-color: #b0adff !important;
}

    [data-theme="dark"] .chat-action-btn:hover,
    [data-theme="dark"] .chat-option-btn:hover {
        background: #b0adff !important;
        color: #000 !important;
    }

/* WIDER SCREEN SUPPORT
   Reference: MDN (2024) Using media queries
   https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_media_queries/Using_media_queries */

/* -- Large monitor (1440px) -- */
@media (min-width: 1440px) {

    .container {
        width: min(1360px, 92vw);
    }

    .hero-media--photo {
        height: clamp(420px, 52vh, 580px);
    }

    .location-card {
        min-height: 380px;
    }

    .loc-hero-media {
        min-height: 420px;
    }

    .loc-hero-title {
        font-size: 3rem;
    }

    .map-iframe {
        height: 420px;
    }

    .section {
        padding: 32px 0;
    }

    .chat-panel {
        width: 400px;
        height: 540px;
    }
}

/* -- Ultrawide / full HD (1920px) -- */
@media (min-width: 1920px) {

    .container {
        width: min(1700px, 90vw);
    }

    .hero-media--photo {
        height: clamp(520px, 55vh, 700px);
    }

    .hero-slogan {
        font-size: clamp(3rem, 3.5vw, 4.2rem);
    }

    .location-card {
        min-height: 440px;
    }

    .loc-hero {
        grid-template-columns: 1.4fr 1fr;
    }

    .loc-hero-media {
        min-height: 500px;
    }

    .loc-hero-title {
        font-size: 3.4rem;
    }

    .loc-hero-content {
        padding: 28px;
    }

    .feature-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .gallery {
        grid-template-columns: repeat(5, 1fr);
    }

    .map-iframe {
        height: 500px;
    }

    .review-grid,
    .confirm-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .section {
        padding: 40px 0;
    }

    body {
        font-size: 1.05rem;
    }

    .chat-panel {
        width: 440px;
        height: 580px;
    }
}

/* -- 2K / QHD (2560px) -- */
@media (min-width: 2560px) {

    .container {
        width: min(2200px, 88vw);
    }

    .hero-media--photo {
        height: clamp(600px, 58vh, 820px);
    }

    .hero-slogan {
        font-size: clamp(3.5rem, 3.2vw, 5rem);
    }

    .location-card {
        min-height: 520px;
    }

    .loc-hero-media {
        min-height: 600px;
    }

    .loc-hero-title {
        font-size: 4rem;
    }

    .loc-hero-content {
        padding: 36px;
    }

    .gallery {
        grid-template-columns: repeat(6, 1fr);
    }

    .map-iframe {
        height: 580px;
    }

    body {
        font-size: 1.1rem;
    }

    .section {
        padding: 48px 0;
    }

    .nav-inner a {
        padding: 12px 18px;
        font-size: 1.05rem;
    }

    .chat-panel {
        width: 480px;
        height: 620px;
    }
}

/* -- 4K UHD (3840px) and wide TVs -- */
@media (min-width: 3840px) {

    .container {
        width: min(3200px, 86vw);
    }

    .hero-media--photo {
        height: clamp(800px, 60vh, 1100px);
    }

    .hero-slogan {
        font-size: clamp(4.5rem, 3vw, 6.5rem);
    }

    .hero-welcome {
        font-size: 1.3rem;
        letter-spacing: .12em;
    }

    .location-card {
        min-height: 700px;
    }

    .loc-hero-media {
        min-height: 800px;
    }

    .loc-hero-title {
        font-size: 5.5rem;
    }

    .loc-hero-content {
        padding: 48px;
    }

    .gallery {
        grid-template-columns: repeat(8, 1fr);
    }

    .map-iframe {
        height: 760px;
    }

    body {
        font-size: 1.25rem;
        line-height: 1.65;
    }

    .section {
        padding: 64px 0;
    }

    .btn {
        padding: 16px 22px;
        font-size: 1.1rem;
        border-radius: 18px;
    }

    .nav-inner a {
        padding: 14px 22px;
        font-size: 1.15rem;
    }

    .auth-card {
        max-width: 620px;
    }

    .chat-panel {
        width: 560px;
        height: 700px;
        border-radius: 24px;
    }

    .chat-toggle-btn {
        width: 76px;
        height: 76px;
    }
}

/* DARK MODE DATE INPUT*/
html[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    opacity: 0.7;
    cursor: pointer;
}

/* DARK MODE FORM INPUT*/
html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background: var(--panel);
    color: var(--text);
    border-color: var(--border);
}

    html[data-theme="dark"] input::placeholder,
    html[data-theme="dark"] textarea::placeholder {
        color: var(--muted);
        opacity: 1;
    }

/* DARK MODE BUTTON ICON  */
html[data-theme="dark"] .btn:not(.btn-primary),
html[data-theme="dark"] .btn:not(.btn-primary) svg,
html[data-theme="dark"] .btn:not(.btn-primary) .icon,
html[data-theme="dark"] .btn:not(.btn-primary) .mini-icon {
    color: var(--text);
    fill: var(--text);
    stroke: var(--text);
}

/* DARK MODE PROFILE ROW ICONS */
html[data-theme="dark"] .profile-row dt {
    color: var(--text);
}