/* This page has a permanently-white header, so the nav links (white by default
   in style.css until the header gets .scrolled) would be invisible. Force the
   brand blue here regardless of scroll state. */
header { background-color: var(--white) !important; border-bottom: 3px solid var(--primary-blue); box-shadow: 0 4px 15px rgba(0,0,0,0.05); }
header .logo { color: var(--primary-blue) !important; }
header .nav-links a { color: var(--primary-blue) !important; }
header .nav-links a:hover { color: var(--accent-teal) !important; }
header .nav-links a.active-nav,
header .nav-links a.active { color: var(--primary-blue) !important; font-weight: 700; }
header .nav-links a.nav-auth-icon svg { fill: var(--primary-blue); }
header .nav-links a#nav-logout-link { color: #c53030 !important; }
header .nav-links a#nav-logout-link:hover { color: #9b2c2c !important; }

.fav-thumb-link { flex-shrink: 0; }
.fav-thumb {
    width: 56px;
    height: 56px;
    border-radius: 10px;
    object-fit: cover;
    display: block;
}
.fav-item { display: flex; align-items: center; gap: 1rem; }

/* ============================================================
   DANGER ZONE — account self-deletion
   ============================================================ */
.profile-delete-account {
    max-width: 1100px;
    margin: 2.5rem auto 0;
    text-align: center;
}
.danger-btn {
    background: #c53030;
    color: white;
    border: none;
    padding: .6rem 1.4rem;
    border-radius: 8px;
    font-family: 'Montserrat', sans-serif;
    font-size: .82rem;
    font-weight: 700;
    cursor: pointer;
    transition: background .2s;
}
.danger-btn:hover { background: #9b2c2c; }

/* Modal */
.modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(15, 23, 42, 0.55);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    padding: 1rem;
}
.modal-overlay.open { display: flex; }
.modal-box {
    background: white;
    border-radius: 14px;
    max-width: 460px;
    width: 100%;
    box-shadow: 0 24px 60px rgba(0,0,0,0.25);
    overflow: hidden;
}
.modal-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 1rem 1.4rem;
    border-bottom: 1px solid #edf2f7;
}
.modal-header h3 {
    font-family: 'Montserrat', sans-serif;
    font-size: 1rem;
    font-weight: 800;
    margin: 0;
}
.modal-close {
    background: none; border: none;
    font-size: 1.6rem; color: #718096; cursor: pointer;
    line-height: 1;
}
.modal-body { padding: 1.2rem 1.4rem; }
.modal-footer {
    display: flex; justify-content: flex-end; gap: .6rem;
    padding: 1rem 1.4rem;
    border-top: 1px solid #edf2f7;
    background: #f7faff;
}
.modal-footer button {
    padding: .55rem 1.1rem;
    border-radius: 8px;
    border: none;
    font-family: 'Montserrat', sans-serif;
    font-size: .8rem;
    font-weight: 700;
    cursor: pointer;
}
.btn-cancel { background: #edf2f7; color: #1a202c; }
.btn-cancel:hover { background: #e2e8f0; }
.btn-save {
    background: #c53030; color: white;
    transition: background .2s, opacity .2s;
}
.btn-save:hover:not(:disabled) { background: #9b2c2c; }
.btn-save:disabled { opacity: .55; cursor: not-allowed; }

.del-confirm-row {
    display: flex;
    gap: .5rem;
    align-items: flex-start;
    margin-top: 1rem;
    cursor: pointer;
}
.del-confirm-row span {
    font-size: .85rem;
    color: #5d6478;
    line-height: 1.4;
}
#del-error { margin-top: .8rem; }

/* ============================================================
   RESTYLE — brand polish on top of the base profile layout
   ============================================================ */
.profile-hero {
    background: linear-gradient(135deg, #003580 0%, #004AAD 55%, #0085c7 100%) !important;
    box-shadow: 0 14px 34px rgba(0, 74, 173, 0.28);
    position: relative;
    overflow: hidden;
}
.profile-hero::after {
    content: "";
    position: absolute;
    top: -40%;
    right: -10%;
    width: 240px;
    height: 240px;
    background: radial-gradient(circle, rgba(26, 188, 156, 0.35) 0%, transparent 70%);
    pointer-events: none;
}
.profile-avatar-lg {
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
    background: rgba(255, 255, 255, 0.18);
}
.profile-edit-btn { backdrop-filter: blur(4px); }

.profile-sidebar-card,
.profile-content-card {
    box-shadow: 0 8px 26px rgba(15, 42, 90, 0.08);
    border-color: #e7eefc;
}

/* Tabs: clearer hover + active accent */
.profile-tab-btn:hover { color: #004AAD; }
.profile-tab-btn.active {
    border-bottom-width: 3px;
    border-bottom-color: var(--accent-teal);
    color: #004AAD;
}

/* List items: softer cards with a brand left accent on hover */
.reg-item {
    border-radius: 12px;
    transition: box-shadow 0.2s, transform 0.2s, border-color 0.2s;
}
.reg-item:hover {
    box-shadow: 0 10px 24px rgba(0, 74, 173, 0.12);
    transform: translateY(-1px);
    border-color: #cfe0ff;
}
.reg-cat-badge {
    background: #eef4ff;
    color: #004AAD;
    border-radius: 999px;
    padding: 0.1rem 0.6rem;
    font-weight: 700;
    font-size: 0.7rem;
}
.fav-thumb { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12); }