/* =========================================================
   THH DELETE ACCOUNT PAGE
========================================================= */

:root{

    --thh-blue:#04113a;
    --thh-gold:#FFD700;

    --text-dark:#24304f;
    --text-soft:#5f6d90;

    --danger:#ff4b4b;
    --danger-dark:#d50000;
}

/* =========================================================
   PAGE
========================================================= */

.delete-page{

    min-height:100vh;

    padding-top:120px;
    padding-bottom:70px;
}

/* =========================================================
   CONTAINER
========================================================= */

.delete-container{

    width:100%;
    max-width:900px;

    margin:auto;

    padding-left:20px;
    padding-right:20px;
}

/* =========================================================
   CARD
========================================================= */

.delete-card{

    background:
        rgba(255,255,255,0.88);

    backdrop-filter:blur(18px);
    -webkit-backdrop-filter:blur(18px);

    border:
        1px solid rgba(255,255,255,0.45);

    border-radius:36px;

    padding:60px 45px;

    text-align:center;

    box-shadow:
        0 18px 55px rgba(0,0,0,0.08);
}

/* =========================================================
   ICON
========================================================= */

.delete-icon{

    width:92px;
    height:92px;

    margin:auto auto 28px;

    border-radius:50%;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:2.5rem;

    background:
        linear-gradient(
            135deg,
            var(--danger),
            var(--danger-dark)
        );

    color:#ffffff;

    box-shadow:
        0 16px 40px rgba(255,0,0,0.18);
}

/* =========================================================
   TITLE
========================================================= */

.delete-card h1{

    margin-top:0;
    margin-bottom:18px;

    font-size:3.2rem;
    font-weight:800;
    line-height:1.1;

    color:var(--thh-blue);
}

/* =========================================================
   TEXT
========================================================= */

.delete-card p{

    color:var(--text-soft);

    font-size:15px;
    line-height:1.95;

    margin-bottom:18px;
}

/* =========================================================
   INFO BOX
========================================================= */

.delete-info{

    margin-top:38px;

    padding:30px;

    border-radius:28px;

    background:
        rgba(255,255,255,0.7);

    border:
        1px solid rgba(0,0,0,0.05);

    text-align:left;

    box-shadow:
        0 10px 26px rgba(0,0,0,0.04);
}

.delete-info h3{

    margin-top:0;
    margin-bottom:18px;

    color:var(--thh-blue);

    font-size:1.18rem;
    font-weight:700;
}

.delete-info ul{

    margin:0;
    padding-left:20px;
}

.delete-info ul li{

    color:var(--text-soft);

    margin-bottom:14px;

    line-height:1.9;
}

/* =========================================================
   BUTTONS
========================================================= */

.delete-actions{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:18px;

    margin-top:42px;

    flex-wrap:wrap;
}

.delete-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:230px;

    padding:16px 26px;

    border-radius:22px;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:all .3s ease;
}

/* =========================================================
   LOGIN BUTTON
========================================================= */

.login-btn{

    background:
        linear-gradient(
            135deg,
            #FFD700,
            #ffec99
        );

    color:#04113a;

    box-shadow:
        0 14px 30px rgba(255,215,0,0.2);
}

.login-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 18px 40px rgba(255,215,0,0.28);
}

/* =========================================================
   HOME BUTTON
========================================================= */

.home-btn{

    background:#ffffff;

    color:var(--text-dark);

    border:
        1px solid rgba(0,0,0,0.06);

    box-shadow:
        0 8px 20px rgba(0,0,0,0.05);
}

.home-btn:hover{

    transform:translateY(-3px);

    box-shadow:
        0 14px 30px rgba(0,0,0,0.08);
}

/* =========================================================
   RESPONSIVE
========================================================= */

@media(max-width:768px){

    .delete-page{

        padding-top:90px;
        padding-bottom:50px;
    }

    .delete-container{

        padding-left:16px;
        padding-right:16px;
    }

    .delete-card{

        padding:44px 24px;

        border-radius:30px;
    }

    .delete-card h1{

        font-size:2.3rem;
    }

    .delete-card p{

        font-size:14px;
    }

    .delete-actions{

        flex-direction:column;
    }

    .delete-btn{

        width:100%;
    }

    .delete-info{

        padding:24px;
    }
}


/* =========================================================
   THH DOWNLOAD APP PAGE
========================================================= */
/* =========================================================
   THH DOWNLOAD APP PAGE
========================================================= */

:root{

    --thh-blue:#04113a;
    --thh-gold:#FFD700;
    --thh-cyan:#76edfa;

    --white:#ffffff;

    --text-soft:rgba(255,255,255,0.72);
}

/* =========================================================
   PAGE
========================================================= */

.download-page{

    position:relative;

    overflow:hidden;

    min-height:100vh;

    padding-top:120px;
    padding-bottom:90px;
}

