/* ==========================================================================
   single-info.php uchun to'liq izolyatsiya qilingan maxsus CSS
   Barcha class'larga .sp- prefixi qo'shilgan, hech qanday plugin CSS kerak emas
   ========================================================================== */

/* Fullscreen button */
.mgallerybox {
    position: relative;
}

.gallery-fullscreen-btn {
    display: none !important;
    visibility: hidden !important;
}

.gallery-fullscreen-btn:hover {
    background: rgba(0, 0, 0, 0.9);
    opacity: 1;
    transform: scale(1.1);
}

.gallery-fullscreen-btn:focus {
    outline: 2px solid #0c93d2;
    outline-offset: 2px;
}

/* Share buttons - faqat fullscreen mode'da ko'rinadi */
.gallery-share-buttons {
    position: fixed;
    bottom: 60px;
    right: 70px;
    z-index: 10000000;
    background: rgba(0, 0, 0, 0.85);
    padding: 10px 15px;
    border-radius: 8px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    display: none;
    pointer-events: auto;
}

.gallery-share-title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 300px;
    display: none;
}

.gallery-share-links {
    display: flex;
    gap: 8px;
    justify-content: center;
    align-items: center;
}

.gallery-share-btn {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.15);
    border: 2px solid rgba(255, 255, 255, 0.3);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    cursor: pointer;
    transition: all 0.3s ease;
    font-size: 16px;
    padding: 0;
}

.gallery-share-btn:hover {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.6);
    transform: scale(1.1);
}

.gallery-share-btn:focus {
    outline: 2px solid #0c93d2;
    outline-offset: 2px;
}

.gallery-share-btn span,
.gallery-share-btn i {
    line-height: 1;
    font-size: 16px;
}

.gallery-share-telegram:hover {
    background: #0088cc;
    border-color: #0088cc;
}

.gallery-share-facebook:hover {
    background: #1877f2;
    border-color: #1877f2;
}

.gallery-share-tiktok:hover {
    background: #000000;
    border-color: #ff0050;
}

.gallery-share-instagram:hover {
    background: linear-gradient(45deg, #f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
    border-color: #bc1888;
}

.gallery-share-copy:hover {
    background: #666;
    border-color: #888;
}

/* Fullscreen mode'da share buttons ko'rinadi */
.mgallerybox.gallery-fullscreen-active .gallery-share-buttons,
.mgallerybox:-webkit-full-screen .gallery-share-buttons,
.mgallerybox:-moz-full-screen .gallery-share-buttons,
.mgallerybox:-ms-fullscreen .gallery-share-buttons,
.mgallerybox:fullscreen .gallery-share-buttons,
.blueimp-gallery-display ~ .mgallerybox .gallery-share-buttons,
body:has(.blueimp-gallery-display) .gallery-share-buttons,
.blueimp-gallery-display ~ .gallery-share-buttons,
body:has(.blueimp-gallery-display) .gallery-share-buttons,
.blueimp-gallery-display ~ .mgallerybox .gallery-share-buttons,
#blueimp-gallery.blueimp-gallery-display ~ .mgallerybox .gallery-share-buttons,
body:has(#blueimp-gallery.blueimp-gallery-display) .gallery-share-buttons {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 10000000 !important;
    bottom: 60px !important;
    right: 70px !important;
    top: auto !important;
}

/* Blueimp-gallery ochilganda share buttons ko'rinishi uchun */
#blueimp-gallery.blueimp-gallery-display + * .gallery-share-buttons,
body:has(#blueimp-gallery.blueimp-gallery-display) .gallery-share-buttons {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: fixed !important;
    z-index: 10000000 !important;
    bottom: 60px !important;
    right: 70px !important;
    top: auto !important;
}

/* Close button kattalashtirilgan - bosh bilan ishlashga qulay */
#blueimp-gallery.blueimp-gallery-display > .close {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    top: 50px !important;
    right: 30px !important;
    padding: 0 !important;
    font-size: 32px !important;
    line-height: 44px !important;
    background: rgba(0, 0, 0, 0.85) !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    opacity: 0.9 !important;
    transition: all 0.3s ease !important;
    color: #fff !important;
    font-weight: 300 !important;
    text-shadow: 0 0 4px rgba(0, 0, 0, 0.8) !important;
}

#blueimp-gallery.blueimp-gallery-display > .close:hover {
    opacity: 1 !important;
    background: rgba(0, 0, 0, 0.95) !important;
    transform: scale(1.1) !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5) !important;
}

