/*
Theme Name: VisuaI+
Theme URI: http://wptheming.com/2013/03/visual-theme/
Author: Devin Price
Author URI: http://wptheming.com
Description: Visual is a well-crafted responsive theme designed to showcase images, artwork and photgraphy in a smart grid layout.  An icon font ensures crisp display on retina devices and quick load times.  It's simple for new users to set up.  Developers can easily extend the code in a child theme.  For more information and a theme demo, visit: http://wptheming.com/?p=5277.
Version: 1.2.6
License: GNU General Public License
License URI: license.txt
Tags: responsive-layout, fluid-layout, featured-images, post-formats, translation-ready, photoblogging, theme-options, dark
Text Domain: mozi-code
Domain Path: /languages
This theme, like WordPress, is licensed under the GPL.
Have fun customizing it and sharing your work with others!
Originally built off the _s theme:
underscores.me
*/

/* ==================================================================
   2026 REFACTOR NOTES

   This file was reorganized top-to-bottom: same-selector rules that used
   to be declared twice (a leftover of the original 2013 light theme being
   re-skinned dark by appending overrides, rather than editing in place)
   are now merged into one declaration each. Media queries were reduced
   from 11 scattered breakpoints (470/490/600/600/767/767/790/790/790/
   950/1030) down to exactly two, standardized at 1024px and 768px --
   every rule that used to fire at one of the old values now fires at
   whichever of the two it's closest to in intent, so visual behavior is
   unchanged except in the 769-1024px band (see the mobile-nav comment
   further down for the one deliberate behavior change there).
   ================================================================== */

/* ------------------------------------------------------------------
   Design tokens: colors, spacing, radius, shadow, z-index.
   ------------------------------------------------------------------ */
:root {
    --accent-color: #40d7bc;
    --accent-color-alt: #3eb495;
    /* Text/icon color for anything sitting on top of an accent-color or
       accent-color-alt fill (buttons, badges, table headers). Dark mode's
       accent is a bright teal, so on-accent is dark; light mode's accent
       is a deep teal (see below), so on-accent flips to light. Never use
       this as a general-purpose text color -- only paired with an accent
       background, its contrast is only verified for that pairing. */
    --on-accent: #212121;
    /* Hover/press darken-tint used across nav links, list items, table rows,
       pagination. Dark mode default matches the theme's original pure-black
       hover (unchanged look); light mode uses a near-white tint instead of
       inverting to black, which would make text unreadable on a light page. */
    --hover-tint: #000000;
    --bg-page: #212121;
    --bg-surface: #313131;
    --bg-surface-alt: #292929;
    --border-color: #161616;
    --text-color: #eee;
    --text-bright: #fff;
    --text-muted: #ccc;
    --text-muted-2: #999;
    --text-muted-3: #666;
    --text-muted-4: #767676;
    --text-muted-5: #505050;
    --divider-color: #ddd;
    --divider-color-alt: #d5d5d5;
    --color-black: #000;
    --color-black-alt: #000000;
    --color-333: #333;
    --color-222: #222;
    --overlay-black-10: rgba(0,0,0,.1);
    --overlay-black-90: rgba(0,0,0,.9);
    --overlay-black-80: rgba(0,0,0,.8);
    --overlay-black-50: rgba(0,0,0,.5);
    --overlay-black-25: rgba(0,0,0,0.25);
    --overlay-black-05: rgba(0,0,0,.05);
    --overlay-black-35: rgba(0, 0, 0, 0.35);
    --overlay-white-69: #fff;
    --overlay-accent-30: rgba(64,215,188,.3);
    /* Form-field colors intentionally stay constant across dark/light mode --
       an input styled as a light "type here" field shouldn't invert. */
    --input-bg: #ffffff;
    --input-text: #333333;

    --space-xs: 4px;
    --space-sm: 8px;
    --space-md: 16px;
    --space-lg: 24px;
    --space-xl: 40px;
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 16px;
    --radius-pill: 999px;
    --shadow-sm: 0 1px 3px var(--overlay-black-10);
    --shadow-md: 0 6px 16px var(--overlay-black-25);
    --shadow-lg: 0 14px 34px var(--overlay-black-35);
    --z-dropdown: 200;
    --z-sticky: 400;
    --z-overlay: 9000;

    /* Multi-color badge/pill palette -- the same hue family used for the
       [data-accent] presets below, always available at once regardless of
       which single hue is the site's current brand accent. Kept constant
       across light/dark mode (like --brand-imdb-yellow already is) since
       these are small filled chips, not full-page surfaces; --on-badge-ink
       is verified >=4.5:1 on every one of them. */
    --badge-cyan: #22d3ee;
    --badge-violet: #a78bfa;
    --badge-rose: #fb7185;
    --badge-amber: #fbbf24;
    --badge-emerald: #34d399;
    --badge-indigo: #818cf8;
    --badge-magenta: #e879f9;
    --on-badge-ink: #16181d;

    --brand-facebook: #3B5998;
    --brand-twitter: #0F6FA8;
    --brand-imdb-yellow: #f5c518;
    --brand-netflix-red: #e50914;
    --color-rating-gold: #fbb829;

    /* ---- Grid density: posts-per-row on listing pages (see .masonry
       #content / .page-template-home-page-php #content further down).
       Change these three numbers to change how many cards show per row --
       nothing else needs to change. Suggested ranges: desktop 5-7,
       tablet 3-5, mobile 2-4. The @media blocks near the end of this
       file re-set --grid-cols for the tablet/mobile tiers. */
    --grid-cols: 6;
    --grid-gap: 12px;
}

/* Light mode: add data-theme="light" to <html> (or any ancestor) to switch.
   Accent shifts from a bright teal (reads well as text/icon color on the
   dark background) to a deep teal (needed to hit 4.5:1 as text/icon color
   on a light background, and for white button text on top of it) --
   verified: #007a6e on white = 5.24:1, white on #007a6e = 5.24:1. */
[data-theme="light"] {
    --accent-color: #007a6e;
    --accent-color-alt: #046358;
    --on-accent: #ffffff;
    --hover-tint: #f5f5f5;
    --bg-page: #f4f4f4;
    --bg-surface: #ffffff;
    --bg-surface-alt: #f0f0f0;
    --border-color: #e0e0e0;
    --text-color: #2b2b2b;
    --text-bright: #111111;
    --text-muted: #555555;
    --text-muted-2: #6b6b6b;
    --text-muted-3: #949494;
    --text-muted-4: #8a8a8a;
    --text-muted-5: #9a9a9a;
    --divider-color: #cccccc;
    --divider-color-alt: #d0d0d0;
}

/* ------------------------------------------------------------------
   Accent color presets. Independent of and combinable with data-theme:
   add data-accent="name" to <html> (or any ancestor) to switch the brand
   color; leave it off to keep the default teal. Every family below is
   verified >=4.5:1 as text/icon color in its mode and as white/dark text
   on its own fill, the same standard the default teal accent is held to.
   ------------------------------------------------------------------ */
