@charset "UTF-8";
/*!
* Start Bootstrap - Freelancer v7.0.2 (https://startbootstrap.com/theme/freelancer)
* Copyright 2013-2021 Start Bootstrap
* Licensed under MIT (https://github.com/StartBootstrap/startbootstrap-freelancer/blob/master/LICENSE)
*/
/*!
 * Bootstrap v5.0.1 (https://getbootstrap.com/)
 * Copyright 2011-2021 The Bootstrap Authors
 * Copyright 2011-2021 Twitter, Inc.
 * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
 */
:root {
    --bg-base: #f4f6fa; /* Cool, icy off-white */
    --text-color: #212529;
    --text-muted: #6b7280;
    --bs-blue: #0d6efd;
    --bs-green: #198754;
    --bs-red: #dc3545;
    --bs-yellow: #ffc107;
    --bs-orange: #fd7e14;
    --accent-main: #5D9BB5; /*#1F80A9;*/ /*#5D9BB5;*/
    --accent-hover: #4c8299;
    --accent-light: #e6f0f5;
    --accent-main-softer: #5D9BB5;
    --accent-hover-softer: #5D9BB5;
    --light-gray-border: #e3e3e3;
    --border-color: #cbd5e1;
    /*--error-color: #b91c1c;*/
    --error-color: #dc2626;
    --error-bg: #fef2f2;
    --error-border: #fca5a5;
    --success-color: #047857;
    --success-bg: #ecfdf5;
    --success-border: #6ee7b7;
    --shadow-sm: 0 1px 3px 0 rgba(0, 0, 0, 0.05), 0 1px 2px 0 rgba(0, 0, 0, 0.03);
    --shadow-md: 0 10px 15px -3px rgba(0, 0, 0, 0.05), 0 4px 6px -2px rgba(0, 0, 0, 0.02);
    --radius-lg: 1rem;
    --radius-md: 0.75rem;
    --radius-sm: 0.5rem;
    --bs-gray: #6c757d;
    --bs-light: #f8f9fa;
    --bs-warning: #f7c077;
    --bs-warning-softer: #f7c077;
    --bs-warning-color: #915b13;
    --bs-font-sans-serif: ui-sans-serif, -apple-system, BlinkMacSystemFont, "Segoe UI Variable Display", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol";
    --font-headline: "Playfair Display", Georgia, serif;
    --bs-font-monospace: SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
    --bs-text-color-muted-7: rgb(156 163 175 / 0.7);
    --bs-text-color-muted-9: rgb(156 163 175 / 0.9);
    --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --card-bg: #ffffff;
    /*---------size-----------*/
    --buzz-col-gap: 1.5rem;
    --buzz-col-gap-media-small: 1rem;
    --col-s-height: 180px;
    --col-s-height-media-small: 150px;
    /*--------------------*/
    --col-portrait-s-width: 120px;
    --col-portrait-s-width-media-small: 90px;
    /*--col-portrait-s-gap: 1.5rem;*/
    /*--------------------*/
    --col-landscape-s-width: 270px; /*270px; exttra large can try 408px*/
    --col-landscape-s-width-media-small: 220px; /*228px;*/
    /*--------------------*/
    --border-radius-modern: 12px; /* Slightly tighter border radius for smaller cards */
    --border-radius-pill: 9999px;
}


/**,
*::before,
*::after {
  box-sizing: border-box;
}
*/
body {
    font-family: var(--bs-font-sans-serif);
    font-size: 15px;
    font-weight: 400;
    /*line-height: 1.5;*/
    color: var(--text-color);
    /*background-color: var(--bg-base);*/
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.main-wrapper {
    flex: 1; /* pushes footer down */
}


/*override bootstrap's */
.btn {
    border-radius: 8px !important;
    font-weight: 500;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    /*font-size: 0.95rem;*/
}

.btn-outline-primary {
    --bs-btn-color: var(--accent-main);
    --bs-btn-border-color: var(--accent-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-main);
    --bs-btn-hover-border-color: var(--accent-main);
    --bs-btn-focus-shadow-rgb: 13,110,253; /*temp*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent-main);
    --bs-btn-active-border-color: var(--accent-main);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /*temp*/
    --bs-btn-disabled-color: var(--accent-main-softer);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--accent-main-softer);
    --bs-gradient: none;
}

.btn-primary {
    --bs-btn-color: #fff;
    --bs-btn-bg: var(--accent-main);
    --bs-btn-border-color: var(--accent-main);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--accent-hover);
    --bs-btn-hover-border-color: var(--accent-hover);
    --bs-btn-focus-shadow-rgb: 49,132,253; /*temp*/
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--accent-main);
    --bs-btn-active-border-color: var(--accent-main);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /*temp*/
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: var(--accent-main-softer);
    --bs-btn-disabled-border-color: var(--accent-main-softer);
    /*--bs-gradient: none;*/
}

.btn-outline-warning {
    --bs-btn-color: var(--bs-warning);
    --bs-btn-border-color: var(--bs-warning);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--bs-warning);
    --bs-btn-hover-border-color: var(--bs-warning);
    --bs-btn-focus-shadow-rgb: 13,110,253; /*temp*/
    --bs-btn-active-color: var(--bs-warning-color);
    --bs-btn-active-bg: var(--bs-warning);
    --bs-btn-active-border-color: var(--bs-warning);
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); /*temp*/
    --bs-btn-disabled-color: var(--bs-warning-softer);
    --bs-btn-disabled-bg: transparent;
    --bs-btn-disabled-border-color: var(--bs-warning-softer);
    --bs-gradient: none;
}

/*.form-control, .form-select {
    font-size: 14px !important;
    width: 100%;
    padding: 0.75rem 1rem;
}*/

.navbar-toggler {
    border: 0px;
}

.navbar-nav {
}

