/* ===== HOBBIES CARD ICON: BLUE ON HOVER/FOCUS ONLY THIS CARD ===== */
.profile-page .hobbies-card .material-symbols-outlined,
.profile-page .hobbies-card .material-icons {
    color: #212529 !important;
    transition: color 0.18s;
}
.profile-page .hobbies-card:hover .material-symbols-outlined,
.profile-page .hobbies-card:focus-within .material-symbols-outlined,
.profile-page .hobbies-card:hover .material-icons,
.profile-page .hobbies-card:focus-within .material-icons {
    color: #0d6efd !important;
}
/**
 * Profile Page Animations - SAME AS HOME PAGE
 * Apply exact same animations as home page to profile page divs/cards
 * Outer container hover: lift up with shadow change
 * Inner elements: NO animation (text, icons stay static)
 */

/* ===== PROFILE PAGE ANIMATIONS: SAME AS HOME PAGE ===== */
.profile-page {
    --home-card-gap: 1rem;
    --bs-transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
}

/* ===== CARD HOVER ANIMATIONS: EXACT HOME PAGE STYLE ===== */
.profile-page .card {
    border: 1px solid #e9e9ef;
    box-shadow: 0 3px 8px rgba(18, 18, 18, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform;
    background-clip: padding-box;
    border-radius: 12px;
    background-color: var(--cs-bg-white, #fff);
}

.profile-page .card:hover,
.profile-page .card:focus-within {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(18, 18, 18, 0.08);
    border-color: rgba(0, 0, 0, 0.06);
}

/* ===== CONTACT ITEM HOVER ANIMATIONS: EXACT HOME PAGE STYLE ===== */
.profile-page .contact-item {
    border: 1px solid #e9e9ef;
    box-shadow: 0 3px 8px rgba(18, 18, 18, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform;
    background-clip: padding-box;
    border-radius: 12px;
}

.profile-page .contact-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(18, 18, 18, 0.08);
    border-color: rgba(0, 0, 0, 0.06);
}

/* ===== BORDER/WRAPPER HOVER ANIMATIONS: EXACT HOME PAGE STYLE ===== */
.profile-page .border.rounded,
.profile-page [class*="wrapper"] {
    border: none;
    box-shadow: 0 3px 8px rgba(18, 18, 18, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform;
    background-clip: padding-box;
    border-radius: 12px;
}

.profile-page .border.rounded:hover,
.profile-page [class*="wrapper"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(18, 18, 18, 0.08);
    border-color: rgba(0, 0, 0, 0.06);
}

/* ===== TAB CONTENT CARD HOVER ANIMATIONS: EXACT HOME PAGE STYLE ===== */
.profile-page .tab-content .card {
    border: 1px solid #e9e9ef;
    box-shadow: 0 3px 8px rgba(18, 18, 18, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform;
    background-clip: padding-box;
    border-radius: 12px;
}

.profile-page .tab-content .card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(18, 18, 18, 0.08);
    border-color: rgba(0, 0, 0, 0.06);
}

/* ===== FOOTER/CARD-BODY HOVER ANIMATIONS: EXACT HOME PAGE STYLE ===== */
.profile-page .card-body,
.profile-page .footer-brand,
.profile-page .footer-links,
.profile-page .footer-copyright,
.profile-page [class*="footer-"],
.profile-page [class*="section-"] {
    border: 1px solid #e9e9ef;
    box-shadow: 0 3px 8px rgba(18, 18, 18, 0.04);
    transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
    will-change: transform;
    background-clip: padding-box;
    border-radius: 12px;
}

.profile-page .card-body:hover,
.profile-page .footer-brand:hover,
.profile-page .footer-links:hover,
.profile-page .footer-copyright:hover,
.profile-page [class*="footer-"]:hover,
.profile-page [class*="section-"]:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 26px rgba(18, 18, 18, 0.08);
    border-color: rgba(0, 0, 0, 0.06);
}

/* ===== IMAGE HOVER ANIMATIONS ===== */
.profile-page img,
.profile-page .rounded-circle,
.profile-page .avatar,
.profile-page .profile-img,
.profile-page [class*="avatar"],
.profile-page [class*="profile-picture"],
.profile-page .card img,
.profile-page .contact-item img {
    transition: all 0.18s ease;
}

.profile-page img:hover,
.profile-page .rounded-circle:hover,
.profile-page .avatar:hover,
.profile-page .profile-img:hover,
.profile-page [class*="avatar"]:hover,
.profile-page [class*="profile-picture"]:hover,
.profile-page .card img:hover,
.profile-page .contact-item img:hover {
    transform: scale(1.02);
}

/* ===== BUTTON HOVER ANIMATIONS: EXACT HOME PAGE STYLE ===== */
.profile-page .btn {
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    border-radius: 0.375rem;
}

.profile-page .btn-outline-primary {
    border: 1px solid var(--brand) !important;
}

.profile-page .btn-outline-primary:hover:not(:disabled) {
    color: #fff !important;
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.14);
}

.profile-page .btn-outline-primary.btn-sm:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 4px 10px rgba(13, 110, 253, 0.12);
}