[data-accent="cyan"]    { --accent-color: #22d3ee; --accent-color-alt: #10b6cf; --on-accent: #212121; }
[data-accent="violet"]  { --accent-color: #a78bfa; --accent-color-alt: #9c7cf9; --on-accent: #212121; }
[data-accent="rose"]    { --accent-color: #fb7185; --accent-color-alt: #fa4761; --on-accent: #212121; }
[data-accent="amber"]   { --accent-color: #fbbf24; --accent-color-alt: #e7a804; --on-accent: #212121; }
[data-accent="emerald"] { --accent-color: #34d399; --accent-color-alt: #28b883; --on-accent: #212121; }
[data-accent="indigo"]  { --accent-color: #818cf8; --accent-color-alt: #737ff7; --on-accent: #212121; }
[data-accent="magenta"] { --accent-color: #e879f9; --accent-color-alt: #e04bf7; --on-accent: #212121; }

[data-theme="light"][data-accent="cyan"]    { --accent-color: #0e7490; --accent-color-alt: #0b5d73; --on-accent: #ffffff; }
[data-theme="light"][data-accent="violet"]  { --accent-color: #6d28d9; --accent-color-alt: #571faf; --on-accent: #ffffff; }
[data-theme="light"][data-accent="rose"]    { --accent-color: #be123c; --accent-color-alt: #980e30; --on-accent: #ffffff; }
[data-theme="light"][data-accent="amber"]   { --accent-color: #b45309; --accent-color-alt: #904207; --on-accent: #ffffff; }
[data-theme="light"][data-accent="emerald"] { --accent-color: #047857; --accent-color-alt: #036046; --on-accent: #ffffff; }
[data-theme="light"][data-accent="indigo"]  { --accent-color: #4338ca; --accent-color-alt: #342ba3; --on-accent: #ffffff; }
[data-theme="light"][data-accent="magenta"] { --accent-color: #a21caf; --accent-color-alt: #82168c; --on-accent: #ffffff; }

/* ------------------------------------------------------------------
   Base reset (from the _s/underscores.me starter theme). Left as one
   contiguous block, unchanged, since it's not part of the base/dark
   duplication problem this refactor addresses.
   ------------------------------------------------------------------ */
::placeholder{
    color: var(--input-text);
    opacity: .6;
}
input:disabled, textarea:disabled, button:disabled, select:disabled,
input[disabled], textarea[disabled], button[disabled], select[disabled] {
    opacity: .5;
    cursor: not-allowed;
}
html {
    scrollbar-color: var(--accent-color-alt) var(--bg-surface-alt);
}
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}
::-webkit-scrollbar-track {
    background: var(--bg-surface-alt);
}
::-webkit-scrollbar-thumb {
    background: var(--accent-color-alt);
    border-radius: 5px;
}
::-webkit-scrollbar-thumb:hover {
    background: var(--accent-color);
}
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{
    border:0;
    font-family:inherit;
    font-size:100%;
    font-style:inherit;
    font-weight:inherit;
    margin:0;
    outline:0;
    padding:0;
    vertical-align:baseline
}
html{
    font-size:62.5%;
    overflow-y:scroll;
    -webkit-text-size-adjust:100%;
    -ms-text-size-adjust:100%
}
html,body{
    height:100%
}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{
    display:block
}
ol,ul{
    list-style:none
}
table{
    border-collapse:separate;
    border-spacing:0
}
caption,th,td{
    font-weight:400;
    text-align:left
}
blockquote:before,blockquote:after,q:before,q:after{
    content:""
}
blockquote,q{
    quotes:"" ""
}
a:focus{
    outline:thin dotted
}
a:hover,a:active{
    outline:0
}
a img{
    border:0
}
h1,h2,h3,h4,h5,h6{
    clear:both
}
hr{
    background-color:var(--text-muted);
    border:0;
    height:1px;
    margin-bottom:15px
}
p{
    margin-bottom:20px
}
ul,ol{
    margin:0 0 15px 3em
}
ul{
    list-style:disc
}
ol{
    list-style:decimal
}
ul ul,ol ol,ul ol,ol ul{
    margin-bottom:0;
    margin-left:15px
}
dt{
    font-weight:700
}
dd{
    margin:0 15px 15px
}
b,strong{
    font-weight:700
}
dfn,cite,em,i{
    font-style:italic
}
blockquote{
    margin:0 15px
}
address{
    margin:0 0 15px
}
code,kbd,tt,var{
    font-family:"courier 10 pitch",Courier,monospace;
    font-size:14px;
    font-size:1.4rem
}
abbr,acronym{
    border-bottom:1px dotted var(--text-muted-3);
    cursor:help
}
/* mark,ins: base color (#faf8cb, always-yellow highlight) was fully
   replaced by the dark-theme accent color -- merged to the one that's
   actually live. */
mark,ins{
    background:var(--accent-color);
    color:var(--on-accent);
    text-decoration:none
}
sup,sub{
    font-size:75%;
    height:0;
    line-height:0;
    position:relative;
    vertical-align:baseline
}
sup{
    bottom:1ex
}
sub{
    top:.5ex
}
small{
    font-size:75%
}
big{
    font-size:125%
}
figure{
    margin:0;
    padding:10px
}
th{
    font-weight:700
}
button,input,select,textarea{
    font-size:100%;
    margin:0;
    vertical-align:baseline;
    *vertical-align:middle
}
input,textarea{
    border:0
}
button,input{
    line-height:normal;
    *overflow:visible
}
input[type=checkbox],input[type=radio]{
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    padding:0
}
input[type=search]{
    -webkit-appearance:textfield;
    -moz-box-sizing:content-box;
    box-sizing:content-box
}
input[type=search]::-webkit-search-decoration{
    -webkit-appearance:none
}
button::-moz-focus-inner,input::-moz-focus-inner{
    border:0;
    padding:0
}
input[type=text],input[type=email],input[type=password]{
    padding:5px
}
textarea{
    overflow:auto;
    vertical-align:top;
    width:98%
}
.alignleft{
    display:inline;
    float:left;
    margin-right:15px
}
.alignright{
    display:inline;
    float:right;
    margin-left:15px
}
.aligncenter{
    clear:both;
    display:block;
    margin:0 auto
}
.assistive-text{
    clip:rect(1px 1px 1px 1px);
    clip:rect(1px,1px,1px,1px);
    position:absolute!important
}
.ir{
    background-color:transparent;
    border:0;
    overflow:hidden;
    *text-indent:-9999px
}
.ir:before{
    content:"";
    display:block;
    width:0;
    height:150%
}
.hidden{
    display:none!important;
    visibility:hidden
}
.visuallyhidden{
    border:0;
    clip:rect(0 0 0 0);
    height:1px;
    margin:-1px;
    overflow:hidden;
    padding:0;
    position:absolute;
    width:1px
}
.visuallyhidden.focusable:active,.visuallyhidden.focusable:focus{
    clip:auto;
    height:auto;
    margin:0;
    overflow:visible;
    position:static;
    width:auto
}
.invisible{
    visibility:hidden
}
.clearfix:before,.clearfix:after{
    content:" ";
    display:table
}
.clearfix:after{
    clear:both
}
.clearfix{
    *zoom:1
}
.clear{
    clear:both
}

/* ------------------------------------------------------------------
   Base typography, links, forms. (Merged with the dark-theme colors
   that used to be redeclared for these same selectors ~1000 lines
   further down the old file -- this is the block that actually renders
   today; nothing here changes what the site looks like.)
   ------------------------------------------------------------------ */
body,button,input,select,textarea{
    font-family:raleway,sans-serif;
    font-weight:400;
    font-size:14px;
    font-size:1.4rem;
    line-height:1.5
}
body{
    background:var(--bg-page);
    color:var(--text-color)
}
a{
    color:var(--accent-color);
    text-decoration:none;
    -webkit-transition:color .2s ease-out;
    transition:color .2s ease-out
}
a:visited{
    color:var(--accent-color)
}
a:hover,a:focus,a:active{
    color:var(--text-bright);
    text-decoration:underline
}
input[type=text],textarea{
    padding:5px;
    border-radius:3px;
    outline:0;
    background:var(--input-bg);
    color:var(--input-text);
    border:1px solid var(--bg-surface-alt);
    border-top:0;
    box-shadow:inset 0 1px 1px 1px var(--overlay-black-10)
}
input[type=submit],input[type=button],input[type=reset]{
    display:inline-block;
    padding:8px 25px;
    text-decoration:none;
    border-radius:3px;
    cursor:pointer;
    background:var(--bg-surface);
    background:linear-gradient(var(--bg-surface) 0%,var(--bg-page) 100%);
    color:var(--text-bright);
    border:0;
    border-bottom:2px solid var(--border-color)
}
button:active,input[type=button]:active,input[type=reset]:active{
    padding:7px 24px 8px;
    color:var(--color-333);
    background:var(--bg-page);
    background:linear-gradient(var(--bg-page) 0%,var(--bg-surface) 100%);
    border:0;
    border-top:2px solid var(--border-color)
}
pre{
    font-family:"courier 10 pitch",Courier,monospace;
    font-size:14px;
    font-size:1.4rem;
    padding:15px;
    overflow:auto;
    max-width:100%;
    margin-bottom:15px;
    border-radius:6px;
    border:1px solid var(--bg-surface-alt);
    border-top:0;
    box-shadow:inset 0 1px 1px 1px var(--overlay-black-10);
    background:var(--bg-surface-alt);
    color:var(--text-color)
}
body.rtl{
    direction:rtl;
    unicode-bidi:embed
}
/* No RTL nth-child margin override needed -- CSS Grid (see below) handles
   direction:rtl natively by reversing column flow, unlike the old
   float-based layout which needed manual per-column margin math. */

/* ------------------------------------------------------------------
   Page shell / sidebar layout.

   #primary/#secondary now use flexbox instead of the old float +
   negative-margin "holy grail" hack -- same visual result, easier to
   reason about. Whether #secondary renders at all (and which flex sizing
   #primary gets) is driven entirely by the has-sidebar/no-sidebar body
   class, which header.php sets from vpp_has_sidebar() in functions.php --
   the same function footer.php checks before calling get_sidebar(). To
   give a listing page a sidebar in the future: adjust vpp_has_sidebar(),
   nothing here needs to change.
   ------------------------------------------------------------------ */
body{
    height:100%
}
#page{
    min-height:100%;
    height:auto!important;
    height:100%;
    margin:0 auto -52px
}
#push{
    height:50px
}
.section{
    margin:0 auto;
    max-width:1020px;
    padding:0 5px
}
#main > .section{
    display:flex;
    flex-wrap:wrap;
    align-items:flex-start;
}
.video_player{ flex:1 1 100%; }
#primary{
    flex:1 1 100%;
    min-width:0;
    box-sizing:border-box
}
.has-sidebar #primary{
    flex:1 1 0%;
}
.has-sidebar #main > .section{
    column-gap:20px;
}
#secondary{
    flex:0 0 300px;
    width:300px;
    position:sticky;
    top:0
}
#masthead{
    background:var(--bg-surface);
    margin-bottom:5px;
    position:relative;
    box-shadow:0 1px 1px 1px var(--overlay-black-05)
}
#masthead .section{
    padding:0 10px;
    display:flex;
    align-items:center;
    flex-wrap:wrap;
    gap:4px
}
#masthead hgroup{
    margin:0;
    margin-right:auto;
    padding-left:0;
    min-height:40px
}
#masthead .image-logo{
    line-height:1
}
#masthead hgroup img{
    max-height:40px
}
.site-title{
    font-size:26px;
    font-size:2.6rem;
    word-break:break-all
}
.site-title a{
    letter-spacing:1px;
    color:var(--text-color);
    text-shadow:0 1px 1px var(--overlay-black-80)
}
.site-title a:hover{
    color:var(--accent-color);
    text-decoration:none
}
.custom_logo{
	font-family: Arial;
	font-size: 27.5px;
	font-weight: bold;
	text-decoration: none;
	text-transform: uppercase;
}
#site-title-h1{
    display:none
}
.sitename{
    color:var(--accent-color)
}

/* ------------------------------------------------------------------
   Main navigation (desktop). Mobile behavior lives in the @media
   blocks near the end of this file.
   ------------------------------------------------------------------ */
.main-navigation{
    display:block;
    float:right;
    order:1;
    border-right:1px solid var(--border-color)
}
.main-navigation ul{
    list-style:none;
    margin:0;
    padding-left:0
}
.main-navigation li{
    font-size:11px;
    font-size:1.1rem;
    letter-spacing:1px;
    text-transform:uppercase;
    float:left;
    position:relative;
    border-left:1px solid var(--border-color)
}
.main-navigation li:last-of-type a{
    border-right:1px solid var(--border-color)
}
.main-navigation a{
    display:block;
    text-decoration:none;
    padding:15px;
    color:var(--text-color)
}
.main-navigation li a:hover{
    border-color:var(--hover-tint);
    background:var(--hover-tint);
    color:var(--accent-color);
    border-radius:var(--radius-sm)
}
.main-navigation li:hover>a{
    border-color:var(--hover-tint);
    background:var(--hover-tint);
    border-radius:var(--radius-sm)
}
.main-navigation .menu-item-has-children > a{
    padding-right:40px
}
/* Dropdown chevron -- pure CSS (border corner rotated into a downward
   arrow), no icon font. */
