:root {
    --primary-purple: #5B3DF5;
    --bg-light: #f8f9fa;
    --text-color: #1F1F1F;
    --bs-secondary-color: #6B7280;
    --sidebar-width: 100px;
    --placeholdercolor: currentColor;
    --headingFont: 'Satoshi', sans-serif;
    --bodyFont: 'Satoshi', sans-serif ;
    --main-font-size: 14px;
    --secondary-font-size: 12px;


}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    /* will-change: auto; */
}

body {
    margin: 0;
    padding: 0;
    font-family: var(--bodyFont);
    font-weight: normal;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    background-color: var(--bg-light);
    background-image: url(images/dotted-pattern-bg-img.png);
    color: var(--text-color);
}

h1,
h2,
h3,
h4,
h5,
h6{color: var(--text-color);}

p,
li,
ul,
ol,
blockquote {
    font-family: var(--bodyFont);
    font-weight: normal;
    margin: 0 0 10px 0;
    padding: 0;
    color: var(--bs-secondary-color);
}

p:empty {
    display: none;
}

ul,
li {
    list-style: none;
}

a:visited {
    color: inherit;
}

a:hover, a {
    text-decoration: none;
}

a:focus {
    outline: 0 !important;
}

iframe,
img {
    max-width: 100%;
    border: none;
    vertical-align: middle;
}


input,
textarea,
select,
option,
button,
fieldset,
legend,
datalist,
output,
progress,
meter {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 500;
    /* color: #6B7280;
    background-color: #fff;
    border: 1px solid #E5E7EB;
    padding: 10px 12px;
    line-height: 20px;
    border-radius: 12px; */
}

input, textarea, select, option, fieldset, legend, datalist, output, progress, meter {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 500;
    color: #6B7280;
    background-color: #fff;
    border: 1px solid #E5E7EB;
    padding: 10px 12px;
    line-height: 20px;
    border-radius: 12px;
}

select{
    -webkit-appearance: none;
    appearance: none;
    background-image: url(images/down-arrow-icon.png);
    background-repeat: no-repeat;
    background-position: right 10px center;
}

button{
    border: none;
    background-color: transparent;
}