.profile-page button.btn:hover:not(:disabled),
.profile-page a.btn:hover:not(:disabled),
.profile-page input[type="submit"].btn:hover:not(:disabled),
.profile-page .btn:hover:not(:disabled) {
    color: #fff !important;
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.14) !important;
}

.profile-page .card .btn:hover,
.profile-page .contact-item .btn:hover {
    transform: none !important;
    box-shadow: none !important;
}

/* ===== FORM CONTROL FOCUS ANIMATIONS ===== */
.profile-page .form-control,
.profile-page .form-select {
    transition: all 0.18s ease;
    border-color: rgba(0, 0, 0, 0.1);
}

.profile-page .form-control:focus,
.profile-page .form-select:focus {
    border-color: #0d6efd;
    box-shadow: inset 0 0 0 0.1rem rgba(13, 110, 253, 0.1);
    transform: translateY(-2px);
}

/* ===== DISABLE INNER ELEMENT HOVER ANIMATIONS ===== */
/* Text, icons, links inside cards stay static - only outer container moves */
.profile-page .card h1,
.profile-page .card h2,
.profile-page .card h3,
.profile-page .card h4,
.profile-page .card h5,
.profile-page .card h6,
.profile-page .card p,
.profile-page .card span,
.profile-page .card a,
.profile-page .card .material-symbols-outlined,
.profile-page .contact-item h1,
.profile-page .contact-item h2,
.profile-page .contact-item h3,
.profile-page .contact-item h4,
.profile-page .contact-item h5,
.profile-page .contact-item h6,
.profile-page .contact-item p,
.profile-page .contact-item span,
.profile-page .contact-item a,
.profile-page .contact-item .material-symbols-outlined,
.profile-page .footer-brand h6,
.profile-page .footer-brand p,
.profile-page .footer-brand span,
.profile-page .footer-brand a,
.profile-page .footer-brand .material-symbols-outlined,
.profile-page .footer-desc,
.profile-page .footer-links a,
.profile-page .footer-links span,
.profile-page .footer-links .material-symbols-outlined,
.profile-page .footer-link,
.profile-page .footer-link span,
.profile-page .footer-link .material-symbols-outlined,
.profile-page .footer-copyright,
.profile-page .footer-copyright a,
.profile-page .footer-copyright span,
.profile-page .card-body h1,
.profile-page .card-body h2,
.profile-page .card-body h3,
.profile-page .card-body h4,
.profile-page .card-body h5,
.profile-page .card-body h6,
.profile-page .card-body p,
.profile-page .card-body span,
.profile-page .card-body a,
.profile-page .card-body .material-symbols-outlined {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
}

.profile-page .card:hover h1,
.profile-page .card:hover h2,
.profile-page .card:hover h3,
.profile-page .card:hover h4,
.profile-page .card:hover h5,
.profile-page .card:hover h6,
.profile-page .card:hover p,
.profile-page .card:hover span,
.profile-page .card:hover a,
.profile-page .card:hover .material-symbols-outlined,
.profile-page .contact-item:hover h1,
.profile-page .contact-item:hover h2,
.profile-page .contact-item:hover h3,
.profile-page .contact-item:hover h4,
.profile-page .contact-item:hover h5,
.profile-page .contact-item:hover h6,
.profile-page .contact-item:hover p,
.profile-page .contact-item:hover span,
.profile-page .contact-item:hover a,
.profile-page .contact-item:hover .material-symbols-outlined,
.profile-page .footer-brand:hover h6,
.profile-page .footer-brand:hover p,
.profile-page .footer-brand:hover span,
.profile-page .footer-brand:hover a,
.profile-page .footer-brand:hover .material-symbols-outlined,
.profile-page .footer-links:hover a,
.profile-page .footer-links:hover span,
.profile-page .footer-links:hover .material-symbols-outlined,
.profile-page .footer-link:hover,
.profile-page .footer-link:hover span,
.profile-page .footer-link:hover .material-symbols-outlined,
.profile-page .footer-copyright:hover a,
.profile-page .footer-copyright:hover span,
.profile-page .card-body:hover h1,
.profile-page .card-body:hover h2,
.profile-page .card-body:hover h3,
.profile-page .card-body:hover h4,
.profile-page .card-body:hover h5,
.profile-page .card-body:hover h6,
.profile-page .card-body:hover p,
.profile-page .card-body:hover span,
.profile-page .card-body:hover a,
.profile-page .card-body:hover .material-symbols-outlined {
    transform: none !important;
    box-shadow: none !important;
    color: inherit !important;
}

