/* ==========================================================================
   NerdyCMS Creator Theme — extracted from themes/public/vix/assets/styles.css
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800;900&display=swap');

/* --------------------------------------------------------------------------
   1. CSS Custom Properties — Dark / Light Mode
   -------------------------------------------------------------------------- */

html.theme-dark {
    --bkg:      #000;
    --text:     #eee;
    --textHigh: rgb(225, 3, 31);
    --textHalf: rgba(200, 200, 200, .5);
    --highHalf: rgba(255, 45, 30, .5);
    --bkgHalf:  rgba(0, 0, 0, .8);
    --bkgHigh:  #0E0E0E;
}

html.theme-light {
    --bkg:      #fefefe;
    --text:     #000;
    --textHigh: rgb(225, 3, 31);
    --textHalf: rgba(0, 0, 0, .8);
    --highHalf: rgba(255, 45, 30, .5);
    --bkgHalf:  rgba(200, 200, 200, .5);
    --bkgHigh:  #eEeEeE;
}

/* Hide dark/light specific elements based on current mode */
html.theme-light .dark-only,
html.theme-dark  .light-only { display: none; }

/* --------------------------------------------------------------------------
   2. Reset & Base
   -------------------------------------------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    background-color: var(--bkg);
    color:            var(--text);
    font-family:      'Poppins', Arial, sans-serif;
    overflow-x:       hidden;
    text-rendering:   optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    margin: 0;
}

a {
    text-decoration: none;
    color: var(--text);
}
a:hover {
    color: var(--textHalf);
    cursor: pointer;
}

h1 { color: var(--text); text-align: center; letter-spacing: 8px; }
h5 { letter-spacing: 3px; }

/* --------------------------------------------------------------------------
   3. Utility Classes
   -------------------------------------------------------------------------- */

.ucase       { text-transform: uppercase; }
.high-color  { color: var(--textHigh) !important; }
.high-bkg    { background-color: var(--textHigh); }
.text-color  { color: var(--text); }
.theme-bkg   { background-color: var(--bkg) !important; }
.nav-offset  { margin-top: 7rem; }
.disabled    { opacity: .3; }
.float-right { float: right; }
.text-right  { text-align: right; }

.error {
    background:    var(--textHigh);
    color:         var(--text);
    text-align:    center;
    border-radius: 5px;
    margin-bottom: 3px;
}

/* --------------------------------------------------------------------------
   3b. Video Cards
   -------------------------------------------------------------------------- */

.vid-card {
    border-radius: 8px;
    overflow: hidden;
    background: #111;
}
.vid-card-img {
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    display: block;
}
.vid-card-link:hover .vid-card-img {
    opacity: .85;
    transition: opacity .2s;
}
.vid-thumb-title {
    font-size: .82rem;
    font-weight: 500;
    color: var(--text);
    margin-top: .4rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.vid-play-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .2s;
    background: rgba(0,0,0,.35);
}
.vid-card:hover .vid-play-overlay { opacity: 1; }

/* --------------------------------------------------------------------------
   4. Buttons
   -------------------------------------------------------------------------- */

.btn-prim {
    background: var(--textHigh);
    color:      var(--text);
    border:     none;
    opacity:    .7;
    margin:     .25rem;
    padding:    0 .25rem;
}
.btn-prim:hover { opacity: 1; }

.btn-sec {
    background:    transparent;
    color:         var(--text);
    border:        solid 1px var(--textHalf);
    padding:       0 .25rem;
    margin:        .25rem;
}

.join,
.join-btn {
    color:         var(--text) !important;
    background:    var(--textHigh);
    font-size:     .85rem;
    padding:       .5rem 1rem;
    border-radius: 8px;
    border:        solid 1px var(--highHalf);
    text-transform: uppercase;
    cursor:        pointer;
}
.join:hover { opacity: .85; }

.hotbutton {
    color:         var(--text);
    background:    var(--textHigh);
    font-size:     1rem;
    padding:       .9rem 1.3rem;
    border-radius: 2rem;
    box-shadow:    0 0 25px 0 var(--textHigh), 0 20px 25px 0 rgba(0,0,0,.2);
    border:        solid 1px var(--highHalf);
    margin:        1rem .5rem;
    text-transform: uppercase;
    opacity:       .8;
}

/* --------------------------------------------------------------------------
   5. Navigation
   -------------------------------------------------------------------------- */

.navbar.links-container {
    transition: background .3s;
}
.navbar:not(.top-nav-collapse) {
    background: transparent !important;
}
.top-nav-collapse,
.links-container.scrolled {
    background: var(--bkg) !important;
    transition: 1s all;
}
.navbar-brand .logo-text {
    color:       var(--textHigh);
    font-weight: 800;
    font-size:   1.4rem;
}

