@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Thin.ttf') format('truetype');
    font-display: swap;
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ThinItalic.ttf') format('truetype');
    font-display: swap;
    font-weight: 100;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraLight.ttf') format('truetype');
    font-display: swap;
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraLightItalic.ttf') format('truetype');
    font-display: swap;
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Light.ttf') format('truetype');
    font-display: swap;
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-LightItalic.ttf') format('truetype');
    font-display: swap;
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Regular.ttf') format('truetype');
    font-display: swap;
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Italic.ttf') format('truetype');
    font-display: swap;
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Medium.ttf') format('truetype');
    font-display: swap;
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-MediumItalic.ttf') format('truetype');
    font-display: swap;
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBold.ttf') format('truetype');
    font-display: swap;
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-SemiBoldItalic.ttf') format('truetype');
    font-display: swap;
    font-weight: 600;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Bold.ttf') format('truetype');
    font-display: swap;
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-BoldItalic.ttf') format('truetype');
    font-display: swap;
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBold.ttf') format('truetype');
    font-display: swap;
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-ExtraBoldItalic.ttf') format('truetype');
    font-display: swap;
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-Black.ttf') format('truetype');
    font-display: swap;
    font-weight: 900;
    font-style: normal;
}

@font-face {
    font-family: 'Poppins';
    src: url('../fonts/Poppins-BlackItalic.ttf') format('truetype');
    font-display: swap;
    font-weight: 900;
    font-style: italic;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Poppins";
}

:root {
    --blue-color: #3C84E8;
    --blue-color-transparent: #3C84E860;

    --green-color: #4CAF50;
}

img {
    max-width: 100%;
}

textarea {
    resize: none;
}

a {
    color: inherit;
    font: inherit;
    transition: .4s;
    text-decoration: none;
}

a:hover {
    opacity: .45;
}

a.button {
    display: block;
}

/* Header */

header {
    position: relative;
    z-index: 2;
    box-shadow: 0 0 8px RGBa(0, 0, 50, .25);
    max-height: 72px;
    padding: 16px 0;
}

header .header_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    width: min(1500px, 90%);
    margin: auto;
}

header nav {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    justify-self: flex-end;
    min-width: 450px;
}

header nav ul {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 48px;
}

header nav ul.connected_nav {
    gap: 24px;
}

header nav ul.connected_nav .links {
    display: flex;
    align-items: center;
    gap: 32px;
    margin-top: 6px;
    margin-right: 10px;
}

header nav ul.connected_nav .sublinks .explore_link {
    display: none;
}

header nav ul.connected_nav .links .button {
    display: block;
    word-wrap: nowrap;
    white-space: nowrap;
    padding: 6px 0;
    text-transform: uppercase;
    width: 150px;
    text-align: center;
    border-radius: 8px;
    font-size: 1rem;
    border: none;
    font-weight: 700;
    color: white;
    background-color: var(--blue-color);
    cursor: pointer;
    transform: translateY(-3px);
    transition: .4s;
}

header nav ul.connected_nav .links .button:hover {
    opacity: .5;
}

header nav ul.connected_nav .sublinks {
    gap: 18px;
}

header nav ul.connected_nav .mobile_search_button-container {
    display: none;
}

header .trigger_mobile_navigation {
    display: flex;
    background-color: transparent;
    padding: 0;
    border: none;
    cursor: pointer;
}

header #searchResultForm .trigger_mobile_navigation {
    display: none;
}

header nav ul li a {
    display: block;
    white-space: nowrap;
}

header nav ul li a.inbox_anchor {
    position: relative;
}

header nav ul .notif_dot {
    position: absolute;
    top: 1px;
    right: -1px;
    background-color: red;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    margin-left: 6px;
    vertical-align: middle;
    box-shadow: 0 0 4px rgba(255, 0, 0, 0.5);
}

header nav ul .notif_dot::after {
    content: ' ';
    box-sizing: border-box;
    display: block;
    width: 8px;
    height: 8px;
    border-radius: 100%;
    border: 1px solid red;

    animation: notif_alert 1.8s infinite linear;

}

@keyframes notif_alert {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .3;
    }

    100% {
        transform: scale(2.5);
        opacity: 0;
    }
}


header nav ul li a.pending_order_anchor {
    position: relative;
}

header nav ul li a.pending_order_anchor .order_number_tracker {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 0;
    right: -2px;
    color: white;
    width: 12px;
    height: 12px;
    font-size: 10px;
    border-radius: 100%;
}

header nav ul li a.pending_order_anchor .order_number_tracker.in_progress {
    background-color: #FEAC02;
}

header nav ul li a.pending_order_anchor .order_number_tracker.delivered {
    background-color: #059669;
}

header nav ul li a.pending_order_anchor .order_number_tracker.other {
    background-color: #cecece;
}

header .company_name_container {
    display: flex;
    align-items: center;
}

header .company_name {
    display: block;
    width: fit-content;
    color: var(--blue-color);
    font-weight: 700;
    font-size: 24px;
    min-width: 140px;
}

header .profile_picture {
    position: relative;
    width: 40px;
    height: 40px;
}

header .wallet {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    border: 2px solid black;
    font-weight: 600;
    border-radius: 6px;
    white-space: nowrap;
}

header .profile_picture .profile_options {
    display: none;
    position: absolute;
    background-color: RGBa(250, 250, 250);
    z-index: 50;
    width: max(450px, 100%);
    right: -50px;
    padding: 16px;
    border-radius: 16px;
    box-shadow: 0 0 8px #3c3c3c60;
}

header .profile_picture .profile_options.active {
    display: block;
}

header .profile_picture .profile_options .mobile_options {
    display: none;
    margin-bottom: 12px;
}

header .profile_picture .profile_options .mobile_options button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

header .profile_picture .profile_options hr {
    border: none;
    background-color: RGBa(180, 180, 180);
    height: 1px;
    width: 100%;
    margin: 6px 0 0;
}

header .profile_picture .profile_options img {
    width: 75px;
    height: 75px;
    object-fit: cover;
    border-radius: 100%;
}

header .profile_picture .profile_options .logout_button {
    justify-self: center;
}

header .profile_picture .top-profile_options {
    display: grid;
    align-items: center;
    gap: 8px;
    grid-template-columns: 1fr 85px;
    margin-bottom: 12px;
}

header .profile_picture .top-profile_options .top-profile_dashboard-redirect {
    display: grid;
    align-items: center;
    gap: 8px;
    grid-template-columns: 85px 1fr;
}

header .profile_picture .top-profile_options .top-profile_dashboard-redirect .top-profile_username {
    max-width: 260px;
    white-space: nowrap;
    /* Empêche le retour à la ligne */
    overflow: hidden;
    /* Cache le texte qui dépasse */
    text-overflow: ellipsis;
    /* Ajoute les "..." */
    display: inline-block;
    /* Nécessaire pour text-overflow */
    vertical-align: middle;
    /* Optionnel pour aligner joliment */
}

header .profile_picture .top-profile_options .top-profile_fullname {
    max-width: 260px;
    font-weight: 700;
    white-space: nowrap;
    /* Empêche le retour à la ligne */
    overflow: hidden;
    /* Cache le texte qui dépasse */
    text-overflow: ellipsis;
    /* Ajoute les "..." */
    display: block;
    /* Nécessaire pour text-overflow */
    vertical-align: middle;
    /* Optionnel pour aligner joliment */
}

header .profile_picture .profile_picture_image {
    min-width: 40px;
    width: 40px;
    min-height: 40px;
    height: 40px;
    object-fit: cover;
    border-radius: 100%;
    cursor: pointer;
    transition: .4s;
}

header .profile_picture .profile_picture_image:hover {
    opacity: .5;
}

header .profile_picture .profile_options-nav {
    display: flex;
    flex-flow: column;
}

header .profile_picture .profile_options-nav_category {
    display: flex;
    flex-flow: column;
    gap: 12px;
    border-bottom: 1px solid RGBa(180, 180, 180);
    padding: 12px 0;
    font-size: 16px;
}

/* Main */

main {
    position: relative;
}

/* Footer */


.site_footer {
    background: var(--blue-color);
    color: #f0f0f0;
    font-family: 'Poppins', sans-serif;
    padding: 60px 20px 30px;
}

.footer_container {
    width: min(1500px, 90%);
    margin: 0 auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    gap: 80px;
}

.footer_brand {
    flex: 1 1 250px;
}

.footer_brand .logo {
    font-size: 1.8rem;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    display: inline-block;
    margin-bottom: 10px;
}

.footer_brand p {
    font-size: 0.95rem;
    color: #e0e0e0;
    line-height: 1.6;
}

.footer_links {
    display: flex;
    flex: 3 1 700px;
    flex-wrap: wrap;
    gap: 30px;
}

.footer_column {
    min-width: 160px;
    flex: 1;
}

.footer_column h4 {
    color: #fff;
    font-size: 1rem;
    margin-bottom: 12px;
}

.footer_column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer_column ul li {
    margin-bottom: 8px;
}

.footer_column ul li a {
    display: flex;
    align-items: center;
    gap: 4px;
    color: #f0f0f0;
    text-decoration: none;
    font-size: 0.9rem;
}

.social_links li {
    display: flex;
    align-items: center;
}

.social_links img {
    width: 16px;
    height: 16px;
    margin-right: 8px;
    filter: brightness(10);
}

.footer_bottom {
    text-align: center;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 20px;
    margin-top: 40px;
    font-size: 0.85rem;
    color: #f0f0f0;
}

/* Search Bar */

#searchResultForm {
    display: block;
}

.search_query_container {
    display: flex;
    position: relative;
    align-items: flex-end;
    flex-flow: row;
    background-color: white;
    box-shadow: 0 0 4px RGB(178, 178, 178, .7);
    border-radius: 16px;
    padding: 8px 12px;
    gap: 12px;
    width: fit-content;
    max-width: 100%;
    z-index: 12;
}

.search_query_container label {
    cursor: pointer;
}

.search_query_container svg {
    width: 24px;
    height: 24px;
    vertical-align: middle;
}

.search_query_container input {
    background-color: transparent;
    height: 23px;
    border: none;
    outline: none;
    padding: 0;
    min-width: 250px;
    max-width: 100%;
}

.search_query_container :has(input:focus) {
    outline: 1px solid black;
}

.search_query_container button {
    background-color: transparent;
    border: none;
    cursor: pointer;
}

.search_query_container .deleteButton {
    position: absolute;
    right: 10%;
    display: none;
}

.search_query_container input::placeholder {
    color: RGB(178, 178, 178);
    letter-spacing: 0.3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}


/* Search Result Modal */

/* The Modal (background) */
#searchResultModal.modal {
    display: none;
    /* Hidden by default */
    position: fixed;
    /* Stay in place */
    z-index: 10;
    /* Sit on top */
    left: 0;
    top: 0;
    width: 100%;
    /* Full width */
    height: 100%;
    /* Full height */
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.25);
    /* Black w/ opacity */
}

/* Modal Content/Box */
#searchResultModal .modal-content {
    background-color: #fefefe;
    margin: 60px auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    border-radius: 16px;
    box-shadow: 0 0 16px RGBa(0, 0, 0, .25);
}

/* The Close Button */
#searchResultModal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#searchResultModal .close svg {
    width: 28px;
    height: 28px;
}

#searchResultModal .close:hover,
#searchResultModal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Hero */

#hero {
    display: grid;
    position: relative;
    background-color: RGBa(30, 80, 150, .65);
}

#hero .background {
    position: absolute;
    left: 0;
    top: 0;
    background-image: url("../media/banner.jpeg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    width: 100%;
    height: 100%;
    z-index: -1;
}

#hero .text_content {
    margin: auto;
    width: min(1500px, 90%);
    color: white;
    min-height: calc(350px * 0.6);
    padding: 64px 0;
}

#hero .text_content h1 {
    font-size: 48px;
}

#hero .text_content p {
    font-size: 23px;
    width: min(750px, 100%);
}

#hero .buttons {
    display: flex;
    align-items: center;
    margin-top: 20px;
    gap: 20px;
}

#hero .buttons .button {
    background-color: var(--blue-color);
    padding: 16px 48px;
    border-radius: 16px;
    box-shadow: 0 0 8px var(--blue-color-transparent);
}

#search-stores {
    min-height: 80vh;
}

.stores .heading {
    display: flex;
    flex-flow: column;
    align-items: center;
    line-height: 100%;
    gap: 18px;
    margin: 48px auto;
    max-width: 90%;
    text-align: center;
}

.stores .heading h2 {
    line-height: 110%;
}

.stores .heading small {
    font-size: 1.5rem;
    color: var(--blue-color);
    font-weight: 500;
    line-height: 1.2;
}

.stores .carrousel_stores {
    /* display: grid; */
    /* grid-template-columns: 50px min(1350px, 80%) 50px; */
    justify-content: center;
    overflow: visible;
    user-select: none;
}

.stores .carrousel_stores button {
    height: fit-content;
    margin: auto;
    border-radius: 100%;
    height: 50px;
    width: 50px;
    font-size: 28px;
    border: none;
    background-color: RGBa(230, 230, 230, .85);
    color: var(--blue-color);
    cursor: pointer;
    font-weight: 600;
    transition: .4s;
}

.stores .carrousel_stores button:hover {
    opacity: .85;
}

.items_list {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 40px 26px;
    width: min(1200px, 90%);
    margin: 30px auto 80px;
    white-space: nowrap;
    /* overflow: hidden; */

    /* scroll-behavior: smooth;
    scroll-snap-type: x mandatory; */
    /* padding: 4px; */
}

.items_list .item {
    display: block;
    width: 280px;
    position: relative;
    /* flex: 0 0 auto;
    scroll-snap-align: start; */
}

.user_stores-container .items_list {
    justify-content: flex-start;
}

/* 
.devanture{
    position: absolute;
    width: 100%;
    transform: translateY(-30px);
} */

.items_list .item a:hover {
    opacity: .8;
}

.items_list .item .item-banner {
    height: 157.5px;
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 0 4px lightgray;
}

.items_list .item .product_informations {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
    gap: 16px;
}


.items_list .item .seller_informations {
    display: flex;
    align-items: center;
    gap: 12px;
}

.items_list .item .seller_informations img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 100%;
}

.items_list .item .seller_informations .seller_name {
    /* max-width: 65%; */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

.items_list .item .product_review {
    display: flex;
    align-items: center;
    gap: 5px;
}

.items_list .item .product_review svg {
    margin-bottom: 2px;
}

.items_list .item .product_review .review_number {
    color: RGB(30, 30, 30);
    font-size: 12px;
}

/* Base : largeur, police et comportement par défaut */
.items_list .item .product_title {
    --lines: 2;
    /* nombre de lignes voulues (modifiable) */
    width: 280px;
    font-size: 14px;
    line-height: 1.2;
    /* valeur relative, utilisée pour calc en JS */
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
    white-space: normal;
    /* important pour le fallback JS */
    padding: 4px;
    box-sizing: border-box;
    font-weight: 400;
    height: 50px;
}

/* Si le navigateur supporte -webkit-line-clamp -> rendu optimal */
.items_list .item .product_title.clamp--webkit {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: var(--lines);
    overflow: hidden;
}

/* Classe visible quand on utilise le fallback JS (optionnel) */
.items_list .item .product_title.clamp--js {
    /* rien de spécial ici, le JS gère max-height */
}

.items_list .item .pricing {
    margin: 6px 0 0;
    font-weight: 700;
    font-size: 18px;
    padding: 0 4px;
}

/* FAQ */


#faq {
    padding: 60px 20px 100px;
    background-color: #f5f9ff;
}

.faq_heading {
    text-align: center;
    margin-bottom: 40px;
}

.faq_heading h2 {
    font-size: 2em;
    margin-bottom: 10px;
    color: var(--blue-color);
}

.faq_heading p {
    font-size: 1rem;
    color: #555;
}

.faq_list {
    max-width: 800px;
    margin: 0 auto;
}

.faq_item {
    border-bottom: 1px solid #ddd;
    background-color: #fff;
    border-radius: 8px;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.03);
    overflow: hidden;
}

.faq_question {
    width: 100%;
    padding: 20px;
    background: none;
    border: none;
    text-align: left;
    font-size: 1.1rem;
    font-weight: 600;
    cursor: pointer;
    position: relative;
    color: #333;
}

.faq_question::after {
    content: '+';
    position: absolute;
    right: 20px;
    font-size: 1.5rem;
    transition: transform 0.2s ease;
    color: var(--blue-color);
}

.faq_item.open .faq_question::after {
    content: '-';
    transform: rotate(180deg);
}

.faq_answer {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease, padding 0.3s ease;
    padding: 0 20px;
    background-color: #fdfdfd;
    border-top: 1px solid #eee;
}

.faq_item.open .faq_answer {
    max-height: 300px;
    padding: 15px 20px 25px;
}

.faq_answer p {
    margin: 0;
    color: #444;
    line-height: 1.6;
}


/* Login form */

.login_form {
    display: grid;
    min-height: 80vh;
    padding: 64px 0;
    background-color: #3C84E810;
}

.login_form h1 {
    color: var(--blue-color);
    margin-bottom: 16px;
    text-align: center;
}

