/* Megrim Font */
@import url('https://fonts.googleapis.com/css2?family=Barlow+Semi+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Megrim&family=Nunito:ital,wght@0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;0,1000;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900;1,1000&display=swap');


/* Import global styles */
@import url('../main.css');

body {
    background-color: var(--color-background-dark);
}

button, a{
    font-family: var(--font-family-base);
    cursor: pointer;
}

/* Profile Card */ /* Profile progress */

.profile-card__image {
    object-fit: cover;
}

.profile-progress__item,
.profile-card__link {
    padding: var(--spacing-sm) var(--spacing-xl);
}

/* Selected navigation profile */
.profile-card__link.active .profile-card__text {
    color: var(--color-primary) !important;
}

.profile-card__link.active .profile-card__icon svg path,
.profile-card__link.active .profile-card__arrow svg path {
    fill: var(--color-primary) !important;
}
.profile-card__link.active .profile-card__indicator {
    background-color: var(--color-primary) !important;
}

/* Profile Card - navigation */
.navigation-phone{
    position: fixed;
    bottom: 15px;
    left: 4%;
    background: var(--color-black);
    box-shadow: 0px -10px 15px 0px rgba(0, 0, 0, 0.60);
    width: 92%;
    height: 65px;
    padding: 10px 20px;
    justify-content: center;
    align-items: center;
    gap: 36px !important;
    border-radius: 6px;
    margin: 0 auto;
    z-index: 3;
}

[data-theme="light"] .navigation-phone {
    box-shadow: 0px -10px 15px 0px rgba(0, 0, 0, 0.20);
}

.profile-card__link-phone.active svg path {
    fill: var(--color-primary) !important;
}

.profile-card__indicator{
    width: 6px;
    height: 2px;
    border-radius: 3px;
}
.profile-card__link-phone.active .profile-card__indicator{
    background: var(--color-primary) !important;
}

/* .profile-progress__item, .profile-card__link {
    padding: 4px;
    width: min-content !important;
    background: transparent !important;
} */

/*  */
.profile-main-container{
    display: flex;
    padding: var(--spacing-5xl) var(--spacing-9xl) !important;
    gap: var(--spacing-5xl); /* 40px */
    width: 100%;
    margin-bottom: 75px; /* 65px(height of nav bar) + 10px (bottom spacing) */
}

@media (min-width: 1921px) {
    .profile-main-container{
        max-width: 1920px;
        margin: 0 auto;
        transition: .6s all;
        width: auto;
    }

    .header::before {
        left: 5%;
        width: 90%;

    }

    .header .banner {
        max-width: 1920px;
        padding: 0;
        margin: 0 auto;
    }

}

/* Section gauche */
.profile-dashboard-overview {
    /* width: 25.32%; */ /* (438 / 1720) * 100% = 25.32% */
    flex: 0 0 25.32%;
    min-width: 330px;
    transition: min-width 0.6s ease;
}

/* Section droite */
.profile-content {
    /* width: 74.106%; */ /* (1282 / 1720) * 100% = 74.42% */
    flex: 1; /* the rest */ /* flex: 0 0 74.106%; */
}

/*  */
.stat-card {
    flex: 1;
    height: 320px;
    transition: height 0.6s ease;
}

.stat-section.highlight-card{
    height: 364px;
}

.stat-card.stat-card-small {
    height: 305px;
}

.stat-card.stat-card-extra-small {
    height: auto;
}

.stat-card__link-icon {
    width: 19px;
    height: 19px;
}

/* Highlight Card - Article */
.article-slider {
    /* flex: 1; */
    width: 50%;
    position: relative;
    overflow: hidden;          /* masque les articles hors‐écran          */
}

.article {
    background-image:
      linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%),
      url('../../assets/img/other/ccv.png');
    background-color: lightgray;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;

    padding-bottom: 18px !important;
}

/* Articles Images */
.article:nth-child(1) {
    background-image:
        linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%),
        url('../../assets/img/other/ccv.png');
}

.article:nth-child(2) {
    background-image:
        linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%),
        url('../../assets/img/other/cccx.png');
}

