/* Liquid Glass V2 Design System */
:root {
    --primary-color: #d0bd95;
    --primary-color-rgb: 208, 189, 149;
    --accent-green: #2ECC71;
    --glass-dark-bg: rgba(10, 12, 16, 0.75);
    --background-light: #f7f7f6;
    --background-dark: #0A0C10;

    /* Font */
    --font-display: 'Be Vietnam Pro', sans-serif;

    /* Radius */
    --radius-default: 1rem;
    --radius-lg: 2rem;
    --radius-xl: 3rem;
    --container-padding: 2rem;
    --radius-full: 9999px;
}

body {
    background-color: var(--background-dark);
    font-family: var(--font-display);
    color: white;
    font-size: 13px;
    overscroll-behavior-x: none;
    overscroll-behavior-y: none;
    touch-action: pan-y;
}

/* Hot Tag Animation */
@keyframes hotGlow {
    0% {
        box-shadow: 0 0 5px rgba(255, 59, 48, 0.4);
        transform: scale(1);
    }

    50% {
        box-shadow: 0 0 15px rgba(255, 59, 48, 0.9);
        transform: scale(1.05);
    }

    100% {
        box-shadow: 0 0 5px rgba(255, 59, 48, 0.4);
        transform: scale(1);
    }
}

.tag-hot {
    position: absolute;
    top: -4px;
    right: 10px;
    background: linear-gradient(135deg, #FF3B30, #FF9500);
    color: white;
    font-size: 8px;
    /* ~15% smaller */
    font-weight: 800;
    padding: 1.5px 5px;
    /* ~15% smaller */
    border-radius: 10px;
    text-transform: uppercase;
    animation: hotGlow 1.5s infinite alternate;
    border: 1px solid rgba(255, 255, 255, 0.3);
    pointer-events: none;
    z-index: 10;
}

/* === MINIMALIST SCROLLBAR === */
::-webkit-scrollbar {
    width: 4px;
    background: transparent;
}

::-webkit-scrollbar-thumb {
    background: transparent;
    border-radius: 99px;
}

*:hover::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
}

/* Utilities */
.text-primary {
    color: var(--primary-color) !important;
}

.bg-primary {
    background-color: var(--primary-color) !important;
}

.bg-background-dark {
    background-color: var(--background-dark);
}

.text-white-50 {
    color: rgba(255, 255, 255, 0.5);
}

.text-white-80 {
    color: rgba(255, 255, 255, 0.8);
}

/* Liquid Glass Effect */
.liquid-glass {
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.8);
    background: var(--glass-dark-bg);
}

/* Online Users Badge */
.online-users-badge {
    position: fixed;
    bottom: 20px;
    right: 20px;
    left: auto;
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    pointer-events: none;
    font-family: var(--font-display);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.pulse-dot {
    width: 6px;
    height: 6px;
    background-color: #2ECC71;
    /* Green */
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    animation: pulse-green 2s infinite;
}

@keyframes pulse-green {
    0% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }

    70% {
        transform: scale(1);
        box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
    }

    100% {
        transform: scale(0.95);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

/* Panels */
.panel-container {
    border-radius: var(--radius-xl);
    /* 3rem based on config */
    overflow: hidden;
}

/* Sidebar Specifics */
.sidebar-v2 {
    width: 462px;
    height: 100%;
    display: flex;
    flex-direction: column;
    /* Position fixed handled by layout, but sidebar itself needs structure */
}

/* Custom Scrollbar */
.custom-scrollbar::-webkit-scrollbar {
    width: 4px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: transparent;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(208, 189, 149, 0.3);
    border-radius: 10px;
}

/* Form Elements */
.input-glass {
    width: 100%;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 12px 16px 12px 48px;
    /* pl-12 for icon */
    font-family: var(--font-display);
    font-size: 0.875rem;
    color: white;
    outline: none;
    transition: all 0.3s;
    box-sizing: border-box;
    /* Ensure padding doesn't overflow width */
    max-width: 100%;
}

.input-glass:focus {
    border-color: rgba(208, 189, 149, 0.5);
}

.input-icon {
    position: absolute;
    left: 1rem;
    top: 50%;
    transform: translateY(-50%);
    color: rgba(255, 255, 255, 0.4);
}

/* Buttons */
.btn-glass {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-full);
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
    transition: all 0.2s;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
}

.btn-glass:hover {
    background: rgba(255, 255, 255, 0.1);
}

.btn-glass.active {
    background: var(--primary-color);
    color: var(--background-dark);
    font-weight: 700;
    box-shadow: 0 10px 15px -3px rgba(208, 189, 149, 0.2);
    border-color: transparent;
}

.btn-primary-action {
    width: 100%;
    background: var(--primary-color);
    color: var(--background-dark);
    font-weight: 700;
    padding: 1rem;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    transition: transform 0.1s;
    box-shadow: 0 20px 25px -5px rgba(208, 189, 149, 0.2);
    border: none;
    cursor: pointer;
}

.btn-primary-action:active {
    transform: scale(0.95);
}

/* Water Droplet Slider */
.water-slider-container {
    position: relative;
    height: 4px;
    /* Track height */
    width: 100%;
    /* Ensure it fits container */
    background: rgba(255, 255, 255, 0.1);
    border-radius: 999px;
    margin: 20px 0;
    /* Align with others */
    box-sizing: border-box;
    /* Space for droplets */
}

.water-track-highlight {
    position: absolute;
    top: 0;
    height: 100%;
    background: rgba(208, 189, 149, 0.5);
    z-index: 1;
}

/* The real inputs are invisible but clickable */
/* The real inputs are invisible but clickable - ROBUST FIX */
.water-range-input {
    position: absolute;
    top: -10px;
    left: 0;
    width: 100%;
    height: 30px;
    opacity: 0;
    z-index: 20;
    /* High z-index */
    cursor: pointer;
    pointer-events: none;
    /* Let clicks pass through track */
    -webkit-appearance: none;
    appearance: none;
}

.water-range-input::-webkit-slider-thumb {
    pointer-events: auto;
    /* Catch clicks on thumb */
    -webkit-appearance: none;
    width: 24px;
    /* Larger hit area */
    height: 24px;
    cursor: grab;
    z-index: 30;
    /* Higher than input */
}

/* Enable pointer events on the thumb only for double slider logic? 
   Actually, with standard range inputs, we usually put them on top. 
   To make standard inputs work with this visual, we need to replicate the visual thumb 
   exactly where the real thumb is. */

/* Visual Thumb */
.water-droplet-thumb {
    position: absolute;
    top: -8px;
    /* Center partially */
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    box-shadow: inset -2px -2px 6px rgba(0, 0, 0, 0.2), inset 2px 2px 6px rgba(255, 255, 255, 0.4);
    display: flex;
    align-items: center;
    justify-content: center;
    transform: translateX(-50%);
    /* Center on value */
    z-index: 5;
    pointer-events: none;
    /* pure visual */
}

.water-droplet-thumb::after {
    content: '';
    width: 6px;
    height: 6px;
    background: white;
    border-radius: 50%;
    opacity: 0.6;
}

.water-value-label {
    position: absolute;
    bottom: -25px;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

/* Amenities Icons */
.amenity-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem;
    border-radius: 0.75rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s;
    cursor: pointer;
}

.amenity-btn:hover {
    border-color: rgba(208, 189, 149, 0.5);
}

.amenity-btn span.material-symbols-outlined {
    color: rgba(255, 255, 255, 0.5);
    transition: color 0.3s;
}

.amenity-btn:hover span.material-symbols-outlined {
    color: var(--primary-color);
}

.amenity-label {
    font-size: 10px;
    text-transform: uppercase;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.4);
    letter-spacing: -0.025em;
}

/* Base Material Symbols override */
.material-symbols-outlined {
    font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
}

/* Availability Radio */
.avail-radio {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.75rem;
    border-radius: 0.5rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    transition: background 0.2s;
}

.avail-radio:hover {
    background: rgba(255, 255, 255, 0.1);
}

.radio-circle {
    width: 1.25rem;
    height: 1.25rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
}

.radio-circle.active {
    border-color: var(--primary-color);
    background: rgba(208, 189, 149, 0.2);
}

.radio-dot {
    width: 0.5rem;
    height: 0.5rem;
    background: var(--primary-color);
    border-radius: 50%;
    display: none;
}

/* Utility Classes (Mini-Tailwind) */
.flex {
    display: flex;
}

.flex-col {
    flex-direction: column;
}

.items-center {
    align-items: center;
}

.justify-between {
    justify-content: space-between;
}

.justify-center {
    justify-content: center;
}

.justify-end {
    justify-content: flex-end;
}

.flex-wrap {
    flex-wrap: wrap;
}

.flex-1 {
    flex: 1 1 0%;
}

.gap-1 {
    gap: 0.25rem;
}

.gap-2 {
    gap: 0.5rem;
}

.gap-3 {
    gap: 0.75rem;
}

.gap-4 {
    gap: 1rem;
}

.w-full {
    width: 100%;
}

.h-full {
    height: 100%;
}

.w-8 {
    width: 2rem;
}

.h-8 {
    height: 2rem;
}

.w-10 {
    width: 2.5rem;
}

.h-10 {
    height: 2.5rem;
}

.w-3 {
    width: 0.75rem;
}

.h-3 {
    height: 0.75rem;
}

.size-8 {
    width: 2rem;
    height: 2rem;
}

.p-0 {
    padding: 0px;
}

.p-2 {
    padding: 0.5rem;
}

.p-3 {
    padding: 0.75rem;
}

.p-6 {
    padding: 1.5rem;
}

.px-2 {
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}

.px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
}

.py-1 {
    padding-top: 0.25rem;
    padding-bottom: 0.25rem;
}

.py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}

.py-3 {
    padding-top: 0.75rem;
    padding-bottom: 0.75rem;
}

.py-4 {
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.pl-12 {
    padding-left: 3rem;
}

.pr-4 {
    padding-right: 1rem;
}

.m-0 {
    margin: 0;
}

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

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

.mb-6 {
    margin-bottom: 1.5rem;
}

.my-2 {
    margin-top: 0.5rem;
    margin-bottom: 0.5rem;
}

.space-y-3> :not([hidden])~ :not([hidden]) {
    margin-top: 0.75rem;
}

.space-y-4> :not([hidden])~ :not([hidden]) {
    margin-top: 1rem;
}

.space-y-8> :not([hidden])~ :not([hidden]) {
    margin-top: 2rem;
}

.relative {
    position: relative;
}

.absolute {
    position: absolute;
}

.fixed {
    position: fixed;
}

.inset-0 {
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

.top-1\/2 {
    top: 50%;
}

.-translate-y-1\/2 {
    transform: translateY(-50%);
}

.left-4 {
    left: 1rem;
}

.border {
    border-width: 1px;
    border-style: solid;
}

.border-b {
    border-bottom-width: 1px;
    border-bottom-style: solid;
}

.border-t {
    border-top-width: 1px;
    border-top-style: solid;
}

.border-none {
    border: none;
}

.border-white\/10 {
    border-color: rgba(255, 255, 255, 0.1);
}

.border-primary\/30 {
    border-color: rgba(208, 189, 149, 0.3);
}

.border-primary\/20 {
    border-color: rgba(208, 189, 149, 0.2);
}

.rounded-full {
    border-radius: 9999px;
}

.rounded-xl {
    border-radius: 1.5rem;
}

/* Override xl from config if needed */
.rounded-lg {
    border-radius: 0.5rem;
}

.bg-white\/5 {
    background-color: rgba(255, 255, 255, 0.05);
}

.bg-white\/10 {
    background-color: rgba(255, 255, 255, 0.1);
}

.bg-white\/50 {
    background-color: rgba(255, 255, 255, 0.5);
}

.bg-primary {
    background-color: var(--primary-color);
}

.bg-primary\/20 {
    background-color: rgba(208, 189, 149, 0.2);
}

.bg-primary\/10 {
    background-color: rgba(208, 189, 149, 0.1);
}

.bg-background-dark {
    background-color: var(--background-dark);
}

.bg-glass-dark {
    background-color: var(--glass-dark-bg);
}

.bg-transparent {
    background-color: transparent;
}

.bg-black\/40 {
    background-color: rgba(0, 0, 0, 0.4);
}

.hover\:bg-white\/10:hover {
    background-color: rgba(255, 255, 255, 0.1);
}

.text-white {
    color: white;
}

.text-white\/50 {
    color: rgba(255, 255, 255, 0.5);
}

.text-white\/40 {
    color: rgba(255, 255, 255, 0.4);
}

.text-white\/30 {
    color: rgba(255, 255, 255, 0.3);
}

.text-white\/80 {
    color: rgba(255, 255, 255, 0.8);
}

.text-primary {
    color: var(--primary-color);
}

.text-background-dark {
    color: var(--background-dark);
}

.text-xl {
    font-size: 1.25rem;
    line-height: 1.75rem;
}

.text-lg {
    font-size: 1.125rem;
    line-height: 1.75rem;
}

.text-sm {
    font-size: 0.875rem;
    line-height: 1.25rem;
}

.text-xs {
    font-size: 0.75rem;
    line-height: 1rem;
}

.font-bold {
    font-weight: 700;
}

.font-medium {
    font-weight: 500;
}

.uppercase {
    text-transform: uppercase;
}

.tracking-tight {
    letter-spacing: -0.025em;
}

.tracking-widest {
    letter-spacing: 0.1em;
}

.tracking-\[0\.1em\] {
    letter-spacing: 0.1em;
}

.overflow-hidden {
    overflow: hidden;
}

.overflow-y-auto {
    overflow-y: auto;
}

.cursor-pointer {
    cursor: pointer;
}

.transition-colors {
    transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
    transition-duration: 150ms;
}

.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 150ms;
}

.shadow-lg {
    box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
}

/* Custom Overrides */
.focus\:outline-none:focus {
    outline: 2px solid transparent;
    outline-offset: 2px;
}

/* Global Panel Overrides for Consistency */
.modal-content {
    background: var(--glass-dark-bg) !important;
    backdrop-filter: blur(24px) saturate(180%) !important;
    -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: var(--radius-lg) !important;
    color: white !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5) !important;
}

.modal-content h2,
.modal-content h3,
.modal-content p,
.modal-content span:not(.badge):not(.tag) {
    color: white !important;
}

.close-modal {
    color: rgba(255, 255, 255, 0.6) !important;
    transition: 0.2s;
}

.close-modal:hover {
    color: white !important;
}

/* Table Dark Overrides */
.product-list-table {
    border-color: rgba(255, 255, 255, 0.1) !important;
}

.product-list-table th {
    background: rgb(86, 85, 85) !important;
    color: white !important;
    border-color: rgb(0, 0, 0) !important;
}

.product-list-table td {
    color: rgba(255, 255, 255, 0.9) !important;
    border-color: rgba(255, 255, 255, 0.1) !important;
    background: transparent !important;
}

.product-list-table tr:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.02) !important;
}


/* Cinematic Product Popup Styles */
.rounded-modal {
    border-radius: 50px !important;
}

.refraction-border {
    border: 8px solid rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 40px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(208, 189, 149, 0.2);
    position: relative;
    border-radius: var(--radius-xl);
}

.price-pod {
    background: linear-gradient(180deg, rgba(208, 189, 149, 0.15) 0%, rgba(20, 20, 20, 0.8) 100%);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1.5px solid rgba(208, 189, 149, 0.4);
    border-radius: 999px;
    /* full */
}