.main-navigation .menu-item-has-children>a:after{
    content:'';
    display:block;
    width:6px;
    height:6px;
    border-style:solid;
    border-color:currentColor;
    border-width:0 2px 2px 0;
    position:absolute;
    right:20px;
    top:50%;
    transform:translateY(-50%) rotate(45deg)
}
.main-navigation .menu-item-has-children .menu-item-has-children a{
    padding:18px 20px
}
.main-navigation .menu-item-has-children .menu-item-has-children>a:after{
    content:none
}
.main-navigation ul ul{
    display:none;
    position:absolute;
    float:left;
    margin:0;
    z-index:99999;
    flex-wrap:wrap;
    top:auto;
    right:-1px;
    background:var(--bg-surface);
    border-radius:var(--radius-md);
    border-top:1px solid var(--border-color);
    border-left:1px solid var(--border-color);
    border-right:1px solid var(--border-color);
    box-shadow:var(--shadow-md);
    overflow:hidden
}
.main-navigation ul ul li{
    border:0;
    float:none;
    border-top:1px solid var(--border-color)
}
.main-navigation ul ul li a{
    border:0;
    padding:18px 20px;
    background:var(--bg-surface);
    border-bottom:1px solid var(--border-color)
}
.main-navigation ul ul li a:hover{
    background:var(--hover-tint);
    border-color:var(--border-color)
}
.main-navigation ul ul li:last-of-type a{
    border:0
}
.main-navigation ul li:hover>ul{
    display:flex
}
.main-navigation ul ul ul{
    display:block;
    position:relative;
    float:none;
    border-left:0;
    border-right:0;
    top:0;
    left:0;
    width:190px
}
.main-navigation ul ul ul li:last-of-type{
    border:0
}
.menu-toggle{
    cursor:pointer
}
.main-small-navigation .menu{
    display:none
}
.sub-menu{
	width:600px;
}
.sub-menu li{
    flex-basis: 50%;
}
.menu-genre > .sub-menu li {
    flex-basis: 33%;
}
.menu-release > .sub-menu li {
    flex-basis: 33%;
}
/* Mobile hamburger icon -- pure CSS (3 bars via .vpp-hamburger spans in
   header.php), no icon font. currentColor keeps it in sync with the
   link's own text color/hover state automatically. */
.vpp-hamburger{
    display:inline-block;
    position:relative;
    width:18px;
    height:2px;
    margin-right:8px;
    vertical-align:middle;
    background:currentColor;
}
.vpp-hamburger span{
    position:absolute;
    left:0;
    width:18px;
    height:2px;
    background:currentColor;
}
.vpp-hamburger span:first-child{ top:-6px; }
.vpp-hamburger span:last-child{ top:6px; }

/* ------------------------------------------------------------------
   Listing grid (archive/index/search/category/featured/home). Sidebar
   is controlled separately (see above) -- this only controls density.
   ------------------------------------------------------------------ */
.masonry #content, .page-template-home-page-php #content{
    display:grid;
    grid-template-columns:repeat(var(--grid-cols), 1fr);
    gap:var(--grid-gap);
}
.masonry .hentry, .page-template-home-page-php .hentry{
    margin:0;
}
.masonry .hentry img, .page-template-home-page-php .hentry img{
    display:block;
    width:100%;
    height:205px;
    object-fit:cover;
}
.masonry .hentry:hover, .page-template-home-page-php .hentry:hover{
    transform:translateY(-4px);
    box-shadow:var(--shadow-md)
}
.masonry .twitter-tweet, .page-template-home-page-php .twitter-tweet{
    padding-bottom:90px
}
.masonry .twitter-tweet-rendered, .page-template-home-page-php .twitter-tweet-rendered{
    padding-bottom:0
}
.masonry footer.entry-meta a, .page-template-home-page-php footer.entry-meta a{
    text-decoration:none;
    text-shadow:0 1px 1px var(--overlay-black-90)
}
.masonry footer.entry-meta a:hover, .page-template-home-page-php footer.entry-meta a:hover{
    text-decoration:none;
    color:var(--text-bright)
}
.hentry{
    margin:0 0 10px;
    border-radius:var(--radius-md);
    overflow:hidden;
    transition:transform .18s ease,box-shadow .18s ease;
    background:var(--bg-surface-alt);
    box-shadow:var(--shadow-sm);
    border:0
}
.post-link{
    float:right
}
.entry-title{
    font-size:14px;
    font-size:1.4rem;
}
.vs-thumbnail{
	text-overflow: ellipsis;
	overflow: hidden;
	white-space: nowrap;
}
.single-title{
    font-size:16px;
    font-size:1.6rem;
    font-weight:700;
    letter-spacing:.5px;
	text-transform:uppercase;
}

/* ---- Grid card additions layered on top of .hentry (content-thumbnail.php) */
.vpp-card-media{ position:relative; }
.vpp-card-media img{ object-fit:cover; }
.vpp-card-badges{
	position:absolute;
	top:8px;
	left:8px;
	right:8px;
	display:flex;
	justify-content:space-between;
	align-items:flex-start;
	gap:6px;
	pointer-events:none;
}
.vpp-card-badges .vpp-badge{ pointer-events:none; }
.vpp-card-play{
	position:absolute;
	inset:0;
	display:flex;
	align-items:center;
	justify-content:center;
	background:var(--overlay-black-25);
	opacity:0;
	transition:opacity .18s ease;
}
.vpp-card-play .vpp-icon{ width:44px; height:44px; color:var(--text-bright); filter:drop-shadow(0 2px 6px var(--overlay-black-50)); }
.masonry .hentry:hover .vpp-card-play, .page-template-home-page-php .hentry:hover .vpp-card-play{ opacity:1; }
.vpp-card-body{ padding:10px 12px 12px; }
.vpp-card-meta{ display:flex; flex-wrap:wrap; gap:6px; margin-top:6px; font-size:11px; color:var(--text-muted-2); }
.vpp-card-meta a{ color:var(--text-muted-2); text-decoration:none; }
.vpp-card-meta a:hover{ color:var(--accent-color); }

/* ------------------------------------------------------------------
   Post/page content typography, pagination.
   ------------------------------------------------------------------ */
.entry-header{
    padding:2px 0 2px 10px;
    border-bottom:1px solid var(--border-color)
}
.entry-meta{
    clear:both;
    font-size:13px;
    font-size:1.3rem
}
.entry-meta a{
    color:var(--divider-color)
}
.entry-content,.entry-summary{
    padding:10px;
    border-bottom:1px solid var(--border-color)
}
.entry-content h1,.entry-content h2,.entry-content h3,.entry-content h4,.entry-content h5,.entry-content h6{
    font-weight:700;
    margin-bottom:15px
}
.entry-content h1,.entry-content h2{
    font-size:18px;
    font-size:1.8rem;
    letter-spacing:.5px
}
.entry-content h3{
    font-size:16px;
    font-size:1.6rem
}
.entry-content h4,.entry-content h6{
    font-size:15px;
    font-size:1.5rem
}
footer.entry-meta{
    padding:15px;
    border-top:1px solid var(--color-333)
}
footer.entry-meta a{
    color:var(--text-muted)
}
footer.entry-meta a:hover{
    color:var(--accent-color)
}
footer.entry-meta .post-link a:hover{
    color:var(--accent-color)
}
.page-header{
    border-radius:3px;
    margin-bottom:10px;
    padding:10px;
    font-weight:700;
    background:var(--bg-page);
    border:1px solid var(--color-333);
    border-top:1px solid var(--bg-surface-alt);
    box-shadow:inset 0 1px 1px 1px var(--overlay-black-10)
}
.page-header .page-title{
    font-size:14px;
    font-size:1.4rem
}
.taxonomy-description p{
    margin:5px 0 0;
    font-size:14px;
    font-weight:400
}
.search-no-results .hentry{
    float:none;
    width:auto
}
.error404 .entry-content #searchform{
    margin-bottom:20px
}
.error404 .widget_recent_entries{
    border:0
}
.error404 .widget_recent_entries ul{
    list-style:none
}
#nav-below{
    clear:both;
    margin:0 0 5px;
    border-radius:3px;
    border:1px solid var(--bg-surface-alt);
    box-shadow:inset 0 1px 1px 1px var(--overlay-black-10)
}
#nav-below .nav-previous a,#nav-below .nav-next a{
    padding:10px 15px;
    float:left;
    background:var(--bg-surface) none repeat scroll 0 0
}
#nav-below a{
    color:var(--divider-color);
    text-decoration:none
}
#nav-below a:hover{
    color:var(--accent-color)
}
#nav-below .nav-next a{
    float:right
}
.page-links{
    clear:both;
    padding:10px 0
}
.page-links a{
    display:inline-block;
    padding:4px 10px;
    margin:0 5px;
    border-radius:3px;
    background:var(--bg-surface);
    text-decoration:none
}
.nav-previous{
    font-size:16px;
    margin:0 0 5px
}
.nav-next{
    font-size:16px;
    margin:5px 0 5px 5px
}
#wp_page_numbers ul,#wp_page_numbers li,#wp_page_numbers a{
    padding:0;
    margin:0;
    list-style:none;
    text-align:left;
    letter-spacing:0;
    word-spacing:0;
    font-size:14px
}
#wp_page_numbers{
    margin:5px 0 5px 5px;
    width:100%
}
#wp_page_numbers ul{
    width:100%
}
#wp_page_numbers li{
    float:left;
    display:block;
    margin:2px
}
#wp_page_numbers a{
    padding:6px 16px;
    display:block;
    border:1px solid var(--border-color);
    border-radius:var(--radius-pill);
    font-weight:600;
    transition:background .15s ease,border-color .15s ease,color .15s ease
}
#wp_page_numbers li a:hover{
    background:var(--accent-color);
    color:var(--on-accent);
    border-color:var(--accent-color)
}
#wp_page_numbers li.space{
    padding:6px;
    padding-left:2px;
    padding-right:2px
}
#wp_page_numbers li.first_last_page{
    font-style:italic
}
#wp_page_numbers li.active_page a{
    background:var(--accent-color);
    color:var(--on-accent);
    border-color:var(--accent-color)
}
#wp_page_numbers li.active_page a:hover{
    color:var(--on-accent)
}
#wp_page_numbers li.page_info{
    float:left;
    display:block;
    padding:6px 14px;
    margin-right:5px;
    border:1px solid var(--border-color);
    border-radius:var(--radius-pill);
    font-weight:700
}
/* ---- Load More / Infinite Scroll (visual_pagination() in functions.php,
   see VPP_PAGINATION_MODE). Only rendered instead of #wp_page_numbers when
   that constant is set to 'load_more' or 'infinite_scroll'. */