.login_form form {
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 12px;
    margin: auto;
    width: min(450px, 90%);
}

.login_form form input {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid RGBa(160, 160, 160);
    border-radius: 4px;
    font-size: 16px;
    margin: 2px 0;
}

.login_form form #code {
    width: 75px;
}

.login_form form p {
    text-align: center;
}

.login_form form a {
    color: var(--blue-color);
}

.login_form form button {
    background-color: var(--blue-color);
    color: white;
    width: 100%;
    border: none;
    box-shadow: 0 0 8px var(--blue-color-transparent);
    border-radius: 4px;
    cursor: pointer;
    transition: .4s;
    padding: 16px;
    font-size: 18px;
}

.login_form form button[type=submit] {
    margin: 24px 0 0;
}

.login_form form button:hover {
    opacity: .6;
}

.login_form form hr {
    width: 100%;
    background-color: lightgray;
    border: none;
    height: 1px;
    margin: 16px 0;
}

.login_form form .separator {
    position: relative;
    width: 100%;
    margin: 16px 0;
}

.login_form form .separator_text {
    position: absolute;
    color: lightgray;
    background-color: white;
    top: 20%;
    left: 50%;
    padding: 0 12px;
    transform: translateX(-50%);
}

.profile_setting_up {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 450px 1fr;
    min-height: 80vh;
    padding: 64px 8%;
    gap: 32px;
    background-color: #3C84E810;
}

.profile_setting_up h1 {
    margin: 0 0 10px;
}

.profile_setting_up .options_image_list .option_image {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 24px;
}

.profile_setting_up .options_image_list .option_image label {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .2s;
    gap: 6px;
    user-select: none;
    white-space: nowrap;
}

.profile_setting_up .options_image_list .option_image label:hover {
    opacity: .85;
}

.profile_setting_up .options_image_list .option_image label input {
    display: none;
}

.profile_setting_up .block {
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 12px;
}

.profile_setting_up .block input,
.profile_setting_up .block select {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid RGBa(160, 160, 160);
    border-radius: 4px;
    font-size: 16px;
    margin: 2px 0;
}

.profile_setting_up .block .textarea-container {
    width: 100%;
    border: 1px solid RGBa(160, 160, 160);
    border-radius: 4px;
    font-size: 16px;
    margin: 2px 0;
    overflow: hidden;
}

.profile_setting_up .block .textarea-container textarea {
    width: 100%;
    height: 82%;
    padding: 6px 8px;
    border: none;
    outline: none;
}

.profile_setting_up .block .textarea-container:has(textarea:focus) {
    outline: 1px solid black;
}

.profile_setting_up .block select {
    cursor: pointer;
}

.profile_setting_up .left_part .img_container {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    color: var(--blue-color);
    background-color: #3C84E810;
    width: 70%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    cursor: pointer;
    opacity: .8;
    overflow: hidden;
    text-align: center;
}

.profile_setting_up .left_part .img_container .img_placeholder {
    display: flex;
    flex-flow: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.profile_setting_up .left_part .img_container .img_placeholder img {
    aspect-ratio: 1 / 1;
    object-fit: contain;
}

.profile_setting_up .left_part #profile_picture {
    display: none;
}

.profile_setting_up .input_line {
    display: flex;
    width: 100%;
    gap: 32px;
    margin: 6px 0;
}

.profile_setting_up .input_line .input {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    width: 100%;
}

.profile_setting_up .input_line .textarea-container {
    position: relative;
}

.profile_setting_up .input_line.legal_checkbox label {
    display: flex;
    align-items: center;
    gap: 12px;
}

.profile_setting_up .input_line.legal_checkbox input[type=checkbox] {
    width: fit-content;
    transform: scale(1.1);
    cursor: pointer;
    accent-color: var(--blue-color);
}


.profile_setting_up .input_line.legal_checkbox a {
    color: var(--blue-color);
    text-decoration: underline;
}

.profile_setting_up .input_line.legal_checkbox a:hover {
    text-decoration: none;
}

.user-purpose-options {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}

.user-purpose-options input[type="radio"] {
    display: none;
}

.purpose-option {
    padding: 0.7rem 1.5rem;
    border: 2px solid #ccc;
    border-radius: 8px;
    background-color: #f9f9f9;
    cursor: pointer;
    transition: all 0.3s ease;
    font-weight: 500;
    color: #333;
    user-select: none;
}

.user-purpose-options input[type="radio"]:checked+.purpose-option {
    background-color: var(--blue-color);
    color: #fff;
    border-color: var(--blue-color);
    box-shadow: 0 0 10px rgba(0, 123, 255, 0.2);
}

.purpose-option:hover {
    border-color: var(--blue-color);
}

.profile_setting_up .biography_char_counter {
    position: absolute;
    bottom: 5px;
    left: 10px;
    color: RGBa(200, 200, 200);
}

.profile_setting_up button[type=submit] {
    background-color: var(--blue-color);
    color: white;
    width: 100%;
    border: none;
    box-shadow: 0 0 8px var(--blue-color-transparent);
    border-radius: 4px;
    cursor: pointer;
    transition: .4s;
    padding: 16px;
    margin: 24px 0 0;
    font-size: 18px;
}

label.required::after {
    content: "*";
    color: red;
}

.profile_setting_up button[type=submit]:hover {
    opacity: .5;
}

/* Dashboard */

#dashboard {
    background-color: #3C84E810;
}

#dashboard .dashboard_container {
    display: grid;
    align-items: flex-start;
    gap: 32px;
    grid-template-columns: 400px 1fr;
    min-height: 80vh;
    padding: 64px 0;
    width: min(1500px, 90%);
    margin: auto;
}

#dashboard .sf-box {
    position: relative;
}

#dashboard .mobile_profile_menu_cross {
    background-color: transparent;
    cursor: pointer;
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    z-index: 3;
    cursor: pointer;
}

#dashboard .profile_viewer {
    position: absolute;
    top: 16px;
    right: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 3;
}

#dashboard .mobile_profile_viewer {
    display: none;
}

#dashboard .sf-box .top_box {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    width: 100%;
}

#dashboard .sf-box .top_box label {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.875rem;
    color: #888;
    cursor: pointer;
}

#dashboard .sf-box h2 {
    font-size: 1.125rem;
    font-weight: 600;
}

#dashboard #biography_box {
    display: flex;
    flex-flow: column;
    gap: 14px;
}

#dashboard #biography_box .textarea-container {
    width: 100%;
}

#dashboard #biography_box .textarea-container.visible {
    padding: 4px 6px;
    border: 1px solid RGBa(160, 160, 160);
    border-radius: 4px;
    overflow: auto;
    color: #000;

}

#dashboard #biography_box .textarea-container .biography_char_counter {
    display: none;
}

#dashboard #biography_box .textarea-container.visible .biography_char_counter {
    display: block;
}

#dashboard #biography_box .biography_char_counter {
    color: RGBa(160, 160, 160);
}

#dashboard #biography_box textarea {
    width: 100%;
    height: 125px;
    overflow-x: auto;
    border-radius: 6px;
    outline: none;
    border: none;
    background-color: transparent;
    color: #434343;
}

#dashboard .left_side {
    display: flex;
    flex-flow: column;
    gap: 24px;
}

#dashboard .left_side .sf-box {
    display: flex;
    align-items: center;
    flex-flow: column;
}

#dashboard .right_side {
    display: flex;
    flex-flow: column;
    gap: 24px;
}

#dashboard .right_side .store_container {
    display: flex;
    align-items: center;
    flex-flow: column;
}

#dashboard .right_side .store_container #edit_profile_dashboard {
    display: none;
}

#dashboard .left_side label[for=nickname] {
    display: flex;
    align-items: center;
    margin: 12px 0 0px;
    gap: 0;
}

#dashboard .left_side label[for=nickname] svg {
    cursor: pointer;
    transition: .4s;
}

#dashboard .left_side label[for=nickname] svg:hover {
    opacity: .5;
}

#dashboard .left_side .username {
    color: #434343;
}

#dashboard .left_side .nickname {
    border: none;
    text-align: center;
    font-size: 24px;
    width: 200px;
    outline: none;
}

#dashboard .left_side .nickname::placeholder {
    text-align: center;
    color: #888;
}

#dashboard .img_container {
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    cursor: pointer;
}

#dashboard .img_container .edit_picture-overlay {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: RGBa(0, 0, 0, .25);
    opacity: 0;
    transition: .4s;
}

#dashboard .img_container:hover .edit_picture-overlay {
    opacity: 1;
}

#dashboard .image_profile_picture {
    display: block;
    width: 200px;
    aspect-ratio: 1 / 1;
    margin: auto;
}

#dashboard .img_container .edit_picture-overlay svg {
    margin: auto;
}

#dashboard #profilePictureInput {
    display: none;
}

#dashboard .stores_container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    width: 100%;
    margin: 10px 0;
}

#dashboard .store_item {
    background-color: white;
    box-shadow: 0 0 8px RGBa(170, 170, 170, .45);
    border-radius: 16px;
    overflow: hidden;
}

#dashboard .store_item .image_container {
    position: relative;
}

#dashboard .store_item .image_container img {
    display: block;
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
}

#dashboard .store_item .product_review {
    display: flex;
    align-items: center;
    gap: 5px;
    position: absolute;
    top: 0;
    right: 0;
    background-color: #F3F7FEEE;
    padding: 3px 6px;
    border-bottom-left-radius: 6px;
}

#dashboard .store_item .product_review svg {
    margin-bottom: 2px;
}

#dashboard .store_item .product_review .review_number {
    color: RGB(30, 30, 30);
    font-size: 12px;
}

#dashboard .store_item .is_live_container {
    display: flex;
    position: absolute;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: green;
    background-color: #F3F7FEDE;
    padding: 3px 6px;
    padding-left: 12px;
    border-bottom-right-radius: 6px;
    top: 0;
    left: 0;
}

#dashboard .store_item .is_live_container .live_dot {
    position: relative;
    width: 6px;
    height: 6px;
    background-color: green;
    border-radius: 100%;
}

#dashboard .store_item .is_live_container .live_dot:after {
    content: "";
    height: 6px;
    width: 6px;
    border: 1px solid green;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: play-button 2s infinite linear;
    box-sizing: border-box;
}

#dashboard .store_item .store_item_bottom {
    padding: 8px;
}

#dashboard .store_item h3 {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: pretty;
    width: 100%;
    height: 50px;
    font-size: 14px;
    font-weight: 400;
    color: RGBa(20, 20, 20);
    padding: 4px;
}

#dashboard .store_item .product_informations {
    display: flex;
    position: relative;
    align-items: center;
    justify-content: space-between;
    margin: 8px 0 0;
    padding: 0 4px;
}

#dashboard .store_item .pricing {
    font-weight: 600;
    font-size: 16px;
}

#dashboard .store_item .product_informations .manage_store {
    background-color: transparent;
    border: none;
    cursor: pointer;
    transition: .4s;
}

#dashboard .store_item .product_informations .manage_store:hover {
    opacity: .5;
}

#dashboard .add_store_item {
    display: flex;
    flex-flow: column;
    background-color: white;
    box-shadow: 0 0 8px RGBa(170, 170, 170, .45);
    border-radius: 16px;
    overflow: hidden;
}

#dashboard .add_store_item .top_container {
    display: flex;
    /* height: 215px; */
    aspect-ratio: 16 / 10;
    background-color: #3C84E830;
}

#dashboard .add_store_item .top_container .add_icon {
    display: block;
    text-align: center;
    margin: auto;
    font-size: 60px;
    color: var(--blue-color);
    font-weight: 500;
}

#dashboard .add_store_text_container {
    padding: 10px;
    margin: auto;
}

#dashboard .add_store_text_container h3 {
    text-align: center;
    text-transform: uppercase;
    font-weight: 500;
    color: RGBa(20, 20, 20);
}

#dashboard .dropdown_panel {
    display: none;
    position: absolute;
    background-color: white;
    box-shadow: 0px 8px 16px rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    z-index: 1;
    right: 0;
    bottom: 100%;
}

#dashboard .dropdown_panel ul {
    display: flex;
    flex-flow: column;
    list-style: none;
    padding: 6px 0;
    margin: 0;
}

#dashboard .dropdown_panel ul li svg {
    margin-bottom: 2px;
}

#dashboard .dropdown_panel ul li a {
    text-decoration: none;
    color: black;
    display: flex;
    align-items: center;
    padding: 4px 16px 4px 10px;
    gap: 6px;
}

#dashboard .dropdown_panel ul li a:hover {
    opacity: .5;
}

#dashboard #analytics {
    width: 100%;
    height: 400px;
}

#dashboard .chart-container {
    position: relative;
    width: 100%;
    /* prend toute la largeur du parent */
    height: 100%;
    /* prend la hauteur fixée par le parent */
}

#dashboard #storeAnalyticsChart {
    width: 100% !important;
    /* 🔥 le canvas suit 100% de son conteneur */
    height: 100% !important;
    /* 🔥 idem pour la hauteur */
    display: block;
}

/* The Modal (background) */
#updatePictureModal {
    display: none;
    position: fixed;
    z-index: 15;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

/* Modal Content/Box */
#updatePictureModal .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: min(100%, 750px);
    box-shadow: 0 0 8px RGBa(170, 170, 170, .25);
    padding: 16px 32px 32px;
    border-radius: 16px;
    padding: 12px 24px;
}

#updatePictureModal .modal-content #updateProfilePicturePreviewContainer {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

#updatePictureModal .modal-content .previewProfilePictureContainer {
    display: flex;
    width: min(350px, 95%);
    margin: auto;
    overflow: hidden;
    border-radius: 16px;
    border: 4px solid var(--blue-color);
}

#updatePictureModal .modal-content .previewProfilePictureContainer img {
    object-fit: contain;
    margin: auto;
    width: 100%;
    height: 100%;
}

/* The Close Button */
#updatePictureModal .close {
    position: absolute;
    top: 0;
    right: 20px;
    color: #aaa;
    font-size: 50px;
    font-weight: 500;
}

#updatePictureModal .close:hover,
#updatePictureModal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#updatePictureModal .previewProfilePictureContainer {
    aspect-ratio: 1 / 1;
}

#updatePictureModal .profilePictureOptions {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 6px 24px;
}

#updatePictureModal .profilePictureOptions label {
    display: flex;
    align-items: center;
    cursor: pointer;
    transition: .2s;
    gap: 6px;
    user-select: none;
}

#updatePictureModal .profilePictureOptions input {
    display: none;
}

#updatePictureModal .updateProfilePictureOptions {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

#updatePictureModal .updateProfilePictureOptions button {
    min-width: min(200px, 100%);
}

#updatePictureModal .updateProfilePictureOptions button:nth-of-type(1) {
    background-color: white;
    border: none;
    color: var(--blue-color);
    width: fit-content;
    box-shadow: 0 0 8px var(--blue-color-transparent);
    border-radius: 4px;
    cursor: pointer;
    transition: .4s;
    padding: 12px 24px;
    margin: 24px 0 0;
    font-size: 16px;
    text-align: center;
}

#updatePictureModal .updateProfilePictureOptions button:nth-of-type(2) {
    background-color: var(--blue-color);
    color: white;
    width: fit-content;
    border: none;
    box-shadow: 0 0 8px var(--blue-color-transparent);
    border-radius: 4px;
    cursor: pointer;
    transition: .4s;
    padding: 12px 24px;
    margin: 24px 0 0;
    font-size: 16px;
}

/* Settings Page */

#settings {
    display: grid;
    align-items: flex-start;
    grid-template-columns: 450px 1fr;
    min-height: 80vh;
    padding: 64px 8%;
    gap: 32px;
    background-color: #3C84E810;
}

#settings #settings-navigation {
    display: flex;
    flex-flow: column;
    gap: 12px;
}

#settings #settings-navigation h2 {
    font-size: 1.375rem;
}

#settings #settings-navigation ul {
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: 4px;
}

#settings #settings-navigation ul li.active {
    background-color: var(--blue-color-transparent);
    border-radius: 6px;
}

#settings #settings-navigation ul li.active button {
    font-weight: 600;
}

#settings #settings-navigation ul li button {
    width: 100%;
    background-color: transparent;
    text-align: left;
    border: none;
    padding: 8px;
    border-radius: 6px;
    font-size: 1rem;
    cursor: pointer;
    transition: .4s;
}

#settings #settings-navigation ul li button:hover {
    opacity: .5;
    background-color: var(--blue-color-transparent);
}

/* Create New Store */

/*the container must be positioned relative:*/
.custom-select {
    position: relative;
    font-family: Arial;
}

.custom-select select {
    display: none;
    /*hide original SELECT element:*/
}

.select-selected {
    background-color: DodgerBlue;
}

/*style the arrow inside the select element:*/
.select-selected:after {
    position: absolute;
    content: "";
    top: 14px;
    right: 10px;
    width: 0;
    height: 0;
    border: 6px solid transparent;
    border-color: #fff transparent transparent transparent;
}

/*point the arrow upwards when the select box is open (active):*/
.select-selected.select-arrow-active:after {
    border-color: transparent transparent #fff transparent;
    top: 7px;
}

