/* Location detail page — loaded in via critical_css.php */ .location-panorama-container { border-radius: 15px; overflow: hidden; box-shadow: none !important; } .panorama-wrapper { position: relative; } .panorama-measurements-overlay { position: absolute; bottom: 20px; left: 20px; z-index: 10; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(10px); border-radius: 10px; padding: 12px 18px; box-shadow: 0 4px 15px rgba(0,0,0,0.3); transition: all 0.3s ease; } .panorama-measurements-overlay:hover { background: rgba(0, 0, 0, 0.85); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.4); } .measurements-content { display: flex; align-items: center; color: white; font-size: 0.95rem; font-weight: 500; } .measurements-content i { font-size: 1.1rem; color: #4CAF50; } .measurements-text { letter-spacing: 0.5px; } .panorama-placeholder { background: #f8f9fa; border-radius: 15px; padding: 4rem; text-align: center; border: 2px dashed #dee2e6; } .location-title { font-size: 2.5rem; font-weight: 700; color: #333; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 100%; } .meta-item { margin-bottom: 0.5rem; color: #666; word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 100%; } .location-description { word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 100%; } .location-description p { word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 100%; white-space: normal; } .gallery-item img:hover { transform: scale(1.05); } .related-item h6, .related-item a { word-wrap: break-word; word-break: break-word; overflow-wrap: break-word; max-width: 100%; white-space: normal; } .owner-avatar-large { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; } .owner-avatar-placeholder-large { width: 60px; height: 60px; border-radius: 50%; background: #e9ecef; display: flex; align-items: center; justify-content: center; color: #6c757d; font-size: 1.5rem; } .related-thumbnail { width: 80px; height: 60px; border-radius: 8px; object-fit: cover; } .related-thumbnail-placeholder { width: 80px; height: 60px; border-radius: 8px; background: #f8f9fa; display: flex; align-items: center; justify-content: center; color: #6c757d; border: 1px solid #dee2e6; } .location-map-container { width: 100%; border-radius: 0 0 0.375rem 0.375rem; overflow: hidden; } .location-map-container iframe { width: 100%; height: 450px; border: none; display: block; } @media (max-width: 768px) { .location-title { font-size: 2rem; } .location-panorama-container { margin-bottom: 2rem; } .panorama-wrapper { height: 440px !important; } #panorama { height: 440px !important; } .panorama-measurements-overlay { bottom: 15px; left: 15px; padding: 10px 14px; } .measurements-content { font-size: 0.85rem; } .owner-avatar-large, .owner-avatar-placeholder-large { width: 50px; height: 50px; } .location-map-container iframe { height: 350px; } } @media (max-width: 576px) { .location-title { font-size: 1.5rem; } .panorama-placeholder { padding: 2rem; } .panorama-wrapper { height: 330px !important; } #panorama { height: 330px !important; } .panorama-measurements-overlay { bottom: 10px; left: 10px; padding: 8px 12px; } .measurements-content { font-size: 0.75rem; } .measurements-content i { font-size: 0.9rem; } .related-thumbnail, .related-thumbnail-placeholder { width: 60px; height: 45px; } .location-map-container iframe { height: 300px; } } /* Panorama Layout Container */ .panorama-layout-container { display: flex; gap: 1rem; align-items: flex-start; box-shadow: none !important; } /* Panorama with Thumbnails Styles */ .panorama-with-thumbnails-wrapper { flex-shrink: 0; box-shadow: none !important; } .panorama-thumbnails { display: flex; flex-direction: column; gap: 0.75rem; width: 80px; flex-shrink: 0; } .panorama-thumbnail { width: 80px; height: 80px; border: 2px solid transparent; border-radius: 8px; overflow: hidden; cursor: pointer; transition: all 0.2s; background: #f8f9fa; position: relative; } .panorama-thumbnail img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.2s; } .panorama-thumbnail:hover { border-color: #dc3545; transform: scale(1.05); } .panorama-thumbnail.active { border-color: #dc3545; } .panorama-thumbnail.active::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border: 2px solid #dc3545; border-radius: 6px; } @media (max-width: 768px) { .panorama-layout-container { flex-direction: column; align-items: stretch; } .panorama-with-thumbnails-wrapper { width: 100%; order: 1; margin-bottom: 1rem; } .panorama-wrapper { order: 2; width: 100%; margin-top: 0; } .panorama-thumbnails { flex-direction: row; width: 100%; overflow-x: auto; padding-bottom: 0.5rem; } /* Ensure pnlm-dragfix (created by Pannellum) appears below thumbnails */ #panorama { order: 2; } } /* Product Thumbnail Gallery Styles */ .product-gallery-container { display: block; margin-bottom: 3rem; } .product-main-image-container { width: 100%; position: relative; background: #000; border-radius: 8px; overflow: hidden; min-height: 500px; max-height: 600px; height: 600px; display: flex; align-items: center; justify-content: center; } .location-main-image { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; display: none; } .location-main-image.active { display: block !important; } @media (max-width: 768px) { .product-main-image-container { min-height: 400px; max-height: 400px; height: 400px; } }