/*
 * 50 Page trial.
 * Load order: content-style.css -> css/10-content-patterns.css -> css/15-woocommerce.css -> css/20-page-patterns.css -> style.css -> css/pages/50-page-*.css.
 * Purpose: /trial/ page-only styles for the preserved Try Before You Buy custom form app.
 * Scope: page asset is enqueued only on post ID 8800; .dmax-trial-app marks the preserved app wrapper.
 */

.dmax-trial-app {
    isolation: isolate;
    /* Deep midnight gradient backdrop */
    background: radial-gradient(circle at 15% 15%, #0a2f4a 0%, #03121d 60%, #000000 100%);
    color: #fff;
    --theme-gutter: 33px;
    /* Fallback for older browsers, then modern dvh unit for mobile URL bars */
    --vh: 100vh;
    --vh: 100dvh;
}

section.dmax-row .dmax-trial-app {
    background: unset;
}

/* Hide footer and disable sticky header on trial page */
.page-id-8800 #Footer {
    display: none !important;
}

.page-id-8800 .kadence-sticky-header {
    position: relative !important;
    top: auto !important;
    transform: none !important;
}

.page-id-8800 .kadence-sticky-header.item-is-stuck {
    display: none !important;
}

/* ── Content Box / Max-Width Strategy ────────────────────────────── */
.dmax-trial-app .content-box {
    position: relative;
    z-index: 2;
    width: 100%;
    max-width: 1200px;
    padding: 0 20px;
    margin: 0 auto;
    box-sizing: border-box;
}

/* ── Section Heights & Padding ───────────────────────────────────── */
.dmax-trial-app .page-sensor section,
.dmax-trial-app .page-sensor section.hero,
.dmax-trial-app section {
    padding-bottom: clamp(45px, 4vw, 90px);
    max-width: 100%;
}

.dmax-trial-app section.hero {
    max-width: 1440px;
    max-width: calc(100vw - var(--theme-gutter));
}

.dmax-trial-app .hero,
.dmax-trial-app .sec6 {
    box-sizing: border-box;
    min-height: 100vh;
    min-height: 100dvh;
    overflow: hidden;
    position: relative;
}

.dmax-trial-app .container-left {
    padding-left: var(--theme-gutter);
    padding-right: 0;
    transition: 0.3s;
}

.dmax-trial-app .hero {
    align-items: center;
    display: flex;
    justify-content: flex-start;
}

@media only screen and (min-width: 768px) {
    .dmax-trial-app .topper,
    .dmax-trial-app #page4,
    .dmax-trial-app #page2,
    .dmax-trial-app #page3,
    .dmax-trial-app #page5,
    .dmax-trial-app #page6,
    .dmax-trial-app #page9 {
        padding-top: 145px !important;
    }
}

/* ── Title Heading Typography ────────────────────────────────────── */
.dmax-trial-app .content-box .title-big {
    color: #fff;
    font-size: clamp(28px, 4vw, 50px);
    line-height: 1.1;
    font-weight: 900;
    margin-bottom: 24px;
    /* Gradient text effect for headings */
    background: linear-gradient(135deg, #ffffff 60%, #a5c4d4 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

.dmax-trial-app .title-shift {
    padding-left: clamp(80px, 8vw, 120px) !important;
}

.dmax-trial-app .title-shift-2 {
    padding-left: 0;
}

/* ── Choice Cards (CSS Grid + Glassmorphism) ───────────────────────── */
.dmax-trial-app #page4 .content-box,
.dmax-trial-app #page2 .content-box {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: clamp(18px, 3vw, 34px);
    max-width: 1200px !important;
    margin: 0 auto;
    padding: 0 clamp(16px, 4vw, 36px);
}

.dmax-trial-app #page4 .title-big,
.dmax-trial-app #page2 .title-big {
    grid-column: 1 / -1;
    margin-bottom: clamp(30px, 6vw, 70px) !important;
}

.dmax-trial-app .xray {
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: clamp(16px, 3vw, 24px);
    box-sizing: border-box;
    text-align: center;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1), 
                box-shadow 0.3s ease, 
                border-color 0.3s ease,
                background-color 0.3s ease;
}

.dmax-trial-app .xray:hover {
    transform: translateY(-8px);
    box-shadow: 0 12px 40px 0 rgba(16, 84, 147, 0.25);
    border-color: rgba(60, 188, 230, 0.3);
}

