/* ============================================
   AMC2 - Global Styles
   ============================================ */

/* Skip Link - hidden until focused */
.skip-link {
    position: absolute;
    top: -9999px;
    left: -9999px;
    z-index: 99999;
    padding: 0.5rem 1rem;
    background: white;
    color: black;
    text-decoration: none;
    border-radius: 4px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}

.skip-link:focus {
    top: 1rem;
    left: 1rem;
}

html {
    width: 100%;
    height: 100%;
}

body {
    font-family: 'Plus Jakarta Sans', sans-serif;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

/* ============================================
   Intro State Management
   ============================================ */

.intro-skipped #intro-overlay {
    display: none !important;
}

.intro-skipped #area-select-view {
    display: block !important;
}

/* Keep wrapper click-through so only scene/UI layers receive events */
#area-select-view {
    pointer-events: none;
}

/* Splat surface must always receive touch/mouse interactions */
#splat-container {
    pointer-events: auto !important;
    touch-action: none !important;
}

/* Ensure renderer canvas always accepts drag/look gestures */
#splat-container canvas,
#splat-container [class*="3d-object-canvas"] {
    pointer-events: auto !important;
    touch-action: none !important;
}

#area-select-view header,
#area-select-view .bottom-controls,
#area-select-view [data-name="bottom"],
#area-select-view [data-name="sound_button"] {
    pointer-events: auto;
}

/* ============================================
   Button Effects
   ============================================ */

/* Focus styles: outline only on keyboard (Tab), not on click */
button,
[role="button"] {
    cursor: pointer;
}

button:disabled,
[role="button"][aria-disabled="true"] {
    cursor: not-allowed;
}

button:focus:not(:focus-visible),
.icon-button:focus:not(:focus-visible),
.language-btn:focus:not(:focus-visible) {
    outline: none;
}
button:focus-visible,
.icon-button:focus-visible,
.language-btn:focus-visible {
    outline: 2px solid #3b82f6;
    outline-offset: 2px;
}

/* Dropdown header: outline only on keyboard focus (Tab), not on click */
.dropdown-header:focus:not(:focus-visible) {
    outline: none !important;
    background-color: transparent !important;
}
.dropdown-header:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: -4px !important;
    border-radius: 15px !important;
    background-color: rgba(59, 130, 246, 0.1) !important;
}

/* Dropdown items: outline only on keyboard focus (Tab), not on click */
.dropdown-item:focus:not(:focus-visible) {
    outline: none !important;
    background-color: transparent !important;
}
.dropdown-item:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: -2px !important;
    background-color: rgba(59, 130, 246, 0.15) !important;
}

.button-hover {
    transition: all 0.3s ease;
}

.button-hover:hover:not(.dropdown-header) {
    background-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.05);
}

.button-hover:active:not(.dropdown-header) {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

.icon-button {
    transition: all 0.2s ease;
}

.icon-button:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.05);
}

.icon-button:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

/* ============================================
   Language Buttons (index.html)
   ============================================ */

.language-btn {
    transition: all 0.3s ease;
}

.language-btn:hover {
    transform: scale(1.05);
}

.language-btn:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

.language-btn.active {
    filter: brightness(1);
}

.language-btn:not(.active) {
    opacity: 0.7;
}

/* ============================================
   Dropdown Styling (area_select.html)
   ============================================ */

.dropdown-arrow {
    transform: rotate(90deg);
    transition: transform 0.3s ease;
}

.dropdown {
    outline: none !important;
}

.dropdown:focus,
.dropdown:focus-visible {
    outline: none !important;
}

.dropdown.open {
    background-color: rgba(255, 255, 255, 0.8) !important;
}

.dropdown.open .dropdown-list-content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

.dropdown.open .dropdown-arrow {
    transform: rotate(270deg);
}

/* Dropdown list animation */
.dropdown-list-content {
    max-height: 0;
    opacity: 0;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    transition: max-height 0.4s ease, opacity 0.3s ease, padding 0.3s ease;
    overflow: hidden;
}

.dropdown-list-content.show {
    max-height: 400px !important;
    height: auto !important;
    opacity: 1 !important;
    padding-top: 5px !important;
    padding-bottom: 15px !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

/* Extra specificity for server environments */
#dropdown-list.dropdown-list-content.show {
    overflow-y: auto !important;
    max-height: 400px !important;
}

/* Ensure scrollbar is visible */
.dropdown-list-content.show::-webkit-scrollbar {
    width: 8px;
    display: block;
}

.dropdown-list-content.show::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.1);
    border-radius: 4px;
    margin: 5px 0;
}

.dropdown-list-content.show::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 4px;
}

.dropdown-list-content.show::-webkit-scrollbar-thumb:hover {
    background: rgba(0, 0, 0, 0.5);
}

/* Firefox scrollbar */
.dropdown-list-content.show {
    scrollbar-width: thin;
    scrollbar-color: rgba(0, 0, 0, 0.3) rgba(0, 0, 0, 0.1);
}

.dropdown-list-content.hidden {
    display: block !important;
}

/* Dropdown item effects */
.dropdown-item {
    transition: all 0.2s ease;
}

.dropdown-item:hover {
    transform: scale(1.05);
}

.dropdown-item:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

/* ============================================
   Sound Button States
   ============================================ */

.sound-btn.muted .speaker-icon {
    opacity: 0.4;
}

/* Sound controls popover (volume + ambient play/pause) above the trigger */
.sound-controls-stack {
    position: relative;
    z-index: 41;
}
.sound-controls-panel {
    pointer-events: auto;
}
.sound-controls-volume-wrap {
    width: 44px;
    margin-top: 20px;
    margin-bottom: 5px;
}
.sound-volume-vertical {
    width: 120px;
    height: 28px;
    margin: 0;
    padding: 0;
    cursor: pointer;
    accent-color: #111;
    transform: rotate(-90deg);
    transform-origin: center center;
}
.sound-ambient-play-btn {
    flex-shrink: 0;
}