.page-title {
    font-family: var(--font-body);
    font-size: 22px;
    font-weight: 700;
}
/* Global Page Header (Spans Both Columns) */
.page-title-2 {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: calc(var(--bs-gutter-x) * .5) !important;
    max-width: 960px;
}

.page-desc {
    font-family: var(--font-body);
    font-size: 14px;
    /*opacity: 0.8;*/
    font-weight: 400;
    color: #6b7280;
}

.header-buzzerinfo {
    text-align: left;
    margin-bottom: 0.5rem;
}

.header-buzzername {
    font-family: var(--font-body);
    font-size: 28px;
    font-weight: bolder;
}

.header-buzzerbio {
    font-family: var(--font-body);
    font-size: 15px;
    opacity: 0.9;
    font-weight: 400;
    white-space: pre-line;
}
/* Rounded Chip Options */
.tab-sub-options {
    /*display: flex;*/
    gap: 8px;
}

.filter-btn, .main-filter-btn {
    /*margin: 0.25rem;
    font-size: 13px;
    font-weight: 500 !important;
    border-radius: 15px;
    padding: 5px 12px;*/
    /* new layout */
    /*background-color: rgba(255, 255, 255, 0.7);
    border: 1px solid var(--accent-main-softer);
    color: var(--accent-main-softer);
    */
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 6px 12px;
    border-radius: var(--border-radius-pill) !important;
    /*cursor: pointer;*/
    transition: all 0.2s ease;
}

/* BUZZ TABS */
.primary-tabs-container {
    width: 100%;
    margin-bottom: 32px;
    display: flex;
    justify-content: left;
}

.primary-tabs {
    display: flex;
    flex-wrap: wrap;
    /*justify-content: left;*/
    gap: 8px;
    /*max-width: 700px;*/
}

.buzzTab {
    background-color: transparent;
    border: 1px solid var(--light-gray-border);
    padding: 8px 16px;
    border-radius: var(--border-radius-pill);
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.25s ease;
}

@media (max-width: 768px) {
    .header-buzzerinfo {
        text-align: center;
        margin-bottom: 0px;
    }

    .primary-tabs-container:not(.admin) {
        justify-content: center;
    }

    .buzzTab {
        font-size: 12px;
    }
}

.buzzTab:hover {
    color: #0f172a;
    background-color: rgba(0, 0, 0, 0.02);
}

.buzzTab.active {
    background-color: #000;
    color: #fff;
    /*border-color: var(--accent-main-softer);*/
}

.animated-btn {
    display: inline-flex;
    align-items: center;
    gap: 0;
    padding: 8px 10px;
    background-color: transparent;
    color: var(--accent-main);
    border:none;
    border-radius: var(--border-radius-pill);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    /*box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);*/
}

    .animated-btn .icon {
        display: inline-block;
        transition: transform 0.3s ease;
    }

    .animated-btn .text {
        max-width: 0;
        opacity: 0;
        overflow: hidden;
        white-space: nowrap;
        transform: translateX(-10px);
        transition: max-width 0.35s ease, opacity 0.25s ease, transform 0.35s ease, margin-left 0.35s ease;
    }

    /* Hover States */
    .animated-btn:hover {
        color: var(--accent-main);
        background-color: rgba(0, 0, 0, 0.02);
        /*box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);*/
        transform: translateY(-1px);
    }

        .animated-btn:hover .icon {
            transform: rotate(90deg); /* Optional: rotates '+' into a fresh position */
        }

        .animated-btn:hover .text {
            max-width: 100px;
            opacity: 1;
            margin-left: 8px;
            transform: translateX(0);
        }

.modal-header, .modal-footer {
    padding-right: 1.5rem;
    padding-left: 1.5rem;
}

.modal-body {
    padding: 1.5rem;
}

.form-check-input:checked {
    background-color: var(--accent-main);
    border-color: var(--accent-main);
}
/* -- end of replacing bootstraps */

.cta-btn {
    text-decoration: none;
    /*background-color: var(--accent-main);*/
    color: var(--accent-main);
    padding: 16px 34px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 50px; /* Pill shape */
    transition: background-color 0.3s ease, transform 0.2s ease;
    /*box-shadow: 0 4px 15px rgba(37, 99, 235, 0.2); */
}

    .cta-btn:hover {
        /*background-color: var(--accent-hover);*/
        color: var(--accent-hover);
        transform: translateY(-2px); /* Slight lift on hover */
    }

.container-fluid {
    --bs-gutter-x: 0px !important;
}

.header {
    /*background: linear-gradient(to left,#c54fb4, #6e79d0,#418fde); */
    /*color: white;*/
    padding: 15px 100px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 4px 12px 0 rgba(0, 0, 0, 0.08);
}

.header-title {
    font-size: 30px;
    font-weight: 500;
    color: black;
}

.header-subtitle {
    font-size: 15px;
    opacity: 0.8;
}

.header-menu > ul > li > a, .header-menu > li > a {
    text-decoration: none;
    color: var(--accent-main) !important;
    font-size: 14px;
    font-weight: 500;
    /*opacity: 0.8;*/
    cursor: pointer;
    padding: 0.5rem 1rem !important;
}

    .header-menu > ul > li > a:hover, .header-menu > li > a:hover {
        color: var(--accent-main) !important;
        opacity: 1;
    }

.header-submenu > li > a {
    text-decoration: none;
    color: #000 !important;
    font-size: 14px;
    font-weight: 400;
    opacity: 0.8;
    cursor: pointer;
    padding: 0.5rem 1rem !important;
    background-color: #fff !important;
}

    .header-submenu > li > a:hover {
        color: var(--accent-main) !important;
        font-weight: 500;
        background-color: #f8fafc !important;
    }

.header-menu-mobile > ul > li > a {
    text-decoration: none;
    color: var(--accent-main-softer) !important;
    font-size: 14px;
    font-weight: 500;
    opacity: 1;
    cursor: pointer;
    padding: 5px 15px;
}

    .header-menu-mobile > ul > li > a:hover {
        color: var(--accent-main) !important;
        opacity: 1;
    }

