/* /Pages/Buyers/ProductDetails.razor.rz.scp.css */
.image-gallery-container[b-euvjoptvft] {
    --thumb-size: 90px;
    --thumb-gap: 10px;
    --thumb-padding: 10px;
    /* (7 * thumb-size) + (6 * gap) + (2 * padding) */
    --gallery-width: calc((7 * var(--thumb-size)) + (6 * var(--thumb-gap)) + (2 * var(--thumb-padding)));
    
    width: min(100%, var(--gallery-width));
    margin: 0 auto; /* Center it within the md=6 card if it's smaller */
}

.main-image-frame[b-euvjoptvft] {
    width: 100%;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.main-image[b-euvjoptvft] {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

[b-euvjoptvft] .main-image {
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    display: block;
}

.thumb-strip[b-euvjoptvft] {
    display: flex;
    gap: var(--thumb-gap);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x proximity;
    scrollbar-width: thin;
    padding: var(--thumb-padding);
    justify-content: flex-start;
}

.thumb-strip[b-euvjoptvft]::-webkit-scrollbar {
    height: 6px;
}

.thumb-strip[b-euvjoptvft]::-webkit-scrollbar-thumb {
    background-color: rgba(0, 0, 0, 0.25);
    border-radius: 3px;
}

/* punch through MudImage's internal markup */
[b-euvjoptvft] .thumb {
    width: var(--thumb-size);
    height: var(--thumb-size);
    flex: 0 0 auto;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden; /* ensures the image is clipped to rounded corners */
    scroll-snap-align: start;
}

[b-euvjoptvft] .thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

[b-euvjoptvft] .thumb.selected {
    outline: 2px solid var(--mud-palette-primary);
    outline-offset: 2px;
}
/* /Pages/Sellers/DesignSteps/AddEditCncEngravedTextAndImageStepModal.razor.rz.scp.css */
.flex-container-feature[b-tiekwjng95] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.flex-container-feature > button[b-tiekwjng95], .right-buttons > button[b-tiekwjng95] {
    flex: 1; /* Makes buttons expand equally */
}

.flex-spacer[b-tiekwjng95] {
    flex-grow: 1;
}

.right-buttons[b-tiekwjng95] {
    display: flex;
    gap: 10px; /* Adjust the gap between buttons as needed */
    flex: 1 1 auto;
}

.custom-grid[b-tiekwjng95] {
    padding: 0 !important;
    margin: 0 !important;
}

.custom-item[b-tiekwjng95] {
    padding: 2px !important; /* Adjust padding as needed */
    margin: 2px !important;
}

/* Make the dialog container occupy full height */
.dialog-content-container[b-tiekwjng95] {
    display: flex;
    flex-direction: column;
    height: calc(100vh - 150px);
}

/* Ensure the main grid takes full height within the dialog */
.main-grid[b-tiekwjng95] {
    flex: 1;
    display: flex;
    overflow-y: hidden;
}

/* Left column scrollable with full height */
.left-column[b-tiekwjng95] {
    height: 100%;
    overflow-y: auto; /* Enables vertical scrolling */
    padding-right: 10px;
}

/* Right column scrollable */
.right-column[b-tiekwjng95] {
    height: 100%;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Adjust buttons to be at the bottom */
.dialog-actions-container[b-tiekwjng95] {
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    position: sticky;
    bottom: 0;
    padding: 10px 0; /* Adjust padding as needed */
    background-color: white; /* Add background for visibility */
}

/* Highlight the selected row automatically via the Table's built-in selection */
[b-tiekwjng95] .selected {
    background-color: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-text-primary) !important;
}
/* /Pages/Sellers/DesignSteps/AddEditColoredTextAndImageStepModal.razor.rz.scp.css */
.flex-container-feature[b-pxzxnmrulh] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.flex-container-feature > button[b-pxzxnmrulh], .right-buttons > button[b-pxzxnmrulh] {
    flex: 1;
}

.flex-spacer[b-pxzxnmrulh] {
    flex-grow: 1;
}

.right-buttons[b-pxzxnmrulh] {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
}

.dialog-actions-container[b-pxzxnmrulh] {
    width: 100%;
    position: sticky;
    bottom: 0;
    background-color: white;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Highlight the selected row similarly to AddEditCncEngravedTextAndImageStepModal */
[b-pxzxnmrulh] .selected {
    background-color: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-text-primary) !important;
}
/* /Pages/Sellers/DesignSteps/AddEditGenericStepModal.razor.rz.scp.css */
.flex-container-feature[b-xnrlpkksot] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.flex-container-feature > button[b-xnrlpkksot], .right-buttons > button[b-xnrlpkksot] {
    flex: 1;
}

.flex-spacer[b-xnrlpkksot] {
    flex-grow: 1;
}

.right-buttons[b-xnrlpkksot] {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
}

.dialog-actions-container[b-xnrlpkksot] {
    width: 100%;
    position: sticky;
    bottom: 0;
    background-color: white;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Highlight the selected row similarly to AddEditCncEngravedTextAndImageStepModal */
[b-xnrlpkksot] .selected {
    background-color: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-text-primary) !important;
}
/* /Pages/Sellers/DesignSteps/AddEditMarquetryAndInlaysStepModal.razor.rz.scp.css */
.flex-container-feature[b-67mow18szo] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.flex-container-feature > button[b-67mow18szo], .right-buttons > button[b-67mow18szo] {
    flex: 1;
}

.flex-spacer[b-67mow18szo] {
    flex-grow: 1;
}

.right-buttons[b-67mow18szo] {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
}

.dialog-actions-container[b-67mow18szo] {
    width: 100%;
    position: sticky;
    bottom: 0;
    background-color: white;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Highlight the selected row similarly to AddEditCncEngravedTextAndImageStepModal */
[b-67mow18szo] .selected {
    background-color: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-text-primary) !important;
}
/* /Pages/Sellers/DesignSteps/AddLaserEngravedTextAndImageStepModal.razor.rz.scp.css */
.flex-container-feature[b-fqdcl24oth] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.flex-container-feature > button[b-fqdcl24oth], .right-buttons > button[b-fqdcl24oth] {
    flex: 1;
}

.flex-spacer[b-fqdcl24oth] {
    flex-grow: 1;
}

.right-buttons[b-fqdcl24oth] {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
}

.dialog-actions-container[b-fqdcl24oth] {
    width: 100%;
    position: sticky;
    bottom: 0;
    background-color: white;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}

/* Highlight the selected row similarly to AddEditCncEngravedTextAndImageStepModal */
[b-fqdcl24oth] .selected {
    background-color: var(--mud-palette-secondary) !important;
    color: var(--mud-palette-text-primary) !important;
}
/* /Pages/Sellers/DesignSteps/DesignDetailStepModal.razor.rz.scp.css */
[b-73nrzvej7q] .svg-editor {
    border: 1px solid ghostwhite;
}
/* /Pages/Sellers/Home.razor.rz.scp.css */
.card-style[b-17ukr3wuhn] {
    border-radius: 20px;
}

.card-style-1[b-17ukr3wuhn] {
    /*background-image: url(/images/grocery/1.jpg);*/
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 20px;
}

.card-style-2[b-17ukr3wuhn] {
    background-image: url(/images/grocery/2.jpg);
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 20px;
}

.card-style-3[b-17ukr3wuhn] {
    background-image: url(/images/grocery/3.jpg);
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 20px;
}

.card-style-4[b-17ukr3wuhn] {
    background-image: url(/images/grocery/4.jpg);
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 20px;
}

.card-style-5[b-17ukr3wuhn] {
    background-image: url(/images/grocery/5.jpg);
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 20px;
}

.card-style-6[b-17ukr3wuhn] {
    background-image: url(/images/grocery/6.jpg);
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 20px;
}

.card-style-7[b-17ukr3wuhn] {
    background-image: url(/images/grocery/7.jpg);
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 20px;
}

.card-style-8[b-17ukr3wuhn] {
    background-image: url(/images/grocery/8.jpg);
    background-size: cover !important;
    background-position: center center !important;
    border-radius: 20px;
}

.card-hero[b-17ukr3wuhn] {
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 100%;
}
/* /Pages/Sellers/Listings/AddEditProductListingModal.razor.rz.scp.css */
.flex-container[b-n16jlfvr5a] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.flex-container > button[b-n16jlfvr5a], .right-buttons > button[b-n16jlfvr5a] {
    flex: 1; /* Makes buttons expand equally */
}

.flex-spacer[b-n16jlfvr5a] {
    flex-grow: 1;
}

.right-buttons[b-n16jlfvr5a] {
    display: flex;
    gap: 10px; /* Adjust the gap between buttons as needed */
    flex: 1 1 auto;
}

.status-disabled[b-n16jlfvr5a] {
    pointer-events: none; /* Prevent clicking */
    opacity: 0.5; /* Visual indication of being disabled */
}
/* /Pages/Sellers/Products/AddEditCustomProductModal.razor.rz.scp.css */
.flex-container[b-l0na7f52jy] {
    display: flex;
    align-items: stretch;
    width: 100%;
}

.flex-container > button[b-l0na7f52jy],
.right-buttons > button[b-l0na7f52jy] {
    flex: 1;
}

.flex-spacer[b-l0na7f52jy] {
    flex-grow: 1;
}

.right-buttons[b-l0na7f52jy] {
    display: flex;
    gap: 10px;
    flex: 1 1 auto;
}

.dialog-content-container[b-l0na7f52jy] {
    max-height: calc(100vh - 170px);
    overflow-y: auto;
}

.dialog-actions-container[b-l0na7f52jy] {
    width: 100%;
    position: sticky;
    bottom: 0;
    background-color: white;
    padding-top: 10px;
    border-top: 1px solid rgba(0, 0, 0, 0.12);
}
/* /Shared/CookieBanner.razor.rz.scp.css */
.cc-cookie-banner[b-74mabdeedm] {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 9999;
    background: #fff;
    border-top: 1px solid #e0e0e0;
    box-shadow: 0 -2px 16px rgba(0, 0, 0, .10);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .875rem 1rem;
}

.cc-inner[b-74mabdeedm] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    max-width: 960px;
    width: 100%;
    flex-wrap: wrap;
}

.cc-text[b-74mabdeedm] {
    margin: 0;
    font-size: .875rem;
    color: #333;
    flex: 1 1 auto;
}

.cc-link[b-74mabdeedm] {
    color: #c0392b;
    text-decoration: underline;
    margin-left: .25rem;
}

.cc-buttons[b-74mabdeedm] {
    display: flex;
    gap: .75rem;
    flex-shrink: 0;
}

.cc-btn[b-74mabdeedm] {
    padding: .45rem 1.1rem;
    border-radius: 6px;
    font-size: .875rem;
    font-weight: 500;
    cursor: pointer;
    border: none;
    white-space: nowrap;
}

.cc-btn-primary[b-74mabdeedm] {
    background: #c0392b;
    color: #fff;
}

.cc-btn-primary:hover[b-74mabdeedm] {
    background: #a93226;
}

.cc-btn-outline[b-74mabdeedm] {
    background: transparent;
    border: 1px solid #bbb;
    color: #444;
}

.cc-btn-outline:hover[b-74mabdeedm] {
    background: #f5f5f5;
}

@media (max-width: 600px) {
    .cc-inner[b-74mabdeedm] {
        flex-direction: column;
        align-items: flex-start;
    }

    .cc-buttons[b-74mabdeedm] {
        width: 100%;
    }

    .cc-btn[b-74mabdeedm] {
        flex: 1;
        text-align: center;
    }
}