.intro-bottom-controls {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 77px;
    padding: 10px;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    z-index: 20;
}

/* CTA (Pradėti) – anchored from bottom (visible when zooming); higher on desktop */
#intro-overlay .cta-button-container {
    position: absolute;
    left: 50%;
    bottom: 160px;
    transform: translateX(-50%);
    display: flex;
    justify-content: center;
    z-index: 25;
}

/* ============================================
   Animations
   ============================================ */

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.headline-tooltip {
    animation: fadeIn 0.5s ease-in-out;
}

/* ============================================
   Popup Modal Styles
   ============================================ */

.popup-modal {
    transition: opacity 0.3s ease;
}

.popup-modal.hidden {
    display: none;
    opacity: 0;
}

.popup-modal.show {
    display: flex;
    flex-direction: column;
    opacity: 1;
    padding: 0;
    margin: 0;
}

/* Simple full-page popup: row 1 = viewer, row 2 = description; one scroll for whole page, no backdrop */
.popup-content--fullpage {
    align-items: stretch !important;
    justify-content: stretch !important;
    flex: 1 !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
}
.popup-page {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
    flex: 1 !important;
}
.popup-viewer-row {
    flex: 1 1 auto !important;
    min-height: 85vh !important;
}
.popup-description-row {
    flex: 0 0 auto !important;
    overflow: visible !important; /* no inner scroll — whole popup scrolls */
}
.popup-description-content {
    overflow: visible !important;
}

.popup-content {
    animation: popupSlideIn 0.4s ease-out;
}

/* Scroll FAB: visible only when popup is open and content has overflow; hidden for intro (video) popup */
#popup-scroll-fab-container {
    display: none;
}
.popup-modal.show[data-scrollable="true"] #popup-scroll-fab-container {
    display: block !important;
}
.popup-modal.show[data-intro="true"] #popup-scroll-fab-container {
    display: none !important;
}

@keyframes popupSlideIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* Close button hover effect */
.popup-close-btn {
    background-color: transparent !important;
    transition: transform 0.2s ease;
}

.popup-close-btn:hover,
.popup-close-btn.icon-button:hover {
    background-color: transparent !important;
    transform: scale(1.1);
}

.popup-close-btn:active,
.popup-close-btn.icon-button:active {
    transform: scale(0.95);
}

/* Navigation arrow - full opacity (black), no grey */
.popup-nav-left,
.popup-nav-right {
    transition: transform 0.2s ease;
    opacity: 1;
    z-index: 999;
}

.popup-nav-container {
    transition: all 0.2s ease;
}

.popup-nav-container:hover .popup-nav-left,
.popup-nav-container:hover .popup-nav-right {
    transform: scale(1.1);
}

.popup-nav-container:active .popup-nav-left,
.popup-nav-container:active .popup-nav-right {
    transform: scale(0.95);
}

/* Popup accessibility focus styles: outline only on keyboard (Tab), not on click */
.popup-close-btn:focus:not(:focus-visible),
.popup-nav-container:focus:not(:focus-visible),
.popup-interaktyviai-btn:focus:not(:focus-visible),
#popup-audio-player-container button:focus:not(:focus-visible),
#video-toggle-btn:focus:not(:focus-visible),
#video-player:focus:not(:focus-visible),
#popup-3d-viewer:focus:not(:focus-visible) {
    outline: none !important;
}
.popup-close-btn:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-radius: 8px !important;
}

.popup-nav-container:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 4px !important;
    border-radius: 8px !important;
}

.popup-interaktyviai-btn:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

#popup-audio-player-container button:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-radius: 50% !important;
}

#video-toggle-btn:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-radius: 8px !important;
}

#video-player:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

#popup-3d-viewer:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* Video Toggle Button Styles */
.video-toggle-btn {
    transition: transform 0.2s ease;
}

.video-toggle-btn.active .toggle-indicator {
    transform: translateX(39px);
}

.video-toggle-btn:hover {
    transform: scale(1.1);
}

.video-toggle-btn:active {
    transform: scale(0.95);
}

/* Audio player progress bar styling */
.audio-progress-container {
    touch-action: none;
    user-select: none;
    height: 20px;
}

.audio-seek-handle {
    z-index: 10;
    transition: transform 0.1s ease;
    width: 15px;
    height: 15px;
}

.audio-seek-handle:hover {
    transform: translateX(-50%) scale(1.1);
}

.audio-seek-handle:active {
    transform: translateX(-50%) scale(0.95);
}

/* Hide the native range input but keep it accessible */
#audio-seek.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Play button hover effect */
#popup-play-btn {
    transition: transform 0.2s ease;
}

#popup-play-btn:hover {
    transform: scale(1.15);
}

#popup-play-btn:active {
    transform: scale(0.95);
}

/* Time display font */
#popup-time {
    font-family: 'Ysabeau Infant', sans-serif;
}

/* Video player container */
#video-player-container {
    transition: opacity 0.3s ease;
}

#video-player-container:not(.hidden) {
    animation: fadeIn 0.3s ease-in-out;
}

#video-player {
    background-color: #000;
}

/* Popup content overflow fix */
.popup-content [data-name="Popup_desktop"] {
    overflow-x: hidden;
}

/* Desktop: Video block positioned absolutely below toggle */
.desktop-video-position {
    left: 879px;
    top: 55px;
    width: 276px;
}

/* ============================================
   Responsive Adjustments
   ============================================ */