.header-menu-mobile > ul > li > hr {
    color: var(--accent-main-softer);
    opacity: 0.2;
    padding: 0px;
    margin: 10px 0;
}

.index-title {
    font-size: 50px;
    font-weight: 700;
    font-family: var(--font-headline);
}

.index-description {
    font-size: 20px;
    color: #555555;
    max-width: 600px;
    margin: 0 auto 60px auto;
}

.index-lead {
    text-transform: uppercase;
    letter-spacing: 3px;
    color: var(--accent-main);
    font-size: 12px;
    font-weight: 600;
    margin-bottom: 20px;
    display: block;
}

.form-label {
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.03rem;
}

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

    .admin-form .form-title {
        font-family: var(--bs-font-sans-serif);
        font-size: 30px;
        font-weight: bolder;
        padding-bottom: 0px;
        text-align: center;
    }

    .admin-form .form-desc {
        font-size: 14px;
        padding-bottom: 30px;
        text-align: center;
        color: gray;
    }

    .admin-form .form-label {
        font-size: 12px;
        font-weight: 500;
        text-transform: uppercase;
        letter-spacing: 0.03rem;
    }

    .admin-form .form-control {
        font-size: 14px;
        letter-spacing: 0.03rem;
    }

        .admin-form .form-control::placeholder {
            opacity: 0.7;
        }

    .admin-form .btn {
        font-size: 15px;
    }

    .admin-form .form-feedback {
        color: #e7515a;
        font-size: 13px;
        font-weight: 500;
        padding-top: 5px;
    }

    .admin-form .form-feedback-success {
        color: var(--bs-green);
        font-size: 13px;
        font-weight: 500;
        padding-top: 5px;
        text-decoration: none;
    }

    .admin-form a {
        color: var(--accent-main);
        text-decoration: none;
        font-weight: 500;
    }

        .admin-form a:hover {
            color: var(--accent-hover);
        }



.btn-loadmore {
    font-size: 13px;
    padding: 8px 14px;
    /*text-transform: uppercase;*/
    font-weight: 500;
    letter-spacing: 1px;
}

.content-wrapper {
    padding: 0 100px;
}
/* Desktops & Large Screens */
@media (max-width: 1200px) {
    .content-wrapper {
        padding: 0 40px;
    }

    .header {
        padding: 20px 40px;
    }
}
/* Mobile screens (max width 480px) */
@media (max-width: 480px) {
    .content-wrapper {
        padding: 0 30px;
    }

    .header {
        padding: 15px 30px;
    }
}

.tab-option-label {
    font-size: 13px;
    /*text-transform: capitalize;*/
    font-weight: normal;
    /*opacity: 0.8;*/
    margin-left: 3px;
    letter-spacing: 0.03rem;
}
/* Integrated Search + Filter Bar */
.control-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}
/* Dedicated Search inside this specific Tab */
.tab-search-box {
    margin: 0 auto;
    width: 100%;
    background-color: #ffffff;
    border: 1px solid var(--accent-main);
    padding: 8px 18px;
    /*border-radius: 9999px;*/
    /*display: flex;*/
    /*align-items: center;*/
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.02);
    transition: all 0.25s ease;
    border-color: #d3dceb;
    /*new style*/
    flex: 1;
    min-width: 260px;
    /*background-color: rgba(255, 255, 255, 0.8);*/
    /*padding: 10px 16px;*/
    border-radius: var(--border-radius-pill);
    display: flex;
    align-items: center;
    transition: all 0.25s ease;
}

    .tab-search-box:focus-within {
        border-color: var(--accent-main);
        box-shadow: 0 8px 25px rgba(79, 70, 229, 0.08);
    }

.search-icon {
    font-size: 14px;
    margin-right: 12px;
    opacity: 0.5;
}

.search-field {
    width: 100%;
    background: transparent;
    border: none;
    outline: none;
    font-size: 14px;
    color: #121826; /* Deep midnight navy */
    font-weight: 400;
}

@media (max-width: 768px) {
    .search-field {
        font-size: 16px;
    }
}

.search-field::placeholder {
    color: #8fa0ba;
    outline: none;
}

.search-close {
    font-size: 12px;
    opacity: 0.8;
}

.predefined-filter {
    font-size: 14px;
}

    .predefined-filter > span {
        cursor: pointer;
        font-size: 12px !important;
    }

.predefined-title {
    font-size: 13px !important;
    font-weight: 600;
    opacity: 0.8;
}

.grid-counter {
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 500;
    opacity: 0.6;
    letter-spacing: 0.03rem;
}

@media (max-width: 768px) {
    .grid-counter {
        font-size: 13px;
    }
}

.buzz-grid {
    display: flex;
    flex-wrap: wrap !important;
    flex-direction: row; /* horizontal layout */
    gap: var(--buzz-col-gap) !important;
}

@media (max-width: 768px) {
    .buzz-grid {
        gap: var(--buzz-col-gap-media-small) var(--buzz-col-gap) !important;
    }
}

.shelf-img-wrapper {
    position: relative;
}

.item-ribbon {
    display: none;
    transition: all 0.8s ease;
    cursor: pointer;
}
/*.shelf-img-wrapper.loaded .item-ribbonxxxhorizontalstyle {
    position: absolute;
    bottom: 12px;
    left: 0px;
    z-index: 2;
    background-color: #d9534f;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 5px 6px;
    border-radius: 3px 0px 0px 3px;*/
/*box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.2);*/
/*letter-spacing: 0.08em;*/
/*writing-mode: vertical-rl;*/
/*text-orientation: mixed;*/
/*display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
}*/

