/* =========================================================
   VIRALMINT AI — ACCOUNT MOBILE
   Mobile-only Account page styling
========================================================= */

@media (max-width: 768px) {

    /* =====================================================
       PAGE / MAIN CONTAINER
    ===================================================== */

    body {
        overflow-x: hidden;
    }

    .dashboard-main {
        width: 100% !important;
        max-width: 100% !important;

        margin: 0 !important;

        padding:
            24px
            16px
            48px !important;

        box-sizing: border-box;
    }


    /* =====================================================
       ACCOUNT HEADER
    ===================================================== */

    .dashboard-header {
        width: 100% !important;

        margin: 0 0 24px !important;

        padding: 0 !important;
    }

    .dashboard-label {
        margin-bottom: 7px !important;

        font-size: 10px !important;

        font-weight: 700 !important;

        letter-spacing: 0.12em !important;

        color: rgba(255,255,255,0.48) !important;
    }

    .dashboard-title {
        margin: 0 !important;

        font-size: 28px !important;

        line-height: 1.12 !important;

        letter-spacing: -0.04em !important;

        font-weight: 750 !important;
    }

    .dashboard-subtitle {
        max-width: 340px !important;

        margin: 9px 0 0 !important;

        font-size: 13px !important;

        line-height: 1.55 !important;

        color: rgba(255,255,255,0.52) !important;
    }


    /* =====================================================
       ACCOUNT GRID
    ===================================================== */

    .account-grid {
        width: 100% !important;

        display: flex !important;

        flex-direction: column !important;

        gap: 14px !important;

        margin-top: 0 !important;
    }


    /* =====================================================
       ACCOUNT CARDS
    ===================================================== */

    .account-card {
        width: 100% !important;

        min-width: 0 !important;

        padding: 18px !important;

        border-radius: 17px !important;

        box-sizing: border-box !important;

        background:
            rgba(255,255,255,0.027) !important;

        border:
            1px solid rgba(255,255,255,0.075) !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,0.12) !important;

        backdrop-filter: blur(12px) !important;

        transform: none !important;
    }

    .account-card:hover {
        transform: none !important;

        box-shadow:
            0 10px 30px rgba(0,0,0,0.12) !important;
    }


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

    .account-card h2 {
        margin: 0 0 16px !important;

        font-size: 16px !important;

        line-height: 1.25 !important;

        font-weight: 700 !important;

        letter-spacing: -0.02em !important;
    }


    /* =====================================================
       PROFILE
    ===================================================== */

    .profile-section {
        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: flex-start !important;

        gap: 14px !important;

        margin-bottom: 18px !important;
    }

    .profile-avatar {
        width: 64px !important;
        height: 64px !important;

        min-width: 64px !important;

        border-width: 2px !important;

        box-sizing: border-box !important;
    }

    .avatar-placeholder {
        font-size: 1.65rem !important;
    }

    #uploadPhotoBtn {
        width: auto !important;

        min-height: 38px !important;

        padding:
            0 13px !important;

        margin: 0 !important;

        border-radius: 10px !important;

        font-size: 12px !important;

        white-space: nowrap !important;
    }


    /* =====================================================
       ACCOUNT INFORMATION
    ===================================================== */

    .account-info {
        display: flex !important;

        flex-direction: column !important;

        gap: 0 !important;

        width: 100% !important;
    }

    .info-row {
        width: 100% !important;

        min-height: 42px !important;

        padding: 10px 0 !important;

        margin: 0 !important;

        display: flex !important;

        flex-direction: row !important;

        align-items: center !important;

        justify-content: space-between !important;

        gap: 12px !important;

        box-sizing: border-box !important;
    }

    .info-row span {
        min-width: 0 !important;

        font-size: 12px !important;

        line-height: 1.35 !important;

        color: rgba(255,255,255,0.48) !important;
    }

    .info-row strong {
        min-width: 0 !important;

        max-width: 62% !important;

        font-size: 12px !important;

        line-height: 1.35 !important;

        text-align: right !important;

        color: rgba(255,255,255,0.88) !important;

        overflow-wrap: anywhere !important;
    }


    /* =====================================================
       CREATOR BIO
    ===================================================== */

    .bio-section {
        margin-top: 18px !important;

        gap: 8px !important;
    }

    .bio-section label {
        font-size: 12px !important;

        font-weight: 600 !important;

        color: rgba(255,255,255,0.72) !important;
    }

    .bio-section textarea {
        width: 100% !important;

        min-height: 82px !important;

        padding: 12px !important;

        border-radius: 11px !important;

        box-sizing: border-box !important;

        font-size: 12px !important;

        line-height: 1.5 !important;
    }


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

    .account-btn {
        width: 100% !important;

        min-height: 40px !important;

        margin-top: 14px !important;

        padding:
            0 14px !important;

        border-radius: 10px !important;

        font-size: 12px !important;

        line-height: 1 !important;
    }


    /* =====================================================
       SUBSCRIPTION
    ===================================================== */

    .plan-box {
        padding: 16px !important;

        border-radius: 14px !important;

        background:
            linear-gradient(
                135deg,
                rgba(124,92,255,0.10),
                rgba(255,255,255,0.018)
            ) !important;

        border:
            1px solid rgba(124,92,255,0.18) !important;
    }

    .plan-badge {
        padding: 5px 9px !important;

        margin-bottom: 9px !important;

        border-radius: 999px !important;

        font-size: 9px !important;

        letter-spacing: 0.07em !important;
    }

    .plan-box h3 {
        margin: 0 !important;

        font-size: 20px !important;

        line-height: 1.2 !important;

        letter-spacing: -0.03em !important;
    }

    .plan-status {
        margin:
            7px 0 12px !important;

        font-size: 11px !important;

        line-height: 1.4 !important;
    }

    .plan-features {
        margin: 0 !important;

        padding: 0 !important;
    }

    .plan-features li {
        padding: 9px 0 !important;

        font-size: 11px !important;

        line-height: 1.35 !important;
    }

    .plan-box .account-btn {
        margin-top: 13px !important;
    }


    /* =====================================================
       SECURITY
    ===================================================== */

    #verificationStatus,
    #loginMethod {
        white-space: nowrap !important;
    }


    /* =====================================================
       USAGE OVERVIEW
    ===================================================== */

    #blueprintsUsage,
    #profileUsage,
    #reelUsage,
    #trendUsage {
        font-size: 12px !important;

        font-weight: 700 !important;
    }


    /* =====================================================
       ACCOUNT ACTIONS
    ===================================================== */

    .logout-text {
        margin: 0 0 14px !important;

        font-size: 12px !important;

        line-height: 1.55 !important;

        color: rgba(255,255,255,0.50) !important;
    }

    .logout-btn {
        width: 100% !important;

        min-height: 40px !important;

        margin-top: 0 !important;

        border-radius: 10px !important;

        font-size: 12px !important;
    }


    /* =====================================================
       DANGER ZONE
    ===================================================== */

    .danger-card {
        padding: 18px !important;

        border-color:
            rgba(255,92,92,0.16) !important;

        background:
            rgba(255,70,70,0.018) !important;
    }

    .danger-card h2 {
        margin-bottom: 10px !important;

        font-size: 16px !important;

        color: #ff7b7b !important;
    }

    .danger-card p {
        margin: 0 !important;

        font-size: 12px !important;

        line-height: 1.55 !important;

        color: rgba(255,255,255,0.50) !important;
    }

    .danger-list {
        margin:
            12px 0 15px !important;

        padding-left: 17px !important;

        font-size: 11px !important;

        line-height: 1.8 !important;

        color: rgba(255,255,255,0.58) !important;
    }

    .danger-btn {
        min-height: 40px !important;

        padding:
            0 14px !important;

        border-radius: 10px !important;

        font-size: 12px !important;
    }


    /* =====================================================
       SMALL PHONE REFINEMENT
    ===================================================== */

    @media (max-width: 390px) {

        .dashboard-main {
            padding-left: 13px !important;
            padding-right: 13px !important;
        }

        .account-card {
            padding: 16px !important;

            border-radius: 15px !important;
        }

        .dashboard-title {
            font-size: 25px !important;
        }

        .dashboard-subtitle {
            font-size: 12px !important;
        }

        .profile-avatar {
            width: 58px !important;
            height: 58px !important;

            min-width: 58px !important;
        }

        .avatar-placeholder {
            font-size: 1.5rem !important;
        }

        .info-row span,
        .info-row strong {
            font-size: 11px !important;
        }

        .plan-box {
            padding: 14px !important;
        }
    }

}