/*style the items (options), including the selected item:*/
.select-items div,
.select-selected {
    color: #ffffff;
    padding: 8px 16px;
    border: 1px solid transparent;
    border-color: transparent transparent rgba(0, 0, 0, 0.1) transparent;
    cursor: pointer;
    user-select: none;
}

/*style items (options):*/
.select-items {
    position: absolute;
    background-color: DodgerBlue;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 99;
}

/*hide the items when the select box is closed:*/
.select-hide {
    display: none;
}

.select-items div:hover,
.same-as-selected {
    background-color: rgba(0, 0, 0, 0.1);
}

/* Form Login Create New Store */

.create_new_store-form_progress {
    z-index: -1;
    padding: 24px 0;
    width: min(1500px, 90%);
    margin: auto;
}

.create_new_store-form_progress ol {
    list-style-type: none;
    counter-reset: item;
    padding-left: 0;
    display: flex;
    align-items: center;
    gap: 24px;
}

.create_new_store-form_progress ol li {
    counter-increment: item;
    position: relative;
}

.create_new_store-form_progress ol li a {
    text-decoration: none;
    color: inherit;
    /* Inherit color to ensure consistency */
    display: flex;
    align-items: center;
    padding-left: 30px;
    /* Space for the number */
    position: relative;
}

.create_new_store-form_progress ol li a::before {
    content: counter(item);
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.5em;
    height: 1.5em;
    /* border: 1px solid black; */
    border: 1px solid #e1e1e1;
    border-radius: 100%;
    /* background-color: #fff; */
    background-color: #e1e1e1;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.create_new_store-form_progress ol li.active a {
    color: var(--blue-color);
    font-weight: 600;
}

.create_new_store-form_progress ol li.active a::before {
    border: 2px solid var(--blue-color);
    /* color: var(--blue-color); */
    color: white;
    background-color: var(--blue-color);
    font-weight: 600;
}

.create_new_store {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 64px;
    padding: 24px 0 64px;
    width: min(1500px, 90%);
    margin: auto;
}

.create_new_store h1 {
    text-align: center;
}

.create_new_store .form_duration {
    display: flex;
    align-items: flex-start;
    gap: 4px;
    font-size: 14px;
    color: #777;
    text-align: center;
    justify-content: center;
    margin: 0 auto 16px;
}

.create_new_store .form_duration svg {
    margin-top: 3px;
    min-width: 14px;
    width: 14px;
    min-height: 14px;
    height: 14px;
}

.create_new_store .create_new_store_form fieldset {
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 16px 0px;
    margin: 0;
    border: none;
}

.create_new_store .create_new_store_form legend {
    font-size: 18px;
    font-weight: 500;
}

.create_new_store .create_new_store_form .input {
    display: grid;
    align-items: center;
    grid-template-columns: 1fr 1fr;
}

.create_new_store .create_new_store_form input,
.create_new_store .create_new_store_form select,
.create_new_store .create_new_store_form textarea {
    width: 100%;
    padding: 6px 8px;
    border: 1px solid RGBa(160, 160, 160);
    border-radius: 4px;
    font-size: 16px;
    margin: 2px 0;
}

.create_new_store .create_new_store_form select {
    cursor: pointer;
}

.create_new_store #new_store_preview_container .item {
    display: block;
    position: -webkit-sticky;
    position: sticky;
    top: 16px;
    width: fit-content;
    width: 280px;
    margin-top: 30px;
    flex: 0 0 auto;
    scroll-snap-align: start;
    margin: auto;
}

.create_new_store #new_store_preview_container .item .item-banner {
    aspect-ratio: 16 / 9;
    width: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.create_new_store #new_store_preview_container .item .product_informations {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 4px;
}

.create_new_store #new_store_preview_container .item .seller_informations {
    display: flex;
    align-items: center;
    gap: 12px;
}

.create_new_store #new_store_preview_container .item .seller_informations .seller_name {
    text-overflow: ellipsis;
    overflow: hidden;
    line-height: 112%;
}

.create_new_store #new_store_preview_container .item .seller_informations img {
    width: 50px;
    height: 50px;
    object-fit: cover;
    border-radius: 100%;
}

.create_new_store #new_store_preview_container .item .product_title {
    display: -webkit-box;
    line-clamp: 2;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: pretty;
    width: 280px;
    height: 50px;
    font-size: 14px;
    font-weight: 400;
    color: RGBa(20, 20, 20);
    padding: 4px;
}

.create_new_store #new_store_preview_container .item .product_review {
    display: flex;
    align-items: center;
    gap: 5px;
}

.create_new_store #new_store_preview_container .item .product_review .review_number {
    color: RGB(30, 30, 30);
    font-size: 12px;
}

.create_new_store #new_store_preview_container .item .pricing {
    margin: 16px 0 0;
    font-weight: 700;
    font-size: 18px;
    padding: 0 4px;
}

.create_new_store .buttons_container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.create_new_store .buttons_container .button {
    background-color: white;
    border: none;
    color: var(--blue-color);
    width: fit-content;
    box-shadow: 0 0 8px var(--blue-color-transparent);
    border-radius: 4px;
    cursor: pointer;
    transition: .4s;
    padding: 12px 24px;
    margin: 24px 0 0;
    font-size: 16px;
    text-align: center;
}

.create_new_store form button[type=submit] {
    background-color: var(--blue-color);
    color: white;
    width: fit-content;
    border: none;
    box-shadow: 0 0 8px var(--blue-color-transparent);
    border-radius: 4px;
    cursor: pointer;
    transition: .4s;
    padding: 12px 24px;
    margin: 24px 0 0;
    font-size: 16px;
}

.create_new_store form button[type=submit]:hover {
    opacity: .5;
}

.create_new_store .error {
    margin: 10px 0 18px;
}

.create_new_store .progress_viewer {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: min(250px, 100%);
    margin: auto;
}

.create_new_store .progress_viewer .progress_bar[value] {
    display: block;
    position: absolute;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 98%;
    height: 6px;
    background: lightgray;
    transform: translateX(1%) translateY(-75%);
    z-index: -1;
}

.create_new_store .progress_viewer .progress_bar[value]::-webkit-progress-bar {
    background: lightgray;
}

.create_new_store .progress_viewer .progress_bar[value]::-webkit-progress-value {
    background: var(--blue-color);
}

.create_new_store .progress_viewer .progress_bar[value]::-moz-progress-bar {
    background: var(--blue-color);
}

.create_new_store .progress_viewer .progress_step {
    background-color: white;
}

.create_new_store .progress_viewer .progress_step:hover {
    opacity: 1;
}

.create_new_store .form_description {
    margin: 0 0 6px 0;
    text-align: left;
    font-size: 0.875rem;
    width: min(1000px, 100%);
    /* margin: auto; */
}

/* Form part 2 */

.create_new_store .create_new_store_form .thumbnails_images-input {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 16px;
}

.create_new_store .create_new_store_form .thumbnails_images-input input[type=file] {
    display: none;
}

.create_new_store .create_new_store_form .thumbnails_images-input img {
    object-fit: cover;
    border-radius: 16px;
    width: 280px;
    height: 157.5px;
    aspect-ratio: 16 / 9;
    cursor: pointer;
    transition: .4s;
    opacity: .4;
}

.create_new_store .create_new_store_form .thumbnails_images-input img:hover {
    opacity: .5;
}

.create_new_store .create_new_store_form .thumbnails_images-input img.loaded {
    opacity: 1;
}

.create_new_store .create_new_store_form .thumbnails_images-input img.loaded:hover {
    opacity: .5;
}

.create_new_store .vertical-label {
    display: flex;
    flex-flow: column;
    gap: 4px;
}

.create_new_store .vertical-label label {
    line-height: 75%;
    display: block;
}

.create_new_store .vertical-label small {
    display: inline-block;
    margin-bottom: 8px;
}

.create_new_store .vertical-input {
    margin-bottom: 24px;
}

.create_new_store .vertical-input label {
    line-height: 75%;
    display: block;
}

.create_new_store .vertical-input small {
    display: inline-block;
    margin-bottom: 8px;
}

/* Form Part 3 */

.store_details table.pricing_table {
    table-layout: fixed;
    width: 100%;
    border: 1px solid black;
    border-collapse: collapse;
    height: 100%;
}

.store_details table td,
.store_details table th {
    border: 1px solid black;
}

.store_details table.pricing_table label {
    display: block;
    max-width: 90%;
    text-align: left;
    margin: 10px auto;
}

.store_details table.pricing_table label small {
    display: block;
    font-weight: 400;
    max-width: 90%;
}

.store_details table.pricing_table textarea {
    height: 100%;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    border: none;
    background: transparent;
    outline: none;
}

.store_details table.pricing_table select#delivery_time {
    display: block;
    height: 100%;
    width: calc(100% - 30px);
    border: none;
    margin: auto;
    padding-left: 30px;
    margin-right: 30px;
}

/* Style du conteneur du checkbox */
.custom-checkbox {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 16px;
    user-select: none;
    gap: 10px;
}

/* Masquer l'input natif */
.custom-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    cursor: pointer;
    height: 0;
    width: 0;
}

/* Style de la case à cocher personnalisée */
.custom-checkbox .checkmark {
    position: relative;
    height: 24px;
    width: 24px;
    background-color: #f8f8f8;
    border-radius: 5px;
    /* Pour des bords arrondis */
    display: inline-block;
    transition: all 0.3s ease;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

/* Ajouter une icône de coche après le clic */
.custom-checkbox .checkmark::after {
    content: "";
    position: absolute;
    display: none;
}

/* Style de l'icône de coche */
.custom-checkbox .checkmark::after {
    left: 8px;
    top: 4px;
    width: 5px;
    height: 10px;
    border: solid white;
    border-width: 0 3px 3px 0;
    transform: rotate(45deg);
}

/* Couleur de fond de la case au survol */
.custom-checkbox:hover .checkmark {
    background-color: #e1e1e1;
}

/* Changement de couleur lorsque la case est cochée */
.custom-checkbox input:checked~.checkmark {
    background-color: var(--blue-color);
}

/* Affichage de l'icône de coche lorsque la case est cochée */
.custom-checkbox input:checked~.checkmark::after {
    display: block;
}

/* Effet de focus avec contour
  .custom-checkbox input:focus ~ .checkmark {
    box-shadow: 0 0 5px 2px rgba(76, 175, 80, 0.7);
  }
   */
/* Transition animée pour le checkmark */
.custom-checkbox .checkmark {
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
}


.store_details table.pricing_table td.pricing_tile {
    display: grid;
    align-items: center;
    justify-content: flex-end;
    grid-template-columns: auto 120px;
    padding: 6px 8px;
    gap: 20px;
    height: 100%;
    border: none;
}

.store_details table.pricing_table td.pricing_tile select {
    height: 40px;
}

.store_details table.pricing_table td.pricing_tile input[type=number] {
    text-align: right;
    border: none;
    -moz-appearance: textfield;
    width: 120px;
    outline: none;
    border-bottom: 1px solid lightgray;
    border-radius: 0;
    height: 40px;
}

.store_details table.pricing_table td.pricing_tile input[type=number]:focus {
    border-bottom: 1px solid black;
}

.store_details table.pricing_table td.pricing_tile input[type=number]::-webkit-inner-spin-button,
.store_details table.pricing_table td.pricing_tile input[type=number]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.store_details .checkbox_list {
    display: flex;
    flex-flow: column;
    gap: 12px;
    margin-top: 20px;
}

.store_details .checkbox_list .checkbox_item {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
    align-items: center;
}

.store_details .checkbox_list .checkbox_item h4 small {
    display: block;
    font-weight: 400;
}

.store_details .checkbox_list .checkbox_item .checkbox_option {
    display: flex;
    align-items: center;
    justify-content: center;
}

.store_details .checkbox_list .checkbox_item .checkbox_option input {
    width: fit-content;
    cursor: pointer;
}

.store_details .checkbox_list .checkbox_item .checkbox_option label {
    cursor: pointer;
}

.store_details .store_resume {
    margin: 32px 0;
}

.store_details .store_resume .heading {
    display: flex;
    flex-flow: column;
    gap: 0;
    line-height: 140%;
}

.store_details .store_resume h3 {
    display: flex;
    align-items: center;
}

.store_details .statut_container {
    margin: 16px 0;
    width: 100%;
    border: 1px solid transparent;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed;
}

.store_details .statut_container thead td:first-of-type,
.store_details .statut_container thead th:first-of-type {
    width: 50%;
}

.store_details .statut_container td,
.store_details .statut_container th {
    padding: 8px 12px;
    border: 1px solid transparent;
    text-align: center;
}

.store_details .statut_container thead th {
    color: #555;
}

.store_details .statut_container tbody tr {
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    border-radius: 6px;
}

.store_details .statut_container .is_live_container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    color: green;
}

.store_details .statut_container .is_live_container .live_dot {
    position: relative;
    width: 6px;
    height: 6px;
    background-color: green;
    border-radius: 100%;
}

.store_details .statut_container .is_live_container .live_dot:after {
    content: "";
    height: 6px;
    width: 6px;
    border: 1px solid green;
    border-radius: 100%;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    animation: play-button 2s infinite linear;
    box-sizing: border-box;
}

@keyframes play-button {
    0% {
        opacity: 0;
    }

    50% {
        opacity: .3;
    }

    100% {
        transform: scale(4);
        opacity: 0;
    }
}


.store_details .in_revision {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #833;
}

.store_details .in_revision svg {
    transform: rotateZ(0);
    animation: magnifyingMovement 3s infinite linear;
}

@keyframes magnifyingMovement {
    0% {
        transform: translateX(0) translateY(0);
    }

    25% {
        transform: translateX(-3px) translateY(-3px);
    }

    45% {
        transform: translateX(-3px) translateY(3px);
    }

    50% {
        transform: translateX(3px) translateY(3px) rotateY(180deg);
    }

    80% {
        transform: translateX(3px) translateY(-3px) rotateY(180deg);
    }

    100% {
        transform: translateX(0) translateY(0);
    }
}

.store_details .in_creation {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: #777;
}

.store_details .in_creation svg {
    transform: rotateZ(0);
    animation: hammerHit 1s linear 0s infinite forwards;
}

@keyframes hammerHit {
    0% {
        transform: rotateZ(0);
    }

    50% {
        transform: rotateZ(90deg);
    }

    100% {
        transform: rotateZ(0);

    }
}

.store_details .statut_container .statistic_cell a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    color: dodgerblue;
}

.admin_section {
    width: min(1700px, 95%);
    margin: 64px auto;
}

.admin_section h2 {
    font-size: 1.125rem;
    margin-bottom: 24px;
}

.admin_section .waiting_approbation {
    border-collapse: collapse;
    border: 1px solid black;
    width: 100%;
    table-layout: fixed;
    text-align: center;
}

.admin_section .waiting_approbation thead tr {
    background-color: var(--blue-color);
    color: white;
}

.admin_section .waiting_approbation td,
.admin_section .waiting_approbation th {
    border: 1px solid black;
    padding: 8px;
}

/* #USER PROFILE */

#user_profile {
    background-color: #3C84E810;
    padding: 64px 0;
    min-height: 80vh;
}

#user_profile .user_profile_content {
    width: min(1500px, 95%);
    margin: 0 auto;
    padding: 32px;
}


#user_profile .user_profile-container {
    display: flex;
    flex-flow: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 40px;

}

#user_profile .user_profile_content .top_profile-container {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    width: 100%;
}

#user_profile .user_profile_content .top_profile .user_profile_picture {
    border-radius: 10%;
    width: 200px;
    height: 200px;
}

#user_profile .user_profile_content .top_profile {
    display: flex;
    flex-flow: column;
    gap: 32px;
}

#user_profile .user_profile_content .top_profile-heading {
    display: flex;
    align-items: center;
    gap: 16px;
}

#user_profile .user_profile_content .top_profile-heading .seller_nickname {
    font-size: 2rem;
    font-weight: 500;
    line-height: 100%;
    word-break: break-word;
    /* casse le mot long si besoin */
    overflow-wrap: anywhere;
    /* force le retour à la ligne propre */
}

#user_profile .user_profile_content .top_profile-heading .seller_username {
    font-size: 1.125rem;
    color: #434343;
    line-height: 100%;
    word-break: break-word;
    /* casse le mot long si besoin */
    overflow-wrap: anywhere;
    /* force le retour à la ligne propre */
}

#user_profile .user_profile_content .top_profile-heading .seller_names-container {
    display: flex;
    flex-flow: column;
    gap: 4px;
}



#user_profile .user_profile_content .top_profile-heading .product_review {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-top: 16px;
}

#user_profile .user_profile_content .top_profile-heading .review-stars-inline {
    display: flex;
    align-items: center;
    margin-right: 6px;
}

#user_profile .user_profile_content .top_profile-heading .product_review svg {
    margin-bottom: 1px;
}

#user_profile .user_profile_content .top_profile-heading .product_review .review_number {
    color: RGB(30, 30, 30);
    font-size: 12px;
    margin-top: 1px;
    margin-left: 2px;
}


#user_profile .user_profile_content .seller_description {
    font-size: 1.125rem;
    text-align: justify;
    width: max(80%, 320px);
    line-height: 160%;
    word-spacing: 5px;
}