/* Desktop styles (769px and up) */
@media (min-width: 769px) {
    /* Scroll FAB in popup: ensure on top and clickable on desktop (avoids overlay/stacking issues) */
    .popup-modal .popup-scroll-fab-container {
        z-index: 9999 !important;
        pointer-events: auto !important;
    }
    .popup-modal .popup-scroll-fab {
        pointer-events: auto !important;
    }
    /* Show global sound button on desktop only when on intro (not on area-select) */
    body:not(.intro-skipped) .global-sound-button {
        display: flex !important;
    }
    /* Hide global sound on area-select so only one sound button (header) is visible */
    body.intro-skipped .global-sound-button {
        display: none !important;
    }
    /* Area sound controls (bottom-left, same position as Pradėti): visible and focusable, 3rd in tab order */
    #area-select-view #area-sound-btn,
    #area-select-view header .sound-btn {
        display: flex !important;
    }
    /* Desktop: whole stack (popover + trigger) fixed bottom-left */
    #area-select-view .header-buttons .sound-controls-stack {
        position: fixed !important;
        bottom: 10px !important;
        left: 10px !important;
        z-index: 40;
    }
    #area-select-view #area-sound-btn {
        position: relative !important;
        bottom: auto !important;
        left: auto !important;
    }
    /* Pradėti higher on desktop (per Figma) */
    #intro-overlay .cta-button-container {
        bottom: 200px;
    }
}

/* Mid-range (1025px - 1200px) and Desktop (> 1200px) */
@media (min-width: 1025px) {
    .dropdown-container {
        width: 343px !important;
        position: absolute !important;
        right: 10px !important;
    }

    .headline-tooltip {
        max-width: 400px;
        font-size: 18px;
    }

    /* Popup responsive styles (same full-page layout on desktop) */
    .popup-viewer-row,
    .popup-content [data-name="top"] {
        min-height: 85vh !important;
    }
    .popup-description-row,
    .popup-content [data-name="bottom"] {
        padding: 20px !important;
    }

    .popup-content [data-name="info container"] {
        max-width: 1170px !important;
        margin-left: auto;
        margin-right: auto;
    }

    .popup-content [data-name="text_container"],
    .popup-content [data-name="audio player"],
    .popup-content [data-name="photo, text, video"] {
        max-width: 1168px !important;
    }
}

/* Tablet/Mobile (up to 1024px) */
@media (max-width: 1024px) {
    .dropdown-container {
        position: absolute !important;
        right: 10px !important;
    }

    .nav-buttons {
        gap: 15px !important;
    }

    .nav-buttons button {
        font-size: 16px;
    }

    .icon-button {
        width: 50px !important;
        height: 50px !important;
    }

    .headline-tooltip {
        max-width: 280px;
        font-size: 16px;
        padding: 20px;
        right: 0 !important;
        left: auto !important;
        justify-content: flex-end;
    }

    .popup-modal.hidden {
        display: none !important;
    }
    .popup-viewer-row,
    .popup-modal .popup-content [data-name="top"] {
        overflow: hidden !important;
    }
    .popup-modal [data-name="preview"] {
        padding-bottom: 24px !important;
        box-sizing: border-box !important;
    }
    /* Popup responsive styles */
    .popup-content [data-name="Popup_desktop"] {
        flex-direction: column;
    }

    .popup-content [data-name="top"] {
        min-height: 400px !important;
        flex-basis: 60% !important;
    }

    .popup-description-row,
    .popup-content [data-name="bottom"] {
        padding: 10px 15px !important;
        overflow: visible !important;
    }

    .popup-content [data-name="info container"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    .popup-content [data-name="text_container"],
    .popup-content [data-name="audio player"],
    .popup-content [data-name="photo, text, video"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    .popup-content [data-name="photo, text, video"] {
        flex-direction: column !important;
        gap: 20px !important;
        position: relative !important;
    }

    .popup-content [data-name="text_container"] [data-name="test_container"],
    .popup-content [data-name="photo img"] {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
    }

    .popup-content [data-name="toggle button container"] {
        width: 100% !important;
    }

    .popup-content [data-name="3d_obj"] {
        width: 100% !important;
        height: 100% !important;
    }
    
    .popup-content [data-name="3d_obj"] model-viewer,
    .popup-content [data-name="3d_obj"] #popup-3d-viewer {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
        position: relative !important;
    }
    
    .popup-content [data-name="3d_obj"] #popup-3d-image {
        width: 100% !important;
        height: 100% !important;
        object-fit: cover !important;
    }

    .popup-content [data-name="preview"] {
        top: 80px !important;
    }

   
    /* Mobile: Full width video, not absolutely positioned */
    .desktop-video-position {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-top: 20px;
    }

    /* Mobile: Reorder elements - video toggle before text */
    .popup-content [data-name="photo, text, video"] [data-name="photo img"] {
        order: 1;
    }

    .popup-content [data-name="photo, text, video"] [data-name="toggle button container"] {
        order: 2;
        width: 100% !important;
    }

    .popup-content [data-name="photo, text, video"] [data-name="text_container"] {
        order: 3;
    }

    .popup-content [data-name="photo, text, video"] .desktop-video-position {
        order: 4;
    }
}

