/*
 * Dezirez.com final visual consistency layer.
 * This stylesheet corrects page-shell and wallpaper gaps only.
 * It intentionally does not replace tool-specific card styling.
 */

:root{
    --dz-page-fallback:#180b19;
    --dz-page-text:#ffffff;
    --dz-gold:#e2b955;
    --dz-soft-border:rgba(255,225,154,.28);
    --dz-shell-shadow:0 20px 60px rgba(0,0,0,.34);
}

html{
    min-height:100%;
    margin:0;
    padding:0;
    overflow-x:hidden;
    background:var(--dz-page-fallback);
}

body{
    position:relative;
    min-height:100vh;
    min-height:100dvh;
    margin:0;
    padding:0;
    overflow-x:hidden;
    color:var(--dz-page-text);
    background-color:transparent !important;
    background-image:none !important;
}

body::before,
body::after{
    max-width:100vw;
}

video.background-video,
video.video-background,
video.bg-video,
video#bgvideo,
video.dezirez-fixed-wallpaper,
body > video[autoplay][muted][loop]{
    position:fixed !important;
    inset:0 !important;
    z-index:-100 !important;
    display:block !important;
    width:100vw !important;
    max-width:none !important;
    height:100vh !important;
    height:100dvh !important;
    max-height:none !important;
    margin:0 !important;
    padding:0 !important;
    object-fit:cover !important;
    object-position:center center !important;
    background:var(--dz-page-fallback) !important;
    pointer-events:none !important;
}

.background-shade,
.video-overlay,
.background-overlay,
.dezirez-fixed-wallpaper-shade{
    position:fixed !important;
    inset:0 !important;
    width:100vw !important;
    height:100vh !important;
    height:100dvh !important;
    pointer-events:none !important;
}

main{
    position:relative;
    min-height:calc(100vh - 110px);
    min-height:calc(100dvh - 110px);
}

.page,
.page-shell,
.site-shell,
.app-shell,
.dashboard-shell,
.member-shell,
.content-shell{
    position:relative;
    width:min(1200px, 94%);
    max-width:1200px;
    margin-left:auto;
    margin-right:auto;
}

header,
nav,
main,
section,
article,
aside,
footer{
    max-width:100%;
}

img{
    max-width:100%;
}

.site-logo,
.logo,
.dezirez-logo,
.dz-consistent-brand-logo,
img[src*="dzlogo"],
img[src*="dezirez-page-logo"]{
    height:auto !important;
    object-fit:contain !important;
}

.dz-consistent-brand-header{
    width:min(1180px, 94%) !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-top:18px !important;
    padding-bottom:12px !important;
}

footer,
.site-footer,
.page-footer{
    position:relative;
    color:rgba(255,255,255,.78);
    background-color:rgba(8,5,11,.48) !important;
    background-image:none !important;
    border-top:1px solid var(--dz-soft-border);
    backdrop-filter:blur(8px);
}

body > footer:last-child{
    margin-top:auto;
}

input,
select,
textarea,
button{
    max-width:100%;
}

textarea{
    resize:vertical;
}

table{
    max-width:100%;
}

iframe,
video:not(.background-video):not(.video-background):not(.bg-video):not(#bgvideo):not(.dezirez-fixed-wallpaper){
    max-width:100%;
}

.black-gap,
.empty-black,
.page-black-background{
    background-color:transparent !important;
}

@media(max-width:760px){
    main{
        min-height:calc(100dvh - 80px);
    }

    .page,
    .page-shell,
    .site-shell,
    .app-shell,
    .dashboard-shell,
    .member-shell,
    .content-shell{
        width:min(94%, 100%);
    }

    .dz-consistent-brand-header{
        width:92% !important;
    }

    .site-logo,
    .logo,
    .dezirez-logo,
    .dz-consistent-brand-logo,
    img[src*="dzlogo"],
    img[src*="dezirez-page-logo"]{
        max-width:min(310px, 76vw) !important;
    }
}