.article:nth-child(3) {
    background-image:
        linear-gradient(0deg, rgba(0, 0, 0, 0.60) 0%, rgba(0, 0, 0, 0.60) 100%),
        url('../../assets/img/other/Rectangle 1191.png');
}

.article__arrow {
    width: 31px;
    height: 31px;
}

.article__footer {
    gap: 18px;
}

/*  SLIDER WRAPPER - ITEMS   */
.article-slider__item {
    position: absolute;
    inset: 0;                  /* top / right / bottom / left = 0         */
    width: 100%;
    opacity: 0;
    transform: translateX(2rem);
    transition:
      opacity .6s ease,
      transform .6s ease;
    pointer-events: none;      /* cliquer uniquement sur l’item actif     */
}

/* article visible */
.article-slider__item--active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    z-index: 1;
}

  /* animation de sortie vers la gauche */
.article-slider__item--to-left {
    transform: translateX(-2rem);
    opacity: 0;
}

/* animation de sortie vers la droite */
.article-slider__item--to-right {
    transform: translateX(2rem);
    opacity: 0;
}

@media (min-width: 768px) {
    .article-slider__item,
    .article-slider__item--to-left,
    .article-slider__item--to-right {
        transition-duration: .8s;
    }
}

/* Highlight Card - Gift Card */
.gift-card{
    /* flex: 1; */
    width: 50%;
}

.gift-card__badge, .gift-card__countdown {
    font-family: Megrim !important;
    -webkit-text-stroke-width: 0.5px;
    -webkit-text-stroke-color: #909090;
}

.gift-card__gradient {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    height: 100%;
    width: 14.026px;
}

.gift-card__gradient .gift-card__gradient-line {
    width: 100%;
    height: 50%;
    background: linear-gradient(0deg, rgba(77, 77, 77, 1) 0%, rgba(144, 144, 144, 1) 100%);
    border-radius: 0 10px 10px 0;
}

.gift-card__image-wrapper .gift-card__image {
    width: 97.512px;
    height: 80.815px;
    flex-shrink: 0;
}

.gift-card__gallery-icon {
    width: auto;
    height: 30px;
    mix-blend-mode: luminosity;
}

/* Slider Stat-cards */
.slider-container .slider {
    /* transform: none !important; */
    transition: transform 0.5s ease-in-out; /* Smooth sliding */
}

.btn-slide {
    width: 6px;
    height: 6px;
    border-radius: 3px;
    background: var(--color-accent); /* default */
    cursor: pointer;
    transition: 0.5s;
}

.btn-slide.active {
    width: 16px;
    background: var(--color-primary);
}



/* Left section in middle of dashboard */
.stat-card-extra-small{
    flex: 0 0 32.8%;
}

/* Right section in middle of dashboard */
.invitation-list,
.artwork-display {
    /* flex: 0 0 67.2%; */
    flex: 1; /* take the rest */
}

/* Invitation Card */
.profile-img_invitation{
    object-fit: cover;
    flex-shrink: 0;
}

/* Artwork Card */
.artwork-card{
    padding: var(--spacing-xl) var(--spacing-3xl);
}

.artwork-card__content-alt{
    min-width: 230px;
}
.artwork-card__content-alt h3{
    min-width: 200px;
}

.artwork-card__image{
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    flex-shrink: 0; /* Prevent the image from shrinking */
}

.artwork-card__title.modal-trigger{
    cursor: pointer;
}

/* Minimum Width Utility */
.date,
.size,
.price{
    min-width: 100px;
}

.price {
    min-width: 78px;
}

.artwork-card__status-container{
    min-width: 150px;
}

.artwork-card__status{
    gap: 70px;
}

.artwork-card__status-label{
    height: 26px;
    padding: 0 20px;
}

.artwork-card__status-icon{
    width: 32px;
    height: 32px;
    flex-shrink: 0; /* Prevent the image from shrinking */
}
.artwork-card__status-icon.modal-trigger{
    cursor: pointer;
}

.line-stroke {
    width: 95.32%;
    height: 1px;
    background: var(--color-accent);
}

/* Main container for artworks */
.artwork-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: var(--spacing-xl); /* Gap between artworks *//* 20px */
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .artwork-container {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    }
}