/* Gradients */
.bg-gradient-details {
    background: radial-gradient(circle at top right, #1a1814, var(--background-dark), var(--background-dark));
}

/* Modal Specific Overrides */
#modal-product-detail .modal-content {
    padding: 0 !important;
    /* Remove default padding to allow split layout */
    background: transparent !important;
    /* Let liquid-glass class handle it */
    border: none !important;
    /* Managed by liquid-glass class */
    max-width: 1400px;
    width: 95%;
    max-height: 90vh;
    /* Changed from fixed height to max-height */
    height: auto;
    /* Allow shrinking */
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

@media (min-width: 768px) {
    #modal-product-detail .modal-content {
        flex-direction: row;
    }
}

/* Mini Map Overlay */
.mini-map-overlay {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent);
}

/* =========================================
   CINEMATIC MODAL V2 (Detailed Implementation)
   ========================================= */

/* Layout Containers */
.cinematic-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.cine-col-left {
    flex: 1;
    position: relative;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.cine-col-right {
    width: 100%;
    /* Wider for details - ~10% increase */
    max-width: 424px;
    /* Reduced by 20% from 530px */
    background: linear-gradient(to left, rgba(10, 12, 16, 0.95), rgba(10, 12, 16, 0.8));
    backdrop-filter: blur(40px);
    border-left: 1px solid rgba(255, 255, 255, 0.08);
    padding: 0.75rem;
    /* Reduced by 50% from 1.5rem */
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    /* Reduced by 50% from 0.75rem for tighter layout */
    overflow-y: auto;
}

@media (min-width: 1024px) {
    .cinematic-container {
        flex-direction: row;
    }

    .cine-col-right {
        width: 29.6%;
        max-width: none;
        flex-shrink: 0;
    }
}

.cine-col-right::-webkit-scrollbar {
    width: 4px;
}

.cine-col-right::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

/* Hero Section */
.hero-section {
    flex: none;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    z-index: 10;
    margin-bottom: 0px;
}

.hero-title-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.hero-title-info {
    flex: 1;
    min-width: 0;
}

.hero-share-btn {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px;
    border-radius: 10px !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.hero-share-btn:hover {
    background: rgba(159, 141, 112, 0.2) !important;
    border-color: rgba(114, 106, 86, 0.614) !important;
    color: #d0bd95;
}

.btn-like-product {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
    color: rgba(255, 255, 255, 0.7);
}

.btn-like-product:hover {
    background: rgba(239, 68, 68, 0.18) !important;
    border-color: rgba(239, 68, 68, 0.45) !important;
    color: #f87171 !important;
}

.btn-like-product.active {
    background: rgba(239, 68, 68, 0.22) !important;
    border-color: rgba(239, 68, 68, 0.6) !important;
    color: #ef4444 !important;
}

/* Expanded Loan Calculator Button */
.loan-calc-btn-expanded {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 12px;
    background: rgba(168, 168, 157, 0.15);
    border: 1px solid rgba(255, 230, 10, 0);
    color: #d0bd95;
    cursor: pointer;
    transition: all 0.2s ease;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
}

.loan-calc-btn-expanded .material-symbols-outlined {
    font-size: 22px;
}

.loan-calc-btn-expanded:hover {
    background: rgba(224, 224, 218, 0.25);
    border-color: rgba(193, 200, 173, 0.5);
    transform: translateY(-1px);
}

.hero-top-badges {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.cine-badge {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
    backdrop-filter: blur(10px);
}

.cine-badge.status-badge {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.2);
    color: #2ECC71;
}

.dot-pulse {
    width: 6px;
    height: 6px;
    background: currentColor;
    border-radius: 50%;
    margin-right: 8px;
    box-shadow: 0 0 8px currentColor;
}

.cine-badge-simple {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    color: rgba(255, 255, 255, 0.5);
    background: rgba(255, 255, 255, 0.03);
    padding: 4px 10px;
    border-radius: 6px;
}

/* Typography */
#pd-title,
.cine-title {
    font-size: 36px !important;
    /* Reduced from 3.5rem and forced to 36px */
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: white;
    text-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    margin: 1rem 0 0.5rem 0;
}

.cine-location {
    display: flex;
    align-items: center;
    gap: 8px;
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9rem;
    font-weight: 500;
}

.cine-location p {
    margin: 0 !important;
    padding: 0 !important;
    line-height: 1 !important;
}

.cine-location .material-symbols-outlined {
    font-size: 1rem;
    line-height: 2;
}

/* Horizontal Stats V2 - Standardized to match Glass Panel */
.cine-stats-row-v2 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    /* 4 Equal Columns */
    gap: 0.25rem;
    /* Minimized gap to fit */
    margin-top: 0.1rem;
    /* Minimal offset */
    padding: 0.75rem 0.5rem 0.35rem 0.5rem;
    /* Reduced bottom padding */
    background: rgba(255, 255, 255, 0.02);
    /* Match glass-panel */
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    /* Match glass-panel radius */
    width: 100%;
    box-sizing: border-box;
    /* Ensure padding includes in width */
    /* backdrop-filter handled by parent or standard glass */
}

.stat-item-v2 {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
    /* Center align items in their grid cell */
    text-align: center;
}

.stat-item-v2 .stat-header {
    display: flex;
    align-items: center;
    gap: 6px;
    color: rgba(255, 255, 255, 0.4);
    font-size: 0.7rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.stat-item-v2 .stat-header .material-symbols-outlined {
    font-size: 1.1rem;
    /* Better proportion */
}

.stat-item-v2 .val {
    font-size: 0.9rem;
    /* Match cine-location normal text */
    font-weight: 700;
    color: white;
}

/* Render Image Container */
.render-image-container {
    flex: 1;
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
    margin-top: 1rem;
    cursor: zoom-in;
    transition: transform 0.3s;
}

.render-image-container:hover {
    transform: scale(1.01);
    border-color: rgba(208, 189, 149, 0.3);
}

.render-image-container img {
    width: 100%;
    height: 100%;
    object-fit: contain !important;
    background: #000;
    /* Optional: adds background to letterboxing */
    transition: opacity 0.3s ease;
}

.render-image-container.is-loading img {
    opacity: 0;
}

.render-image-container.is-loading::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(255, 255, 255, 0.02) 25%, rgba(255, 255, 255, 0.08) 50%, rgba(255, 255, 255, 0.02) 75%);
    background-size: 200% 100%;
    animation: skeletonLoading 1.5s infinite linear;
    z-index: 5;
    pointer-events: none;
}

@keyframes skeletonLoading {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

/* Right Column Panels */
.glass-panel {
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    /* Slightly reduced radius */
    padding: 0.5rem;
    /* Reduced by 50% from 1rem */
}

/* Price Header */
.price-header-panel {
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* Center align for compactness */
    background: radial-gradient(circle at top right, rgba(208, 189, 149, 0.1), rgba(255, 255, 255, 0.02));
    border-color: rgba(208, 189, 149, 0.2);
    padding: 0.75rem 1rem;
    /* Specific compact padding */
    margin-top: 0;
    position: relative;
    z-index: 20;
}

.label-small {
    font-size: 1rem;
    text-transform: uppercase;
    color: var(--primary-color);
    letter-spacing: 0.1em;
    font-weight: 700;
    margin-top: 4px !important;
    margin-bottom: 0.25rem;
}

.price-row-main {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

.price-large {
    font-size: 2rem;
    /* Reduced from 2.5rem */
    font-weight: 800;
    color: white;
    line-height: 1;
    margin: 0;
}

.price-large .currency {
    font-size: 1rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.5);
}

.price-per-meter-badge {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    background: rgba(255, 255, 255, 0.1);
    padding: 4px 8px;
    border-radius: 6px;
}

/* Detail Groups */
.detail-group .group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 0.75rem;
    /* Reduced */
    padding-bottom: 0.5rem;
    /* Reduced */
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.detail-group .group-header h3 {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.detail-group .group-header .material-symbols-outlined {
    font-size: 1.1rem;
    color: var(--primary-color);
}

.cine-split-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    /* Reduced from 1rem */
}

.minimal-stat-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 0.85rem;
}

.minimal-stat-card .label {
    color: rgba(255, 255, 255, 0.5);
}

.minimal-stat-card .val {
    font-weight: 600;
    color: white;
    text-align: right;
    flex: 1;
}

.minimal-stat-card .val.text-dim {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* Documents */
.doc-actions-row {
    display: flex;
    gap: 8px;
    margin-top: 1rem;
}

.doc-btn {
    flex: 1;
    height: 36px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.doc-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: white;
    border-color: rgba(255, 255, 255, 0.3);
}

/* Policy Grid */
.cine-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.75rem;
    /* Reduced */
}

.cine-grid-2 .label {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
}

.cine-grid-2 .val {
    font-size: 0.9rem;
    font-weight: 600;
}

.val-highlight {
    color: var(--primary-color);
    font-weight: 700;
    font-size: 0.95rem;
    /* Balanced */
    text-align: left;
    display: block;
}

/* Agent Card */
.agent-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
    /* Compact padding */
}

.agent-info {
    display: flex;
    align-items: center;
    gap: 12px;
}

.agent-avatar-wrapper {
    width: 42px;
    height: 42px;
    position: relative;
}

.agent-avatar-wrapper img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    object-fit: cover;
    border: 2px solid rgba(255, 255, 255, 0.1);
}

.online-indicator {
    position: absolute;
    bottom: 0;
    right: 0;
    width: 10px;
    height: 10px;
    background: #2ECC71;
    border: 2px solid #1a1a1a;
    border-radius: 50%;
}

.agent-name {
    font-size: 0.9rem;
    font-weight: 700;
    color: white;
    margin: 0;
}

.agent-role {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.agent-actions {
    display: flex;
    gap: 8px;
    align-items: center;
}

.cine-icon-btn {
    width: 48px !important;
    height: 48px !important;
    min-width: 48px !important;
    padding: 0 !important;
    flex-shrink: 0;
    border-radius: 10px;
    /* Squircle */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.cine-icon-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.glow-button-gold {
    background: linear-gradient(135deg, var(--primary-color), #bfa575);
    color: #000;
    font-size: 0.7rem;
    font-weight: 800;
    padding: 0 16px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    border: none;
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(208, 189, 149, 0.3);
    transition: transform 0.2s;
}

.glow-button-gold:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(208, 189, 149, 0.4);
}

/* Close Button Floating */
.close-button-floating {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 100;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-size: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    backdrop-filter: blur(10px);
}

.close-button-floating:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: rotate(90deg);
}

.dropdown-menu .dropdown-item {
    padding: 12px 20px;
    color: #ffffff !important;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 10px;
    transition: all 0.2s;
    font-size: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.dropdown-menu .dropdown-item:last-child {
    border-bottom: none;
}

.dropdown-menu .dropdown-item:hover,
.dropdown-menu .dropdown-item.active {
    background: rgba(255, 255, 255, 0.1);
    color: #d0bd95 !important;
}

.dropdown-menu .dropdown-item:hover span,
.dropdown-menu .dropdown-item.active span {
    color: #d0bd95 !important;
}

/* Text Dim Helpers */
.text-dim {
    color: rgba(255, 255, 255, 0.5);
}

/* === CINEMATIC: Download & Lightbox === */
/* Download Button Overlay */
.download-overlay-btn {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0;
    transform: translateY(10px);
    z-index: 10;
}

.render-image-container:hover .download-overlay-btn {
    opacity: 1;
    transform: translateY(0);
}

.download-overlay-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

/* Lightbox Wrapper */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.9);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.lightbox-close {
    position: absolute;
    top: 2rem;
    right: 2rem;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: white;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 2rem;
    cursor: pointer;
    z-index: 100;
}

.lightbox-stage {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.lightbox-img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
}

/* Helper for hidden buttons */
.doc-btn.hidden {
    display: none;
}

/* Ensure close button floating matches if class is different */
.modal-close-floating {
    position: absolute;
    top: 2rem;
    right: 2rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 50;
}

.modal-close-floating:hover {
    background: rgba(231, 76, 60, 0.8);
    border-color: #e74c3c;
    transform: rotate(90deg);
}

@media (max-width: 768px) {
    .modal-close-floating {
        top: 1rem;
        right: 1rem;
    }

    /* Adjust Product Modal for Mobile */
    .cine-col-left {
        padding: 1rem;
        flex: 0 0 auto;
        /* Allow shrinking/growing based on content if needed, but usually stack */
        min-height: 300px;
        /* Ensure image area has height */
    }

    .cine-col-right {
        padding: 1rem;
        max-width: 100%;
        /* Full width */
    }

    .cine-title {
        font-size: 36px !important;
        /* Updated from 1.75rem */
        margin-top: 0.5rem;
    }

    .cine-location {
        padding: 0 !important;
        margin-bottom: 0 !important;
        font-size: 11px !important;
        line-height: 1.2 !important;
    }

    .cine-location span.material-symbols-outlined {
        font-size: 14px !important;
    }

    .cine-stats-row-v2 {
        grid-template-columns: repeat(2, 1fr);
        /* 2 Columns on mobile */
        gap: 0.5rem;
    }

    .stat-item-v2 .val {
        font-size: 13.6px !important;
    }

    .stat-item-v2 .stat-header {
        font-size: 12px !important;
    }

    .stat-item-v2 .stat-header .label {
        font-size: 12px !important;
    }

    .price-large {
        font-size: 1.75rem;
    }

    /* Ensure modal content scrolls */
    #modal-product-detail .modal-content {
        height: 100% !important;
        max-height: 100% !important;
        width: 100% !important;
        border-radius: 0 !important;
        overflow-y: auto;
        /* Enable scroll for whole modal if needed, or rely on col-right */
    }

    /* Fix Landscape Mobile */
    @media (max-height: 500px) and (orientation: landscape) {
        .cinematic-container {
            flex-direction: row;
            /* Keep side-by-side but smaller */
        }

        .cine-col-left {
            width: 40%;
            padding: 0.5rem;
        }

        .cine-col-right {
            width: 60%;
            padding: 0.5rem;
        }

        .render-image-container {
            margin-top: 0.5rem;
        }

        .cine-title {
            font-size: 36px !important;
        }

        .minimal-stat-card .val,
        .cine-grid-2 .val {
            font-size: 14.4px !important;
        }

        /* Ensure action buttons are exactly same height in landscape */
        .cine-icon-btn {
            height: 44px !important;
            width: 44px !important;
        }

        .glow-button-gold {
            height: 44px !important;
            padding: 0 16px !important;
        }
    }
}



/* --- SIDEBAR HOVER FIXES --- */
/* Target visual cards generated by JS or static list items */
.visual-card-item,
.suggestion-item {
    transition: all 0.3s;
    border: 1px solid transparent;
    background: rgba(3, 3, 3, 0);
    /* Dark background for search suggestions */
}

.visual-card-item:hover,
.suggestion-item:hover {
    background: rgba(208, 189, 149, 0.15) !important;
    /* Primary color tint */
    border-color: rgba(208, 189, 149, 0.4);
}

.visual-card-title,
.visual-card-sub,
.suggestion-item .code,
.suggestion-item .meta {
    color: white;
    transition: color 0.3s;
}

.visual-card-item:hover .visual-card-title,
.visual-card-item:hover .visual-card-sub,
.suggestion-item:hover .code {
    color: var(--primary-color) !important;
}

.visual-card-item:hover .meta,
.suggestion-item:hover .meta {
    color: white !important;
}