.shelf-img-wrapper.loaded .item-ribbon {
    position: absolute;
    top: 0px;
    right: 8px;
    z-index: 2;
    background-color: #d9534f;
    color: white;
    font-size: 10px;
    font-weight: 600;
    padding: 8px 4px 8px 4px;
    border-radius: 0 0 3px 3px;
    box-shadow: -2px 3px 6px rgba(0, 0, 0, 0.2);
    letter-spacing: 0.05em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0.9;
}

.shelf-img-wrapper.loaded .item-pin {
    position: absolute;
    top: 0px;
    right: 3px;
    z-index: 2;
    color: white;
    font-size: 12px;
    font-weight: 600;
    padding: 8px 4px 8px 4px;
    border-radius: 0 0 3px 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    /*opacity: 0.9;*/
}

@media (max-width: 768px) {
    .item-ribbon, .item-pin {
        font-size: 8px !important;
        padding: 6px 4px 6px 4px;
    }
}

.shelf-img-wrapper:hover .item-ribbon:not(.manage) {
    opacity: 0;
}

.item-ribbon.manage.hide {
    display: none !important;
}

.col-portrait-s {
    flex: 0 0 auto;
    width: var(--col-portrait-s-width);
    margin-bottom: 20px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
}

@media (max-width: 768px) {
    .tab-search-box {
        padding: 4px 14px;
    }

    .col-portrait-s {
        margin-bottom: 0px;
    }
}

.col-portrait-s > .shelf {
    height: var(--col-s-height);
    width: var(--col-portrait-s-width);
    max-width: var(--col-portrait-s-width);
    display: flex;
    position: relative;
    align-items: flex-end; /* align images to bottom */
    justify-content: flex-start; /* align image left inside shelf */
}

.col-portrait-s .shelf .shelf-img-wrapper {
    max-width: 100%;
    max-height: 100%;
    z-index: var(--z);
    transition: all 0.4s ease;
}

    .col-portrait-s .shelf .shelf-img-wrapper img {
        max-width: var(--col-portrait-s-width);
        max-height: var(--col-s-height);
        /*object-fit: contain;*/ /* keeps aspect ratio */
        border-radius: 6px;
        box-shadow: 0 6px 14px rgba(0,0,0,0.5);
        /*position: absolute;*/
        z-index: var(--z);
    }

@media (max-width: 768px) {
    .col-portrait-s {
        width: var(--col-portrait-s-width-media-small);
    }

        .col-portrait-s > .shelf {
            height: var(--col-s-height-media-small);
            width: var(--col-portrait-s-width-media-small);
            max-width: var(--col-portrait-s-width-media-small);
        }

        .col-portrait-s .shelf .shelf-img-wrapper img {
            max-width: var(--col-portrait-s-width-media-small);
            max-height: var(--col-s-height-media-small);
        }
}
/**auto size Experience, to automatically arrange the auto sized **/
.buzz-col.col-auto-s {
    display: inline-block;
    vertical-align: top;
    width: max-content;
    max-width: 100%;
}

.col-auto-s {
    flex: 0 0 auto;
    /*width: var(--col-portrait-s-width);*/
    margin-bottom: 20px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
}

    .col-auto-s > .shelf {
        height: var(--col-s-height);
        width: max-content;
        display: flex;
        position: relative;
        align-items: flex-end; /* align images to bottom */
        justify-content: flex-start; /* align image left inside shelf */
    }

    .col-auto-s .shelf .shelf-img-wrapper {
        z-index: var(--z);
        transition: all 0.4s ease;
    }

        .col-auto-s .shelf .shelf-img-wrapper img {
            max-width: var(--col-landscape-s-width) !important;
            max-height: var(--col-s-height) !important;
            width: auto;
            height: auto;
            object-fit: contain;
            display: block;
            border-radius: 6px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.5);
            transition: all 0.4s ease;
            z-index: var(--z);
            /*position: absolute;*/
        }

    .col-auto-s .text-container {
        width: 0;
        min-width: 100%;
    }

@media (max-width: 768px) {
    .col-auto-s {
        margin-bottom: 0px;
        /*max-height:var(--col-s-height-media-small);*/
        max-width: var(--col-landscape-s-width-media-small) !important;
    }

        .col-auto-s > .shelf {
            height: var(--col-s-height-media-small);
        }

        .col-auto-s .shelf .shelf-img-wrapper img {
            max-width: var(--col-landscape-s-width-media-small) !important;
            max-height: var(--col-s-height-media-small) !important;
        }
}
/**end auto size*/


.col-landscape-s {
    flex: 0 0 auto;
    width: var(--col-landscape-s-width);
    margin-bottom: 20px;
    cursor: pointer;
    opacity: 1;
    transition: opacity 0.3s ease;
}

    .col-landscape-s > .shelf {
        height: var(--col-s-height);
        width: var(--col-landscape-s-width);
        max-width: var(--col-landscape-s-width);
        display: flex;
        position: relative;
        align-items: flex-end;
        justify-content: flex-start;
    }

    .col-landscape-s .shelf .shelf-img-wrapper {
        z-index: var(--z);
        transition: all 0.4s ease;
    }

        .col-landscape-s .shelf .shelf-img-wrapper img {
            max-width: var(--col-landscape-s-width);
            max-height: var(--col-s-height);
            /*width: 100%; */
            object-fit: contain; /* keeps aspect ratio */
            border-radius: 6px;
            box-shadow: 0 6px 14px rgba(0,0,0,0.5);
            /*position: absolute;*/
            /*transition: all 0.4s ease;*/
            z-index: var(--z);
        }

@media (max-width: 768px) {
    .col-landscape-s {
        margin-bottom: 10px;
        width: var(--col-landscape-s-width-media-small);
    }

        .col-landscape-s > .shelf {
            height: var(--col-s-height-media-small);
            width: var(--col-landscape-s-width-media-small);
            max-width: var(--col-landscape-s-width-media-small);
        }

        .col-landscape-s .shelf .shelf-img-wrapper img {
            max-width: var(--col-landscape-s-width-media-small);
            max-height: var(--col-s-height-media-small);
        }
}