/* Mobile (up to 768px) */
@media (max-width: 768px) {
    /* Bottom controls safe area for mobile */
    .bottom-controls {
        bottom: 10px !important;
        padding: 10px !important;
        padding-bottom: 10px !important;
        height: 63px !important;
        pointer-events: none !important;
        z-index: 9999 !important;
    }
    
    .nav-controls {
        pointer-events: auto !important;
    }

    header {
        padding: 10px !important;
    }

    header .logo-container {
        width: 121px !important;
        height: 121px !important;
    }

    .language-btn {
        width: 43px !important;
        height: 43px !important;
        border-radius: 10px !important;
    }

    .language-btn span {
        font-size: 16px !important;
    }

    .language-buttons {
        gap: 11px !important;
    }

    /* Mobile: full width, no corners (per Figma) */
    .headline-tooltip {
        top: 227.67px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: 187px !important;
        padding: 34px 40px !important;
        border-radius: 0 !important;
        margin: 0 !important;
        justify-content: flex-end !important;
    }

    .headline-tooltip #headline-text {
        width: 305px !important;
    }

    .headline-tooltip #headline-text>div {
        font-size: 21px !important;
        line-height: 40px !important;
        text-align: right !important;
    }

    .headline-tooltip #headline-text>div:nth-child(2) {
        padding-right: 20px !important;
    }

    .headline-tooltip #headline-text>div:nth-child(3) {
        padding-right: 40px !important;
    }

    .cta-button-container {
        width: 100% !important;
        max-width: 100% !important;
        height: 62px !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 160px !important;
        transform: none !important;
        padding: 0 !important;
        display: flex !important;
        justify-content: center !important;
    }

    .start-button {
        margin: 0 !important;
    }

    button.start-button {
        width: 169px !important;
        height: 62px !important;
        padding: 0 !important;
        border-radius: 16px !important;
    }

    button.start-button span {
        font-size: 18.2px !important;
        line-height: 0 !important;
    }

    .icon-button,
    .sound-btn {
        width: 43px !important;
        height: 43px !important;
        border-radius: 10px !important;
    }

    .icon-button span {
        font-size: 20px !important;
    }

    .speaker-icon {
        width: 20px !important;
        height: 15px !important;
    }

    .speaker-icon img {
        width: 20px !important;
        height: 15px !important;
    }

    /* Area Select View Mobile Styles */
    #area-select-view header {
        padding: 10px !important;
    }

    #area-select-view header .header-buttons {
        width: 43px !important;
        gap: 11px !important;
        overflow: visible !important;
    }

    #area-select-view header .icon-button,
    #area-select-view header .sound-btn {
        width: 43px !important;
        height: 43px !important;
    }

    #area-select-view .dropdown {
        border-radius: 10px !important;
    }

    #area-select-view .dropdown-container {
        width: 341px !important;
        max-width: calc(100% - 73px) !important;
        position: absolute !important;
        left: 53px !important;
        top: 10px !important;
        right: auto !important;
    }

    #area-select-view .dropdown-header {
        padding: 10px 11px !important;
    }

    #area-select-view .dropdown-title {
        font-size: 16px !important;
        letter-spacing: 0.8px !important;
    }

    #area-select-view .dropdown-arrow {
        width: 7px !important;
        height: 12px !important;
    }

    #area-select-view .dropdown-item {
        font-size: 14px !important;
        line-height: 24px !important;
        padding: 6px 8px !important;
    }

    #area-select-view .bottom-controls {
        height: auto !important;
        padding: 10px 15px !important;
        padding-bottom: 10px !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        bottom: 10px !important;
        pointer-events: none !important;
        z-index: 9999 !important;
    }

    /* Navigation Buttons */
    .nav-buttons {
        gap: 7px !important;
        margin-left: 0 !important;
    }

    .previous-btn {
        width: 100px !important;
        height: 43px !important;
        padding: 12px 11.2px !important;
        border-radius: 12px !important;
    }

    .previous-btn span {
        font-size: 14.4px !important;
    }

    .previous-btn img {
        width: 7.2px !important;
        height: 12.8px !important;
    }

    .enter-btn {
        width: 68px !important;
        height: 43px !important;
        border-radius: 12px !important;
    }

    .enter-btn span {
        font-size: 14.4px !important;
    }

    .next-btn {
        width: 100px !important;
        height: 43px !important;
        padding: 12px 11.2px !important;
        border-radius: 12px !important;
    }

    .next-btn span {
        font-size: 14.4px !important;
    }

    .next-btn img {
        width: 7.2px !important;
        height: 12.8px !important;
    }

    /* Sound button in area-select - bottom-left (same as Pradėti), visible on mobile */
    #area-select-view #area-sound-btn,
    #area-select-view header .sound-btn,
    #area-select-view header .sound-ambient-play-btn {
        display: flex !important;
        width: 43px !important;
        height: 43px !important;
        border-radius: 10px !important;
    }

    #area-select-view header .speaker-icon img {
        width: 20px !important;
        height: 15px !important;
    }

    /* Hide global sound button on mobile when intro is visible - intro has its own sound button */
    body:not(.intro-skipped) .global-sound-button {
        display: none !important;
    }

    /* Hide global sound button on mobile when area-select-view is visible - sound button is now in header */
    body.intro-skipped .global-sound-button {
        display: none !important;
    }
}

/* Short viewport (e.g. mobile landscape) – tooltip on the side (right) like desktop, vertically centered */
@media (max-height: 500px) {
    .headline-tooltip {
        top: 50% !important;
        left: auto !important;
        right: 0 !important;
        transform: translateY(-50%) !important;
        width: 320px !important;
        max-width: calc(100vw - 40px) !important;
        height: auto !important;
        min-height: 100px !important;
        padding: 20px 24px !important;
        border-radius: 13px 0 0 13px !important;
        box-sizing: border-box !important;
    }
    .headline-tooltip #headline-text {
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
    .headline-tooltip #headline-text > div {
        font-size: 15px !important;
        line-height: 1.4 !important;
    }
}

/* Small Mobile (up to 480px) */
@media (max-width: 480px) {
    /* Bottom controls safe area for small mobile */
    .bottom-controls {
        bottom: 10px !important;
        padding-bottom: 10px !important;
        pointer-events: none !important;
        z-index: 9999 !important;
    }
    
    .nav-controls {
        pointer-events: auto !important;
    }

    header {
        padding: 8px !important;
    }

    header .logo-container {
        width: 100px !important;
        height: 100px !important;
    }

    .language-btn {
        width: 40px !important;
        height: 40px !important;
    }

    .language-btn span {
        font-size: 16px !important;
    }

    .headline-tooltip {
        top: 200px !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 160px !important;
        padding: 28px 32px !important;
        border-radius: 0 !important;
    }

    .headline-tooltip p {
        font-size: 18px !important;
        line-height: 32px !important;
        width: 100% !important;
        max-width: 305px !important;
    }

    .cta-button-container {
        top: auto !important;
        bottom: 160px !important;
    }

    button.start-button {
        width: 169px !important;
        height: 62px !important;
        padding: 0 !important;
    }

    button.start-button span {
        font-size: 16px !important;
    }

    .icon-button,
    .sound-btn {
        width: 40px !important;
        height: 40px !important;
    }
}