/* ===== REMOVE NAV/TAB ANIMATIONS ===== */
.profile-page .nav-link {
    transition: none !important;
}

.profile-page .nav-link:hover {
    background-color: transparent !important;
}

.profile-page .nav-link.active {
    border-color: var(--brand, #0d6efd) !important;
    color: var(--brand, #0d6efd) !important;
    font-weight: 600;
}

/* ===== PROFILE PAGE: ICON BACKGROUNDS - CHANGE ALL TO PRIMARY ===== */
/* Change all colored icon circles to primary blue background */
.profile-page .bg-success-subtle {
    background-color: var(--bs-primary) !important;
}

.profile-page .bg-success-subtle.text-success {
    color: #fff !important;
}

.profile-page .bg-primary-subtle {
    background-color: var(--bs-primary) !important;
}

.profile-page .bg-primary-subtle.text-primary {
    color: #fff !important;
}

.profile-page .bg-info-subtle {
    background-color: var(--bs-primary) !important;
}

.profile-page .bg-info-subtle.text-info {
    color: #fff !important;
}

.profile-page .bg-info-subtle.text-info {
    color: #fff !important;
}

.profile-page .bg-warning {
    background-color: var(--bs-primary) !important;
}

.profile-page .bg-warning.text-dark {
    color: #fff !important;
}

.profile-page .bg-secondary {
    background-color: var(--bs-primary) !important;
}

.profile-page .bg-secondary.text-white {
    color: #fff !important;
}

.profile-page .bg-success {
    background-color: var(--bs-primary) !important;
}

.profile-page .bg-success.text-white {
    color: #fff !important;
}

.profile-page .bg-danger {
    background-color: var(--bs-primary) !important;
}

.profile-page .bg-danger.text-white {
    color: #fff !important;
}

/* Ensure buttons match the new primary color scheme */
.profile-page .btn-outline-success,
.profile-page .btn-outline-warning,
.profile-page .btn-outline-danger {
    border-color: var(--brand) !important;
    color: var(--brand) !important;
}

.profile-page .btn-outline-success:hover:not(:disabled),
.profile-page .btn-outline-warning:hover:not(:disabled),
.profile-page .btn-outline-danger:hover:not(:disabled) {
    background-color: var(--brand) !important;
    border-color: var(--brand) !important;
    color: #fff !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.14);
}

/* Change spinner colors to primary */
.profile-page .spinner-border.text-success {
    color: var(--bs-primary) !important;
}

.profile-page .spinner-border.text-warning {
    color: var(--bs-primary) !important;
}

.profile-page .spinner-border.text-danger {
    color: var(--bs-primary) !important;
}

/* ===== PROFILE PAGE: HIDE DECORATIVE ICONS (NON-FUNCTIONAL) ===== */
/* Hide inline muted icons that are purely decorative - NOT inside circles/buttons */
.profile-page .material-symbols-outlined.text-muted {
    display: none !important;
}

/* Hide public/info indicator icons */
.profile-page .material-symbols-outlined.text-info {
    display: none !important;
}

/* ===== PROFILE PAGE: HIDE PRIVACY DROPDOWN MENU ICONS ===== */
/* Hide icons in privacy dropdown (public, friends, private) - keep functionality */
.profile-page .dropdown-menu .material-symbols-outlined {
    display: none !important;
}

/* Hide text-success public icon specifically */
.profile-page .material-symbols-outlined.text-success {
    display: none !important;
}

/* ===== PROFILE PAGE: TEXT & TYPOGRAPHY STYLING - MATCH HOME PAGE ===== */
/* Headings styling */
.profile-page h1 {
    font-weight: 700;
    color: #212529;
    line-height: 1.3;
}

.profile-page h2 {
    font-weight: 700;
    color: #212529;
    line-height: 1.3;
}

.profile-page h3 {
    font-weight: 700;
    color: #212529;
    line-height: 1.4;
}

.profile-page h4 {
    font-weight: 700;
    color: #212529;
    line-height: 1.4;
}

.profile-page h5 {
    font-weight: 700;
    color: #212529;
    line-height: 1.4;
}

.profile-page h6 {
    font-weight: 700;
    color: #212529;
    line-height: 1.5;
}

.profile-page .card-title {
    font-weight: 700;
    color: #212529;
    margin-bottom: 0.5rem;
    font-size: 1rem;
}

/* Paragraph and text styles */
.profile-page p {
    line-height: 1.6;
    color: #495057;
    margin-bottom: 0.5rem;
}

.profile-page small {
    font-size: 0.875rem;
    line-height: 1.5;
}

.profile-page .text-muted {
    color: #6c757d !important;
}

.profile-page .fw-bold {
    font-weight: 700 !important;
}

.profile-page .fw-semibold {
    font-weight: 600 !important;
}

/* Card body text */
.profile-page .card-body {
    color: #495057;
}

.profile-page .card-body h6 {
    font-weight: 700;
    color: #212529;
}

.profile-page .card-body p {
    color: #495057;
}

/* Description text styling */
.profile-page small.text-muted {
    color: #6c757d !important;
    font-size: 0.875rem;
}

.profile-page .d-block.text-muted {
    color: #6c757d !important;
}

/* ===== PROFILE PAGE: SHARE PROFILE BUTTONS STYLING ===== */
/* Style Share Profile and View Public Profile buttons with same UI design */
.profile-page .d-grid.gap-2 .btn {
    border-radius: 0.375rem;
    font-weight: 500;
    transition: transform 0.18s ease, box-shadow 0.18s ease, color 0.18s ease, background-color 0.18s ease, border-color 0.18s ease;
    border: 1px solid #0d6efd;
    background-color: transparent;
    color: #0d6efd;
}

.profile-page .d-grid.gap-2 .btn-primary,
.profile-page .d-grid.gap-2 .btn-outline-secondary {
    border: 1px solid #0d6efd;
    background-color: transparent;
    color: #0d6efd !important;
}

.profile-page .d-grid.gap-2 .btn-primary:not(:hover),
.profile-page .d-grid.gap-2 .btn-outline-secondary:not(:hover) {
    color: #0d6efd !important;
}

.profile-page .d-grid.gap-2 .btn-primary:hover:not(:disabled),
.profile-page .d-grid.gap-2 .btn-outline-secondary:hover:not(:disabled) {
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    background-color: transparent !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(13, 110, 253, 0.14);
}

/* QR Code section buttons - Copy and Download QR */
.profile-page .input-group .btn-outline-primary {
    border: 1px solid #0d6efd;
    color: #0d6efd;
    background-color: transparent;
}

.profile-page .input-group .btn-outline-primary:hover:not(:disabled) {
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    background-color: transparent !important;
}

/* Download QR button - match Copy button style */
.profile-page #my-download-qr-link {
    border: 1px solid #0d6efd !important;
    color: #0d6efd !important;
    background-color: transparent !important;
}

.profile-page #my-download-qr-link:hover {
    border-color: #0d6efd !important;
    color: #0d6efd !important;
    background-color: transparent !important;
}

