/* ==========================================================================
   SOFT UI DASHBOARD DESIGN SYSTEM FOR USER PROFILE & SIDEBAR
   ========================================================================== */

/* Page Background for User Profile Views */
body.user-profile-page,
.user-profile-container {
    background-color: #eaeded !important;
}

/* --------------------------------------------------------------------------
   FULL SCREEN FLUID DASHBOARD LAYOUT & CONTAINERS
   -------------------------------------------------------------------------- */
.user-profile-container {
    max-width: 100% !important;
    width: 100% !important;
    padding-left: 2rem !important;
    padding-right: 2rem !important;
}

@media (max-width: 767.98px) {
    .user-profile-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* Sidebar Column Spacing Gap & Column Fixes */
@media (min-width: 992px) {
    .user-profile-container > .row > .col-lg-3 {
        flex: 0 0 25% !important;
        max-width: 25% !important;
        min-width: 240px !important;
        padding-right: 1.25rem !important;
    }
    .user-profile-container > .row > .col-lg-9,
    .user-profile-container > .row > .col-lg-10 {
        /* flex: 0 0 75% !important; */
        /* max-width: 75% !important; */
        padding-left: 0.75rem !important;
    }                    
}

/* --------------------------------------------------------------------------
   SOFT UI SIDEBAR CONTAINER (DESKTOP)
   -------------------------------------------------------------------------- */
.user-profile-aside,
.__customer-sidebar {
    background: #ffffff !important;
    border-radius: 1rem !important; /* 16px */
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
    border: 0 !important;
    padding: 1.25rem 0.85rem !important;
    margin-bottom: 1.5rem !important;
    width: 100% !important;
}

/* Sidebar Section Sub-headers */
.user-profile-aside .sidebar-section-title {
    font-size: 11px !important;
    font-weight: 700 !important;
    letter-spacing: 0.8px !important;
    color: #a0aec0 !important;
    text-transform: uppercase !important;
    margin-top: 0.75rem !important;
    margin-bottom: 0.75rem !important;
    padding-left: 0.75rem !important;
    white-space: nowrap !important;
}

/* Sidebar Navigation Items - PREVENT TEXT WRAPPING */
.user-profile-aside .widget-title a,
.user-profile-aside a.aside-link-item {
    display: flex !important;
    align-items: center !important;
    gap: 0.75rem !important;
    padding: 0.65rem 0.85rem !important;
    border-radius: 0.75rem !important; /* 12px */
    margin-bottom: 0.4rem !important;
    color: #67748e !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    text-decoration: none !important;
    white-space: nowrap !important; /* CRITICAL: PREVENTS TEXT WRAPPING */
    word-break: normal !important;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1) !important;
    background: transparent;
    border-left: 4px solid transparent !important;
}

/* Sidebar Hover State */
.user-profile-aside .widget-title a:hover,
.user-profile-aside a.aside-link-item:hover {
    background-color: #f8f9fa !important;
    color: #344767 !important;
    transform: translateX(3px);
}