.vpp-loadmore-nav{
	display:flex;
	justify-content:center;
	padding:var(--space-lg) 0;
	clear:both;
}
.vpp-loadmore-link{
	min-width:180px;
}
.vpp-loadmore-link.is-loading{
	opacity:.7;
	pointer-events:none;
}
.vpp-loadmore-link .vpp-icon{
	transition:transform .15s ease;
}
.vpp-loadmore-link.is-loading .vpp-icon{
	animation:vpp-spin 1s infinite linear;
}
.vpp-loadmore-end{
	display:flex;
	align-items:center;
	gap:8px;
	margin:0;
	padding:12px 22px;
	border-radius:var(--radius-pill);
	background:var(--bg-surface-alt);
	border:1px solid var(--border-color);
	color:var(--text-muted-2);
	font-size:13px;
	font-weight:600;
}
.vpp-loadmore-end .vpp-icon{ color:var(--accent-color); width:15px; height:15px; }

/* ------------------------------------------------------------------
   Widgets / sidebar (#secondary).
   ------------------------------------------------------------------ */
.widget{
    border-radius:var(--radius-md);
    font-size:13px;
    font-size:1.3rem;
    margin:0 0 var(--space-md);
    padding:0 0 .5em;
    overflow:hidden;
    border:1px solid var(--text-color);
    background:0 0
}
#secondary .widget{
    background:var(--bg-surface-alt);
    box-shadow:var(--shadow-sm);
    border:0
}
.widget-title{
    display:flex;
    align-items:center;
    gap:6px;
    font-size:14px;
    font-size:1.4rem;
    font-weight:700;
    margin-bottom:5px;
    padding:12px 20px
}
#secondary .widget-title{
    border-bottom:1px solid var(--border-color);
    color:var(--accent-color-alt);
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:1px
}
.widget-title .vpp-icon{ color:var(--accent-color); width:15px; height:15px; }
.widget-area ul{
    list-style:none;
    margin:0 15px 0 20px
}
.widget-area li{
    line-height:1.5;
    padding:4px 0
}
.widget-area .tagcloud,.widget-area .textwidget,.widget-area select,.widget-area .recentcommentsavatar,.widget-area #subscribe-blog,.widget-area .milestone-content,.widget-area .widgets-multi-column-grid,.widget-area .widgets-grid-layout,.widget-area #pd_top_rated_holder,.widget_gravatar p,.widget_image img,.widget_goodreads embed,.widget_goodreads img,.widget-grofile .grofile-thumbnail,.widget-grofile h4,.widget-grofile p,.widget-grofile ul,.widget_facebook_likebox iframe{
    margin-left:20px;
    margin-right:20px
}
.widget-grid-view-image{
    max-width:43.5%!important
}
.widget_image img{
    max-width:87%
}
.widget select{
    max-width:100%
}
.widget_search #searchform{
    padding:20px 20px 0
}
.widget_search #s{
    max-width:65%
}
.widget_search input[type=submit]{
    max-width:30%;
    padding:3px 12px 4px
}
.widget_search input[type=submit]:active{
    margin-top:-1px;
    padding:4px 12px 3px;
    color:#f9f9f9
}
table#wp-calendar{
    margin:0 20px 10px;
    width:260px;
    max-width:88%
}
#wp-calendar td,#wp-calendar th{
    padding:5px 2px;
    text-align:center
}
#wp-calendar #prev{
    text-align:left
}
#wp-calendar #next{
    text-align:right
}
.sidebarads{
    text-align:center
}
ul.bycategories{
    margin:0;
    padding:0
}
ul.bycategories li{
    list-style:none;
    margin:0;
    padding:0
}
ul.bycategories li a{
    list-style:none;
    margin:3px;
    float:left;
    background:var(--bg-surface);
    padding:5px 10px
}
/* "Movies by Year" / "Popular Categories" sidebar widgets -- built on the
   shared .vpp-pill component (see "Buttons & pills" below) so they match
   every other pill in the theme (filter chips, genre chips, category
   slider). */
ul.top-links,
ul.top-links-cat{
    margin:0;
    padding:0;
    display:flex;
    flex-wrap:wrap;
    gap:var(--space-sm)
}
ul.top-links li,
ul.top-links-cat li{
    list-style:none;
    margin:0;
    padding:0
}
ul.collection li{
    transition-duration: 0.5s;
}
ul.collection li:hover {
    padding-left: 5px;
    transition-duration: 0.5s;
    font-weight: 800;
}
/* ---- Sidebar "recently added / most viewed / bollywood / hd" list cards */
.category-posts-internal{ margin:0 !important; padding:0 !important; }
.cat-post-item{
	display:flex;
	gap:10px;
	align-items:flex-start;
	padding:8px 14px;
	border-bottom:1px solid var(--border-color);
	list-style:none;
}
.cat-post-item:last-child{ border-bottom:0; }
.cat-post-item:hover{ background:var(--hover-tint); }
.cat-post-item .vpp-icon-play-circle{ color:var(--accent-color); flex:0 0 auto; margin-top:2px; }
.cat-post-item img.thumb{ flex:0 0 auto; height:66px; object-fit:cover; }
.cat-post-title{ font-weight:600; font-size:13px; display:block; margin-bottom:4px; }
.genre a, .genre{
    font-weight: 100;
    font-size: 12px;
	color: var(--text-muted);
}
.thumb{
	float:left;
	width:50px;
	margin: 5px;
	border-radius: var(--radius-sm);
}
.imdb{
	color: var(--color-rating-gold);
    font-weight: 700;
}
.admin-links a{
	border-bottom: 1px var(--text-muted-4) dotted;
	text-decoration:none;
	cursor:help;
}

/* ------------------------------------------------------------------
   Tables (torrent/download listing on single.php + generic tables).
   ------------------------------------------------------------------ */
table,td,th{
    border:1px solid var(--accent-color)
}
th,thead th{
    color:var(--on-accent);
    background:var(--accent-color);
    padding:5px 0
}
tbody td,td{
    padding:5px 0;
    font-weight:700;
    list-style:none;
    margin:5px;
    text-decoration:none;
    background:var(--bg-surface)
}
td a{
    padding:5px
}
td a:hover{
    background:var(--hover-tint)
}
.easy-table{
    border-collapse:separate;
    border-spacing:2px
}
#torrent-listing{
    border-collapse:collapse;
    border-spacing:0;
    border:1px solid var(--accent-color);
    margin-top:10px
}
#torrent-listing th,#torrent-listing td{
    border:1px solid var(--overlay-accent-30);
    padding:10px;
    font-weight:400;
    vertical-align:middle
}
#torrent-listing thead th{
    background:var(--accent-color);
    color:var(--on-accent);
    text-transform:uppercase;
    font-size:13px;
    letter-spacing:.5px
}
#torrent-listing .th-num,#torrent-listing .td-num{
    width:40px;
    text-align:center
}
#torrent-listing .th-links,#torrent-listing .td-links{
    width:110px;
    text-align:center;
    white-space:nowrap
}
#torrent-listing .torr-name{
    margin:0 0 6px;
    font-size:15px;
    font-weight:700;
    line-height:1.3
}
#torrent-listing .torr-name .badge{
    display:inline-flex;
    align-items:center;
    margin-left:6px;
    padding:2px 8px;
    border-radius:var(--radius-sm);
    background:var(--badge-amber);
    color:var(--on-badge-ink);
    font-size:12px;
    font-weight:700;
    vertical-align:middle
}
#torrent-listing .torr-meta{
    display:block;
    font-size:12px;
    font-weight:400;
    color:var(--text-muted-2);
    word-break:break-all
}
#torrent-listing tbody tr:nth-child(odd) td{
    background:var(--bg-surface-alt)
}
#torrent-listing tbody tr:hover td{
    background:var(--hover-tint)
}
#torrent-listing .td-links .button{
    display:inline-block;
    vertical-align:middle;
    margin:0 4px;
    padding:6px;
    border-radius:4px;
    background:var(--bg-surface);
    line-height:0;
    transition:background .15s ease
}
#torrent-listing .td-links .button:hover{
    background:var(--accent-color)
}
#torrent-listing .td-links .button .icon{
    display:block;
    height:20px;
    width:auto
}
/* ---- Shared table skin for the movie-links table (dt_player_display_in_post) */
.vpp-table-wrap{ border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); margin:var(--space-sm) 0; }
table.vpp-table{ width:100%; border-collapse:collapse; border:1px solid var(--overlay-accent-30); }
table.vpp-table th, table.vpp-table td{ border:1px solid var(--overlay-accent-30); padding:10px; font-weight:400; vertical-align:middle; text-align:center; }
table.vpp-table thead th{ background:var(--accent-color); color:var(--on-accent); text-transform:uppercase; font-size:12px; letter-spacing:.5px; font-weight:700; }
table.vpp-table tbody tr:nth-child(odd) td{ background:var(--bg-surface-alt); }
table.vpp-table tbody tr:hover td{ background:var(--hover-tint); }
table.vpp-table .vpp-table-links{ display:flex; gap:8px; justify-content:center; flex-wrap:wrap; }
table.vpp-table .vpp-table-links .vpp-btn{ padding:6px 16px; font-size:12px; }