/* Individual artwork item */
.artwork-item {
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    aspect-ratio: 1 / 1;
    transition: transform 0.3s ease-in-out;
}

/* Image styling */
.artwork-item img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
    object-fit: cover;
}

/* hover effect cards */
.overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.4);
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
}

.artwork-item:hover .overlay {
    opacity: 1;
}

.overlay svg{
    width: 18.341px;
    height: auto;
}

/* Filter Button */
.filter-button {
    background: var(--color-secondary);
    width: 137px;
    height: 50px;
    padding: var(--spacing-md) var(--spacing-xl);
    border: none;
    outline: none;
}

.filter-button.active{
    background-color: var(--color-primary);
}
.filter-button.active span{
    color: var(--color-secondary-alt) !important;
}

/* Filter Dropdown */
.filter-options {
    position: absolute;
    top: calc(100% + 10px); /* Adjust based on your design */
    right: 0;
    width: 380px; /* Adjust as needed */
    box-shadow: 0px 0px 30px rgba(0, 0, 0, 0.3);
    z-index: 9999 !important;
}

/* Filter Buttons */
.filter-apply, .filter-reset{
    flex: 1;
}

.filter-reset{
    background: var(--color-deep-sapphire-blue);
}

/* Search Input */
.search-bar{
    width: 400px;
    /* width: 100%; */
    transition: flex 0.3s ease;
}

.search-bar__icon{
    position: absolute;
    content: '';
    left: 20px;
}

.search-bar__input{
    min-width: 260px; /* For the transition be smooth */
    padding: 10px 20px 10px calc(20px + 22px + 10px); /* for the position of icon */
}

.search-bar:has(.search-bar__input:focus) {
    flex: 1;
}

.feedback-modal-content {
    width: 1190px;
}

.modal .btn-submit {
    padding: 10px 20px;
}

.modal .form-control_textarea{
    height: 214px;
}

.modal .file-upload{
    padding: 16px;
    border: 1px solid var(--color-accent);
}
.modal .file-icon{
    width: 19px;
    height: 19px;
}

/* empty-state card */
.empty-state{
    padding: 90px 140px;
}

/* Share Modal,  */
.manage-collection-modal__input,
.share-modal__input{
    padding: 10px 20px;
    border: 1px solid var(--color-accent);
}

/* General textarea styling */
.form-textarea-coll-desc {
    height: 180px;
    padding: 10px 20px;
    border: 1px solid var(--color-accent);
    resize: none;
    /* overflow: hidden; */
}

/* Wrap container for scrollbar */
.scrollbar-container {
    position: relative;
    overflow: auto; /* Enable scrolling */
    border-radius: 6px;
}

/* Card */
.card-section__cards {
    overflow-x: auto;
    scrollbar-color: auto;
    cursor: grab;
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.card-section__cards * {
    user-select: none;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
}

.card-section__cards:active {
    cursor: grabbing;
}

.card-section__cards.dragging {
    cursor: grabbing;
    user-select: none;
}

.card-section__cards.dragging .card-section__bank-card {
    pointer-events: none;
}

.card-section__cards.dragging .card-section__add-card {
    pointer-events: none;
}

/* For Chrome, Edge, Safari */
.card-section__cards::-webkit-scrollbar {
    height: 2px;            /* horizontal scrollbar height */
}

.card-section__cards::-webkit-scrollbar-thumb {
    background: #016BFF;
    border-radius: 1px;
}

.card-section__cards::-webkit-scrollbar-track {
    background: #22293A;
    border-radius: 1px;
}

.card-section__add-card, .card-section__bank-card {
    width: 312px;
    height: 195px;
    flex-shrink: 0;
}

.card-section__plus-icon-svg {
    width: 46px;
    height: 46px;
}

.card-section__add-card {
    background-color: var(--color-deep-sapphire-blue);
    border: 1px dashed var(--color-primary);
}

.card-section__bank-card.visa-card {
    background-color: #033C8A;
}

.card-section__bank-card.master-card {
    background-color: #353535;
}

.card-section__bank-card {
    display: grid;
    grid-template-rows: 22px 1fr 47px;
    grid-template-columns: 1fr 1fr 70px;
    grid-template-areas:
        "top top top"
        ". . ."
        "left . right";
}

.card-section__owner {
    grid-area: top;
}

.card-section__details {
    grid-area: left;
}

.card-section__bank-symbol {
    grid-area: right;
}

.card-section__hidden-digits {
    width: 158px;
    height: 12px;
    border-radius: 10px;
    flex-shrink: 0;
    background-color: var(--color-secondary-alt);
}

.card-section__bank-symbol {
    margin-bottom: 3px;
    justify-content: right;
}

.card-section__bank-card.visa-card .card-section__bank-symbol .card-section__bank-icon {
    width: 70px;
    height: 22px;
}

.card-section__bank-card.master-card .card-section__bank-symbol .card-section__bank-icon {
    width: 28px;
    height: 22px;
}

.card-section__drop {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: 1;
    content: "";
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.50);
    opacity: 0; /* Element is hidden at the start */
    transition: opacity 0.3s; /* Smooth transition */
}