.shelf .shelf-img-wrapper img:hover { /* img:hover {*/
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}
/* Series Effect */
/*only main cover visible, others hidden as shadow*/
.series .shelf .shelf-img-wrapper:not(:first-child) {
    opacity: 0;
    transform: translateX(0);
}
/* indicator effect that this is series */
.series:not(.series-expanded) .shelf .shelf-img-wrapper:nth-child(2) {
    opacity: 0.4;
    transform: translateX(7px) rotate(3deg);
    z-index: var(--z);
    filter: brightness(40%);
}
/* hover fan out the extra covers */
/*.series:hover .shelf img:not(:first-child) {
    opacity: 1;
    transform: translateX(var(--translatex)) rotate(var(--rotate));
    z-index: var(--z);
    filter: brightness(100%);
}*/
/* update on 13jul2026 to fan out only when the main cover is hovered */
.series:not(.series-expanded) .shelf:hover .shelf-img-wrapper:not(:first-child) {
    opacity: 1;
    transform: translateX(var(--translatex)) rotate(var(--rotate));
    z-index: var(--z);
    filter: brightness(100%);
}
/* Dim all other items when hovering a series */
.buzz-grid:has(.series:not(.series-expanded) .shelf:hover:hover) .buzz-col {
    opacity: 0.6;
}
/* keep hovered series fully visible */
.series:hover {
    opacity: 1 !important;
}
/* When hovering a fan-out cover, bring it to the top */
.series .shelf .shelf-img-wrapper:hover:not(:first-child) {
    z-index: 50 !important;
}
/* End of Series Effect */

.item-title {
    font-size: 13px;
    font-weight: 700;
    margin-top: 0.6rem;
    max-width: 100%;
    white-space: nowrap; /* prevent wrapping */
    overflow: hidden; /* hide overflow text */
    text-overflow: ellipsis; /* add "..." at the end */
    display: block; /* ensure it behaves like a block element */
}

.item-author {
    font-size: 13px;
    color: #555;
    max-width: 100%;
    white-space: nowrap; /* prevent wrapping */
    overflow: hidden; /* hide overflow text */
    text-overflow: ellipsis; /* add "..." at the end */
    display: block; /* ensure it behaves like a block element */
}

.item-series {
    font-size: 13px;
    color: var(--accent-hover);
    max-width: 100%;
    white-space: nowrap; /* prevent wrapping */
    overflow: hidden; /* hide overflow text */
    text-overflow: ellipsis; /* add "..." at the end */
    display: block; /* ensure it behaves like a block element */
}

    .item-series.child {
        /*opacity: 0.6;*/
        color: #555;
    }

.item-notes {
    padding-top: 3px;
}

.addon-notes {
    font-size: 12px;
    font-weight: 600;
    background-color: var(--bs-success-bg-subtle);
    color: var(--bs-success-text-emphasis);
    border: 0px solid var(--bs-success);
    border-radius: 6px;
    padding: 3px 8px;
}
/* Expand series effect - still thinking how to use this ui */
/* hidden items start completely removed */
.col-group-grid.hidden {
    display: none;
}
/* when shown, they fade/slide in */
.col-group-grid.fade-in {
    animation: expand 0.4s ease forwards;
}

.col-group-grid.fade-out {
    animation: shrink 0.4s ease forwards;
}

@keyframes expand {
    from {
        width: 0;
        transform: scaleX(0);
        opacity: 0;
    }

    to {
        transform: scaleX(1);
        opacity: 1;
    }
}

@keyframes shrink {
    from {
        width: 80px;
        opacity: 1;
    }

    to {
        width: 0;
        opacity: 0;
    }
}
/* End - Expand series effect */
/* Context menu styling */
.context-menu {
    position: absolute;
    display: none;
    background: rgba(255, 255, 255, 0.7); /* white with slight transparency */
    backdrop-filter: blur(6px); /* frosted glass blur */
    -webkit-backdrop-filter: blur(6px);
    color: #000;
    border: 1px solid #ccc;
    border-radius: 6px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
    z-index: 1000;
    min-width: 180px;
    max-width: 250px; /* optional: limit width */
    word-wrap: break-word; /* allow wrapping */
    white-space: normal; /* allow wrapping */
    font-size: 13px;
}

    .context-menu .context-menu-item {
        padding: 8px 10px;
    }

.context-menu-title-top {
    font-weight: 600;
    color: rgba(0,0,0,0.8);
    border-bottom: 1px solid #eee;
    cursor: default;
    word-wrap: break-word;
    white-space: normal;
}

.context-menu-title-bottom {
    font-weight: 600;
    color: rgba(0,0,0,0.8);
    border-top: 1px solid #eee;
    cursor: default;
    word-wrap: break-word;
    white-space: normal;
}

.context-menu-notes {
    border-bottom: 1px solid #eee;
    color: rgba(0,0,0,0.7);
    white-space: pre-line;
}

.context-menu-others div {
    padding: 1px 0px;
}

.context-notes-muted {
    color: rgba(0,0,0,0.5);
}

.context-menu-others div .icon {
    padding-right: 20px;
}

.context-menu .icon-actions {
    display: flex;
    gap: 6px;
    font-size: 14px;
    justify-content: flex-start;
    background-color: transparent;
    border-top: 1px solid #eee;
}