/* --- FONT FIXES --- */
button,
input,
select,
textarea,
.chip-btn,
.btn-show-more {
    font-family: 'Be Vietnam Pro', sans-serif !important;
}


/* --- NEW BOTTOM MENU STYLES --- */
.bottom-menu {
    border-radius: 99px;
    height: 100px;
    padding: 0 40px;
    background: linear-gradient(180deg, rgba(20, 20, 25, 0.9) 0%, rgba(10, 10, 12, 0.95) 100%) !important;
    border: 1px solid rgba(255, 255, 255, 0.15) !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.8), inset 0 1px 0 rgba(255, 255, 255, 0.1) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.bottom-menu .menu-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.6);
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    padding: 0 16px;
    height: 100%;
}

.bottom-menu .menu-item .material-symbols-outlined {
    font-size: 32px !important;
    /* Increased size */
    margin-bottom: 6px;
    transition: all 0.3s;
}

.bottom-menu .menu-item span:not(.material-symbols-outlined) {
    font-size: 13px;
    font-weight: 500;
    transition: all 0.3s;
}

.bottom-menu .menu-item:hover {
    color: white;
    transform: translateY(-2px);
}

.bottom-menu .menu-item:hover .material-symbols-outlined {
    color: white;
    text-shadow: 0 0 15px rgba(255, 255, 255, 0.5);
}

.bottom-menu .menu-item.active {
    color: var(--primary-color);
}

.bottom-menu .menu-item.active .material-symbols-outlined {
    font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 32;
    filter: drop-shadow(0 0 8px rgba(208, 189, 149, 0.5));
    transform: scale(1.1);
}

.bottom-menu .menu-item.active:hover,
.bottom-menu .menu-item.active:hover .material-symbols-outlined {
    color: var(--primary-color) !important;
}

/* --- SEARCH & SIDEBAR FIXES --- */
.side-menu.liquid-glass {
    background: rgba(15, 18, 24, 0.95);
    /* Darker for contrast */
    border-right: 1px solid rgba(255, 255, 255, 0.15);
    backdrop-filter: blur(20px);
}

.side-menu .sidebar-header {
    padding: 20px 24px !important;
    /* Standardize with Fund Filter */
}

.side-menu .search-wrapper {
    padding: 0 !important;
    /* Standardize with Fund Filter */
}

.side-menu .search-content-area {
    padding: 0 !important;
    /* Standardize with Fund Filter */
}

.side-menu .menu-item {
    color: rgba(255, 255, 255, 0.7);
    /* Brighter base text */
}

.side-menu .menu-item:hover,
.side-menu .menu-item.active {
    color: var(--primary-color) !important;
    /* Gold/Yellow highlight */
    background: rgba(255, 215, 0, 0.1);
    /* Subtle gold bg */
    border-left: 3px solid var(--primary-color);
}

.fund-sidebar.liquid-glass {
    background: rgba(15, 18, 24, 0.95);
    border-left: 1px solid rgba(255, 255, 255, 0.1);
}

/* Scrollbar Visibility Fix */
.custom-scrollbar {
    overflow-y: auto !important;
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE/Edge */
}

.custom-scrollbar::-webkit-scrollbar {
    display: none;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.3);
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.5);
}

/* Chips Container */
#filter-type-wrapper,
#filter-direction-wrapper {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 5px;
}

/* Show More Button Style */
.btn-show-more {
    background: transparent;
    border: 1px dashed rgba(255, 255, 255, 0.3);
    color: rgba(255, 255, 255, 0.7);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s;
    /* height: 32px; REMOVED to match chips */
}

.btn-show-more:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(208, 189, 149, 0.1);
}

/* SEARCH RESULTS LIST - Standardized Spacing */
#search-results-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    /* Match Fund Filter Spacing */
    padding-bottom: 20px;
}

.visual-card-item {
    position: relative;
    width: 100%;
    height: 140px;
    /* Fixed height for consistency */
    border-radius: 12px;
    overflow: hidden;
    cursor: pointer;
    border: 1px solid rgba(255, 255, 255, 0.1);
    transition: all 0.3s ease;
    /* margin-bottom removed in favor of gap */
}

.visual-card-item:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.visual-card-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* CHANGED from contain to cover */
    transition: transform 0.5s ease;
}

.visual-card-item:hover .visual-card-img {
    transform: scale(1.05);
}

.visual-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 15px;
    background: linear-gradient(to top, rgba(0, 0, 0, 0.9), transparent);
    display: flex;
    flex-direction: column;
}

.visual-card-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: white;
    margin-bottom: 2px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

.visual-card-sub {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 500;
}

/* === PORTRAIT MODE / iPAD OPTIMIZATION === */
@media (min-width: 768px) and (max-width: 1100px) and (orientation: portrait) {

    /* Stack columns vertically */
    .cinematic-container {
        flex-direction: column !important;
        overflow-x: hidden;
        /* Prevent horizontal scroll */
    }

    /* Left Column: Image Area */
    .cine-col-left {
        flex: 1;
        width: 100%;
        padding: 1rem;
        /* Slightly reduced padding */
        min-height: 45%;
        border-right: none;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        box-sizing: border-box;
        /* Ensure padding doesn't add width */
    }

    /* Right Column: Content Area */
    .cine-col-right {
        width: 100%;
        max-width: 100%;
        flex: 1;
        min-height: 0;
        border-left: none;
        padding: 1.25rem;
        /* Reduced padding to save width */
        border-radius: 0 0 24px 24px;
        background: rgba(10, 12, 16, 0.95);
        box-sizing: border-box;
    }

    /* Ensure Modal Content fits within screen width */
    #modal-product-detail .modal-content {
        width: 92vw !important;
        /* Slightly less than 100 to show edges */
        height: 85vh !important;
        max-width: 800px;
        flex-direction: column !important;
        box-sizing: border-box;
    }

    /* Image adjustments */
    .render-image-container {
        margin-top: 0;
        height: 100%;
        border-radius: 16px;
        width: 100%;
        /* Ensure it doesn't overflow */
    }

    .render-image-container img {
        object-fit: contain !important;
        background: rgba(0, 0, 0, 0.2);
    }

    /* Adjust font sizes for tablet reading */
    .cine-title {
        font-size: 2.5rem;
        /* Increased from 2rem as requested */
        word-wrap: break-word;
        /* Prevent long words breaking layout */
    }

    /* Grid adjustments - Keep 4 columns for stats as requested */
    .cine-stats-row-v2 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 0.25rem;
        /* Tighter gap to fit 4 cols */
    }

    /* Ensure stat items fit */
    .stat-item-v2 .val {
        font-size: 0.85rem;
        /* Slightly smaller to ensure fit */
    }

    .stat-item-v2 .stat-header {
        font-size: 0.65rem;
    }

    /* Ensure other grids stack if needed */
    .cine-split-row {
        gap: 1rem;
    }
}

/* === ANIMATIONS & TRANSITIONS === */

/* Keyframes */
@keyframes cineFadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

@keyframes cineSlideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes cineScaleIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Stagger Delay Utilities */
.delay-100 {
    animation-delay: 100ms;
}

.delay-200 {
    animation-delay: 200ms;
}

.delay-300 {
    animation-delay: 300ms;
}

/* Animation Classes */
.animate-fade-in {
    animation: cineFadeIn 0.4s ease-out forwards;
}

.animate-slide-up {
    animation: cineSlideUp 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.animate-scale-in {
    animation: cineScaleIn 0.4s ease-out forwards;
}

/* Smooth Layout Transitions */
.cinematic-container,
.cine-col-left,
.cine-col-right {
    transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1);
    /* Smooth resize/reorient */
}

/* Apply animations to modal parts */
#modal-product-detail.active .cine-col-left {
    opacity: 0;
    /* Init hidden */
    animation: cineFadeIn 0.5s ease-out 0.1s forwards;
}

#modal-product-detail.active .cine-col-right {
    opacity: 0;
    transform: translateY(30px);
    animation: cineSlideUp 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.2s forwards;
}

/* Modal Overlay Transition Override */
#modal-product-detail {
    transition: opacity 0.4s ease, visibility 0.4s;
}

/* Ensure display flex is handled by JS/Framework, we animate opacity */
/* If frameworks toggle display:none, animations might need help. 
       Assuming class 'active' toggles visibility/opacity as per standard pattern */

/* =========================================
   GLOBAL STICKY HEADER & TYPOGRAPHY
   ========================================= */
.home-header {
    position: sticky !important;
    top: 0;
    z-index: 2000 !important;
    background: linear-gradient(to bottom, rgba(15, 18, 24, 0.95) 0%, rgba(15, 18, 24, 0.7) 60%, rgba(15, 18, 24, 0) 100%);
    padding-bottom: 25px !important;
    margin-top: -8px !important;
    padding-top: 15px !important;
}

/* =========================================
   MOBILE LANDSCAPE OPTIMIZATIONS
   Targeting devices like iPhone 14 Pro Max in Landscape
   (Max Height ~430-500px)
   ========================================= */