.card-section__bank-card:hover .card-section__drop {
    opacity: 1; /* On hover */
}

.card-section__drop-btn {
    width: 100%;
    margin: 0 var(--spacing-xl);
}

.card-section__separator .card-section__line {
    height: 1px;
}

/* Guide */
.article-section__item {
    width: 100%;
    height: 360px;
    border-radius: var(--border-radius-md);
    padding: 18px var(--spacing-3xl);

    background-image:
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
        url('../../assets/img/other/ccv.png');
        background-color: lightgray;
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;

    display: flex;
    flex-direction: column;
    align-items: start;
    justify-content: end;
    gap: var(--spacing-3xl);
}

/* images in guide */
.article-section__item:nth-child(1) {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
        url('../../assets/img/other/ccv.png');
}

.article-section__item:nth-child(2) {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
        url('../../assets/img/other/cccx.png');
}

.article-section__item:nth-child(3) {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
        url('../../assets/img/other/s.png');
}

.article-section__item:nth-child(4) {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
        url('../../assets/img/other/Rectangle 1191.png');
}

.article-section__item:nth-child(5) {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
        url('../../assets/img/other/sds.png');
}

.article-section__item:nth-child(6) {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
        url('../../assets/img/other/fd.png');
}

.article-section__item:nth-child(7) {
    background-image:
        linear-gradient(rgba(0, 0, 0, 0.60), rgba(0, 0, 0, 0.60)),
        url('../../assets/img/other/b.png');
}


.article-section__title {
    width: 86%;
}

.article-section__text {
    width: 80%;
}

.article-section__footer {
    gap: 18px;
}

.article-section__separator .article-section__line {
    height: 1px;
    background-color: var(--color-support-alt);
    border-radius: 2px;
}

.article-section__icon {
    width: 14px;
    height: 14px;
}

/* Address */
.address-section {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
}
.address-section__details, .address-section__add-btn {
    aspect-ratio: 1 / 1;
}

.address-section {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
}

.address-section__add-btn {
    background-color: var(--color-deep-sapphire-blue);
    border: 1px dashed var(--color-primary);
}

.address-section__symbol {
    width: 12px;
    height: 6px;
}

/* Profiles followed */
.profile-section__filters {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
    gap: var(--spacing-xl);
}

.profile-section__filters .select-selected {
    border-color: transparent;
}

.profile-section__search input{
    border-color: transparent;
}

.profile-section__background {
    width: 100%;
    aspect-ratio: 1 / 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    border-radius: 6px;
}

.profile-section__card:nth-child(1) .profile-section__background,
.profile-section__card:nth-child(4) .profile-section__background {
    background-image: url('../../assets/img/artworks/gravure/cc (20).jpg');
}

.profile-section__card:nth-child(2) .profile-section__background,
.profile-section__card:nth-child(5) .profile-section__background {
    background-image: url('../../assets/img/artworks/painting/Sans nom - 1.jpg');
}

.profile-section__card:nth-child(3) .profile-section__background,
.profile-section__card:nth-child(6) .profile-section__background {
    background-image: url('../../assets/img/artist profiles/Placeholder.jpg');
}