/* ============================================
   Room Scene Styles
   ============================================ */

/* Model Viewer Styles */
model-viewer {
    width: 100%;
    height: 100%;
    background-color: transparent;
    position: relative;
    z-index: 2;
    touch-action: none;
    /* Hide built-in progress bar - we use our own spinner overlay */
    --progress-bar-color: transparent;
    --progress-bar-height: 0px;
}

model-viewer::part(default-ar-button) {
    display: none;
}

model-viewer::part(default-progress-bar) {
    display: none !important;
}

#popup-3d-viewer {
    position: relative;
    z-index: 2;
    width: calc(100% - 160px);
    height: 100%;
    left: 50%;
    transform: translateX(-50%);
    touch-action: none;
}

/* Prevent page scroll when interacting with 3D viewer */
#popup-3d-viewer:hover,
#popup-3d-viewer:active {
    touch-action: none;
}

/* Popup 3D object container - fills preview area, no magic numbers */
.popup-3d-object,
[data-name="3d_obj"] {
    width: 100%;
    height: 100%;
    touch-action: none;
}

#popup-3d-image {
    z-index: 1;
    position: absolute;
}

#popup-3d-viewer:not([src=""]) ~ #popup-3d-image {
    display: none !important;
}

/* Tablet: -160px (same as desktop) */
@media (max-width: 1024px) and (min-width: 769px) {
    #popup-3d-viewer {
        width: calc(100% - 160px) !important;
        height: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    model-viewer {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Mobile: -90px */
@media (max-width: 768px) {
    #popup-3d-viewer {
        width: calc(100% - 90px) !important;
        height: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    model-viewer {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Desktop: -160px */
@media (min-width: 1025px) {
    #popup-3d-viewer {
        width: calc(100% - 160px) !important;
        height: 100% !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
    }
    
    model-viewer {
        width: 100% !important;
        height: 100% !important;
    }
}

/* Video Player Styles */
#popup-video-player {
    z-index: 3;
}

#popup-video-element {
    background-color: #000;
}

#video-progress-handle {
    transition: left 0.1s ease;
    cursor: grab;
}

#video-progress-handle:active {
    cursor: grabbing;
}

#video-volume-bar {
    transition: opacity 0.2s ease;
    cursor: pointer;
}

#popup-video-player:hover #video-volume-bar {
    display: block !important;
}

#video-subtitle-btn {
    display: none;
}

#popup-video-player:hover #video-subtitle-btn {
    display: block;
}

/* Video controls styling – play/pause and volume icons white */
#popup-video-player #video-play-icon,
#popup-video-player #video-volume-icon {
    filter: brightness(0) invert(1);
}

#popup-video-player video {
    cursor: pointer;
}

#popup-video-player:hover [data-name="video_controls_overlay"] {
    opacity: 1;
}

[data-name="video_controls_overlay"] {
    transition: opacity 0.3s ease;
}

/* Video gestų kalba player – explicit size so it's visible and usable */
#video-player-container {
    width: 320px;
    min-width: 280px;
    max-width: 100%;
}

#video-player-container .relative {
    width: 100%;
}

/* Plyr: consistent border-radius and border so bottom matches top/sides (fixes bottom border inconsistency) */
#video-player-container .relative {
    border: 1px solid rgba(0, 0, 0, 0.15);
    box-sizing: border-box;
}
#video-player-container .relative .plyr,
#video-player-container .relative .plyr video {
    border-radius: 8px;
}
#video-player-container .relative .plyr__controls {
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}
#popup-video-player .plyr,
#popup-video-player .plyr video {
    border-radius: 16px;
}
#popup-video-player .plyr__controls {
    border-bottom-left-radius: 16px;
    border-bottom-right-radius: 16px;
}
/* Ensure Plyr control bar background fills the rounded bottom edge */
.amc-plyr-wrap .plyr__controls {
    border-bottom-left-radius: inherit;
    border-bottom-right-radius: inherit;
}
.amc-plyr-wrap .plyr {
    border-radius: inherit;
    overflow: hidden;
}
.amc-plyr-wrap .plyr video {
    border-radius: inherit;
}

/* Video gestų kalba toggle – full click/hover area, above content below */
[data-name="toggle button container"] {
    z-index: 10;
    position: relative;
}

/* Video toggle container - separate from audio player */
#popup-video-toggle-container {
    margin-top: 10px;
}

#video-toggle-btn {
    cursor: pointer;
}

#video-toggle-btn .toggle-indicator {
    pointer-events: none;
}

/* Main container - fill viewport */
[data-name="main_container"] {
    width: 100%;
    height: 100%;
}

/* Splat container - fill parent */
#splat-container {
    width: 100%;
    height: 100%;
}

/* Hide splat when popup or interactive popup is open - reduces lag */
body.popup-full-open #splat-container,
body.interactive-popup-open #splat-container {
    display: none !important;
}

body.interactive-popup-open [class*="3d-object-canvas"] {
    display: none !important;
}

/* Lock page scroll whenever fullscreen popups are open */
html:has(body.interactive-popup-open),
html:has(body.popup-full-open),
body.interactive-popup-open,
body.popup-full-open {
    overflow: hidden !important;
}

#interactive-popup-iframe-wrap {
    z-index: 99;
}

/* ============================================
   Hotspot Info Window Styles
   ============================================ */

/* Desktop for hotspot info window */
#hotspot-info-card {
    width: 403px !important;
    height: 117px !important;
    bottom: 100px !important;
    border-radius: 16px !important;
    padding: 10px 14px !important;
}

#hotspot-info-inner {
    width: 100% !important;
    height: 100% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
}

#hotspot-info-text {
    flex: 1 !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: auto !important;
    max-width: 348px !important;
    height: 100% !important;
    margin: 0 2px !important;
}