#user_profile .buttons_container {
    display: flex;
    justify-content: flex-end;
    margin-top: 16px;
}

#user_profile .buttons_container button.report {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    font-size: 14px;
    font-weight: 500;
    background-color: #fbeaea;
    color: #c0392b;
    border: 1px solid #f5c6c6;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.25s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
}

#user_profile .buttons_container button.report svg {
    fill: currentColor;
    transition: transform 0.2s ease;
}

#user_profile .buttons_container button.report:hover {
    background-color: #f5d6d6;
    color: #a93126;
    border-color: #efbcbc;
}

#user_profile .buttons_container button.report:hover svg {
    transform: scale(1.1);
}

#user_profile .buttons_container button.report:active {
    transform: scale(0.98);
    background-color: #eac1c1;
}

#user_profile .contact-box .user_profile_picture {
    border-radius: 100%;
    width: 50px;
    height: 50px;
}

#user_profile .contact-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    border: 1px solid lightgray;
    box-shadow: -2px 2px 6px RGBa(0, 0, 0, .25);
    padding: 16px;
    min-width: 500px;
    width: 500px;
}

#user_profile .contact-box .seller_identity {
    display: flex;
    align-items: center;
    gap: 8px;
}

#user_profile .contact-box a.triggerChatBox {
    display: flex;
    align-items: center;
    gap: 4px;
    color: white;
    background-color: var(--blue-color);
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 187.5px;
    min-width: 187.5px;
    white-space: nowrap;
    font-size: 0.875rem;
}

button svg.sendAnimation {
    transition: .5s;
}

button:hover svg.sendAnimation {
    opacity: 0;
    transform: translateX(25px) translateY(-10px) rotateX(90deg);
}

#user_profile .contact-box .seller_identity .seller_name {
    max-width: 200px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
}

/* Chat box (Every pages) */

#chat_box {
    position: fixed;
    display: flex;
    flex-flow: column;
    background-color: white;
    width: min(350px, 95%);
    height: 500px;
    bottom: 0;
    right: 15%;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .5);
    z-index: 20;
    transform: translateY(110%);
    opacity: 0.25;
    transition: .4s;
}

#chat_box.opened {
    transform: translateY(0%);
    opacity: 1;
}

#chat_box .top-chat_box {
    background-color: rgb(122, 188, 242);
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    transition: .4s;
}

#chat_box .top-chat_box.active {
    background-color: var(--blue-color);
}

#chat_box .top-chat_box .user_profile_picture {
    border-radius: 100%;
    width: 50px;
    height: 50px;
}

#chat_box .top-chat_box .left_top-chat_box {
    display: flex;
    align-items: center;
    gap: 12px;
    color: white;
    white-space: nowrap;
    font-size: 1.125rem;
    font-weight: 500;
}

#chat_box .top-chat_box .close-chat_box {
    background-color: transparent;
    color: white;
    font-weight: 800;
    border: none;
    cursor: pointer;
}

#chat_box .bottom-chat_box {
    height: 100%;
    max-height: 350px;
}

#chat_box .bottom-chat_box .chat-container {
    padding: 12px 16px;
    display: flex;
    flex-flow: column;
    gap: 16px;
    font-size: 0.875rem;
    height: 100%;
    overflow-y: auto;
}

.new-message-separator {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.new-message-separator::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    height: 1px;
    background-color: #dc2626;
    z-index: 0;
}

.new-message-separator span {
    position: relative;
    background-color: #fff;
    color: #dc2626;
    font-weight: bold;
    font-size: 0.65rem;
    padding: 6px 12px;
    border: 1px solid #dc2626;
    border-radius: 20px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1);
    z-index: 1;
    /* Assure que le span est au-dessus de la ligne */
}

.your-message {
    position: relative;
}

.your-message .attachments {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 50%;
    background-color: #e2e2e2;
    margin-left: auto;
    border-bottom-left-radius: 16px;
    padding: 6px 0;
}

.your-message .attachments .attachment-wrapper {
    display: block;
    height: 100%;
    width: 100px;
    max-height: 100%;
}

.your-message .attachments .attachment-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.your-message>p {
    width: fit-content;
    max-width: 80%;
    margin-left: auto;
    background-color: RGBa(230, 230, 230, .85);
    padding: 6px 12px;
    border-radius: 20px;
    border-bottom-right-radius: 0;
}

.attachments .attachment-wrapper a[download] {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    width: 26px;
    height: 26px;
    top: 5px;
    right: 5px;
    background: rgba(0, 0, 0, 0.5);
    border-radius: 3px;
    padding: 2px;
    color: #fff;
    font-size: 12px;
    text-decoration: none;
}

.recipient-message {
    position: relative;
}


.recipient-message .attachments {
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    width: 50%;
    background-color: #3C84E840;
    margin-right: auto;
    border-bottom-right-radius: 16px;
    padding: 6px 0;
}

.recipient-message .attachments .attachment-wrapper {
    display: block;
    height: 100%;
    width: 100px;
    max-height: 100%;
}

.recipient-message .attachments .attachment-wrapper img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
}

.recipient-message>p {
    width: fit-content;
    max-width: 80%;
    background-color: #3C84E830;
    padding: 6px 12px;
    border-radius: 20px;
    border-bottom-left-radius: 0;
}


/* The Modal (background) */
#custom_quote_modal {
    display: none;
    position: fixed;
    z-index: 15;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

#custom_quote_modal .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    width: min(60%, 1200px);
    max-height: 90vh;
    overflow: auto;
}

#custom_quote_modal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#custom_quote_modal .close:hover,
#custom_quote_modal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#custom_offer_form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.store-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid #ddd;
    border-radius: 12px;
    cursor: pointer;
    transition: border-color 0.3s ease, background-color 0.3s ease;
}

.store-option:hover {
    background-color: #f9f9f9;
    border-color: #aaa;
}

.store-option input[type="radio"] {
    margin-right: 10px;
}

.store-option .store-info {
    display: flex;
    align-items: center;
    gap: 10px;
}

.store-option img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 8px;
}

.form-group {
    display: flex;
    flex-direction: column;
}

.form-group label {
    font-weight: 600;
    margin-bottom: 6px;
}

.form-group input,
.form-group textarea,
.form-group select {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid #ccc;
    font-size: 16px;
    transition: border-color 0.2s ease;
}

.form-group input:focus,
.form-group textarea:focus {
    outline: none;
    border-color: #777;
}

.submit-button {
    padding: 12px 20px;
    background-color: #1a73e8;
    color: white;
    font-size: 16px;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.submit-button:hover {
    background-color: #1665c1;
}

.custom-select {
    position: relative;
    font-family: Arial, sans-serif;
    width: 100%;
    user-select: none;
}


/*  */
.your-message .offer-message {
    margin-left: auto;
}

.recipient-message .offer-message {
    margin-right: auto;
}

.offer-message {
    font-family: 'Segoe UI', sans-serif;
    background-color: #fff;
    border-radius: 12px;
    padding: 16px;
    margin: 12px 0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
    border: 1px solid #e5e7eb;
    max-width: 500px;
}

.offer-card {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.offer-header {
    display: flex;
    align-items: center;
    gap: 16px;
    justify-content: space-between;
}

.offer-thumbnail {
    width: 64px;
    height: 64px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid #e5e7eb;
}

.offer-meta {
    flex-grow: 1;
}

.offer-store {
    font-size: 16px;
    font-weight: 600;
    color: #111827;
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    /* Limite à 1 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

.offer-delivery {
    font-size: 14px;
    color: #6b7280;
    margin: 4px 0 0;
}

.offer-price {
    font-size: 20px;
    font-weight: bold;
    color: #10b981;
    white-space: nowrap;
}

.offer-body {
    padding-top: 8px;
    border-top: 1px solid #e5e7eb;
}

.offer-title {
    font-size: 14px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}

.offer-description {
    font-size: 14px;
    color: #4b5563;
    line-height: 1.5;
    white-space: pre-wrap;
}

.offer-footer {
    padding-top: 12px;
    border-top: 1px solid #e5e7eb;
    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.offer-footer p {
    font-size: 14px;
    color: #6b7280;
    margin: 0;
}

.offer-footer .buttons-container {
    display: flex;
    gap: 8px;
}

.offer-footer .buttons-container button {
    padding: 6px 24px;
    border-radius: 6px;
    font-size: 18px;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.offer-footer .buttons-container button.disabled {
    background-color: #e5e7eb;
    color: #9ca3af;
    cursor: not-allowed;
    opacity: 1;
    background-color: #f3f4f6;
    color: #6b7280;
    opacity: 0.7;
    cursor: default;
    pointer-events: none;
}


/* Styles spécifiques par action */
.offer-footer .accept-offer-btn {
    background-color: #10b981;
    color: #fff;
}

.offer-footer .accept-offer-btn:hover {
    background-color: #059669;
}

.offer-footer .decline-offer-btn {
    background-color: #ef4444;
    color: #fff;
}

.offer-footer .decline-offer-btn:hover {
    background-color: #dc2626;
}

.offer-footer .withdraw-offer-btn {
    background-color: #fbbf24;
    color: #1f2937;
}

.offer-footer .withdraw-offer-btn:hover {
    background-color: #f59e0b;
}

/*  */

.select-stores-selected {
    background-color: #fefefe;
    border: 1px solid #ccc;
    border-radius: 10px;
    padding: 12px 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    gap: 12px;
    font-weight: 600;
}

.select-stores-selected::after {
    content: "";
    position: absolute;
    top: 18px;
    right: 16px;
    border: 6px solid transparent;
    border-color: #666 transparent transparent transparent;
}

.select-stores {
    position: absolute;
    background-color: #fff;
    border: 1px solid #ccc;
    border-top: none;
    border-radius: 0 0 10px 10px;
    width: 100%;
    max-height: 240px;
    overflow-y: auto;
    z-index: 10;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.select-hide {
    display: none;
}

.select-store {
    padding: 10px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.select-store:hover {
    background-color: #f0f0f0;
}

.select-store img {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    object-fit: cover;
}


.chat_box-area {
    position: relative;
    padding: 16px 12px;
}

#chat_form.chat_box-area.hidden {
    display: none;
}

.chat_box-area input#message_input_container {
    width: 100%;
    padding: 12px 8px;
    outline: none;
    border: 1px solid gray;
    border-radius: 8px;
}

.chat_box-area button.sendMessageSubmit {
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background-color: var(--blue-color);
    border-radius: 100%;
    width: 28px;
    height: 28px;
    outline: none;
    border: none;
    cursor: pointer;
}

.chat_box-area .chat_box-form_container {
    position: relative;
    width: 100%;
}

#chat_form {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
}

#chat_form .attachment_section {
    position: relative;
}

#chat_form #attachment_section button {
    display: flex;
    padding: 0;
    height: 100%;
    cursor: pointer;
    background-color: transparent;
    border: none;
    outline: none;
}

#chat_form #custom_quote_section #toggle_quote_form {
    white-space: nowrap;
    background-color: transparent;
    cursor: pointer;
    border: none;
    color: var(--blue-color);
    font-size: 1.125rem;
    font-weight: 500;
}

#chat_form #file_preview_container {
    position: absolute;
    top: 0;
    transform: translateY(-100%);
    margin-top: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    overflow-y: auto;
    max-height: 500px;
}

#chat_form .preview-file {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 4px;
    background: #f5f5f5;
    padding: 6px 10px;
    border-radius: 6px;
    font-size: 14px;
}

#chat_form .preview-file span {
    word-break: break-all;
    max-width: 80%;
}

#chat_form .preview-file button {
    background: none;
    border: none;
    color: red;
    cursor: pointer;
}

#user_profile .user_profile_content .user_stores-container {
    display: flex;
    flex-flow: column;
    gap: 12px;
    margin: 84px 0;
}

#user_profile .user_profile_content .user_stores-container .items_list {
    width: 100%;
    margin: 6px 0;
}

#user_profile .user_profile_content .user_stores-container .items_list .item {
    margin: 0;
}

/* Chat Inbox Page */

#inbox_container {
    background-color: #3C84E810;
    min-height: 80vh;
}

#inbox_container .section_container {
    display: grid;
    align-items: flex-start;
    gap: 32px;
    grid-template-columns: 450px 1fr;
    width: min(1500px, 90%);
    margin: auto;
    padding: 64px 0;
}

#inbox_container .conversations_liste {
    list-style: none;
    display: flex;
    flex-flow: column;
}

#inbox_container .conversations_liste li.not_read {
    font-weight: 700;
    background-color: #fef2f2;
    /* léger rouge pâle pour messages non lus */
}


#inbox_container .conversations_liste li {
    border-bottom: 1px solid #e5e7eb;
    /* gris clair */
    transition: background-color 0.2s ease;
}

#inbox_container .conversations_liste li:hover {
    background-color: #f9fafb;
}

#inbox_container .conversations_liste li a {
    display: grid;
    grid-template-columns: 50px 1fr auto;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    text-decoration: none;
    color: inherit;
}

#inbox_container .conversations_liste img {
    width: 50px;
    height: 50px;
    border-radius: 100%;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}

#inbox_container .conversations_liste .conversation_details_container {
    max-width: 200px;
}

.conversation_recipient {
    font-weight: 600;
    font-size: 1rem;
    color: #111827;
    margin: 0;

    white-space: nowrap;
    /* Empêche le retour à la ligne */
    overflow: hidden;
    /* Cache le texte qui dépasse */
    text-overflow: ellipsis;
    /* Ajoute "…" à la fin */
    max-width: 100%;
    /* Nécessaire pour que ça se limite à la largeur du parent */
    display: block;
    /* ou inline-block, selon ton layout */
}

.conversation_last_message {
    font-size: 0.85rem;
    color: #6b7280;
    /* gris neutre */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 4px 0 0;
}

.conversation_last_message_date {
    align-self: flex-start;
    justify-self: flex-end;
    margin-top: 6px;
    font-size: 0.75rem;
    color: #9ca3af;
    /* gris plus clair */
    white-space: nowrap;
}

#inbox_container .chat-box_container {
    padding: 16px 12px;
}

#inbox_container .chat-box_container.hidden {
    display: none;
}

#inbox_container .chat_container {
    display: flex;
    flex-flow: column;
    gap: 16px;
    height: 500px;
    max-height: 500px;
    overflow-y: auto;
    padding: 16px;
}

#inbox_container .chat_container .important_msg {
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 16px;
    margin: auto;
    height: fit-content;
}

#inbox_container .chat_container .important_msg p{
    text-align: center;
}

#inbox_container .chat_container .attachments {
    max-height: 100px;
    height: 100px;
}

#inbox_container .chat-box_message {
    display: flex;
    height: 610px;
}

#inbox_container .chat-box_message.hidden {
    display: none;
}

#inbox_container .chat-box_message .text_container {
    display: flex;
    align-items: center;
    flex-flow: column;
    gap: 16px;
    margin: auto;
    height: fit-content;
}

#inbox_container .chat-box_message .text_container h2 {
    text-align: center;
}

#inbox_container .chat-box_message .text_container svg {
    width: 250px;
    height: 250px;
}

#inbox_container .chat-box_message .text_container p {
    max-width: 500px;
    text-align: center;
}


/* Report */
/* The Modal */
#reportModal {
    display: none;
    position: fixed;
    z-index: 15;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

#reportModal .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: min(100%, 750px);
    box-shadow: 0 0 8px RGBa(170, 170, 170, .25);
    padding: 16px 32px 32px;
    border-radius: 16px;
    padding: 12px 24px;
}

#reportModal .close {
    position: absolute;
    top: 0;
    right: 20px;
    color: #aaa;
    font-size: 50px;
    font-weight: 500;
}

#reportModal .close:hover,
#reportModal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

/* Style général du formulaire */
#reportForm {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 16px;
    color: #333;
}

/* En-tête du modal */
#reportForm .modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ddd;
}

#reportForm .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: #222;
}

/* Corps du formulaire */
#reportForm .modal-body {
    padding-top: 1rem;
}

/* Label */
#reportForm label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 500;
    color: #444;
}

#reportForm label[for=report_block] {
    margin-bottom: 0;
}

/* Sélecteur de raison */
#report_reason {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid #ccc;
    border-radius: 8px;
    background-color: #fff;
    font-size: 1rem;
    transition: border 0.2s ease-in-out;
}

#report_reason:focus {
    border-color: var(--blue-color);
    outline: none;
}

#reportForm .form-check {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 1rem;
}

#reportForm .form-check-input {
    width: 1.2rem;
    height: 1.2rem;
    accent-color: #ef4444;
    /* rouge élégant */
}

#reportForm .modal-footer {
    display: flex;
    justify-content: flex-end;
    border-top: 1px solid #eee;
    padding-top: 1rem;
}

/* Bouton de soumission */
#reportForm .btn-danger {
    background-color: #ef4444;
    border: none;
    color: #fff;
    padding: 0.5rem 1.25rem;
    font-size: 1rem;
    border-radius: 8px;
    cursor: pointer;
    transition: .4s;
}

#reportForm .btn-danger:hover {
    opacity: .5;
}

.chat-box_container .top-chat_container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    border-bottom: 1px solid #ddd;
}