.profile-section__image {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: lightgray;
    background-position: 50%;
    background-size: cover;
    background-repeat: no-repeat;
    margin-top: -70px;
}

.profile-section__card:nth-child(1) .profile-section__image,
.profile-section__card:nth-child(4) .profile-section__image {
    background-image: url('../../assets/img/artist profiles/Rectangle 907.png');
}

.profile-section__card:nth-child(2) .profile-section__image,
.profile-section__card:nth-child(5) .profile-section__image {
    background-image: url('../../assets/img/artist profiles/cx (2).jpg');
}

.profile-section__card:nth-child(3) .profile-section__image,
.profile-section__card:nth-child(6) .profile-section__image {
    background-image: url('../../assets/img/artist profiles/sd.jpg');
}

.profile-section__grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* Creates 3 columns of equal width */
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: var(--spacing-xl);
}


/* Custom Scrollbar Styles */
.scrollbar-container::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 6px;
    background-color: transparent;
    right: 10px;
    margin-right: 10px;
    padding-right: 10px;
}

.scrollbar-container::-webkit-scrollbar {
    width: 4px;
    background-color: transparent;
    right: 10px;
    margin-right: 10px;
    padding-right: 10px;
}

.scrollbar-container::-webkit-scrollbar-thumb {
    border-radius: 6px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    background: var(--color-accent);
    right: 10px;
    margin-right: 10px;
    padding-right: 10px;
}

/* Responsive styling for Pc devices */ /* (min-width: 1079px) and (max-width: 1920px) */

@media (max-width: 1370px) {

    .feedback-modal-content{
        width: 100%;
        margin: 0 78px;
    }

    .artwork-card__status {
        gap: 15px;
    }

    /* Adjust artwork card title */
    .artwork-card__content-alt h3 {
        max-width: 150px;
        min-width: auto;
    }

    /* Message Cards */
    .empty-state {
        padding: 90px;
    }

}

@media (max-width: 1300px) {

    .size, .date {
        display: none;
    }

    .toolbar .search-bar {
        width: 50%;
    }

}

@media (max-width: 1160px) {

    .profile-dashboard-overview {
        min-width: 266px;
    }

    /* Message Cards */
    .empty-state {
        padding: 50px;
    }

    /* footer */
    .footer__content{
        justify-content: center !important;
    }

    .footer__copyright{
        display: none !important;
    }
}

/* Responsive styling for Tablet devices */ /* (min-width: 768px) and (max-width: 1080px) */

@media (max-width: 1080px) {

    .profile-main-container{
        flex-direction: column;
    }

    /* Profile Card */
    .profile-card__links {
        flex-direction: row !important;

    }

    a.profile-card__link {
        justify-content: center !important;
        height: auto !important;
    }

    .profile-card__link-content {
        flex-direction: column;
    }

    .profile-card__arrow{
        display: none !important;
    }

    .profile-card__text{
        text-align: center;
    }

    .profile-progress {
        display: none !important;
    }

    .date {
        display: block;
    }

}

@media (max-width: 800px) {

    .profile-main-container {
        /* gap: var(--spacing-3xl); *//* 30px */
    }

    .artwork-card__status .artwork-card__status-label{
        display: none !important;
    }

    .stat-card {
        height: 260px;
        transition: .6s all;
    }

    .stat-card.stat-card-extra-small {
        flex: 0.4;
    }

    .date {
        display: none;
    }

}

/* Responsive styling for mobilee devices */ /* (max-width: 752px) */
@media (max-width: 752px) {
}

@media (max-width: 700px) {

    .profile-dashboard-overview,
    .profile-card{
        display: none !important;
    }
    .navigation-phone{
        display: flex !important;
    }

    .profile-main-container {
        padding: 0 20px 0 !important;
    }

    .stat-section.middle {
        flex-direction: column;
    }
    .stat-section.middle .stat-card.stat-card-extra-small {
        height: 178px;
        flex: auto;
    }

    /* Stat Card */
    .slider-container {
        margin-bottom: 10px;
    }

    .slider-container .slide {
        width: 370px !important;
        flex-shrink: 0;
    }

    .slider-controls {
        display: flex !important;
        bottom: -14px;
        gap: 6px;
    }

    .stat-card {
        flex: auto;
    }

    .slide-row {
        width: 100%;
        height: 100%;
        overflow: hidden;
        /* border-radius: 10px; */
    }

    /* Message Cards */
    .empty-state {
        padding: 40px;
    }

    /*  */
    .stat-section.highlight-card {
        height: auto;
        flex-direction: column;
    }

    .article-slider,
    .gift-card {
        width: 100%;
        height: 300px;
    }

}