#hotspot-info-author,
#hotspot-info-title {
    font-size: 21px !important;
    line-height: 23.371px !important;
    height: auto !important;
}

#hotspot-info-nav-left,
#hotspot-info-nav-right {
    display: flex !important;
    align-items: center !important;
    
}

#hotspot-info-nav-left {
    justify-content: flex-start !important;
}

#hotspot-info-nav-right {
    justify-content: flex-end !important;
}

#hotspot-info-more-btn {
    width: 125px !important;
    height: 57px !important;
    font-size: 18px !important;
    border-radius: 10px !important;
    transition: all 0.2s ease;
}

/* Same hover/active as .icon-button (home): brighten up, not dim */
#hotspot-info-more-btn:hover {
    background-color: rgba(255, 255, 255, 0.8) !important;
    transform: scale(1.05);
}

#hotspot-info-more-btn:active {
    transform: scale(0.95);
    transition: all 0.1s ease;
}

/* Selected item in dropdown: dark grey border + light grey background (Figma) */
.dropdown-item.selected,
.dropdown-items-container .dropdown-item.selected {
    background-color: rgba(0, 0, 0, 0.05) !important;
    border: 1px solid #4a4a4a !important;
    border-radius: 10px;
}

/* ============================================
   Room Scene Mobile Responsive Styles
   ============================================ */

@media (max-width: 768px) {
    /* Hotspot info window - tablet/mobile. Height dynamic to text, min 60px. */
    #hotspot-info-card {
        width: 322px !important;
        height: auto !important;
        min-height: 60px !important;
        justify-content: center !important;
        padding: 12px 16px !important;
        bottom: 120px !important;
        border-radius: 12px !important;
    }

    #hotspot-info-inner {
        width: 100% !important;
        height: auto !important;
        min-height: unset !important;
        position: relative !important;
    }

    /* Text in flow so card height scales to content */
    #hotspot-info-text {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        padding-left: 44px !important;
        padding-right: 44px !important;
        margin: 0 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 0 !important;
    }

    #hotspot-info-author,
    #hotspot-info-title {
      
        line-height: 20px !important;
        height: auto !important;
    }

    #hotspot-info-nav-left,
    #hotspot-info-nav-right {
        top: 0 !important;
        bottom: 0 !important;
        display: flex !important;
    }


    #hotspot-info-more-btn {
        width: 125px !important;
        height: 57px !important;
        font-size: 18px !important;
        border-radius: 10px !important;
    }

   

    /* Add spacing between home button and dropdown on mobile */
    header .dropdown-container {
        margin-left: 12px !important;
    }

    /* Dropdown responsive */
    .dropdown-container {
        width: calc(100% - 32px) !important;
        max-width: 343px;
    }

    .dropdown-header {
        padding: 12px 12px !important;
        gap: 12px !important;
    }

    .dropdown-title {
        font-size: 16px !important;
        letter-spacing: 0.8px !important;
    }

    .dropdown-arrow {
        width: 7px !important;
        height: 12px !important;
    }

    .dropdown-list-content {
        padding: 0 12px !important;
    }

    .dropdown-item {
        font-size: 14px !important;
        line-height: 24px !important;
        padding: 6px 8px !important;
    }

    /* Buttons responsive */
    .icon-button,
    .sound-btn {
        width: 48px !important;
        height: 48px !important;
    }

    /* Header padding adjustment */
    header {
        padding: 8px !important;
    }

    /* Button gap adjustment */
    .flex.flex-col.gap-\[10px\] {
        gap: 8px !important;
    }

    /* Popup close button */
    .popup-close-btn {
        width: 44px !important;
        height: 44px !important;
        top: 20px !important;
        right: 20px !important;
    }

    /* Popup navigation buttons */
    .popup-nav-left,
    .popup-nav-right {
        width: 32px !important;
        height: 44px !important;
    }

    /* Sound button - move to left side on mobile, stack with home/back buttons */
    [data-name="sound_button"] {
        position: fixed !important;
        top: calc(10px + 48px + 10px + 48px + 10px) !important;
        left: 10px !important;
        bottom: auto !important;
        padding: 0 !important;
        z-index: 25 !important;
    }

    /* Bottom container */
    [data-name="bottom"] {
        display: block !important;
        z-index: 50 !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 20px)) !important;
    }
}