.mgallerybox.gallery-fullscreen-active {
    background: #000;
}

/* Fullscreen rejimda */
.mgallerybox:-webkit-full-screen {
    background: #000;
    width: 100vw;
    height: 100vh;
}

.mgallerybox:-moz-full-screen {
    background: #000;
    width: 100vw;
    height: 100vh;
}

.mgallerybox:-ms-fullscreen {
    background: #000;
    width: 100vw;
    height: 100vh;
}

.mgallerybox:fullscreen {
    background: #000;
    width: 100vw;
    height: 100vh;
}

/* ==========================================================================
   1. Reset & Base
   ========================================================================== */

.sp-container * {
    box-sizing: border-box;
}

.sp-container {
    width: 100%;
    max-width: 1000px;
    margin: 20px auto;
    border: 1px solid #ccc;
    min-height: 100px;
    padding: 15px;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
    box-sizing: border-box;
}

/* ==========================================================================
   2. Layout & Container
   ========================================================================== */

.sp-footer {
    width: 100%;
    height: 40px;
}

/* ==========================================================================
   3. Typography - Titles
   ========================================================================== */

.sp-title {
    width: 100%;
    display: block;
    font-size: 3.0rem;
    text-align: left;
    margin: 0 0 25px;
    padding: 0;
    color: #000;
    font-weight: 600;
    line-height: 1.2;
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    white-space: normal;
    hyphens: auto;
}

.sp-title.line {
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    padding-bottom: 10px;
}

.sp-title > span {
    display: inline-block;
    vertical-align: middle;
    margin-left: 10px;
}

.sp-title > span > i {
    color: #ffc107;
    font-size: 1.8rem;
    vertical-align: middle;
    position: relative;
    top: -2px;
}

/* Unicode star icon fallback */
.sp-title > span > i::before {
    content: '★';
    font-style: normal;
}

/* ==========================================================================
   4. Description Block
   ========================================================================== */

.sp-description {
    width: 100%;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.05);
    margin-bottom: 25px;
}

.sp-description .content {
    width: 100%;
    display: block;
    color: #5e5e5e;
    font-size: 1.2rem;
    line-height: 1.7;
    margin-bottom: 25px;
    overflow: hidden;
}

.sp-description .content p {
    font-size: 1.2rem;
    margin-bottom: 16px;
    line-height: 1.6;
    color: #374151;
}

.sp-description .content p:last-child {
    margin-bottom: 0;
}

.sp-description .content h1,
.sp-description .content h2,
.sp-description .content h3,
.sp-description .content h4,
.sp-description .content h5,
.sp-description .content h6 {
    color: #000;
    text-align: left;
    font-weight: 600;
    margin-bottom: 15px;
    line-height: 1.2;
    text-transform: uppercase;
}

.sp-description .content h1 { font-size: 3.0rem; }
.sp-description .content h2 { font-size: 2.8rem; }
.sp-description .content h3 { font-size: 2.6rem; }
.sp-description .content h4 { font-size: 2.4rem; }
.sp-description .content h5 { font-size: 2.2rem; }
.sp-description .content h6 { font-size: 2.0rem; }

.sp-description .content a {
    color: #50b9ce;
    text-decoration: underline;
    transition: all 0.2s ease-in-out;
}

.sp-description .content a:hover {
    color: #71d6ea;
}

.sp-description .content strong,
.sp-description .content b {
    font-weight: 700;
}

.sp-description .content hr {
    width: 100%;
    float: left;
    height: 2px;
    margin: 20px 0;
    background: #ccc;
    border: none;
}

.sp-description .content blockquote {
    display: block;
    float: left;
    font-size: 1.4rem;
    font-style: italic;
    line-height: 22px;
    color: #949494;
    border-left: 5px solid #ccc;
    padding: 10px 10px 10px 20px;
    margin: 0 0 25px 25px;
}

.sp-description .content blockquote p {
    margin: 0;
}

.sp-description .content ul,
.sp-description .content ol {
    width: 100%;
    float: left;
    padding: 0 10px 0 15px;
    margin-bottom: 18px;
}

.sp-description .content ul {
    list-style: none;
}

.sp-description .content ol {
    list-style-position: inside;
}

.sp-description .content ul ul,
.sp-description .content ul ol,
.sp-description .content ol ul,
.sp-description .content ol ol {
    margin-top: 5px;
    margin-bottom: 5px;
}