.chat-box_container .top-chat_container .name_container h3 {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: #333;
    text-underline-offset: 3px;
    text-decoration: underline 2px solid #333;
}

.chat-box_container .top-chat_container .buttons_container {
    position: relative;
}

.chat-box_container .top-chat_container .dropdown {
    position: relative;
    display: inline-block;
}

.chat-box_container .top-chat_container .dropdown-toggle {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
}

.chat-box_container .top-chat_container .dropdown-toggle:hover {
    background-color: rgba(0, 0, 0, 0.05);
}

.chat-box_container .top-chat_container .dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background-color: white;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    margin-top: 4px;
    padding: 0;
    border-radius: 6px;
    overflow: hidden;
    z-index: 999;
    min-width: 160px;
}

.chat-box_container .top-chat_container .dropdown-menu li {
    list-style: none;
}

.chat-box_container .top-chat_container .dropdown-menu a,
.chat-box_container .top-chat_container .dropdown-menu button {
    display: block;
    padding: 10px 14px;
    text-decoration: none;
    color: #333;
    font-size: 0.95rem;
    border: none;
    background-color: transparent;
    text-align: left;
    cursor: pointer;
    width: 100%;
    transition: .4s;
}

.chat-box_container .top-chat_container .dropdown-menu a:hover,
.chat-box_container .top-chat_container .dropdown-menu button:hover {
    background-color: #f1f1f1;
    opacity: .5;
}

/* STORE PAGE */

#store_page {
    background-color: #3C84E810;
    padding: 64px 0;
}

#store_page .section_container {
    padding: 32px;
    width: min(1500px, 90%);
    margin: auto;
}

#store_page .store_page_content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
}

#store_page .store_page_content .store_details_container {
    display: flex;
    flex-flow: column;
    gap: 32px;
    min-width: 0;
}

#store_page .store_page_content .store_details_container .only_you_can_see {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    border: 1px solid #888;
    border-radius: 4px;
    background-color: #ECECEC;
    padding: 8px 16px;
    width: 100%;
    color: #888;
}

#store_page .store_page_content .store_details_container .store_heading {
    display: flex;
    flex-flow: column;
    gap: 12px;
}

#store_page .store_page_content .store_details_container .store_heading .user_profile_picture {
    width: 50px;
    border-radius: 100%;
}

#store_page .store_page_content .store_details_container .store_description-container {
    margin-top: 16px;
    display: flex;
    flex-flow: column;
    gap: 0;
    line-height: 100%;
    white-space: pre-wrap;
}

#store_page .store_page_content .store_details_container .store_description {
    text-align: justify;
    line-height: 160%;
    word-spacing: 5px;
    margin: 16px 0 0;
}

#store_page .store_page_content .store_details_container .seller_details {
    display: flex;
    align-items: center;
    gap: 8px;
}

#store_page .store_page_content .store_details_container .seller_details .seller_name {
    font-weight: 500;
}

#store_page .store_page_content .store_details_container .seller_infos-container {
    display: flex;
    flex-flow: column;
    gap: 0;
}

#store_page .store_page_content .store_details_container .seller_infos-container .product_review {
    display: flex;
    align-items: center;
    gap: 4px;
}

#store_page .store_page_content .store_details_container .seller_details .review-stars-inline {
    display: flex;
    align-items: center;
    margin-right: 6px;
}

#store_page .store_page_content .store_details_container .seller_infos-container .product_review svg {
    margin-bottom: 2px;
}

#store_page .store_page_content .store_details_container .seller_infos-container .product_review .review_number {
    color: RGB(30, 30, 30);
    font-size: 12px;
}

#store_page .store_page_content .store_thumbnail {
    width: min(600px, 100%);
    border-radius: 24px;
}

#store_page .store_page_content .store_package_container {
    display: flex;
    flex-flow: column;
    gap: 14px;
    justify-self: flex-end;
    height: fit-content;
    width: fit-content;
    min-width: 400px;
    border: 1px solid lightgray;
    box-shadow: -2px 2px 6px RGBa(0, 0, 0, .25);
    padding: 16px;
    min-width: 500px;
    width: 500px;
}

#store_page .store_page_content .store_package_container hr {
    height: 1px;
    border: none;
    background-color: #888;
}

#store_page .store_page_content .store_package_container h2 {
    font-size: 1.35rem;
}

#store_page .store_page_content .store_package_container ul {
    padding: 4px 0;
    list-style-position: inside;
}

#store_page .store_page_content .store_package_container ul li {
    display: flex;
    align-items: center;
    gap: 4px;
}

#store_page .store_page_content .store_package_container ul li::before {
    content: "•";
    /* Utilise un point comme puce */
    color: #888;
    font-size: 1.2em;
    margin-right: 4px;
}

#store_page .store_page_content .store_package_container .buttons_container {
    display: flex;

    gap: 4px;
}

#store_page .store_page_content .store_package_container .buttons_container button,
#store_page .store_page_content .store_package_container .buttons_container a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    border: none;
    padding: 18px 6px;
    text-align: center;
    border-radius: 4px;
    font-size: 0.875rem;
    cursor: pointer;
}

#store_page .store_page_content .store_package_container .buttons_container a {
    background-color: white;
    color: #888;
    border: 1px solid #888;
}

#store_page .store_page_content .store_package_container .buttons_container a.contact-button {
    background-color: #888;
    color: white;

}

#store_page .store_page_content .store_package_container .buttons_container button.disabled,
#store_page .store_page_content .store_package_container .buttons_container a.disabled {
    cursor: not-allowed;
    opacity: .5;
}

#store_page .store_page_content .store_package_container .buttons_container a.disabled {
    pointer-events: none;
}

#store_page .store_more_infos {
    margin-top: 64px;
}

.review-carousel {
    width: min(800px, 90%);
    position: relative;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.08);
    background: #fff;
    padding: 1.5rem;
    margin-top: 1rem;
}

.review-carousel .review-header_left {
    display: flex;
    align-items: center;
    gap: 16px;
}

.review-carousel .author_profile_picture {
    width: 50px;
    height: 50px;
    border-radius: 100%;
}

.review-carousel .review-header_left-infos {
    display: flex;
    flex-flow: column;
    gap: 2px;
}

.review-carousel .review-author {
    font-size: 1.125rem;
    font-weight: 500;
}

.review-track {
    display: flex;
    gap: 40px;
    transition: transform 0.4s ease;
}

.review-slide {
    min-width: 100%;
    box-sizing: border-box;
    padding: 1rem;
}

.review-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    margin-bottom: 1rem;
}

.review-stars svg {
    margin-right: 2px;
}

.review-date {
    font-size: 0.9rem;
    color: #888;
}

.review-content {
    font-size: 1rem;
    line-height: 1.4;
    margin-bottom: 1rem;
    color: #333;
}

.review-footer {
    text-align: right;
    font-size: 0.95rem;
    color: #555;
    font-weight: bold;
}

.review-prev,
.review-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255, 255, 255, 0.8);
    border: none;
    font-size: 1.5rem;
    padding: 0.5rem 1rem;
    cursor: pointer;
    transition: background 0.2s;
    z-index: 2;
}

.review-prev:hover,
.review-next:hover {
    background: #f0f0f0;
}

.review-prev {
    left: 0;
}

.review-next {
    right: 0;
}

.no-review {
    font-style: italic;
    color: #777;
    margin-top: 1rem;
}

/* Place Order Page */

#place-order {
    background-color: #3C84E810;
}

#place-order .section_container {
    display: grid;
    align-items: flex-start;
    gap: 32px;
    grid-template-columns: 1fr 450px;
    width: min(1500px, 90%);
    margin: auto;
    padding: 64px 0;
}

#place-order .section_container h2 {
    font-size: 1.15rem;
    font-weight: 500;
    color: #888;
}

#place-order .section_container h3 {
    font-size: 1.5rem;
}

#place-order .section_container .order-placeholder {
    display: flex;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    margin: 20px 0;
}

#place-order .section_container .order-placeholder img {
    height: 157.5px;
    aspect-ratio: 16 / 9;
}

#place-order .section_container .order-categories {
    font-size: 0.875rem;
    color: #333;
}

#place-order .section_container .order-placeholder h4 {
    font-size: 1.15rem;
    font-weight: 600;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    /* Limite à 1 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
}

#place-order .billing-box {
    margin-bottom: 32px;
}

#place-order .biling-input_placeholder {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 12px 0;
    padding: 0.75rem 1rem;
    background-color: #f9f9f9;
    border: 1px solid #d1d5db;
    /* gris doux */
    border-radius: 8px;
    width: min(450px, 100%);
    transition: border-color 0.2s, background-color 0.2s;
}

#place-order .biling-input_placeholder:hover {
    border-color: #a0aec0;
    background-color: #f1f5f9;
}

#place-order .biling-input_placeholder:focus-within {
    border-color: #3b82f6;
    background-color: #e0f2fe;
}

#place-order .biling-input_placeholder input,
#place-order .biling-input_placeholder select {
    flex: 1;
    border: none;
    outline: none;
    font-size: 0.95rem;
    background: transparent;
    padding: 0.4rem 0;
    color: #111827;
    font-family: system-ui, sans-serif;
}

#place-order .biling-input_placeholder select {
    cursor: pointer;
    appearance: none;
    background-image: url('data:image/svg+xml;utf8,<svg fill="gray" height="16" viewBox="0 0 24 24" width="16" xmlns="http://www.w3.org/2000/svg"><path d="M7 10l5 5 5-5z"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 1rem;
    padding-right: 1.5rem;
}

#place-order .biling-input_placeholder svg {
    flex-shrink: 0;
    fill: #6b7280;
}


#place-order .section_container .order-details {
    display: flex;
    flex-flow: column;
    gap: 10px;
    padding: 12px 26px;
    width: 100%;
}

#place-order .section_container .top_order-details {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

#place-order .section_container .top_order-details .price {
    font-size: 1.5rem;
    white-space: nowrap;
}

#place-order .section_container .delivery-date {
    color: #366C31;
}

#place-order .section_container .delivery-date time {
    font-weight: 600;
}

#place-order .section_container .checkout_button.main {
    width: min(250px, 95%);
    margin: 24px 0 24px auto;
}

#place-order .section_container .order-description p {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    /* Limite à 3 lignes */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
}

#place-order .section_container .steps {
    list-style: none;
    display: flex;
    flex-flow: column;
    gap: 20px;
    margin: 160px 0 32px;
}

#place-order .section_container .steps li {
    display: flex;
    flex-flow: column;
    gap: 8px;
}

#place-order .section_container .steps li h3 {
    font-size: 20px;
    font-weight: 500;
    color: var(--blue-color);
}

#place-order .section_container .table_resume {
    width: 100%;
    table-layout: fixed;
}

#place-order .section_container .table_resume td {
    padding-bottom: 6px;
    font-size: 1rem;
}

#place-order .section_container .table_resume td .clamp {
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-align: justify;
    max-width: 100%;
    text-align: right;
}

#place-order .section_container .table_resume tr td:nth-of-type(1) {
    text-align: left;
}

#place-order .section_container .table_resume tr td:nth-of-type(2) {
    text-align: right;
}

#place-order .section_container .table_resume.pricing tr.total td {
    font-size: 1.25rem;
    font-weight: 600;
    padding: 12px 0;
}

#place-order .section_container .checkout_separator {
    margin: 24px 0;
    border-top: 1px dashed var(--blue-color);
}

#place-order .section_container .payment_text {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 0.675rem;
}

#place-order .section_container .checkout_box {
    position: sticky;
    top: 16px;
}

#place-order .section_container .secure_payment {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    bottom: -50px;
    left: 50%;
    transform: translateX(-50%);
}

#place-order .section_container .checkout_button {
    background-color: var(--blue-color);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 0;
    border: none;
    font-size: 1.25rem;
    width: 100%;
    margin-bottom: 12px;
    cursor: pointer;
    border-radius: 4px;
    transition: .4s;
}

#place-order .legal_checkbox {
    margin: 24px 0;
    font-size: 0.95rem;
    line-height: 1.4;
}

#place-order .legal_checkbox input[type="checkbox"] {
    margin-right: 8px;
}

#place-order .legal_checkbox a {
    color: #3C84E8;
    text-decoration: underline;
}

#place-order .section_container .checkout_button:hover {
    opacity: .5;
}


/* The Modal (background) */
#paymentMethod {
    display: none;
    position: fixed;
    z-index: 15;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

#paymentMethod .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    width: min(90%, 600px);
    max-height: 90vh;
    overflow: auto;
}

#paymentMethod .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

#paymentMethod .close:hover,
#paymentMethod .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#paymentMethod .payment-options {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 30px;
}

#paymentMethod .payment-option {
    display: flex;
    align-items: center;
    gap: 15px;
    background-color: #ffffff;
    border: 2px solid #e0e0e0;
    border-radius: 12px;
    padding: 16px 20px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

#paymentMethod .payment-option img {
    width: 30px;
    height: 30px;
    object-fit: contain;
}

#paymentMethod .payment-option:hover {
    opacity: 1;
    border-color: var(--blue-color);
    background-color: #f0f8ff;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08);
}

/* Modal overlay */
#balanceSummaryModal {
    display: none;
    position: fixed;
    z-index: 1050;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow-y: auto;
    background-color: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(2px);
    padding: 40px 20px;
}

/* Modal content */
#balanceSummaryModal .modal-content {
    background-color: #ffffff;
    border-radius: 12px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    max-width: 600px;
    margin: auto;
    padding: 30px 40px;
    position: relative;
    animation: fadeIn 0.3s ease-in-out;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* Close button */
#balanceSummaryModal .close {
    position: absolute;
    top: 20px;
    right: 25px;
    color: #888;
    font-size: 24px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.2s ease-in-out;
}

#balanceSummaryModal .close:hover {
    color: #333;
}

/* Heading */
#balanceSummaryModal h2 {
    margin-top: 0;
    font-size: 22px;
    font-weight: 600;
    color: #333;
}

/* Paragraph */
#balanceSummaryModal p {
    color: #666;
    font-size: 15px;
    margin-bottom: 25px;
}

/* Table */
#balanceSummaryModal .table_resume {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
    color: #333;
    margin-top: 20px;
}

#balanceSummaryModal .table_resume td {
    padding: 10px 0;
    border-bottom: 1px solid #eee;
}

#balanceSummaryModal .table_resume tr td:nth-of-type(2) {
    font-weight: 600;
}

#balanceSummaryModal .table_resume tr.total td {
    font-weight: 600;
    color: var(--blue-color);
    border-top: 2px solid #ccc;
    padding-top: 15px;
}

/* Payment button */
#balanceSummaryModal .checkout_button.main,
#balanceSummaryModal .pay_button.main {
    background-color: var(--blue-color);
    color: white;
    border: none;
    padding: 12px 24px;
    font-size: 15px;
    border-radius: 8px;
    cursor: pointer;
    transition: 0.3s ease;
}

#balanceSummaryModal .checkout_button.main:hover,
#balanceSummaryModal .pay_button.main:hover {
    background-color: #1558c0;
}

#balanceSummaryModal .payment-form_container {
    margin-top: 25px;
    text-align: right;
}

/* Fade in animation */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* My Orders */

.my-orders {
    background-color: #3C84E810;
    padding: 64px 0;
}

.my-orders .section_container {
    width: min(1500px, 90%);
    margin: auto;
}

.my-orders .sf-box {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

.my-orders .orders-header {
    margin-bottom: 20px;
}

.my-orders .order-placeholder {
    display: grid;
    grid-template-columns: 280px 1fr;
    margin-bottom: 16px;
    box-shadow: 0 0 8px RGB(178, 178, 178);
}

.my-orders .order-placeholder .order-reference {
    line-height: 100%;
    font-size: 0.75rem;
    color: #555;
    margin-right: 3px;
    text-align: right;
}

.my-orders .order-placeholder .order-details {
    padding: 8px 16px;
}

.my-orders .order-placeholder .order-details_container {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    height: 100%;
}

.my-orders .order-placeholder .top_order-details {
    display: flex;
    justify-content: space-between;
}

/* REVIEW FORM */

.review_form_container {
    background: #ffffff;
    border: 1px solid #e1e4e8;
    border-radius: 12px;
    padding: 24px;
    margin: 20px auto;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}

.review_form_container h2 {
    font-size: 1.5rem;
    margin-bottom: 16px;
    font-weight: 600;
    color: #222;
}

#order-details .review_form_container .seller_form.heading {
    flex-flow: column;
    align-items: flex-start;
    margin-bottom: 16px;
}

.review_form_container .seller_form h2 {
    margin-bottom: 0;
}

#order-details .review_form_container .seller_form.heading small {
    font-size: 0.875rem;
    color: #555;
    font-style: italic;
}

.review_form {
    display: flex;
    flex-flow: column;
}

.review_form label {
    display: block;
    font-weight: 500;
    margin-bottom: 6px;
    color: #444;
}

.review_form textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid #ccc;
    border-radius: 8px;
    resize: vertical;
    min-height: 100px;
    font-size: 0.95rem;
    resize: none;
}

.review_form button {
    margin-top: 20px;
    background-color: var(--blue-color);
    color: #fff;
    border: none;
    border-radius: 8px;
    padding: 10px 18px;
    font-size: 1rem;
    cursor: pointer;
    width: fit-content;
    transition: .4s;
}