/* Sidebar Active Menu State (Exact Match to Soft UI) */
.user-profile-aside .widget-title a.active-menu,
.user-profile-aside a.aside-link-item.active-menu,
.user-profile-aside a.aside-items-profile.active {
    background: linear-gradient(90deg, var(--web-primary-10, rgba(230, 126, 34, 0.12)) 0%, rgba(255, 255, 255, 0.95) 100%) !important;
    border-left: 4px solid var(--web-primary, #e67e22) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04) !important;
    color: var(--web-primary, #e67e22) !important;
    font-weight: 700 !important;
    border-top-left-radius: 0 !important;
    border-bottom-left-radius: 0 !important;
}

/* Icon Box inside Sidebar Nav Items */
.user-profile-aside .soft-icon-box {
    width: 32px !important;
    height: 32px !important;
    border-radius: 0.5rem !important; /* 8px */
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    background: #ffffff !important;
    color: #344767 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -1px rgba(0, 0, 0, 0.04) !important;
    transition: all 0.2s ease !important;
}

.user-profile-aside .widget-title a.active-menu .soft-icon-box,
.user-profile-aside a.aside-link-item.active-menu .soft-icon-box {
    background: var(--web-primary, #e67e22) !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px var(--web-primary-40, rgba(230, 126, 34, 0.35)) !important;
}

.user-profile-aside .soft-icon-box svg,
.user-profile-aside .soft-icon-box i {
    width: 16px !important;
    height: 16px !important;
}

/* Sidebar Text Label */
.user-profile-aside .aside-link,
.user-profile-aside a span {
    font-size: 13.5px !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    word-break: normal !important;
}

/* --------------------------------------------------------------------------
   SOFT UI HERO HEADER BANNER (Profile Info page only)
   -------------------------------------------------------------------------- */
.amz-contact-hero,
.soft-ui-user-banner {
    background: linear-gradient(135deg, #1e293b 0%, #0f172a 100%) !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.08) !important;
    border: 0 !important;
    padding: 1.5rem 1.75rem !important;
    color: #ffffff !important;
}

.soft-ui-user-avatar {
    width: 64px !important;
    height: 64px !important;
    border-radius: 50% !important;
    object-fit: cover !important;
    border: 3px solid rgba(255, 255, 255, 0.8) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

/* --------------------------------------------------------------------------
   SOFT UI MAIN CONTENT CARDS & CHAT CARDS
   -------------------------------------------------------------------------- */
.amz-auth-card,
.card.__shadow,
.soft-ui-card,
.chat--sidebar-card,
.card.__card {
    background: #ffffff !important;
    border-radius: 1rem !important;
    box-shadow: 0 20px 27px 0 rgba(0, 0, 0, 0.05) !important;
    border: 0 !important;
    padding: 1.5rem 1.75rem !important;
    margin-bottom: 1.5rem !important;
}

.amz-auth-title,
.soft-ui-card-title {
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #252f40 !important;
    letter-spacing: -0.2px !important;
}

/* Soft UI Form Control Inputs */
.form-control.amz-auth-input,
.soft-ui-card input[type="text"],
.soft-ui-card input[type="email"],
.soft-ui-card input[type="password"],
.soft-ui-card input[type="number"],
.soft-ui-card select,
.soft-ui-card textarea {
    border-radius: 0.5rem !important;
    border: 1px solid #e2e8f0 !important;
    padding: 0.65rem 0.85rem !important;
    font-size: 14px !important;
    color: #344767 !important;
    background-color: #ffffff !important;
    box-shadow: none !important;
    transition: all 0.2s ease !important;
}

.form-control.amz-auth-input:focus,
.soft-ui-card input:focus,
.soft-ui-card select:focus,
.soft-ui-card textarea:focus {
    border-color: var(--web-primary, #e67e22) !important;
    box-shadow: 0 0 0 3px var(--web-primary-20, rgba(230, 126, 34, 0.15)) !important;
    outline: none !important;
}

/* Soft UI Primary Buttons */
.soft-ui-btn-primary,
.btn-theme,
.amz-auth-card .btn-primary,
.btn--primary {
    background-color: var(--web-primary, #e67e22) !important;
    border-color: var(--web-primary, #e67e22) !important;
    color: #ffffff !important;
    border-radius: 0.5rem !important;
    font-weight: 700 !important;
    padding: 0.65rem 1.25rem !important;
    font-size: 13.5px !important;
    box-shadow: 0 4px 10px var(--web-primary-40, rgba(230, 126, 34, 0.3)) !important;
    transition: all 0.2s ease !important;
}

.soft-ui-btn-primary:hover,
.btn-theme:hover,
.amz-auth-card .btn-primary:hover,
.btn--primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 7px 14px var(--web-primary-40, rgba(230, 126, 34, 0.4)) !important;
    background-color: var(--web-primary, #e67e22) !important;
    opacity: 0.95 !important;
}

/* --------------------------------------------------------------------------
   RESPONSIVE MOBILE SIDEBAR DRAWER & OVERLAY FIXES (< 992px)
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* Full Screen Backdrop Overlay */
    .profile-aside-overlay,
    div.profile-aside-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        z-index: 999998 !important;
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: blur(6px) !important;
        -webkit-backdrop-filter: blur(6px) !important;
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
        transition: opacity 0.3s ease, visibility 0.3s ease !important;
    }

    .profile-aside-overlay.active,
    div.profile-aside-overlay.active {
        opacity: 1 !important;
        visibility: visible !important;
        pointer-events: auto !important;
    }

    /* Mobile Sidebar Panel Drawer */
    #shop-sidebar,
    .user-profile-aside,
    .__customer-sidebar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        bottom: 0 !important;
        z-index: 999999 !important;
        width: 290px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        height: 100dvh !important;
        background: #ffffff !important;
        box-shadow: 4px 0 25px rgba(0, 0, 0, 0.25) !important;
        border-radius: 0 1.25rem 1.25rem 0 !important;
        padding: 1.25rem 1rem !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        display: block !important;
    }

    #shop-sidebar.active,
    .user-profile-aside.active,
    .__customer-sidebar.active {
        transform: translateX(0) !important;
    }

    .amz-contact-hero,
    .soft-ui-user-banner {
        padding: 1.25rem 1rem !important;
        border-radius: 0.85rem !important;
    }

    .amz-auth-card,
    .soft-ui-card {
        padding: 1.25rem 1rem !important;
        border-radius: 0.85rem !important;
    }
}