/* ------------------------------------------------------------------
   Media / images.
   ------------------------------------------------------------------ */
.site-header img,.hentry img,.comment-content img,.widget img{
    max-width:100%;
    height:auto
}
.site-header img,.hentry img,.comment-content img[height],img[class*=align],img[class*=wp-image-]{
    height:auto
}
.site-header img,.hentry img{
    max-width:100%;
    width:auto
}
.entry-content img.wp-smiley,.comment-content img.wp-smiley{
    border:0;
    margin-bottom:0;
    margin-top:0;
    padding:0
}
/* Fixed-size override for images an editor manually marked as
   alignleft/alignright/alignnone/size-full inside post content -- left
   as-is (not audited further, flagged separately). */
img.alignleft,img.alignright,img.alignnone,img.size-full{
    width:140px;
    height:205px
}
.wp-caption{
    background:var(--bg-page);
    border:1px solid var(--color-333);
    margin-bottom:15px;
    max-width:100%
}
.wp-caption img[class*=wp-image-]{
    display:block;
    margin:1.2% auto 0;
    max-width:98%
}
.wp-caption-text{
    text-align:center
}
.wp-caption .wp-caption-text{
    margin:5px 0
}
.site-content .gallery{
    margin-bottom:15px
}
.gallery-caption{
    font-size:13px;
    font-size:1.3rem
}
.site-content .gallery a img{
    border:0;
    height:auto;
    max-width:90%
}
.site-content .gallery dt{
    border:0;
    margin:0;
    padding:0
}
.site-content .gallery dd{
    margin:0
}
embed,iframe,object{
    max-width:100%
}

/* ------------------------------------------------------------------
   Search: icon trigger + full-screen overlay + live suggestions.
   ------------------------------------------------------------------ */
.top-search,.box{
    background:none repeat scroll 0 0 var(--bg-surface-alt);
    border:0;
    box-shadow:0 1px 1px 1px var(--overlay-black-10);
    margin-bottom:5px;
    padding:7px
}
.top-search form{
    background:none repeat scroll 0 0 var(--bg-page);
    padding-right:70px;
    position:relative
}
.top-search #s{
    border:0!important;
    box-shadow:none!important;
    width:100%
}
.top-search .submit{
    float:right;
    font-size:14px;
    padding:2px 20px;
    position:absolute;
    right:2px;
    top:2px
}
.submit:hover{
    background:var(--hover-tint)
}
.required{
    color:red
}
/* ---- Search icon trigger (part of the nav bar rhythm) + full-screen overlay */
.vpp-search-toggle{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	padding:15px 16px;
	margin:0;
	border:0;
	border-radius:0;
	background:transparent;
	color:var(--text-color);
	cursor:pointer;
	order:2;
	flex:0 0 auto;
	transition:background .15s ease,color .15s ease;
}
.vpp-search-toggle:hover{ background:var(--hover-tint); color:var(--accent-color); }
.vpp-search-toggle .vpp-icon{ width:16px; height:16px; }

.top-search.vpp-search-overlay{
	position:fixed;
	inset:0;
	z-index:var(--z-overlay);
	background:var(--overlay-black-90);
	display:flex;
	align-items:flex-start;
	justify-content:center;
	padding:12vh var(--space-md) var(--space-md);
	box-shadow:none;
	margin:0;
	opacity:0;
	visibility:hidden;
	pointer-events:none;
	transition:opacity .18s ease;
}
.top-search.vpp-search-overlay.is-open{ opacity:1; visibility:visible; pointer-events:auto; }
.top-search.vpp-search-overlay form{
	background:var(--bg-surface);
	border-radius:var(--radius-lg);
	box-shadow:var(--shadow-lg);
	width:100%;
	max-width:640px;
	padding:10px 60px 10px 20px;
	position:relative;
}
.top-search.vpp-search-overlay #s{
	background:transparent;
	color:var(--text-bright);
	font-size:18px;
	padding:14px 0;
}
.top-search.vpp-search-overlay #s::placeholder{
	color:var(--text-muted-2);
	opacity:1;
}
.top-search.vpp-search-overlay .submit{
	top:10px;
	right:10px;
	border-radius:var(--radius-pill);
	padding:8px 18px;
}
.vpp-search-close{
	position:absolute;
	top:-46px;
	right:0;
	width:36px;
	height:36px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:var(--radius-pill);
	background:var(--bg-surface-alt);
	color:var(--text-bright);
	border:0;
	cursor:pointer;
}
.vpp-search-close .vpp-icon{ width:16px; height:16px; }
.top-search.vpp-search-overlay .suggestions{ position:static; top:auto; margin-top:10px; border-radius:var(--radius-md); overflow:hidden; }

.search-form-container{margin: 0 auto;}
.home #content form{
	text-align: center;
	padding:50px;
}
.home #content form input[type=submit]{
	padding: 10px 20px;
}
.home #content form input[type=search]{
	width: 60%;
	padding: 10px;
}
.suggestions{
    position: absolute;
    top: 42px;
    overflow: hidden;
    width: 100%;
    z-index: 100;
}
.suggestions .item {
    clear: both;
	display:flow-root;
	background: var(--bg-surface-alt);
}
.suggestions .item:nth-child(2n){
	background:var(--bg-surface);
}
.suggestions p {
    background: var(--bg-surface);
    padding: 20px;
}
#spinner{
	display:none;
	float: right;
	position: absolute;
	right: 95px;
	top: 10px;
}
.item .info{
	font-weight:100;
    text-align: left;
}
#main form .suggestions .more a {
    display: block;
    margin: 0 auto;
    padding: 5px 0;
    width: 75%;
    font-size: 1.1em;
    background: var(--accent-color);
    color: var(--on-accent);
    letter-spacing: 1.6px;
    text-transform: uppercase;
    font-weight: 400;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
	text-align:center;
}
/* ---- Filter bar (search.php) */
.vpp-filter-bar{
	display:flex;
	flex-wrap:wrap;
	gap:var(--space-sm);
	align-items:center;
	background:var(--bg-surface-alt);
	border:1px solid var(--border-color);
	border-radius:var(--radius-md);
	padding:var(--space-md);
	margin:0 0 var(--space-md);
}
.vpp-filter-bar select{
	background:var(--input-bg);
	color:var(--input-text);
	border:1px solid var(--border-color);
	border-radius:var(--radius-sm);
	padding:8px 10px;
	font-size:13px;
}
.vpp-filter-bar .vpp-icon{ width:16px; height:16px; color:var(--accent-color); }
.vpp-filter-bar-label{ display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; text-transform:uppercase; letter-spacing:.5px; color:var(--text-muted-2); }
/* ---- Category pills + slider (homepage) */
.vpp-cat-pill{
	display:inline-flex;
	align-items:center;
	gap:8px;
	padding:9px 16px;
	border-radius:var(--radius-pill);
	background:var(--bg-surface-alt);
	border:1px solid var(--border-color);
	color:var(--text-color);
	font-size:13px;
	font-weight:700;
	text-decoration:none;
	white-space:nowrap;
	transition:background .15s ease,color .15s ease,border-color .15s ease;
}
.vpp-cat-pill:hover{ background:var(--accent-color); color:var(--on-accent); border-color:var(--accent-color); text-decoration:none; }
.vpp-cat-pill .vpp-icon{ width:14px; height:14px; }
.vpp-cat-pill:nth-of-type(6n+1) .vpp-icon{ color:var(--badge-cyan); }
.vpp-cat-pill:nth-of-type(6n+2) .vpp-icon{ color:var(--badge-violet); }
.vpp-cat-pill:nth-of-type(6n+3) .vpp-icon{ color:var(--badge-rose); }
.vpp-cat-pill:nth-of-type(6n+4) .vpp-icon{ color:var(--badge-amber); }
.vpp-cat-pill:nth-of-type(6n+5) .vpp-icon{ color:var(--badge-emerald); }
.vpp-cat-pill:nth-of-type(6n+6) .vpp-icon{ color:var(--badge-indigo); }
.vpp-cat-pill:hover .vpp-icon{ color:var(--on-accent); }

/* ------------------------------------------------------------------
   Video player (single.php, via inc/player.php).
   ------------------------------------------------------------------ */
.video_player{
    width:100%;
    aspect-ratio:16/9;
    background-color:var(--color-black);
    margin:0 0 var(--space-md);
    border-radius:var(--radius-lg);
    overflow:hidden;
    box-shadow:var(--shadow-lg)
}
/* Fixed HTML width/height attributes (680x400) on the #video_player iframe
   would otherwise ignore the responsive aspect-ratio box above on narrow
   screens -- force it to fill that box instead. */
#video_player{
    display:block;
    width:100%;
    height:100%;
    border:0
}
.video_player_thumb{
    width:100%;
    height:100%;
    position:inherit;
    background:var(--color-black) no-repeat 50% 50%;
    margin:0 auto;
    display:block;
    background-size:cover
}
.video_player_thumb a{
    text-decoration:none
}
.video_player_thumb a:hover{
    text-decoration:none
}
.play_action{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:100%;
    text-decoration:none;
    opacity:.8
}
.play_action .vpp-icon-play{
    width:100px;
    height:100px;
    color:var(--accent-color);
    text-decoration:none
}
.play_action:hover>.vpp-icon-play{
    color:var(--accent-color);
    filter:drop-shadow(0 1px 2px var(--overlay-black-50));
    cursor:pointer;
    text-decoration:none
}
.below_player{
    padding:2px;
    font-size:12px;
    color:var(--text-bright);
    background-color:var(--bg-surface-alt)
}
.vpp-icon-play:hover{
    opacity:1
}
.play-pause{
    margin:0 0 5px;
    text-align:center
}