.review_form button:hover {
    opacity: .5;
}

.rating-group {
    margin-bottom: 18px;
}

.rating-group .stars {
    display: flex;
    gap: 6px;
    cursor: pointer;
}

.rating-group .star {
    color: #ccc;
    transition: color 0.2s ease-in-out;
}

.rating-group .star.active {
    color: #f5a623;
}

.rating-group .star:hover,
.rating-group .star.hovered {
    color: #ffc107;
}

.review_content {
    white-space: pre-wrap;
    font-style: italic;
    color: #555;
    padding: 16px;
    border: 1px solid lightgray;
    border-radius: 12px;
    margin: 12px 0;
    word-break: break-word;
    overflow-wrap: break-word;
}

/* REVIEW REVIEW */

.review_display_container {
    background: #fafafa;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 24px;
    margin: 20px auto;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
    font-family: 'Segoe UI', sans-serif;
    color: #333;
}

.review_display_container h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 6px;
    color: #222;
}

.review_display_container time {
    color: #777;
    font-size: 0.9rem;
}

.review_line {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 14px 0;
    font-weight: 500;
}

.review_display_container ul {
    list-style: none;
    padding: 0;
    margin: 12px 0 20px;
}

.review_display_container ul li {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 6px 0;
    font-weight: 400;
}

.review_display_container p em {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}

.review-stars {
    display: inline-flex;
    gap: 4px;
    vertical-align: middle;
}

.review-stars .star svg {
    display: block;
}

.review-details-table {
    width: 100%;
    border-collapse: collapse;
    margin: 16px 0 24px;
}

.review-details-table .star svg {
    width: 16px;
    height: 16px;
}

.review-details-table td {
    padding: 6px 8px;
    vertical-align: middle;
    font-size: 0.95rem;
    color: #444;
}

.review-details-table td:first-child {
    width: 60%;
    font-weight: 500;
}

.review-hidden {
    color: #666;
    font-style: italic;
    padding: 12px;
    text-align: center;
}

/* ------- */

#orders-section {
    min-height: 80vh;
}

.my-orders .order-placeholder .order-right {
    display: flex;
    flex-flow: column;
    align-items: flex-end;
    gap: 8px;
}

.my-orders .order-placeholder p.status {
    font-size: 1.125rem;
    font-weight: 600;
    color: white;
    padding: 4px 0;
    width: 132px;
    text-align: center;
    border-radius: 16px;
}

.my-orders .order-placeholder p.pending {
    background-color: brown;
}

.my-orders .order-placeholder p.in_progress {
    background-color: #FEAC02;
}

.my-orders .order-placeholder p.in_revision {
    background-color: #FEAC02;
}

.my-orders .order-placeholder p.completed {
    background-color: green;
}

.my-orders .order-placeholder p.dispute {
    background-color: #ef4444;
}

.my-orders .order-placeholder p.delivered {
    background-color: #366C31;
}

.my-orders .order-placeholder p.cancelled {
    background-color: red;
}

.my-orders .order-placeholder h4 {
    font-size: 1.3rem;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: pretty;
}

.my-orders .no-order {
    display: flex;
    flex-flow: column;
    gap: 16px;
    align-items: center;
    width: min(450px, 90%);
    margin: 32px auto;
}

.my-orders .no-order p{
    text-align: center;
}

.my-orders .order-placeholder .bottom_order-details {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.my-orders .order-placeholder .bottom_order-details .buttons_container {
    display: flex;
    align-items: center;
    gap: 6px;
}


.my-orders .order-placeholder .bottom_order-details .buttons_container a.button {
    display: flex;
    align-items: center;
    padding: 6px 12px;
    gap: 8px;
}

.my-orders .order-placeholder .bottom_order-details .buttons_container a.button:first-of-type {
    border: 2px solid var(--blue-color);
    color: var(--blue-color);
    text-transform: uppercase;
    font-weight: 700;
}

.my-orders .order-placeholder .bottom_order-details .buttons_container a.button:last-of-type {
    border: 2px solid var(--blue-color);
    background-color: var(--blue-color);
    color: white;
    text-transform: uppercase;
    font-weight: 700;
}

.my-orders .order-placeholder .countdown .countdown-details {
    font-size: 2rem;
    color: var(--blue-color);
    font-weight: 600;
}

.my-orders .order-placeholder .countdown.ddelay {
    color: #c0392b;
    font-weight: 700;
    font-size: 1.125rem;
}

.my-orders .orders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
}

.my-orders .filter-box {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.4rem 0.8rem;
    border-radius: 8px;
}

.my-orders .filter-box select {
    padding: 0.3rem 0.6rem;
    border: 1px solid #ccc;
    border-radius: 6px;
    font-size: 0.95rem;
    cursor: pointer;
}

.my-orders .completed_orders {
    display: none;
}

.my-orders .cancelled_orders {
    display: none;
}

/* Order Details */

#order-details {
    background-color: #3C84E810;
    padding: 64px 0;
    min-height: 80vh;
}

#order-details .sf-box {
    height: fit-content;
    margin-bottom: 24px;
}

#order-details .remaining_time_before_autocompletion {
    padding: 20px 28px;
    margin: 24px 0;
    background: linear-gradient(135deg, #f0f4ff 0%, #e6eeff 100%);
    border: 1px solid #c9d8ff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(60, 132, 232, 0.1);
    display: flex;
    align-items: center;
    gap: 12px;
}

#order-details .remaining_time_before_autocompletion p {
    margin: 0;
    font-size: 1rem;
    color: #2c3e50;
    line-height: 1.4;
}

#order-details .remaining_time_before_autocompletion p strong {
    color: var(--blue-color);
    font-weight: 600;
}

#order-details .order-top_heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 32px;
}

#order-details .order_invoice-button a {
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: var(--blue-color);
    color: white;
    text-transform: uppercase;
    padding: 4px 12px;
    font-weight: 700;
    border-radius: 12px;
}

#order-details .order-top_heading h2 {
    line-height: 100%;
}

#order-details .order-top_heading small {
    line-height: 100%;
    color: #555;
}

#order-details .section_container {
    width: min(1500px, 90%);
    margin: auto;
}

#order-details .section_container {
    display: grid;
    grid-template-columns: 1fr 450px;
    gap: 32px;
}

#order-details .store_infos {
    display: flex;
    align-items: center;
    gap: 16px;
}

#order-details .store_infos h3 {
    font-size: 1.125rem;
    display: -webkit-box;
    line-clamp: 3;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: pretty;
}

#order-details .heading {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

#order-details .heading time {
    color: #555;
    font-style: italic;
    letter-spacing: 1px;
    font-size: 0.875rem;
}

#order-details .order-aside-infos hr {
    margin: 24px 0;
    height: 1px;
    background-color: var(--blue-color);
    border: none;
}

#order-details #open_panel_mobile {
    display: none;
}

#order-details .order-aside-infos .mobile_profile_menu_cross {
    background-color: transparent;
    cursor: pointer;
    display: none;
    position: absolute;
    top: 16px;
    right: 16px;
    border: none;
    z-index: 3;
    cursor: pointer;
}

#order-details .order-status {
    table-layout: fixed;
    width: 100%;
}

#order-details .order-status th {
    text-align: left;
}

#order-details .order-status td {
    text-align: right;
}

#order-details .order-status td a {
    display: inline-block;
    max-width: 117.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    vertical-align: middle;
}

#order-details .order-status .countdown.ddelay {
    color: #c0392b;
    font-weight: 800;
}

#order-details .buyer_name {
    text-decoration: underline 1px solid black;
    text-underline-offset: 2px;
    max-width: 190px;
    /* ✅ limite à 190px */
    white-space: nowrap;
    /* ✅ reste sur une ligne */
    overflow: hidden;
    /* ✅ coupe le texte qui dépasse */
    text-overflow: ellipsis;
    /* ✅ ajoute les "..." */
    display: block;
    /* ✅ nécessaire pour max-width */
    vertical-align: middle;
    /* optionnel, pour bien aligner */
}

#order-details .status_description {
    text-align: justify;
}

#order-details .order_expectation {
    display: flex;
    flex-flow: column;
    gap:
        12px;
}

#order-details .order_expectation label {
    display: block;
    font-weight: 700;
}

#order-details .order_expectation button[type=submit],
#order-details .order-aside-infos a.button,
#order-details .order-aside-infos .delivery_button {
    border: none;
    background-color: var(--blue-color);
    color: white;
    text-transform: uppercase;
    padding: 10px 12px;
    font-weight: 700;
    border-radius: 12px;
    font-size: 1.125rem;
    width: fit-content;
    cursor: pointer;
    transition: .4s;
    margin-left: auto;
    min-width: 400px;
}

#order-details .order-aside-infos a.button,
#order-details .order-aside-infos .delivery_button {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 1rem;
    justify-content: center;
}

#order-details .order-aside-infos .buttons_container {
    display: flex;
    flex-flow: column;
    gap: 16px;
}

#order-details .order-aside-infos .buttons_container small {
    color: #666;
    text-align: center;
}

#order-details .order-aside-infos a.button {
    border: 2px solid var(--blue-color);
}

#order-details .order-aside-infos a.button.seller_button {
    background-color: white;
    color: var(--blue-color);
}

#order-details .order-aside-infos a.button.cancel_button {
    background-color: #c0392b;
    border-color: #c0392b;
}

#order-details .order_expectation button[type=submit]:hover,
#order-details .order-aside-infos a.button:hover,
#order-details .order-aside-infos .delivery_button:hover,
#delivery_modal form button[type=submit]:hover {
    opacity: .5;
}

#order-details .delivery_container,
#order-details .pricing_container {
    padding: 16px 32px;
}


#order-details .pricing_container .info-message {
    font-size: 16px;
    line-height: 1.6;
    margin-bottom: 1rem;
    position: relative;
    text-align: justify;
}

#order-details .pricing_container .info-message a {
    display: flex;
    align-items: center;
    gap: 6px;
    color: var(--blue-color);
    text-decoration: underline 1px solid var(--blue-color);
    text-underline-offset: 2px;
}

#order-details .pricing_container .info-message .earnings {
    font-weight: bold;
}

#order-details .pricing_container .tooltip-icon {
    display: inline-block;
    margin-left: 5px;
    color: #555;
    cursor: pointer;
    position: relative;
    text-align: left;
}

#order-details .pricing_container .tooltip-icon::after {
    content: "?";
    display: inline-block;
    background: #e0e0e0;
    color: var(--blue-color);
    border-radius: 50%;
    width: 18px;
    height: 18px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    font-weight: bold;
    transform: translateX(-20%) translateY(-10%);
}

#order-details .pricing_container .tooltip-box {
    opacity: 0;
    pointer-events: none;
    position: absolute;
    top: 25px;
    left: 0;
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 6px;
    padding: 10px;
    font-size: 14px;
    width: 220px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    transition: opacity 0.25s ease;
    z-index: 100;
}

#order-details .pricing_container .tooltip-icon:hover .tooltip-box {
    opacity: 1;
    pointer-events: auto;
}

#order-details .order_expectation textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid lightgray;
    border-bottom: 1px solid black;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    min-height: 300px;
    font-size: 1rem;
}

#order-details .order_description {
    text-align: justify;
}

#order-details .order-status td.status.pending {
    color: brown;
}

#order-details .order-status td.status.in_progress {
    color: #FEAC02;
}

#order-details .order-status td.status.in_revision {
    color: #FEAC02;
}

#order-details .order-status td.status.completed {
    color: green;
}

#order-details .order-status td.status.dispute {
    color: #ef4444;
}

#order-details .order-status td.status.delivered {
    color: #366C31;
}

#order-details .order-status td.status.cancelled {
    color: red;
}

#order-details .order-details-box h3 {
    font-size: 1rem;
}

#order-details .order-details-box .order-description,
#order-details .description-container {
    font-style: italic;
    color: #555;
    padding: 16px;
    border: 1px solid lightgray;
    border-radius: 12px;
    margin: 12px 0;
    word-break: break-word;
    overflow-wrap: break-word;
    white-space: pre-wrap;
}

#order-details .description-container {
    color: black;
    white-space: pre-wrap;
}

#order-details .order-result .file_container_empty {
    border: 2px dashed var(--blue-color);
    border-radius: 16px;
    width: 160px;
    height: 160px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-flow: column;
    gap: 12px;
    color: var(--blue-color);
    font-weight: 600;
    margin: 16px 0;
}

/* The Modal (background) */
.orderResultModal {
    display: none;
    position: fixed;
    z-index: 15;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

.orderResultModal .modal-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border-radius: 16px;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    width: min(80%, 1200px);
    max-height: 90vh;
    overflow: auto;
}

.orderResultModal .close {
    color: #aaa;
    float: right;
    font-size: 28px;
    font-weight: bold;
}

.orderResultModal .close:hover,
.orderResultModal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.orderResultModal form {
    display: flex;
    flex-flow: column;
    gap: 12px;
}

.orderResultModal form textarea {
    width: 100%;
    padding: 6px 10px;
    border: 1px solid lightgray;
    border-bottom: 1px solid black;
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    min-height: 300px;
    font-size: 1rem;
}

.orderResultModal form button[type=submit] {
    border: none;
    color: white;
    text-transform: uppercase;
    padding: 10px 12px;
    font-weight: 700;
    border-radius: 12px;
    font-size: 1.125rem;
    width: fit-content;
    cursor: pointer;
    transition: .4s;
    margin-left: auto;
    min-width: 400px;
}

.orderResultModal form button[type=submit] {
    width: 100%;
}

#delivery_modal form button[type=submit] {
    background-color: var(--blue-color);
}

#revision_modal form button[type=submit] {
    background-color: #FEAC02;
}

.file-dropzone {
    border: 2px dashed #aaa;
    padding: 20px;
    text-align: center;
    margin-bottom: 1rem;
    cursor: pointer;
}

.file-dropzone.hover {
    background-color: #f0f0f0;
}

.file-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.file-preview img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    background-color: #eee;
    border-radius: 6px;
    overflow: hidden;
    margin: 5px;
    display: inline-block;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .05);
}

.file-preview-item {
    display: inline-block;
    position: relative;
}

.file-preview-item button {
    display: flex;
    position: absolute;
    top: 0;
    right: 0;
    background: #eee;
    color: white;
    border: none;
    border-radius: 50%;
    padding: 8px;
    cursor: pointer;
    width: 28px;
    height: 28px;
    font-size: 12px;
    align-items: center;
    justify-content: center;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
}

.delivery_files {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.delivery_files li {
    display: flex;
    align-items: center;
    gap: 6px;
    justify-content: space-between;
    padding: 6px 12px;
    background-color: #eee;
    border-radius: 32px;
}

.delivery_files li button {
    background: transparent;
    border: none;
    color: red;
    font-size: 16px;
    cursor: pointer;
}

#order-details .order-result .file_container {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

#order-details .order-result .file_container li a {
    display: block;
    border: 1px solid lightgray;
    border-bottom: 2px solid black;
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    background-color: white;
    width: 200px;
    display: -webkit-box;
    line-clamp: 1;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    text-wrap: pretty;
}

#order-details .order-result .file_container li a .text {
    display: block;
    background-color: RGBa(60, 60, 60, .75);
    width: 100%;
    height: 100%;
    color: white;
    box-shadow: 0 0 8px RGBa(0, 0, 0, .25);
    padding: 2px 8px;
}

#order-details .order-result .file_container li a img {
    display: block;
    width: 100%;
    height: 100px;
    object-fit: cover;
    object-position: top;
}

#order-details .order-result .buttons_container {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 6px;
    margin-top: 16px;
}

#order-details .order-result .buttons_container button,
#order-details .order-result .buttons_container a {
    display: block;
    padding: 10px 16px;
    text-transform: uppercase;
    width: 250px;
    text-align: center;
    border-radius: 8px;
    font-size: 1rem;
    border: none;
    font-weight: 700;
    color: white;
    cursor: pointer;
    transition: .4s;
}

#order-details .order-result .buttons_container button.delivery_button {
    background-color: #366C31;
}

#order-details .order-result .buttons_container button.revision_button {
    background-color: #FEAC02;
}

#order-details .order-result .buttons_container a.accept_button {
    background-color: #10b981;
}

#order-details .order-result .buttons_container a.reject_button {
    background-color: #ef4444;
}

#order-details .order-result .buttons_container button:hover {
    opacity: .5;
}

/* Referral */

#referral-program {
    background-color: #3C84E810;
    padding: 64px 0;
    min-height: 80vh;
}

#referral-program .section_container {
    display: flex;
    flex-flow: column;
    gap: 32px;
    width: min(1500px, 90%);
    margin: auto;
}

#referral-program .referral_explanations {
    margin: 24px 0;
}

#referral-program .referral_explanations h2 {
    color: var(--blue-color);
}

#referral-program .referral_explanations ul {
    display: flex;
    flex-flow: column;
    gap: 10px;
    list-style: inside;
    margin: 20px 0;
}

