/*
Theme Name: DooPlay Child
Template: dooplay
Version: 1.0
*/

/* Watch Sources: horizontal pill buttons */
#playeroptions ul#playeroptionsul {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    list-style: none;
    margin: 25px 0;
    padding: 0;
}
#playeroptions ul#playeroptionsul li.dooplay_player_option {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    width: auto;
    margin: 0;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
    border: 1px solid transparent;
}
#playeroptions ul#playeroptionsul li.dooplay_player_option .title {
    white-space: nowrap;
}
#playeroptions ul#playeroptionsul li.dooplay_player_option.on {
    background-color: rgba(64, 139, 234, 0.12);
    border-color: #408bea;
}
#playeroptions ul#playeroptionsul li.dooplay_player_option.on .title,
#playeroptions ul#playeroptionsul li.dooplay_player_option.on i {
    color: #408bea;
}

/* Space the Links module off from the Video Sources module above it
   (the player options list clips its own bottom margin via
   overflow:hidden, so the two sections were rendering flush). */
.box_links {
    margin-top: 20px;
}

/* Download Links: horizontal pill buttons for each option row's link */
.links_table table tbody tr td:first-child {
    display: inline-flex;
}
.links_table table tbody tr td:first-child a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 16px;
    border-radius: 999px;
    white-space: nowrap;
}

/* Helper text inline with the Links heading / Download tab.
   Matches the theme's own .linktabs h2 rule (float:left, line-height:25px,
   margin-right:15px) so the text sits on the same baseline with the same
   gap the theme already uses between "Links" and the Download tab. */
.linktabs .dlc-streaming-helper {
    float: left;
    font-size: 13px;
    line-height: 25px;
    margin-left: 15px;
    color: #5b6570;
}
@media (prefers-color-scheme: dark) {
    .linktabs .dlc-streaming-helper {
        color: #b7bfc9;
    }
}

/* "Get Membership" nav item: blinking red dot after the label */
#menu-item-24127 > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
#menu-item-24127 > a::after {
    content: '';
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #ff3b30;
    animation: dlc-blink-dot 1.4s ease-in-out infinite;
}
@keyframes dlc-blink-dot {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.25; }
}

/* Membership gate shown in place of the player/download-links for
   visitors without an active membership. */
.dlc-membership-gate {
    width: 100%;
    float: left;
    box-sizing: border-box;
    text-align: center;
    padding: 40px 24px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(64, 139, 234, 0.06);
    border: 1px solid rgba(64, 139, 234, 0.25);
}
.dlc-membership-gate-icon {
    font-size: 28px;
    line-height: 1;
    margin-bottom: 12px;
}
.dlc-membership-gate-text {
    margin: 0 0 18px;
    font-size: 15px;
    font-weight: 600;
    color: #f5f7fa;
}
.dlc-membership-gate-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 10px 24px;
    border-radius: 999px;
    background: #408bea;
    color: #fff;
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
}
.dlc-membership-gate-btn:hover {
    background: #2f74cc;
    color: #fff;
}

/* Membership pricing page ("Get Membership") */
/* Membership pricing page -- palette drawn from the MultiPoint TV logo
   (emerald green + gold) but muted/desaturated for a premium, editorial
   feel rather than a literal logo-color match. */