/* ------------------------------------------------------------------
   Movie meta: badges, keywords, poster/info layout, bottom-text banner.
   ------------------------------------------------------------------ */
.post-meta{
    padding:5px 0 5px 10px;
    font-family:droid sans,Arial,Verdana,sans-serif;
    font-weight:700
}
.vcard{
    margin:0 5px 0 3px
}
.post-date.updated{
    margin:0 0 0 3px
}
.post-views{
    margin:0 10px 0 5px
}
.no-of-comments{
    margin:0 10px 0 5px
}
.vpp-icon-user{
    margin:0 0 0 5px
}
.vpp-icon-calendar{
    margin:0 0 0 5px
}
.info{ // copyright info
    font-weight:700;
    margin:5px 5px 0 10px
}
.qmargin{
	margin-bottom: 12px
}
.moviemeta p{
	margin-bottom:10px;
}
.ofont{
	font-size:14px;
}
.tslug{
    line-height: 5px;
    text-transform: capitalize;
}
.meta{
	font-size:10px;
	display:flow-root;
}
.meta a{
	font-style:italic;
	color: var(--divider-color-alt);
	font-size:9px;
}
.subhead>span.imdb i {
	color: var(--color-rating-gold);
    font-weight: 800;
    font-style: normal
}
.watch {
	background: var(--accent-color);
	color: var(--on-accent);
    display: block;
    position: absolute;
    bottom: 0px;
    width: 100%;
    left: 0;
	padding-top: 5px;
    padding-bottom: 5px;
}
.watch a {
	text-decoration: none;
    font-size: 0.7em;
	color: inherit;
}
.overlay {
    display:none;
}
.featured{
	background:var(--bg-surface-alt);
}
/* ---- Badges (small filled chips: rating, quality, featured, HD, views) */
.vpp-badge{
	display:inline-flex;
	align-items:center;
	gap:4px;
	padding:3px 8px;
	border-radius:var(--radius-sm);
	font-size:11px;
	font-weight:700;
	letter-spacing:.3px;
	text-transform:uppercase;
	line-height:1.5;
	white-space:nowrap;
}
.vpp-badge .vpp-icon{ width:11px; height:11px; }
.vpp-badge-accent{ background:var(--accent-color); color:var(--on-accent); }
.vpp-badge-featured{ background:var(--badge-rose); color:var(--on-badge-ink); }
.vpp-badge-rating{ background:var(--color-rating-gold); color:var(--on-badge-ink); }
.vpp-badge-hd{ background:var(--badge-cyan); color:var(--on-badge-ink); }
.vpp-badge-quality{ background:var(--badge-amber); color:var(--on-badge-ink); }
.vpp-badge-genre{ background:var(--badge-violet); color:var(--on-badge-ink); }
.vpp-badge-new{ background:var(--badge-emerald); color:var(--on-badge-ink); }
.vpp-badge-views{ background:var(--badge-indigo); color:var(--on-badge-ink); }
.vpp-badge-imdb{ background:var(--brand-imdb-yellow); color:var(--color-black-alt); }
/* .featured-badge / .imdb-badge superseded by .vpp-badge; kept as thin
   aliases so any markup still using the old class names doesn't go
   unstyled. */
.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    background: var(--badge-rose);
    color: var(--on-badge-ink);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
}
span.featured-badge a {
    color: inherit;
	text-decoration: none;
}
.imdb-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: var(--brand-imdb-yellow);
    color: var(--color-black-alt);
    font-weight: 700;
    font-size: 12px;
    padding: 2px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    margin-left: 4px;
}
.imdb-badge:hover {
    color: var(--color-black-alt);
    opacity: 0.85;
}
.keywords {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
    align-items: center;
}
.keywords a {
    display: inline-flex;
    align-items: center;
    background: var(--bg-surface-alt);
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 4px 10px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.keywords a:hover {
    background: var(--accent-color);
    color: var(--on-accent);
    border-color: var(--accent-color);
}
/* ------------------------------------------------------------------
   Poster-left / Info-right movie layout (single.php): poster sits to
   the left, all the movie info sits to the right -- never below (on
   desktop; stacks on mobile, see @media block below).
   ------------------------------------------------------------------ */
.vpp-movie-layout {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin: 15px 0;
	clear: both;
}
.vpp-poster-col {
	position: relative;
	flex: 0 0 200px;
	max-width: 200px;
}
.vpp-poster-img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 8px;
	box-shadow: 0 2px 10px var(--overlay-black-35);
}
.vpp-info-col {
	flex: 1 1 auto;
	min-width: 0;
}
.vpp-info-col p {
	margin: 0 0 10px;
}
.vpp-info-col p > strong{
	color: var(--accent-color);
}
/* Release / Language / Total Seasons / Episodes values - match the
   teal/green accent color already used for Country, Genre, Actor,
   Director link values. */
.vpp-info-col .vpp-meta-value {
	color: var(--accent-color-alt) !important;
}
/* ---- Author/date/views meta row (single.php) */
.vpp-meta-row{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:14px;
	padding:var(--space-sm) 0;
	font-size:12px;
	color:var(--text-muted-2);
}
.vpp-meta-row .vpp-meta-item{ display:inline-flex; align-items:center; gap:5px; }
.vpp-meta-row .vpp-icon{ width:13px; height:13px; color:var(--accent-color); }
/* ------------------------------------------------------------------
   Bottom Text (Avada-style): solid red, rounded, bold-white banner
   shown across the bottom of a poster when the "Bottom Text" field is
   filled in on the Movie Info metabox (or, if empty, the fetched
   Language is used instead).
   ------------------------------------------------------------------ */
.vpp-bottom-text {
	font-family: inherit;
	text-align: center;
	position: absolute;
	bottom: 6px;
	left: 6px;
	right: 6px;
	width: auto;
	font-size: 0.72rem;
	line-height: 1.3;
	padding: 4px 6px;
	background: var(--brand-netflix-red);
	color: var(--text-bright);
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	margin: 0;
	pointer-events: none;
	z-index: 5;
	box-sizing: border-box;
	border-radius: 6px;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* ------------------------------------------------------------------
   Buttons, pills, section headings, sliders (shared component library).
   ------------------------------------------------------------------ */
.vpp-pill{
	display:inline-flex;
	align-items:center;
	gap:6px;
	padding:7px 14px;
	border-radius:var(--radius-pill);
	background:var(--bg-surface-alt);
	border:1px solid var(--border-color);
	color:var(--text-color);
	font-size:12px;
	font-weight:600;
	text-decoration:none;
	white-space:nowrap;
	transition:background .15s ease,border-color .15s ease,color .15s ease,transform .15s ease;
    margin: 5px 0px;
}
.vpp-pill:hover{
	background:var(--accent-color);
	color:var(--on-accent);
	border-color:var(--accent-color);
	text-decoration:none;
	transform:translateY(-1px);
}
.vpp-pill.is-active{
	background:var(--accent-color);
	color:var(--on-accent);
	border-color:var(--accent-color);
}
.vpp-pill .vpp-icon{ width:13px; height:13px; }
.vpp-btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	padding:11px 22px;
	border-radius:var(--radius-pill);
	border:0;
	cursor:pointer;
	font-size:14px;
	font-weight:700;
	text-decoration:none;
	background:var(--accent-color);
	color:var(--on-accent);
	transition:background .15s ease,transform .15s ease;
}
.vpp-btn:hover{ background:var(--accent-color-alt); color:var(--on-accent); text-decoration:none; transform:translateY(-1px); }
.vpp-btn .vpp-icon{ width:16px; height:16px; }
.vpp-btn-ghost{
	background:transparent;
	color:var(--text-color);
	border:1px solid var(--border-color);
}
.vpp-btn-ghost:hover{ background:var(--bg-surface-alt); color:var(--accent-color); border-color:var(--accent-color); }
.vpp-btn-sm{ padding:7px 14px; font-size:12px; }
.vpp-btn:disabled{ opacity:.6; cursor:not-allowed; transform:none; }
a.goto-hp {
    background: var(--accent-color-alt);
    color: var(--on-accent);
    padding: 10px 0px;
    width: 60%;
    display: block;
    margin: -30px 0;
}
a.hd-links {width: 49.5%;float: left;padding: 5px 0px;text-align: center;margin: 5px 0px;font-size: 14px;font-weight: bold;color: var(--on-accent);border-radius: 0px;text-decoration: none;}
.l-hd-links {display: flex;justify-content: space-between;}
.padding-sm {padding: 6px;}
.hd-links {background: var(--accent-color-alt);}
/* ---- Section headings (Related Movies / Franchise / Featured / FAQ) */
.vpp-section{ clear:both; margin:var(--space-lg) 0 var(--space-md); }
.vpp-section-title{
	display:flex;
	align-items:center;
	gap:8px;
	font-size:16px;
	font-weight:800;
	letter-spacing:.3px;
	color:var(--text-bright);
	margin:0 0 var(--space-md);
	padding-bottom:10px;
	border-bottom:2px solid var(--accent-color);
}
.vpp-section-title .vpp-icon{ width:18px; height:18px; color:var(--accent-color); }
/* ---- Horizontal card slider (Related / Franchise / Featured / Categories) */
.vpp-slider{
	display:flex;
	gap:var(--space-md);
	overflow-x:auto;
	scroll-snap-type:x proximity;
	padding-bottom:var(--space-sm);
	scrollbar-width:thin;
}
.vpp-slider > *{ scroll-snap-align:start; flex:0 0 auto; }
.vpp-slider-wrap{
	position:relative;
}
.vpp-slider-wrap .vpp-slider{
	scroll-behavior:smooth;
}
.vpp-slider-prev,
.vpp-slider-next{
	display:flex;
	align-items:center;
	justify-content:center;
	position:absolute;
	top:50%;
	transform:translateY(-50%);
	width:34px;
	height:34px;
	border-radius:var(--radius-pill);
	border:1px solid var(--border-color);
	background:var(--bg-surface);
	color:var(--text-color);
	box-shadow:var(--shadow-sm);
	cursor:pointer;
	z-index:2;
	opacity:.85;
	transition:opacity .15s ease,background .15s ease,color .15s ease;
}
.vpp-slider-wrap:hover .vpp-slider-prev,
.vpp-slider-wrap:hover .vpp-slider-next{ opacity:1; }
.vpp-slider-prev:hover,
.vpp-slider-next:hover{ background:var(--accent-color); color:var(--on-accent); border-color:var(--accent-color); }
.vpp-slider-prev{ left:-14px; }
.vpp-slider-next{ right:-14px; }
.vpp-slider-prev .vpp-icon,
.vpp-slider-next .vpp-icon{ width:16px; height:16px; }
/* ---- Mini poster card, used inside the sliders above */
.vpp-mini-card{
	width:130px;
	text-decoration:none;
	color:var(--text-color);
	display:block;
}
.vpp-mini-card-media{
	position:relative;
	border-radius:var(--radius-md);
	overflow:hidden;
	box-shadow:var(--shadow-sm);
	background:var(--bg-surface-alt);
	transition:transform .18s ease,box-shadow .18s ease;
}
.vpp-mini-card:hover .vpp-mini-card-media{ transform:translateY(-3px); box-shadow:var(--shadow-md); }
.vpp-mini-card-media img{ display:block; width:100%; height:195px; object-fit:cover; }
.vpp-mini-card-badges{ position:absolute; top:6px; left:6px; right:6px; display:flex; justify-content:space-between; gap:4px; }
.vpp-mini-card-title{
	margin-top:6px;
	font-size:12px;
	font-weight:700;
	line-height:1.3;
	color:var(--text-color);
	overflow:hidden;
	text-overflow:ellipsis;
	display:-webkit-box;
	-webkit-line-clamp:2;
	-webkit-box-orient:vertical;
}
.vpp-mini-card:hover .vpp-mini-card-title{ color:var(--accent-color); }
.vpp-mini-card-year{ font-size:11px; color:var(--text-muted-2); font-weight:400; }
.vpp-icon-play-circle,.vpp-icon-facebook,.vpp-icon-twitter{
    margin:0 5px 0 0!important
}
.vpp-icon{
    display:inline-block;
    width:1em;
    height:1em;
    vertical-align:-0.125em;
    fill:currentColor
}
.vpp-spin{
    animation:vpp-spin 2s infinite linear
}
@keyframes vpp-spin{
    0%{transform:rotate(0deg)}
    100%{transform:rotate(359deg)}
}

