/* =========================================
   COMMON STYLES (Used on all pages)
   ========================================= */

* { box-sizing: border-box; margin: 0; padding: 0; }
body {
    background-color: #fdf9e3; 
    font-family: 'Lexend Deca', sans-serif;
    font-size: 20px; 
    color: #000;
}
.page-container {
    max-width: 1200px; 
    margin: 0 auto; 
    padding: 140px 40px 80px 40px; 
}

.header-wrapper {
    position: fixed; top: 0; left: 0; width: 100%; height: 140px;
    background-color: #fdf9e3; z-index: 1000;
}
.top-nav-fixed {
    max-width: 1200px; margin: 0 auto; padding: 40px;
    display: flex; justify-content: space-between; align-items: center;
}
.nav-center-logo {
    width: 50px; height: 50px; display: flex; align-items: center; justify-content: center;
}
.nav-center-logo img { width: 100%; height: 100%; object-fit: contain; }

.btn {
    position: relative; display: flex; align-items: center; justify-content: center;
    width: 200px; height: 60px; border: 1px solid #000; text-decoration: none; color: #000;
    cursor: pointer; font-family: inherit;
}
.btn-text { font-size: 20px; font-weight: 500; text-decoration: underline; }
.text-center { text-align: center; line-height: 1.2; }
.btn-yellow { background-color: #faee7d; }
.btn-purple { background-color: #b9adf3; }
.btn-red { background-color: #e5757a; }
.btn-gold { background-color: #f7cd16; }

.icon { left: 0; position: relative; transform: none; top: 0; border-radius: 5px; }
.icon-overlap {
    position: absolute; left: -25px; top: 50%; transform: translateY(-50%);
    width: 50px; height: 50px; border: 1px solid #000;
    display: flex; align-items: center; justify-content: center; background-color: #fff;
}
.box-pink { background-color: #f5b5da; }
.box-blue { background-color: #7acdf2; }
.box-purple { background-color: #9685ed; }
.box-lavender { background-color: #e8e4f5; }
.icon-overlap:has(img) { background: transparent; border: none; }
.icon-overlap img { width: 100%; height: 100%; object-fit: contain; }

.profile-menu-wrapper { position: relative; display: inline-block; }
.profile-trigger { cursor: pointer; }
.profile-dropdown {
    position: absolute; top: 100%; right: 0; margin-top: 4px; min-width: 160px;
    background-color: #ffffff; border: 1.5px solid #000000; border-radius: 8px;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15); z-index: 1100; padding: 6px;
}
.profile-dropdown[hidden] { display: none !important; }
.profile-dropdown-item {
    display: block; width: 100%; text-align: center; background-color: #faee7d;
    border: 1px solid #000000; border-radius: 6px; padding: 8px 12px; font-family: inherit;
    font-size: 15px; font-weight: bold; color: #000000; cursor: pointer; transition: background-color 0.2s ease;
}
.profile-dropdown-item:hover { background-color: #e5757a; color: #ffffff; }

.custom-scroll::-webkit-scrollbar { width: 14px; }
.custom-scroll::-webkit-scrollbar-track { background: #f5b5da; border: 1px solid #000; border-radius: 10px; }
.custom-scroll::-webkit-scrollbar-thumb { background: #cfe7ff; border: 1px solid #000; border-radius: 10px; }

.card-link { text-decoration: none; color: inherit; display: block; }
.card-link:hover { opacity: 0.9; }

.site-footer { text-align: center; padding: 30px 30px; font-size: 12px; color: #6f5acd; font-family: inherit; }

@media (max-width: 768px) {
    .header-wrapper { padding: 0 20px; height: 80px; }
    .page-container { padding: 100px 40px 40px 40px; }
    .top-nav-fixed { padding: 15px 0; }
    .top-nav-fixed .nav-btn { width: 50px; height: 50px; border: none; background: transparent; }
    .top-nav-fixed .btn-text { display: none; }
    .top-nav-fixed .icon-overlap { left: 0; position: relative; transform: none; top: 0; border-radius: 5px; }
}