/* CROSSMAP MOVIE LAYOUT STYLES (V3.6 - CLICKABLE STREAMING BUTTONS) */



@import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,700;1,400&family=Montserrat:wght@400;600;700;800&display=swap');



.rt-container { font-family: 'Lora', serif; max-width: 100%; margin-bottom: 40px; color: #333; }

/* Two-column layout */
.rt-two-col-layout { display: grid; grid-template-columns: 1fr 340px; gap: 40px; align-items: start; }
.rt-main-col { min-width: 0; }
.rt-sidebar-col { position: sticky; top: 80px; max-height: calc(100vh - 100px); overflow-y: auto; scrollbar-width: thin; scrollbar-color: #ddd transparent; }
.rt-sidebar-col::-webkit-scrollbar { width: 4px; }
.rt-sidebar-col::-webkit-scrollbar-thumb { background: #ddd; border-radius: 4px; }
.rt-sidebar-card { background: #fafafa; border: 1px solid #eaeaea; border-radius: 12px; padding: 25px; margin-bottom: 25px; }
@media (max-width: 1024px) {
    .rt-two-col-layout { grid-template-columns: 1fr; }
    .rt-sidebar-col { position: static; }
}




.rt-container h1, .rt-container h2, .rt-container h3, .rt-container h4, .rt-container .toc-btn, .rt-container .rt-section-subtitle, .rt-container .wtw-platform-name, .rt-container .guide-label, .rt-container .cast-name, .rt-container .vid-card-title, .rt-container .review-title, .rt-container .review-submit-btn, .rt-container .comm-user-name, .rt-container .empty-review-text {

    font-family: 'Montserrat', sans-serif;

}



.toc-wrapper { position: relative; display: flex; align-items: center; margin-top: 20px; }

.toc-container { display: flex; overflow-x: auto; scroll-behavior: smooth; scrollbar-width: none; gap: 12px; padding-right: 50px; white-space: nowrap; flex: 1; }

.toc-container::-webkit-scrollbar { display: none; }

.rt-container .toc-btn { background: #f8f8f8; color: #444; padding: 10px 22px; border-radius: 30px; text-decoration: none; font-weight: 600; font-size: 0.85rem; transition: all 0.2s; border: 1px solid #eaeaea; }

.rt-container .toc-btn:hover { background: #111; color: #fff; border-color: #111; }

.toc-arrow { position: absolute; right: 0; top: 0; bottom: 0; width: 60px; background: linear-gradient(to right, rgba(255,255,255,0), #fff 60%); border: none; font-size: 2rem; cursor: pointer; color: #111; z-index: 2; opacity: 0; transition: opacity 0.2s; display: flex; align-items: center; justify-content: flex-end; padding-right: 10px; }

.toc-wrapper:hover .toc-arrow { opacity: 1; }

.toc-separator { border: 0; border-top: 1px solid #eaeaea; margin: 20px 0 40px; }



.rt-section { margin-bottom: 50px; }

.rt-section-header { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 5px; border-bottom: 1px solid #eaeaea; padding-bottom: 10px; }

.rt-section-title { font-size: 1.5rem; font-weight: 800; margin: 0; color: #111; letter-spacing: -0.5px; }

.rt-container .rt-section-subtitle { font-size: 0.75rem; color: #888; font-weight: 700; text-transform: uppercase; margin: 0 0 20px 0; letter-spacing: 0.5px; }



/* ---------------------------------------------------

   STREAMING PLATFORMS (WITH OFFICIAL APP ICONS)

--------------------------------------------------- */

.wtw-providers { display: flex; gap: 20px; margin-bottom: 20px; flex-wrap: wrap; }

.rt-container a.wtw-provider { 

    display: flex; 

    flex-direction: column; 

    align-items: center; 

    gap: 8px; 

    text-align: center; 

    text-decoration: none !important; 

    transition: transform 0.2s ease; 

    cursor: pointer; 

}

.rt-container a.wtw-provider:hover { 

    transform: translateY(-4px); 

}

/* 1. THE CONTAINER: Uniform height, adaptable width, modern TMDB-style rounded corners */

.rt-container .wtw-circle { 

    height: 54px; /* Keeps all icons lined up perfectly in a row */

    width: auto; /* Lets rectangular badges be wide */

    min-width: 54px; /* Ensures squares don't get squished */

    border-radius: 12px; /* Soft, modern rounded corners */

    display: flex; 

    align-items: center; 

    justify-content: center; 

    background: transparent; 

    border: 1px solid #eaeaea; 

    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; 

    overflow: hidden; 

    box-shadow: 0 2px 6px rgba(0,0,0,0.05);

    padding: 0; 

}



/* 2. THE IMAGE: Fill the container naturally */

.rt-container .wtw-circle img {

    height: 100%;

    width: auto;

    object-fit: contain; /* Ensures the whole logo is visible without cropping */

    display: block;

}



.rt-container a.wtw-provider:hover .wtw-circle { 

    box-shadow: 0 6px 15px rgba(0,0,0,0.12); 

    border-color: currentColor; /* Adds a beautiful ring matching the brand's color! */

}

/* Style the image fetched from Clearbit */

.rt-container .wtw-circle img {

    width: 100%;

    height: 100%;

    object-fit: cover; 

    display: block;

}

.rt-container .wtw-platform-name { 

    font-size: 0.8rem; font-weight: 700; color: #333; 

    max-width: 80px; line-height: 1.2; 

    transition: color 0.2s ease; 

}

.rt-container a.wtw-provider:hover .wtw-platform-name { color: #111; }

.rt-container .wtw-desc { font-size: 0.95rem; color: #555; line-height: 1.6; }



/* ---------------------------------------------------

   EXPANDABLE CONTENT RATING GUIDE (ACCORDION)

--------------------------------------------------- */

.content-guide-box { background: transparent; padding: 0; }

.guide-grid { 

    display: flex; 

    flex-direction: column; 

    max-width: 550px; 

    background: #ffffff; 

    border: 1px solid #eaeaea; 

    border-radius: 12px; 

    overflow: hidden; 

    box-shadow: 0 4px 12px rgba(0,0,0,0.03);

} 

.guide-row { 

    border-bottom: 1px solid #f0f0f0; 

    display: block;

    width: 100%;

}

.guide-row:last-child { border-bottom: none; }



/* FORCE ASTRA TO DROP ITS BUTTON STYLES */

.rt-container button.guide-row-header,

.rt-container div.guide-row-header { 

    display: flex !important; 

    align-items: center !important; 

    justify-content: space-between !important; 

    width: 100% !important; 

    box-sizing: border-box !important;

    padding: 18px 20px !important; 

    background-color: #ffffff !important; 

    background: #ffffff !important;

    border: none !important;

    text-align: left !important;

    margin: 0 !important;

    appearance: none !important; 

    outline: none !important; 

    box-shadow: none !important;

}



/* OVERRIDE THE ASTRA BLUE HOVER/CLICK */

.rt-container .guide-row.has-content button.guide-row-header:hover,

.rt-container .guide-row.has-content button.guide-row-header:focus,

.rt-container .guide-row.has-content button.guide-row-header:active { 

    background-color: #f4f5f7 !important; 

    background: #f4f5f7 !important;

    cursor: pointer !important;

    outline: none !important;

    box-shadow: none !important;

}



.rt-container .guide-header-left {

    display: flex !important;

    flex-direction: column !important;

    align-items: flex-start !important;

    gap: 12px !important; 

    flex: 1 1 auto !important; 

    min-width: 0;

}



.rt-container .guide-label { 

    font-weight: 700 !important; 

    color: #222 !important; 

    font-size: 0.95rem !important; 

    font-family: 'Montserrat', sans-serif !important;

    line-height: 1.2 !important;

    margin: 0 !important;

}



.rt-container .guide-header-right { 

    display: flex !important; 

    align-items: center !important; 

    justify-content: flex-end !important;

    padding-left: 20px;

    flex-shrink: 0 !important;

}



.rt-container .guide-chevron {

    width: 20px;

    height: 20px;

    color: #888;

    transition: transform 0.3s ease;

}

.rt-container .guide-row.is-open .guide-chevron {

    transform: rotate(90deg);

}



.rt-container .guide-row-content {

    display: grid;

    grid-template-rows: 0fr;

    transition: grid-template-rows 0.3s ease;

    background: #fafafa;

}

.rt-container .guide-row.is-open .guide-row-content {

    grid-template-rows: 1fr;

}

.rt-container .guide-row-inner {

    overflow: hidden;

    min-height: 0; 

    padding: 0 20px; 

}

.rt-container .guide-row-inner > *:first-child { margin-top: 15px; }

.rt-container .guide-row-inner > *:last-child { margin-bottom: 25px; }

.rt-container .guide-row-inner p { color: #555; font-size: 0.9rem; line-height: 1.6; margin: 0 0 10px 0; }



/* ---------------------------------------------------

   SMART COLORED BADGES (HIGH CONTRAST OVERRIDES)

--------------------------------------------------- */

.rt-container .guide-badge { 

    font-weight: 800 !important; 

    padding: 6px 12px !important; 

    border-radius: 6px !important; 

    font-size: 0.75rem !important; 

    font-family: 'Montserrat', sans-serif !important;

    text-transform: uppercase !important;

    letter-spacing: 0.5px !important;

    min-width: 100px !important;

    text-align: center !important;

    border: 1px solid transparent !important;

    white-space: nowrap !important; 

    display: inline-block !important;

    line-height: 1 !important;

}



/* Theme: Warnings (Violence, Profanity, Explicit) */

.rt-container .theme-warning.intensity-0 { background-color: #f1f5f9 !important; background: #f1f5f9 !important; color: #64748b !important; border-color: #e2e8f0 !important; } 

.rt-container .theme-warning.intensity-1 { background-color: #fef3c7 !important; background: #fef3c7 !important; color: #92400e !important; border-color: #fde68a !important; } 

.rt-container .theme-warning.intensity-2 { background-color: #f59e0b !important; background: #f59e0b !important; color: #ffffff !important; border-color: #d97706 !important; } 

.rt-container .theme-warning.intensity-3 { background-color: #ea580c !important; background: #ea580c !important; color: #ffffff !important; border-color: #c2410c !important; } 

.rt-container .theme-warning.intensity-4 { background-color: #dc2626 !important; background: #dc2626 !important; color: #ffffff !important; border-color: #b91c1c !important; } 

.rt-container .theme-warning.intensity-5 { background-color: #991b1b !important; background: #991b1b !important; color: #ffffff !important; border-color: #7f1d1d !important; } 



/* Theme: Faith (Christian Content) */

.rt-container .theme-faith.intensity-0 { background-color: #f1f5f9 !important; background: #f1f5f9 !important; color: #64748b !important; border-color: #e2e8f0 !important; }   

.rt-container .theme-faith.intensity-1 { background-color: #e0f2fe !important; background: #e0f2fe !important; color: #0369a1 !important; border-color: #bae6fd !important; }   

.rt-container .theme-faith.intensity-2 { background-color: #0ea5e9 !important; background: #0ea5e9 !important; color: #ffffff !important; border-color: #0284c7 !important; }   

.rt-container .theme-faith.intensity-3 { background-color: #0284c7 !important; background: #0284c7 !important; color: #ffffff !important; border-color: #0369a1 !important; }   

.rt-container .theme-faith.intensity-4 { background-color: #1d4ed8 !important; background: #1d4ed8 !important; color: #ffffff !important; border-color: #1e40af !important; }   

.rt-container .theme-faith.intensity-5 { background-color: #1e3a8a !important; background: #1e3a8a !important; color: #ffffff !important; border-color: #172554 !important; }   



/* ---------------------------------------------------

   CAST, VIDEOS, PHOTOS & REVIEWS

--------------------------------------------------- */

.cast-grid { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 20px; scrollbar-width: thin; scrollbar-color: #ddd transparent; }
.cast-card {
    flex: 0 0 160px; border-radius: 12px; overflow: hidden;
    position: relative; background: #111; cursor: pointer;
    box-shadow: 0 4px 16px rgba(0,0,0,0.15);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.cast-card:hover { transform: translateY(-6px); box-shadow: 0 12px 32px rgba(0,0,0,0.25); }
.cast-img { width: 100%; height: 220px; object-fit: cover; display: block; transition: filter 0.4s ease; }
.cast-card:hover .cast-img { filter: brightness(0.45); }
.cast-info {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 16px 12px;
    background: linear-gradient(0deg, rgba(0,0,0,0.92) 0%, rgba(0,0,0,0.5) 70%, transparent 100%);
    transform: translateY(8px); transition: transform 0.35s ease;
}
.cast-card:hover .cast-info { transform: translateY(0); }
.rt-container .cast-real-name { font-weight: 700; color: #fff; font-size: 0.88rem; margin-bottom: 2px; font-family: 'Montserrat', sans-serif; text-shadow: 0 1px 4px rgba(0,0,0,0.8); }
.rt-container .cast-role { font-size: 0.72rem; color: rgba(255,255,255,0.7); font-family: 'Montserrat', sans-serif; }
/* Cast Lightbox */
.cast-lightbox-overlay {
    display: none; position: fixed; inset: 0; z-index: 99999;
    background: rgba(0,0,0,0.88); align-items: center; justify-content: center;
    backdrop-filter: blur(8px);
}
.cast-lightbox-overlay.active { display: flex; animation: lbFadeIn 0.25s ease; }
@keyframes lbFadeIn { from { opacity: 0; } to { opacity: 1; } }
.cast-lightbox-inner {
    position: relative; max-width: 400px; width: 90%;
    border-radius: 16px; overflow: hidden;
    box-shadow: 0 30px 80px rgba(0,0,0,0.7);
    animation: lbSlideUp 0.3s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes lbSlideUp { from { transform: translateY(30px) scale(0.95); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
.cast-lightbox-img { width: 100%; display: block; max-height: 72vh; object-fit: cover; }
.cast-lightbox-info {
    position: absolute; bottom: 0; left: 0; right: 0; padding: 24px 20px;
    background: linear-gradient(0deg, rgba(0,0,0,0.95) 0%, transparent 100%);
}
.cast-lightbox-name { color: #fff; font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.3rem; margin: 0 0 4px; }
.cast-lightbox-role { color: rgba(255,255,255,0.65); font-family: 'Montserrat', sans-serif; font-size: 0.85rem; margin: 0; }
.cast-lightbox-close {
    position: absolute; top: 14px; right: 14px; width: 36px; height: 36px;
    background: rgba(0,0,0,0.6); border: 1px solid rgba(255,255,255,0.2);
    border-radius: 50%; color: #fff; font-size: 1.1rem;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: background 0.2s; backdrop-filter: blur(4px);
    font-family: sans-serif; line-height: 1;
}
.cast-lightbox-close:hover { background: rgba(255,255,255,0.25); }



.vid-grid { display: flex; gap: 15px; flex-wrap: wrap; }

.vid-card { width: 220px; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid #eaeaea; transition: transform 0.2s; cursor: pointer; }

.vid-card:hover { transform: translateY(-3px); border-color: #ccc; }

.vid-thumb { width: 100%; height: 124px; background-size: cover; background-position: center; position: relative; }

.vid-thumb::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 50%, rgba(0,0,0,0.8) 100%); }

.vid-play { position: absolute; bottom: 10px; left: 10px; width: 24px; height: 24px; fill: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); z-index: 2; }

.rt-container .vid-time { position: absolute; bottom: 10px; right: 10px; color: #fff; font-size: 0.75rem; font-weight: 600; background: rgba(0,0,0,0.8); padding: 3px 6px; border-radius: 4px; z-index: 2; font-family: 'Montserrat', sans-serif;}

.vid-info { padding: 12px; background: #fff; border-top: 1px solid #eaeaea; }

.rt-container .vid-card-title { font-size: 0.85rem; font-weight: 700; color: #111; line-height: 1.4; margin: 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }



.photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px; }

.photo-card { width: 100%; border-radius: 8px; overflow: hidden; position: relative; border: 1px solid #eaeaea; transition: transform 0.2s; aspect-ratio: 16/9; }

.photo-card:hover { transform: translateY(-3px); border-color: #ccc; }

.photo-img { width: 100%; height: 100%; object-fit: cover; display: block; }



.empty-review-msg { background: #fffafa; padding: 40px 20px; border-radius: 12px; text-align: center; border: 1px dashed #f5c2c4; margin-bottom: 20px; }

.empty-img-wrapper { display: inline-block; margin: 0 auto 15px auto; -webkit-mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%); mask-image: radial-gradient(ellipse at center, rgba(0,0,0,1) 30%, rgba(0,0,0,0) 70%); }

.empty-review-img { height: 220px; width: auto; max-width: 100%; display: block; object-fit: cover; }

.rt-container .empty-review-text { font-weight: 700; color: #e50914; font-size: 1.05rem; letter-spacing: 0.5px; }



.sub-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; margin-top: 40px; }

.sub-section-title { font-size: 1.3rem; font-weight: 800; margin: 0; color: #111; }



.comm-reviews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 20px; }

.comm-review-card { background: #fbfbfb; border: 1px solid #eaeaea; border-radius: 12px; padding: 25px; display: flex; flex-direction: column; }

.comm-review-header { display: flex; align-items: center; gap: 15px; margin-bottom: 15px; }

.rt-container .comm-user-avatar { width: 45px; height: 45px; border-radius: 50%; background: #e50914; color:#fff; display: flex; align-items:center; justify-content:center; font-weight:700; font-size: 1.2rem; font-family: 'Montserrat', sans-serif;}

.comm-user-info { display: flex; flex-direction: column; }

.rt-container .comm-user-name { font-weight: 700; color: #111; font-size: 0.95rem; }

.rt-container .comm-date { color: #888; font-size: 0.8rem; font-family: 'Montserrat', sans-serif; margin-top: 2px;}

.comm-stars { color: #ffc107; font-size: 1.1rem; margin-bottom: 12px; letter-spacing: 2px;}

.comm-body { color: #444; line-height: 1.6; font-size: 0.9rem; flex: 1; }



/* --- CRITICS REVIEWS (EDITORIAL GRADIENT PULL-QUOTE) --- */
.critics-slider-wrapper { position: relative; margin-bottom: 30px; display: flex; align-items: center; width: 100%; }
.critics-reviews-container {
    display: flex; overflow-x: auto; gap: 0; scroll-behavior: smooth;
    scrollbar-width: none; padding-bottom: 4px; width: 100%; align-items: stretch;
    scroll-snap-type: x mandatory;
}
.critics-reviews-container::-webkit-scrollbar { display: none; }
.critic-card {
    flex: 0 0 min(400px, 85vw); scroll-snap-align: start; margin-right: 20px;
    display: flex; flex-direction: column; position: relative;
    border-radius: 16px; overflow: hidden; min-height: 240px;
    background: linear-gradient(135deg, #1a1a2e 0%, #16213e 40%, #0f3460 80%, #1a1a2e 100%);
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: 0 8px 32px rgba(0,0,0,0.3);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.critic-card:hover { transform: translateY(-4px); box-shadow: 0 16px 48px rgba(0,0,0,0.4); }
.critic-card:nth-child(2) { background: linear-gradient(135deg, #1a0a2e 0%, #2d1b4e 40%, #6b2fa0 80%, #1a0a2e 100%); }
.critic-card:nth-child(3) { background: linear-gradient(135deg, #071a14 0%, #0d3330 40%, #0a5c4e 80%, #071a14 100%); }
.critic-card:nth-child(4) { background: linear-gradient(135deg, #1c1200 0%, #332200 40%, #7a5c00 80%, #1c1200 100%); }
.critic-card:nth-child(5) { background: linear-gradient(135deg, #1a0a0a 0%, #3d1515 40%, #8b1a1a 80%, #1a0a0a 100%); }
.critic-card:nth-child(6) { background: linear-gradient(135deg, #0a1505 0%, #162609 40%, #2d5a00 80%, #0a1505 100%); }
.critic-card::before {
    content: '\201C'; position: absolute; top: -20px; left: 14px;
    font-size: 13rem; line-height: 1; color: rgba(255,255,255,0.06);
    font-family: Georgia, serif; pointer-events: none; user-select: none;
}
.comm-review-header { display: flex; align-items: center; gap: 12px; padding: 22px 22px 0; }
.rt-container .comm-user-avatar {
    width: 40px; height: 40px; border-radius: 50%;
    background: rgba(255,255,255,0.15); color: #fff;
    display: flex; align-items: center; justify-content: center;
    font-weight: 800; font-size: 1rem; font-family: 'Montserrat', sans-serif;
    border: 1px solid rgba(255,255,255,0.2); flex-shrink: 0;
}
.comm-user-info { display: flex; flex-direction: column; }
.rt-container .comm-user-name { font-weight: 700; color: #fff; font-size: 0.88rem; }
.rt-container .comm-date { color: rgba(255,255,255,0.45); font-size: 0.72rem; font-family: 'Montserrat', sans-serif; margin-top: 2px; }
.comm-body { color: #444; line-height: 1.6; font-size: 0.9rem; flex: 1; }
.comm-body.critic-body {
    padding: 14px 22px 26px; color: rgba(255,255,255,0.85);
    font-size: 0.93rem; line-height: 1.75; font-style: italic;
    position: relative; z-index: 1;
}
.comm-body.critic-body p { margin: 0; }
.critics-scroll-btn {
    position: absolute; z-index: 10; width: 44px; height: 44px; border-radius: 50%;
    background: rgba(255,255,255,0.95); border: none; color: #111;
    font-size: 1.4rem; display: flex; align-items: center; justify-content: center;
    cursor: pointer; box-shadow: 0 4px 16px rgba(0,0,0,0.2); transition: all 0.2s;
}
.critics-scroll-btn:hover { background: #111; color: #fff; transform: scale(1.08); }
.critics-scroll-left { left: -22px; }
.critics-scroll-right { right: -22px; }



.my-rating-section { margin-top: 50px; border-top: 1px solid #eaeaea; padding-top: 30px; }

.review-box { padding: 35px; border: 1px solid #eaeaea; border-radius: 8px; background: #fff; }

.rt-container .review-title { margin: 0 0 5px 0; font-size: 1.2rem; font-weight: 800; color: #111; }

.star-rating-form { display: flex; flex-direction: row-reverse; justify-content: flex-end; gap: 5px; margin-bottom: 20px; }

.star-rating-form input { display: none; }

.star-rating-form label { font-size: 2.5rem; color: #eee; cursor: pointer; transition: color 0.2s; line-height: 1;}

.star-rating-form label:hover, .star-rating-form label:hover ~ label, .star-rating-form input:checked ~ label { color: #ffc107; }

.review-textarea { width: 100%; padding: 15px; border: 1px solid #ccc; border-radius: 8px; margin-bottom: 20px; font-family: 'Lora', serif; font-size: 1rem; color: #333; }

.review-textarea:focus { outline: none; border-color: #111; }

.rt-container .review-submit-btn { background: #e50914; color: #fff; border: none; padding: 12px 28px; font-weight: 700; border-radius: 30px; cursor: pointer; transition: background 0.2s; letter-spacing: 0.5px; font-size: 0.85rem;}

.rt-container .review-submit-btn:hover { background: #111; }

.rt-container .login-prompt { background: #f8f8f8; padding: 25px; text-align: center; border-radius: 8px; font-weight: 600; border: 1px solid #eaeaea; font-family: 'Montserrat', sans-serif;}



@media (max-width: 768px) {

    .guide-grid { max-width: 100%; }

    .vid-card { width: 100%; }

    .photo-grid { grid-template-columns: 1fr; }

    .yt-sort-container { flex-direction: column; align-items: flex-start; margin-top: 10px; }

    .critic-card { flex: 0 0 280px; }

    .critics-scroll-left { left: 0; }

    .critics-scroll-right { right: 0; }

}
/* ---------------------------------------------------
   YOUTUBE-STYLE COMMENTS
--------------------------------------------------- */
.yt-section-header { margin-bottom: 25px; border-bottom: none; align-items: center; }
.yt-sort-container { display: flex; align-items: center; gap: 8px; color: #111; font-weight: 600; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; cursor: pointer; margin-top: 10px; }
.yt-sort-container svg { width: 18px; height: 18px; }
.yt-sort-container select { border: none; background: transparent; font-weight: 600; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; cursor: pointer; outline: none; padding: 0; appearance: none; -moz-appearance: none; -webkit-appearance: none; }
.yt-sort-container select:focus { outline: none; }

.yt-comment-input-area { display: flex; gap: 16px; margin-bottom: 40px; }
.yt-comment-avatar { flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%; background: #e50914; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.1rem; font-family: 'Montserrat', sans-serif; }
.yt-comment-input-wrapper { flex: 1; }
.yt-review-textarea { width: 100%; border: none; border-bottom: 1px solid #ccc; padding: 4px 0; font-family: 'Lora', serif; font-size: 1rem; color: #111; resize: none; overflow: hidden; background: transparent; transition: border-color 0.2s; outline: none; line-height: 1.5; }
.yt-review-textarea:focus { border-bottom: 2px solid #111; padding-bottom: 3px; }
.yt-comment-tools { display: flex; flex-direction: column; gap: 15px; margin-top: 10px; }
.yt-comment-buttons { display: flex; justify-content: flex-end; gap: 10px; }
.yt-btn-cancel, .yt-btn-submit { border: none; padding: 10px 16px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.85rem; border-radius: 20px; cursor: pointer; transition: all 0.2s; }
.yt-btn-cancel { background: transparent; color: #111; }
.yt-btn-cancel:hover { background: #f0f0f0; }
.yt-btn-submit { background: #065fd4; color: #fff; }
.yt-btn-submit:hover { background: #0056b3; }
.yt-btn-submit:disabled { background: #f0f0f0; color: #aaa; cursor: default; }

.yt-rating-tags-wrapper { background: #f9f9f9; padding: 15px; border-radius: 8px; border: 1px solid #eaeaea; }
.yt-tags-title { font-size: 0.8rem; font-family: 'Montserrat', sans-serif; font-weight: 700; color: #555; margin: 0 0 10px 0; }

.yt-login-prompt { display: flex; align-items: center; gap: 10px; background: #f8f8f8; padding: 20px; border-radius: 8px; font-weight: 600; border: 1px solid #eaeaea; font-family: 'Montserrat', sans-serif; margin-bottom: 40px; color: #444; }
.yt-login-prompt svg { width: 24px; height: 24px; color: #e50914; }
.yt-login-prompt a { color: #065fd4; text-decoration: none; }

.yt-comments-container { display: flex; flex-direction: column; gap: 20px; }
.yt-comments-level { display: flex; flex-direction: column; gap: 20px; width: 100%; }
.yt-comment { display: flex; gap: 16px; }
.yt-comment-content { flex: 1; min-width: 0; padding-bottom: 10px; }
.yt-comment-header { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.yt-comment-author { font-family: 'Montserrat', sans-serif; font-weight: 700; font-size: 0.9rem; color: #111; }
.yt-comment-time { font-family: 'Montserrat', sans-serif; font-size: 0.75rem; color: #606060; }
.yt-comment-body { font-size: 0.95rem; color: #0f0f0f; line-height: 1.5; margin-bottom: 8px; word-break: break-word; }
.yt-comment-body p { margin: 0 0 10px 0; }
.yt-comment-body p:last-child { margin: 0; }

.yt-comment-actions { display: flex; align-items: center; gap: 15px; }
.yt-vote-btn { display: flex !important; align-items: center !important; gap: 6px !important; background: transparent !important; border: none !important; cursor: pointer !important; padding: 6px !important; border-radius: 50% !important; color: #0f0f0f !important; font-family: 'Montserrat', sans-serif !important; font-size: 0.8rem !important; transition: background 0.2s !important; }
.yt-vote-btn:hover { background: #f2f2f2 !important; height: auto !important; }
.yt-vote-btn svg { width: 16px; height: 16px; stroke-width: 2px; }
.yt-vote-btn.active svg { fill: #0f0f0f; }

.yt-reply-btn { background: transparent !important; border: none !important; font-family: 'Montserrat', sans-serif !important; font-weight: 600 !important; font-size: 0.75rem !important; color: #0f0f0f !important; cursor: pointer !important; padding: 6px 12px !important; border-radius: 16px !important; transition: background 0.2s !important; }
.yt-reply-btn:hover { background: #f2f2f2 !important; }

/* Indentation logic for replies */
.depth-1 { margin-top: 10px; margin-left: 56px; }
.depth-2 { margin-left: 36px; }
.depth-3 { margin-left: 36px; }
.depth-1 .yt-comment-avatar, .depth-2 .yt-comment-avatar, .depth-3 .yt-comment-avatar { width: 24px; height: 24px; flex: 0 0 24px; font-size: 0.75rem; }

.yt-inline-reply-container { margin-top: 15px; }

@media (max-width: 768px) {
    .depth-1 { margin-left: 15px; }
    .depth-2 { margin-left: 15px; }
    .depth-3 { margin-left: 15px; }
}

.yt-admin-liked { display: inline-flex; position: relative; margin-left: 8px; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 50%; background: #fff; cursor: help; }
.yt-admin-liked img, .yt-admin-liked-fallback { width: 14px; height: 14px; border-radius: 50%; }
.yt-admin-liked-fallback { background: #e50914; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 8px; font-weight: bold; font-family: 'Montserrat', sans-serif;}
.yt-admin-heart { position: absolute; bottom: -4px; right: -4px; width: 10px; height: 10px; }

.yt-pinned-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 0.75rem; color: #606060; font-family: 'Montserrat', sans-serif; font-weight: 600; margin-left: 8px;}
.yt-pinned-badge svg { width: 12px; height: 12px; }

.yt-pin-btn { background: transparent; border: none; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 0.75rem; color: #0f0f0f; cursor: pointer; padding: 6px 12px; border-radius: 16px; transition: background 0.2s; margin-left: auto;}
.yt-pin-btn:hover { background: #f2f2f2; }