/* ------------------------------------------------------------------
   Request-a-Movie form (template-request-movie.php).
   ------------------------------------------------------------------ */
.vpp-request-form{ max-width:640px; margin:0 auto; }
.vpp-request-field{ margin-bottom:var(--space-md); }
.vpp-request-field label{ display:block; font-weight:700; margin-bottom:6px; font-size:13px; }
.vpp-request-field input[type="text"],
.vpp-request-field input[type="email"],
.vpp-request-field textarea{
	width:100%;
	background:var(--input-bg);
	color:var(--input-text);
	border:1px solid var(--border-color);
	border-radius:var(--radius-sm);
	padding:10px 12px;
	font-size:14px;
	box-sizing:border-box;
}
.vpp-request-field textarea{ min-height:110px; resize:vertical; }
.vpp-request-row{ display:flex; gap:var(--space-md); }
.vpp-request-row .vpp-request-field{ flex:1 1 0; }
.vpp-request-message{ padding:var(--space-md); border-radius:var(--radius-md); margin-bottom:var(--space-md); font-weight:700; }
.vpp-request-message.success{ background:var(--badge-emerald); color:var(--on-badge-ink); }
.vpp-request-message.error{ background:var(--badge-rose); color:var(--on-badge-ink); }

/* ------------------------------------------------------------------
   Report-a-Problem widget (wprc.js / inc/ReportProblem.php).
   ------------------------------------------------------------------ */
.wprc-container{
    display:block;
    float:right;
    width:100%;
    margin:5px 5px 5px 0
}
.wprc-container .wprc-content{
    background:var(--bg-surface-alt);
    border-top:1px solid var(--bg-surface-alt);
    width:100%;
    padding:10px 0 0 10px;
    display:none;
    clear:both
}
.wprc-content .left-section,.wprc-content .right-section{
    width:50%
}
.wprc-content .left-section{
    float:left
}
.wprc-content .right-section{
    float:right;
    padding-left:20px
}
.wprc-content .right-section li{
    height:100%
}
div.wprc-content li{
    list-style:none outside none;
    margin:5px 0 0
}
.wprc-content textarea,.wprc-content input[type=text],.wprc-content input[type=email],.wprc-content input[type=password],.wprc-content select{
    resize:none;
    width:100%;
    padding:5px
}
.wprc-content,.wprc-content textarea,.wprc-content input,.wprc-content select,.wprc-content .left-section,.wprc-content .right-section{
    -webkit-box-sizing:border-box;
    -moz-box-sizing:border-box;
    box-sizing:border-box;
    font-size:14px
}
.wprc-content .required-sign{
    color:red
}
.wprc-content .input-details{
    height:88px
}
.wprc-container .wprc-switch{
    float:right
}
/* Was a 30x30px box sized for a background-sprite icon only -- now that the
   AJAX handler actually returns a real sentence, it needs to be a normal
   full-width readable box. */
.wprc-message.error,.wprc-message.success{
    display:block;
    width:auto;
    height:auto;
    box-sizing:border-box;
    padding:12px 16px;
    margin-bottom:10px;
    border-radius:var(--radius-md);
    font-weight:700;
}
.wprc-message.error{
    background:var(--badge-rose);
    color:var(--on-badge-ink);
}
.wprc-message.success{
    background:var(--badge-emerald);
    color:var(--on-badge-ink);
}
.wprc-content .loading-img{
    vertical-align:middle;
    box-shadow:none;
    border:0
}
.wprc-content .wprc-submit{
    margin-top:10px
}
.wprc-container button.wprc-switch,.wprc-container button.wprc-switch:hover,.wprc-container button.wprc-switch:active,.wprc-content button.wprc-submit,.wprc-content button.wprc-submit:hover,.wprc-content button.wprc-submit:active{
    background:var(--bg-surface);
    border:1px solid var(--accent-color);
    color:var(--accent-color);
    box-shadow:none
}
.wprc-switch:hover{
    text-decoration:underline
}
.wprc-switch{
    background:var(--bg-surface-alt)!important;
    font-size:14px;
    padding:0 5px!important
}
#wp-comment-cookies-consent{
    margin:0 5px 0 0
}

/* ------------------------------------------------------------------
   FAQ accordion (single.php / template-download.php).
   ------------------------------------------------------------------ */
.panel-group, .panel-group * {
	box-sizing: border-box;
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
}
.panel-group {
	overflow: hidden;
	box-shadow: 0px 1px 3px var(--overlay-black-25);
	border-radius: 3px;
	margin-bottom: 30px;
}
.panel-heading h4 {
	margin: 0px;
}
.panel-heading a {
	background: var(--bg-surface-alt);
	display: inline-block;
	border-bottom: 1px solid var(--border-color);
	width: 100%;
	padding: 15px;
	transition: all linear 0.15s;
	color: var(--text-bright);
	font-size: 16px;
	text-shadow: 0px 1px 0px var(--bg-page);
	text-decoration: none;
}
.panel-heading a.active, .panel-heading a:hover {
	background: var(--text-muted-5);
}
.panel-group .panel:last-child .panel-heading a {
	border-bottom: none;
}
.panel-heading a:after {
	content: '\0276F';
	font-size: 10px;
	float: right;
	margin-left: 5px;
	transform: rotate(90deg);
	border-radius: 100px;
	padding: 3px 8px;
	transition-duration: 0.5s;
	border: dotted 2px var(--accent-color-alt);
	color: var(--accent-color-alt);
}
.panel-heading a.active:after {
	transform: rotate(-90deg);
	background: var(--accent-color-alt);
	color: var(--on-accent);
	text-shadow: none;
}
.panel-body {
	padding: 20px;
	color: #eeeeee;
	background: var(--bg-page);
}
.collapse {
	display: none;
}
.collapse.in {
	display: block;
}
.panel-heading:after {
	display: none;
}

/* ------------------------------------------------------------------
   "Homepage with Search" page template (homepage-with-search.php).
   No-sidebar / grid state is handled by the shared has-sidebar /
   no-sidebar system above -- only this template's own hero/search UI
   lives here.
   ------------------------------------------------------------------ */
.vpp-hero {
	background: var(--bg-surface);
	border-bottom: 1px solid var(--border-color);
	padding: 60px 20px;
	text-align: center;
}
.vpp-hero-inner {
	max-width: 640px;
	margin: 0 auto;
}
.vpp-hero-brand {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	margin-bottom: 24px;
}
.vpp-hero-logo img {
	max-height: 50px;
	width: auto;
}
.vpp-hero-logo-text {
	font-size: 28px;
	font-weight: 700;
	color: var(--accent-color);
	letter-spacing: 0.5px;
}
.vpp-hero-play {
	width: 40px;
	height: 40px;
	color: var(--accent-color);
}
.vpp-hero-title {
	font-size: 34px;
	font-weight: 700;
	color: var(--accent-color);
	margin: 0 0 12px;
	line-height: 1.25;
}
.vpp-hero-subtitle {
	font-size: 16px;
	color: var(--text-color);
	margin: 0 0 30px;
}
.vpp-hero-search-wrap {
	position: relative;
	margin: 0 0 24px;
}
.vpp-hero-search {
	display: flex;
	flex-wrap: wrap;
	gap: 0;
	box-shadow: 0 2px 10px var(--overlay-black-25);
	border-radius: 4px;
	overflow: hidden;
}
/* Live AJAX suggestions dropdown for the hero search (see .vpp-ajax-search
   in assets/theme.js) -- .vpp-hero-search itself has overflow:hidden for
   its own rounded corners, so the dropdown is positioned relative to the
   wrap instead, not the form, or it would be clipped. */