.dlc-pricing {
    width: 100%;
    float: left;
    padding: 36px 0 10px;
    --dlc-emerald: #2fae6b;
    --dlc-emerald-soft: rgba(47, 174, 107, 0.12);
    --dlc-gold: #d9a441;
}
.dlc-pricing-intro {
    text-align: center;
    margin-bottom: 40px;
}
.dlc-pricing-intro h1 {
    margin: 0 0 14px;
    font-size: 36px;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: #ffffff;
    text-shadow: 0 0 28px rgba(47, 174, 107, 0.35);
}
.dlc-pricing-intro h1 span.dlc-highlight {
    font-size: inherit;
    font-weight: inherit;
    line-height: inherit;
    margin-left: 0;
    color: var(--dlc-emerald);
}
.dlc-pricing-intro p {
    margin: 0;
    font-size: 17px;
    font-weight: 500;
    color: #d7dde5;
}
.dlc-pricing-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    justify-content: center;
    align-items: stretch;
}
.dlc-plan-card {
    position: relative;
    flex: 1 1 230px;
    max-width: 270px;
    box-sizing: border-box;
    padding: 30px 22px 26px;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0) 40%), #12161c;
    text-align: center;
    display: flex;
    flex-direction: column;
    transition: border-color 0.2s ease, transform 0.2s ease;
}
.dlc-plan-card:hover {
    border-color: rgba(47, 174, 107, 0.45);
    transform: translateY(-3px);
}
.dlc-plan-card.dlc-plan-featured {
    border-color: var(--dlc-gold);
    background: linear-gradient(180deg, rgba(217, 164, 65, 0.1), rgba(255, 255, 255, 0) 45%), #14181f;
}
.dlc-plan-card.dlc-plan-featured:hover {
    border-color: var(--dlc-gold);
    transform: translateY(-3px);
}
.dlc-plan-badge {
    position: absolute;
    top: -13px;
    left: 50%;
    transform: translateX(-50%);
    background: var(--dlc-gold);
    color: #1a1400;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 5px 14px;
    border-radius: 999px;
    white-space: nowrap;
}
.dlc-plan-name {
    margin: 4px 0 14px;
    font-size: 19px;
    font-weight: 700;
    color: #f2f4f7;
}
.dlc-plan-price {
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.dlc-plan-price .amount {
    font-size: 32px;
    font-weight: 800;
    color: #ffffff;
}
.dlc-plan-card.dlc-plan-featured .dlc-plan-price .amount {
    color: var(--dlc-gold);
}
.dlc-plan-price .period {
    font-size: 13px;
    color: #9aa3ad;
    margin-left: 4px;
}
.dlc-plan-features {
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
    text-align: left;
    flex-grow: 1;
}
.dlc-plan-features li {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    font-size: 13px;
    color: #c3cad3;
    line-height: 1.4;
    margin-bottom: 12px;
}
.dlc-plan-features li svg {
    flex: 0 0 16px;
    width: 16px;
    height: 16px;
    margin-top: 1px;
    fill: none;
    stroke: var(--dlc-emerald);
    stroke-width: 2.4;
    stroke-linecap: round;
    stroke-linejoin: round;
}
.dlc-plan-card.dlc-plan-featured .dlc-plan-features li svg {
    stroke: var(--dlc-gold);
}
.dlc-plan-btn {
    display: block;
    padding: 13px 0;
    border-radius: 8px;
    background: var(--dlc-emerald);
    color: #08150f;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
    transition: background 0.15s ease, transform 0.1s ease;
}
.dlc-plan-btn:hover {
    background: #26965b;
    color: #08150f;
}
.dlc-plan-btn:active {
    transform: scale(0.98);
}
.dlc-plan-card.dlc-plan-featured .dlc-plan-btn {
    background: var(--dlc-gold);
    color: #1a1400;
}
.dlc-plan-card.dlc-plan-featured .dlc-plan-btn:hover {
    background: #c4922f;
    color: #1a1400;
}
.dlc-pricing-note {
    text-align: center;
    max-width: 560px;
    margin: 32px auto 0;
    font-size: 13px;
    opacity: 0.6;
}

/* Per-plan "thank you" / payment page */
.dlc-thankyou {
    width: 100%;
    float: left;
    text-align: center;
    padding: 40px 20px;
    box-sizing: border-box;
}
.dlc-thankyou h1 {
    max-width: 640px;
    margin: 0 auto 28px;
    font-size: 28px !important;
    font-weight: 800;
    line-height: 1.5;
    color: #3dc47e !important;
    text-shadow: 0 0 14px rgba(47, 174, 107, 0.4);
}
@media (max-width: 700px) {
    .dlc-thankyou h1 {
        font-size: 22px !important;
        line-height: 1.55;
        margin-bottom: 24px;
    }
}
.dlc-thankyou-note {
    max-width: 560px;
    margin: 28px auto 0;
    font-size: 15px !important;
    font-weight: 700;
    color: #f5f7fa !important;
}
.dlc-pay-buttons {
    display: inline-flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 14px;
}
.dlc-pay-btn {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 14px 30px;
    border-radius: 8px;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    text-decoration: none;
}
.dlc-pay-btn i {
    font-size: 19px;
}
.dlc-pay-btn-stripe {
    background: #6366f1;
}
.dlc-pay-btn-stripe:hover {
    background: #4f46e5;
    color: #fff;
}
.dlc-pay-btn-paypal {
    background: #0070ba;
}
.dlc-pay-btn-paypal:hover {
    background: #005c99;
    color: #fff;
}
.dlc-safe-checkout {
    display: block;
    max-width: 420px !important;
    width: 100% !important;
    height: auto;
    margin: 36px auto 0;
    border-radius: 6px;
}

/* Customer reviews block on the thank-you pages */
.dlc-reviews {
    max-width: 980px;
    margin: 20px auto 0;
    padding: 0 12px;
    box-sizing: border-box;
    text-align: center;
}
.dlc-reviews-title {
    font-size: 20px !important;
    font-weight: 700;
    color: #f5f7fa !important;
    margin: 0 0 20px;
}
.dlc-reviews-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
}
.dlc-review-card {
    text-align: left;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 18px;
    box-sizing: border-box;
}
.dlc-review-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}
.dlc-review-avatar {
    flex: 0 0 36px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #2fae6b;
    color: #08150f;
    font-size: 12px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
}
.dlc-review-name {
    font-size: 14px;
    font-weight: 700;
    color: #f5f7fa;
}
.dlc-review-stars {
    display: block;
    font-size: 13px;
    color: #ffb800;
    letter-spacing: 3px;
    margin-bottom: 14px;
}
.dlc-review-text {
    font-size: 13px !important;
    line-height: 1.55;
    color: #e8ecf1 !important;
    margin: 0;
}
.dlc-reviews-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 22px;
    color: #3dc47e;
    font-weight: 700;
    font-size: 14px;
    text-decoration: none;
}
.dlc-reviews-link:hover {
    color: #57d68a;
    text-decoration: underline;
}
@media (max-width: 640px) {
    .dlc-reviews-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* On large screens the thank-you page content was sitting in a narrow
   column with a lot of unused space either side, which read as small/thin
   rather than intentional. Scale it up proportionally past 1200px. */
@media (min-width: 1200px) {
    .dlc-thankyou {
        padding: 60px 20px;
    }
    .dlc-thankyou h1 {
        max-width: 1080px;
        font-size: 36px !important;
        line-height: 1.4;
        margin-bottom: 40px;
    }
    .dlc-thankyou-note {
        max-width: 700px;
        font-size: 17px !important;
        margin-top: 34px;
    }
    .dlc-pay-btn {
        padding: 17px 38px;
        font-size: 17px;
        gap: 12px;
    }
    .dlc-pay-btn i {
        font-size: 22px;
    }
    .dlc-safe-checkout {
        max-width: 520px !important;
        margin-top: 44px;
    }
    .dlc-reviews {
        max-width: 1180px;
        margin-top: 24px;
    }
    .dlc-reviews-title {
        font-size: 24px !important;
        margin-bottom: 26px;
    }
    .dlc-reviews-grid {
        gap: 20px;
    }
    .dlc-review-card {
        padding: 24px;
    }
    .dlc-review-avatar {
        flex-basis: 42px;
        width: 42px;
        height: 42px;
        font-size: 14px;
    }
    .dlc-review-name {
        font-size: 16px;
    }
    .dlc-review-stars {
        font-size: 15px;
    }
    .dlc-review-text {
        font-size: 14.5px !important;
    }
    .dlc-reviews-link {
        font-size: 16px;
        margin-top: 28px;
    }
}

/* Checkout page: fix invisible input text (the dark theme's light text
   color was inheriting into the checkout block's white input fields) and
   give the Place Order button the same look as the rest of the site. */
.wc-block-checkout input[type="text"],
.wc-block-checkout input[type="email"],
.wc-block-checkout input[type="tel"],
.wc-block-checkout input[type="number"],
.wc-block-checkout input[type="search"],
.wc-block-checkout textarea,
.wc-block-checkout select,
.wc-block-components-text-input input,
.wc-block-components-combobox input {
    color: #1a1f24 !important;
}
.wc-block-components-checkout-place-order-button {
    width: 100%;
    padding: 15px 0 !important;
    border-radius: 8px !important;
    background: var(--dlc-emerald, #2fae6b) !important;
    color: #08150f !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    letter-spacing: 0.01em;
    border: none !important;
    box-shadow: 0 6px 18px rgba(47, 174, 107, 0.25);
    transition: background 0.15s ease, transform 0.1s ease;
}
.wc-block-components-checkout-place-order-button:hover {
    background: #26965b !important;
    color: #08150f !important;
}
.wc-block-components-checkout-place-order-button:active {
    transform: scale(0.99);
}
.wc-block-components-address-form__address_1,
.wc-block-components-address-form__city,
.wc-block-components-address-form__state,
.wc-block-components-address-form__postcode {
    display: none !important;
}

/* Checkout text is dimmed to rgba(255,255,255,0.5-0.6) by default, which
   reads poorly against the dark theme -- brighten it. This must NOT touch
   the floating field labels ("First name", "Email address"...) -- those
   are absolutely-positioned INSIDE the white input boxes until the field
   is focused/filled, so they need to stay dark to stay readable there;
   brightening them (like the rest of the page) would just recreate the
   same invisible-text bug on a white background instead of a dark one. */
.wc-block-checkout,
.wc-block-checkout label,
.wc-block-components-title.wc-block-components-checkout-step__title,
.wc-block-components-checkout-order-summary__title,
.wc-block-components-product-name,
.wc-block-components-totals-item__label,
.wc-block-components-totals-item__value,
.wc-block-components-formatted-money-amount,
.wc-block-components-checkout-order-summary__title-price,
.wc-block-components-order-summary-item__quantity,
.wc-block-components-order-summary-item__individual-price {
    color: rgba(255, 255, 255, 0.92) !important;
}
.wc-block-components-text-input label,
.wc-block-components-address-form label,
.wc-block-checkout input::placeholder,
.wc-block-checkout textarea::placeholder {
    color: #6b7280 !important;
    opacity: 1;
}

/* Header login icon (guest state): make it a proper visible button instead
   of a bare outline icon that blends into the dark header. */
.dtuser a.clicklogin {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #408bea;
    box-shadow: 0 2px 10px rgba(64, 139, 234, 0.45);
    transition: background 0.15s ease, transform 0.1s ease;
}
.dtuser a.clicklogin:hover {
    background: #2f74cc;
    transform: translateY(-1px);
}
.dtuser a.clicklogin i {
    font-size: 20px !important;
    color: #fff !important;
}
/* The desktop header uses a float-based layout with a fixed 70px height
   and overflow:hidden on its wrapper (.fix-hidden) -- if the nav menu +
   search + login together don't fit on one line, the login button
   silently wraps onto a clipped second line and disappears entirely.
   From 768px up we drop the search box (least essential item) so the
   full "Sign In" pill always has guaranteed room on one line. Search is
   still reachable via the sidebar search widget and the mobile menu's
   own search icon below 768px. */
@media (min-width: 768px) {
    #advc-menu {
        display: none !important;
    }
    .headitems {
        margin-left: 10px !important;
        /* keep the login button clear of the browser edge instead of
           sticking flush against it */
        margin-right: 10px !important;
    }
    .dtuser a.clicklogin {
        width: auto;
        height: 42px;
        padding: 0 20px 0 16px;
        gap: 8px;
        border-radius: 999px;
    }
    .dtuser a.clicklogin::after {
        content: "Sign In";
        font-size: 14px;
        font-weight: 700;
        color: #fff;
        white-space: nowrap;
    }
}

/* Free up extra room in the squeezed 768-1299px range (nav + login pill,
   no search) by tightening nav item side padding, so the wider "Sign In"
   pill + its right-edge margin never gets pushed onto the header's
   clipped second line. */
@media (min-width: 768px) and (max-width: 1299px) {
    .head-main-nav ul.main-header li a {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }
}

@media (max-width: 767px) {
    .headitems {
        margin-right: 14px !important;
    }
}