/* Light mode navbar — override Bootstrap's navbar-dark white links */
html.theme-light .navbar .nav-link,
html.theme-light .navbar .navbar-brand,
html.theme-light .navbar .nbt {
    color: #111 !important;
}
html.theme-light .navbar .nav-link:hover {
    color: var(--textHigh) !important;
}
html.theme-light .navbar .nav-link.active {
    color: var(--textHigh) !important;
}
html.theme-light .navbar .navbar-toggler {
    border-color: rgba(0,0,0,.3);
}
html.theme-light .navbar .navbar-toggler-icon {
    filter: invert(1);
}
html.theme-light .navbar.scrolling-navbar:not(.top-nav-collapse) {
    background: rgba(255,255,255,.95) !important;
}

/* Nav layout — push Login/Get Access to far right */
@media (min-width: 992px) {
    #creatorNav {
        display: flex !important;
        align-items: center;
        width: 100%;
    }
    #creatorNav .right-nav {
        margin-left: auto !important;
    }
}

/* Mobile nav scaling */
@media (max-width: 768px) {
    .navbar:not(.top-nav-collapse) { background: var(--bkg) !important; }
    .navbar-brand { scale: .75; margin-right: -25%; transform: translateX(-25%); }
    .custom-nav   { scale: .75; margin-left: -25%; transform: translateX(12.5%); }
}
@media (min-width: 800px) and (max-width: 850px) {
    .navbar:not(.top-nav-collapse) { background: var(--bkg) !important; }
}

/* Right-side slide-out "More" menu */
.right-slider {
    position: fixed;
    top: 0; bottom: 0;
    left: 100vw;
    width: 15rem;
    background-color: var(--bkgHigh);
    z-index: 200;
    transition: .5s all;
}
.right-slider.in   { left: calc(100vw - 15rem); }
.right-slider a    { display: block; margin: .25rem .25rem .25rem 35px; }
.right-slider .close {
    background:  var(--textHigh);
    color:       #fff;
    float:       left;
    width:       30px; height: 30px;
    line-height: 30px;
    text-align:  center;
    cursor:      pointer;
}

.nbt { color: var(--text) !important; }

/* --------------------------------------------------------------------------
   6. Hero / Preview Banner
   -------------------------------------------------------------------------- */

.preview {
    height:   100vh;
    overflow: hidden;
    position: relative;
}
.preview video {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: center;
}
.preview .overlay {
    background-image: linear-gradient(
        transparent, transparent, transparent, transparent, transparent, var(--bkg)
    );
    position: absolute; inset: 0; z-index: 10;
}
.overlay {
    position: absolute; inset: 0; z-index: 10;
}
.video-overlay {
    position: absolute; inset: 0; z-index: 10;
}
.overlay-text {
    position:   absolute;
    bottom:     1.5rem; left: 1.5rem; right: 1.5rem;
    z-index:    20;
    text-align: center;
    font-size:  1.5rem !important;
}
.preview .overlay-text {
    bottom: 8rem;
}
.overlay-more {
    position:   absolute;
    bottom:     1rem; left: 1.5rem; right: 1.5rem;
    z-index:    20;
    text-align: center;
    transition: 1s;
}
.overlay-logo {
    position:  fixed;
    top:       2rem; left: 1.5rem;
    z-index:   20;
    font-size: 1.5rem;
}

/* --------------------------------------------------------------------------
   7. Video Grid / Cards
   -------------------------------------------------------------------------- */

.wrapper {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap:                   1rem;
    padding:               1rem;
}
.wrapper section {
    display:               contents;
}

.video-item,
.item {
    position:      relative;
    aspect-ratio:  16/9;
    overflow:      hidden;
    border-radius: 4px;
    display:       block;
    background:    var(--bkgHigh);
}
.video-item video,
.item video {
    width: 100%; height: 100%;
    object-fit: cover;
    position:   absolute; inset: 0;
}
.video-back {
    position:    absolute; inset: 0;
    background-size: cover;
    background-position: center;
}
.video-item:hover .overlay-text { opacity: 1; }
.video-item .overlay-text {
    background: linear-gradient(transparent, rgba(0,0,0,.6));
    opacity: .8;
    transition: .3s;
}

/* Section headings */
.vid-title {
    padding: 1rem 0 .5rem;
}
.title-breaker {
    width:  40px;
    height: 4px;
    background: var(--textHigh);
    margin-bottom: .5rem;
}
.title-name {
    font-size:      1.1rem;
    font-weight:    700;
    text-transform: uppercase;
    letter-spacing: 3px;
    color:          var(--text);
}

/* Gallery grid */
.gallery-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap:                   8px;
}
.gallery-grid img {
    width:         100%;
    aspect-ratio:  16/9;
    object-fit:    cover;
    border-radius: 4px;
    transition:    opacity .2s;
}
.gallery-grid img:hover { opacity: .85; cursor: pointer; }

/* Thumbnail hover video */
.hover-src     { opacity: 0; transition: opacity .5s; }
.video-item:hover .hover-src { opacity: 1; }

/* --------------------------------------------------------------------------
   8. Video Player Page
   -------------------------------------------------------------------------- */

.media-wrap {
    width:           100%;
    border-collapse: collapse;
}
#nd-main td { vertical-align: top; }
.nd-player-td {
    width:   100%;
    padding: 0;
}
.nd-player-wrap  { text-align: center; }
.nd-player-desktop {
    width:      280px;
    min-width:  280px;
    padding:    1rem .5rem;
    vertical-align: top;
}
@media (max-width: 900px) {
    .nd-player-desktop { display: none; }
}