.profile-page .btn-outline-secondary {
    border: 1px solid #6c757d;
    color: #6c757d;
}

.profile-page .btn-outline-secondary:hover:not(:disabled) {
    border-color: #6c757d !important;
    color: #6c757d !important;
    background-color: transparent !important;
    transform: none;
    box-shadow: none;
}

/* ===== REMOVE DROPDOWN ANIMATIONS ===== */
.profile-page .dropdown-menu {
    animation: none !important;
}

/* ===== REMOVE TAB PANE ANIMATIONS ===== */
.profile-page .tab-pane {
    animation: none !important;
}

/* ===== PROFILE HEADER TEXT - WHITE COLOR ===== */
.profile-page .profile-title {
    color: #ffffff !important;
}

.profile-page .profile-subtitle {
    color: #ffffff !important;
}

/* ===== YOUR NETWORK BADGE STYLING - WHITE DIGITS, NO HOVER EFFECT ===== */
.profile-page .stats-card .badge {
    color: #ffffff !important;
    background-color: var(--bs-primary) !important;
    transition: none !important;
}

.profile-page .stats-card .badge:hover {
    transform: none !important;
    box-shadow: none !important;
    background-color: var(--bs-primary) !important;
    color: #ffffff !important;
}

.profile-page .stats-card .badge:focus {
    color: #ffffff !important;
    background-color: var(--bs-primary) !important;
    box-shadow: none !important;
}