@media (max-height: 500px) and (orientation: landscape) {

    /* 0. Home Screen Fixes */
    #home-screen {
        padding: 0px 0px !important;
        /* Strip outer padding to let inner content center geometrically */
        display: block !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        width: 100vw !important;
    }

    /* Fixed absolute position for search panel on Landscape */
    #home-search-expanded {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90vw !important;
        max-width: 800px !important;
        border-radius: 0 0 20px 20px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
        z-index: 2000 !important;
        pointer-events: none !important;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        /* Smooth layout morphing between landscape and portrait */
    }

    #home-search-expanded.active {
        pointer-events: auto !important;
    }

    .home-header {
        justify-content: space-between !important;
        top: 0 !important;
        margin-top: 0px !important;
        padding-top: 15px !important;
        padding-bottom: 15px !important;
        padding-left: env(safe-area-inset-left, 30px) !important;
        padding-right: env(safe-area-inset-right, 30px) !important;
        box-sizing: border-box !important;
        align-items: center !important;
        /* Force tight vertical centering against the logo */
    }

    .btn-home-search {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
        height: 44px !important;
        /* Lock vertical bounding to avoid stretching */
        display: flex !important;
        align-items: center !important;
        margin: 0 !important;
    }

    .home-content {
        width: 100vw !important;
        max-width: 100vw !important;
        /* Allow it to span screen, letting inner grids manage their own 800px max bounds */
        display: block !important;
        /* Switch from flex to block to respect margin auto on children definitively */
        text-align: center !important;
        margin: 0 !important;
        padding-top: 0px !important;
        padding-left: 0px !important;
        /* Strip all padding from content, assign to grid strictly */
        /* Consistent symmetric paddings */
        padding-right: 0px !important;
        box-sizing: border-box !important;
    }

    .header-title {
        display: none !important;
    }

    .header-subtitle {
        display: none !important;
    }

    .tour-grid {
        width: 100vw !important;
        /* Force explicit viewport width */
        max-width: 100vw !important;
        /* Never cap width, let columns define max width */
        margin: -15px 0 0 0 !important;
        /* Strip all auto margins completely */
        height: auto !important;
        overflow-y: visible !important;
        padding: 0 20px !important;
        /* Force literal pixel-perfect symmetric padding at the screen edges */
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        /* Strictly limit to 2 columns maximum to prevent 3-card rows on extra-wide screens */
        gap: 15px !important;
        align-items: stretch !important;
        justify-content: center !important;
        /* Rely on grid justifying rather than block margin pushing */
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        box-sizing: border-box !important;
    }

    /* Revert Tour Cards to Vertical Layout for 2 Columns */
    .tour-card-v3 {
        display: flex !important;
        flex-direction: column !important;
        height: auto !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .tour-card-v3 .tc-img-wrapper {
        width: 100% !important;
        height: auto !important;
        aspect-ratio: 16/8 !important;
        /* Decreased height by ~10% */
        position: relative !important;
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
    }

    .tour-card .card-img {
        height: auto !important;
        width: 100% !important;
        object-fit: cover !important;
    }

    .tour-card-v3 .tc-img {
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        height: 100% !important;
        width: 100% !important;
    }

    .tour-card-v3 .tc-content,
    .tour-card-v3 .tc-body {
        width: 100% !important;
        box-sizing: border-box !important;
        padding: 16px 20px 20px 20px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: flex-start !important;
        height: auto !important;
        flex-grow: 1 !important;
    }

    /* Shrink the badge slightly */
    .tc-badge {
        font-size: 14.4px !important;
        padding: 5px 9px 5px 10px !important;
        top: 13px !important;
        height: 40px !important;
        display: flex !important;
        align-items: center !important;
        border-radius: 0 12px 12px 0 !important;
    }

    /* Sync Fonts matching Portrait */
    .tc-title {
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        white-space: normal !important;
    }

    .tc-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-top: 4px !important;
    }

    .tc-location {
        font-size: 0.8rem !important;
        margin-top: 8px !important;
    }

    /* 1. Compact Bottom Menu - FIXED ICONS */
    .bottom-menu {
        height: 60px !important;
        min-height: 60px !important;
        padding: 5px 20px !important;
        bottom: 0px !important;
        width: max-content !important;
        /* Shrink to fit children */
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        /* Ensure perfect centering */
        flex-wrap: nowrap !important;
        overflow: visible !important;
        /* Allow the HOT tag to bleed out on top */
        justify-content: center !important;
        background: rgba(10, 10, 12, 0.85) !important;
        backdrop-filter: blur(15px) !important;
        border-radius: 24px 24px 0 0 !important;
        z-index: 1002 !important;
        pointer-events: auto !important;
    }

    .bottom-menu .menu-item {
        padding: 0 8px !important;
        justify-content: center;
        height: 100% !important;
        display: flex !important;
        align-items: center !important;
    }

    /* Fix Search panel overflow in Landscape */
    #home-search-expanded {
        padding: 12px 15px !important;
        border-radius: 0 0 16px 16px !important;
        justify-content: center !important;
        gap: 10px !important;
        flex-wrap: wrap !important;
        height: auto !important;
        align-content: flex-start !important;
        transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        /* Force smooth animation during orientation changes */
    }

    #home-search-expanded.active {
        transform: translateX(-50%) !important;
        max-width: 700px !important;
        width: 95vw !important;
    }

    #home-search-expanded>.relative.shrink-0.ml-2 {
        width: calc(100% - 90px) !important;
        order: 1 !important;
        margin-left: 0 !important;
        transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        /* Smooth width morphing */
    }

    #home-search-expanded button[onclick="resetHomeFilters()"] {
        order: 2 !important;
        margin: 0 !important;
    }

    #home-search-expanded button[onclick="toggleHomeSearchInline()"] {
        order: 3 !important;
        margin: 0 !important;
    }

    #home-search-expanded .custom-dropdown-wrapper {
        width: calc(25% - 8px) !important;
        order: 4 !important;
        margin: 0 !important;
    }

    #home-search-expanded input,
    #home-search-expanded .custom-dropdown-header span,
    #home-search-expanded .custom-dropdown-selected {
        font-size: 14px !important;
    }

    /* Fix footer overflowing Landscape Grid */
    .home-footer {
        padding: 20px 15px 15px 15px !important;
        margin-top: 15px !important;
    }

    /* LANDSCAPE FOOTER RESTRUCTURE (Same as mobile portrait) */
    .footer-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        text-align: left !important;
    }

    .brand-col {
        grid-column: 1 / -1 !important;
        display: flex;
        flex-direction: column;
        gap: 5px;
        text-align: left !important;
    }

    .brand-col .footer-logo {
        margin-bottom: 0 !important;
        font-size: 1.2rem;
    }

    .brand-col .footer-slogan {
        margin-bottom: 10px !important;
        font-size: 0.8rem;
    }

    .footer-contact li {
        margin-bottom: 8px;
        font-size: 0.8rem;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        display: flex !important;
    }

    .footer-contact li i {
        margin-right: 8px !important;
    }

    .footer-col:not(.brand-col) {
        text-align: left !important;
    }

    .footer-links {
        display: flex;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px;
    }

    .social-icons {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .filter-search-box input,
    .filter-select-wrapper select {
        width: 100% !important;
        max-width: 100% !important;
    }

    .bottom-menu .menu-item .material-symbols-outlined {
        display: block !important;
        color: white !important;
        font-size: 24px !important;
        margin-bottom: 0 !important;
        opacity: 0.9;
    }

    .bottom-menu .menu-item:hover .material-symbols-outlined,
    .bottom-menu .menu-item.active .material-symbols-outlined {
        color: var(--primary-color) !important;
        opacity: 1;
        transform: scale(1.1);
    }

    .bottom-menu .menu-item span:not(.material-symbols-outlined) {
        display: none !important;
    }

    .bottom-menu .menu-item span.tag-hot {
        display: block !important;
        top: -8px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        width: max-content !important;
        transform: scale(0.85);
        /* 15% smaller */
        transform-origin: center center;
        /* Keep alignment */
    }

    .online-users-badge {
        bottom: 15px;
        /* Matches bottom-menu */
        left: 20px;
    }

    /* 2. Sidebars (Fund Filter & Explore) */
    .sidebar-v2,
    .fund-sidebar,
    .side-menu {
        width: 350px !important;
        max-width: 45vw !important;
        /* Cap width */
        z-index: 1000 !important;
        /* Ensure on top */
        transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Start positions: slide out horizontally */
    .sidebar-v2,
    .side-menu {
        transform: translateX(-120%) !important;
    }

    .fund-sidebar {
        transform: translateX(120%) !important;
    }

    /* Active positions: slide in horizontally */
    .sidebar-v2.active,
    .fund-sidebar.active,
    .side-menu.active {
        transform: translateX(0) !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }

    .fund-sidebar .p-6,
    .side-menu .p-6 {
        padding: 1rem !important;
    }

    /* Ensure sidebar footer fits */
    .sidebar-footer {
        padding: 10px 15px !important;
    }

    /* 3. Cinematic Modal Adjustments */
    .cinematic-container {
        flex-direction: row !important;
    }

    .cine-col-left {
        width: 35% !important;
        padding: 0.5rem !important;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .render-image-container {
        margin-top: 0 !important;
        max-height: 100% !important;
        border-radius: 12px !important;
    }

    .cine-col-right {
        width: 65% !important;
        padding: 0.75rem !important;
        gap: 0.5rem !important;
    }

    .cine-title {
        font-size: 1.25rem !important;
        margin: 0.25rem 0 !important;
    }

    .price-large {
        font-size: 2.2rem !important;
    }

    /* 4. Controls Vertical - Tidier Layout */
    /* 4. Controls Vertical - Tidier Layout */
    .vr-controls-vertical {
        background: rgba(10, 10, 14, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 50px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding: 8px !important;
        gap: 8px !important;

        position: absolute !important;
        top: 50% !important;
        right: 15px !important;
        transform: translateY(-50%) scale(0.85) !important;
        transform-origin: right center !important;

        display: flex !important;
        flex-direction: column !important;
        width: 50px !important;
        align-items: center !important;

        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    /* Specific Icon Styling */
    .vr-controls-vertical .btn-glass,
    .vr-controls-vertical .icon-btn {
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: white !important;
        transition: color 0.3s ease !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .vr-controls-vertical .btn-glass i,
    .vr-controls-vertical .btn-glass span {
        color: white !important;
        font-weight: bold !important;
    }

    .vr-controls-vertical .btn-glass:hover i,
    .vr-controls-vertical .btn-glass:active i {
        color: var(--primary-color) !important;
    }
}

/* =========================================
   HOME SCREEN REFINEMENTS (TOUR CARD V3 - LIGHT THEME)
   ========================================= */

.tour-card-v3 {
    background: rgba(255, 255, 255, 0.05);
    /* Liquid glass dark background */
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    overflow: visible;
    /* To allow ribbon badge to overflow */
    cursor: pointer;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.5s cubic-bezier(0.25, 0.8, 0.25, 1);
    display: flex;
    flex-direction: column;
    position: relative;
    width: 100%;
    margin-bottom: 20px;
}

.tour-card-v3:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.4);
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
}

.tc-img-wrapper {
    position: relative;
    width: 100%;
    height: 280px;
    /* Increased to show more image height */
    border-radius: 12px 12px 0 0;
    overflow: hidden;
}

.tc-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Keeps aspect ratio but covers area */
    transition: transform 0.5s ease;
}

.tour-card-v3:hover .tc-img {
    transform: scale(1.05);
}

/* RIBBON BADGES WITH FOLD (3D EFFECT) & ANIMATION */
.tc-badge {
    position: absolute;
    top: 13px;
    /* Pull tag up mechanically */
    left: -8px;
    padding: 5px 9px 5px 8px;
    /* Slightly longer padding on right for the round edge */
    font-size: 14.4px;
    font-weight: 800;
    color: white;
    text-transform: uppercase;
    z-index: 20;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.4);
    overflow: hidden;
    height: 40px;
    /* Force an explicit height to match the heart bounds */
    display: flex;
    /* Centering text over the new height */
    align-items: center;
    border-radius: 0 12px 12px 0;
}

/* Light Sweep Shine Animation Overlay */
.tc-badge::after {
    content: '';
    position: absolute;
    top: 0;
    left: -150%;
    width: 50%;
    height: 100%;
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
    transform: skewX(-25deg);
    animation: shineSweep 9s infinite 1s;
}

@keyframes shineSweep {
    0% {
        left: -150%;
    }

    15% {
        left: 200%;
    }

    100% {
        left: 200%;
    }
}

/* The folded shadow triangle */
.tc-badge::before {
    content: '';
    position: absolute;
    left: 0;
    bottom: -8px;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 8px 8px 0;
}

/* Colors for the badge and the fold */
.tc-badge.bg-blue {
    background: linear-gradient(135deg, #1A4EB8 0%, #0F2A66 100%);
}

.tc-badge.bg-blue::before {
    border-color: transparent #0a1c45 transparent transparent;
}

.tc-badge.bg-orange {
    background: linear-gradient(135deg, #F08A1B 0%, #B8650D 100%);
}

.tc-badge.bg-orange::before {
    border-color: transparent #7a4208 transparent transparent;
}

/* Product Count Badge */
.tc-product-count {
    position: absolute;
    bottom: 15px;
    left: 15px;
    background: rgba(10, 15, 30, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    padding: 6px 12px;
    border-radius: 20px;
    /* display is toggled via JS */
    align-items: center;
    gap: 8px;
    z-index: 10;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
    transition: all 0.3s ease;
    cursor: pointer;
}

.tc-product-count:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4);
    background: rgba(10, 15, 30, 0.85);
    border: 1px solid rgba(208, 189, 149, 0.5);
}

.tc-product-count b {
    color: #d0bd95;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1;
    margin: 0;
}

.tc-count-text {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 4px;
    height: 1.6rem;
    /* matches the line-height of the number */
    text-align: left;
}

.tc-count-text span {
    font-size: 8px;
    line-height: 1;
    text-transform: uppercase;
    opacity: 0.9;
    letter-spacing: 0.5px;
}

/* Favorite Icon on Image */
.tc-fav-btn {
    position: absolute;
    top: 13px;
    /* Vertically align top bounding edge perfectly with badge top */
    right: 15px;
    background: transparent;
    border: none;
    color: rgba(255, 255, 255, 0.7);
    cursor: pointer;
    z-index: 10;
    transition: transform 0.2s, color 0.2s;
    padding: 0;
    height: 40px;
    /* Lock standard geometry boundaries to match badge size */
    display: flex;
    align-items: center;
}

.tc-fav-btn .material-symbols-outlined {
    font-size: 1.8rem;
    font-variation-settings: 'FILL' 1;
    /* Make it solid */
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
}

.tc-fav-btn:hover,
.tc-fav-btn.active {
    color: #ff4757;
    /* Red heart on hover/active */
    transform: scale(1.1);
}

.tc-coming-soon {
    position: absolute;
    inset: 0;
    background: rgba(10, 15, 30, 0.8);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: rgba(255, 255, 255, 0.9);
    z-index: 15;
}

.tc-coming-soon .material-symbols-outlined {
    font-size: 2rem;
    color: #d0bd95;
    margin-bottom: 8px;
    animation: pulse-gold 2s infinite;
}

.tc-coming-soon p {
    font-weight: 600;
    font-size: 1.1rem;
    letter-spacing: 0.5px;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    margin: 0;
}

@keyframes pulse-gold {
    0% {
        opacity: 0.7;
        transform: scale(0.95);
    }

    50% {
        opacity: 1;
        transform: scale(1.05);
    }

    100% {
        opacity: 0.7;
        transform: scale(0.95);
    }
}

/* Card Information Body */
.tc-body {
    padding: 15px 20px;
    height: auto;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 6px;
    text-align: left;
    flex-grow: 1;
}

.tc-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: 100%;
}

.tc-title {
    font-size: 1.35rem;
    /* slightly scaled down to accommodate long titles */
    font-weight: 800;
    color: white;
    margin: 0;
    line-height: 1.3;
}

.tc-link-icon {
    color: var(--primary-color);
    font-size: 1.5rem;
    padding-left: 10px;
}

.tc-subtitle-wrapper {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    margin-bottom: 4px;
    /* Slight separation from location below it */
}

.tc-subtitle-icon {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.5;
    /* Match subtitle line-height perfectly */
    flex-shrink: 0;
    /* Prevent icon from squishing on tight lines */
    position: relative;
    top: 1px;
    /* Micro adjustment to align with text cap-height */
}

.tc-subtitle {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    font-weight: 500;
    line-height: 1.5;
}

.tc-location {
    display: flex;
    align-items: flex-start;
    /* Switch back to flex-start instead of baseline to lock geometry */
    gap: 6px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.85rem;
    margin-top: 8px;
}

.tc-location .material-symbols-outlined {
    font-size: 1rem;
    position: relative;
    top: -2px;
    /* Precision tweak to align icon bottom tip perfectly with text descender */
}



/* =========================================
   HOME SCREEN HEADER & FOOTER
   ========================================= */

.home-header {
    width: 100%;
    max-width: 1400px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 30px 20px 0 20px;
    z-index: 10;
}

.header-logo-text {
    font-size: 1.5rem;
    font-weight: 800;
    letter-spacing: 2px;
    color: white;
}

.header-logo-text .icon {
    font-size: 1.8rem;
    margin-right: 5px;
}

.btn-home-search {
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: white;
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
}

.btn-home-search:hover {
    background: rgba(255, 255, 255, 0.2);
    border-color: rgba(255, 255, 255, 0.4);
}

.home-footer {
    width: 100%;
    background: rgba(10, 15, 30, 0.9);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    padding: 60px 20px 30px 20px;
    margin-top: 40px;
}

.footer-grid {
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 40px;
}

.footer-col h4 {
    font-size: 1rem;
    font-weight: 700;
    color: white;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
}

.footer-col h4::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 40px;
    height: 2px;
    background: var(--primary-color);
}

.brand-col .footer-logo {
    font-size: 1.5rem;
    font-weight: 800;
    color: white;
    margin-bottom: 15px;
}

.brand-col .footer-slogan {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
    margin-bottom: 20px;
    line-height: 1.5;
}

.footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.8);
    margin-bottom: 15px;
    line-height: 1.5;
}

.footer-contact li .material-symbols-outlined {
    font-size: 1.2rem;
    color: var(--primary-color);
    position: relative;
    top: 2px;
}

.footer-links,
.footer-contact {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 15px;
}

.footer-links a {
    color: rgba(255, 255, 255, 0.7);
    text-decoration: none;
    font-size: 0.9rem;
    transition: color 0.3s ease;
}

.footer-links a:hover {
    color: var(--primary-color);
}

.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    color: white;
    text-decoration: none;
    font-size: 1.2rem;
    transition: all 0.3s ease;
}

.social-icons a:hover {
    background: var(--primary-color);
    color: #1a1b24;
    transform: translateY(-3px);
}

.footer-bottom {
    max-width: 1400px;
    margin: 60px auto 0 auto;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.copyright p {
    margin: 0;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.7);
}

.copyright .sub-copy {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: 5px;
}

.back-to-top {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-color);
    border: none;
    color: #1a1b24;
    cursor: pointer;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: transform 0.3s ease;
}

.back-to-top:hover {
    transform: translateY(-3px);
}

/* =========================================
   HOME SEARCH EXPANDED SPECIFICS
   ========================================= */

#home-search-expanded {
    background: rgba(15, 18, 24, 0.8) !important;
    backdrop-filter: blur(20px) !important;
    -webkit-backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4) !important;
    z-index: 100;
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    padding: 0;
    border-color: transparent !important;
    transition: max-width 0.5s cubic-bezier(0.19, 1, 0.22, 1), opacity 0.4s ease, padding 0.5s ease;
}

#home-search-expanded.active {
    opacity: 1;
    pointer-events: auto;
    transform: translateX(0);
    max-width: 1200px;
    padding: 0 8px;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: rgba(15, 18, 24, 0.95) !important;
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.6) !important;
}

#btn-home-search-toggle {
    z-index: 50;
    background: rgba(15, 18, 24, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.4);
    transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    transform-origin: right center;
    max-width: 250px;
    /* Base button width */
    overflow: hidden;
    white-space: nowrap;
}

#btn-home-search-toggle:hover {
    background: rgba(15, 18, 24, 0.95);
    border-color: rgba(255, 255, 255, 0.2);
}

#btn-home-search-toggle.hidden-toggle {
    opacity: 0;
    pointer-events: none;
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin: 0;
    border-color: transparent;
}

/* Search Box & Dropdowns */
.filter-search-box input {
    font-size: 0.95rem;
}

.filter-search-box input::placeholder {
    color: rgba(255, 255, 255, 0.4);
}

/* Custom Dropdown Overrides for Home Search */
#home-search-expanded .custom-dropdown-header {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid transparent;
    color: white;
    padding: 6px 16px;
    height: 38px;
    border-radius: 9999px;
    font-size: 0.875rem;
}

#home-search-expanded .custom-dropdown-header:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.1);
}

#home-search-expanded .custom-dropdown-header::after {
    content: '\e313';
    font-family: 'Material Symbols Outlined';
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    margin-left: auto;
    transition: transform 0.3s ease;
}

#home-search-expanded .custom-dropdown-wrapper.active .custom-dropdown-header::after {
    transform: rotate(180deg);
}

#home-search-expanded .custom-dropdown-list {
    position: absolute;
    display: none;
    background: rgba(15, 18, 24, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.1);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    padding: 8px 0;
    top: calc(100% + 5px);
    width: 200px;
    z-index: 1000;
}

#home-search-expanded .custom-dropdown-list.active {
    display: block;
}

#home-search-expanded .custom-dropdown-wrapper {
    position: relative;
}

#home-search-expanded .custom-option {
    color: rgba(255, 255, 255, 0.9);
    padding: 8px 16px;
    border-radius: 0;
    font-size: 13px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    transition: all 0.2s;
}