#referral-program .link_container {
    cursor: pointer;
    background-color: #f0f4f8;
    border: 1px solid #d1d9e6;
    border-radius: 6px;
    padding: 12px 20px;
    font-size: 1rem;
    color: #2c3e50;
    user-select: all;
    transition: background-color 0.3s ease, border-color 0.3s ease;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    margin: 1rem 0;
    display: -webkit-box;
    -webkit-line-clamp: 1;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    /* empêche le retour à la ligne */
    width: min(600px, 100%);
}

#referral-program .link_container:hover {
    background-color: #d9e6ff;
    border-color: var(--blue-color);
    box-shadow: 0 4px 12px rgba(122, 156, 255, 0.3);
}


.referrals-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0 12px;
    font-family: 'Segoe UI', Tahoma, sans-serif;
}

.referrals-table th {
    text-align: left;
    padding: 14px 20px;
    color: var(--blue-color);
    font-size: 0.95rem;
    font-weight: 700;
    border-bottom: 2px solid var(--blue-color);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.referrals-table th:not(:first-of-type) {
    text-align: right;
}

.referrals-table tbody tr {
    background-color: #ffffff;
    box-shadow: 0 4px 10px rgba(59, 130, 246, 0.08);
    /* soft blue shadow */
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    border-radius: 8px;
}

.referrals-table tbody tr:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 14px rgba(59, 130, 246, 0.12);
}

.referrals-table td {
    padding: 14px 20px;
    font-size: 0.95rem;
    color: #1e293b;
    border-top: 1px solid #f1f5f9;
    border-bottom: 1px solid #f1f5f9;
}

.referrals-table td:not(:first-of-type) {
    text-align: right;
}

.referrals-table td:first-child {
    border-left: 4px solid var(--blue-color);
    border-radius: 8px 0 0 8px;
}

.referrals-table td:last-child {
    border-radius: 0 8px 8px 0;
}

/* Earnings */

#earnings {
    background-color: #3C84E810;
    padding: 64px 0;
    min-height: 80vh;
}

#earnings .section_container {
    display: flex;
    flex-flow: column;
    gap: 32px;
    width: min(1500px, 90%);
    margin: auto;
}

#earnings .progress-bar-container {
    background: #ddd;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    margin-top: 5px;
}

#earnings .progress-bar {
    height: 10px;
    border-radius: 5px;
}

.earnings-table {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Segoe UI', sans-serif;
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    margin-top: 20px;
}

.earnings-table thead {
    background: #f4f6f8;
    color: #333;
    text-align: left;
}

.earnings-table th,
.earnings-table td {
    padding: 14px 18px;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.earnings-table tbody tr:hover {
    background-color: #f9fbfc;
}

.earnings-table td {
    color: #444;
}

.earnings-table td:nth-child(3) {
    font-weight: bold;
    color: #2e7d32;
}

.earnings-table td:nth-child(3).payout {
    color: #ef4444;
}

.earnings-table td span {
    color: #2e7d32;
    font-weight: 600;
}

#earnings .stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
        'available pending'
        'available total_earned'
        'available withdrawn';
    gap: 16px;
}

#earnings .stats .sf-box {
    background: #fff;
    border-radius: 12px;
    padding: 20px;
    height: fit-content;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}

#earnings .stats .sf-box.available {
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    grid-area: available;
    height: min(200px, 100%);
}

#earnings .stats .sf-box.pending {
    grid-area: pending;
}

#earnings .stats .sf-box.total_earned {
    grid-area: total_earned;
}

#earnings .stats .sf-box.withdrawn {
    grid-area: withdrawn;
}


#earnings .stats .sf-box.available p span {
    font-size: 2.5rem;
}

#earnings .stats .sf-box p {
    display: flex;
    flex-direction: column;
}

#earnings .stats .sf-box p strong {
    font-weight: 600;
    color: #333;
}

#earnings .stats .sf-box p span {
    font-size: 1.75rem;
    font-weight: 600;
    color: #1a1a1a;
}

#earnings .wallet-buttons {
    display: flex;
    gap: 10px;
    margin-top: 12px;
    flex-wrap: wrap;
}

#earnings .wallet-buttons .button {
    display: flex;
    align-items: center;
    gap: 4px;
    text-decoration: none;
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 0.9rem;
    font-weight: 500;
    transition: .4s;
    text-align: center;
    border: none;
    white-space: nowrap;
    cursor: pointer;
}

#earnings .wallet-buttons .button[disabled] {
    opacity: .5;
    cursor: not-allowed;
}

#earnings .button:hover {
    opacity: .5;
}

#earnings .btn-action {
    background-color: var(--green-color);
    color: white;
}

#earnings .btn-secondary {
    background-color: #f1f1f1;
    color: #333;
    border: 1px solid #ccc;
}

#earnings .progress-bar-container {
    background: #e0e0e0;
    border-radius: 6px;
    overflow: hidden;
    height: 10px;
    margin-bottom: 4px;
    width: 100%;
    max-width: 150px;
}

#earnings .progress-bar {
    height: 100%;
    border-radius: 6px;
    background: var(--green-color);
    transition: width 0.3s ease-in-out;
}


/* The Modal (background) */
#withdrawModal {
    display: flex;
    position: fixed;
    z-index: 15;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgb(0, 0, 0);
    background-color: rgba(0, 0, 0, 0.4);
}

#withdrawModal.hidden {
    display: none;
}

/* Modal Content/Box */
#withdrawModal .modal-content {
    position: relative;
    background-color: #fefefe;
    margin: auto;
    border: 1px solid #888;
    width: min(100%, 750px);
    box-shadow: 0 0 8px RGBa(170, 170, 170, .25);
    padding: 16px 32px 32px;
    border-radius: 16px;
    padding: 12px 24px;
}

/* The Close Button */
#withdrawModal .close {
    position: absolute;
    top: 0;
    right: 20px;
    color: #aaa;
    font-size: 50px;
    font-weight: 500;
}

#withdrawModal .close:hover,
#withdrawModal .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#withdrawModal .form-group {
    margin-bottom: 1.2rem;
}

#withdrawModal .form-group label {
    display: block;
    margin-bottom: 0.4rem;
    font-weight: 500;
}

#withdrawModal .form-group input {
    width: 100%;
    padding: 0.6rem;
    border: 1px solid #ccc;
    border-radius: 0.5rem;
}

#withdrawModal .button.btn-action {
    background-color: #2a7f62;
    color: white;
    padding: 0.8rem 1.6rem;
    border: none;
    border-radius: 0.6rem;
    font-weight: bold;
    cursor: pointer;
    transition: background 0.3s ease;
}

#withdrawModal .button.btn-action:hover {
    background-color: #226650;
}

#withdrawModal .method-options label {
    display: inline-flex;
    align-items: center;
    margin-right: 1.5rem;
    cursor: pointer;
    gap: 0.5rem;
    font-weight: 500;
    white-space: nowrap;
}

#withdrawModal .payment-fields {
    margin-top: 1rem;
}

#withdrawModal .payment-fields.hidden {
    display: none;
}

@media screen and (max-width: 768px) {
    .earnings-table thead {
        display: none;
    }

    .earnings-table,
    .earnings-table tbody,
    .earnings-table tr,
    .earnings-table td {
        display: block;
        width: 100%;
    }

    .earnings-table tr {
        margin-bottom: 20px;
        border-bottom: 2px solid #ddd;
    }

    .earnings-table td {
        padding: 10px;
        text-align: right;
        position: relative;
    }

    .earnings-table td::before {
        content: attr(data-label);
        position: absolute;
        left: 15px;
        width: 50%;
        text-align: left;
        font-weight: bold;
        color: #666;
    }
}

/* Support */


#contact_support {
    background-color: #3C84E810;
    padding: 64px 0;
    min-height: 80vh;
}

#contact_support .section_container {
    width: min(1500px, 90%);
    margin: auto;
}

/* Conteneur du formulaire */
#contact_support .contact_support-form {
    display: flex;
    flex-flow: column;
    gap: 16px;
    margin: 0 auto;
    padding: 30px 24px;
    background-color: #fff;
    border-radius: 16px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

/* Titre */
#contact_support .contact_support-form h1 {
    font-size: 24px;
    font-weight: 700;
    color: #222;
}

/* Bouton */
#contact_support .sf-btn {
    padding: 12px 24px;
    font-size: 16px;
    font-weight: 600;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    transition: .4s;
    color: #fff;
    background-color: var(--blue-color);
}

#contact_support .sf-btn.dispute-btn {
    background-color: #ef4444;
}

#contact_support .sf-btn:hover {
    opacity: .5;
}

/* Responsive */
@media (max-width: 500px) {
    #contact_support .contact_support-form {
        padding: 20px 16px;
    }

    #contact_support .contact_support-form h1 {
        font-size: 20px;
    }
}

/* Terms */

/* --- SECTION LAYOUT --- */
.terms_section {
    background-color: #3C84E810;
    padding: 64px 0;
}

.terms_section .section_container {
    width: min(1500px, 95%);
    margin: 0 auto;
    padding: 32px;
}

/* --- HEADINGS --- */
.terms_section h1 {
    font-size: 2.5rem;
    color: var(--blue-color);
    margin-bottom: 16px;
}

.terms_section h2 {
    font-size: 1.75rem;
    margin-top: 40px;
    margin-bottom: 16px;
    color: #2c3e50;
    border-left: 4px solid var(--blue-color);
    padding-left: 12px;
}

.terms_section h3 {
    font-size: 1.3rem;
    margin-top: 24px;
    margin-bottom: 12px;
    color: #444;
}

/* --- PARAGRAPHS & LISTS --- */
.terms_section p {
    margin-bottom: 16px;
    font-size: 1.05rem;
}

.terms_section ul {
    list-style: none;
    padding-left: 20px;
    margin-bottom: 24px;
}

.terms_section ul li {
    margin-bottom: 10px;
    position: relative;
    padding-left: 16px;
}

.terms_section ul li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--blue-color);
    font-weight: bold;
}

/* --- LINKS --- */
.terms_section a {
    color: var(--blue-color);
    text-decoration: underline;
}

.terms_section a:hover {
    text-decoration: none;
}

/* --- TABLES --- */
.terms_section table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 32px;
    font-size: 1.05rem;
    background-color: #fff;
    border: 1px solid #ddd;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.terms_section th,
.terms_section td {
    padding: 12px 16px;
    text-align: left;
    border-bottom: 1px solid #eee;
}

.terms_section th {
    background-color: var(--blue-color);
    color: #fff;
    font-weight: 600;
}

.terms_section tr:nth-child(even) td {
    background-color: #f9f9f9;
}

.terms_section tr:hover td {
    background-color: #f1f7ff;
}

/* --- RESPONSIVE --- */
@media (max-width: 768px) {
    .terms_section h1 {
        font-size: 2rem;
    }

    .terms_section h2 {
        font-size: 1.5rem;
    }

    .terms_section .section_container {
        padding: 24px;
    }

    .terms_section table {
        display: block;
        overflow-x: auto;
        white-space: nowrap;
    }
}


/* 404 */

#section_404 {
    background-color: #3C84E810;
    padding: 64px 0;
    min-height: 80vh;
}

/* --- 404 PAGE STYLING --- */
#section_404 .section_container {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    justify-content: center;
    gap: 24px;
    padding: 64px 32px;
}

#section_404 img {
    max-width: 300px;
    height: auto;
    object-fit: contain;
    opacity: 0.95;
    transition: transform 0.3s ease;
}

#section_404 img:hover {
    transform: scale(1.03);
}

#section_404 h1 {
    font-size: 2.5rem;
    color: #2c3e50;
    margin: 0;
    font-weight: 700;
}

#section_404 p {
    font-size: 1.2rem;
    color: #555;
    margin: 0;
    max-width: 600px;
}

#section_404 .button {
    display: inline-block;
    background-color: var(--blue-color);
    color: white;
    padding: 12px 24px;
    border-radius: 6px;
    font-size: 1rem;
    font-weight: 500;
    text-decoration: none;
}

/* Modifier */

.error {
    font-size: 16px;
    padding: 8px;
    border: 1px solid #e84a5f;
    border-radius: 8px;
    background-color: #ff847c60;
    color: #e84a5f;
    width: 100%;
    text-align: center;
}

.error_box {
    position: fixed;
    top: -150px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    animation: ErrorBox 5s ease 0s 1 forwards;
    background-color: #FFD1CE;
    width: fit-content;
    padding: 4px 16px;
}

.valid_box {
    font-size: 16px;
    padding: 8px;
    background-color: #5cb85c60;
    color: #408140;
    border: 1px solid #408140;
    border-radius: 8px;
    width: 100%;
    text-align: center;
    position: fixed;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 50;
    animation: ErrorBox 5s ease 0s 1 forwards;
    background-color: #C1E3C1;
    width: fit-content;
    padding: 4px 16px;
}

.error_box p {
    display: flex;
    align-items: center;
    gap: 6px;
}

.valid_box p {
    display: flex;
    align-items: center;
    gap: 6px;
}

.red_alerts {
    color: red;
}

.profile_setting_up .block input.invalid {
    border: 1px solid red;
}

.required_field {
    color: red;
    align-self: flex-start;
    margin-top: 24px;
}

.goBackLink {
    display: block;
    color: var(--blue-color);
    margin-bottom: 32px;
}

.sf-box {
    box-shadow: 0 0 8px RGBa(170, 170, 170, .25);
    padding: 16px 32px 32px;
    border-radius: 16px;
    background-color: white;
    width: 100%;
}

.breadcrumbs {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    font-size: 16px;
}

.breadcrumbs li {
    color: black;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    white-space: nowrap;
}


.breadcrumbs li:last-of-type {
    display: inline-block;
    max-width: 190px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.breadcrumbs li a {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: .4s;
}

.breadcrumbs li:not(:last-child)::after {
    content: ">";
    margin: 0 8px;
    color: #888;
    /* Couleur du séparateur */
}

.breadcrumbs a {
    text-decoration: none;
    color: #007bff;
    /* Bleu par défaut */
    transition: color 0.3s ease;
}

.breadcrumbs a:hover {
    color: #0056b3;
    /* Bleu foncé au survol */
}

#global-loader {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    z-index: 1;
    display: none;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(2px);
}

#global-loader .spinner {
    position: sticky;
    top: 40%;
    bottom: 45%;
    width: 60px;
    height: 60px;
    border: 6px solid #ccc;
    border-top-color: var(--blue-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

@keyframes animate_search_query {
    0% {
        width: 250px;
    }

    100% {
        width: 450px;
    }
}

@keyframes animate_search_query_backwards {
    0% {
        width: 450px;
    }

    100% {
        width: 250px;
    }
}

@keyframes ErrorBox {
    0% {
        top: -150px;
    }

    20% {
        top: 10%;
    }

    80% {
        top: 10%;
    }

    100% {
        top: -150px;
    }
}

/* Media Screen */


@media screen and (max-width: 1500px) {

    @keyframes animate_search_query {
        0% {
            width: 250px;
        }

        100% {
            width: 250px;
        }
    }

    @keyframes animate_search_query_backwards {
        0% {
            width: 250px;
        }

        100% {
            width: 250px;
        }
    }

    #dashboard .dashboard_container {
        grid-template-columns: 350px 1fr;
    }

    #inbox_container .section_container {
        grid-template-columns: 410px 1fr;
    }

    #inbox_container .conversations_liste .conversation_details_container {
        max-width: 160px;
    }

    /* Store Creation */

    /* Responsive stacked table style */
    .store_details .statut_container,
    .store_details .statut_container thead,
    .store_details .statut_container tbody,
    .store_details .statut_container th,
    .store_details .statut_container td,
    .store_details .statut_container tr {
        display: block;
        width: 100%;
    }

    .store_details .statut_container thead {
        display: none;
    }

    .store_details .statut_container tr {
        margin-bottom: 1rem;
        border-radius: 10px;
        padding: 16px;
        background: #fafafa;
        box-shadow: 0 2px 6px rgba(0, 0, 0, .08);
        transition: all 0.3s ease;
        position: relative;
        overflow: hidden;
    }

    /* Hover effect : léger zoom et assombrissement */
    .store_details .statut_container tr:hover {
        transform: translateY(-3px);
        box-shadow: 0 6px 16px rgba(0, 0, 0, .15);
        background: #f6f6f6;
        cursor: pointer;
    }

    /* Cellules */
    .store_details .statut_container td {
        text-align: left;
        padding: 10px 0;
        border: none;
        display: flex;
        justify-content: space-between;
        font-size: 0.95rem;
        text-align: right;
    }

    /* Label (colonne d’en-tête affichée en mobile) */
    .store_details .statut_container td::before {
        content: attr(data-label);
        font-weight: 600;
        margin-right: 12px;
        flex-shrink: 0;
        min-width: 35%;
        text-align: left;
    }

    /* Store Page */
    .my-orders .order-placeholder h4 {
        font-size: 1.125rem;
    }

    .my-orders .order-placeholder .bottom_order-details .buttons_container,
    .my-orders .order-placeholder .top_order-details {
        font-size: 0.75rem;
    }

    .my-orders .order-placeholder .countdown .countdown-details {
        font-size: 1.5rem;
    }

    #store_page .store_page_content .store_details_container .store_description {
        width: 150%;
    }

    /* Payment order */

    #place-order .section_container {
        grid-template-columns: 1fr 425px;
    }

    #place-order .section_container .table_resume td {
        font-size: 0.875rem;
    }

    #place-order .section_container .order-placeholder img {
        object-fit: cover;
        height: auto;
        max-width: 200px;
    }

    #place-order .section_container .top_order-details .price {
        font-size: 1.25rem;
    }

    /* chat */
    #inbox_container .chat_container {
        height: 380px;
    }
}