.modal-title {
    font-size: 15px !important;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.modal-subtitle {
    font-weight: 600;
    font-size: 13px;
    /*text-transform: uppercase;*/

    margin-bottom: 0.8rem;
}

.modal-loadingmsg {
    font-size: 13px;
    color: var(--accent-main);
}

.modal-infomsg {
    font-size: 13px;
    color: var(--bs-green);
}

.modal-errormsg {
    font-size: 13px;
    color: var(--bs-red);
}

.modal-item-title {
    font-size: 13px;
    padding: 8px;
    font-weight: 500;
    color: var(--bs-warning-text-emphasis);
    cursor: default;
    word-wrap: break-word;
    white-space: normal;
    border-radius: 6px;
    background-color: var(--bs-warning-bg-subtle);
}

.modal-confirmation-danger {
    font-size: 13px;
    padding: 12px 8px;
    font-weight: 500;
    color: var(--error-color);
    cursor: default;
    word-wrap: break-word;
    white-space: normal;
    border-radius: 6px;
    border: var(--error-border);
    background-color: var(--error-bg);
    width: 100%;
    transition: all 0.2s ease;
}

        .modal-confirmation-danger .modal-confirm-text {
            text-align: start;
            margin-bottom: 5px;
        }

        .modal-confirmation-danger .modal-confirm-button {
            text-align: end;
        }

        .modal-confirmation-danger .btn {
            font-size: 10px;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            padding: 4px 10px;
            border-radius: var(--border-radius-pill) !important;
            /*cursor: pointer;*/
            transition: all 0.2s ease;
            white-space: nowrap;
        }
    /*additional external links in modal, that maybe trigger another modalbox or page etc*/
    .modal-addons-option > a {
        font-size: 13px;
        text-decoration: none;
        cursor: pointer;
    }

    .footer {
        font-size: 13px !important;
        font-weight: 600;
        text-transform: uppercase;
    }

        .footer a {
            text-decoration: none;
            color: var(--accent-main);
            font-size: 12px;
        }

    footer {
        margin-top: auto; /* stick to bottom */
        /*background: #222;
    color: #fff;*/
        text-align: center;
        padding: 1rem;
    }

    .table > thead > tr > th {
        font-weight: bold;
        font-size: 10px;
        text-transform: uppercase;
        color: #555;
    }

    .table > tbody > tr > td {
        font-size: 13px;
    }

    .table-action-red {
        color: red !important;
        text-decoration: none;
    }


    [contenteditable]:focus {
        outline: 0px solid transparent;
    }
    /*Buzz Manage*/
    .card-manage {
        box-shadow: var(--bs-box-shadow) !important;
        height: 100% !important;
        /*box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);*/
    }

    .card-manage-noshadow {
        box-shadow: none !important;
        height: 100% !important;
        /*box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);*/
    }

    .card-manage-menu {
        font-size: 14px;
        color: #555;
        cursor: pointer;
        opacity: 0;
        transition: opacity 0.2s ease-in-out;
        z-index: 3;
    }

        .card-manage-menu.show {
            opacity: 1;
        }

        .card-manage-menu button {
            font-size: 12px;
            padding: 5px;
            border: 0px solid rgba(0, 0, 0, 0.1);
            border-radius: 10px !important;
            background-color: transparent;
            transition: background-color 0.2s, transform 0.2s;
        }

    .card-manage:hover .card-manage-menu {
        opacity: 1;
    }

    .card-manage-cover {
        margin-right: 1.5rem !important;
    }

    .card-manage-cover-style2 {
        padding-bottom: 10px;
        height: 160px;
        display: flex;
        align-items: flex-end;
    }
    /*.card-manage-cover img {
    max-width: 100px;
    border-radius: 6px;
    box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
}*/
    .card-manage-cover div img {
        max-width: 100px;
        border-radius: 6px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
    }

    @media (max-width: 600px) {
        /*when small screen the manage's images smaller to occupy lesser spaces*/
        .card-manage-cover img {
            max-width: 80px !important;
        }
    }

    .card-manage-cover-style2 img {
        /*max-width: 100%;*/
        max-width: 100%;
        max-height: 150px;
        border-radius: 6px;
        box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5);
    }

    .manage-changecover-option {
        padding-top: 3px;
        font-size: 0.7em;
        color: #000;
        text-transform: uppercase;
        font-weight: 400;
        text-align: center;
        /*text-decoration: underline;*/
        cursor: pointer;
    }

    .card-manage-info {
        font-size: 13px;
        color: #555;
        white-space: wrap; /* prevent wrapping */
        display: flex;
        flex-direction: column; /* stack children vertically */
    }

        .card-manage-info .title {
            font-size: 14px;
            color: #212529;
            font-weight: bold;
            /*margin-top: 0.3rem;*/
            cursor: pointer;
        }

            .card-manage-info .title:focus {
                cursor: text;
            }

        .card-manage-info .author {
            cursor: pointer;
        }

            .card-manage-info .author:focus {
                cursor: text;
            }

        .card-manage-info .series {
            color: var(--bs-blue);
            cursor: pointer;
        }

        .card-manage-info .date {
            cursor: pointer;
        }

            .card-manage-info .date .not-set {
                cursor: pointer;
                color: var(--bs-gray);
                opacity: 0.9;
            }

        .card-manage-info .notes {
            color: var(--bs-gray);
            padding-bottom: 10px;
        }

            .card-manage-info .notes:empty:before, .card-manage-info .notes:has(br:only-child):before {
                content: "Write notes here...";
                color: #999;
                pointer-events: none; /* placeholder not selectable */
            }

        .card-manage-info .created-date {
            font-size: 11px;
            text-transform: uppercase;
            font-style: italic;
            margin-top: auto;
        }

        .card-manage-info .divider {
            margin-top: 8px;
        }

    .date-save {
        color: var(--bs-green);
        font-weight: bolder;
    }

    .date-remove {
        color: palevioletred;
    }

    .date-cancel {
        color: black;
    }

    input[type="date"] {
        color: #555;
    }

    .form-control-text-sm {
        font-size: 13px;
        padding: 2px 0.2rem;
        width: 100px !important;
        border: 0.5px solid var(--bs-gray);
    }
    /* started my profile layout design */
    /* Layout Architecture */
    .profile-container {
        width: 100%;
        max-width: 960px;
        display: grid;
        grid-template-columns: 300px 1fr;
        gap: 2rem;
        align-items: start;
    }

    @media (max-width: 850px) {
        .profile-container {
            grid-template-columns: 1fr;
        }
    }
    /* Sidebar Container */
    .profile-sidebar {
        display: flex;
        flex-direction: column;
        gap: 1.5rem;
        position: sticky;
        top: 3rem;
    }

    @media (max-width: 850px) {
        .profile-sidebar {
            position: static;
            top: auto;
        }
    }

    .profile-card {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 1.75rem;
        box-shadow: var(--shadow-sm);
    }
    /* Profile Snapshot Box */
    .profile-snapshot {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 1rem;
    }

    .avatar-preview-container {
        position: relative;
        width: 96px;
        height: 96px;
        border-radius: 50%;
        overflow: hidden;
        border: 3px solid var(--accent-light);
        box-shadow: var(--shadow-sm);
        background-color: #e2e8f0;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .avatar-preview-container img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
    /* Default Vector Silhouette Avatar */
    .default-avatar-svg {
        width: 100%;
        height: 100%;
        fill: #94a3b8;
        background-color: #e2e8f0;
    }

    .snapshot-details h3 {
        font-size: 1.1rem;
        font-weight: 700;
        color: var(--text-color);
        margin-bottom: 0.2rem;
    }

    .snapshot-details p {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 0;
    }
    /* Portfolio Counts / Stats */
    .stats-container {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0.75rem;
        width: 100%;
        margin-top: 0.5rem;
        border-top: 1px solid var(--border-color);
        padding-top: 1.25rem;
    }

    .stat-badge {
        background-color: #f8fafc;
        border: 1px solid var(--border-color);
        padding: 0.85rem;
        border-radius: var(--radius-md);
        text-align: center;
    }

        .stat-badge span {
            font-size: 0.7rem;
            text-transform: uppercase;
            letter-spacing: 0.05em;
            color: var(--text-muted);
            font-weight: 600;
            display: block;
            margin-bottom: 0.15rem;
        }

        .stat-badge strong {
            font-size: 1.4rem;
            font-weight: 700;
            color: var(--accent-main);
        }
    /* Sidebar Navigation Jump Links */
    .profile-nav-links-card {
        padding: 1rem;
        display: flex;
        flex-direction: column;
        gap: 0.35rem;
    }

    .profile-nav-card-title {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.05em;
        color: var(--text-muted);
        font-weight: 700;
        padding: 0.5rem 1rem 0.25rem 1rem;
        margin-bottom: 0.25rem;
    }

    .sidebar-jump-nav-btn {
        background: none;
        border: none;
        width: 100%;
        padding: 0.75rem 1rem;
        font-size: 0.9rem;
        font-weight: 600;
        color: var(--text-muted);
        cursor: pointer;
        border-radius: var(--radius-sm);
        text-align: left;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 0.75rem;
    }

        .sidebar-jump-nav-btn:hover {
            color: var(--text-color);
            background-color: #f8fafc;
        }

        .sidebar-jump-nav-btn.active {
            color: var(--accent-main);
            background-color: var(--accent-light);
        }
    /* Main Form Content Area */
    .profile-content-card {
        background-color: var(--card-bg);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-lg);
        padding: 2.25rem;
        box-shadow: var(--shadow-md);
        display: flex;
        flex-direction: column;
        gap: 2.5rem;
        scroll-behavior: smooth;
        min-width: 0;
    }

    .profile-form-section {
        display: flex;
        flex-direction: column;
        gap: 1.25rem;
        scroll-margin-top: 2rem;
    }

    .section-header h2 {
        font-size: 1.2rem;
        font-weight: 700;
        color: var(--text-color);
        margin-bottom: 0.25rem;
    }

    .section-header p {
        font-size: 0.85rem;
        color: var(--text-muted);
        margin-bottom: 0px;
    }
    /* Inputs & Layout Structure */
    .profile-form-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem;
    }

    @media (max-width: 600px) {
        .profile-form-grid {
            grid-template-columns: 1fr;
        }
    }



    .register-input-group {
        display: flex;
        flex-direction: column;
    }

    .profile-input-group {
        display: flex;
        flex-direction: column;
        gap: 0.45rem;
    }

        .profile-input-group.full-width {
            grid-column: span 2;
        }

    @media (max-width: 600px) {
        .profile-input-group.full-width {
            grid-column: span 1;
        }
    }

    .profile-form-section label {
        font-size: 0.8125rem;
        font-weight: 600;
        color: var(--text-color);
    }

    input[type="text"], input[type="email"], input[type="password"], textarea, .form-select {
        font-size: 14px !important;
        width: 100%;
        padding: 0.75rem 1rem !important;
        background-color: #f9fafb !important;
        border: 1px solid var(--border-color);
        border-radius: var(--radius-sm) !important;
        color: var(--text-color) !important;
        outline: none !important;
        transition: all 0.2s ease !important;
    }

        input[type="text"]:focus, input[type="email"]:focus, input[type="password"]:focus, textarea:focus, .form-select:focus {
            border-color: var(--accent-main) !important;
            background-color: #ffffff !important;
            box-shadow: 0 0 0 3px var(--accent-light) !important;
        }

    .profile-form-section textarea {
        resize: vertical;
        min-height: 100px;
    }
    /* URL Preview Element */
    .url-preview {
        font-size: 0.8rem;
        color: var(--text-muted);
        display: flex;
        align-items: center;
        gap: 0.35rem;
        margin-top: 0.15rem;
    }

        .url-preview a {
            color: var(--accent-main);
            text-decoration: none;
            font-weight: 500;
            word-break: break-all;
            transition: color 0.2s ease;
        }

            .url-preview a:hover {
                color: var(--accent-hover);
                text-decoration: none;
            }
    /* Input Container with Internal Loading Spinner / Status Icon */
    .input-with-icon {
        position: relative;
        display: flex;
        align-items: center;
    }

        .input-with-icon input {
            padding-right: 2.75rem;
        }

    .input-status-indicator {
        position: absolute;
        right: 1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        pointer-events: none;
    }

    .input-spinner {
        width: 16px;
        height: 16px;
        border: 2px solid var(--border-color);
        border-top-color: var(--accent-main);
        border-radius: 50%;
        animation: spin 0.6s linear infinite;
        display: none;
    }

        .input-spinner.active {
            display: block;
        }

    .input-checkmark {
        font-size: 1rem;
        color: var(--success-color);
        display: none;
    }

        .input-checkmark.active {
            display: block;
        }

    @keyframes spin {
        to {
            transform: rotate(360deg);
        }
    }
    /* Refined Feedback Alert Banners */
    .feedback-alert {
        display: none;
        align-items: flex-start;
        /*justify-content:space-between;*/
        gap: 0.85rem;
        padding: 1rem 1.15rem;
        border-radius: var(--radius-sm);
        font-size: 0.875rem;
        line-height: 1.4;
        opacity: 1;
        transition: opacity 0.5s ease;
    }

        .feedback-alert.fade-out {
            opacity: 0;
        }

        .feedback-alert.success {
            background-color: var(--success-bg);
            border: 1px solid var(--success-border);
            color: var(--success-color);
            display: flex;
        }

        .feedback-alert.error {
            background-color: var(--error-bg);
            border: 1px solid var(--error-border);
            color: var(--error-color);
            display: flex;
        }

    .feedback-icon {
        font-size: 1.1rem;
        line-height: 1;
        flex-shrink: 0;
        margin-top: 0.05rem;
    }

    .feedback-content {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
    }

    .feedback-title {
        font-weight: 600;
        letter-spacing: -0.01em;
    }

    .feedback-desc {
        font-size: 0.8125rem;
        opacity: 0.9;
    }
    /* The Animated Countdown Progress Pill */
    .countdown-pill {
        display: flex;
        align-items: center;
        gap: 0.35rem;
        background-color: rgba(4, 120, 87, 0.12);
        padding: 0.25rem 0.65rem;
        border-radius: 9999px;
        font-size: 0.75rem;
        font-weight: 700;
        flex-shrink: 0;
        margin-left: auto;
    }

    .error .countdown-pill {
        background-color: rgba(220, 38, 38, 0.12);
    }

    .countdown-spinner-ring {
        width: 10px;
        height: 10px;
        border: 2px solid rgba(4, 120, 87, 0.3);
        border-top-color: var(--success-color);
        border-radius: 50%;
        animation: spin 1s linear infinite;
    }

    .error .countdown-spinner-ring {
        border: 2px solid rgba(220, 38, 38, 0.3);
        border-top-color: var(--error-color);
    }
    /* Custom Inline Validation States */
    .input-group.error input,
    .input-group.error textarea {
        border-color: var(--error-color);
        background-color: var(--error-bg);
    }

        .input-group.error input:focus,
        .input-group.error textarea:focus {
            box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.15);
        }

    .input-group.success input,
    .input-group.success textarea {
        border-color: var(--success-color);
        background-color: #fff;
    }
    /* Error Helper Text */
    .input-error-message {
        font-size: 0.775rem;
        color: var(--error-color);
        font-weight: 500;
        display: none;
        align-items: center;
        gap: 0.25rem;
        margin-top: 0.15rem;
    }

    .input-group.error .input-error-message {
        display: flex;
    }
    /* Avatar Upload Row Style with Enhanced Obvious Dotted Border & Hover Effects */
    .avatar-upload-box {
        display: flex;
        align-items: center;
        justify-content: space-between;
        background-color: #f8fafc;
        border: 2px dashed #e5e7eb;
        padding: 1.25rem 1.5rem;
        border-radius: var(--radius-sm);
        transition: all 0.25s ease;
        gap: 1rem;
        cursor: pointer;
    }

        .avatar-upload-box:hover {
            border-color: var(--accent-main);
            background-color: var(--accent-light);
            box-shadow: 0 4px 12px rgba(93, 155, 181, 0.15);
            /*transform: translateY(-1px);*/
        }

    @media (max-width: 500px) {
        .avatar-upload-box {
            flex-direction: column;
            align-items: flex-start;
        }
    }

    .avatar-upload-box.dragover {
        border-color: var(--accent-main);
        background-color: var(--accent-light);
        box-shadow: 0 4px 16px rgba(93, 155, 181, 0.25);
    }

    .file-upload-trigger {
        background-color: white;
        border: 1px solid var(--border-color);
        color: var(--text-color);
        padding: 0.55rem 1.15rem;
        border-radius: var(--radius-sm);
        font-size: 0.85rem;
        font-weight: 600;
        cursor: pointer;
        box-shadow: var(--shadow-sm);
        transition: all 0.2s ease;
        white-space: nowrap;
    }

        .file-upload-trigger:hover {
            border-color: var(--accent-main);
            color: white;
            background-color: var(--accent-main);
        }

    .avatar-upload-box input[type="file"] {
        display: none;
    }
    /* Save Buttons */
    .save-btn {
        /*background-color: var(--accent-main);
    color: white;*/
        border: none;
        padding: 0.65rem 1.5rem;
        /*
    border-radius: var(--radius-sm);*/
        font-size: 0.95rem;
        font-weight: 500;
        /*cursor: pointer;*/
        transition: background-color 0.2s ease, transform 0.1s ease;
        align-self: flex-start;
        box-shadow: 0 4px 12px rgba(93, 155, 181, 0.25);
    }
        /*.save-btn:hover {
        background-color: var(--accent-hover);
    }*/

        .save-btn:active {
            transform: scale(0.98);
        }

    .profile-content-card > .divider {
        border: none;
        border-top: 1px solid var(--border-color);
        margin: 0.5rem 0;
        opacity: 1;
    }
    /* end my profile layout design */

    .xsmall {
        font-size: 12px;
    }