/* =========================================================
   CONTAINER
========================================================= */

.download-container{

    width:100%;
    max-width:1320px;

    margin:auto;

    padding-left:24px;
    padding-right:24px;
}

/* =========================================================
   HERO
========================================================= */

.download-hero{

    position:relative;

    padding:75px 70px;

    border-radius:42px;

    background:
        rgba(255,255,255,0.06);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 24px 80px rgba(0,0,0,0.28);

    overflow:hidden;

    margin-bottom:42px;
}

/* =========================================================
   HERO TOP
========================================================= */

.hero-top{

    text-align:center;

    margin-bottom:55px;
}

/* =========================================================
   BRAND
========================================================= */

.hero-brand{

    color:#ffffff;

    font-family:"Times New Roman", serif;

    font-size:2.8rem;
    font-weight:800;

    letter-spacing:5px;

    text-transform:uppercase;

    margin-bottom:24px;

    text-shadow:
        0 4px 20px rgba(0,0,0,0.28);
}

/* =========================================================
   BADGE
========================================================= */

.download-badge{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    gap:8px;

    padding:12px 18px;

    border-radius:999px;

    background:
        rgba(118,237,250,0.08);

    border:
        1px solid rgba(118,237,250,0.16);

    color:#76edfa;

    font-size:13px;
    font-weight:700;

    margin-bottom:28px;
}

/* =========================================================
   TITLE
========================================================= */

.download-hero h1{

    margin:0;

    color:#ffffff;

    font-size:3.3rem;
    line-height:1.05;
    font-weight:800;

    letter-spacing:-2px;

    max-width:900px;

    margin-inline:auto;
}

/* =========================================================
   HERO MAIN
========================================================= */

.hero-main{

    display:grid;

    grid-template-columns:1fr 1fr;

    align-items:center;

    gap:60px;

    margin-bottom:60px;
}

/* =========================================================
   HERO LEFT
========================================================= */

.hero-left{

    display:flex;
    flex-direction:column;

    justify-content:center;
}

/* =========================================================
   DESCRIPTION
========================================================= */

.hero-description{

    margin:0 0 34px;

    color:var(--text-soft);

    font-size:1.08rem;
    line-height:2;
}

/* =========================================================
   STORE BUTTONS
========================================================= */

.store-buttons{

    display:flex;
    flex-direction:column;

    gap:18px;

    width:100%;
    max-width:360px;
}

.store-btn{

    display:flex;
    align-items:center;

    gap:16px;

    padding:18px 22px;

    border-radius:26px;

    text-decoration:none;

    transition:all .3s ease;

    border:
        1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(18px);
}

.store-btn:hover{

    transform:
        translateY(-4px);

    box-shadow:
        0 18px 50px rgba(0,0,0,0.35);
}

.playstore-btn{

    background:
        linear-gradient(
            135deg,
            rgba(255,215,0,0.18),
            rgba(255,215,0,0.08)
        );

    color:#ffffff;

    box-shadow:
        0 14px 40px rgba(255,215,0,0.14);
}

.ios-btn{

    background:
        rgba(255,255,255,0.05);

    color:#ffffff;

    box-shadow:
        0 14px 40px rgba(0,0,0,0.2);
}

.store-icon{

    width:28px;
    height:28px;

    object-fit:contain;

    flex-shrink:0;
}

.store-text{

    display:flex;
    flex-direction:column;
}

.store-text span{

    font-size:11px;

    opacity:.7;

    text-transform:uppercase;

    letter-spacing:.7px;
}

.store-text strong{

    font-size:1.15rem;
    font-weight:700;
}

/* =========================================================
   HERO RIGHT
========================================================= */

.hero-right{

    position:relative;

    display:flex;
    align-items:center;
    justify-content:center;
}

/* =========================================================
   GLOW
========================================================= */

.phone-glow{

    position:absolute;

    width:520px;
    height:520px;

    border-radius:50%;

    background:
        radial-gradient(
            circle,
            rgba(255,215,0,0.16),
            transparent 70%
        );

    filter:blur(45px);

    z-index:1;
}

/* =========================================================
   APP PREVIEW
========================================================= */

.app-preview-wrap{

    position:relative;

    width:100%;
    max-width:520px;

    z-index:2;

    animation:floatPhone 6s ease-in-out infinite;
}

.app-preview-wrap img{

    width:100%;

    display:block;

    border-radius:38px;

    box-shadow:
        0 30px 90px rgba(0,0,0,0.42);
}

@keyframes floatPhone{

    0%,100%{

        transform:translateY(0px);
    }

    50%{

        transform:translateY(-12px);
    }
}

/* =========================================================
   QR SECTION
========================================================= */

.qr-download-section{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:28px;
}

/* =========================================================
   QR CARD
========================================================= */

