/*
 * The "saving your details" scrim.
 *
 * It was position:fixed with a white background at 80% opacity and a width
 * and height of 100%, which is the VIEWPORT - so submitting the form whited
 * out the entire page, not the player. On a long article that is the whole
 * screen going blank for as long as the request takes, over a form the
 * visitor has just filled in, which reads as the page having crashed.
 *
 * Absolute keeps it inside the player, where the form it belongs to is, and
 * it sits above the gate so the spinner is the thing you see. Dark rather
 * than white because it sits over a video.
 */
.wplp-loader{
	background:rgba(10,14,20,.72) url(../image/ajax-loader-1.gif) center center no-repeat;
	width:100%;
	height:100%;
	position:absolute;
	top:0;
	left:0;
	z-index:991;
}
/*
 * A missing semicolon after "right:0" made the browser read this as
 * "right: 0 display:none", which is not a valid value, so BOTH declarations
 * were thrown away - the veil had no right edge and was never hidden.
 * CSS fails silently: nothing in a console, nothing in a build, just a rule
 * that is not there.
 */
.wplp-veil{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	display:none;
	z-index:99;
}

/*
 * The tint behind an overlay.
 *
 * Its position, size and z-index lived in css/admin.css, which is enqueued
 * on admin screens only (wpps_lead_player_backend_script() in init.php) and
 * has never been loaded on the front of the site. So on the page where it
 * matters this has always been a plain static div with no height: the tint
 * behind every opt-in, call to action, social lock and HTML overlay simply
 * did not exist, and the form floated on the bare video.
 *
 * jQuery .show() on it sets display:block, which is why display starts at
 * none here rather than being toggled some other way.
 */
.wplp-backdrop{
	position:absolute;
	top:0;
	left:0;
	bottom:0;
	right:0;
	display:none;
	z-index:989;
}

/*
 * NOTE for anyone renaming things here: a selector in this file that matches
 * nothing in includes/*.php fails in complete silence. Five of them did - the
 * markup moved from id="action", id="overlayskip", id="overlayskipbox" and
 * id="social_skip" to classes, and these rules went on naming the ids, so the
 * call to action and the HTML overlay rendered as bare blue underlined links
 * for a release. The harness now fails if a selector here matches nothing in
 * the templates; keep it that way.
 */

/* -------------------------------------------------------------------------
 * The sticky player.
 *
 * The whole wrapper docks, gate and all - which is the point: the opt-in
 * still reaches a viewer who has scrolled away, instead of firing at an empty
 * patch of screen above them.
 *
 * The form inside needs no special handling at this size. Its layout is
 * driven by container queries against the player's own box (see the bottom of
 * this file), so at 340px wide it becomes the compact form by itself.
 * ---------------------------------------------------------------------- */

.wplp-player.wplp-is-docked{
    /* !important because the wrapper carries an inline max-width from the
       video's configured size, and an inline style beats any stylesheet. This
       is the one place that has to override it. */
    position:fixed !important;
    width:min(340px, calc(100vw - 32px)) !important;
    max-width:min(340px, calc(100vw - 32px)) !important;
    margin:0 !important;
    z-index:99990;
    box-shadow:0 18px 48px rgba(0,0,0,.45);
    border-radius:8px;
    overflow:hidden;
    background:#000;
}

.wplp-player.wplp-is-docked[data-wplp-dock="bottom-right"]{ right:16px; bottom:16px; }
.wplp-player.wplp-is-docked[data-wplp-dock="bottom-left"]{  left:16px;  bottom:16px; }
.wplp-player.wplp-is-docked[data-wplp-dock="top-right"]{    right:16px; top:16px; }
.wplp-player.wplp-is-docked[data-wplp-dock="top-left"]{     left:16px;  top:16px; }

/* The placeholder holds the player's space in the page, so docking does not
   yank the content up by the height of a video. */
.wplp-sticky-placeholder{
    display:block;
    width:100%;
}