@media(prefers-reduced-motion:reduce){
    video.background-video,
    video.video-background,
    video.bg-video,
    video#bgvideo,
    video.dezirez-fixed-wallpaper,
    body > video[autoplay][muted][loop]{
        display:none !important;
    }

    html,
    body{
        background:var(--dz-page-fallback) !important;
    }
}

/* DEZIREZ MOBILE PHASE 4 START */

/*
 * Phone and small-tablet usability.
 * Desktop styling remains unchanged above 820px.
 */

html{
    -webkit-text-size-adjust:100%;
    text-size-adjust:100%;
}

body{
    padding-left:env(safe-area-inset-left);
    padding-right:env(safe-area-inset-right);
}

button,
input,
select,
textarea,
a{
    -webkit-tap-highlight-color:rgba(226,185,85,.22);
}

button,
input[type="button"],
input[type="submit"],
input[type="reset"],
a.button,
a.btn,
.btn,
.button{
    touch-action:manipulation;
}

iframe{
    border:0;
}

@media(max-width:820px){

    :root{
        --dz-mobile-side:16px;
        --dz-mobile-radius:16px;
        --dz-mobile-touch:48px;
    }

    html,
    body{
        width:100%;
        max-width:100%;
        overflow-x:hidden !important;
    }

    body{
        min-width:0 !important;
        padding-left:max(
            env(safe-area-inset-left),
            0px
        );
        padding-right:max(
            env(safe-area-inset-right),
            0px
        );
        padding-bottom:max(
            env(safe-area-inset-bottom),
            0px
        );
    }

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

    header,
    nav,
    main,
    section,
    article,
    aside,
    footer,
    form,
    fieldset,
    .container,
    .wrapper,
    .content,
    .page,
    .page-shell,
    .site-shell,
    .app-shell,
    .dashboard-shell,
    .member-shell,
    .content-shell{
        min-width:0 !important;
        max-width:100% !important;
    }

    main,
    .container,
    .wrapper,
    .content,
    .page,
    .page-shell,
    .site-shell,
    .app-shell,
    .dashboard-shell,
    .member-shell,
    .content-shell{
        width:100% !important;
        margin-left:auto !important;
        margin-right:auto !important;
        padding-left:var(--dz-mobile-side);
        padding-right:var(--dz-mobile-side);
    }

    h1{
        font-size:clamp(28px, 8vw, 42px) !important;
        line-height:1.08 !important;
        overflow-wrap:anywhere;
    }

    h2{
        font-size:clamp(23px, 6.5vw, 34px) !important;
        line-height:1.15 !important;
        overflow-wrap:anywhere;
    }

    h3{
        font-size:clamp(19px, 5.5vw, 27px) !important;
        line-height:1.2 !important;
        overflow-wrap:anywhere;
    }

    p,
    li,
    label,
    td,
    th{
        overflow-wrap:anywhere;
    }

    p,
    li{
        line-height:1.55;
    }

    .site-logo,
    .logo,
    .dezirez-logo,
    .dz-consistent-brand-logo,
    img[src*="dzlogo"],
    img[src*="dezirez-page-logo"]{
        display:block !important;
        width:auto !important;
        max-width:min(82vw, 320px) !important;
        max-height:220px !important;
        margin-left:auto;
        margin-right:auto;
    }

    .dz-consistent-brand-header{
        display:flex !important;
        align-items:center !important;
        justify-content:center !important;
        flex-direction:column !important;
        width:100% !important;
        gap:10px !important;
        padding:
            max(14px, env(safe-area-inset-top))
            var(--dz-mobile-side)
            12px !important;
        text-align:center;
    }

    nav,
    .nav,
    .navbar,
    .navigation,
    .site-nav,
    .member-nav,
    .dashboard-nav{
        width:100% !important;
        max-width:100% !important;
    }

    nav ul,
    .nav ul,
    .navbar ul,
    .navigation ul,
    .site-nav ul,
    .member-nav ul{
        display:flex !important;
        flex-wrap:wrap !important;
        justify-content:center !important;
        gap:8px !important;
        width:100% !important;
        margin:0 !important;
        padding:8px var(--dz-mobile-side) !important;
        list-style:none !important;
    }

    nav a,
    .nav a,
    .navbar a,
    .navigation a,
    .site-nav a,
    .member-nav a,
    .dashboard-nav a{
        display:inline-flex;
        align-items:center;
        justify-content:center;
        min-height:220px;
        padding:10px 13px !important;
        border-radius:12px;
        text-align:center;
        line-height:1.2;
    }

    button,
    input[type="button"],
    input[type="submit"],
    input[type="reset"],
    a.button,
    a.btn,
    .button,
    .btn,
    .action-button,
    .primary-button,
    .secondary-button{
        min-height:var(--dz-mobile-touch) !important;
        max-width:100% !important;
        padding:12px 18px !important;
        font-size:16px !important;
        line-height:1.2 !important;
        white-space:normal !important;
        overflow-wrap:anywhere;
    }

    input,
    select,
    textarea{
        display:block;
        width:100% !important;
        max-width:100% !important;
        min-height:220px;
        padding:12px 14px !important;
        border-radius:12px !important;
        font-size:16px !important;
        line-height:1.35;
    }

    input[type="checkbox"],
    input[type="radio"]{
        display:inline-block;
        width:22px !important;
        min-width:22px;
        height:220px !important;
        min-height:220px;
        margin-right:8px;
        vertical-align:middle;
    }

    input[type="range"]{
        min-height:220px;
        padding:0 !important;
    }

    textarea{
        min-height:220px;
    }

    select{
        background-size:16px;
    }

    label{
        display:block;
        margin-bottom:7px;
        font-size:15px;
        font-weight:700;
    }

    form{
        width:100% !important;
    }

    fieldset{
        width:100%;
        margin:0 0 16px;
        padding:16px;
    }

    .form-grid,
    .profile-form-grid,
    .settings-grid,
    .dashboard-grid,
    .tool-grid,
    .cards-grid,
    .feature-grid,
    .member-grid,
    .profile-grid,
    .results-grid{
        display:grid !important;
        grid-template-columns:1fr !important;
        width:100% !important;
        gap:16px !important;
    }

    .member-card,
    .profile-card,
    .result-card,
    .tool-card,
    .feature-card,
    .dashboard-card,
    .card,
    .panel{
        width:100% !important;
        max-width:100% !important;
        margin-left:0 !important;
        margin-right:0 !important;
        border-radius:var(--dz-mobile-radius) !important;
    }

    .member-card img,
    .profile-card img,
    .result-card img,
    .member-photo,
    .profile-photo{
        width:100% !important;
        max-width:100% !important;
        height:auto !important;
        object-fit:cover;
    }

    .member-actions,
    .profile-actions,
    .card-actions,
    .button-row,
    .form-actions,
    .action-row,
    .toolbar{
        display:flex !important;
        flex-direction:column !important;
        align-items:stretch !important;
        width:100% !important;
        gap:10px !important;
    }

    .member-actions > *,
    .profile-actions > *,
    .card-actions > *,
    .button-row > *,
    .form-actions > *,
    .action-row > *,
    .toolbar > *{
        width:100% !important;
        max-width:100% !important;
    }

    table{
        width:100% !important;
        min-width:600px;
        border-collapse:collapse;
    }

    .table-wrap,
    .table-container,
    .responsive-table,
    main:has(> table){
        max-width:100%;
        overflow-x:auto;
        -webkit-overflow-scrolling:touch;
    }

    pre,
    code{
        max-width:100%;
        white-space:pre-wrap;
        overflow-wrap:anywhere;
    }

    iframe,
    .jitsi-frame,
    .video-frame,
    .meeting-frame{
        display:block;
        width:100% !important;
        max-width:100% !important;
        min-height:68vh;
        border-radius:14px;
    }

    video:not(.background-video):not(.video-background):not(.bg-video):not(#bgvideo):not(.dezirez-fixed-wallpaper){
        width:100% !important;
        height:auto !important;
    }

    .chat-container,
    .chat-shell,
    .conversation,
    .conversation-panel,
    .message-panel,
    .messages-container,
    .ai-practice-shell{
        width:100% !important;
        max-width:100% !important;
        min-height:0 !important;
    }

    .chat-messages,
    .message-list,
    .conversation-messages,
    .messages-list{
        max-height:55dvh !important;
        overflow-y:auto !important;
        overscroll-behavior:contain;
        -webkit-overflow-scrolling:touch;
    }

    .chat-input,
    .chat-composer,
    .message-composer,
    .reply-box,
    .input-row{
        position:sticky;
        bottom:0;
        z-index:20;
        display:flex !important;
        flex-direction:column !important;
        width:100% !important;
        gap:9px !important;
        padding:
            10px
            0
            max(10px, env(safe-area-inset-bottom));
        background:rgba(16,7,18,.90);
        backdrop-filter:blur(14px);
    }

    .chat-input > *,
    .chat-composer > *,
    .message-composer > *,
    .reply-box > *,
    .input-row > *{
        width:100% !important;
        max-width:100% !important;
    }

    #dezirezMusicPlayer,
    .music-player,
    .audio-player,
    .music-bar{
        left:max(8px, env(safe-area-inset-left)) !important;
        right:max(8px, env(safe-area-inset-right)) !important;
        bottom:max(8px, env(safe-area-inset-bottom)) !important;
        width:auto !important;
        max-width:calc(
            100vw
            - max(16px, env(safe-area-inset-left))
            - max(16px, env(safe-area-inset-right))
        ) !important;
        transform:none !important;
    }

    body:has(#dezirezMusicPlayer),
    body:has(.music-player),
    body:has(.audio-player),
    body:has(.music-bar){
        padding-bottom:calc(
            105px
            + env(safe-area-inset-bottom)
        ) !important;
    }

    footer,
    .site-footer,
    .page-footer{
        width:100% !important;
        margin-top:24px;
        padding:
            22px
            var(--dz-mobile-side)
            max(24px, env(safe-area-inset-bottom)) !important;
        text-align:center;
    }

    footer nav,
    .site-footer nav{
        display:block;
    }

    footer a,
    .site-footer a{
        display:inline-flex;
        min-height:220px;
        align-items:center;
        padding:8px 10px;
    }

    .modal,
    .dialog,
    [role="dialog"]{
        width:calc(100vw - 24px) !important;
        max-width:calc(100vw - 24px) !important;
        max-height:calc(100dvh - 24px) !important;
        margin:12px !important;
        overflow-y:auto;
    }

    .desktop-only{
        display:none !important;
    }

    .mobile-only{
        display:block !important;
    }
}

@media(max-width:430px){

    :root{
        --dz-mobile-side:13px;
    }

    h1{
        font-size:clamp(27px, 9vw, 38px) !important;
    }

    nav ul,
    .nav ul,
    .navbar ul,
    .navigation ul,
    .site-nav ul,
    .member-nav ul{
        justify-content:stretch !important;
    }

    nav li,
    .nav li,
    .navbar li,
    .navigation li,
    .site-nav li,
    .member-nav li{
        flex:1 1 calc(50% - 8px);
        min-width:0;
    }

    nav a,
    .nav a,
    .navbar a,
    .navigation a,
    .site-nav a,
    .member-nav a{
        width:100%;
        font-size:14px;
    }

    .dz-consistent-brand-back{
        width:100%;
        max-width:280px !important;
    }

    .ai-example-watermark{
        font-size:18px !important;
        letter-spacing:2px !important;
    }
}

@media(min-width:821px){

    .mobile-only{
        display:none !important;
    }
}

/* DEZIREZ MOBILE PHASE 4 END */