.download-qr-card{

    display:flex;
    flex-direction:column;
    align-items:center;

    text-align:center;

    padding:34px 28px;

    border-radius:34px;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(18px);

    transition:all .3s ease;
}

.download-qr-card:hover{

    transform:
        translateY(-5px);

    box-shadow:
        0 22px 55px rgba(0,0,0,0.28);
}

/* =========================================================
   QR PLATFORM
========================================================= */

.qr-platform{

    display:flex;
    align-items:center;
    justify-content:center;

    gap:10px;

    margin-bottom:22px;
}

.qr-platform img{

    width:28px;
    height:28px;

    object-fit:contain;
}

.qr-platform span{

    color:#ffffff;

    font-size:1.2rem;
    font-weight:700;
}

/* =========================================================
   QR IMAGE
========================================================= */

.qr-image{

    width:170px;
    height:170px;

    object-fit:contain;

    background:#ffffff;

    padding:10px;

    border-radius:20px;

    margin-bottom:24px;
}

/* =========================================================
   QR BUTTON
========================================================= */

.qr-download-btn{

    display:inline-flex;
    align-items:center;
    justify-content:center;

    min-width:240px;

    padding:16px 24px;

    border-radius:22px;

    text-decoration:none;

    font-size:15px;
    font-weight:700;

    transition:all .3s ease;
}

.qr-download-btn:hover{

    transform:
        translateY(-3px);
}

.android-download-btn{

    background:
        linear-gradient(
            135deg,
            #FFD700,
            #ffea8a
        );

    color:#04113a;

    box-shadow:
        0 14px 34px rgba(255,215,0,0.22);
}

.ios-download-btn{

    background:
        rgba(255,255,255,0.08);

    color:#ffffff;

    border:
        1px solid rgba(255,255,255,0.08);

    box-shadow:
        0 14px 34px rgba(0,0,0,0.2);
}

/* =========================================================
   FEATURES
========================================================= */

.features-grid{

    display:grid;

    grid-template-columns:
        repeat(3,1fr);

    gap:30px;
}

/* =========================================================
   FEATURE CARD
========================================================= */

.feature-card{

    position:relative;

    padding:38px;

    border-radius:34px;

    background:
        rgba(255,255,255,0.05);

    border:
        1px solid rgba(255,255,255,0.08);

    backdrop-filter:blur(18px);

    box-shadow:
        0 14px 40px rgba(0,0,0,0.18);

    transition:all .35s ease;
}

.feature-card:hover{

    transform:
        translateY(-6px);

    border-color:
        rgba(255,215,0,0.22);

    box-shadow:
        0 24px 60px rgba(0,0,0,0.32);
}

/* =========================================================
   FEATURE ICON
========================================================= */

.feature-icon{

    font-size:2.7rem;

    margin-bottom:18px;
}

/* =========================================================
   FEATURE TITLE
========================================================= */

.feature-card h3{

    margin:0 0 14px;

    color:#ffffff;

    font-size:1.22rem;
    font-weight:700;
}

/* =========================================================
   FEATURE TEXT
========================================================= */

.feature-card p{

    margin:0;

    color:rgba(255,255,255,0.72);

    line-height:1.9;
}

/* =========================================================
   TABLET
========================================================= */

@media(max-width:1100px){

    .hero-main{

        grid-template-columns:1fr;

        gap:50px;
    }

    .hero-left{

        align-items:center;

        text-align:center;
    }

    .store-buttons{

        max-width:420px;
    }

    .qr-download-section{

        grid-template-columns:1fr;
    }

    .features-grid{

        grid-template-columns:1fr 1fr;
    }
}

/* =========================================================
   MOBILE
========================================================= */

@media(max-width:768px){

    .download-page{

        padding-top:90px;
        padding-bottom:50px;
    }

    .download-container{

        padding-left:16px;
        padding-right:16px;
    }

    .download-hero{

        padding:44px 24px;

        border-radius:32px;
    }

    .hero-brand{

        font-size:1.9rem;

        letter-spacing:2px;
    }

    .download-badge{

        font-size:12px;
    }

    .download-hero h1{

        font-size:2.7rem;

        line-height:1.1;

        letter-spacing:-1px;
    }

    .hero-main{

        gap:40px;

        margin-bottom:42px;
    }

    .hero-description{

        font-size:15px;

        line-height:1.9;
    }

    .store-buttons{

        max-width:100%;
    }

    .store-btn{

        padding:16px 18px;
    }

    .store-text strong{

        font-size:1rem;
    }

    .app-preview-wrap{

        max-width:320px;
    }

    .phone-glow{

        width:320px;
        height:320px;
    }

    .download-qr-card{

        padding:28px 22px;
    }

    .qr-image{

        width:150px;
        height:150px;
    }

    .qr-download-btn{

        width:100%;

        min-width:unset;
    }

    .features-grid{

        grid-template-columns:1fr;
    }

    .feature-card{

        padding:28px;
    }
}