/* Card checked state (using CSS :has for native select highlights) */
.dmax-trial-app .xray:has([type="radio"]:checked) {
    border-color: var(--global-palette3, #3cbce6) !important;
    box-shadow: 0 0 24px rgba(60, 188, 230, 0.2);
    background: rgba(16, 84, 147, 0.08);
}

.dmax-trial-app .mediatype {
    display: block;
    cursor: pointer;
}

.dmax-trial-app .xray img.shrink {
    max-width: 100% !important;
    height: auto;
    border-radius: 16px !important;
    border: 4px solid transparent;
    display: block;
    margin: 0 auto;
    cursor: pointer;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.dmax-trial-app .xray:has([type="radio"]:checked) img.shrink {
    transform: scale(1.02);
}

/* ── Choice Captions ─────────────────────────────────────────────── */
.dmax-trial-app .dmax-choice-caption p {
    margin: 18px 0 0;
    color: #fff;
    font-size: 20px;
    line-height: 1.25 !important;
    font-weight: 700;
    text-align: center;
}

/* ── Back Button Positioning ───────────────────────────────────────── */
.dmax-trial-app .up {
    animation: MoveUpDown 2s linear infinite;
    position: absolute;
    top: 74px !important;
    left: 20px !important;
    z-index: 99;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity 0.2s;
}

@keyframes MoveUpDown {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
}

.dmax-trial-app .up:hover {
    opacity: 1.0;
}

.dmax-trial-app .up img {
    width: 54px;
    height: auto;
}

/* ── Form Inputs (Modern Dark-Mode Aesthetic) ────────────────────────── */
.dmax-trial-app input[type="text"],
.dmax-trial-app input[type="email"],
.dmax-trial-app input[type="tel"],
.dmax-trial-app select {
    background-color: rgba(255, 255, 255, 0.05);
    color: #ffffff;
    height: 54px;
    border-radius: 27px !important;
    padding: 10px 27px 10px 27px !important;
    border: 1px solid rgba(255, 255, 255, 0.15);
    display: block;
    width: 100%;
    margin-bottom: 30px !important;
    box-sizing: border-box;
    transition: border-color 0.25s ease, box-shadow 0.25s ease, background-color 0.25s ease;
    font-size: 15px;
}

.dmax-trial-app select {
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%233cbce6' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6 9 12 15 18 9'%3e%3c/polyline%3e%3c/svg%3e");
    background-repeat: no-repeat !important;
    background-position: right 24px center !important;
    background-size: 16px !important;
    padding-right: 48px !important;
}

.dmax-trial-app select option,
.dmax-trial-app select:focus option {
    background-color: #0c1b26;
    color: #ffffff;
}

.dmax-trial-app ::placeholder {
    color: rgba(255, 255, 255, 0.5) !important;
}

.dmax-trial-app input[type="text"]:focus,
.dmax-trial-app input[type="email"]:focus,
.dmax-trial-app input[type="tel"]:focus,
.dmax-trial-app select:focus {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: var(--global-palette3, #3cbce6) !important;
    box-shadow: 0 0 0 3px rgba(60, 188, 230, 0.25);
    outline: none;
}

/* HIDE RADIO inputs underneath label overlays */
.dmax-trial-app [type=radio] {
    position: absolute;
    opacity: 0;
    width: 100%;
    height: 100%;
    cursor: pointer;
}

/* ── Tab System (CSS Grid Specs) ─────────────────────────────────── */
.dmax-trial-app .tabcontent,
.dmax-trial-app .tabcontent2,
.dmax-trial-app .tabcontent3 {
    display: none;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px clamp(20px, 4vw, 40px);
    padding: 24px 0 0 2.1875rem;
    box-sizing: border-box;
}

.dmax-trial-app .tabcontent[style*="block"],
.dmax-trial-app .tabcontent2[style*="block"],
.dmax-trial-app .tabcontent3[style*="block"] {
    display: grid !important;
}

.dmax-trial-app .tabcontent p,
.dmax-trial-app .tabcontent2 p,
.dmax-trial-app .tabcontent3 p {
    margin: 0;
    font-size: 16px;
    line-height: 1.4;
}

.dmax-trial-app .tab {
    display: flex;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.dmax-trial-app .tab button {
    padding-right: var(--global-kb-spacing-sm) !important;
}

.dmax-trial-app .dmax-store-tab {
    display: inline-flex;
    align-items: center;
    justify-content: flex-start;
    background: transparent !important;
    box-shadow: none !important;
    color: #fff;
    border: 0 !important;
    border-bottom: 2px solid #3cbce636 !important;
    padding: 0 0 8px !important;
    border-radius: 0 !important;
    min-height: auto;
    line-height: 1.35;
    font-weight: 700;
    text-align: left;
    transition: border-bottom-color 0.2s;
}

@media only screen and (max-width: 767px) {
    .dmax-trial-app .dmax-store-tab:not(:first-child) {
        padding-top: 1rem !important;
    }
}

.dmax-trial-app .dmax-store-tab.active {
    border-bottom-color: var(--global-palette1, #105493) !important;
}

.dmax-trial-app .dmax-store-tab:hover,
.dmax-trial-app .dmax-store-tab:focus {
    color: #fff;
    background: transparent !important;
    box-shadow: none !important;
}

.dmax-trial-app .text-primary {
    color: var(--global-palette3, #3cbce6);
}

/* ── #dns Containers ────────────────────────────────────────────── */
.dmax-trial-app #dns,
.dmax-trial-app #dns2 {
    margin: 0 auto;
}

/* ── #sizbo Checkbox Container ─────────────────────────────────────── */
.dmax-trial-app #sizbo {
    vertical-align: top;
    margin: 0 0 24px 0;
    padding-left: 2.1875rem;
}

.dmax-trial-app #sizbo label {
    display: block;
    margin: 0 0 12px !important;
    color: #fff;
    font-weight: 700;
}

.dmax-trial-app #sizbo span {
    display: inline-block;
    margin-right: 24px;
    vertical-align: middle;
}

.dmax-trial-app #sizbo input[type="checkbox"],
.dmax-trial-app #agreement [type=checkbox],
.dmax-trial-app #agreement [type=radio] {
    vertical-align: middle;
    margin-right: 6px;
    width: 20px;
    height: 20px;
    accent-color: var(--global-palette3, #3cbce6);
}

.dmax-trial-app .bold {
    font-weight: 700;
}

/* ── Buttons ─────────────────────────────────────────────────────── */
.dmax-trial-app .btn {
    align-items: center;
    color: #fff;
    display: inline-flex;
    justify-content: center;
    min-height: 54px;
    text-decoration: none;
}

.dmax-trial-app .dmax-store-button,
.dmax-trial-app input.dmax-store-button {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-height: 54px;
    width: auto !important;
    min-width: 148px;
    padding: 0 27px !important;
    border-radius: 27px !important;
    font-weight: 700;
    line-height: 1;
    text-decoration: none;
    white-space: nowrap;
    transition: transform 0.2s, box-shadow 0.2s, background-color 0.2s;
}

.dmax-trial-app .dmax-store-button:hover,
.dmax-trial-app input.dmax-store-button:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(16, 84, 147, 0.4);
}

.dmax-trial-app .buttline .dmax-store-button {
    min-width: 124px;
}

/* ── Animations ─────────────────────────────────────────────────── */
.dmax-trial-app .bigger {
    animation: dmax-grow 1s forwards;
}

.dmax-trial-app .smaller {
    animation: dmax-grow 1s reverse forwards;
}

.dmax-trial-app .bigger1 {
    animation: dmax-grow1 1s forwards;
}

.dmax-trial-app .smaller1 {
    animation: dmax-grow1 1s reverse forwards;
}

.dmax-trial-app .gone {
    height: 0;
    overflow: hidden;
}

@keyframes dmax-grow {
    from { height: 0; }
    to { height: 24px; }
}

@keyframes dmax-grow1 {
    from { height: 0; }
    to { height: 42px; }
}

/* ── Form validation highlights ─────────────────────────────────── */
.dmax-trial-app .missing {
    border: 2px solid red !important;
    background-color: rgba(255, 0, 0, 0.15) !important;
}

.dmax-trial-app .missingbox {
    outline: 2px solid red !important;
}

/* ── Agreement Section ─────────────────────────────────────────────── */
.dmax-trial-app #agreement {
    color: #fff;
}

