/* ===================================== */
/* THEME VARIABLES */
/* ===================================== */

:root{
    --account-primary-start:#E50914;
    --account-primary-end:#800108;

    --account-bg-dark:#000000;
    --account-card-bg:#111111;

    --account-input-start:#2a2f35;
    --account-input-end:#1f242b;

    --account-text-main:#ffffff;
    --account-text-muted:#8b949e;

    --account-border-light:rgba(255,255,255,0.05);
    --account-border-medium:rgba(255,255,255,0.3);

    --account-radius-lg:20px;
    --account-radius-md:14px;
    --account-radius-sm:12px;

    --account-transition:all 0.3s ease;
}

/* ===================================== */
/* MOBILE TOGGLE & OVERLAY */
/* ===================================== */

/* Mobile Toggle Button */
button.account-menu-toggle.uk-button {
    position: fixed !important;
    top: 10px !important;
    left: 35px !important;
    z-index: 99999 !important;
    background: rgba(0, 0, 0, 0.7) !important;
    border: 1px solid rgba(255, 255, 255, 0.2) !important;
    color: #fff !important;
    width: 44px !important;
    height: 44px !important;
    min-height: 44px !important;
    padding: 0 !important;
    margin: 0 !important;
    border-radius: 50% !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    cursor: pointer !important;
    transition: all 0.3s ease !important;
    visibility: visible !important;
    opacity: 1 !important;
    line-height: 1 !important;
    font-size: 0 !important;
}

button.account-menu-toggle.uk-button:hover {
    background: rgba(229, 9, 20, 0.8) !important;
    border-color: #E50914 !important;
}

button.account-menu-toggle.uk-button svg,
button.account-menu-toggle.uk-button svg polyline {
    stroke: #fff !important;
    stroke-width: 2 !important;
    fill: none !important;
    width: 24px !important;
    height: 24px !important;
}

/* Full Screen Overlay */
.account-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background:black !important;
    z-index: 99999 !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: all 0.3s ease !important;
}

.account-overlay.active {
    opacity: 1 !important;
    visibility: visible !important;
}

.account-overlay .overlay-content {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
}

/* Overlay Header */
.account-overlay .overlay-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
}

.account-overlay .overlay-header .login-logo {
    /* height: 40px; */
    max-width: 150px;
}

/* Overlay Close Button */
.account-overlay .overlay-close {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    padding: 0;
}

.account-overlay .overlay-close:hover {
    background: #E50914;
}

.account-overlay .overlay-close svg {
    width: 20px;
    height: 20px;
    stroke: #fff;
    stroke-width: 2;
}

/* Overlay Body */
.account-overlay .overlay-body {
    flex: 1;
    overflow-y: auto;
    /* padding: 20px; */
}

/* Overlay Navigation */
.account-overlay .uk-nav-default {
    background: transparent;
}

.account-overlay .uk-nav-default > li {
    margin-bottom: 8px;
}

.account-overlay .uk-nav-default > li > a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 18px;
    border-radius: 12px;
    color: #fff;
    font-size: 16px;
    transition: all 0.3s ease;
}

.account-overlay .uk-nav-default > li > a:hover {
    background: rgba(255, 255, 255, 0.1);
}