/* --------------------------------------------------------------------------
   9. Footer
   -------------------------------------------------------------------------- */

footer.page-footer,
footer {
    background-color: #000 !important;
    color:            #eee;
    padding:          2rem 0 1rem;
    margin-top:       3rem;
}
footer a { color: #bbb; }
footer a:hover { color: var(--textHigh); }

.footer11 ul,
.footer12 ul {
    list-style: none;
    padding:    0;
    margin:     0;
    display:    flex;
    flex-wrap:  wrap;
    gap:        .5rem 1.5rem;
}
.footer11 ul li a,
.footer12 ul li a {
    font-size:      .85rem;
    text-transform: uppercase;
}

p.copyright {
    font-size: .75rem;
    color:     #666;
    margin:    .5rem 0;
}

.footer-img ul {
    list-style: none;
    padding:    0;
    display:    flex;
    gap:        .5rem;
}

.c2c-card { opacity: .7; }

/* --------------------------------------------------------------------------
   10. Age-Verification Content Blur  (§14)
   -------------------------------------------------------------------------- */

.content-blur {
    filter:         blur(20px);
    pointer-events: none;
    user-select:    none;
    position:       relative;
}
.content-blur-overlay {
    position:        absolute;
    inset:           0;
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    z-index:         10;
    background:      rgba(0, 0, 0, .3);
}

/* Site-wide blur class applied by age gate */
.blur *:not(.modal-backdrop, .modal, .widget, .modal *) {
    filter: blur(.5rem);
}

/* --------------------------------------------------------------------------
   11. Plyr Player Customization
   -------------------------------------------------------------------------- */

:root {
    --plyr-color-main:      var(--textHigh, #e1031f);
    --plyr-font-family:     'Poppins', Arial, sans-serif;
    --plyr-control-radius:  4px;
    --plyr-video-background: #000;
}

/* --------------------------------------------------------------------------
   12. Payment Method Icons
   -------------------------------------------------------------------------- */

.pay-meth {
    width:               140px;
    height:              70px;
    background-position: center;
    background-size:     cover;
    display:             inline-block;
    margin:              1rem;
    font-weight:         bold;
    padding:             1rem;
    opacity:             .5;
    transform:           scale(.75);
    cursor:              pointer;
    transition:          .2s;
}
.pay-meth:hover  { opacity: .75; transform: scale(.85); }
.meth-active     { opacity: 1 !important; transform: scale(1) !important; }

/* --------------------------------------------------------------------------
   13. Live Page
   -------------------------------------------------------------------------- */

.live-wrap {
    position:      relative;
    height:        calc(100vh - 4.5rem);
    border-radius: 2rem;
}
.live-video {
    position: absolute;
    width: 100%; height: 100%;
}
.live-video video { height: calc(100vh - 4.5rem); background: #000; }

/* --------------------------------------------------------------------------
   14. Misc / Widgets
   -------------------------------------------------------------------------- */

.with-sub { position: relative; }
.sub {
    display:          inline-block;
    position:         absolute;
    right:  -1px; bottom: -1px;
    background-color: var(--textHigh);
    color:            var(--text);
    width: 25px; height: 25px;
    border-radius: 12.5px;
    text-align:   center;
    line-height:  25px;
}

.galp-img { min-height: 90vh; width: 100%; }

select.filter {
    background: var(--textHigh);
    color:      var(--bkg);
    border:     none;
    padding:    .5rem;
}

.required            { border: solid 7px #f00 !important; }
.required::placeholder { color: #f00 !important; }

.cwrap { position: relative; padding: 0 !important; }
.cwrap video { width: 100%; }
.cwrap h1 {
    position:        absolute; inset: 0;
    text-align:      center;
    align-content:   center;
    justify-content: center;
    display:         flex;
}
.cwrap span { margin: auto; display: inline-flex; }

/* Back-to-top */
.back-to-top {
    position:      fixed;
    bottom:        2rem; right: 1.5rem;
    z-index:       100;
    opacity:       0;
    transition:    .4s;
}
.back-to-top.visible { opacity: 1; }

/* Search bar inside nav */
#creator-search {
    background:   transparent;
    border:       solid 1px var(--textHalf);
    border-radius: 3px;
    color:        var(--text);
    padding:      .25rem .5rem;
    font-size:    .9rem;
    outline:      none;
}
#creator-search:focus { border-color: var(--text); }

/* --------------------------------------------------------------------------
   15. Dark-mode toggle button
   -------------------------------------------------------------------------- */
.theme-toggle {
    background:  transparent;
    border:      none;
    color:       var(--text);
    cursor:      pointer;
    font-size:   1.1rem;
    padding:     .25rem .5rem;
}

/* --------------------------------------------------------------------------
   16. Responsive Helpers
   -------------------------------------------------------------------------- */

@media (max-width: 576px) {
    .wrapper { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: .5rem; }
    .title-name { font-size: .9rem; }
}