.dmax-trial-app #agreement table {
    background: transparent;
}

.dmax-trial-app #agreement td {
    border: none;
}

/* ── Hero Image & Layout (Step 1) ─────────────────────────────────── */
.dmax-trial-app .hero .img-over {
    display: flex;
    height: 100%;
    position: relative;
}

.dmax-trial-app .hero .img-over img {
    animation: none !important;
    margin: auto !important;
    transition: 0.3s;
}

/* ── Hover effects ────────────────────────────────────────────────── */
.dmax-trial-app .growl,
.dmax-trial-app .growr,
.dmax-trial-app .grow {
    transition: all .2s ease-in-out;
}

.dmax-trial-app .grow:hover {
    transform: scale(1.05);
}

/* ── Comparison Button ────────────────────────────────────────────── */
.dmax-trial-app .comparison-button {
    display: flex !important;
    justify-content: center !important;
    clear: both;
    padding: clamp(28px, 4vw, 44px) 0;
    margin: clamp(28px, 4vw, 44px) auto 0 !important;
    width: 100% !important;
}

/* ── Modal ────────────────────────────────────────────────────────── */
.dmax-trial-app .modal {
    display: none;
    position: fixed;
    z-index: 100;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.4) !important;
}

.dmax-trial-app .modal-content {
    background-color: rgb(39, 42, 99);
    margin: 15% auto;
    padding: 24px;
    border: 2px solid var(--global-palette3, #3cbce6) !important;
    border-radius: 20px;
    width: 950px;
    max-width: 95%;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.dmax-trial-app .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.dmax-trial-app .close:hover,
.dmax-trial-app .close:focus {
    color: #fff;
    text-decoration: none;
    cursor: pointer;
}

/* ── Sticky Package Sidebar Responsiveness ────────────────────────────── */
.dmax-trial-app #package {
    background: rgba(8, 38, 60, 0.45);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 24px;
    box-sizing: border-box;
    box-shadow: 0 10px 40px 0 rgba(0, 0, 0, 0.5);
    position: fixed;
    top: 130px;
    right: 100px;
    z-index: 98;
    max-width: 333px;
    width: 100%;
}

@media (min-width: 992px) and (max-width: 1599px) {
    .dmax-trial-app #dns, 
    .dmax-trial-app #dns2 {
        margin-left: 20px !important;
        margin-right: 0 !important;
        max-width: calc(100% - 380px) !important;
        width: calc(100% - 380px) !important;
    }
    .dmax-trial-app #package {
        right: 20px !important;
        top: 130px !important;
    }
}

