@charset "UTF-8";

:root {
    --shop-purple: #5A42EE;
    --shop-purple-hover: #452ecc;
    --shop-dark: #11093C;
    --shop-muted: #6B6684;
    --shop-bg-light: #F4F3FF;
    --shop-border: #E2E0FD;
}

        body {
            background-color: #ffffff;
            color: var(--shop-dark);
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
            -webkit-font-smoothing: antialiased;
            line-height: 1.6; /* Better mobile readability */
        }

        /* Top Navigation Header Styling */
        .account-header {
            border-bottom: 1px solid var(--shop-border);
            background-color: rgba(255, 255, 255, 0.9);
            backdrop-filter: blur(20px);
            -webkit-backdrop-filter: blur(20px);
        }

        .logo-placeholder {
            font-weight: 700;
            font-size: 1.25rem;
            letter-spacing: -0.02em;
            color: var(--shop-dark);
            text-decoration: none;
        }

        .btn-back-site {
            color: var(--shop-purple);
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            min-height: 44px; /* Mobile touch target safety */
            display: inline-flex;
            align-items: center;
            transition: color 0.2s ease;
        }

        .btn-back-site:hover {
            color: var(--shop-purple-hover);
            text-decoration: underline;
        }

        /* User Welcome Section */
        .user-greeting-box {
            padding: 2rem 0 1rem 0;
        }

        .user-name-title {
            font-size: calc(1.6rem + 1vw); /* Responsive typography */
            font-weight: 800;
            letter-spacing: -0.03em;
            color: var(--shop-dark);
        }

        /* Tabs/Pills Navigation Menu */
        .nav-account {
            display: flex;
            flex-wrap: nowrap;
            overflow-x: auto;
            white-space: nowrap;
            -webkit-overflow-scrolling: touch;
            padding-bottom: 8px;
            gap: 8px;
        }

        /* Return to vertical column list on desktop screens */
        @media (min-width: 768px) {
            .nav-account {
                flex-direction: column;
                overflow-x: visible;
                white-space: normal;
                padding-bottom: 0;
            }
        }

        .nav-account .nav-link {
            color: var(--shop-dark);
            background: none;
            border: none;
            padding: 0.75rem 1.1rem;
            border-radius: 12px; /* Smoother Shop App corners */
            font-size: 1rem;
            font-weight: 600;
            display: inline-flex;
            align-items: center;
            gap: 12px;
            transition: all 0.2s ease;
            text-align: left;
            min-height: 48px; /* Ideal mobile touch dimension */
            flex-shrink: 0;
        }

        .nav-account .nav-link i {
            color: var(--shop-muted);
            font-size: 1.15rem;
            width: 20px;
            text-align: center;
        }

        /* Hover State */
        .nav-account .nav-link:hover {
            background-color: var(--shop-bg-light);
            color: var(--shop-purple);
        }

        /* Active State */
        .nav-account .nav-link.active {
            background-color: var(--shop-purple);
            color: #ffffff !important;
        }

        .nav-account .nav-link.active i {
            color: #ffffff;
        }

        /* Log Out Special Button Style */
        .nav-account .link-logout {
            color: #de350b;
        }

        .nav-account .link-logout:hover {
            background-color: #ffebe6;
            color: #de350b;
        }

        /* Content Card Custom Settings */
        .account-pane-card {
            border: none;
            background: #ffffff;
        }

        .pane-heading {
            font-size: 1.4rem;
            font-weight: 700;
            letter-spacing: -0.02em;
            margin-bottom: 1.5rem;
            padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--shop-border);
            color: var(--shop-dark);
        }

        /* Form Inputs Configuration */
        .apple-input {
            background-color: #ffffff;
            border: 1px solid #c9c6e2;
            border-radius: 10px;
            padding: 0.75rem 0.9rem; /* Larger text field padding for easy mobile focus */
            font-size: 1rem; /* Minimum 16px font equivalent prevents iOS auto-zoom behavior */
            color: var(--shop-dark);
            width: 100%;
        }

        .apple-input:focus {
            border-color: var(--shop-purple);
            outline: none;
            box-shadow: 0 0 0 3px rgba(90, 66, 238, 0.15);
        }

        .apple-label {
            font-size: 0.88rem;
            font-weight: 600;
            color: var(--shop-muted);
            margin-bottom: 0.4rem;
        }

        /* Custom Primary Button styled like Shop App */
        .btn-apple-primary {
            background-color: var(--shop-purple);
            color: #ffffff;
            border: none;
            border-radius: 10px;
            padding: 0.75rem 1.5rem; /* Enhanced target area */
            font-size: 1rem;
            font-weight: 600;
            width: 100%; /* Default block size for easy mobile thumb actions */
            min-height: 48px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: background-color 0.15s ease, transform 0.1s ease;
        }

        @media (min-width: 576px) {
            .btn-apple-primary {
                width: auto; /* Shrinks to text bounds on larger screens */
            }
        }

        .btn-apple-primary:hover {
            background-color: var(--shop-purple-hover);
            color: #ffffff;
        }

        .btn-apple-primary:active {
            transform: scale(0.98);
        }

        /* MP3 Track Lists Configuration */
        .download-track-item {
            padding: 1.1rem;
            border: 1px solid var(--shop-border);
            border-radius: 14px;
            background-color: #ffffff;
            transition: border-color 0.2s ease, box-shadow 0.2s ease;
        }

        .download-track-item:hover {
            border-color: var(--shop-purple);
            box-shadow: 0 4px 12px rgba(90, 66, 238, 0.05);
        }

        .btn-download-icon {
            background-color: var(--shop-bg-light);
            color: var(--shop-purple);
            border: none;
            width: 44px; /* Enlarged touch zone size for mobile screens */
            height: 44px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s ease;
            flex-shrink: 0;
        }

        .btn-download-icon:hover {
            background-color: var(--shop-purple);
            color: #ffffff;
        }  

        /* Mobile Bottom Bar Framework */
        @media (max-width: 767.98px) {
            /* Main container spacing so content doesn't hide behind the bottom bar */
            .main-content-area {
                padding-bottom: 90px; 
            }

            /* Transform sidebar wrapper into a fixed sticky bottom dock */
            .mobile-bottom-nav {
                position: fixed;
                bottom: 0;
                left: 0;
                right: 0;
                z-index: 1030;
                background-color: rgba(255, 255, 255, 0.94);
                backdrop-filter: blur(20px);
                -webkit-backdrop-filter: blur(20px);
                border-top: 1px solid var(--shop-border);
                padding: 8px 16px !important;
            }

            /* Align buttons evenly horizontally across the screen width */
            .nav-account {
                display: flex;
                flex-direction: row !important;
                justify-content: space-around;
                align-items: center;
                width: 100%;
                padding-bottom: 0;
                gap: 0;
            }

            /* Stack icons on top of tiny text labels for a compact app feel */
            .nav-account .nav-link {
                flex-direction: column;
                justify-content: center;
                align-items: center;
                gap: 4px;
                padding: 4px 8px;
                font-size: 0.75rem; /* Smaller text for compact spacing */
                font-weight: 500;
                min-height: auto;
                flex: 1;
                text-align: center;
            }

            .nav-account .nav-link i {
                font-size: 1.3rem; /* Prominent touch icon */
                width: auto;
            }

            /* Disable original active background color fill on mobile bar layout */
            .nav-account .nav-link.active {
                background-color: transparent !important;
                color: var(--shop-purple) !important;
            }
            
            .nav-account .nav-link.active i {
                color: var(--shop-purple) !important;
            }
        }

        /* Desktop Sidebar Adjustments FIXED HERE */
        @media (min-width: 768px) {
            .mobile-bottom-nav {
                position: sticky;
                top: 80px; /* Optional: stays pinned if you scroll down long pages */
                height: auto;
            }
        }       
	         /* FontAwesome Desktop Alignment Rules */
        .nav-account .nav-link i,
        .nav-account .nav-link i.fas, 
        .nav-account .nav-link i.far, 
        .nav-account .nav-link i.fab,
        .nav-account .nav-link i.fa-solid,
        .nav-account .nav-link i.fa-regular {
            font-size: 1.15rem;
            width: 24px; /* Fixes FontAwesome layout shift on desktop */
            text-align: center;
            display: inline-block;
            transition: transform 0.2s ease;
        }

        /* FontAwesome Mobile Bottom App Bar Rule Overrides */
        @media (max-width: 767.98px) {
            .nav-account .nav-link i,
            .nav-account .nav-link i.fas, 
            .nav-account .nav-link i.far, 
            .nav-account .nav-link i.fab,
            .nav-account .nav-link i.fa-solid,
            .nav-account .nav-link i.fa-regular {
                font-size: 1.45rem !important; /* Forces premium prominent size on cell phones */
                width: auto !important;        /* Centers perfectly inside mobile vertical columns */
                margin-bottom: 4px;
                display: block !important;
            }
            
            /* Subtle app-like pop animation when tapping tab panels on phone screens */
            .nav-account .nav-link:active i {
                transform: scale(0.85);
            }
        }  
	  
	          /* Radio Selection Button Accent Overrides */
        .btn-check:checked + .btn-outline-secondary {
            background-color: var(--shop-purple) !important;
            border-color: var(--shop-purple) !important;
            color: #ffffff !important;
        }
        .btn-check:checked + .btn-outline-secondary i {
            color: #ffffff !important;
        }
        .border-muted {
            border-color: #c9c6e2;
            color: var(--shop-dark);
        }
        .border-muted:hover {
            background-color: var(--shop-bg-light);
            color: var(--shop-purple);
            border-color: var(--shop-purple);
        }

	  /* Premium High-Res Profile Avatar Styles */
.profile-avatar-wrapper {
    width: 80px;
    height: 80px;
    border-radius: 20px; /* Modern smooth squircle/rounded corner */
    overflow: hidden;
    background-color: var(--shop-bg-light);
    border: 2px solid #ffffff;
    outline: 1px solid var(--shop-border);
}

.profile-avatar-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    image-rendering: -webkit-optimize-contrast; /* Extra sharpening filter for high-res mobile displays */
}

/* Desktop sizing upscaling for optimal balance */
@media (min-width: 768px) {
    .profile-avatar-wrapper {
        width: 96px;
        height: 96px;
        border-radius: 24px;
    }
}