.account-overlay .uk-nav-default li.uk-active > a {
    background: linear-gradient(180deg, #E50914, #800108);
}

.account-overlay .uk-nav-default li.uk-active > a:hover {
    background: linear-gradient(180deg, #E50914, #800108);
}

/* Overlay Menu Icons */
.account-overlay .uk-nav-default .uk-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.account-overlay .uk-nav-default .uk-icon {
    color: #fff;
}

/* ===================================== */
/* ACCOUNT PAGE LAYOUT */
/* ===================================== */

/* Account Page Container */
.account-page-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    max-width: 100% !important;
}

/* Account Layout Row - Flexbox for sidebar + content */
.account-layout-row {
    display: flex !important;
    flex-wrap: wrap !important;
    width: 100% !important;
    margin: 0 !important;
}

/* Account Grid - Use flexbox instead of grid for better control */
.account-page-container .uk-grid-large {
    display: flex !important;
    flex-wrap: wrap !important;
    margin: 0 !important;
}

/* Sidebar - Full Left */
.account-sidebar {
    width: 280px !important;
    max-width: 280px !important;
    min-width: 280px !important;
    flex-shrink: 0 !important;
    margin: 0 !important;
    padding: 80px 20px 40px 0 !important;
    /* border-right: 1px solid rgba(255, 255, 255, 0.1); */
    background: transparent;
}

/* Remove UIkit grid classes */
.account-sidebar > * {
    width: 100% !important;
    margin: 0 !important;
}

/* Content Area */
.account-content {
    flex: 1 !important;
    min-width: 0 !important;
    padding: 80px 40px 40px 40px !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Hide on desktop, show on mobile */
@media (min-width: 960px) {
    button.account-menu-toggle.uk-button {
        display: none !important;
    }
}

@media (max-width: 959px) {
    button.account-menu-toggle.uk-button {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        
    }
    /* Hide regular sidebar on mobile */
    .account-sidebar {
        display: none !important;
    }
    /* Adjust content width for mobile */
    .account-content {
        padding: 60px 15px 30px 15px !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ===================================== */
/* UTILITIES */
/* ===================================== */

.account-gradient-primary{
    background:linear-gradient(180deg,
        var(--account-primary-start) 0%,
        var(--account-primary-end) 100%);
}

.account-center{
    display:flex;
    align-items:center;
    justify-content:center;
}

/* ===================================== */
/* PROFILE UI - HIDDEN BY DEFAULT */
/* ===================================== */

/* Hide profile edit card and content preference overlay by default */
#editProfileCard,
#contentPreferenceOverlay {
    display: none;
}

/* Profile Edit Card */
.profile-edit-card {
    display: none;
    position: relative;
    padding-left: 50px;
}

/* Profile Back Button */
.profile-back-btn {
    position: absolute;
    left: 6px;
    top: 36px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #fff;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.profile-back-btn:hover {
    background: #E50914;
}

/* Profile Form */
.profile-form-row {
    margin-bottom: 20px;
}

.profile-form-label {
    color: #8b949e;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

.profile-input {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #fff;
    padding: 14px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
}

.profile-input:focus {
    background: rgba(255, 255, 255, 0.05) !important;
    outline: none;
    border-color: #E50914;
    box-shadow: 0 0 0 3px rgba(229, 9, 20, 0.15);
}

/* Profile Input Display */
.profile-input-display {
    display: none;
    color: #fff;
    font-size: 16px;
    padding: 14px;
}

/* Content Preference Button */
.content-pref-btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: #8b949e;
    padding: 0px 10px 0px;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.content-pref-btn:hover {
    border-color: rgba(255, 255, 255, 0.3);
}

/* Profile Error Message */
.profile-error-msg {
    color: #e50914;
    font-size: 14px;
    margin-bottom: 15px;
    display: none;
}

/* Profile Actions */
.profile-actions {
    display: flex;
    gap: 15px;
    margin-top: 30px;
}

.profile-cancel-btn {
    flex: 1;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 14px 30px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

.profile-submit-btn {
    flex: 1;
    background: linear-gradient(180deg, #E50914, #800108);
    border: none;
    padding: 14px 30px;
    border-radius: 30px;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-submit-btn:hover {
    transform: scale(1.02);
    box-shadow: 0 5px 15px rgba(229, 9, 20, 0.4);
}

/* Profile Lock Icon */
.profile-lock-icon {
    color: #8b949e;
    margin-left: 5px;
}

/* Profile Delete Button */
.profile-delete-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    color: #9ca3af;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.profile-delete-btn:hover {
    background: #e50914;
    color: #fff;
}

/* Content Preference Overlay */
.content-pref-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    display: none;
    align-items: center;
    justify-content: center;
}

.content-pref-modal {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 30px;
    width: 90%;
    max-width: 400px;
}

.content-pref-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 15px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    margin-bottom: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.content-pref-checkbox:hover {
    background: rgba(255, 255, 255, 0.1);
}

.content-pref-checkbox input {
    width: 20px;
    height: 20px;
    accent-color: #E50914;
}

.content-pref-checkbox span {
    color: #fff;
    font-size: 15px;
}


.overlay-actions {
    display: flex;
    justify-content: flex-end; /* Align buttons to right */
    gap: 12px; /* Space between buttons */
    margin-top: 20px; /* Spacing from checkboxes */
}

.overlay-actions button {
    padding: 10px 25px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.2s ease;
}

/* Cancel Button */
.overlay-actions .overlay-cancel-btn {
    background: rgba(255,255,255,0.1);
    color: #fff;
}

.overlay-actions .overlay-cancel-btn:hover {
    background: rgba(255,255,255,0.2);
}

/* Submit Button */
.overlay-actions .overlay-save-btn {
    background: linear-gradient(90deg, #E50914, #FF4500); /* Netflix-style red */
    color: #fff;
}

.overlay-actions .overlay-save-btn:hover {
    opacity: 0.9;
}

/* ===================================== */
/* LABEL STYLES */
/* ===================================== */

.account-label {
    color: var(--account-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-bottom: 8px;
}

.account-text-muted {
    color: var(--account-text-muted);
}

.account-text-white {
    color: var(--account-text-main);
}

.account-text-primary {
    color: var(--account-primary-start);
}


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

.account-section-title {
    font-size: 24px;
    font-weight: 600;
    color: var(--account-text-main);
}


/* ===================================== */
/* ICONS */
/* ===================================== */

.account-icon {
    width: 20px;
    height: 20px;
    vertical-align: middle;
}

.account-icon-muted {
    color: var(--account-text-muted) !important;
}

.account-icon-white {
    color: #fff !important;
}

.account-icon-primary {
    color: var(--account-primary-start) !important;
}


/* ===================================== */
/* TOGGLE SWITCH - STANDARDIZED */
/* ===================================== */

.account-toggle {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 26px;
}

.account-toggle input {
    display: none;
}

.account-toggle .slider {
    position: absolute;
    cursor: pointer;
    background-color: #4a5568;
    border-radius: 34px;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    transition: 0.4s;
}

.account-toggle .slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 3px;
    bottom: 3px;
    background-color: white;
    border-radius: 50%;
    transition: 0.4s;
}

.account-toggle input:checked + .slider {
    background: linear-gradient(180deg, var(--account-primary-start), var(--account-primary-end));
}

.account-toggle input:checked + .slider:before {
    transform: translateX(24px);
}


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

.account-card {
    background: var(--account-card-bg);
    border-radius: var(--account-radius-lg);
    padding: 25px 30px;
    border: 1px solid var(--account-border-light);
}

.account-card-border {
    border: 1px solid #3d3d3d;
}


/* ===================================== */
/* BUTTONS - STANDARDIZED */
/* ===================================== */

.account-btn-primary {
    background: linear-gradient(180deg, var(--account-primary-start), var(--account-primary-end));
    border: none;
    padding: 12px 30px;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    transition: var(--account-transition);
}

.account-btn-primary:hover {
    transform: scale(1.05);
}

.account-btn-primary:active {
    transform: scale(0.97);
}

.account-btn-secondary {
    background: transparent;
    border: 1px solid var(--account-border-medium);
    padding: 12px 30px;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    transition: var(--account-transition);
}

.account-btn-secondary:hover {
    background: #222;
}

.account-btn-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #1c222b;
    border: none;
    color: #9ca3af;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: var(--account-transition);
}

.account-btn-icon:hover {
    background: linear-gradient(180deg, var(--account-primary-start), var(--account-primary-end));
    color: #fff;
}


/* ===================================== */
/* INPUTS - STANDARDIZED */
/* ===================================== */

.account-input {
    background: linear-gradient(145deg, var(--account-input-start), var(--account-input-end));
    border: none;
    border-radius: var(--account-radius-sm);
    color: #fff;
    padding: 12px 16px;
    font-size: 15px;
    transition: var(--account-transition);
    width: 100%;
    box-sizing: border-box;
}

.account-input:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--account-primary-start);
}

.account-input::placeholder {
    color: var(--account-text-muted);
}


/* ===================================== */
/* DIVIDER */
/* ===================================== */

.account-divider {
    border-color: var(--account-border-light);
    margin: 20px 0;
}


/* ===================================== */
/* SIDEBAR */
/* ===================================== */

.account-page-container {
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin-top:50px;
}

.account-sidebar{
    margin-top: 80px;
    padding:0 30px;
    margin-left: 0;
    width: 100%;
    max-width: 250px;
    box-sizing: border-box;
}

/* Override UIkit select height */
.acc-div select,
.account-info-section select,
.acc-div .uk-select {
    height: auto !important;
    min-height: 40px;
    padding: 8px 12px;
}

/* Override UIkit and browser default input focus - keep dark background */
.acc-div .uk-input,
.acc-div input.uk-input,
.acc-div input[type="text"],
.acc-div input[type="email"],
.acc-div input[type="tel"],
.acc-div input[type="date"],
.acc-div select {
    background: linear-gradient(145deg, var(--account-input-start), var(--account-input-end)) !important;
    color: #fff !important;
    border: 1px solid rgba(255,255,255,0.1) !important;
}

.acc-div .uk-input:focus,
.acc-div input.uk-input:focus,
.acc-div input[type="text"]:focus,
.acc-div input[type="email"]:focus,
.acc-div input[type="tel"]:focus,
.acc-div input[type="date"]:focus,
.acc-div select:focus {
    background: linear-gradient(145deg, var(--account-input-start), var(--account-input-end)) !important;
    color: #fff !important;
    border-color: var(--account-primary-start) !important;
    box-shadow: 0 0 0 2px var(--account-primary-start) !important;
    outline: none !important;
}

/* ===================================== */
/* ACCOUNT INFO PAGE - MOVED FROM INLINE STYLES */
/* ===================================== */

/* Main container */
.acc-div {
    background-color: black;
}

/* Tab links */
.acc-div .tab-text a,
.acc-div .switchtab li a {
    text-transform: none;
    font-size: 18px !important;
    color: #fff;
}

/* DOB and Gender labels */
.acc-div .dob label,
.acc-div .uk-flex.dob label,
.acc-div label.dob,
.acc-div label[style*="padding-top"] {
    padding-top: 10px;
}

/* Gender radio labels */
.acc-div .gender label,
.acc-div .togglePer2.gender {
    padding-top: 10px;
    padding-right: 10px;
    display: inline-block;
}

.acc-div .gender label:last-child {
    margin-right: 44px !important;
}

/* Input fields - DOB, Name, Email */
.acc-div .uk-input,
.acc-div input[type="text"],
.acc-div input[type="email"],
.acc-div input[type="date"],
.acc-div input[type="tel"] {
    border-radius: 3px;
    color: #fff;
}

.acc-div #inputDob {
    width: 238px;
    height: 39px;
}

.acc-div #inputName,
.acc-div #inputEmail {
    border-radius: 3px;
}

.acc-div #conval {
    width: 56%;
}