#home-search-expanded .custom-option:last-child {
    border-bottom: none;
}

#home-search-expanded .custom-option:hover,
#home-search-expanded .custom-option.selected {
    background: rgba(255, 255, 255, 0.1);
    color: var(--primary-color);
}

/* Staggered Card Animation */
.tour-card-anim {
    animation: fadeSlideUp 0.5s ease forwards;
    opacity: 0;
    transform: translateY(20px);
}

@keyframes fadeSlideUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive Footer & Search */
@media (max-width: 768px) {

    /* Portrait Fixed Search Panel */
    #home-search-expanded {
        position: fixed !important;
        top: 0 !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 100vw !important;
        max-width: 100vw !important;
        border-radius: 0 0 20px 20px !important;
        padding: 15px 20px !important;
        box-shadow: 0 20px 50px rgba(0, 0, 0, 0.5) !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
        height: auto !important;
        align-content: flex-start !important;
        transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        /* Retain transition during device orientation changes */
    }

    #home-search-expanded>.relative.shrink-0.ml-2 {
        width: calc(100% - 100px) !important;
        order: 1 !important;
        margin-left: 0 !important;
        transition: width 0.5s cubic-bezier(0.25, 0.8, 0.25, 1) !important;
        /* Smooth width morphing */
    }

    #home-search-expanded button[onclick="resetHomeFilters()"] {
        order: 2 !important;
        margin: 0 !important;
    }

    #home-search-expanded button[onclick="toggleHomeSearchInline()"] {
        order: 3 !important;
        margin: 0 !important;
    }

    #home-search-expanded .custom-dropdown-wrapper {
        width: calc(50% - 5px) !important;
        order: 4 !important;
        margin: 0 !important;
    }

    /* Hide title and slogan completely */
    .header-title {
        display: none !important;
    }

    .home-content {
        padding-top: 0px !important;
    }

    .header-subtitle {
        display: none !important;
    }

    .home-footer {
        padding: 20px 20px 15px 20px !important;
        margin-top: 15px !important;
    }

    /* GLOBAL MOBILE FOOTER RESTRUCTURE */
    .footer-grid {
        display: grid !important;
        grid-template-columns: repeat(3, 1fr) !important;
        gap: 15px !important;
        text-align: left !important;
    }

    /* Row 1: Logo/Slogan/Contact full width */
    .brand-col {
        grid-column: 1 / -1 !important;
        display: flex;
        flex-direction: column;
        gap: 5px;
        text-align: left !important;
    }

    .brand-col .footer-logo {
        margin-bottom: 0 !important;
        font-size: 1.2rem;
    }

    .brand-col .footer-slogan {
        margin-bottom: 10px !important;
        font-size: 0.8rem;
    }

    /* Make contact items side-by-side if they fit, or stacked tight */
    .footer-contact li {
        margin-bottom: 8px;
        font-size: 0.8rem;
        justify-content: flex-start !important;
        align-items: flex-start !important;
        display: flex !important;
    }

    .footer-contact li i {
        margin-right: 8px !important;
    }

    /* Row 2: Grid for Links */
    .footer-col:not(.brand-col) {
        text-align: left !important;
    }

    .footer-col h4 {
        margin-bottom: 8px;
        font-size: 0.9rem;
        padding-bottom: 5px;
    }

    .footer-col h4::after {
        left: 0 !important;
        transform: none !important;
    }

    .footer-links {
        display: flex;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        gap: 12px;
    }

    .footer-links li {
        margin-bottom: 0;
    }

    .social-icons {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .footer-col h4 {
        margin-bottom: 10px;
    }

    .footer-links li {
        margin-bottom: 10px;
    }

    .footer-contact li {
        margin-bottom: 10px;
    }

    .footer-bottom {
        flex-direction: column;
        gap: 15px;
        text-align: center;
        margin-top: 30px;
        padding-top: 15px;
    }

    #home-search-expanded {
        top: 60px;
        right: 0;
        width: calc(100vw - 40px);
        max-width: 100vw;
        height: auto !important;
        flex-wrap: wrap;
        padding: 15px !important;
        border-radius: 12px !important;
        justify-content: center;
    }

    #home-screen .tour-grid {
        grid-template-columns: 1fr !important;
        /* Use 1 column on portrait */
        gap: 15px !important;
    }

    .tour-card-v3 {
        height: auto !important;
        /* Allow the card to grow based on text */
    }

    .tour-card-v3 .tc-img-wrapper {
        height: auto !important;
        aspect-ratio: 16/9 !important;
        /* Make image taller and proportional */
        width: 100% !important;
    }

    .tour-card-v3 .tc-content {
        padding: 10px 12px 14px 12px !important;
        height: auto !important;
        /* Allow content to grow perfectly without gaps */
    }

    .tc-title {
        font-size: 1.15rem !important;
        line-height: 1.4 !important;
        white-space: normal !important;
        /* Let long titles wrap elegantly */
    }

    .tc-subtitle {
        font-size: 0.9rem !important;
        line-height: 1.4 !important;
        margin-top: 4px !important;
    }

    .tc-location {
        font-size: 0.8rem !important;
        margin-top: 8px !important;
    }

    .filter-search-box input,
    .filter-select-wrapper select {
        width: 100% !important;
        max-width: 100% !important;
    }

    #btn-home-search-toggle {
        font-size: 0 !important;
        /* Hide "Tìm kiếm dự án" text to save space */
        padding: 10px 14px !important;
        /* Smaller button */
        gap: 0 !important;
    }

    #btn-home-search-toggle .material-symbols-outlined {
        font-size: 1.3rem !important;
        /* Keep search icon visible */
    }
}

/* =========================================
   MOBILE PORTRAIT OPTIMIZATIONS
   Targeting devices like iPhone 14 Pro Max in Portrait
   (Width < 768px)
   ========================================= */
@media (max-width: 768px) and (orientation: portrait) {

    /* 1. Full Screen Sidebars */
    .sidebar-v2,
    .fund-sidebar,
    .side-menu {
        width: 100% !important;
        max-width: 100% !important;
        border-right: none !important;
        border-left: none !important;
    }

    /* Ensure panels don't clip dropdowns */
    .panel-slide-wrapper.bottom {
        overflow: visible !important;
    }

    /* 2. Bottom Menu - Portrait Fixed */
    .bottom-menu {
        height: auto !important;
        min-height: 70px !important;
        padding: 8px 10px !important;
        bottom: 5px !important;
        width: max-content !important;
        max-width: 90vw !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        justify-content: flex-start !important;
        background: rgba(10, 10, 12, 0.9) !important;
        backdrop-filter: blur(15px) !important;
        border-radius: 40px !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
    }

    .bottom-menu .menu-item {
        min-width: 55px !important;
        margin-right: 4px !important;
        padding: 4px !important;
        opacity: 1 !important;
        /* Force visible */
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
    }

    .bottom-menu .menu-item .material-symbols-outlined {
        display: block !important;
        color: white !important;
        font-size: 24px !important;
        margin-bottom: 4px !important;
        opacity: 0.9;
    }

    .bottom-menu .menu-item span:not(.material-symbols-outlined) {
        display: block !important;
        /* Show labels in portrait */
        font-size: 10px !important;
        font-weight: 500 !important;
        color: rgba(255, 255, 255, 0.7) !important;
        white-space: nowrap;
    }

    .bottom-menu .menu-item span.tag-hot {
        top: -12px !important;
        left: 0 !important;
        right: 0 !important;
        margin: 0 auto !important;
        width: max-content !important;
    }

    .online-users-badge {
        bottom: 130px !important;
        right: 20px !important;
        left: auto !important;
    }

    .online-users-badge span:last-child {
        display: none !important;
    }

    /* Move Back to Top button above the online users badge */
    .back-to-top {
        bottom: 180px !important;
    }

    .bottom-menu .menu-item.active .material-symbols-outlined {
        color: var(--primary-color) !important;
        opacity: 1;
        transform: scale(1.1);
    }

    .bottom-menu .menu-item.active span:not(.material-symbols-outlined) {
        color: var(--primary-color) !important;
    }

    /* Hide scrollbar in menu */
    .bottom-menu::-webkit-scrollbar {
        display: none;
    }

    /* 3. Product Modal - Vertical Stack */
    .cinematic-container {
        flex-direction: column !important;
    }

    .cine-col-left {
        width: 100% !important;
        height: 280px !important;
        flex: none !important;
        padding: 0.5rem !important;
    }

    .cine-col-right {
        width: 100% !important;
        flex: 1 !important;
        overflow-y: auto !important;
        padding-bottom: 120px !important;
        /* More space for bottom menu */
    }

    /* 4. Controls Vertical - Optimize for Portrait */
    .vr-controls-vertical {
        transform: scale(0.85);
        right: 15px !important;
        bottom: auto !important;
        top: 20% !important;
        /* Move to upper section */
        /* bottom: 140px !important; REMOVED to avoid clutter */
        transform-origin: right top !important;
        display: flex !important;
        flex-direction: column !important;
    }
}

/* =========================================
   GLOBAL VISUAL REFINEMENTS
   ========================================= */

/* 1. Better Active State (Gold Glow) */
.bottom-menu .menu-item.active {
    background: transparent !important;
    /* Remove white bg */
    box-shadow: none !important;
}

.bottom-menu .menu-item.active>.material-symbols-outlined,
.bottom-menu .menu-item.active>span {
    color: var(--primary-color) !important;
    text-shadow: 0 0 15px rgba(208, 189, 149, 0.6);
    /* Premium Glow */
    transform: scale(1.1);
}

/* 2. Compact Sidebar Menu */
.side-menu .menu-item {
    padding: 10px 16px !important;
    /* Reduced from default */
    min-height: 40px;
    /* Ensure not too tall */
}

/* 3. Unified Panel Styles (Ensure Consistency) */
.sidebar-v2,
.fund-sidebar,
.side-menu {
    background: rgba(10, 10, 12, 0.95);
    backdrop-filter: blur(20px);
    border-right: 1px solid rgba(255, 255, 255, 0.08);
    /* Consistent border */
}

/* =========================================
   COMPREHENSIVE UI REFINEMENTS (Feedback Fixes)
   ========================================= */