.vpp-hero-search-wrap .suggestions {
	position: absolute;
	top: 100%;
	margin-top: 6px;
	width: 100%;
	border-radius: var(--radius-md);
	overflow: hidden;
	box-shadow: var(--shadow-md);
	z-index: 100;
}
.vpp-hero-search input[type="text"] {
	flex: 1 1 240px;
	border: 0;
	padding: 14px 16px;
	font-size: 15px;
	background: var(--input-bg);
	color: var(--input-text);
}
.vpp-hero-search input[type="text"]:focus {
	outline: 2px solid var(--accent-color);
	outline-offset: -2px;
}
.vpp-hero-search button {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 8px;
	border: 0;
	cursor: pointer;
	padding: 14px 24px;
	background: var(--accent-color);
	color: var(--on-accent);
	font-size: 15px;
	font-weight: 700;
}
.vpp-hero-search button:hover {
	background: var(--accent-color-alt);
}
.vpp-hero-search button .vpp-icon {
	width: 18px;
	height: 18px;
}
.vpp-hero-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--accent-color);
	color: var(--on-accent);
	font-weight: 700;
	padding: 12px 26px;
	border-radius: 999px;
	text-decoration: none;
	transition: background .15s ease;
}
.vpp-hero-cta:hover {
	background: var(--accent-color-alt);
	color: var(--on-accent);
}
.vpp-hero-cta .vpp-icon {
	width: 16px;
	height: 16px;
}
.vpp-search-page-content {
	max-width: 860px;
	margin: 0 auto;
	padding: 40px 20px 120px;
	min-height: 40vh;
	box-sizing: border-box;
	color: var(--text-color);
	line-height: 1.7;
}
.vpp-search-page-content h1,
.vpp-search-page-content h2,
.vpp-search-page-content h3 {
	color: var(--accent-color);
	margin: 30px 0 14px;
}
.vpp-search-page-content h1:first-child,
.vpp-search-page-content h2:first-child,
.vpp-search-page-content h3:first-child {
	margin-top: 0;
}
.vpp-search-page-content p {
	margin: 0 0 18px;
}
.vpp-search-page-content a {
	color: var(--accent-color);
}

/* ------------------------------------------------------------------
   Footer.
   ------------------------------------------------------------------ */
#colophon{
    padding:5px 0;
    background:var(--bg-surface);
    border-top:1px solid var(--bg-page);
    text-shadow:0 1px 1px var(--overlay-black-80)
}
#colophon a{
    margin:0 2px;
    font-weight:700
}
#colophon .footer-links{
    float:right;
}
.vpp-footer{ padding:var(--space-lg) 0 var(--space-md); }
.vpp-footer-cols{
	display:grid;
	grid-template-columns:2fr 1fr 1fr;
	gap:var(--space-lg);
	margin-bottom:var(--space-md);
}
.vpp-footer-col .col-heading{
	color:var(--accent-color);
	font-size:13px;
	text-transform:uppercase;
	letter-spacing:.5px;
	margin:0 0 10px;
}
.vpp-footer-col .footer-text{ font-size:12px; margin-bottom:10px; }
.vpp-footer-links{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:6px; }
.vpp-footer-links li a{ font-size:13px; color:var(--text-color); text-decoration:none; }
.vpp-footer-links li a:hover{ color:var(--accent-color); }
.vpp-footer-copy{ padding-top:var(--space-md); border-top:1px solid var(--border-color); font-size:12px; color:var(--text-muted-2); }
.social-share-wrapper {
    display: flex;
    gap: 20px;
    margin: 10px auto;
}
.social-share {
    padding: 5px 0;
    text-align: center;
    color: var(--overlay-white-69);
    font-size: 14px;
    font-weight: 700;
    flex: 1 0;
}
.social-share img{
    margin:0 0 -7px
}
a.social-share:hover, a.social-share:visited{
    color:var(--text-bright)
}
.share-facebook{
    background:var(--brand-facebook)
}
.share-twitter{
    background:var(--brand-twitter);
    float:right
}

/* ==================================================================
   Responsive: standardized to two breakpoints, 1024px and 768px.
   1024px covers everything that needs the mobile-style collapsed nav
   (this used to be split across 790px/950px, which left a 790-950px
   band with an inconsistent half-collapsed nav -- now it's one clean
   switch). 768px layers on the finer, phone-only spacing tweaks that
   used to sit at 470/490/600/767px. Behavior for anything <=768px is
   unchanged from before; the deliberate change is that the 769-1024px
   band (tablets) now gets the same full mobile nav as phones, instead
   of the old half-collapsed in-between state.
   ================================================================== */
@media screen and (max-width: 1024px) {
    /* ---- Grid density: tablet ---- */
    :root{ --grid-cols: 4; }

    /* ---- Sidebar stacks below content instead of beside it ---- */
    .has-sidebar #main > .section{ column-gap:0; }
    .has-sidebar #primary{ flex:1 1 100%; }
    #secondary{ flex:1 1 100%; width:auto; margin:0 0 40px; }

    /* ---- Nav: collapse to hamburger ---- */
    .seperator{
        text-align:left!important
    }
    #masthead .section{
        padding:0
    }
    #masthead hgroup{
        padding-left:10px
    }
    .menu-genre > .sub-menu li {
        flex-basis: 50%!important;
    }
    .menu-release > .sub-menu li {
        flex-basis: 25%!important;
    }
    .main-navigation {
        clear: both;
        float: none;
        flex:1 1 100%;
        order:3;
    }
    .menu-toggle{
        top:0;
        right:0;
        box-shadow:0;
        clip:auto;
        display:block;
        padding:0;
        margin:0;
        border-left:1px solid var(--border-color)
    }
    /* .menu-toggle (the hamburger) is pinned top-right of #masthead via the
       leftover position:absolute!important from .assistive-text -- give the
       search icon the same treatment, offset further left, so the two never
       occupy the same corner regardless of how the flex row above wraps. */
    .vpp-search-toggle{
        position:absolute;
        top:0;
        right:96px;
        padding:12px 14px;
        border-left:1px solid var(--border-color)
    }
    .menu-toggle a{
        padding:10px 15px 11px
    }
    .menu-toggle a:hover{
        background:var(--hover-tint);
        color:var(--accent-color);
        border-color:var(--hover-tint)
    }
    .main-navigation .menu{
        display:none
    }
    .main-navigation li{
        border-top:1px solid var(--border-color);
        float:none
    }
    .menu-item-has-children > a {
        background: var(--bg-surface-alt);
    }
    /* Submenu is simply always visible once the mobile menu is open --
       nothing depends on hover/tap timing, so a tap can't both reveal a
       submenu and follow its link at the same time. */
    .main-navigation ul ul,
    .main-navigation ul li:hover>ul{
        background:0 0;
        float:none;
        position:relative;
        width:auto;
        top:0;
        display:flex;
        flex-wrap:wrap;
    }
    /* The chevron signaled "tap to reveal" -- with the submenu always shown
       now, it's no longer an actionable control. */
    .main-navigation .menu-item-has-children>a:after{
        display:none
    }
    .main-navigation .menu{
        border-top:1px solid var(--border-color)
    }
    .main-navigation .menu li:last-child{
        border-right:1px solid var(--border-color)
    }
    .site-footer .social-share-wrapper{
        flex-direction: column;
    }
}

@media screen and (max-width: 768px) {
    /* ---- Grid density: mobile ---- */
    :root{ --grid-cols: 3; }

    /* ---- Fine mobile-only spacing ---- */
    .site-title{
        padding-right:102px
    }

    /* ---- Nav: small-phone refinements ---- */
    .menu-toggle{
        border-left:1px solid var(--border-color)
    }
    .menu-toggle a:hover{
        border-color:var(--hover-tint);
        background:var(--hover-tint);
        color:var(--accent-color)
    }
    .main-navigation,.main-navigation .menu{
        border:0
    }
    .main-navigation li{
        border:0;
        border-top:1px solid var(--border-color);
        box-shadow:none
    }
    .main-navigation li:hover>a{
        background:0 0
    }
    .main-navigation a{
        border:0
    }
    .main-navigation li a:hover{
        background:var(--hover-tint)
    }
    .main-navigation ul ul{
        background:0 0;
        top:0;
        border:0
    }

    /* ---- Movie layout: poster on top, info stacked below ---- */
    .vpp-movie-layout {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .vpp-poster-col {
        flex: 0 0 auto;
        max-width: 220px;
        width: 60%;
        margin: 0 auto;
    }
    .vpp-info-col {
        width: 100%;
    }

    /* ---- Footer columns stack ---- */
    .vpp-footer-cols{ grid-template-columns:1fr; gap:var(--space-md); }

    /* ---- Homepage-with-search hero ---- */
    .vpp-hero {
        padding: 40px 16px;
    }
    .vpp-hero-title {
        font-size: 26px;
    }
    .vpp-hero-subtitle {
        font-size: 14px;
    }
    .vpp-hero-search button span {
        display: none;
    }
    .top-search.vpp-search-overlay{ padding-top:8vh; }

    /* ---- Sliders / mini cards ---- */
    .vpp-slider-prev{ left:0; }
    .vpp-slider-next{ right:0; }
    .vpp-request-row{ flex-direction:column; gap:0; }
    .vpp-mini-card{ width:105px; }
    .vpp-mini-card-media img{ height:160px; }
    .social-share-wrapper{
        flex-direction: column;
    }
	.home #content form{
		padding: 10px;
	}
	.vpp-hero-search input[type="text"] {
		flex: 1 1 150px;
		padding: 10px 10px;
		font-size: 12px;
	}
}