input:focus,
textarea:focus,
select:focus,
option:focus,
button:focus,
fieldset:focus,
legend:focus,
datalist:focus,
output:focus,
progress:focus,
meter:focus,input:focus{
    box-shadow: none !important;
    outline: none !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"],
input[type="range"],
input[type="file"],
input[type="submit"],
input[type="select"],
input[type="reset"],
input[type="button"] {
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    font-weight: 500;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    cursor: pointer;
    opacity: 0.7;
}

input[type="checkbox"]{
    accent-color: #5B3DF5;
}


.fw-500{ font-weight:500; }
.gap-20{ gap: 20px; }
.mb-20{ margin-bottom: 20px; }
.f-14{font-size: var(--main-font-size);}
.f-12{font-size: var(--secondary-font-size);}
.text-color{color: var(--text-color);}


.btn{
    font-family: 'Satoshi', sans-serif;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0;
    font-weight: 700;
    color: #fff;
    text-transform: capitalize;
    padding: 10px 20px;
    border-radius: 12px;
    background: linear-gradient(90deg, #8B5CF6 0%, #4F46E5 100%);
    border: 1px solid transparent;
}

.btn:hover{
    background: none;
    border-color: #4F46E5;
    color: var(--text-color);
}

.btn-2{
    color: #6B7280; 
    background: #FCFCFC;
    border: 1px solid #E5E7EB;
    font-weight: 500;
    padding: 7px 16px;
    border-radius: 8px;
}

.btn-2:hover, .btn-2.active {
    background: #F3F0FF;
    border-color: var(--primary-purple);
    color: var(--primary-purple);
}

.btn-3{
    color: #FFFFFF; 
    background: #1F2937;
    border: 1px solid #1F2937;
}

.btn-3:hover{
    color: #fff; 
    background: #5B3DF5;
    border-color: #fff;
}


.bi::before{
    font-weight: 700 !important;
}

/* Common Styling Starts Here */

/* Stylings Starts Here */

/* --- Header / Top Nav --- */
.header-nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 70px;
    background: #fff;
    border-bottom: 1px solid #eee;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30px;
    z-index: 1001;
}

.logo-area {
    display: flex;
    align-items: center;
    gap: 10px;
    font-weight: 700;
    color: var(--primary-purple);
    font-size: 1.2rem;
}

.top-nav-right {
    display: flex;
    align-items: center;
    gap: 20px;
}

.top-nav-right > a,
.top-nav-right > button,
.top-nav-right .header-credits-group,
.top-nav-right .user-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Credits + Add Credits — single grouped control (matches studio header) */
.header-credits-group {
    flex-shrink: 0;
}

.header-credits-group .credits-display {
    min-height: 100%;
}

.header-credits-group .btn-add-credits {
    white-space: nowrap;
    cursor: pointer;
}

.support-icon {
    font-size: 0;
    background-image: url(images/headset-icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    background-size: 16px 16px;
    padding: 0;
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    border-radius: 8px;
    border: 1px solid #E5E7EB;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background-color: #FFFFFF;
    box-sizing: border-box;
}

#headerCartLink {
    width: 46px;
    height: 46px;
    min-width: 46px;
    min-height: 46px;
    padding: 0;
    border-radius: 8px;
}

/* Resolution W ⟷ H swap — vertically align with inputs; center icon in control */
.resolution-swap-btn {
    width: 42px;
    height: 42px;
    min-width: 42px;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border-radius: 12px;
    box-sizing: border-box;
}

.resolution-swap-btn i {
    line-height: 1;
    font-size: 1.12rem;
    display: block;
}

.credits-display {
    background: #FFFBF2;
    border: 1px solid #FFF0CC;
    border-right: 0;
    color: var(--text-color);
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
}

.credits-btns{
    font-family: 'Satoshi', sans-serif;
    font-size: 12px;
    font-weight: 700;   
    line-height: 100%;
    letter-spacing: 0%;
    padding: 8px 16px;
}

.btn-add-credits {
    background: linear-gradient(90deg, #F59E0B 0%, #FBBF24 100%);
    color: #1F2937;
    border: none;
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    padding-left: 35px;
    position: relative;
}

.btn-add-credits::before{
    position: absolute;
    content: "";
    background-image: url(images/add-credits-icon.png);
    background-repeat: no-repeat;
    background-position: left center;
    height: 16px;
    width: 16px;
    left: 10px;
    top: 0;
    bottom: 0;
    margin: auto;
}

.user-avatar {
    width: 32px;
    height: 32px;
    background: #E2C4E7;
    font-family: 'Outfit', sans-serif;
    font-weight: 500;
    font-size: 16px;
    line-height: 100%;
    letter-spacing: 0%;
    vertical-align: middle;
    color: #000000;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
}

a.user-avatar:hover {
    color: #000000;
    filter: brightness(0.97);
}

/* --- Sidebar Navigation --- */
.sidebar {
    position: fixed;
    top: 90px;
    left: 20px;
    bottom: 20px;
    width: var(--sidebar-width);
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    padding: 20px;
    z-index: 1000;
    height: fit-content;
}

.sidebar .nav-link {
    color: #374151;
    display: block;
    padding: 0;
    transition: 0.2s ease all;
    text-decoration: none;
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0%;
    position: relative;
    padding-top: 45px;
    text-align: center;
}

.sidebar .nav-link.active, .sidebar .nav-link:hover{
    color: var(--text-color);
}

.sidebar .nav-link::before {
    position: absolute;
    content: "";
    top: 0;
    left: 0;
    right: 0;
    margin: 0 auto;
    background-image: url(images/studio-icon.png);
    background-repeat: no-repeat;
    background-position: center center;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 8px;
}

.sidebar .nav-button {
    width: 100%;
}

.sidebar .nav-bottom {
    width: 100%;
}

.sidebar .nav-link.active::before, .sidebar .nav-link:hover::before {
    background:  url("images/studio-icon-hvr.png"), linear-gradient(90deg, #8B5CF6 0%, #4F46E5 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
}

.sidebar .nav-link.history-icon::before {background-image: url(images/history-icon.png);}
.sidebar .nav-link.history-icon.active::before, .sidebar .nav-link.history-icon:hover::before {
    background:  url("images/history-icon-hvr.png"), linear-gradient(90deg, #8B5CF6 0%, #4F46E5 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
}

.sidebar .nav-link.assets-icon::before {background-image: url(images/assets-icon.png);}
.sidebar .nav-link.assets-icon.active::before, .sidebar .nav-link.assets-icon:hover::before {
    background:  url("images/assets-icon-hvr.png"), linear-gradient(90deg, #8B5CF6 0%, #4F46E5 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
}

.sidebar .nav-link.pricing-icon::before {background-image: url(images/pricing-icon.png);}
.sidebar .nav-link.pricing-icon.active::before, .sidebar .nav-link.pricing-icon:hover::before {
    background:  url("images/pricing-icon-hvr.png"), linear-gradient(90deg, #8B5CF6 0%, #4F46E5 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
}

.sidebar .nav-link.cart-icon::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 5.5h12l-1.2 9.1a1.3 1.3 0 0 1-1.29 1.1H6.49A1.3 1.3 0 0 1 5.2 14.6L4 5.5Z' stroke='%236B7280' stroke-width='1.5'/%3E%3Cpath d='M7.2 7.3V5.7a2.8 2.8 0 0 1 5.6 0v1.6' stroke='%236B7280' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 20px 20px;
}
.sidebar .nav-link.cart-icon.active::before, .sidebar .nav-link.cart-icon:hover::before {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none'%3E%3Cpath d='M4 5.5h12l-1.2 9.1a1.3 1.3 0 0 1-1.29 1.1H6.49A1.3 1.3 0 0 1 5.2 14.6L4 5.5Z' stroke='white' stroke-width='1.5'/%3E%3Cpath d='M7.2 7.3V5.7a2.8 2.8 0 0 1 5.6 0v1.6' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E"), linear-gradient(90deg, #8B5CF6 0%, #4F46E5 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
}

.sidebar .nav-link.account-icon::before {background-image: url(images/account-icon.png);}
.sidebar .nav-link.account-icon.active::before, .sidebar .nav-link.account-icon:hover::before {
    background:  url("images/account-icon-hvr.png"), linear-gradient(90deg, #8B5CF6 0%, #4F46E5 100%);
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
}

/* Logout: inline Bootstrap Icon only — never use default “Studio” ::before */
.sidebar .nav-link.sidebar-logout::before {
    display: none !important;
    content: none !important;
}

.sidebar .nav-link.sidebar-logout {
    padding-top: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    text-align: center;
}

.sidebar .nav-link.sidebar-logout i {
    font-size: 1.35rem;
    line-height: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #6b7280;
}

.sidebar .nav-link.sidebar-logout:hover i,
.sidebar .nav-link.sidebar-logout:hover span {
    color: var(--text-color);
}


/* --- Main Content Layout --- */
.content-wrapper {
    margin-left: calc(var(--sidebar-width) + 40px);
    padding-top: 90px;
    padding-right: 20px;
    padding-bottom: 20px;
}

.main-card {
    padding: 16px;
}

.main-card.scroll-body {
    padding: 16px;
    max-height: 71vh;
    overflow-y: auto;
    scroll-behavior: smooth;
    scrollbar-width: none;    
    -ms-overflow-style: none;
}
.main-card.scroll-body ::-webkit-scrollbar{display: none;}

.main-card-block{
    background: #fcfcfc;
    border-radius: 20px;
    border: 1px solid #e5e7eb;
    height: 100%;
    /* height: fit-content; */
}

.section-label {
    font-weight: 700;
    font-size: 14px;
    display: block;
    color: var(--text-color);
    line-height: 18px;
    margin-bottom: 10px;
    text-transform: capitalize;
}

.plat-form-selector{gap: 12px;}

.main-card-title {
    border-bottom: 1px solid #E5E7EB;
}

.catalogue-options .form-check {
    display: block;
    min-height: 0;
    padding-left: 0;
    margin-bottom: 0;
}

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

.catalogue-options label {
    padding: 8px 16px;
    border: 1px solid transparent;
    border-radius: 10px;
    cursor: pointer;
    font-weight: 500;
    color: #6B7280;
    display: flex;
    align-items: center;
    gap: 6px;
}

.catalogue-options label::before {
    content: "";
    width: 15px;
    height: 15px;
    border: 1px solid #9ca3af;
    border-radius: 100%;
}

.catalogue-options input[type="radio"]:checked + label {
    border-color: #5B3DF5;
    background: #F3F0FF;    
    color: #5B3DF5;
}

.catalogue-options input[type="radio"]:checked + label::before {
    border-color: #5B3DF5;
    background: radial-gradient(circle, #5B3DF5 48%, transparent 56%);
}

/* --- Custom Inputs & Grids --- */
.ratio-btn {
    cursor: pointer;
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;

}
.pop-up-asset-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
}

.asset-item {
    aspect-ratio: 1/1;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid transparent;
    cursor: pointer;
    position: relative;
}

.asset-item.active {
    border-color: var(--primary-purple);
}

.asset-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 1;
    border-radius: 8px;
}

.asset-grid .check-badge .bi::before {
    font-weight: 500 !important;
}

/* --- Product Gallery --- */
#productGallery {
    min-height: 2rem;
}

#productGallery.is-dragover {
    outline: 2px dashed #7c3aed;
    outline-offset: 3px;
    border-radius: 12px;
}

.dropzone {
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    padding: 30px;
    background: #fcfcfd;
    cursor: pointer;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.dropzone.is-dragover,
.add-more-box.is-dragover {
    border-color: #5B3DF5;
    background: #f5f3ff;
    border-style: solid;
}

.product-preview-box {
    width: 110px;
    height: 110px;
    position: relative;
    border-radius: 12px;
    overflow: hidden;
    border: 1px solid #e5e7eb;
}

.product-preview-box img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.product-preview-box .remove-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 28px;
    height: 28px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    color: #1f2937;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
    cursor: pointer;
    line-height: 1;
    z-index: 2;
}

.product-preview-box .remove-btn:hover {
    background: #fff;
    color: #b91c1c;
}

.product-preview-box .remove-btn .bi {
    font-size: 1rem;
    font-weight: 700 !important;
}

.product-gallery-clear-btn {
    text-decoration: none !important;
}

.product-gallery-clear-btn .bi {
    font-size: 1rem;
}

.add-more-box {
    width: 110px;
    height: 110px;
    border: 1px dashed #d1d5db;
    border-radius: 12px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    color: #9ca3af;
    text-align: center;
    padding: 6px;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.add-more-box:hover{ border-color: #5B3DF5; color: var(--text-color); }
.add-more-box .bi-plus-circle::before{ font-size: 24px; }


/* --- Footer Button --- */

.generate-btn.btn{
    width: 100%;
    font-size: 20px;
    padding: 15px 20px; 
    position: relative;
    border-radius: 12px;
}
.generate-btn.btn b {
    background: url(images/studio-icon-hvr.png);
    background-repeat: no-repeat, no-repeat;
    background-position: left, center;
    font-weight: 700;
    padding-left: 30px;
    text-align: center;
}

.generate-btn.btn:hover b {
    background-image: url(images/studio-icon.png);
    background-repeat: no-repeat;
    background-position: left center;
    background-color: transparent;
}


.credit-hint {
    display: block;
    text-align: center;
    font-size: 14px;
    color: #6B7280;
    line-height: 16px;
    font-weight: 700;
    margin-top: 8px;
}

/* Preview Panel Styling */
.preview-panel {
    background: #fdfaff;
    border: 0;
    border-radius: 8px;
    position: relative;
}

.preview-panel::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 8px;
    pointer-events: none;
    background:
    repeating-linear-gradient(to right, #cbd5e1 0 8px, transparent 8px 16px) top,
    repeating-linear-gradient(to right, #cbd5e1 0 8px, transparent 8px 16px) bottom,
    repeating-linear-gradient(to bottom, #cbd5e1 0 8px, transparent 8px 16px) left,
    repeating-linear-gradient(to bottom, #cbd5e1 0 8px, transparent 8px 16px) right;
    background-size: 100% 2px, 100% 2px, 2px 100%, 2px 100%;
    background-repeat: no-repeat;
    pointer-events: none;
}

.preview-panel img{border-radius: 16px;}

.aititle {
    font-family: 'Momo Trust Display', sans-serif;
    font-weight: 600;
    font-style: normal;
    font-size: 20px;
    /* leading-trim: NONE; */
    line-height: 100%;
    letter-spacing: 0%;
    text-align: center;
    color: #8B5CF6;
    color: linear-gradient(90deg, #8B5CF6 0%, #4F46E5 100%);
}

.check-badge i {
    display: none;
}

.asset-item.active .check-badge i {
    position: absolute;
    top: 5px;
    right: 5px;
    background: var(--primary-purple);
    color: white;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    display: block;
    text-align: center;
    font-weight: 700 !important;
    line-height: 1.3;
}

.view-all-btn:hover{color: #4f46e5 !important;}

p.actions span {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 14px;
    /* leading-trim: NONE; */
    line-height: 100%;
    letter-spacing: 0%;
    color: #000000;
}

p.upu {
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-style: Medium;
    font-size: 14px;
    /* leading-trim: NONE; */
    line-height: 20px;
    letter-spacing: 0%;
    text-align: center;
    color: #5A5A5A;

}

h6.fp {
    font-family: 'Satoshi', sans-serif;
    font-weight: 700;
    font-style: Bold;
    font-size: 16px;
    /* leading-trim: NONE; */
    line-height: 18px;
    letter-spacing: 0%;
    text-align: center;
    color: var(--text-color);
}

.cpy {
    font-family: 'Satoshi', sans-serif;
    font-weight: 500;
    font-style:  Italic;
    font-size: 14px;
    line-height: 16px;
    letter-spacing: 0%;
    text-align: center;
    color: #6B7280;
    margin: 0;
}



























.popoverContainer {
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, .6);
}

.case-modal-1 {
    width: 100%;
    max-width: 780px;
    margin: auto;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}

.case-modal-content {
    max-height: 95vh;
    padding: 0px;
    border-radius: 12px;
    position: relative;
    overflow-y: auto;
    position: relative;
    background: rgb(255, 255, 255, 65%);
    backdrop-filter: blur(20px);
}

.case-close {
    position: absolute;
    top: 12px;
    right: 15px;
    width: 35px;
    height: 35px;
    font-family: 'Satoshi';
    font-weight: 600;
    font-size: xx-large;
    line-height: 1;
    z-index: 9;
    padding: 0;
    color: #8A8A8A;
    background: transparent;
    border: 0;
    border-radius: 0;
}

.btn-popups {
    background-color: transparent;
    border-radius: 0;
    line-height: 1 !important;
    padding: 0;
    border: 0;
}

.tab-pane {
    display: none;
}
.tab-pane.tab-pane-active {
    display: block;
}

.tabs-block{padding: 20px;}
.tab-btn-group {
    display: flex;
    align-items: center;
    border-bottom: 1px solid #fff;
    margin-bottom: 20px;
}
.pop-up-tabs-block .tab-btn{
    font-size: 16px;
    font-weight: 700;
    line-height: 20px;
    letter-spacing: 0;
    color: #7C7C7E;
    text-transform: capitalize;
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
    border-bottom: 2px solid transparent;
    padding: 10px;
    margin-bottom: -1px;
    cursor: pointer;
}
.pop-up-tabs-block{padding-top: 0;}
.pop-up-tabs-block .tab-btn.tab-btn-active{
    border-color: #5B3DF5;
    color: #5B3DF5;
    background-color: rgb(255, 255, 255, 50%);
}

.apply-selection-lst{
    padding-right: 20px;
    padding-bottom: 16px;
    font-size: 16px;
    gap: 20px;
}

.apply-selection-lst .btn{font-size: 16px;}
.apply-selection-lst .case-close.cancel-btn {
    position: unset;
    font-size: inherit;
    width: fit-content;
    height: fit-content;
    color: #3A3A3A;
}

/* History Css */

.view-toggle {
    display: flex;
    background: #FFFFFF;
    padding: 0px;
    border-radius: 10px;
    gap: 0px;
    border: 1px solid #E5E7EB;
}

.toggle-btn {
    border: none;
    background: transparent;
    padding: 8px 10px;
    cursor: pointer;
    color: #555;
    transition: 0.2s;
}

.toggle-btn#gridView {
    border-top-left-radius: 10px;
    border-bottom-left-radius: 10px;
}

.toggle-btn#listView {
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
}

.toggle-btn.active {
    background: #5B3DF5;
    color: white;
}

.toggle-btn.active path {
    stroke: #fff !important;
}

/* .catalogues-form-lst select { -webkit-appearance: none; appearance: none; background-image: url(images/down-arrow-icon.png); background-repeat: no-repeat; background-position: right 10px center; background-size: auto; } */
.catalogues-form-lst input.search-input{ background-image: url(images/search-icon.png); background-repeat: no-repeat; background-position: left 10px center; padding-left: 35px; }
.form-check-box{ color: #6B7280; background-color: #fff; border: 1px solid #E5E7EB; display: flex; align-items: center; gap: 8px; cursor: pointer; }

.catalogue-grid{ display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.catalogue-card { position: relative; width: 100%; background-color: #fff; border-radius: 8px; border: 1px solid #E5E7EB; overflow: hidden; }
.catalogue-card img { border-top-left-radius: 8px; border-top-right-radius: 8px; width: 100%; transition: transform 0.4s ease; overflow: hidden;}

.catalogue-card:hover  .catalogue-card-img img{transform: scale(1.1);}
.catalogue-card-img { overflow: hidden; }

 
.catalogue-card-img-stack {
  position: relative;
}

.catalogue-card-img-stack::before,
.catalogue-card-img-stack::after,
.catalogue-card-img-stack .catalogue-card-stack-layer {
  content: "";
  position: absolute;
  width: 60px;
  height: 70px;
  bottom: 10px;
  left: 10px;
  border-radius: 8px;
  border: 2px solid #fff;
  background-size: cover;
  background-position: center;
}

.catalogue-card-img-stack::before {
  background-image: var(--img1);
  transform: translateX(6px);
  z-index: 1;
}

.catalogue-card-img-stack::after {
  background-image: var(--img2);
  transform: translateX(12px);
}

.catalogue-card-img-stack .catalogue-card-stack-layer {
  background-image: var(--img3);
  transform: translateX(18px);
}


.card-footer-text { padding: 12px; text-align: center; font-size: 14px; font-weight: 700; line-height: 28px; color: #6B7280; }
.catalogue-card:hover .card-footer-text { color: var(--text-color); }
.catalogue-card:hover{ box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 6px -1px, rgba(0, 0, 0, 0.06) 0px 2px 4px -1px; }
.catalogue-grid input.card-check { position: absolute; top: 10px; left: 10px; width: 15px; height: 15px; z-index: 99; }


.your-catalogue-grid{grid-template-columns: repeat(5, 1fr);}
.your-catalogue-grid .card-footer-text path{stroke: #6B7280;}
.your-catalogue-grid .catalogue-card:hover .card-footer-text path{stroke: #1F2937;}
.hover a{ position: absolute; inset: 0; width: 100%; height: 100%; font-size: 0; z-index: 3;}


.catalogue-list {
    width: 100%;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    overflow: hidden;
    background: #fff;
    display: block;
}

.list-header {
    background: #F9FAFB;
    padding: 12px 16px;
    font-size: 14px;
    color: var(--text-color);
    font-weight: 700;
    text-align: center;
}

.list-row {
    padding: 12px 16px;
    border-top: 1px solid #E5E7EB;
    font-size: 14px;
    color: #6B7280;
    text-align: center;
    position: relative;
    font-weight: 500;
}
.list-row:hover { background: #F9FAFB; }

.col-check { width: 40px; text-align: left;}
.col-name { flex: 1; text-align: center;}
.col-products { /* width: 100px;*/ flex: 1;}
.col-preview { /* width: 100px;*/ flex: 1;}
.col-images { /* width: 120px;*/ flex: 0.8;}
.col-date { flex: 1; }
.col-status { /* width: 140px;*/ flex: 0.5;}

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

.status {padding: 5px 10px; border-radius: 999px; font-size: 12px; }
.status.completed {background: #33985C; color: #fff; }
.status.incompleted { background: #f00; color: #fff; }
.status.pending { background: #F29339; color: #fff; }


.catalogue-list .catalogue-card {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 12px 16px;
    border: 1px solid #E5E7EB;
    border-radius: 0;
    border-left: none;
    border-right: none;
}

.catalogue-list .catalogue-card:first-child { border-top: none; }
.catalogue-list .catalogue-card-img img { width: 100%; border-radius: 12px; }
.catalogue-list .catalogue-card-img img { width: 50px; height: 50px; object-fit: cover; border-radius: 8px; }
.catalogue-list .card-check { position: relative; z-index: 9; }


/* result screen  */

.thumb-slider .owl-item img {
  border-radius: 10px;
  border: 3px solid transparent;
  cursor: pointer;
}

.thumb-slider .owl-item.active.selected img {
  border-color: #5B3DF5;
}

.owl-carousel.main-slider{display: block;}


.img-popup {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.50);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    z-index: 9999;
    animation: fadeIn 0.3s ease;
}

.img-popup img {
    max-width: 70%;
    max-height: 70%;
    border-radius: 12px;
}

.img-popup .close-btn { 
    position: relative;
    text-align: right;
    font-size: 28px;
    color: #fff;
    cursor: pointer;
    max-width: 70%;
    max-height: 70%;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}


.img-actions {
    position: absolute;
    top: 10px;
    left: 10px;
    right: 10px;
    width: 97%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 auto;
}

.main-slider .img-fluid {
    border-radius: 8px;
}




.result-itm-btn {
    padding: 10px;
    color: #fff;
    background: rgb(245, 245, 245, 25%);
    border: 1px solid rgb(229, 231, 235, 20%) ;
    border-radius: 12px;
    font-size: 16px;
    font-weight: 700;
    text-transform: capitalize;
    line-height: 1;
}

.main-slider .owl-nav {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: auto;
    display: flex;
    justify-content: space-between;
    width: 95%;
    height: fit-content;
    z-index: 0;
}
.main-slider .owl-nav button span { font-size: 0; font-weight: bold; }
.main-slider .owl-nav button {
    background: #f5f5f540 !important;
    background-image: url(images/left-arrow.png) !important;
    width: 40px;
    height: 40px;
    background-repeat: no-repeat !important;
    background-position: center !important;
    position: relative;
    z-index: 99;
    border: 1px solid rgb(229, 231, 235, 20%) !important;
    border-radius: 12px;
}

.main-slider .owl-nav button.owl-next {
    background-image: url(images/right-arrow.png) !important;
}


/* Custom Dropdown Menu */

.custom-dropdown {
  position: relative;
  /* width: 180px; */
}

.dropdown-btn {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid #ddd;
  border-radius: 10px;
  background: #fff;
  text-align: left;
  cursor: pointer;
  color: var(--bs-secondary-color);
}

.dropdown-menu-custom {
  position: absolute;
  top: 110%;
  left: 0;
  width: 100%;
  background: #fff;
  border-radius: 8px;
  padding: 0px;
  display: none;
  z-index: 999;
  border: 1px solid #E5E7EB;
}

.dropdown-menu-custom label {
    display: flex;
    gap: 8px;
    padding: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 700;
}

.dropdown-menu-custom {
  display: none;
}

.dropdown-menu-custom.show {
  display: block !important;
}

.dropdown-menu-custom label:hover{
    background-color: #4e46e52a;
}

/* Assets Css */


.catalogues-img-list .catalogue-grid{
    grid-template-columns: repeat(2 , 1fr);
}

.catalogues-gererated-blk {
    border: 1px solid #E5E7EB;
    border-radius: 8px;
    box-shadow: rgb(0 0 0 / 8%) 0px 2px 15px 0;
}


.catalogue-item {
    background: #F9FAFB;
    border: 1px solid #E5E7EB;
    border-radius: 12px;
    padding: 16px 20px;
}

.catalogue-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.info-row {
    display: flex;
    gap: 10px;
    font-size: 16px;
}

.catalogue-info .label {
    color: var(--bs-secondary-color);
    font-weight: 700;
    min-width: 130px;
}

.catalogue-info .value {
    color: var(--bs-secondary-color);
    font-weight: 500;
}

.catalogue-image img {
    width: 100px;
    height: 100px;
    border-radius: 12px;
    object-fit: cover;
}


.credits-btn{display: flex; gap: 5px; align-items: center; font-weight: 700; padding: 10px;}
.credits-btn::before{
    content: "";
    width: 12px;
    height: 12px;
    border: 1px solid #9ca3af;
    border-radius: 100%;
    position: relative;
    display: block;
}

.credits-btn.tab-btn-active::before {
    background: radial-gradient(circle, #5B3DF5 48%, transparent 56%);
    border-color: #5B3DF5;
    color: #5B3DF5;
}

.credits-btn .btn-2.tab-btn-active {
    background: #F3F0FF;
    border-color: var(--primary-purple);
    color: var(--primary-purple);
}

/* pricing css */

.pricing-page{position: relative;}
.country-select-blk{
    position: absolute;
    top: 20px;
    right: 20px;
    width: fit-content;
}

.country-select-blk select option:first-child{display: none;}

.pricing-list {
    display: flex;
    justify-content: space-between;
    gap: 20px;
}

.pricing-itm {
    width: 24%;
    background-color: #fff;
    border-radius: 12px;
    padding: 12px;
    border: 1px solid #7878b41f;
    transition: all 0.3s ease;
}

.pricing-itm:hover {
    transform: translateY(-10px);
    box-shadow: 0 4px 15px rgb(0 0 0 / 10%);
    border-color: rgb(107, 114, 128, 30%);
}

.pricing-top-itm-blk { padding: 12px; background: linear-gradient(to right, #F6F3FF, #ECE7FF); border-radius: 8px; margin-bottom: 16px; position: relative; }
.pricing-top-itm-blk .subtitle{font-size: 14px; color: #6B7280; font-weight: 500; margin-bottom: 20px; }
.pricing-top-itm-blk .pricing-itm-title{font-size: 16px; font-weight: 700; margin-bottom: 8px; color: #1F2937; }
.pricing-btn.btn, .pricing-btn.btn:active{
    background: #FAFAFA;
    border-color: #E5E7EB;
    color: #6B7280;
    display: block;
    font-size: 14px;
    width: 100%;
}

.pricing-top-itm-blk .price{ font-size: 24px; color: #111827; line-height: 1.2; font-weight: 900; margin-bottom: 20px; }
.pricing-top-itm-blk .price small{ font-size: 65%; color: var(--bs-secondary-color); font-weight: 700; }

.best-value-itm{border-color: rgb(124, 58, 237, 25%);}
.best-value-itm:hover{border-color: #7C3AED;}
.best-value-itm .pricing-top-itm-blk .price, .best-value-itm .pricing-top-itm-blk .price small, .best-value-itm .pricing-top-itm-blk .pricing-itm-title, .best-value-itm .pricing-top-itm-blk .subtitle{
    color: #fff;
}
.best-value-itm .pricing-top-itm-blk{ background: linear-gradient(to right bottom, #8B5CF6, #7C3AED, #9333EA); }

.feature-section-title {
    border-top: 1px solid #F0F2F4;
    padding-top: 16px;
    margin-bottom: 12px;
    color: #6B6B6B;
    font-weight: 700;
    font-size: 14px;
}

.pricing-itm .feature-icon{
    font-size: 14px;
    color: #1F1F1F;
    line-height: 18px;
    font-weight: 500;
    margin-bottom: 12px;
    padding-left: 25px;
    position: relative;
}

.pricing-itm .feature-icon::before {
    position: absolute;
    content: '';
    top: 1px;
    left: 1px;
    width: 16px;
    height: 16px;
    background-image: url(images/pricing-included-icon.png);
    background-repeat: no-repeat;
}

.pricing-itm .feature-icon.excluded::before{ background-image: url(images/pricing-excluded-icon.png); }
.pricing-list-blocks .tab-btn-group { margin-bottom: 42px; }

.best-value{
    position: absolute;
    top: 12px;
    right: 12px;
    color: #fff;
    padding: 4px 8px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    background-color: rgb(255, 255, 255, 20%);
    font-size: 12px;
    font-weight: 700;
}
.best-value .bi-star-fill { color: #FBBF24; }


/* Account Page css */

.account-page .tab-content-inner {
    padding: 20px;
}

.form-card-box-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    column-gap: 40px;
}

.form-card-box-row input{width: 100%;}

.form-card-fields {
    margin-bottom: 40px;
    padding-bottom: 40px;
    border-bottom: 1px solid #F0F2F4;
}

.form-card-fields:last-child{
    padding-bottom: 0;
    border: 0;
}

.form-submit-btn{
    text-align: right;
}

.search-list {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    align-items: center;
}

.invite-list {
    background: linear-gradient(to right, #8B5CF6, #4F46E5);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    display: flex;
    align-items: center;
    gap: 8px;
}


.search-list .case-modal-content {
    background-color: #fff;
    padding: 20px;
}

.search-list .form-card-box-row{display: flex; gap: 16px; flex-direction: column;}
.search-list .form-card-fields:last-child{margin-bottom: 0;}

.invite-pop-btns {
    margin-top: 1.5rem!important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    column-gap: 24px;
}

.form-card-title{
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #F0F2F4;
}

.total-amount{
    color: var(--text-color);
    font-weight: 700;
}

.account-form-list .list-row a {
    color: #3B82E5;
}

.main-card-rit .case-modal-content {
    padding: 20px;
    width: 50%;
    background-color: #fff;
}

.main-card-rit .form-card-fields{padding: 0; margin: 0; border: 0;}
.main-card-rit .btn{
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
}

.main-card-rit .logout-btn.btn:hover, .logout-pop-btns .btn:hover{
    color: #B41431;
    border-color: #B41431;
    background: #fff;
}

.delete-btn:hover svg path, .main-card-rit .logout-btn.btn:hover svg path{
    stroke: #B41431;
}
.logout-pop-btns .btn{ background: #B41431; }

.logout-pop-btns{
    display: flex;
    justify-content: end;
    align-items: center;
    gap: 20px;  
    margin-top: 32px;
}


.selected-catalogues-img-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);  
    gap: 20px;
}

.selected-catalogues-itm, .selected-catalogues-img-list-main{margin-bottom: 24px;}
.selected-catalogues-img-list-main img{border-radius: 8px;}

.pagination-nav {
  margin-top: 30px;
}

/* Button Base */
.nav-btn {
    padding: 10px 12px;
    border: 1px solid #E5E7EB;
    background: #fff;
    font-weight: 700;
    cursor: pointer;
    transition: 0.3s;
    opacity: 65%;
    border-radius: 12px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.nav-btn:hover {
    background: #FFFFFF;
    opacity: 1;
}