.acc-div #conval2 {
    width: auto;
}

/* Buttons */
.acc-div .cus-btn,
.acc-div .btn-padd,
.acc-div .uk-button {
    border-radius: 3px;
}

.acc-div .uk-button.uk-button-danger {
    border-radius: 3px;
    margin-bottom: 15px !important;
}

.acc-div .uk-button.cus-btn {
    border-radius: 3px;
}

.acc-div #regdev {
    border-radius: 3px;
    background-color: black;
    padding: 0px;
    margin-top: 10px;
}

/* Mobile input wrapper */
.acc-div .mob-inp {
    border: 1px solid #fff;
    border-radius: 3px;
    color: #fff;
    padding-left: 0px !important;
    height: 40px !important;
    width: 490px !important;
    margin-bottom: 20px;
    margin-left: 25px !important;
    font-size: 1.5em;
}

/* Country code select */
.acc-div #countryCode {
    width: fit-content;
    border: none;
    outline: none;
    background: transparent;
    color: #fff;
    padding-right: 15px !important;
}

/* Error messages */
.acc-div #errEmail,
.acc-div #errMobile {
    margin-left: 87px;
}

.acc-div #errMobile {
    color: red;
}

/* Link colors */
.acc-div a {
    color: rgb(216, 3, 34) !important;
}

/* Device section */
.acc-div .toggleMan {
    margin-top: 31px !important;
}

.acc-div .toggleMan h4 {
    color: #fff;
    font-weight: bolder;
    line-height: 6px;
}

.acc-div .toggleMan p {
    color: #fff;
    font-weight: bolder;
}

.acc-div hr {
    margin-left: 15px;
}

/* My Account title */
.acc-div .my-acc {
    /* Styles for title if needed */
}

/* Personal info section */
.acc-div #nameSpan,
.acc-div #newMobile,
.acc-div #newgender,
.acc-div #newEmail {
    color: #fff;
}

/* Verified badge */
.acc-div .uk-margin-medium-bottom[style*="color:rgb(216, 3, 34)"] {
    color: rgb(216, 3, 34) !important;
}

/* Email grid */
.acc-div .email-grid {
    margin-top: -45px !important;
}

/* Input wrappers */
.acc-div .input-name-wrapper,
.acc-div .input-email-wrapper {
    width: 500px;
}

/* Device info section */
.acc-div .device-info {
    margin-top: 31px !important;
}

.acc-div .device-info h4 {
    color: #fff;
    font-weight: bolder;
    line-height: 6px;
}

.acc-div .device-info p {
    color: #fff;
}

/* Add TV name */
.acc-div #addtvname {
    font-weight: bold;
}

.acc-div #addtvname a {
    padding-right: 20px !important;
}

.acc-div #addtvname a svg {
    font-weight: bolder;
    margin-top: -5px !important;
}

/* Chevron icon */
.acc-div .device-chevron {
    padding-right: 20px !important;
}