.sp-description .content iframe,
.sp-description .content embed,
.sp-description .content object {
    width: 100%;
    max-width: 100%;
    height: auto;
    min-height: 400px;
    border: none;
    border-radius: 8px;
    margin: 15px 0;
    display: block;
}

.sp-description .content iframe[src*="streetview"],
.sp-description .content iframe[src*="google"] {
    width: 100%;
    height: 500px;
    min-height: 500px;
}

/* ==========================================================================
   5. Gallery - CSS-only (Zamonaviy dizayn)
   ========================================================================== */

.sp-gallery {
    display: block;
    width: 100%;
    position: relative;
    margin: 0 auto 25px;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
}

.sp-gallery input[type="radio"] {
    display: none;
}

/* Radio button'lar yashirin */
.sp-gallery input[type="radio"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.sp-gallery .sp-gallery-main {
    position: relative;
    width: 100%;
    background: #f5f5f5;
    overflow: hidden;
    border-radius: 12px 12px 0 0;
}

@media (min-width: 768px) {
    .sp-gallery .sp-gallery-main {
        min-height: 550px;
    }
}

@media (max-width: 767px) {
    .sp-gallery .sp-gallery-main {
        min-height: 300px;
        border-radius: 12px;
    }
}

.sp-gallery .sp-gallery-slides {
    position: relative;
    width: 100%;
    min-height: 100%;
}

.sp-gallery .sp-gallery-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.5s cubic-bezier(0.4, 0, 0.2, 1), visibility 0.5s;
    z-index: 1;
}

/* Birinchi slide default ko'rinadi (birinchi radio checked) */
.sp-gallery .sp-gallery-slides .sp-gallery-slide:first-child {
    position: relative;
    opacity: 1;
    visibility: visible;
    z-index: 10;
}

/* Radio checked bo'lganda tegishli slide ko'rinadi */
.sp-gallery #sp-slide-1:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(1),
.sp-gallery #sp-slide-2:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(2),
.sp-gallery #sp-slide-3:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(3),
.sp-gallery #sp-slide-4:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(4),
.sp-gallery #sp-slide-5:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(5),
.sp-gallery #sp-slide-6:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(6),
.sp-gallery #sp-slide-7:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(7),
.sp-gallery #sp-slide-8:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(8),
.sp-gallery #sp-slide-9:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(9),
.sp-gallery #sp-slide-10:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:nth-child(10) {
    opacity: 1 !important;
    visibility: visible !important;
    z-index: 10 !important;
    position: relative !important;
}

/* Boshqa radio checked bo'lganda birinchi slide yashiriladi */
.sp-gallery #sp-slide-2:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child,
.sp-gallery #sp-slide-3:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child,
.sp-gallery #sp-slide-4:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child,
.sp-gallery #sp-slide-5:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child,
.sp-gallery #sp-slide-6:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child,
.sp-gallery #sp-slide-7:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child,
.sp-gallery #sp-slide-8:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child,
.sp-gallery #sp-slide-9:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child,
.sp-gallery #sp-slide-10:checked ~ .sp-gallery-main .sp-gallery-slides .sp-gallery-slide:first-child {
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 1 !important;
    position: absolute !important;
}

.sp-gallery .sp-gallery-slide .sp-gallery-full {
    width: 100%;
    height: 100%;
    display: block;
    position: relative;
}

.sp-gallery .sp-gallery-slide .sp-gallery-full > span {
    display: block;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    transition: transform 0.5s ease;
}

.sp-gallery .sp-gallery-slide:hover .sp-gallery-full > span {
    transform: scale(1.02);
}

@media (min-width: 768px) {
    .sp-gallery .sp-gallery-slide .sp-gallery-full > span {
        min-height: 550px;
    }
}

@media (max-width: 767px) {
    .sp-gallery .sp-gallery-slide .sp-gallery-full > span {
        min-height: 300px;
        padding-bottom: 66.67%;
    }
}

.sp-gallery .sp-gallery-slide .sp-gallery-full > span a {
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 5;
    cursor: zoom-in;
    -webkit-tap-highlight-color: transparent;
    text-decoration: none;
    transition: all 0.3s ease;
}

.sp-gallery .sp-gallery-slide .sp-gallery-full > span a:hover {
    background: rgba(0, 0, 0, 0.05);
}