/* GLOBAL: UNIFY PANEL BACKGROUNDS */
.sidebar-v2,
.fund-sidebar,
.side-menu,
#modal-product-detail .modal-content,
.dropdown-content {
    background: rgba(10, 10, 12, 0.95) !important;
    backdrop-filter: blur(20px) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* GLOBAL DROPDOWN VISIBILITY (Fix for Landscape) */
.dropdown-content {
    display: none;
    /* hidden by default */
    /* Other styles managed by media queries or JS */
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.dropdown-content::-webkit-scrollbar {
    display: none;
}

.menu-item.has-dropdown.active .dropdown-content {
    display: block !important;
    animation: fadeUp 0.3s ease forwards;
}

/* Dynamically Detached Dropdowns (JS appended to body) */
.dropdown-content.active-detached {
    display: block !important;
    animation: fadeUp 0.3s ease forwards;
}

/* Landscape Dropdown Positioning */
@media (max-height: 500px) and (orientation: landscape) {
    .dropdown-content {
        position: absolute !important;
        bottom: 100% !important;
        /* Above menu */
        left: 50% !important;
        transform: translateX(-50%) !important;
        margin-bottom: 10px !important;
        width: 220px !important;
        max-height: 200px !important;
        overflow-y: auto !important;
        border-radius: 12px !important;
        z-index: 99999 !important;
    }
}

/* PORTRAIT SPECIFIC FIXES (PHASE 3 REFINEMENTS) */
@media (max-width: 768px) and (orientation: portrait) {

    /* 1. Floating Card Sidebars (Rebalanced Size) */
    .sidebar-v2,
    .fund-sidebar,
    .side-menu {
        height: 96vh !important;
        max-height: 96vh !important;
        width: 96% !important;
        left: 2% !important;
        top: 49% !important;
        border-radius: 20px !important;
        box-shadow: 0 40px 80px rgba(0, 0, 0, 0.9) !important;
        z-index: 100000 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease !important;
        /* Softer, smoother slide */
    }

    /* Side menu slides left */
    .sidebar-v2,
    .side-menu {
        transform: translateY(-50%) translateX(-120%) !important;
    }

    /* Filter menu slides right */
    .fund-sidebar {
        transform: translateY(-50%) translateX(120%) !important;
    }

    .fund-sidebar.active,
    .side-menu.active,
    .sidebar-v2.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateY(-50%) translateX(0) !important;
        /* MATCH SIGNATURE: Center on screen when active */
    }

    #sidebar-overlay {
        z-index: 99998 !important;
    }

    /* Ensure close buttons are clickable */
    .close-sidebar-btn {
        z-index: 2005 !important;
    }

    /* Compact Sidebar Items */
    .fund-sidebar .p-6,
    .side-menu .p-6,
    .sidebar-header {
        padding: 12px 16px !important;
    }

    #search-results-list {
        gap: 10px !important;
    }

    /* 2. Portrait Typography Overrides (Modal Fit) */
    .stat-item-v2 .val {
        font-size: 0.85rem !important;
        /* Normalize with other text */
    }

    .stat-item-v2 .stat-header .material-symbols-outlined {
        font-size: 1rem !important;
        /* Smaller text needs smaller icon */
    }

    #pd-title,
    .cine-title {
        font-size: 36px !important;
        /* Updated from 2.4rem */
        line-height: 1 !important;
        margin-bottom: 0 !important;
    }

    .cine-location {
        margin-top: 0.25rem !important;
        /* Move location closer to title */
        margin-bottom: 0.5rem !important;
    }

    .price-header-panel .label-small {
        font-size: 0.9rem !important;
        /* Equal to h3 */
        font-weight: 700 !important;
    }

    .visual-card-item {
        height: 120px !important;
    }

    /* 2. Fix Dropdown Lists - VISIBILITY & COLOR */
    .dropdown-content {
        position: absolute !important;
        bottom: 80px !important;
        /* Above menu */
        left: 50% !important;
        transform: translateX(-50%) !important;
        top: auto !important;
        width: 220px !important;
        max-height: 250px !important;
        overflow-y: auto !important;
        z-index: 99999 !important;
        border-radius: 16px !important;
        padding: 8px !important;
        display: none;
        /* Ensure Text Color is White */
        color: white !important;
    }

    .dropdown-item {
        color: rgba(255, 255, 255, 0.9) !important;
        font-size: 14px !important;
    }

    .dropdown-item:hover {
        background: rgba(255, 255, 255, 0.1) !important;
        color: var(--primary-color) !important;
    }

    .menu-item.has-dropdown.active .dropdown-content {
        display: block !important;
    }

    /* 3. Product Detail (Portrait Refined) */
    #modal-product-detail .modal-content {
        width: 96vw !important;
        /* Strict Fit */
        margin-left: 2vw !important;
        margin-right: 2vw !important;
        left: 0 !important;
        top: 5% !important;
        transform: none !important;
        border-radius: 24px !important;
        max-height: 88vh !important;
        display: flex !important;
        flex-direction: column !important;
        box-sizing: border-box !important;
    }

    .cinematic-container {
        overflow-y: auto !important;
        height: 100% !important;
        display: block !important;
    }

    .cine-col-left {
        width: 100% !important;
        height: auto !important;
        min-height: 250px !important;
        padding: 0 !important;
        flex: none !important;
    }

    .render-image-container {
        border-radius: 0 !important;
        margin-top: 0 !important;
        height: 280px !important;
    }

    .cine-col-right {
        width: 100% !important;
        padding: 15px !important;
        overflow: visible !important;
        box-sizing: border-box !important;
        padding-bottom: 60px !important;
        /* Reduced padding */
    }

    /* Stats Row - Single Line */
    .cine-stats-row-v2 {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 4px !important;
    }

    .stat-item-v2 .label {
        font-size: 9px !important;
    }

    .stat-item-v2 .val {
        font-size: 13.6px !important;
    }

    /* 4. Controls Vertical - WHITE ICONS -> GOLD HOVER */
    .vr-controls-vertical {
        background: rgba(10, 10, 14, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 50px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding: 8px !important;
        gap: 8px !important;

        position: absolute !important;
        top: 20% !important;
        right: 28px !important;
        bottom: auto !important;
        transform: scale(0.85) !important;
        transform-origin: top right !important;

        display: flex !important;
        flex-direction: column !important;
        width: 44px !important;
        align-items: center !important;

        pointer-events: auto !important;
        z-index: 99999 !important;
    }

    /* Specific Icon Styling */
    .vr-controls-vertical .btn-glass,
    .vr-controls-vertical .icon-btn {
        background: transparent !important;
        /* Remove circle bg */
        border: none !important;
        /* Remove border */
        box-shadow: none !important;
        color: white !important;
        /* Default White */
        transition: color 0.3s ease !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .vr-controls-vertical .btn-glass i,
    .vr-controls-vertical .btn-glass span {
        color: white !important;
        font-weight: bold !important;
    }

    /* Gold on Hover/Active */
    .vr-controls-vertical .btn-glass:hover i,
    .vr-controls-vertical .btn-glass:active i {
        color: var(--primary-color) !important;
    }

    /* 5. Explore & Close Buttons - Consistent Style */
    .menu-btn,
    .close-tour-btn,
    #btn-toggle-filter {
        background: transparent !important;
        backdrop-filter: none !important;
        border: none !important;
        box-shadow: none !important;
        color: white !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .menu-btn:hover,
    .close-tour-btn:hover,
    #btn-toggle-filter:hover {
        color: var(--primary-color) !important;
    }

    /* 6. Admin Contact Bar - REFACTORED LAYOUT */
    .agent-card {
        padding: 15px !important;
    }

    .agent-actions {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        justify-content: space-between !important;
    }

    /* Icons (Chat/Call) take up half space each */
    .agent-actions .cine-icon-btn {
        flex: 1 !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        height: 44px !important;
    }

    /* Booking Button - Full Width on New Line */
    #modal-product-detail .btn-booking,
    .btn-booking {
        width: 100% !important;
        margin-top: 5px !important;
        max-width: none !important;
        order: 3 !important;
        height: 48px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Avatar Fix */
    .agent-avatar-wrapper,
    .agent-avatar-wrapper img,
    #pd-agent-avatar {
        width: 44px !important;
        height: 44px !important;
        min-width: 44px !important;
        aspect-ratio: 1/1 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    /* 7. Action Bar (Zalo) Position */
    .action-bar {
        bottom: 120px !important;
        right: 15px !important;
        z-index: 2100 !important;
    }
}

/* LANDSCAPE MOBILE OPTIMIZATIONS (NUCLEAR INTERACTIVITY FIX) */
@media (max-height: 500px) and (orientation: landscape) {

    /* 1. Sidebar Interactions & Height - Restored to Edges */
    .sidebar-v2,
    .fund-sidebar,
    .side-menu {
        height: 100% !important;
        max-height: 100% !important;
        width: 350px !important;
        max-width: 45vw !important;
        top: 0 !important;
        border-radius: 0 !important;
        z-index: 100000 !important;
        overflow-y: auto !important;

        opacity: 0 !important;
        pointer-events: none !important;
        transition: transform 0.5s cubic-bezier(0.25, 0.8, 0.25, 1), opacity 0.4s ease !important;
    }

    .sidebar-v2,
    .side-menu {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-100%) !important;
    }

    .fund-sidebar {
        left: auto !important;
        right: 0 !important;
        transform: translateX(100%) !important;
    }

    .fund-sidebar.active,
    .side-menu.active,
    .sidebar-v2.active {
        opacity: 1 !important;
        pointer-events: auto !important;
        transform: translateX(0) !important;
    }

    .visual-card-item {
        height: 100px !important;
    }

    .visual-card-title {
        font-size: 0.9rem !important;
    }

    /* 2. Control Menu & Buttons - Z-INDEX 99999 */
    .vr-controls-vertical {
        background: rgba(10, 10, 14, 0.7) !important;
        backdrop-filter: blur(10px) !important;
        border-radius: 50px !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
        padding: 4px 8px !important;
        gap: 2px !important;

        position: absolute !important;
        top: 50% !important;
        right: 28px !important;
        transform: translateY(-50%) scale(0.85) !important;
        transform-origin: right center !important;
        flex-direction: column !important;
        width: 44px !important;
        align-items: center !important;

        pointer-events: auto !important;
        z-index: 99999 !important;
    }

    .vr-controls-vertical .btn-glass,
    .vr-controls-vertical .icon-btn {
        border: none !important;
        background: transparent !important;
        width: 44px !important;
        /* Increased Touch Area */
        height: 44px !important;
        color: white !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .vr-controls-vertical .divider {
        background: rgba(255, 255, 255, 0.1) !important;
        margin: 2px 0 !important;
    }

    /* 3. Explore & Close Buttons - HIT AREA FIX */
    .menu-btn,
    .close-tour-btn,
    #btn-toggle-filter {
        width: 44px !important;
        /* Minimum Touch Target */
        height: 44px !important;
        top: 20px !important;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
        color: white !important;
        backdrop-filter: none !important;
        z-index: 99999 !important;
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .ui-overlay>.menu-btn:first-child,
    .menu-btn[onclick="toggleSidebar()"] {
        left: max(20px, env(safe-area-inset-left)) !important;
    }

    .menu-btn[onclick="closeTour()"] {
        right: max(20px, env(safe-area-inset-right)) !important;
        left: auto !important;
    }

    .menu-btn:hover,
    .close-tour-btn:hover,
    #btn-toggle-filter:hover {
        color: var(--primary-color) !important;
    }

    /* Ensure Bottom Menu is accessible */
    .bottom-menu {
        z-index: 99999 !important;
        pointer-events: auto !important;
        overflow: visible !important;
    }

    .online-users-badge {
        bottom: 20px !important;
        right: max(20px, env(safe-area-inset-right)) !important;
        left: auto !important;
    }

    .online-users-badge span:last-child {
        display: none !important;
    }

    /* 4. Align Global Search Bar with side buttons */
    .global-fund-search-container {
        top: 20px !important;
    }

    #global-fund-search-input {
        height: 44px !important;
    }

    /* 5. Fix Dropdown Wrappers in Expandable Search Panel (Home Screen) */
    #home-search-expanded .custom-dropdown-wrapper {
        width: calc(50% - 8px) !important;
        margin-bottom: 10px !important;
    }

    /* 6. Ensure Dropdowns escape slide wrappers */
    .panel-slide-wrapper.bottom {
        overflow: visible !important;
    }

    /* 7. Agent Actions - Buttons reduced 20% in landscape */
    .agent-card {
        padding: 18px !important;
    }

    .agent-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        gap: 8px !important;
        justify-content: space-between !important;
        align-items: center !important;
    }

    .agent-actions .cine-icon-btn {
        flex: 0 0 auto !important;
        background: rgba(255, 255, 255, 0.1) !important;
        border: 1px solid rgba(255, 255, 255, 0.2) !important;
        height: 35px !important;
        width: 35px !important;
        min-width: 35px !important;
    }

    .agent-actions .cine-icon-btn .material-symbols-outlined {
        font-size: 18px !important;
    }

    #modal-product-detail .btn-booking,
    .btn-booking {
        flex: 1 !important;
        margin-top: 0 !important;
        max-width: none !important;
        order: 3 !important;
        height: 38px !important;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 0.7rem !important;
        padding: 0 12px !important;
    }

    /* Agent info area - increased 20% in landscape */
    .agent-info {
        gap: 12px !important;
    }

    .agent-avatar-wrapper,
    .agent-avatar-wrapper img,
    #pd-agent-avatar {
        width: 52px !important;
        height: 52px !important;
        min-width: 52px !important;
        aspect-ratio: 1/1 !important;
        border-radius: 50% !important;
        object-fit: cover !important;
    }

    .agent-name {
        font-size: 1rem !important;
    }
}

/* Show Fullscreen Button only on Desktop */
#btn-fullscreen {
    display: none !important;
}

/* =========================================
   DESKTOP ONLY PRODUCT MODAL REFINEMENTS (+20% Font Size)
   ========================================= */
@media (min-width: 1025px) {
    #btn-fullscreen {
        display: flex !important;
    }

    /* 1. Spread out content vertically -> Reduced by 50% */
    .cine-col-right {
        gap: 0.75rem !important;
        justify-content: space-around !important;
        padding: 1.25rem 1rem !important;
    }

    /* 2. Increase Font Sizes by ~20% */
    #pd-title,
    .cine-title {
        font-size: 45px !important;
    }

    .cine-location {
        margin-bottom: 16px !important;
    }

    .cine-location p {
        font-size: 1.1rem !important;
    }

    .stat-item-v2 .stat-header {
        font-size: 0.85rem !important;
    }

    .stat-item-v2 .stat-header .material-symbols-outlined {
        font-size: 1.25rem !important;
    }

    .stat-item-v2 .val {
        font-size: 1.1rem !important;
        /* Matches desktop normal text */
    }

    .price-header-panel .label-small {
        font-size: 0.75rem !important;
        margin-top: 4px !important;
    }

    .price-large {
        font-size: 2.4rem !important;
    }

    .price-large .currency {
        font-size: 1rem !important;
    }

    .price-per-meter-badge {
        font-size: 0.95rem !important;
    }

    .detail-group .group-header h3 {
        font-size: 1.1rem !important;
    }

    .detail-group .group-header .material-symbols-outlined {
        font-size: 1.35rem !important;
    }

    .minimal-stat-card {
        font-size: 1.05rem !important;
    }

    .minimal-stat-card .label {
        font-size: 1.05rem !important;
    }

    .minimal-stat-card .val {
        font-size: 1.05rem !important;
    }

    .cine-grid-2 .label {
        font-size: 0.9rem !important;
    }

    .cine-grid-2 .val {
        font-size: 1.1rem !important;
    }

    .val-highlight {
        font-size: 1.15rem !important;
    }

    .agent-name {
        font-size: 1.1rem !important;
    }

    .agent-role {
        font-size: 0.9rem !important;
    }

    .glow-button-gold {
        font-size: 0.85rem !important;
        padding: 0 20px !important;
        height: 48px !important;
    }

    /* Bigger Agent Avatar */
    .agent-avatar-wrapper {
        width: 55px !important;
        height: 55px !important;
    }

    /* Increase panel padding for better breathing room */
    .price-header-panel,
    .detail-group,
    .agent-card {
        padding: 1.25rem 1.5rem !important;
    }

    .space-y-4> :not([hidden])~ :not([hidden]) {
        margin-top: 1.25rem !important;
    }
}

/* =========================================
   ANIMATIONS & TOOLTIPS
   ========================================= */

/* Breathing dot animation */
@keyframes breathing-dot {
    0% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.7);
    }

    50% {
        transform: scale(1.1);
        box-shadow: 0 0 0 6px rgba(46, 204, 113, 0);
    }

    100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(46, 204, 113, 0);
    }
}

.online-indicator {
    animation: breathing-dot 2s infinite ease-in-out;
}

/* Custom Share Tooltip */
.share-tooltip {
    position: fixed;
    background: rgba(46, 204, 113, 0.9);
    color: white;
    padding: 8px 12px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 600;
    pointer-events: none;
    z-index: 1000000;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    animation: fadeUp 0.3s ease forwards;
    transition: opacity 0.5s ease;
}

/* Fullscreen UI Overrides for iOS Safari Bottom Bar Avoidance */
@supports (-webkit-touch-callout: none) {

    /* Safe Area Insets for iOS - Adjusting for the dynamic bottom bar */
    .product-detail-modal .modal-content {
        padding-bottom: env(safe-area-inset-bottom);
    }
}