/* Verified badge */
.acc-div .uk-margin-medium-bottom {
    color: rgb(216, 3, 34) !important;
}

/* Device terms */
.acc-div .toggleMan p {
    color: #fff !important;
}

/* Device card border */
.acc-div .device-card {
    border: 1px solid;
    border-radius: 5px;
}

/* Sidebar nav list */
.account-sidebar .uk-nav {
    width: 100%;
    display: flex;
    flex-direction: column;
}

.account-sidebar .uk-nav > li{
    margin-bottom:14px;
    width: 100%;
    display: block;
    padding: 0;
    float: none;
}

.account-sidebar .uk-nav > li > a{
    display: flex !important;
    width: 100% !important;
    box-sizing: border-box;
    text-align: left;
    color:var(--account-text-muted);
    padding:14px 18px;
    border-radius:var(--account-radius-lg);
    font-size:15px;
    transition:var(--account-transition);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.account-sidebar .uk-nav > li > a:hover{
    background:linear-gradient(180deg,
        var(--account-primary-start),
        var(--account-primary-end));
    color:#fff !important;
}

.account-sidebar .uk-nav > li.uk-active > a{
    background:linear-gradient(180deg,
        var(--account-primary-start),
        var(--account-primary-end)) !important;
    color:#fff !important;
    box-shadow:0 0 20px rgba(255,255,255,0.05);
    width: 100% !important;
    
}


/* ===================================== */
/* CONTENT AREA */
/* ===================================== */

.account-content{
    padding:80px 0;
    animation:fadeIn 0.3s ease;
    max-width:900px;
    margin:0 auto;
    width:100%;
}

@keyframes fadeIn{
    from{ opacity:0; transform:translateY(6px); }
    to{ opacity:1; transform:translateY(0); }
}


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

.account-profile-card{
    background:var(--account-bg-dark);
    border-radius:var(--account-radius-lg);
    padding:40px 50px;
    border:2px solid var(--account-border-light);
    box-shadow:0 25px 50px rgba(0,0,0,0.7);
    max-width:700px;
    width:100%;
    transition:var(--account-transition);
    box-sizing: border-box;
}

.account-profile-card:hover{
    transform:translateY(-3px);
}

/* Mobile override for profile card */
@media (max-width: 640px) {
    .account-profile-card {
        padding: 20px 15px;
        max-width: 100%;
        border-radius: 12px;
    }
}

@media (max-width: 480px) {
    .account-profile-card {
        padding: 15px 12px;
    }
}
@media (max-width: 768px) {
    .account-page-container {
        margin-top: 0px !important;
    }
}
@media (max-width: 480px) {
    .account-page-container {
        margin-top: 0px !important;
    }
}
.account-title{
    margin:0px;
    font-size:24px;
    font-weight:600;
    color:var(--account-text-main);
}

.account-profile-item{
    padding:20px 0;
}

.account-divider{
    border-color:var(--account-border-light);
    margin:0;
}


/* ===================================== */
/* AVATAR */
/* ===================================== */

.account-avatar{
    width:52px;
    height:52px;
    border-radius:16px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right:20px;
    font-size:20px;
    color:#fff;
}

.orange{ background:linear-gradient(135deg,#ff7b00,#ffb347); }
.pink{ background:linear-gradient(135deg,#ff0080,#7928ca); }
.green{ background:linear-gradient(135deg,#00c853,#64dd17); }

.add-avatar{
    background:linear-gradient(135deg,#3a3f47,#2a2f35);
}


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

.account-name{
    font-size:18px;
    font-weight:500;
    color:var(--account-text-main);
}


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

.account-edit-btn{
    width:40px;
    height:40px;
    border-radius:50%;
    background:#1c222b;
    border:none;
    color:#9ca3af;
    transition:var(--account-transition);
}

.account-edit-btn:hover{
    background:linear-gradient(180deg,
        var(--account-primary-start),
        var(--account-primary-end));
    color:#fff;
}

.account-update-btn{
    border:none;
    padding:12px 40px;
    border-radius:30px;
    color:#fff;
    font-weight:600;
    cursor:pointer;
    transition:var(--account-transition);
}

.account-update-btn{
    background:linear-gradient(180deg,
        var(--account-primary-start),
        var(--account-primary-end));
}

.account-update-btn:hover{
    transform:scale(1.05);
}

.account-update-btn:active{
    transform:scale(0.97);
}

.account-cancel-btn{
    background:transparent;
    border:1px solid var(--account-border-medium);
    padding:12px 40px;
    border-radius:30px;
    color:#fff;
    cursor:pointer;
    transition:var(--account-transition);
}

.account-cancel-btn:hover{
    background:#222;
}


/* ===================================== */
/* INPUTS */
/* ===================================== */

.account-input{
    background:linear-gradient(145deg,
        var(--account-input-start),
        var(--account-input-end));
    border:none;
    border-radius:var(--account-radius-sm);
    color:#fff;
    padding:12px;
    transition:var(--account-transition);
}

.account-input:focus{
    outline:none;
    box-shadow:0 0 0 2px var(--account-primary-start);
}

.edit-input{
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
    color: #fff;
    padding: 14px;
    font-size: 16px;
    width: 100%;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

.edit-input:focus{
    background: rgba(255,255,255,0.05) !important;
    outline: none;
    border-color: #E50914;
    box-shadow: 0 0 0 3px rgba(229,9,20,0.15);
}

/* Info UI select/gender dropdown */
.info-form-input-wrapper .uk-select,
#editGender {
    height: auto !important;
    min-height: 40px;
    padding: 8px 12px;
    background: rgba(255,255,255,0.05);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 10px;
}

/* All dropdown options */
.info-form-input-wrapper .uk-select option,
#editGender option {
    background: #1a1a1a !important;
    color: #fff !important;
}

/* Hover state - when hovering over options */
.info-form-input-wrapper .uk-select option:hover,
.info-form-input-wrapper .uk-select option:focus,
#editGender option:hover,
#editGender option:focus {
    background: #E50914 !important;
    color: #fff !important;
}

/* Selected/Active option highlight */
.info-form-input-wrapper .uk-select option:checked,
.info-form-input-wrapper .uk-select option[selected],
#editGender option:checked,
#editGender option[selected] {
    background: #E50914 !important;
    color: #fff !important;
}


/* PHONE WRAPPER */

.account-phone-wrapper{
    display:flex;
    align-items:center;
    gap:10px;
}

.account-phone-wrapper span{
    font-size:14px;
    color:var(--account-text-muted);
}


/* ===================================== */
/* TOGGLE SWITCH */
/* ===================================== */

.switch{
    position:relative;
    display:inline-block;
    width:44px;
    height:22px;
}

.switch input{ display:none; }

.slider{
    position:absolute;
    cursor:pointer;
    background-color:#444;
    border-radius:34px;
    top:0;
    left:0;
    right:0;
    bottom:0;
    transition:.4s;
}

.slider:before{
    position:absolute;
    content:"";
    height:16px;
    width:16px;
    left:3px;
    bottom:3px;
    background-color:white;
    border-radius:50%;
    transition:.4s;
}

input:checked + .slider{
    background:linear-gradient(180deg,
        var(--account-primary-start),
        var(--account-primary-end));
}

input:checked + .slider:before{
    transform:translateX(22px);
}


/* ===================================== */
/* PIN BOX */
/* ===================================== */

.pin-box{
    width:60px;
    height:60px;
    margin-right:15px;
    text-align:center;
    font-size:24px;
    border-radius:var(--account-radius-sm);
    border:none;
    background:linear-gradient(145deg,
        var(--account-input-start),
        var(--account-input-end));
    color:#fff;
    transition:var(--account-transition);
}

.pin-box:focus{
    outline:none;
    box-shadow:0 0 0 2px var(--account-primary-start);
}


/* ===================================== */
/* MODE TRANSITION */
/* ===================================== */

#account-view-mode,
#account-edit-mode{
    transition: opacity 0.3s ease;
}


/* ===================================== */
/* INFO UI STYLES */
/* ===================================== */

/* Profile Header Row */
.info-profile-header-row {
    display: flex;
    align-items: center;
    gap: 16px;
    margin-bottom: 24px;
}

/* Profile Avatar */
.info-profile-avatar {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.info-profile-avatar img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    object-fit: cover;
}

/* Account Title in Info */
.info-account-title {
    font-size: 22px;
    margin: 0;
}

/* Info Grid Row */
.info-grid-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 25px;
}

/* Info Field Value */
.info-field-value {
    color: #fff;
    font-size: 18px;
    margin: 0;
    font-weight: 500;
}

/* View Mode Buttons */
.info-view-buttons {
    text-align: left;
    padding-left: 10px;
    padding-top: 15px;
}

/* Edit Button */
.info-edit-btn {
    display: inline-block;
    background: linear-gradient(180deg, var(--account-primary-start), var(--account-primary-end)) !important;
}

/* Edit Mode Container */
#editMode {
    display: none;
    padding-left: 0;
    text-align: left;
}

/* Form Row */
.info-form-row {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
    padding-left: 0;
}

/* Edit Mode Header */
.info-edit-header {
    position: relative;
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

/* Back Button */
.info-back-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    margin-right: 10px;
}

.info-edit-header .info-back-btn {
    position: absolute;
    left: -40px;
    top: 50%;
    transform: translateY(-50%);
    margin-right: 0;
}

/* Form Label */
.info-form-label {
    color: #8b949e;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    display: block;
}

/* Form Input Wrapper */
.info-form-input-wrapper {
    flex: 1;
}

/* Form Rows Container */
.info-form-rows {
    display: flex;
    gap: 15px;
    width: 100%;
    margin-bottom: 20px;
}

/* Action Buttons Container */
.info-action-buttons {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    padding-top: 20px;
    padding-left: 0;
}

/* Cancel Button */
.info-cancel-btn {
    background: transparent;
    border: 1px solid rgba(255,255,255,0.3);
    padding: 14px 35px;
    border-radius: 30px;
    color: #fff;
    cursor: pointer;
    font-size: 16px;
}

/* Save Button */
.info-save-btn {
    background: linear-gradient(180deg, #E50914, #800108);
    border: none;
    padding: 14px 45px;
    border-radius: 30px;
    color: #fff;
    font-weight: 600;
    cursor: pointer;
    font-size: 16px;
}

/* Empty column for spacing */
.info-empty-column {
    flex: 1;
}

/* Mobile Responsive */
@media (max-width: 640px) {
    .info-grid-row {
        grid-template-columns: 1fr;
        gap: 15px;
    }
    
    .info-form-rows {
        flex-direction: column;
        gap: 15px;
    }
    
    .info-form-input-wrapper {
        width: 100%;
    }
}

/* ===================================== */
/* MANAGE PROFILE UI STYLES */
/* ===================================== */

/* Profile List Item - WITH line */
.profile-item {
    padding: 20px 0;
    border-bottom: 2px solid var(--account-border-light);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Add Profile Button - NO line */
.profile-item-add {
    padding: 12px 0;
    border-bottom: none;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

/* Profile Avatar */
.profile-avatar {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    overflow: hidden;
    flex-shrink: 0;
}

.profile-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Add Profile Avatar */
.profile-avatar.add-avatar {
    background: linear-gradient(180deg, var(--account-primary-start), var(--account-primary-end)) !important;
    /* border: 2px solid #8B4513; */
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.3s ease;
}

.profile-avatar.add-avatar:hover {
    background: #A0522D;
    border-color: #A0522D;
}

/* Profile Name */
.profile-name {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
    margin-left: 12px;
}

/* Profile Name - Add link style */
.profile-name.add-link {
    color: #a0aec0;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    margin-left: 12px;
}

/* Profile Action Button */
.profile-action-btn {
    background: rgba(255, 255, 255, 0.1);
    border: none;
    padding: 8px 8px;
    border-radius: 20px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.profile-action-btn:hover {
    background: linear-gradient(180deg, var(--account-primary-start), var(--account-primary-end));
}

/* Profile Menu Button */
.profile-menu-btn {
    background: none;
    border: none;
    color: #8b949e;
    cursor: pointer;
    padding: 8px;
    border-radius: 50%;
    transition: all 0.3s ease;
}

.profile-menu-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
}

/* Profile Dropdown */
.profile-dropdown {
    position: absolute;
    right: 10px;
    top: 60px;
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    padding: 10px;
    min-width: 150px;
    z-index: 100;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.profile-dropdown-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    color: #fff;
    font-size: 14px;
    cursor: pointer;
    border-radius: 8px;
    transition: background 0.3s ease;
}

.profile-dropdown-item:hover {
    background: rgba(255, 255, 255, 0.1);
}

.profile-dropdown-item.danger {
    color: #e50914;
}

.profile-dropdown-item.danger:hover {
    background: rgba(229, 9, 20, 0.1);
}

/* ===================================== */
/* SUBSCRIPTION UI STYLES - NEW DESIGN */
/* ===================================== */

/* Subscriptions Container */
.subscriptions-container {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    width: 100%;
    overflow-x: hidden;
}

/* Subscription Card */
.subscription-card {
    background: #1a1a1a;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px 30px;
    position: relative;
    transition: all 0.3s ease;
    width: 100%;
    box-sizing: border-box;
}

.subscription-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

/* Status Border Colors */
.subscription-card-active {
    border-left: 5px solid #00ff00;
}

.subscription-card-suspended {
    border-left: 5px solid #e50914;
}

.subscription-card-expired {
    border-left: 5px solid #8b949e;
}

/* Card Header */
.subscription-card-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 20px;
    flex-wrap: wrap;
    gap: 15px;
}

.subscription-plan-info {
    flex: 1;
    min-width: 200px;
}

.subscription-plan-label {
    color: #8b949e;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 500;
}

.subscription-plan-name {
    color: #fff;
    font-size: 26px;
    margin: 8px 0;
    font-weight: 700;
}

.subscription-plan-price {
    color: #e50914;
    font-size: 22px;
    font-weight: 700;
    margin: 0;
}

.subscription-plan-validity {
    color: #8b949e;
    font-size: 14px;
    font-weight: 400;
}

/* Status Badge */
.subscription-status {
    padding: 8px 18px;
    border-radius: 25px;
    font-size: 13px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subscription-status-active {
    background: rgba(0, 255, 0, 0.15);
    color: #00ff00;
    border: 1px solid rgba(0, 255, 0, 0.3);
}

.subscription-status-suspended {
    background: rgba(229, 9, 20, 0.15);
    color: #e50914;
    border: 1px solid rgba(229, 9, 20, 0.3);
}

.subscription-status-expired {
    background: rgba(139, 148, 158, 0.15);
    color: #8b949e;
    border: 1px solid rgba(139, 148, 158, 0.3);
}

/* Card Details */
.subscription-card-details {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px 0;
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.subscription-detail-item {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.subscription-detail-label {
    color: #8b949e;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.subscription-detail-value {
    color: #fff;
    font-size: 16px;
    font-weight: 500;
}

/* Deactivation Message */
.subscription-deact-msg {
    color: #ffa500;
    font-size: 14px;
    margin: 15px 0 0 0;
    padding: 12px 15px;
    background: rgba(255, 165, 0, 0.1);
    border-radius: 8px;
    border-left: 3px solid #ffa500;
}

/* Card Actions */
.subscription-card-actions {
    margin-top: 20px;
    display: flex;
    gap: 15px;
    flex-wrap: wrap;
    width: 100%;
    box-sizing: border-box;
}

.subscription-renew-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #e50914, #800108);
    color: #fff;
    padding: 14px 35px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    flex: 1;
    min-width: 120px;
}
.subscription-dct-btn{
  padding: 8px 15px;
  border-radius: 25px;
  color: #fff;
  font-size: 16px;
  font-weight: bold;
  background: linear-gradient(to right, #ee1c25, #a71b1f);
}
.subscription-renew-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 9, 20, 0.4);
}

.subscription-cancel-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: #fff;
    padding: 14px 35px;
    border-radius: 30px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: 1px solid rgba(255, 255, 255, 0.3);
    cursor: pointer;
    flex: 1;
    min-width: 120px;
}

.subscription-cancel-btn:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: #fff;
}

/* Empty State */
.subscription-empty-state {
    text-align: center;
    padding: 60px 30px;
    background: #1a1a1a;
    border: 1px dashed rgba(255, 255, 255, 0.2);
    border-radius: 16px;
}

.subscription-empty-icon {
    margin-bottom: 20px;
    color: #8b949e;
}

.subscription-empty-icon svg {
    width: 80px;
    height: 80px;
}

.subscription-empty-title {
    color: #fff;
    font-size: 24px;
    font-weight: 600;
    margin: 0 0 10px 0;
}

.subscription-empty-desc {
    color: #8b949e;
    font-size: 16px;
    margin: 0 0 25px 0;
    line-height: 1.6;
}

.subscription-empty-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(180deg, #e50914, #800108);
    color: #fff;
    padding: 14px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
}

.subscription-empty-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(229, 9, 20, 0.4);
}

/* Tablet (768px) */
@media (max-width: 768px) {
    .subscription-card {
        padding: 18px;
        width: 100%;
    }
    .subscription-plan-name {
        font-size: 22px;
    }
    .subscription-plan-price {
        font-size: 20px;
    }
    .subscription-card-details {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 15px 0;
    }
    .subscription-plan-info {
        min-width: 150px;
    }
}

/* Medium (640px) */
@media (max-width: 640px) {
    .subscription-card {
        padding: 16px;
        width: 100%;
    }
    .subscription-card-header {
        flex-direction: column;
    }
    .subscription-card-details {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .subscription-plan-name {
        font-size: 20px;
    }
    .subscription-plan-price {
        font-size: 18px;
    }
    .subscription-status {
        align-self: flex-start;
        margin-top: 10px;
    }
    .subscription-card-actions {
        flex-direction: column;
        width: 100%;
    }
    .subscription-renew-btn,
    .subscription-cancel-btn {
        width: 100%;
        max-width: 100%;
        min-width: unset;
    }
    .subscription-plan-info {
        min-width: unset;
        width: 100%;
    }
}

/* Small (480px) */
@media (max-width: 480px) {
    .subscription-card {
        padding: 14px;
        width: 100%;
        border-radius: 12px;
    }
    .subscription-plan-name {
        font-size: 18px;
    }
    .subscription-plan-price {
        font-size: 16px;
    }
    .subscription-detail-value {
        font-size: 14px;
    }
    .subscription-detail-label {
        font-size: 11px;
    }
    .subscription-status {
        font-size: 11px;
        padding: 6px 12px;
    }
    .subscription-plan-info {
        min-width: unset;
        width: 100%;
    }
    .subscription-renew-btn,
    .subscription-cancel-btn {
        width: 100%;
        max-width: 100%;
        min-width: unset;
        padding: 12px 20px;
        font-size: 14px;
    }
    .subscription-deact-msg {
        font-size: 12px;
        padding: 10px 12px;
    }
    .subscription-empty-state {
        padding: 30px 15px;
    }
    .subscription-empty-icon svg {
        width: 50px;
        height: 50px;
    }
    .subscription-empty-title {
        font-size: 18px;
    }
    .subscription-empty-desc {
        font-size: 14px;
    }
    .subscription-empty-btn {
        width: 100%;
        padding: 12px 24px;
    }
}
    .subscription-plan-name {
        font-size: 22px;
    }
    .subscription-plan-price {
        font-size: 20px;
    }
    .subscription-card-details {
        grid-template-columns: 1fr 1fr;
        gap: 15px;
        padding: 15px 0;
    }
}

/* Medium (640px) */
@media (max-width: 640px) {
    .subscription-card {
        padding: 16px;
    }
    .subscription-card-header {
        flex-direction: column;
    }
    .subscription-card-details {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    .subscription-plan-name {
        font-size: 20px;
    }
    .subscription-plan-price {
        font-size: 18px;
    }
    .subscription-status {
        align-self: flex-start;
    }
    .subscription-card-actions {
        flex-direction: column;
    }
    .subscription-renew-btn,
    .subscription-cancel-btn {
        max-width: 100%;
        width: 100%;
    }
    .subscription-empty-state {
        padding: 40px 20px;
    }
    .subscription-empty-title {
        font-size: 20px;
    }
}

/* Small (480px) */
@media (max-width: 480px) {
    .subscription-card {
        padding: 14px;
    }
    .subscription-plan-name {
        font-size: 18px;
    }
    .subscription-plan-price {
        font-size: 16px;
    }
    .subscription-detail-value {
        font-size: 14px;
    }
    .subscription-empty-icon svg {
        width: 60px;
        height: 60px;
    }
}

/* ===================================== */
/* MOBILE RESPONSIVE STYLES */
/* ===================================== */

/* Info UI - View Mode Responsive */
@media (max-width: 768px) {
    .info-profile-header-row {
        /* flex-direction: column; */
        align-items: center;
        gap: 12px;
    }
    .info-profile-avatar {
        width: 70px;
        height: 70px;
    }
    .info-profile-avatar img {
        width: 70px;
        height: 70px;
    }
    .info-account-title {
        font-size: 20px;
    }
}

@media (max-width: 640px) {
    .info-profile-avatar {
        width: 60px;
        height: 60px;
    }
    .info-profile-avatar img {
        width: 60px;
        height: 60px;
    }
    .info-account-title {
        font-size: 18px;
    }
    .info-field-value {
        font-size: 16px;
    }
    .info-view-buttons {
        padding-top: 20px;
    }
    .info-edit-btn {
        width: 100%;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .info-profile-avatar {
        width: 50px;
        height: 50px;
    }
    .info-profile-avatar img {
        width: 50px;
        height: 50px;
    }
    .info-account-title {
        font-size: 16px;
    }
    .account-label {
        font-size: 12px;
    }
    .info-field-value {
        font-size: 14px;
    }
}

/* Info UI - Edit Mode Responsive */
@media (max-width: 768px) {
    .info-edit-description {
        font-size: 14px;
    }
}

@media (max-width: 640px) {
    .info-edit-description {
        font-size: 13px;
        margin-bottom: 16px;
    }
    .info-form-rows {
        flex-direction: column;
        gap: 12px;
    }
    .info-form-input-wrapper {
        width: 100%;
    }
    .info-action-buttons {
        flex-direction: column-reverse;
        gap: 10px;
    }
    .info-cancel-btn,
    .info-save-btn {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .info-form-label {
        font-size: 12px;
    }
    .edit-input {
        padding: 10px 12px;
        font-size: 14px;
    }
    .info-cancel-btn,
    .info-save-btn {
        padding: 12px 16px;
        font-size: 14px;
    }
}

/* Device Management UI Responsive */
@media (max-width: 768px) {
    .device-item {
        padding: 14px 16px;
    }
    .device-icon {
        width: 40px;
        height: 40px;
    }
    .device-icon svg {
        width: 20px;
        height: 20px;
    }
    .device-name {
        font-size: 15px;
    }
    .device-lastlogin {
        font-size: 12px;
    }
    .device-delete-btn {
        width: 36px;
        height: 36px;
    }
}

@media (max-width: 640px) {
    .device-subtitle {
        font-size: 13px;
        margin-bottom: 16px;
    }
    .device-item {
        padding: 12px 14px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .device-info {
        flex: 1;
        min-width: 0;
    }
    .device-icon {
        width: 36px;
        height: 36px;
    }
    .device-icon svg {
        width: 18px;
        height: 18px;
    }
    .device-name {
        font-size: 14px;
    }
    .device-lastlogin {
        font-size: 11px;
    }
    .device-delete-btn {
        width: 32px;
        height: 32px;
    }
    .device-list-container {
        max-height: 280px;
    }
}

@media (max-width: 480px) {
    .device-item {
        padding: 12px;
        gap: 10px;
    }
    .device-icon {
        width: 32px;
        height: 32px;
    }
    .device-icon svg {
        width: 16px;
        height: 16px;
    }
    .device-name {
        font-size: 13px;
    }
    .device-delete-btn {
        width: 30px;
        height: 30px;
    }
    .device-refresh-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
    .device-empty {
        padding: 30px 20px;
    }
}

/* Parental Control UI Responsive */
@media (max-width: 768px) {
    .aha-title {
        font-size: 22px;
    }
    .pin-box {
        width: 50px;
        height: 50px;
        font-size: 20px;
    }
    .parent-control-toggle-label {
        font-size: 15px;
    }
}

@media (max-width: 640px) {
    .aha-title {
        font-size: 20px;
    }
    .pin-box {
        width: 45px;
        height: 45px;
        font-size: 18px;
        margin-right: 8px;
    }
    .parent-control-toggle {
        padding: 12px 0;
        gap: 10px;
    }
    .parent-control-toggle-label {
        font-size: 14px;
    }
    .pin-section {
        padding: 15px 0;
    }
    .pin-section-title {
        font-size: 16px;
    }
    .pin-section-desc {
        font-size: 13px;
        margin-bottom: 12px;
    }
    .pin-inputs {
        gap: 6px;
    }
    .confirm-pin-btn {
        width: 100%;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .aha-title {
        font-size: 18px;
    }
    .pin-box {
        width: 40px;
        height: 40px;
        font-size: 16px;
        margin-right: 5px;
    }
    .parent-control-toggle-label {
        font-size: 13px;
    }
    .pin-status {
        padding: 12px;
    }
    .pin-status-text {
        font-size: 14px;
    }
}

/* Settings UI Responsive */
@media (max-width: 768px) {
    .settings-title {
        font-size: 22px;
    }
    .settings-row {
        padding: 12px 0;
    }
    .settings-row-title {
        font-size: 14px;
    }
    .settings-row-desc {
        font-size: 12px;
    }
}

@media (max-width: 640px) {
    .settings-title {
        font-size: 20px;
    }
    .settings-subtitle {
        font-size: 14px;
    }
    .settings-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 15px;
    }
    .settings-row-label {
        width: 100%;
        min-width: unset;
    }
    .settings-row-title {
        font-size: 15px;
    }
    .settings-row-desc {
        font-size: 13px;
        margin-top: 8px;
    }
    .switch {
        align-self: flex-start;
    }
    .settings-danger-box {
        padding: 12px;
    }
    .settings-danger-label {
        font-size: 13px;
    }
    .settings-danger-desc {
        font-size: 12px;
    }
    .settings-delete-btn {
        width: 100%;
        justify-content: center;
        padding: 12px 20px;
    }
}

@media (max-width: 480px) {
    .settings-title {
        font-size: 18px;
    }
    .settings-subtitle {
        font-size: 13px;
    }
    .settings-row-title {
        font-size: 14px;
    }
}

/* ===================================== */
/* MANAGE PROFILE UI RESPONSIVE */
/* ===================================== */

@media (max-width: 768px) {
    .profile-item {
        padding: 16px;
    }
    .profile-avatar {
        width: 45px;
        height: 45px;
    }
    .profile-name {
        font-size: 15px;
    }
    .profile-edit-card {
        padding-left: 40px;
    }
    .profile-back-btn {
        width: 32px;
        height: 32px;
    }
}

@media (max-width: 640px) {
    .profile-item {
        padding: 14px;
        flex-wrap: wrap;
        gap: 12px;
    }
    .profile-avatar {
        width: 40px;
        height: 40px;
    }
    .profile-name {
        font-size: 14px;
    }
    .profile-action-btn,
    .profile-delete-btn {
        width: 32px;
        height: 32px;
    }
    .profile-edit-card {
        padding-left: 35px;
        padding-right: 10px;
    }
    .profile-form-row {
        margin-bottom: 15px;
    }
    .profile-input {
        padding: 12px;
        font-size: 14px;
    }
    .profile-actions {
        flex-direction: column;
        gap: 10px;
        margin-top: 20px;
    }
    .profile-cancel-btn,
    .profile-submit-btn {
        width: 100%;
        padding: 12px 20px;
        font-size: 14px;
    }
    .content-pref-modal {
        padding: 20px;
        width: 95%;
    }
    .content-pref-checkbox {
        padding: 12px;
    }
    .content-pref-checkbox input {
        width: 18px;
        height: 18px;
    }
    .content-pref-checkbox span {
        font-size: 14px;
    }
}

@media (max-width: 480px) {
    .profile-item {
        padding: 12px;
    }
    .profile-avatar {
        width: 36px;
        height: 36px;
    }
    .profile-name {
        font-size: 13px;
    }
    .profile-edit-card {
        padding-left: 30px;
    }
    .profile-back-btn {
        left: 10px;
        top: 10px;
        width: 28px;
        height: 28px;
    }
    .profile-form-label {
        font-size: 12px;
    }
    .profile-input {
        padding: 10px;
        font-size: 13px;
    }
    .content-pref-modal {
        padding: 15px;
    }
    .content-pref-checkbox {
        padding: 10px;
    }
    .content-pref-checkbox input {
        width: 16px;
        height: 16px;
    }
    .content-pref-checkbox span {
        font-size: 13px;
    }
    .overlay-actions {
        flex-direction: column;
        gap: 10px;
    }
    .overlay-cancel-btn,
    .overlay-save-btn {
        width: 100%;
    }
}

/* ===================================== */
/* MORE LAYOUT UI STYLES */
/* ===================================== */

.more-layout-title {
    margin: 0;
    padding: 90px 0 10px 0;
}

.more-layout-heading {
    font-family: 'Roboto', sans-serif;
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
    padding: 0 0px;
    padding-bottom: 15px;
    text-transform: capitalize;
}

/* Tablet */
@media (max-width: 768px) {
    .more-layout-heading {
        font-size: 16px;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .more-layout-title {
        padding: 100px 0 15px 0;
    }
    .more-layout-heading {
        font-size: 16px;
        padding: 0 0px;
    }
}