.sp-gallery .sp-gallery-slide .sp-gallery-full > span a::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 60px;
    height: 60px;
    background: rgba(12, 147, 210, 0.9);
    border-radius: 50%;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 6;
}

.sp-gallery .sp-gallery-slide .sp-gallery-full > span a::before {
    content: '🔍';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    font-size: 24px;
    z-index: 7;
    opacity: 0;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.sp-gallery .sp-gallery-slide .sp-gallery-full > span a:hover::after {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

.sp-gallery .sp-gallery-slide .sp-gallery-full > span a:hover::before {
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
}

/* Thumbnail navigation - yangi dizayn */
.sp-gallery .sp-gallery-thumbs {
    margin-top: 0;
    padding: 15px;
    display: flex;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;
    background: #fafafa;
    border-radius: 0 0 12px 12px;
}

.sp-gallery .sp-gallery-thumbs.sp-hidPreview {
    display: none;
}

@media (max-width: 767px) {
    .sp-gallery .sp-gallery-thumbs {
        padding: 10px;
        gap: 8px;
    }
}

.sp-gallery .sp-gallery-thumb {
    flex-shrink: 0;
    cursor: pointer;
    padding: 3px;
    border: 3px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    background: #fff;
    display: block;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.sp-gallery .sp-gallery-thumb:hover {
    border-color: #0c93d2;
    transform: translateY(-3px);
    box-shadow: 0 4px 12px rgba(12, 147, 210, 0.3);
}

.sp-gallery #sp-slide-1:checked ~ .sp-gallery-thumbs label[for="sp-slide-1"].sp-gallery-thumb,
.sp-gallery #sp-slide-2:checked ~ .sp-gallery-thumbs label[for="sp-slide-2"].sp-gallery-thumb,
.sp-gallery #sp-slide-3:checked ~ .sp-gallery-thumbs label[for="sp-slide-3"].sp-gallery-thumb,
.sp-gallery #sp-slide-4:checked ~ .sp-gallery-thumbs label[for="sp-slide-4"].sp-gallery-thumb,
.sp-gallery #sp-slide-5:checked ~ .sp-gallery-thumbs label[for="sp-slide-5"].sp-gallery-thumb,
.sp-gallery #sp-slide-6:checked ~ .sp-gallery-thumbs label[for="sp-slide-6"].sp-gallery-thumb,
.sp-gallery #sp-slide-7:checked ~ .sp-gallery-thumbs label[for="sp-slide-7"].sp-gallery-thumb,
.sp-gallery #sp-slide-8:checked ~ .sp-gallery-thumbs label[for="sp-slide-8"].sp-gallery-thumb,
.sp-gallery #sp-slide-9:checked ~ .sp-gallery-thumbs label[for="sp-slide-9"].sp-gallery-thumb,
.sp-gallery #sp-slide-10:checked ~ .sp-gallery-thumbs label[for="sp-slide-10"].sp-gallery-thumb {
    border-color: #0c93d2;
    box-shadow: 0 4px 16px rgba(12, 147, 210, 0.4);
    transform: translateY(-2px);
}

.sp-gallery .sp-gallery-thumb span {
    display: block;
    width: 100%;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    border-radius: 4px;
    overflow: hidden;
}

@media (min-width: 768px) {
    .sp-gallery .sp-gallery-thumb {
        width: 110px;
    }
    
    .sp-gallery .sp-gallery-thumb span {
        height: 75px;
        padding-bottom: 0;
    }
}

@media (max-width: 767px) {
    .sp-gallery .sp-gallery-thumb {
        width: 70px;
    }
    
    .sp-gallery .sp-gallery-thumb span {
        height: 55px;
        padding-bottom: 0;
    }
}

.sp-gallery * {
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ==========================================================================
   6. Amenities / Comfort
   ========================================================================== */

.sp-amenities,
.comfort {
    width: 100%;
    display: block;
    padding: 0;
    margin: 0 0 60px;
    list-style: none;
    letter-spacing: -0.3em;
}

.sp-amenities li,
.comfort li {
    display: flex !important;
    align-items: flex-start;
    vertical-align: top;
    padding: 8px 12px !important;
    font-size: 1.6rem;
    margin-bottom: 7px;
    margin-right: 0 !important;
    width: 93% !important;
    color: #333;
    letter-spacing: normal !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
    max-width: 93% !important;
}

.sp-amenities li > *,
.comfort li > * {
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}

.comfort li i + *,
.sp-amenities li i + * {
    flex: 1;
    min-width: 0;
}

.sp-amenities li i,
.comfort li i {
    color: #0c93d2;
    font-size: 1.4rem;
    margin-right: 10px;
    width: 20px;
    text-align: center;
    flex-shrink: 0;
}

/* Unicode icons fallback - FontAwesome o'rniga */
.sp-amenities li i::before {
    font-style: normal;
}

/* Icon fallbacks - fa-* class'lari uchun Unicode emoji'lar */
.sp-amenities li i.fa-paw::before,
.sp-amenities li i.sp-icon-paw::before { content: '🐾'; }

.sp-amenities li i.fa-child::before,
.sp-amenities li i.sp-icon-child::before { content: '👶'; }

.sp-amenities li i.fa-leaf::before,
.sp-amenities li i[class*="seedling"]::before { content: '🌱'; }

.sp-amenities li i.fa-tv::before { content: '📺'; }

.sp-amenities li i.fa-fire::before { content: '🔥'; }

.sp-amenities li i.fa-futbol::before { content: '⚽'; }

.sp-amenities li i[class*="swimming"]::before { content: '🏊'; }

.sp-amenities li i.fa-couch::before { content: '🛋️'; }

.sp-amenities li i.fa-snowflake::before { content: '❄️'; }

.sp-amenities li i.fa-wifi::before,
.sp-amenities li i[class*="wifi"]::before { content: '📶'; }

.sp-amenities li i.fa-utensils::before { content: '🍴'; }

.sp-amenities li i.fa-bath::before { content: '🛁'; }

.sp-amenities li i.fa-shower::before { content: '🚿'; }

.sp-amenities li i.fa-check-circle::before { content: '✓'; }

/* Default - agar boshqa icon class bo'lsa */
.sp-amenities li i::before {
    content: '•';
}

/* ==========================================================================
   6.5. Breadcrumbs - SEO uchun
   ========================================================================== */

.sp-breadcrumb {
    margin-bottom: 20px;
    padding: 8px 0;
}

.sp-breadcrumb .breadcrumb {
    display: flex;
    flex-wrap: wrap;
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: 1.4rem;
}

.sp-breadcrumb .breadcrumb li {
    display: inline-flex;
    align-items: center;
    color: #666;
}

.sp-breadcrumb .breadcrumb li:not(:last-child)::after {
    content: '/';
    margin: 0 8px;
    color: #999;
}

.sp-breadcrumb .breadcrumb li a {
    color: #0c93d2;
    text-decoration: none;
    transition: color 0.2s ease;
}

.sp-breadcrumb .breadcrumb li a:hover {
    color: #0a7aa8;
    text-decoration: underline;
}

.sp-breadcrumb .breadcrumb li:last-child {
    color: #333;
    font-weight: 500;
}

/* ==========================================================================
   6.6. SEO Hidden Links - Google uchun, odamga ko'rinmaydi
   ========================================================================== */

.sp-seo-hidden-links {
    position: absolute !important;
    left: -9999px !important;
    width: 1px !important;
    height: 1px !important;
    overflow: hidden !important;
    clip-path: inset(100%) !important;
    clip: rect(0, 0, 0, 0) !important;
    margin: 0 !important;
    padding: 0 !important;
    visibility: hidden !important;
    opacity: 0 !important;
}

.sp-seo-hidden-links a {
    display: inline-block;
    padding: 0;
    margin: 0;
    color: transparent;
    text-decoration: none;
    font-size: 0;
    line-height: 0;
}

/* Google uchun linklar DOM'da saqlanadi, lekin vizual yashiriladi */
/* Screen reader va search engine uchun hali ham mavjud */

/* ==========================================================================
   7. Images Block
   ========================================================================== */

.sp-images {
    width: 100%;
    margin-bottom: 25px;
}

.sp-images img {
    width: 100%;
    margin-bottom: 15px;
    border-radius: 8px;
    display: block;
}

.sp-images img:last-child {
    margin-bottom: 0;
}

/* ==========================================================================
   8. AI Tags & Caption
   ========================================================================== */

.sp-ai-tags {
    margin: 20px 0;
}

.sp-ai-tags h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #333;
}

.sp-ai-tags > div {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.sp-ai-tags span {
    background: #f0f0f0;
    padding: 5px 10px;
    border-radius: 15px;
    font-size: 14px;
    color: #333;
}

.sp-ai-caption {
    margin: 20px 0;
    padding: 15px;
    background: #f9f9f9;
    border-left: 4px solid #0c93d2;
    border-radius: 4px;
}

.sp-ai-caption h3 {
    font-size: 16px;
    margin-bottom: 10px;
    color: #0c93d2;
}

.sp-ai-caption p {
    margin: 0;
    line-height: 1.6;
    color: #333;
}

/* ==========================================================================
   9. Map Data (hidden, for JS if needed)
   ========================================================================== */

.sp-map-data {
    display: none;
}

/* ==========================================================================
   10. Admin Comment
   ========================================================================== */

.sp-admin-comment {
    margin-bottom: 20px;
    padding: 15px;
    background: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
}

.sp-admin-comment h4 {
    margin: 0 0 10px;
    color: #856404;
    font-size: 1.6rem;
}

.sp-admin-comment p {
    margin: 0;
    color: #856404;
}

/* ==========================================================================
   11. Responsive - Mobile (max-width: 767px)
   ========================================================================== */

@media (max-width: 767px) {
    .sp-container {
        padding: 10px;
        margin: 10px 0;
        width: 100%;
        max-width: 100%;
        border-left: none;
        border-right: none;
    }
    
    .sp-title {
        font-size: 2.0rem;
        line-height: 1.3;
        margin: 0 0 15px;
    }
    
    .sp-description {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .sp-description .content {
        font-size: 1.0rem;
        line-height: 1.6;
    }
    
    .sp-description .content h1 { font-size: 2.0rem; margin: 15px 0 10px; }
    .sp-description .content h2 { font-size: 1.8rem; margin: 15px 0 10px; }
    .sp-description .content h3 { font-size: 1.6rem; margin: 12px 0 8px; }
    .sp-description .content h4 { font-size: 1.4rem; margin: 12px 0 8px; }
    .sp-description .content h5 { font-size: 1.3rem; margin: 10px 0 6px; }
    .sp-description .content h6 { font-size: 1.2rem; margin: 10px 0 6px; }
    
    .sp-description .content p {
        margin-bottom: 10px;
    }
    
    .sp-description .content iframe,
    .sp-description .content embed,
    .sp-description .content object {
        min-height: 250px;
        width: 100% !important;
        max-width: 100% !important;
    }
    
    .sp-description .content iframe[src*="streetview"],
    .sp-description .content iframe[src*="google"] {
        height: 300px;
        min-height: 300px;
    }
    
    .sp-amenities,
    .comfort {
        padding: 12px;
    }
    
    .sp-amenities li,
    .comfort li {
        width: 100%;
        font-size: 1.3rem;
        padding: 8px 0;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
    
    .sp-ai-tags,
    .sp-ai-caption {
        margin: 12px 0;
        padding: 12px;
    }
    
    .sp-ai-tags h3,
    .sp-ai-caption h3 {
        font-size: 1.4rem;
    }
    
    .sp-admin-comment {
        padding: 12px;
        margin-bottom: 15px;
    }
    
    .sp-admin-comment h4 {
        font-size: 1.4rem;
    }
    
    /* Gallery responsive */
    .mgallerybox {
        margin-bottom: 15px;
    }
    
    .gallery-fullscreen-btn {
        width: 36px;
        height: 36px;
        font-size: 16px;
        top: 10px;
        right: 10px;
    }
    
    /* Image tags responsive */
    .sp-images {
        flex-direction: column;
        gap: 10px;
    }
    
    .sp-images img {
        width: 100%;
        height: auto;
    }
}

/* ==========================================================================
   12. Responsive - Tablet (768px - 1023px)
   ========================================================================== */

@media (min-width: 768px) and (max-width: 1023px) {
    .sp-container {
        max-width: 95%;
        padding: 15px;
    }
    
    .sp-title {
        font-size: 2.6rem;
    }
}

/* ==========================================================================
   13. Responsive - Small Mobile (max-width: 480px)
   ========================================================================== */

@media (max-width: 480px) {
    .sp-container {
        padding: 8px;
    }
    
    .sp-title {
        font-size: 1.8rem;
        margin: 0 0 12px;
    }
    
    .sp-description {
        padding: 10px;
    }
    
    .sp-amenities {
        padding: 10px;
    }
    
    .sp-amenities li,
    .comfort li {
        font-size: 1.2rem;
        word-wrap: break-word;
        overflow-wrap: break-word;
        word-break: break-word;
        white-space: normal;
    }
}