@media (max-width: 480px) {
    /* Hotspot info window - small mobile. Height dynamic to text, min 60px. */
    #hotspot-info-card {
        width: 322px !important;
        height: auto !important;
        min-height: 60px !important;
        justify-content: center !important;
        padding: 8px 11.2px !important;
        bottom: 80px !important;
        border-radius: 12.8px !important;
    }

    #hotspot-info-inner {
        height: auto !important;
        min-height: unset !important;
        position: relative !important;
    }

    /* Text in flow so card height scales to content */
    #hotspot-info-text {
        position: relative !important;
        left: auto !important;
        right: auto !important;
        top: auto !important;
        bottom: auto !important;
        padding-left: 44px !important;
        padding-right: 44px !important;
        margin: 0 2px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 0 !important;
    }

    #hotspot-info-author,
    #hotspot-info-title {
        font-size: 16.8px !important;
        line-height: 18.697px !important;
        height: auto !important;
    }

    #hotspot-info-nav-left,
    #hotspot-info-nav-right {
        position: absolute !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 44px !important;
        display: flex !important;
        align-items: center !important;
    }
  



    #hotspot-info-nav-left {
        left: 0 !important;
    }

    #hotspot-info-nav-right {
        right: 0 !important;
    }

    #hotspot-info-more-btn {
        width: 100px !important;
        height: 39.2px !important;
        font-size: 14.4px !important;
        border-radius: 10px !important;
    }

    /* Add spacing between home button and dropdown on small mobile */
    header .dropdown-container {
        margin-left: 10px !important;
    }

    /* Dropdown responsive - small mobile */
    .dropdown-container {
        width: calc(100% - 24px) !important;
    }

    .dropdown-header {
        padding: 10px 10px !important;
        gap: 10px !important;
    }

    .dropdown-title {
        font-size: 14px !important;
        letter-spacing: 0.7px !important;
    }

    .dropdown-arrow {
        width: 6px !important;
        height: 10px !important;
    }

    .dropdown-list-content {
        padding: 0 10px !important;
    }

    .dropdown-item {
        font-size: 13px !important;
        line-height: 20px !important;
        padding: 5px 6px !important;
    }

    /* Icon buttons - smaller on small mobile */
    .icon-button,
    .sound-btn {
        width: 44px !important;
        height: 44px !important;
    }

    /* Header padding - tighter */
    header {
        padding: 6px !important;
    }

    /* Button gap - tighter */
    .flex.flex-col.gap-\[10px\] {
        gap: 6px !important;
    }

    /* Sound button - adjust position for smaller buttons on small mobile */
    [data-name="sound_button"] {
        top: calc(6px + 44px + 6px + 44px + 8px) !important;
    
    }

    /* Popup close button - smaller */
    .popup-close-btn {
        width: 40px !important;
        height: 40px !important;
        top: 16px !important;
        right: 16px !important;
    }

    /* Popup navigation buttons - smaller */
    .popup-nav-left,
    .popup-nav-right {
        width: 28px !important;
        height: 40px !important;
    }

    /* Keep bottom container visible above hotspot info window */
    [data-name="bottom"] {
        z-index: 50 !important;
        bottom: env(safe-area-inset-bottom, 0px) !important;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 20px)) !important;
    }
}

/* Mobile landscape: keep sound button at bottom (room-scene) */
@media (orientation: landscape) and (max-height: 500px) {
    [data-name="sound_button"] {
        top: auto !important;
        bottom: 10px !important;
        left: 10px !important;
        padding: 10px !important;
    }
}

/* Mobile (portrait + landscape): close buttons are 2x smaller than desktop (51px -> 26px) */
@media (max-width: 1024px) and (pointer: coarse) {
    .popup-close-btn {
        position: fixed !important;
        width: 26px !important;
        height: 26px !important;
        top: 15px !important;
        right: 15px !important;
        z-index: 10001 !important;
        isolation: isolate !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
    }

    /* Iframe close: keep icon 26x26 (2x smaller than desktop) with a larger tap target */
    #interactive-popup-close {
        position: fixed !important;
        top: max(8px, env(safe-area-inset-top, 0px)) !important;
        right: max(8px, env(safe-area-inset-right, 0px)) !important;
        width: 44px !important;
        height: 44px !important;
        padding: 9px !important;
        z-index: 2147483647 !important;
        isolation: isolate !important;
        pointer-events: auto !important;
        touch-action: manipulation !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }

    #interactive-popup-close img {
        width: 26px !important;
        height: 26px !important;
        pointer-events: none !important;
    }

    #interactive-popup-iframe-wrap {
        inset: 0 !important;
        z-index: 99 !important;
    }

    #interactive-popup-iframe {
        display: block !important;
        width: 100% !important;
        height: 100% !important;
    }
}

/* ============================================
   Mobile Popup Styles (Figma: popup_mobile)
   ============================================ */

   .popup-modal #popup-aprasymas {
  margin-bottom: 60px !important;
}