/* Back to Top Button */
.back-to-top {
    position: fixed;
    bottom: 90px;
    right: 20px;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(15, 18, 24, 0.85);
    backdrop-filter: blur(15px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: white;
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 1000;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
}

.back-to-top.active {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

/* --- Phase 8.10 Landscape Overrides --- */
@media (max-height: 500px) and (orientation: landscape),
(max-width: 896px) and (orientation: landscape) {
    .social-icons {
        flex-direction: row !important;
        justify-content: flex-start !important;
        gap: 15px !important;
    }

    /* Optimization for Mobile Landscape */
    .panel-slide-wrapper.bottom {
        --panel-gap: 0px;
        bottom: var(--panel-gap) !important;
    }

    .panel-slide-wrapper.top {
        --panel-gap: 10px;
        top: var(--panel-gap) !important;
    }

    .side-menu.liquid-glass {
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        height: 100% !important;
        border-radius: 0 !important;
    }
}

/* Phase 8.15 Portrait Search Button Enhancements */
@media (max-width: 768px) and (orientation: portrait) {
    .btn-home-search {
        padding: 14px 24px !important;
        /* Increase click targets on narrow vertical screens */
        font-size: 1.1rem !important;
        border-radius: 50px !important;
        height: 52px !important;
        display: flex !important;
        align-items: center !important;
    }

    .btn-home-search .material-symbols-outlined {
        font-size: 1.5rem !important;
    }

    /* Phase 8.17 Mobile Portrait Footer Font Size */
    .footer-slogan,
    .footer-contact li {
        font-size: 14.4px !important;
    }
}

/* =========================================
   PANEL SLIDE TOGGLE
   ========================================= */

/* --- Wrapper Positioning --- */
.panel-slide-wrapper {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    z-index: 350;
    display: flex;
    flex-direction: column;
    align-items: center;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);

    /* Variables for precise calculations */
    --panel-gap: 30px;
    --toggle-height: 50px;
}

.panel-slide-wrapper>* {
    pointer-events: auto;
}

.panel-slide-wrapper.top {
    top: var(--panel-gap);
}

.panel-slide-wrapper.bottom {
    bottom: var(--panel-gap);
}

/* --- Hidden States (Aggressive hiding to avoid shadow bleed) --- */
/* The formula perfectly pins the toggle button to the screen edge regardless of gap */
.panel-slide-wrapper.top.panel-hidden {
    transform: translateX(-50%) translateY(calc(-100% + var(--toggle-height) - var(--panel-gap)));
}

.panel-slide-wrapper.bottom.panel-hidden {
    transform: translateX(-50%) translateY(calc(100% + var(--panel-gap) - var(--toggle-height)));
}

.panel-slide-wrapper.top.panel-hidden .global-fund-search-container {
    transform: translateY(-30px) !important;
    opacity: 0;
    pointer-events: none;
}

.panel-slide-wrapper.bottom.panel-hidden .bottom-menu {
    transform: translateY(30px) !important;
    opacity: 0;
    pointer-events: none;
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

.panel-slide-wrapper .bottom-menu {
    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
}

/* --- Toggle Button (Transparent & Large Hit Area) --- */
.panel-toggle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 80px;
    /* Large hit area horizontal */
    height: 60px;
    /* Increased hit area vertical */
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    box-shadow: none !important;
    color: rgba(255, 255, 255, 0.9);
    cursor: pointer;
    transition: all 0.3s ease;
    pointer-events: auto;
    z-index: 351;
    outline: none;
}

.panel-toggle-btn.top {
    margin-top: -15px;
}

.panel-toggle-btn.bottom {
    margin-bottom: -15px;
}

.panel-toggle-btn .material-symbols-outlined {
    font-size: 24px !important;
    /* Smaller default icon */
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.panel-toggle-btn:hover {
    background: transparent !important;
    color: var(--primary-color) !important;
}

/* Directional Hover Animations */
/* TOP PANEL: Suggests sliding up to hide / down to show */
.panel-slide-wrapper.top:not(.panel-hidden) .panel-toggle-btn:hover .material-symbols-outlined {
    transform: scale(1.5) translateY(-4px);
    /* Scales up + shifts */
}

.panel-slide-wrapper.top.panel-hidden .panel-toggle-btn:hover .material-symbols-outlined {
    transform: rotate(180deg) scale(1.5) translateY(-4px);
    /* Scales up + shifts DOWN in rotated state */
}

/* BOTTOM PANEL: Suggests sliding down to hide / up to show */
.panel-slide-wrapper.bottom:not(.panel-hidden) .panel-toggle-btn:hover .material-symbols-outlined {
    transform: scale(1.5) translateY(4px);
    /* Scales up + shifts */
}

.panel-slide-wrapper.bottom.panel-hidden .panel-toggle-btn:hover .material-symbols-outlined {
    transform: rotate(180deg) scale(1.5) translateY(-4px);
    /* Scales up + shifts UP in rotated state */
}

/* Base rotation for hidden state icons */
.panel-slide-wrapper.top.panel-hidden .panel-toggle-btn .material-symbols-outlined,
.panel-slide-wrapper.bottom.panel-hidden .panel-toggle-btn .material-symbols-outlined {
    transform: rotate(180deg);
}

/* Override old absolute positioning — wrapper handles it now */
.panel-slide-wrapper .bottom-menu {
    position: relative !important;
    bottom: auto !important;
    left: auto !important;
    transform: none !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important;
}

.panel-slide-wrapper .global-fund-search-container {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    transform: none !important;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.4s ease !important;
}

/* =========================================
   LOAN CALCULATOR MODAL (LIQUID GLASS)
   ========================================= */

.modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
}

.loan-modal-content {
    z-index: 1;
    width: 90vw;
    max-width: 1000px;
    max-height: 90vh;
    padding: 30px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
    border-radius: 20px;
    background: rgba(10, 15, 30, 0.65);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    color: white;
}

/* Close button for loan modal */
.loan-close-btn {
    position: absolute;
    top: 18px;
    right: 20px;
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    z-index: 10;
    line-height: 1;
}

.loan-close-btn:hover {
    background: rgba(255, 80, 80, 0.2);
    border-color: rgba(255, 80, 80, 0.4);
    color: #ff5050;
    transform: scale(1.05);
}

/* Custom number input spinners */
.loan-input-wrapper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.loan-input-wrapper input[type="number"]::-webkit-inner-spin-button,
.loan-input-wrapper input[type="number"]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Custom +/- stepper buttons for number inputs */
.loan-stepper {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-right: 5px;
}

.loan-stepper button {
    width: 24px;
    height: 16px;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.45);
    border-radius: 4px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    line-height: 1;
    padding: 0;
    transition: color 0.15s ease;
}

.loan-stepper button:hover {
    background: transparent;
    border: none;
    color: #0A84FF;
}

.loan-header {
    text-align: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 20px;
    margin-bottom: 25px;
}

.loan-header h2 {
    margin: 0;
    font-size: 1.8rem;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.loan-view {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    /* Custom scrollbar for inner view */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.2) transparent;
}

.loan-view::-webkit-scrollbar {
    width: 6px;
}

.loan-view::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.loan-split-layout {
    display: flex;
    gap: 40px;
    align-items: flex-start;
}

.loan-inputs-col,
.loan-results-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.loan-results-col {
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    padding: 25px;
    border: 1px solid rgba(255, 255, 255, 0.05);
}

.loan-section-title {
    font-size: 1.2rem;
    font-weight: 600;
    margin: 0 0 10px 0;
    color: rgba(255, 255, 255, 0.9);
}

.loan-input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.loan-input-group label {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.8);
}

.loan-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    overflow: hidden;
    transition: border-color 0.3s ease;
}

.loan-input-wrapper:focus-within {
    border-color: var(--primary-color);
}

.loan-input-wrapper input {
    background: transparent;
    border: none;
    color: white;
    font-size: 1.1rem;
    font-weight: 600;
    padding: 12px 15px;
    width: 100%;
    outline: none;
}

.loan-input-wrapper input[readonly] {
    color: rgba(255, 255, 255, 0.6);
}

.loan-currency {
    padding: 0 15px;
    color: rgba(255, 255, 255, 0.5);
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    user-select: none;
}

.loan-slider-container {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 12px 15px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: visible;
}

.loan-slider-container .water-range-input {
    flex: 1;
    -webkit-appearance: none;
    appearance: none;
    height: 6px;
    background: linear-gradient(90deg, #0A84FF 0%, rgba(255, 255, 255, 0.15) 0%);
    border-radius: 3px;
    outline: none;
    cursor: pointer;
}

.loan-slider-container .water-range-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 0;
    height: 0;
    opacity: 0;
}

.loan-percent-badge {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(10, 132, 255, 0.9);
    color: #fff;
    padding: 6px 12px;
    border-radius: 8px;
    font-weight: 700;
    font-size: 0.95rem;
    min-width: 50px;
    text-align: center;
    cursor: grab;
    user-select: none;
    z-index: 5;
    box-shadow: 0 2px 8px rgba(10, 132, 255, 0.4);
    transition: box-shadow 0.2s ease;
    touch-action: none;
    white-space: nowrap;
}

.loan-percent-badge:active,
.loan-percent-badge.dragging {
    cursor: grabbing;
    box-shadow: 0 4px 16px rgba(10, 132, 255, 0.6);
}

.loan-helper-text {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    margin-top: -4px;
}

/* Tick marks below slider */
.loan-tick-marks {
    position: relative;
    width: 100%;
    height: 10px;
    margin-top: -2px;
}

.loan-tick {
    position: absolute;
    top: 0;
    width: 2px;
    height: 8px;
    background: rgba(255, 255, 255, 0.35);
    border-radius: 1px;
    transform: translateX(-50%);
}

.loan-grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

/* Results Cards */
.loan-result-card {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.loan-result-card.total {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
}

.loan-result-label {
    margin: 0 0 5px 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.7);
}

.loan-result-value {
    margin: 0 0 15px 0;
    font-size: 1.6rem;
    font-weight: 700;
    color: white;
}

.loan-result-value small {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.5);
    font-weight: 500;
}

.loan-progress-bar {
    height: 6px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.5s ease;
}

.progress-fill.interest {
    background: linear-gradient(90deg, #FFB347, #FFCC33);
    width: 60%;
}

.progress-fill.principal {
    background: linear-gradient(90deg, #8E2DE2, #4A00E0);
    width: 40%;
}

.progress-fill.total {
    background: linear-gradient(90deg, #11998e, #38ef7d);
    width: 100%;
}

.loan-disclaimer {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.4);
    line-height: 1.5;
    text-align: justify;
    margin-top: auto;
}

/* Footer & Buttons */
.loan-footer {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
}

.loan-btn-primary,
.loan-btn-secondary,
.loan-btn-back {
    padding: 12px 25px;
    font-size: 1rem;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.loan-btn-primary {
    background: rgba(10, 132, 255, 0.8);
    color: white;
    border: 1px solid rgba(10, 132, 255, 0.5);
    flex: 2;
}

.loan-btn-primary:hover {
    background: rgba(10, 132, 255, 1);
    box-shadow: 0 5px 15px rgba(10, 132, 255, 0.4);
    transform: translateY(-2px);
}

.loan-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex: 1;
}

.loan-btn-secondary:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: translateY(-2px);
}

.loan-btn-back {
    background: rgba(255, 255, 255, 0.1);
    color: white;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 8px 16px;
    font-size: 0.9rem;
}

.loan-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 25px;
    padding-bottom: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.loan-detail-header h3 {
    margin: 0;
    font-size: 1.4rem;
}

/* Table container styling mimicking product list */
.loan-table-container {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    max-height: 60vh;
}

.loan-table {
    min-width: 700px;
    width: 100%;
    border-collapse: collapse;
    text-align: right;
}

.loan-table th,
.loan-table td {
    padding: 15px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.loan-table th {
    background: rgb(86, 85, 85) !important;
    color: white !important;
    border-color: rgb(0, 0, 0) !important;
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
}

.loan-table th:first-child,
.loan-table td:first-child {
    text-align: center;
}

.loan-table tbody tr {
    transition: background 0.2s ease;
}

.loan-table tbody tr:hover {
    background: rgba(255, 255, 255, 0.05);
}

.loan-table td {
    font-size: 0.95rem;
    font-variant-numeric: tabular-nums;
}

.loan-table td:nth-child(2) {
    color: #8ab4f8;
    font-weight: 600;
}

/* Payment */
.loan-table td:nth-child(3) {
    color: rgba(255, 255, 255, 0.9);
}

/* Principal */
.loan-table td:nth-child(4) {
    color: #f28b82;
    font-weight: 500;
}

/* Interest */
.loan-table td:nth-child(5) {
    color: #81c995;
}

/* Remaining */

.loan-table tfoot {
    font-weight: 700;
    background: rgba(255, 255, 255, 0.08);
}

.loan-table tfoot td {
    border-top: 2px solid rgba(255, 255, 255, 0.2);
}

/* Mobile Responsiveness for Loan Calculator */
@media (max-width: 900px) {
    .loan-split-layout {
        flex-direction: column;
        gap: 20px;
    }

    .loan-modal-content {
        width: 95vw;
        padding: 20px;
        max-height: 95vh;
    }

    .loan-grid-2 {
        grid-template-columns: 1fr;
        gap: 15px;
    }

    .loan-header h2 {
        font-size: 1.5rem;
    }

    .loan-footer {
        flex-direction: column;
    }

    .loan-btn-primary,
    .loan-btn-secondary {
        width: 100%;
        flex: none;
    }

    .loan-table th,
    .loan-table td {
        padding: 10px 8px;
        font-size: 0.85rem;
    }

    .loan-detail-header {
        gap: 8px;
    }

    .loan-detail-header h3 {
        font-size: 1.1rem;
        text-align: center;
        flex: 1;
    }

    .loan-btn-back {
        padding: 8px 10px;
        font-size: 0;
        min-width: auto;
    }

    .loan-btn-back .material-symbols-outlined {
        font-size: 18px !important;
        margin-right: 0 !important;
    }

    .loan-detail-header>div:last-child {
        display: none;
    }
}

/* =========================================
   UNIFIED TYPOGRAPHY ACROSS ALL MODES & TITLE ROW FIX
   ========================================= */

/* 1. Unify all Labels and Values */
#modal-product-detail .label,
#modal-product-detail .stat-header,
#modal-product-detail .label-small,
#modal-product-detail .loan-result-label {
    font-size: 0.8rem !important;
}

#modal-product-detail .val,
#modal-product-detail .val-highlight {
    font-size: 0.95rem !important;
}

#modal-product-detail .price-large {
    font-size: 2rem !important;
}

/* 2. Make Title & Location container match Share Button height (~40px) */
#modal-product-detail .hero-title-info {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#modal-product-detail .cine-title {
    font-size: 3rem !important;
    line-height: 1.2 !important;
    margin-bottom: 2px !important;
}

#modal-product-detail .cine-location {
    margin-bottom: 0 !important;
    align-items: center;
}

#modal-product-detail .cine-location p {
    font-size: 0.8rem !important;
    line-height: 1.2 !important;
}

#modal-product-detail .cine-location .material-symbols-outlined {
    font-size: 14px !important;
}

#modal-product-detail .cine-stats-row-v2 .label {
    font-size: 11px !important;
}

/* =========================================
   FULLSCREEN LOCATION MODAL & CUSTOM CONTROLS
   ========================================= */

/* Make modal content take up the whole screen */
.location-fullscreen-content {
    width: 100vw !important;
    height: 100vh !important;
    max-width: 100vw !important;
    max-height: 100vh !important;
    margin: 0 !important;
    padding: 0 !important;
    border-radius: 0 !important;
    border: none !important;
    background: #111 !important;
    /* Dark background behind doc */
    overflow: hidden;
    position: relative;
    display: flex;
    flex-direction: column;
}

/* Custom Controls Overlay */
.location-controls {
    position: absolute;
    top: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px;
    border-radius: 20px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
}

.location-controls .btn-close-red {
    background: rgba(231, 76, 60, 0.2) !important;
    border-color: rgba(231, 76, 60, 0.5) !important;
    color: #e74c3c !important;
}

.location-controls .btn-close-red:hover {
    background: rgba(231, 76, 60, 0.4) !important;
    color: white !important;
}

/* Drive Wrapper to hide top bar */
.drive-wrapper {
    flex: 1;
    width: 100%;
    height: 100%;
    overflow: hidden;
    /* Hide anything outside */
    position: relative;
}

.zoomable-content {
    width: 100%;
    height: 100%;
    transform-origin: center center;
    transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.zoomable-content iframe {
    position: absolute;
    top: -56px;
    /* Google Drive's top toolbar is generally ~56px tall */
    left: 0;
    width: 100%;
    height: calc(100% + 56px);
    /* Compensate for the top shift */
    border: none;
    background: white;
    /* For pdf files rendering */
}

/* =========================================
   FUND HOTSPOT TOOLTIP
   ========================================= */
/* =========================================
   FUND HOTSPOT TOOLTIP
   ========================================= */
.fund-tooltip {
    position: absolute;
    z-index: 9999;
    width: 220px;
    background: rgba(0, 0, 0, 0.785);
    /* Same as .cine-glass-panel */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    color: white;
    font-family: var(--font-primary, 'SVN-Gilroy', sans-serif);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.2s ease, visibility 0.2s;
    border: 1px solid rgba(255, 255, 255, 0.167);
    /* Same as product box border */
    overflow: hidden;
}

.fund-tooltip.active {
    opacity: 1;
    visibility: visible;
}

.fund-tooltip-header {
    font-size: 28px;
    /* Adjusted to match product title style */
    font-weight: 650;
    text-align: center;
    padding: 6px 6px 6px 8px;
    letter-spacing: 0.5px;
    color: #d0bd95;
    /* Match standard project gold tone */
    border-bottom: 1px solid rgb(80, 80, 80);
    /* Match .group-header bottom border */
    margin-bottom: 12px;
    text-shadow: none;
}

.fund-tooltip-body {
    padding: 8px 16px 16px 16px;
}

.fund-tooltip .ft-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 8px;
    line-height: 1.4;
    font-size: 13.6px;
    /* Similar to 0.85rem in minimal-stat-card */
}

.fund-tooltip .ft-label {
    font-weight: normal;
    color: rgba(255, 255, 255, 0.5);
    /* Same as .minimal-stat-card .label */
    text-shadow: none;
}