/* Zero-height marker the IntersectionObserver watches. It has to be the thing
   observed rather than the wrapper, because a fixed wrapper stops scrolling
   and would never report its way back into view. */
.wplp-sticky-sentinel{
    display:block;
    width:100%;
    height:1px;
    margin:0;
    padding:0;
}

.wplp-sticky-close{
    display:none;
    position:absolute;
    top:6px;
    right:6px;
    z-index:99991;
    width:28px;
    height:28px;
    padding:0;
    border:none;
    border-radius:50%;
    background:rgba(8,12,18,.72);
    color:#fff;
    font:18px/1 system-ui,sans-serif;
    cursor:pointer;
}

.wplp-player.wplp-is-docked .wplp-sticky-close{
    display:flex;
    align-items:center;
    justify-content:center;
}

.wplp-sticky-close:hover{ background:rgba(8,12,18,.9); }
.wplp-sticky-close:focus-visible{ outline:3px solid #fff; outline-offset:2px; }

/* On a phone the corner card wastes the width it needs; dock full-width along
   the bottom instead. */
@media (max-width:600px){
    .wplp-player.wplp-is-docked{
        left:0 !important;
        right:0 !important;
        bottom:0 !important;
        top:auto !important;
        width:100% !important;
        max-width:100% !important;
        border-radius:0;
    }
}

@media (prefers-reduced-motion: no-preference){
    .wplp-player{ transition:box-shadow .18s ease; }
}

/*
 * The video is a block.
 *
 * A <video> is display:inline by default, so it sits on the text baseline and
 * leaves the descender gap underneath - about 8px. Every overlay is positioned
 * against the WRAPPER, so that gap put the bottom sheet 8px below the bottom
 * of the picture and left a thin strip of page showing through the tint.
 *
 * Same family of bug as the chapter strip and the stray <br> that made the
 * wrapper 81px too tall; this is the last few pixels of it.
 */
.wplp-player > video{
    display:block;
}

/* -------------------------------------------------------------------------
 * The opt-in form.
 *
 * Two things reach this stylesheet from PHP and nothing else does:
 *
 *   1. CSS custom properties on the player wrapper - every colour, size,
 *      radius and weight below reads one. See includes/presets.php.
 *   2. A layout class on the gate itself - wplp-layout-card and the five
 *      others. A layout changes WHICH rules apply, which a custom property
 *      cannot express, so it travels as a class.
 *
 * The fallback after each var() is what shows if the properties somehow do
 * not load - the plain card, deliberately, rather than nothing.
 *
 * NOTHING HERE USES A BREAKPOINT TO STAY UPRIGHT. A player can be 320px wide
 * inside a 1400px window, so a viewport media query is the wrong instrument
 * and a container query would put layout containment on the wrapper that the
 * absolutely-positioned overlays sit in. Every layout is written to survive
 * any width on its own: the panels take a percentage once they no longer fit,
 * the field rows wrap, and the sheets are full-width to begin with. The one
 * media query at the end tightens padding on genuinely small screens and is
 * not load-bearing.
 * ---------------------------------------------------------------------- */

.wplp-gate{
    /* A size container, so the rules at the bottom of this file can ask how
       big THIS PLAYER is rather than how big the window is. A player can be
       320px wide inside a 1400px window, which is why a viewport media query
       is the wrong instrument here.

       Containment is safe on this element specifically: it is inset:0 inside
       the player wrapper, so its size is already fixed by its parent and
       nothing inside it was ever able to influence that. Putting the
       container on the WRAPPER instead would collapse it, because the
       wrapper's height comes from the video's aspect-ratio rather than from
       a number.

       A browser too old for container queries ignores those rules and gets
       the full-size form, which scrolls inside the panel if it does not fit -
       which is what every browser did before this. */
    container-type:size;
    container-name:wplpgate;
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    width:auto;
    height:auto;
    margin:0;
    padding:0;
    overflow:hidden;
    z-index:990;
    box-sizing:border-box;
    display:flex;
    font-family:var(--wplp-font, inherit);
    color:var(--wplp-panel-text, #16202c);
}

/* The panel. Sized, padded and coloured entirely from the preset; WHERE it
   goes is the layout blocks further down. */
.wplp-gate .wplp-gate-panel{
    position:relative;
    box-sizing:border-box;
    /* Capped against the player, so a long headline scrolls inside the panel
       rather than spilling over the video. The layouts that want breathing
       room around the panel use a margin on THIS element rather than padding
       on the gate - the gate is the size container, and a container query
       measures its CONTENT box, so padding there would silently shift every
       threshold at the bottom of this file. */
    max-width:100%;
    max-height:100%;
    overflow:auto;
    padding:var(--wplp-panel-pad, 30px 28px);
    text-align:var(--wplp-align, center);
    background:var(--wplp-panel-bg, #ffffff);
    color:var(--wplp-panel-text, #16202c);
    border:var(--wplp-panel-border, 0);
    border-radius:var(--wplp-radius, 12px);
    box-shadow:var(--wplp-shadow, 0 20px 52px rgba(4,8,14,.44));
}

.wplp-gate .wplp-optin-head{
    margin:0 0 6px;
    padding:0;
    font-size:var(--wplp-head-size, 24px);
    font-weight:var(--wplp-head-weight, 700);
    letter-spacing:var(--wplp-head-spacing, normal);
    line-height:1.2;
    color:var(--wplp-panel-text, #16202c);
}

.wplp-gate .wplp-optin-text{
    margin:0 0 16px;
    padding:0;
    font-size:var(--wplp-text-size, 14px);
    line-height:1.5;
    color:var(--wplp-panel-muted, #5b6672);
}

.wplp-gate .wplp-fields{
    width:100%;
}

.wplp-gate .wplp-field{
    margin:0 0 9px;
}

.wplp-gate input[type="text"],
.wplp-gate input[type="email"]{
    width:100%;
    height:var(--wplp-field-height, 46px);
    box-sizing:border-box;
    padding:0 13px;
    font:inherit;
    font-family:var(--wplp-font, inherit);
    font-size:15px;
    color:var(--wplp-field-text, #16202c);
    background:var(--wplp-field-bg, #ffffff);
    border:var(--wplp-field-border-width, 1px) solid var(--wplp-field-border, #c9d1da);
    border-radius:var(--wplp-field-radius, 8px);
    -moz-box-sizing:border-box;
    outline:none;
}

/* Placeholders inherit the field colour by default, which on a dark field is
   white text at full strength and indistinguishable from something typed. */
.wplp-gate input::placeholder{
    color:var(--wplp-field-text, #16202c);
    opacity:.62;
}

.wplp-gate input[type="text"]:focus,
.wplp-gate input[type="email"]:focus{
    border-color:var(--wplp-accent, #2563eb);
    box-shadow:0 0 0 3px color-mix(in srgb, var(--wplp-accent, #2563eb) 28%, transparent);
}

/* Buttons. Tall enough to tap, laid out with flex rather than floats so Join
   and Skip cannot overlap on a narrow player. */
.wplp-gate .wplp-optin-actions{
    display:flex;
    gap:8px;
    align-items:stretch;
    margin-top:3px;
}

.wplp-gate .wplp-optin-actions > *{
    flex:1 1 auto;
}

/* The small print under the buttons. Deliberately quiet - it is a footnote,
   not a second headline - but still readable: 11px at 1.45 with the panel's
   own muted colour, rather than a grey hardcoded here that would vanish on a
   dark preset. The link inherits that colour and keeps its underline, because
   a privacy link nobody can see is worse than no link. */
.wplp-gate .wplp-optin-fineprint{
    margin:10px 0 0;
    padding:0;
    font-size:11px;
    line-height:1.45;
    color:var(--wplp-panel-muted, #5b6672);
    text-align:inherit;
}

.wplp-gate .wplp-optin-fineprint a{
    color:inherit;
    text-decoration:underline;
}

.wplp-gate .wplp-optin-fineprint a:hover,
.wplp-gate .wplp-optin-fineprint a:focus{
    text-decoration:none;
}

.wplp-gate .optin-submit-btn,
.wplp-gate .optin-skip-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    height:var(--wplp-btn-height, 48px);
    padding:0 20px;
    box-sizing:border-box;
    font:inherit;
    font-family:var(--wplp-font, inherit);
    font-size:15px;
    line-height:1.2;
    text-align:center;
    text-decoration:none;
    border:var(--wplp-field-border-width, 1px) solid transparent;
    border-radius:var(--wplp-btn-radius, 8px);
    cursor:pointer;
    float:none;
}

.wplp-gate .optin-submit-btn{
    background:var(--wplp-accent, #2563eb);
    color:var(--wplp-accent-text, #ffffff);
    font-weight:var(--wplp-btn-weight, 600);
    text-transform:var(--wplp-btn-transform, none);
    letter-spacing:var(--wplp-btn-spacing, normal);
    border-color:transparent;
}

.wplp-gate .optin-submit-btn:hover{
    filter:brightness(1.07);
}

.wplp-gate .optin-skip-btn{
    flex:0 0 auto;
    background:transparent;
    color:var(--wplp-panel-muted, #5b6672);
    border-color:var(--wplp-field-border, #c9d1da);
    font-weight:500;
}

.wplp-gate .optin-skip-btn:hover{
    color:var(--wplp-panel-text, #16202c);
}

.wplp-gate .optin-submit-btn:focus-visible,
.wplp-gate .optin-skip-btn:focus-visible{
    outline:3px solid var(--wplp-accent, #2563eb);
    outline-offset:2px;
}

/* The tint behind the form. backdrop-filter blurs the video itself, which is
   what the inline preset is built on; a browser without it simply shows the
   tint, so there is nothing to fall back to. */
.wplp-gate ~ .wplp-backdrop,
.wplp-backdrop[class*="wplp-backdrop-optin-"]{
    background:var(--wplp-backdrop, rgba(9,13,19,.62));
    -webkit-backdrop-filter:blur(var(--wplp-backdrop-blur, 0px));
    backdrop-filter:blur(var(--wplp-backdrop-blur, 0px));
}

/* -------------------------------------------------------------------------
 * The six layouts.
 * ---------------------------------------------------------------------- */

/* 1. Card - centred over the video. The one that fits any player size, and
      the fallback for a preset naming a layout this stylesheet does not have. */
.wplp-gate.wplp-layout-card{
    align-items:center;
    justify-content:center;
}

.wplp-gate.wplp-layout-card .wplp-gate-panel{
    width:var(--wplp-panel-width, 380px);
    margin:12px;
    max-width:calc(100% - 24px);
    max-height:calc(100% - 24px);
}

/* 2/3. Panels - full height down one edge, video never covered. The width
        becomes a percentage once the fixed width no longer leaves any video
        showing, which is the whole point of the design. */
.wplp-gate.wplp-layout-panel-left,
.wplp-gate.wplp-layout-panel-right{
    align-items:stretch;
}

.wplp-gate.wplp-layout-panel-left{ justify-content:flex-start; }
.wplp-gate.wplp-layout-panel-right{ justify-content:flex-end; }

.wplp-gate.wplp-layout-panel-left .wplp-gate-panel,
.wplp-gate.wplp-layout-panel-right .wplp-gate-panel{
    width:min(var(--wplp-panel-width, 366px), 58%);
    display:flex;
    flex-direction:column;
    justify-content:center;
    border-radius:0;
    max-height:none;
}

/* 4. Inline - no panel at all. The fields sit on the blurred video, and the
      row wraps rather than squashing when the player is narrow. */
.wplp-gate.wplp-layout-inline{
    align-items:center;
    justify-content:center;
}

.wplp-gate.wplp-layout-inline .wplp-gate-panel{
    width:var(--wplp-panel-width, 620px);
    margin:12px;
    max-width:calc(100% - 24px);
    max-height:calc(100% - 24px);
    background:none;
    border:0;
    box-shadow:none;
    padding:var(--wplp-panel-pad, 0 40px);
}

.wplp-gate.wplp-layout-inline .wplp-fields{
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    align-items:stretch;
}

.wplp-gate.wplp-layout-inline .wplp-field{
    flex:1 1 180px;
    margin:0;
}

.wplp-gate.wplp-layout-inline .wplp-optin-actions{
    flex:0 0 auto;
    margin-top:0;
}

/* 5/6. Sheets - a full-width bar across one edge, with the headline on the
        left and the fields on the right, wrapping to two rows when there is
        not room for both. */
.wplp-gate.wplp-layout-sheet-top{ align-items:flex-start; }
.wplp-gate.wplp-layout-sheet-bottom{ align-items:flex-end; }

.wplp-gate.wplp-layout-sheet-top .wplp-gate-panel,
.wplp-gate.wplp-layout-sheet-bottom .wplp-gate-panel{
    width:100%;
    max-height:100%;
    display:flex;
    flex-wrap:wrap;
    align-items:flex-end;
    gap:14px 26px;
}

.wplp-gate.wplp-layout-sheet-top .wplp-gate-panel{
    border-radius:0 0 var(--wplp-radius, 24px) var(--wplp-radius, 24px);
}

/* The bottom sheet sits ON TOP of the player's own control bar, because that
   bar occupies exactly the strip this design needs. The gate is already
   inside the player wrapper at z-index 990, above the <video> and therefore
   above the controls the browser draws inside it, so this needs no z-index of
   its own - but it does mean the viewer cannot scrub or pause while the form
   is up, which is the intended behaviour for a gate and is why the skip
   button matters on this preset. */
.wplp-gate.wplp-layout-sheet-bottom .wplp-gate-panel{
    border-radius:var(--wplp-radius, 24px) var(--wplp-radius, 24px) 0 0;
}

.wplp-gate.wplp-layout-sheet-top .wplp-optin-copy,
.wplp-gate.wplp-layout-sheet-bottom .wplp-optin-copy{
    flex:1 1 220px;
    min-width:0;
}

.wplp-gate.wplp-layout-sheet-top .wplp-fields,
.wplp-gate.wplp-layout-sheet-bottom .wplp-fields{
    flex:1 1 320px;
    display:flex;
    flex-wrap:wrap;
    gap:9px;
    align-items:stretch;
    width:auto;
}

.wplp-gate.wplp-layout-sheet-top .wplp-field,
.wplp-gate.wplp-layout-sheet-bottom .wplp-field{
    flex:1 1 140px;
    margin:0;
}

.wplp-gate.wplp-layout-sheet-top .wplp-optin-actions,
.wplp-gate.wplp-layout-sheet-bottom .wplp-optin-actions{
    flex:0 0 auto;
    margin-top:0;
}

.wplp-gate.wplp-layout-sheet-top .wplp-optin-text,
.wplp-gate.wplp-layout-sheet-bottom .wplp-optin-text{
    margin-bottom:0;
}

/* -------------------------------------------------------------------------
 * Small players.
 *
 * The designs are drawn for a player around 960x540. Put the same form in a
 * 320x180 one and it no longer fits - and what "does not fit" looked like
 * before these rules was a panel that SCROLLED, with the Join button below
 * the fold. A form whose only button is hidden until you scroll is a form
 * nobody fills in, so the answer is to make it smaller rather than to let it
 * overflow.
 *
 * Three things to know about this block:
 *
 *   1. A container query styles the container's DESCENDANTS, never the
 *      container element itself, so every selector here targets
 *      .wplp-gate-panel and what is inside it - never .wplp-gate. Getting
 *      that wrong is silent: the rules parse, match nothing, and the form
 *      goes on scrolling.
 *   2. Selectors are written as ".wplp-gate .wplp-gate-panel x" so they tie
 *      with the layout rules above on specificity and win on source order.
 *      A layout's own ".wplp-gate.wplp-layout-inline .wplp-field" otherwise
 *      outranks a bare ".wplp-field" here and the tier does nothing.
 *   3. WIDTH tiers come first and HEIGHT tiers after, because height is the
 *      scarce dimension. When both apply - a small player is usually small in
 *      both - the height tier is the one that must win.
 *
 * A browser too old for container queries ignores all of it and gets the
 * full-size form, which scrolls inside the panel if it does not fit. That is
 * what every browser did before this, so nothing is worse than it was.
 * ---------------------------------------------------------------------- */

/* Narrow. A side panel taking three quarters of the width is not a side
   panel any more. */
@container wplpgate (max-width: 460px){
    .wplp-gate.wplp-layout-panel-left .wplp-gate-panel,
    .wplp-gate.wplp-layout-panel-right .wplp-gate-panel{ width:78%; }
}

@container wplpgate (max-width: 360px){
    .wplp-gate.wplp-layout-panel-left .wplp-gate-panel,
    .wplp-gate.wplp-layout-panel-right .wplp-gate-panel{ width:100%; }
    .wplp-gate.wplp-layout-card .wplp-gate-panel{ width:100%; }
}

/* Only now does Skip get its own row. Giving it one any earlier costs a whole
   button's height for no reason - which is how a 400px player ended up
   scrolling with room to spare across the panel. */
@container wplpgate (max-width: 300px){
    .wplp-gate .wplp-gate-panel .wplp-optin-actions{ flex-wrap:wrap; }
    .wplp-gate .wplp-gate-panel .optin-skip-btn{ flex:1 1 100%; }
}

/* Short. Trim the type, the padding and the control heights. */
@container wplpgate (max-height: 340px){
    .wplp-gate .wplp-gate-panel{
        --wplp-head-size:19px;
        --wplp-text-size:13px;
        --wplp-panel-pad:16px 16px;
        --wplp-field-height:40px;
        --wplp-btn-height:42px;
    }
    .wplp-gate .wplp-gate-panel .wplp-optin-text{ margin-bottom:10px; }
    .wplp-gate .wplp-gate-panel .wplp-field{ margin-bottom:7px; }
}

/* Very short. The body text goes; the headline and the fields are what
   actually collect the lead. */
@container wplpgate (max-height: 235px){
    .wplp-gate .wplp-gate-panel{
        --wplp-head-size:16px;
        --wplp-panel-pad:12px 14px;
        --wplp-field-height:36px;
        --wplp-btn-height:38px;
    }
    .wplp-gate .wplp-gate-panel .wplp-optin-text{ display:none; }
    .wplp-gate .wplp-gate-panel .wplp-optin-head{ margin-bottom:8px; }
    /* The 44px minimum tap target is the right default and the wrong rule on
       a 225px-tall player, where it makes the button a fifth of the picture
       and pushes the rest out of sight. Traded down deliberately. */
    .wplp-gate .wplp-gate-panel .optin-submit-btn,
    .wplp-gate .wplp-gate-panel .optin-skip-btn{ min-height:40px; }
}

/* Shorter still - a 320x180 player, about as small as anyone embeds one. Two
   stacked fields plus a button cannot fit in 180px however small the type
   gets, so the fields go side by side and the button takes the row below.
   Dropping the name field instead would be the easy fix and the wrong one:
   the name is half the reason for collecting the address. */
@container wplpgate (max-height: 200px){
    .wplp-gate .wplp-gate-panel{
        --wplp-head-size:15px;
        --wplp-panel-pad:10px 12px;
        --wplp-field-height:34px;
        --wplp-btn-height:36px;
    }
    .wplp-gate .wplp-gate-panel .wplp-fields{
        display:flex;
        flex-wrap:wrap;
        gap:6px;
    }
    .wplp-gate .wplp-gate-panel .wplp-field{
        flex:1 1 104px;
        margin:0;
    }
    .wplp-gate .wplp-gate-panel .wplp-optin-actions{
        flex:1 1 100%;
        flex-wrap:nowrap;
        margin-top:6px;
    }
    .wplp-gate .wplp-gate-panel .optin-skip-btn{ flex:0 0 auto; }
    .wplp-gate .wplp-gate-panel .optin-submit-btn,
    .wplp-gate .wplp-gate-panel .optin-skip-btn{ min-height:36px; }
    .wplp-gate .wplp-gate-panel .wplp-optin-head{ margin-bottom:6px; }
}

/* Smaller than anyone should embed, but people do put a player in a sidebar.
   The card's breathing room around the edge is the last thing to go - below
   this the form takes the whole picture, because a form you can use beats a
   pretty margin around one you cannot. */
@container wplpgate (max-height: 170px){
    .wplp-gate.wplp-layout-card .wplp-gate-panel,
    .wplp-gate.wplp-layout-inline .wplp-gate-panel{
        margin:0;
        max-width:100%;
        max-height:100%;
        width:100%;
        border-radius:0;
    }
    .wplp-gate .wplp-gate-panel{
        --wplp-head-size:14px;
        --wplp-panel-pad:8px 10px;
        --wplp-field-height:32px;
        --wplp-btn-height:34px;
    }
    .wplp-gate .wplp-gate-panel .optin-submit-btn,
    .wplp-gate .wplp-gate-panel .optin-skip-btn{ min-height:34px; }
}

/* A last resort for a browser with no container query support. */
@media (max-width:420px){
    .wplp-gate .wplp-optin-actions{ flex-wrap:wrap; }
    .wplp-gate .optin-skip-btn{ flex:1 1 100%; }
}

/* The hardcoded #3197ED here was overridden by the token rule further down
   the file, so this block only ever contributed a 4px radius the token rule
   then replaced. Kept as the one thing it should say: a call-to-action button
   the width of the whole player reads as a banner, not a button. */
.wplp-cta .wplp-cta-action div{
    max-width:420px;
    margin:0 auto;
}
.wplp-cta .wplp-cta-action a{
    text-transform: capitalize;
   
    color: white;
    text-decoration: none;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    
}
.wplp-cta{
    height: auto;
    width:100%;
    bottom: 49px;
    overflow: visible;
    position: absolute;
    z-index: 990;
}

.wplp-player{
    margin-top:30px;	
}

/* .wplp-player-yt (was .youtube_wrapper) lived here styling nothing - no
   template has ever emitted that class. Removed rather than left as a rule
   somebody might one day try to make work. */

.wplp-cta-text{
    cursor: pointer;
    padding:8px;
}

.wplp-cta-btn{
    margin: 20px auto;
    margin-bottom: 0px;
    width: 75px;
    padding: 12px 20px;
}

.wplp-cta-panel{
    margin: 0px 13px 0px 10px;
}

.wplp-social{
    width: 300px;
    height: auto;
    left: 50%;
    margin-left:-158px;
    top: 50%;
    margin-top:-40px;
    overflow: visible;
    position: absolute;
    z-index: 990;
    color: black;
    font-family: Tahoma, Geneva, sans-serif;
}

.wplp-social-buttons{
    
    width: auto;
    text-align: center;
    border-radius: 4px;
    list-style: none;
    margin-left: 0px; 
    padding-bottom: 35px;
    
}

.wplp-social-panel li{
    cursor: pointer;
    display: inline-block;
}

.wplp-social-panel li a{
   text-decoration: none;
    color:#ffffff;
}

.wplp-fb-share img{
    width:57px;
}

.wplp-social-panel .wplp-social-skip{
    color: white;
    text-decoration: none;
    background-color: #3197ED;   
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 14px;
}

.wplp-overlay{
    top: 0px;
	bottom:0;
	left:0;
	right:0;
	
    position: absolute;
    z-index: 970;
}

.wplp-overlay-panel{
    overflow: auto;
    position: absolute;
    left: 0px;
    right: 0px;
    top:0px;
    margin-left: auto;
    margin-right: auto;
    margin-top: 4px;
}

.wplp-overlay .wplp-overlay-skip{
    color: white;
    text-decoration: none;
    background-color: #3197ED;   
    padding: 12px 30px;
    border-radius: 4px;
    font-size: 14px;
    bottom: 30px;
    position: absolute;
    left: 50%;
    margin-left:-50px;
    z-index: 980;
    
}

.wplp-overlay .wplp-overlay-skipbox{
    position: relative;
    top: 0%;
}



.wplp-overlay .wplp-overlay-veil{
    width: 100%;
    height: 100%;
    background: #000;
     filter: alpha(opacity=60);
    -moz-opacity: 0.6;
    -khtml-opacity: 0.6;
    opacity: 0.6;
}



.wplp-overlay .wplp-overlay-panel .wplp-overlay-content{
    position: absolute;
    top:0;
    left:0;
}




.wplp-social-text{
	background-color:#FFFFFF;
	min-width:125px;;
	min-height:20px;
	padding:4px;
	border-radius: 4px;
	font-size:12px;
	color:#000;
	margin-bottom:12px;
	}



/* -------------------------------------------------------------------------
 * The other three overlays, on the same tokens as the opt-in.
 *
 * The call to action, social lock and HTML overlay each carried their own
 * copy of the 2014 pattern - 300px wide, centred with margin-left:-158px,
 * Tahoma, and the same hardcoded #3197ED blue. Theming only the opt-in would
 * have produced a video where the gate followed your brand and everything
 * else did not, which is worse than theming nothing.
 *
 * These are appended rather than edited in place so they override the legacy
 * rules above by source order, which keeps a half-cached stylesheet from
 * leaving a box unstyled mid-upgrade.
 * ---------------------------------------------------------------------- */

.wplp-social,
.wplp-cta,
.wplp-overlay{
    font-family:var(--wplp-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif);
    color:var(--wplp-panel-text, #16202c);
}

/* Social lock: same centred panel as the opt-in, no fixed width. */
.wplp-social{
    width:min(360px, calc(100% - 28px));
    max-width:none;
    left:50%;
    top:50%;
    margin-left:0;
    margin-top:0;
    transform:translate(-50%, -50%);
    box-sizing:border-box;
    padding:20px 18px;
    text-align:center;
    background:var(--wplp-panel-bg, #ffffff);
    border-radius:var(--wplp-radius, 8px);
    box-shadow:var(--wplp-shadow, 0 18px 48px rgba(6,12,20,.34));
}

.wplp-social-panel .wplp-social-skip,
.wplp-overlay .wplp-overlay-skip,
.wplp-cta .wplp-cta-action div{
    background:var(--wplp-accent, #2563eb);
    color:var(--wplp-accent-text, #ffffff);
    border-radius:calc(var(--wplp-radius, 8px) - 2px);
}

.wplp-cta .wplp-cta-action a{
    color:var(--wplp-accent-text, #ffffff);
    font-family:inherit;
}

.wplp-overlay .wplp-overlay-skip{
    left:50%;
    margin-left:0;
    transform:translateX(-50%);
    min-height:44px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    box-sizing:border-box;
}

.wplp-social-panel .wplp-social-skip:focus-visible,
.wplp-overlay .wplp-overlay-skip:focus-visible{
    outline:3px solid var(--wplp-accent, #2563eb);
    outline-offset:2px;
}

@media (max-width:420px){
    .wplp-social{
        width:calc(100% - 16px);
        padding:16px 14px;
    }
}