@media (max-width: 768px) {
    /* Main popup container - full screen mobile */
    .popup-modal {
        padding: 0 !important;
        margin: 0 !important;
    }
    
    .popup-modal .popup-content {
        align-items: stretch !important;
        justify-content: stretch !important;
        padding: 0 !important;
        margin: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .popup-page,
    .popup-modal .popup-content [data-name="Popup_desktop"] {
        width: 100% !important;
        max-width: 100% !important;
        min-height: 100% !important;
        border-radius: 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: visible !important;
        margin: 0 !important;
    }

    /* Row 1: 3D viewer - fixed height on mobile, overflow hidden so 3D stays inside */
    .popup-viewer-row,
    .popup-modal .popup-content [data-name="top"] {
        position: relative !important;
        flex: 0 0 auto !important;
        min-height: 65vh !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
    }
    .popup-modal [data-name="preview"] {
        padding-bottom: 16px !important;
        box-sizing: border-box !important;
    }

    /* Interaktyviai button - mobile positioning */
    .popup-modal .popup-interaktyviai-btn {
        top: 13px !important;
        left: 14px !important;
        padding: 7px 6px !important;
        gap: 8px !important;
        border-radius: 9px !important;
        font-size: 16px !important;
        width: auto !important;
        max-width: 159px !important;
        height: 41px !important;
    }

    .popup-modal .popup-interaktyviai-btn img {
        width: 23px !important;
        height: 23px !important;
    }

    /* Close button - mobile positioning */
    .popup-modal .popup-close-btn {
        top: 10px !important;
        right: 10px !important;
        z-index: 9999 !important;
        pointer-events: auto !important;
    }

    /* Scroll FAB (scroll to bottom / scroll to top) - mobile: same inset as close button (FAB is outside modal) */
    .popup-scroll-fab-container {
        bottom: 10px !important;
        left: 10px !important;
    }

    /* Preview container - center the image */
    .popup-modal [data-name="preview"] {
        position: relative !important;
        top: auto !important;
        bottom: auto !important;
        left: auto !important;
        right: auto !important;
        flex: 1 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding: 0 !important;
    }

    /* 3D object container - fills viewer area on mobile */
    .popup-modal [data-name="3d_obj"] {
        width: 100% !important;
        height: 100% !important;
        margin: 0 auto !important;
        position: relative !important;
    }

    .popup-modal [data-name="3d_obj"] img,
    .popup-modal [data-name="3d_obj"] model-viewer {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain !important;
    }

    /* Navigation arrows - mobile positioning */
    .popup-modal .popup-nav-left-container {
        left: 0 !important;
        padding-left: 0px !important;
    }

    .popup-modal .popup-nav-right-container {
        right: 0 !important;
        padding-right: 0px !important;
    }

    .popup-modal .popup-nav-left,
    .popup-modal .popup-nav-right {
        width: 41px !important;
        height: 58px !important;
        margin: 5px;
    }

    /* Description row: no inner scroll — whole popup scrolls */
    .popup-description-row,
    .popup-modal .popup-content [data-name="bottom"] {
        flex: 0 0 auto !important;
        min-height: 0 !important;
        padding: 10px 15px !important;
        gap: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        overflow: visible !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Description content - full width on mobile */
    .popup-description-content,
    .popup-modal [data-name="info container"] {
        width: 100% !important;
        max-width: 100% !important;
        gap: 10px !important;
    }

    /* Text container - author and title */
    .popup-modal [data-name="text_container"]:first-child {
        width: 100% !important;
        height: auto !important;
        padding: 0 15px !important;
    }

    /* Author text - centered */
    .popup-modal [data-name="autor_optional_text"] {
        height: 19px !important;
        padding: 0 !important;
    }

    .popup-modal #popup-author {
        font-size: 16px !important;
        line-height: 24px !important;
        height: auto !important;
    }

    /* Title text - centered */
    .popup-modal [data-name="Obj_name_text"] {
        height: auto !important;
        min-height: 47px !important;
        padding: 10px 0 !important;
    }

    .popup-modal #popup-title {
        font-size: 16px !important;
        line-height: 24px !important;
        font-weight: 500 !important;
    }

    /* Audio player container - mobile layout */
    .popup-modal #popup-audio-player-container {
        width: 100% !important;
        max-width: 100% !important;
        flex-direction: column !important;
        gap: 10px !important;
        position: relative !important;
        padding: 0 10px !important;
    }

    .popup-modal #popup-audio-player-container [data-name="audio"] {
        width: 100% !important;
    }

    /* Audio time display */
    .popup-modal #popup-time {
        font-size: 12.8px !important;
    }

    /* Audio seek handle - mobile size */
    .popup-modal .audio-progress-container {
        height: 15px !important;
    }

    .popup-modal .audio-seek-handle {
        width: 15px !important;
        height: 15px !important;
    }

    /* Toggle button container - Gestų kalba */
    .popup-modal #popup-video-toggle-container,
    .popup-modal [data-name="toggle button container"] {
        position: relative !important;
        top: auto !important;
        right: auto !important;
        margin-top: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        justify-content: flex-end !important;
        gap: 5px !important;
        flex-wrap: nowrap !important;
        padding: 0 10px !important;
    }

    .popup-modal #popup-label-video-gestu-kalba {
        font-size: 16px !important;
        line-height: 24px !important;
        white-space: nowrap !important;
    }

    .popup-modal #video-toggle-btn {
        width: 60px !important;
        height: 26px !important;
        padding: 2px 5px !important;
        border-radius: 16px !important;
        flex-shrink: 0 !important;
    }

    .popup-modal #video-toggle-btn .toggle-indicator {
        width: 18px !important;
        height: 18px !important;
    }

    .popup-modal .video-toggle-btn.active .toggle-indicator {
        transform: translateX(33px) !important;
    }

    /* Photo, text, video container - mobile layout */
    .popup-modal [data-name="photo, text, video"] {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 10px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 10px !important;
    }

    /* Photo thumbnail - mobile sizing */
    .popup-modal #popup-featured-image-container {
        width: 118px !important;
        height: 166px !important;
        flex-shrink: 0 !important;
        border: 1px solid black !important;
        border-radius: 6px !important;
    }

    .popup-modal #popup-featured-image {
        border-radius: 6px !important;
    }

    /* Text container with artwork details - mobile */
    .popup-modal [data-name="photo, text, video"] [data-name="text_container"] {
        flex: 1 !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: 100% !important;
        min-height: auto !important;
        height: auto !important;
        max-height: none !important;
        overflow-y: visible !important;
    }

    .popup-modal [data-name="photo, text, video"] [data-name="text_container"] .flex.flex-col {
        padding: 0 !important;
        gap: 8px !important;
    }

    /* Artwork detail rows - mobile font sizes */
    .popup-modal #popup-row-technika span,
    .popup-modal #popup-row-sukurimo-metai span,
    .popup-modal #popup-row-matmenys span,
    .popup-modal #popup-row-medziagos span,
    .popup-modal #popup-row-aprasymas span {
        font-size: 16px !important;
        line-height: 27px !important;
    }

    .popup-modal #popup-aprasymas {
        font-size: 16px !important;
        line-height: 27px !important;
    }

    /* Video player container - mobile positioning */
    .popup-modal #video-player-container {
        position: relative !important;
        left: auto !important;
        top: auto !important;
        width: 100% !important;
        max-width: 376px !important;
        margin-top: 10px !important;
    }

    /* Video player in top section - mobile sizing */
    .popup-modal #popup-video-player {
        width: calc(100% - 16px) !important;
        max-width: 350px !important;
        height: auto !important;
        aspect-ratio: 16/10 !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        border-radius: 12px !important;
    }
}

/* Extra small mobile adjustments */
@media (max-width: 380px) {
    .popup-modal [data-name="3d_obj"] {
        width: 100% !important;
        height: 100% !important;
    }

    .popup-modal [data-name="photo, text, video"] {
        flex-direction: column !important;
    }

    .popup-modal #popup-featured-image-container {
        width: 100% !important;
        max-width: 200px !important;
        height: auto !important;
        aspect-ratio: 3/4 !important;
        margin: 0 auto !important;
    }

    .popup-modal [data-name="photo, text, video"] [data-name="text_container"] {
        max-width: 100% !important;
        width: 100% !important;
    }

    .popup-modal .popup-interaktyviai-btn {
        max-width: 140px !important;
        font-size: 14px !important;
    }
}