.fund-tooltip .ft-value {
    font-weight: 600;
    /* Match .minimal-stat-card .val */
    text-align: right;
    color: white;
    /* Match .minimal-stat-card .val */
    text-shadow: none;
}

.fund-tooltip .ft-divider {
    border: none;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    margin: 12px;
}

.fund-tooltip .ft-row-price {
    margin-bottom: 10px;
}

.fund-tooltip .ft-row-price:last-child {
    margin-bottom: 0;
}

.fund-tooltip .ft-row-price .ft-value {
    font-size: 14.4px;
    /* Slightly larger, ~0.9rem */
    font-weight: 700;
    text-shadow: none;
}

.fund-tooltip .price-tts {
    color: #2ECC71;
    /* Keep the highlights as requested earlier or standard scheme */
}

.fund-tooltip .price-tttd {
    color: #f39c12;
}

.fund-tooltip .price-loan {
    color: #e74c3c;
}

/* =========================================
   MULTI-CARD HOTSPOT VIEW (V2)
   ========================================= */

.multi-card-lines-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    /* Let clicks pass through to pan/hotspots */
    z-index: 50;
    /* Above pano, below UI */
    overflow: visible;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.multi-card-layout {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 51;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.multi-card-mode-active .multi-card-lines-overlay,
.multi-card-mode-active .multi-card-layout {
    opacity: 1;
}

/* SVG Line Style */
.hs-connection-line {
    fill: none;
    stroke: var(--primary-color);
    stroke-width: 1.5;
    stroke-dasharray: 4 4;
    opacity: 0.6;
    stroke-linecap: round;
    animation: drawLine 0.5s ease forwards;
}

@keyframes drawLine {
    from {
        stroke-dashoffset: 100;
        opacity: 0;
    }

    to {
        stroke-dashoffset: 0;
        opacity: 0.6;
    }
}

/* The Mini Card */
.mini-product-card {
    pointer-events: auto;
    /* Clickable */
    width: 240px;
    background: rgba(15, 18, 24, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    padding: 10px 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0);
    color: white;
    cursor: pointer;
    transition: all 0.2s ease, transform 0.1s ease, width 0.2s ease, padding 0.2s ease;
    position: absolute;
}

/* Anchor Transforms removed for exact JS coordinate matching */
.mini-product-card.top {
    margin-top: 5px;
}

.mini-product-card.bottom {
    margin-bottom: 5px;
}

.mini-product-card.left {
    margin-left: 5px;
}

.mini-product-card.right {
    margin-right: 5px;
}

/* Anchor dots on cards */
.mini-product-card::before {
    content: '';
    position: absolute;
    width: 6px;
    height: 6px;
    background: #e74c3c;
    border-radius: 50%;
}

.mini-product-card.top::before {
    bottom: -3px;
    top: auto;
    left: 50%;
    transform: translateX(-50%);
}

.mini-product-card.bottom::before {
    top: -3px;
    left: 50%;
    transform: translateX(-50%);
}

.mini-product-card.left::before {
    right: -3px;
    left: auto;
    top: 50%;
    transform: translateY(-50%);
}

.mini-product-card.right::before {
    left: -3px;
    top: 50%;
    transform: translateY(-50%);
}

.mini-product-card:hover {
    background: rgba(25, 30, 40, 0.95);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0), 0 0 15px rgba(208, 189, 149, 0.2);
    z-index: 10;
}

/* Card content */
.mini-pc-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
    padding-bottom: 6px;
    margin-bottom: 6px;
}

.mini-pc-title {
    font-size: 1.1rem;
    font-weight: 800;
    color: white;
    margin: 0;
    line-height: 1;
}

.mini-pc-status {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 6px;
    border-radius: 4px;
    text-transform: uppercase;
    background: rgba(46, 204, 113, 0.1);
    color: #2ECC71;
    border: 1px solid rgba(46, 204, 113, 0.2);
}

.mini-pc-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 4px 10px;
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.6);
}

.mini-pc-val {
    color: white;
    font-weight: 600;
    text-align: right;
}

/* --- Split Price Layout --- */
.mini-pc-price-split {
    display: flex;
    gap: 8px;
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
}

.price-tts-block {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    padding: 6px;
    text-align: center;
}

.price-tts-block span {
    font-size: 0.65rem;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 2px;
}

.price-tts-block .p-val {
    font-size: 1.15rem;
    font-weight: 800;
    color: #e6cd98;
    /* Highlight gold */
}

.price-tts-block .p-val span {
    font-size: 0.75rem;
    color: rgba(230, 205, 152, 0.8);
}

.price-right-col {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 4px;
}

.price-right-col .p-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(0, 0, 0, 0.2);
    padding: 4px 6px;
    border-radius: 4px;
}

.price-right-col .p-row span:first-child {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.5);
}

.price-right-col .p-val {
    font-size: 0.85rem;
    font-weight: 700;
    color: white;
}

.price-right-col .p-val span {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.6);
}

.price-right-col .p-val.loan {
    color: var(--primary-color);
}

.price-right-col .p-val.loan span {
    color: rgba(208, 189, 149, 0.7);
}

/* Highlight the line when card is hovered */
.mini-product-card:hover+svg .hs-connection-line {
    opacity: 1;
    stroke-width: 2.5;
    filter: drop-shadow(0 0 4px red);
    /* Color changed to red */
}

/* Color changed to red */
.hs-connection-line {
    stroke: red;
}

/* Adjust card baseline width down 20% */
.mini-product-card {
    width: 190px;
    /* Was 240px (-20% = 192px) */
    padding: 8px 10px;
}


/* Compact Mode (when many cards are visible) */
.mini-product-card.compact {
    padding: 6px;
    height: auto;
    width: 120px;
    /* Reduced width for very compact vertical block */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    gap: 4px;
}

.mini-product-card.compact .mini-pc-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    border-bottom: none;
    margin: 0;
    padding: 0;
    gap: 2px;
}

.mini-product-card.compact .mini-pc-title {
    font-size: 0.95rem;
    line-height: 1;
    margin: 0;
}

.mini-product-card.compact .mini-pc-status {
    position: static;
    margin: 0;
    font-size: 0.65rem;
    padding: 2px 4px;
    border-radius: 4px;
    background: rgba(46, 204, 113, 0.15);
    border: 1px solid rgba(46, 204, 113, 0.3);
    color: #2ECC71;
}

.mini-product-card.compact .mini-pc-price-split {
    display: block;
    margin: 0;
    padding: 0;
    border: none;
    width: 100%;
}

.mini-product-card.compact .price-tts-block {
    background: transparent;
    padding: 0;
    display: block;
}

/* Allow custom spans format to show */
.mini-product-card.compact .price-tts-block span {
    display: inline;
}

.mini-product-card.compact .price-tts-block .p-val {
    font-size: 1rem;
    color: #e6cd98;
    line-height: 1.2;
    text-align: center;
}

/* Hide other details */
.mini-product-card.compact .mini-pc-grid,
.mini-product-card.compact .price-right-col {
    display: none;
}

/* --- NEW: Vertical Price Stack Layout --- */
.mini-product-card.compact .mini-pc-price-stack {
    display: flex;
    /* visible by default even in compact mode */
    flex-direction: column;
    gap: 2px;
    border-top: 1px dashed rgba(255, 255, 255, 0.2);
    margin-top: 4px;
    padding-top: 4px;
}

.mini-product-card.compact .p-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 6px;
}

.mini-product-card.compact .p-label {
    font-size: 0.62rem;
    color: rgba(255, 255, 255, 0.5);
    text-align: left;
    white-space: nowrap;
    flex-shrink: 0;
}

.mini-product-card.compact .p-val {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
    flex: 1;
}

.mini-product-card.compact .p-val.loan {
    color: #3ec6f5;
}

/* TTS row - highlighted and bigger */
.mini-product-card.compact .p-row-tts .p-label {
    color: rgba(230, 205, 152, 0.8);
    font-weight: 600;
}

.mini-product-card.compact .p-val-tts {
    font-size: 0.92rem;
    color: #e6cd98;
    font-weight: 700;
    text-align: center;
    /* Center when label is hidden */
    flex: 1;
}

/* Default compact: hide TDC/VAY rows, only show TTS */
.mini-product-card.compact .p-row:not(.p-row-tts) {
    display: none;
}

/* Hide labels in compact mode by default */
.mini-product-card.compact .p-label {
    display: none !important;
}

.mini-product-card.compact:hover .compact-area-row {
    display: none;
}

/* Restore on hover */
@media (hover: hover) {
    .mini-product-card.compact:hover {
        width: 200px;
        /* Expand back to full width on hover */
        padding: 8px 10px;
        align-items: stretch;
        text-align: left;
        display: block;
        z-index: 100;
    }

    .mini-product-card.compact:hover .mini-pc-header {
        flex-direction: row;
        justify-content: space-between;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        padding-bottom: 6px;
        margin-bottom: 6px;
    }

    /* Old layout - keep for backward compat */
    .mini-product-card.compact:hover .mini-pc-price-split {
        display: flex;
        margin-top: 8px;
        border-top: 1px dashed rgba(255, 255, 255, 0.2);
        padding-top: 8px;
        width: auto;
    }

    .mini-product-card.compact:hover .price-tts-block {
        background: rgba(255, 255, 255, 0.05);
        padding: 6px;
        display: flex;
        text-align: center;
    }

    .mini-product-card.compact:hover .price-tts-block span {
        display: block;
    }

    .mini-product-card.compact:hover .price-tts-block .p-val {
        font-size: 1.15rem;
    }

    .mini-product-card.compact:hover .mini-pc-grid {
        display: grid;
    }

    .mini-product-card.compact:hover .price-right-col {
        display: flex;
    }

    /* NEW: Show vertical price stack on hover */
    .mini-product-card.compact:hover .mini-pc-price-stack {
        display: flex;
    }

    /* On hover: show all price rows */
    .mini-product-card.compact:hover .p-row {
        display: flex;
    }

    /* Restore labels on hover */
    .mini-product-card.compact:hover .p-label {
        display: block !important;
    }

    .mini-product-card.compact:hover .p-val-tts {
        text-align: right;
        /* Restore right align when label appears */
        font-size: 1.05rem;
    }
}

/* VR Controls Hide/Show Toggle */
.vr-controls-vertical.hidden-controls {
    right: -60px !important;
    /* Panel width is roughly 50-60px, so this hides it just off screen */
    opacity: 0.7 !important;
    pointer-events: none;
    /* Disable clicks on the hidden buttons */
}

.vr-controls-vertical.hidden-controls #btn-toggle-vr-controls {
    pointer-events: auto;
    /* Keep the toggle button clickable */
}

.vr-controls-vertical.hidden-controls:hover {
    opacity: 1 !important;
    right: -50px !important;
}

@media (max-width: 1024px) {
    .mini-product-card {
        width: 160px;
        /* even smaller */
        padding: 6px 8px;
    }

    .mc-edge-col {
        width: 180px;
        gap: 8px;
    }

    .price-tts-block .p-val {
        font-size: 1rem;
    }

    .price-right-col .p-row {
        padding: 2px 4px;
    }

    .price-right-col .p-val {
        font-size: 0.75rem;
    }
}

@media (max-width: 932px) {
    .multi-card-layout {
        top: 0;
        height: 100%;
    }

    .mc-edge-col {
        width: 100px;
        padding: 5px;
        gap: 6px;
    }

    .mini-product-card {
        width: 130px;
        padding: 4px 6px;
    }


    .mini-pc-title {
        font-size: 0.8rem;
    }

    .mini-pc-status {
        font-size: 0.55rem;
        padding: 1px 4px;
    }

    .mini-pc-grid {
        grid-template-columns: 1fr;
        gap: 1px;
    }

    /* Hide labels on very small mobile to save space */
    .mini-pc-grid span:nth-child(odd) {
        display: none;
    }

    .mini-pc-val {
        text-align: left;
        font-size: 0.65rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.05);
        padding-bottom: 2px;
    }

    /* Stack split pricing on ultra-narrow portrait */
    .mini-pc-price-split {
        flex-direction: column;
        gap: 4px;
        margin-top: 4px;
        padding-top: 4px;
    }

    .price-tts-block {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        padding: 4px 6px;
    }

    .price-tts-block span {
        margin: 0;
        font-size: 0.6rem;
    }
}

/* V2: Responsive Compact Mobile (< 35% desktop size) */
body.vrmobile-mc .mini-product-card.compact {
    width: 90px !important;
    min-height: 54px !important;
    padding: 4px !important;
    gap: 2px !important;
}

body.vrmobile-mc .mini-product-card.compact .mini-pc-header {
    gap: 0 !important;
    justify-content: center !important;
}

body.vrmobile-mc .mini-product-card.compact .mini-pc-title {
    font-size: 0.7rem !important;
    line-height: 1 !important;
    margin: 0 auto !important;
}

body.vrmobile-mc .mini-product-card.compact .mini-pc-status {
    display: none !important;
}

body.vrmobile-mc .mini-product-card.compact .compact-area-row {
    display: block !important;
    font-size: 0.6rem !important;
    color: #ccc !important;
    text-align: center !important;
    margin-bottom: 2px !important;
}

body.vrmobile-mc .mini-product-card.compact .mini-pc-price-split {
    display: none !important;
}

body.vrmobile-mc .mini-product-card.compact .mini-pc-price-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    border-top: 1px dashed rgba(255, 255, 255, 0.2) !important;
    margin-top: 3px !important;
    padding-top: 3px !important;
}

body.vrmobile-mc .mini-product-card.compact .p-row {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
}

/* On mobile: only show TTS row, hide TDC + VAY rows */
body.vrmobile-mc .mini-product-card.compact .p-row {
    display: none !important;
}

body.vrmobile-mc .mini-product-card.compact .p-row-tts {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

body.vrmobile-mc .mini-product-card.compact .p-label {
    display: none !important;
    /* hide label, only show value */
}

body.vrmobile-mc .mini-product-card.compact .p-val-tts {
    font-size: 0.78rem !important;
    color: #e6cd98 !important;
    font-weight: 700 !important;
    text-align: center !important;
    width: 100% !important;
}

body.vrmobile-mc .mini-product-card.compact .p-val {
    font-size: 0.62rem !important;
    text-align: right !important;
    width: 100% !important;
}

body.vrmobile-mc .mini-product-card.compact .price-right-col {
    display: none !important;
}

body.vrmobile-mc .mini-product-card.compact .price-tts-block span {
    display: none !important;
    /* Hide label */
}

body.vrmobile-mc .mini-product-card.compact .p-val {
    font-size: 0.75rem !important;
    text-align: center !important;
}

body.vrmobile-mc .mini-product-card.compact .mini-pc-grid {
    display: none !important;
}

.home-search-container {
    z-index: 1200;
}

/* Mobile portrait hit-area fix:
   keep search panel non-interactive when collapsed so it cannot steal taps from auth controls. */
@media (max-width: 768px) and (orientation: portrait) {
    #home-search-expanded {
        width: 0 !important;
        max-width: 0 !important;
        padding: 0 !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    #home-search-expanded.active {
        width: 100vw !important;
        max-width: 100vw !important;
        padding: 15px 20px !important;
        opacity: 1 !important;
        pointer-events: auto !important;
    }
}

/* RBAC Tab Lock Icon */
.bottom-menu .menu-item {
    position: relative;
}

.tab-lock-icon {
    position: absolute;
    top: 4px;
    right: 4px;
    font-size: 12px !important;
    color: rgba(255, 255, 255, 0.5);
    pointer-events: none;
    z-index: 10;
}