@media (max-width: 600px) {

    .toolbar .search-bar {
        width: 100%;
    }

    .search-bar__input {
        min-width: auto;
        display: none;
    }

    .toolbar .search-bar__icon {
        width: 43px !important;
        height: 43px !important;
        background: var(--color-secondary);
        justify-content: center !important;
        border-radius: 6px;
        cursor: pointer;
        left: 0;
    }

    .search-bar__input.active {
        display: block !important;
        width: 100%;

        padding-left: 50px; /* Adjust for icon space */
    }

    .layout-filter-container.hidden {
        display: none !important;
    }

    /* When both input and filter container are visible */
    .search-bar.has-text {
        flex: 1;
        width: 100%; /* Adjust based on filter container width */
    }

    .search-bar.has-text .search-bar__input.active {
        width: 100%;
    }

    .search-bar:has(.search-bar__input:focus) {
        flex: 1;
    }

    .layout-filter-container{
        justify-content: end;
    }

    .date, .size, .price{
        display: none;
    }

    .toolbar > div:last-child{
        justify-content: space-between !important;
    }

    .artwork-card__content-alt h3{
        max-width: max-content;
    }

    .filter-options{
        width: calc(100% * 2.5);
    }
    .filter-button {
        width: 100px;
    }

    .artwork-card__status-container {
        min-width: 109px;
    }

    /* Profile Section Filters - Mobile Layout */
    .profile-section__filters {
        grid-template-columns: 1fr;
        grid-template-rows: auto auto;
    }

    .profile-section__filters .profile-section__search {
        order: -1; /* Move search to first line */
        grid-column: 1 / -1;
    }

    .profile-section__filters .custom-select {
        flex: 1;
    }

    .profile-section__filters .custom-select:first-child,
    .profile-section__filters .custom-select:nth-child(2) {
        width: 100%;
    }

    .profile-section__filters .profile-section__search .input {
        padding: 10px 16px 10px calc(16px + 22px + 10px); /* for the position of icon */
    }
    .profile-section__filters .profile-section__search .icon {
        left: 16px;
        top: 12px;
        right: auto;
    }

}

@media (max-width: 485px) {

    .slider-container .slide{
        width: 280px !important;
        height: 200px;
    }

    .stat-card.stat-card-small{
        height: 178px;
    }

    .artwork-container {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    }

    /* 1st artwork item spans full width */
    .artwork-container.filled-dashboard .artwork-item:first-child {
        grid-column: 1 / -1;
        height: 178px;
        aspect-ratio: unset;
    }

    /* Status Card */
    .overlay span{
        width: 30px !important;
        height: 30px !important;
    }
    .overlay svg {
        width: 15px;
    }

    /* full with for navigation */
    .navigation-phone{
        width: 100%;
        left: 0;
        bottom: 0;
        box-shadow: 0px -10px 50px 0px rgba(0, 0, 0, 0.30);
        border-radius: 0;
    }

    /* artwork card image sizes */
    .artwork-card__image {
        width: 40px;
        height: 40px;
    }

    .artwork-card__status-icon {
        width: 26px;
        height: 26px;
    }
    .artwork-card__status-icon svg{
        width: 10.705px;
    }


    /* Calender */
    .artwork-card .artwork-card__status-container {
        display: none;
    }

    /* Message Cards */
    .empty-state {
        padding: 50px 20px;

        /* spaicing between elements */
        gap: 10px !important;
        display: flex;
        flex-direction: column;
    }

}

/* "La premi.." */
@media screen and (max-width: 1300px) and (min-width: 700px) {
    .artwork-card__title {
      max-width: 140px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      display: inline-block;
    }
}