@media (min-width: 768px) and (max-width: 991px) {
    .dmax-trial-app #dns, 
    .dmax-trial-app #dns2 {
        margin: 0 auto !important;
        max-width: 100% !important;
        width: 100% !important;
    }
    .dmax-trial-app #package {
        position: static !important;
        margin: 40px auto !important;
        max-width: 333px !important;
        display: block !important;
        z-index: 98;
    }
}

/* ── Disclaimer ──────────────────────────────────────────────────────── */
.dmax-trial-disclaimer {
    color: rgba(255, 255, 255, 0.6);
    margin-left: 27px;
    display: block;
    clear: both;
    padding-top: 10px;
    font-size: 13px;
}

/* ── Responsive Mobile Media Queries ─────────────────────────────────── */
@media only screen and (max-width: 767px) {
    .dmax-trial-app .title-shift,
    .dmax-trial-app .title-shift-2 {
        padding-left: 0 !important;
    }

    .dmax-trial-app #page4 .content-box,
    .dmax-trial-app #page2 .content-box {
        grid-template-columns: 1fr;
        gap: 24px;
    }

    .dmax-trial-app .xray {
        width: 100%;
        box-sizing: border-box;
    }

    .dmax-trial-app .up,
    .dmax-trial-app .hide,
    .dmax-trial-app .hideflex,
    .dmax-trial-app #package {
        display: none !important;
    }

    .dmax-trial-app .hero,
    .dmax-trial-app .marg,
    .dmax-trial-app section {
        padding-left: 16px;
        padding-right: 16px;
    }

    .dmax-trial-app .topper {
        padding-top: 145px !important;
    }

    .dmax-trial-app .tabcontent,
    .dmax-trial-app .tabcontent2,
    .dmax-trial-app .tabcontent3 {
        grid-template-columns: 1fr;
        gap: 12px;
        padding-left: 1rem;
    }
    
    .dmax-trial-app #sizbo {
        padding-left: 1rem;
    }

    .dmax-trial-app #sizbo span {
        display: block;
        margin-bottom: 12px;
    }
}