@media screen and (max-width: 1200px) {

    @keyframes animate_search_query {
        0% {
            width: 100%;
        }

        100% {
            width: 100%;
        }
    }

    @keyframes animate_search_query_backwards {
        0% {
            width: 100%;
        }

        100% {
            width: 100%;
        }
    }

    header #searchResultForm {
        display: none;
        align-items: center;
        gap: 16px;
        width: 100%;
    }

    header #searchResultForm .trigger_mobile_navigation {
        display: flex;
    }

    .search_query_container {
        width: 100%;
    }

    .search_query_container input {
        width: 100%;
    }

    header nav ul.connected_nav .mobile_search_button-container {
        display: block;
    }

    /* Profile setting up */

    .profile_setting_up {
        grid-template-columns: 1fr;
    }

    .profile_setting_up .block {
        max-width: 600px;
        margin: auto;
    }

    /* Dashboard */

    header {
        position: sticky;
        top: 0;
        width: 100%;
        background-color: white;
    }

    #dashboard .dashboard_container {
        grid-template-columns: 1fr;
    }

    #dashboard .right_side .store_container #edit_profile_dashboard {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--blue-color);
        font-weight: 500;
        background-color: transparent;
        border: none;
        align-self: flex-start;
        cursor: pointer;
        font-size: 1.125rem;
        margin-bottom: 12px;
    }

    #dashboard .stores_container {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        margin: 28px 0;
    }

    #dashboard .store_item {
        width: 280px;
    }

    #dashboard .add_store_item .top_container {
        width: 280px;
        height: 170px;
    }

    #dashboard .left_side {
        position: fixed;
        z-index: 20;
        top: 0;
        left: 0;
        transform: translateX(-100%);
        background-color: white;
        height: 100%;
        padding: 16px 0;
        box-shadow: 0 0 8px RGBa(170, 170, 170, .25);
        width: 300px;
        gap: 0;
        transition: transform 0.4s ease;
    }

    #dashboard .left_side.active {
        transform: translateX(0%);
    }

    #dashboard .left_side .sf-box {
        box-shadow: none;
    }

    #dashboard .image_profile_picture {
        width: 150px;
    }

    #dashboard .profile_viewer {
        display: none;
    }

    #dashboard .mobile_profile_viewer {
        display: flex;
        align-items: center;
        gap: 2px;
        font-size: 12px;
        color: var(--blue-color);
        margin-top: 12px;
    }

    #dashboard .mobile_profile_menu_cross {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    #dashboard .sf-box .top_box {
        align-items: flex-start;
        flex-flow: column;
    }

    /* Inbox */



    #inbox_container .contacts_container {
        padding: 12px;
    }

    #inbox_container .section_container {
        grid-template-columns: 1fr;
        gap: 16px;
        padding: 32px 0 64px;
    }

    #inbox_container .conversations_liste {
        display: flex;
        flex-direction: row;
        gap: 12px;

        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        /* inertie sur iOS */
        user-select: auto;
    }


    #inbox_container .conversations_liste.is-dragging {
        user-select: none;
        /* empêche la sélection de texte pendant drag */
    }

    #inbox_container .conversations_liste li {
        flex: 0 0 auto;
    }

    #inbox_container .conversations_liste li.not_read {
        border-bottom: 2px solid #d5d7db;
    }

    #inbox_container .conversations_liste .conversation_details_container,
    .conversation_last_message_date {
        display: none;
    }

    #inbox_container .conversations_liste li a {
        grid-template-columns: auto;
        width: fit-content;
    }

    /* Order Details */

    .my-orders .order-placeholder {
        grid-template-columns: 1fr;
    }

    .my-orders .order-placeholder img {
        height: 170px;
        width: 100%;
        object-fit: cover;
    }

    .my-orders .order-placeholder .order-details_container {
        gap: 24px;
    }

    #order-details {
        padding: 48px 0 64px;
    }

    #order-details .section_container {
        grid-template-columns: 1fr;
    }

    #order-details .sf-box {
        box-shadow: none;
    }

    #order-details .store_infos {
        flex-flow: column;
    }

    #order-details .section_container .order-aside-infos {
        position: fixed;
        top: 0;
        left: 0;
        width: 320px;
        height: 100%;
        transform: translateX(-100%);
        background-color: white;
        z-index: 20;
        box-shadow: 0 0 8px RGBa(170, 170, 170, .25);
        transition: transform 0.4s ease;
    }

    #order-details .section_container .order-aside-infos.active {
        transform: translateX(0%);
        overflow-y: auto;
    }

    #order-details .order-aside-infos .mobile_profile_menu_cross {
        display: flex;
    }

    #order-details #open_panel_mobile {
        display: flex;
        align-items: center;
        gap: 6px;
        color: var(--blue-color);
        font-weight: 500;
        background-color: transparent;
        border: none;
        align-self: flex-start;
        cursor: pointer;
        font-size: 1.125rem;
        margin-bottom: 12px;
        padding-bottom: 16px;
    }

    #order-details .order_expectation button[type=submit],
    #order-details .order-aside-infos a.button,
    #order-details .order-aside-infos .delivery_button {
        width: 100%;
        min-width: auto;
    }

    /* Store Creation */

    .create_new_store {
        grid-template-columns: 1fr;
    }

    .create_new_store #new_store_preview_container {
        display: none;
    }

    /* Store Page */

    #store_page .store_page_content .store_details_container .store_description {
        width: 100%;
    }

    #store_page .store_page_content {
        display: flex;
        flex-flow: column;
    }

    #store_page .store_page_content .store_package_container {
        margin: 32px 0;
    }

    /* Profile page */

    #user_profile .user_profile_content .top_profile-container {
        flex-flow: column-reverse;
        gap: 32px;
    }

    #user_profile .buttons_container {
        justify-content: flex-start;
    }

    /* Page ORder */

    /* Container checkout */
    #place-order .section_container {
        grid-template-columns: 1fr;
        position: relative;
    }

    /* Overlay full screen derrière le checkout box */
    #place-order .section_container::before {
        content: '';
        position: fixed;
        inset: 0;
        background-color: rgba(0, 0, 0, 0.5);
        z-index: 10;
        display: none;
    }

    /* Overlay visible */
    #place-order .section_container.show-overlay::before {
        display: block;
    }

    /* Checkout box centrée */
    #place-order .section_container .checkout_box {
        display: none;
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: min(400px, 90%);
        background: #fff;
        padding: 20px;
        border-radius: 12px;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
        z-index: 20;
    }

    /* Secure payment modal */
    #place-order .section_container .secure_payment {
        display: none;
    }

}

@media screen and (max-width: 757px) {

    /* Header */

    header nav {
        min-width: auto;
    }

    header nav ul.connected_nav .links {
        display: flex;
        align-items: center;
        justify-content: center;
        position: fixed;
        bottom: 0;
        left: 0;
        width: 100%;
        background-color: white;
        padding: 24px 0;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    }

    header nav ul.connected_nav .sublinks .explore_link {
        display: block;
    }

    header .profile_picture .profile_options img {
        display: none;
    }

    header .profile_picture .profile_options {
        width: max(300px, 100%);
    }

    header .profile_picture .top-profile_options .top-profile_dashboard-redirect {
        grid-template-columns: 1fr;
    }

    .site_footer {
        margin-bottom: 85px;
    }

    header nav ul {
        gap: 24px;
        font-size: 0.875rem;
    }

    /* Store Page */

    #store_page .store_page_content .store_package_container {
        margin: 32px auto;
        width: min(500px, 90%);
        min-width: auto;
    }

    #store_page .store_page_content .store_package_container .buttons_container {
        flex-flow: column;
        gap: 8px;
    }

    .review-carousel {
        margin: 1rem auto 0;
    }

    /* Order Place */

    #place-order .section_container .order-placeholder {
        flex-flow: column;
        position: relative;
    }

    #place-order .section_container .order-placeholder img {
        width: 100%;
        object-fit: cover;
        object-position: center;
        max-width: none;
        aspect-ratio: 6 / 2;
    }

    #place-order .section_container .top_order-details .price {
        position: absolute;
        top: 6px;
        right: 6px;
        background-color: var(--blue-color);
        color: white;
        padding: 6px 12px;
        border-radius: 6px;
        box-shadow: 0 0 8px var(--blue-color);
    }

    #place-order .section_container .order-categories {
        display: -webkit-box;
        -webkit-line-clamp: 1;
        /* nombre de lignes max */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Hero Page */

    #hero .text_content p {
        font-size: 1rem;
    }

    #hero .buttons {
        flex-flow: column;
        align-items: flex-start;
        gap: 10px;
    }

    #hero .buttons .button:nth-of-type(2) {
        background-color: white;
        color: var(--blue-color);
        border: 2px solid var(--blue-color);
    }

    #hero .text_content h1 {
        font-size: 32px;
    }

    #hero .buttons .button {
        padding: 12px 24px;
        font-size: 0.875rem;
        border-radius: 8px;
    }

    /* Create Store */

    .create_new_store .create_new_store_form .input {
        grid-template-columns: 1fr;
        gap: 4px;
    }

    .create_new_store .create_new_store_form fieldset {
        gap: 24px;
    }

    .store_details .checkbox_list .checkbox_item {
        grid-template-columns: 1fr;
        align-items: flex-start;
        margin-bottom: 20px;
    }

    .store_details .checkbox_list .checkbox_item .checkbox_container {
        width: fit-content;
    }

    .create_new_store-form_progress ol li a {
        font-size: 0.875rem;
    }

    .store_details table.pricing_table {
        display: flex;
        flex-direction: column;
        width: 100%;
        border: none;
        border-collapse: collapse;
    }

    .store_details table.pricing_table tr {
        display: block;
        width: 100%;
    }

    .store_details table.pricing_table textarea {
        display: block;
        max-width: 90%;
        margin: 10px auto;
        padding: 0;
    }

    .store_details table.pricing_table select#delivery_time {
        margin: 16px 30px 16px 0;
    }

    .store_details table.pricing_table td.pricing_tile {
        border: 1px solid black;
    }

    .store_details table.pricing_table td,
    .store_details table.pricing_table th {
        display: block;
        width: 100%;
    }

    /* Earning */

    #earnings .stats {
        display: flex;
        flex-flow: column;
    }

    .referrals-table {
        margin-top: 16px;
    }

    .referrals-table thead {
        display: none;
        /* cache les en-têtes */
    }

    .referrals-table,
    .referrals-table tbody,
    .referrals-table tr,
    .referrals-table td {
        display: block;
        width: 100%;
    }

    .referrals-table tr {
        margin-bottom: 16px;
        border-radius: 8px;
        box-shadow: 0 4px 10px rgba(59, 130, 246, 0.08);
    }

    .referrals-table td {
        text-align: left !important;
        padding: 12px 16px;
        border: none;
        border-bottom: 1px solid #f1f5f9;

        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .referrals-table td:last-child {
        border-bottom: none;
    }

    /* Ajoute le label via ::before */
    .referrals-table td:nth-of-type(1)::before {
        content: "Referral nickname";
        font-weight: bold;
        color: var(--blue-color);
        display: block;
    }

    .referrals-table td:nth-of-type(2)::before {
        content: "Total earned";
        font-weight: bold;
        color: var(--blue-color);
        display: block;
    }

    .referrals-table td:nth-of-type(3)::before {
        content: "Earned from Their Purchases";
        font-weight: bold;
        color: var(--blue-color);
        display: block;
    }

    .referrals-table td:nth-of-type(4)::before {
        content: "Earned from Their Sales";
        font-weight: bold;
        color: var(--blue-color);
        display: block;
    }

    /* Order */

    .my-orders .order-placeholder {
        position: relative;
    }

    .my-orders .order-placeholder .order-reference {
        color: #fdfdfd;
        text-shadow: 0px 0px 5px #000000;
    }

    .my-orders .order-placeholder .order-right {
        position: absolute;
        top: 12px;
        right: 12px;
    }

    .my-orders .order-placeholder .bottom_order-details {
        align-items: flex-start;
        flex-flow: column;
        gap: 10px;
    }

    .my-orders .order-placeholder .bottom_order-details .buttons_container,
    .my-orders .order-placeholder .top_order-details {
        font-size: 0.675rem;
    }

    .my-orders .order-placeholder .bottom_order-details .order-timer {
        align-self: flex-end;
    }

    /* ORder details */
    #order-details .order-top_heading {
        align-items: flex-start;
        flex-flow: column;
        gap: 16px;
    }

    #order-details .heading {
        flex-flow: column;
        align-items: flex-start;
    }

    /* User Profile */

    .contact-profile-container {
        width: 100%;
    }

    #user_profile .contact-box {
        flex-flow: column;
        gap: 16px;
        width: 100%;
        min-width: auto;
    }

    #user_profile .user_profile_content .top_profile-heading {
        flex-flow: column;
        align-items: center;
    }

    #user_profile .user_profile_content .top_profile {
        width: 100%;
    }

    #user_profile .user_profile_content .top_profile-heading .seller_names-container {
        align-items: center;
    }

    #user_profile .user_profile_content .seller_description {
        width: 100%;
    }

    /* User Signup */
    .profile_setting_up .input_line {
        flex-flow: column;
        gap: 20px;
    }

    /* Chat Box */
    #chat_form {
        display: grid;
        grid-template-areas:
            'attachment chatbox'
            'customOffer customOffer';
        grid-template-columns: 1fr 90%;
        grid-template-rows: 1fr 1fr;
    }

    #chat_form #attachment_section {
        grid-area: attachment;
    }

    .chat_box-area .chat_box-form_container {
        grid-area: chatbox
    }

    #chat_form #custom_quote_section {
        grid-area: customOffer;
    }

    /* Referral */
    #referral-program .link_container {
        font-size: 0.75rem;
    }
}

@media screen and (max-width: 500px) {
    header nav ul li:nth-of-type(2) {
        /* display: none; */
    }

    h1 {
        font-size: 1.25rem !important;
    }

    header .profile_picture .profile_options .mobile_options {
        display: block;
    }

    header nav ul.connected_nav .earning-list-item {
        display: none;
    }

    header .profile_picture {
        position: static;
    }

    header .profile_picture .profile_options {
        display: block;
        position: fixed;
        width: min(350px, 95%);
        top: 0;
        right: 0;
        border-radius: 0;
        height: 100vh;
        padding: 32px 16px;
        transform: translateX(100%);
        transition: .4s ease;
    }

    header .profile_picture .profile_options.active {
        transform: translateX(0);
    }

    .search_query_container input {
        min-width: auto;
        font-size: 0.75rem;
    }

    header nav ul.connected_nav .links {
        gap: 12px;
    }

    header nav ul.connected_nav .sublinks {
        gap: 12px;
    }

    /* FAQ */

    .faq_question,
    .faq_answer p {
        font-size: 0.875rem;
    }

    /* Dashboard */

    #dashboard .store_item {
        width: 220px;
    }

    /* Referral */
    .referrals-table td {
        font-size: 0.75rem;
    }

    #referral-program .referral_explanations {
        font-size: 0.875rem;
    }

    #referral-program .link_container {
        display: block;
        /* ou inline-block, selon ton besoin */
        overflow: visible;
        /* pas de masquage */
        text-overflow: unset;
        /* désactive les "..." */
        overflow-x: scroll;
    }

    #referral-program .referral_explanations h2 {
        font-size: 1.25rem;
    }

    /* Orders */
    .my-orders .order-placeholder .bottom_order-details .buttons_container,
    .my-orders .order-placeholder .top_order-details {
        flex-flow: column;
        align-items: flex-start;
    }

    #dashboard .add_store_item .top_container {
        width: 220px;
    }

    .create_new_store-form_progress ol {
        flex-flow: column;
        align-items: flex-start;
    }

    /* Chat */

    #custom_quote_modal .modal-content {
        width: 80%;
    }

    #inbox_container .chat_container .attachments {
        width: 80%;
    }

    .your-message .attachments .attachment-wrapper,
    .recipient-message .attachments .attachment-wrapper {
        width: auto;
    }

    .offer-header {
        flex-flow: column;
    }

    .offer-thumbnail {
        width: 100%;
    }

    .items_list .item,
    .items_list .item .product_title {
        width: 220px;
    }

    .breadcrumbs {
        display: none;
    }

    #inbox_container .chat_container .important_msg svg{
        display: none;
    }

    .chat-box_container .top-chat_container .name_container h3{
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    }

    .earnings-table td .availability_msg{
        display: none;
    }

    .my-orders .filter-box{
        margin-left: auto;
    }
}

@media screen and (max-width: 350px) {
    header .company_name {
        font-size: 20px;
    }

    .profile_setting_up .left_part .img_container .img_placeholder {
        font-size: 0.75rem;
    }

    #store_page .store_page_content .store_package_container{
        margin: 16px 0;
        width: 100%;
    }

}