.profile-page .stats-card .badge:active {
    color: #ffffff !important;
    background-color: var(--bs-primary) !important;
    box-shadow: none !important;
}

/* ===== ALL BADGE TEXT COLOR - WHITE ===== */
.profile-page .badge {
    color: #ffffff !important;
}

.profile-page .badge.bg-primary {
    color: #ffffff !important;
}

.profile-page .badge.rounded-pill {
    color: #ffffff !important;
}

.profile-page .badge.bg-warning {
    color: #ffffff !important;
}

.profile-page .badge.bg-success-subtle {
    color: #ffffff !important;
}

.profile-page .badge.text-secondary {
    color: #ffffff !important;
}

/* ===== BADGE HOVER - WHITE TEXT ===== */
.profile-page .badge:hover {
    color: #ffffff !important;
}

.profile-page .badge.bg-primary:hover {
    color: #ffffff !important;
}

.profile-page .badge.bg-warning:hover {
    color: #ffffff !important;
}

.profile-page .badge.bg-success-subtle:hover {
    color: #ffffff !important;
}

.profile-page .badge.rounded-pill:hover {
    color: #ffffff !important;
}

/* ===== METRIC VALUE HOVER - WHITE TEXT ===== */
.profile-page .metric-value {
    color: #ffffff !important;
}

.profile-page .metric-item:hover .metric-value {
    color: #ffffff !important;
}

/* ===== BADGE COLOR - STAY WHITE ON CARD FOCUS ===== */
.profile-page .card:focus-within .badge,
.profile-page .card:focus .badge,
.profile-page .card:active .badge {
    color: #ffffff !important;
}

.profile-page .card:focus-within .stats-card .badge,
.profile-page .card:focus .stats-card .badge,
.profile-page .card:active .stats-card .badge {
    color: #ffffff !important;
    background-color: var(--bs-primary) !important;
}

/* ===== LIST GROUP ITEM HOVER - KEEP BADGE WHITE ===== */
.profile-page .list-group-item:hover .badge {
    color: #ffffff !important;
    background-color: var(--bs-primary) !important;
}

.profile-page .list-group-item:active .badge {
    color: #ffffff !important;
    background-color: var(--bs-primary) !important;
}

/* ===== KEEP ALL TEXT WHITE ON DIV/CARD HOVER ===== */
/* Prevent text from turning black on any hover state */
.profile-page .list-group-item:hover,
.profile-page .list-group-item:hover span,
.profile-page .list-group-item:hover .badge {
    color: inherit !important;
}

.profile-page .list-group-item:hover span {
    color: #495057 !important;
}

.profile-page .list-group-item:hover .badge {
    color: #ffffff !important;
    background-color: var(--bs-primary) !important;
}

/* Prevent all text elements from changing color on hover */
.profile-page a:hover,
.profile-page a:active {
    color: inherit !important;
}

.profile-page .card:hover,
.profile-page .card:hover * {
    color: inherit !important;
}

.profile-page .contact-item:hover,
.profile-page .contact-item:hover * {
    color: inherit !important;
}

/* Keep badge text specifically white */
.profile-page .badge:not(.list-group-item .badge) {
    color: #ffffff !important;
}

.profile-page .stats-card:hover .badge,
.profile-page .stats-card:hover .badge * {
    color: #ffffff !important;
}


/* ===== CONTACT INFO CARD ICONS: FORCE BLACK COLOR ===== */
.profile-page .contact-info-card .material-symbols-outlined,
.profile-page .contact-info-card .material-icons {
    color: #212529 !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* ===== ICON HOVER - FORCE ICONS WHITE ===== */
.profile-page .card:hover .material-symbols-outlined,
.profile-page .card:hover .material-icons,
.profile-page .list-group-item:hover .material-symbols-outlined,
.profile-page .contact-item:hover .material-symbols-outlined,
.profile-page .btn:hover .material-symbols-outlined,
.profile-page .profile-icon-circle .material-symbols-outlined {
    color: #ffffff !important;
    text-shadow: none !important;
    opacity: 1 !important;
}

.profile-page a:hover .material-symbols-outlined {
    color: inherit !important;
}

/* ===== END OF PROFILE PAGE ANIMATIONS - ALL ANIMATIONS DISABLED ===== */