:root {
    --primary-text-color: #374151;
    /* gray-700 equivalent */
    --secondary-text-color: #6b7280;
    /* gray-400 equivalent */
    --border-color: #d1d5db;
    /* gray-300 equivalent */
    --background-color-body: #f0f2f5;
    --spacing-small: 0.75rem;
    /* Equivalent to Tailwind's p-3 or mr-3 */
    --spacing-medium: 1rem;
    /* Equivalent to Tailwind's mb-4 or p-6 */
    --spacing-large: 1.5rem;
    /* Equivalent to Tailwind's mb-6 */
    --border-radius-default: 0.5rem;
    /* Equivalent to Tailwind's rounded-lg */
    --shadow-default: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    /* Equivalent to Tailwind's shadow-sm */
    --max-width-md: 28rem;
    /* Equivalent to Tailwind's max-w-md (448px) */
}

.vault-capsule_wrap {
    background-color: #fff;
    position: relative;
}
.btn-pay:disabled {
        pointer-events: none;
        opacity: 0.5;
        cursor: not-allowed; /* Optional: adds a "no" cursor on hover */
}
#progress-bar {
    display: flex;
    margin-bottom: 40px;
    background: white;
    gap: 20px;
}

#__headingh3 {
    color: #2b2b2b !important;
    font-size: 16px !important;
    line-height: 16px !important;
    font-weight: 400 !important;
    margin: 20px 0px 0px 40px;
}

.border-gray {
    border: solid 1px #2b2b2b !important;
}
.privacy-opt{
    flex-direction: column;
}
.privacy-option{
    justify-content: space-between;
    width: 100%;
}
.progress-step {
    flex: 1;
    display: flex;
    justify-content: center;
    flex-direction: column;
    text-align: left;
    padding: 10px;
    position: relative;
    background-color: #f6f6f6;
    border-radius: 5px;
    border: 1px solid #e7e6e6;
    font-family: var(--sub-heading-font);
    font-size: 11px;
    font-weight: 600;
    height: 70px;
    color: #000;
}

.progress-step small {
    font-family: var(--body-font);
    font-weight: normal;
}

.progress-step::after {
    content: "";
    position: absolute;
    right: 10px;
    top: 6px;
    width: 20px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg width='24' height='20' viewBox='0 0 24 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 13.2727C1 13.2727 3.35714 13.2727 6.5 19C6.5 19 15.2353 3.99999 23 1' stroke='%23408F6E' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-position: center;
    background-repeat: no-repeat;
    opacity: 0;
}

.done-msg {
    display: none;
}

.d-none {
    display: none !important;
}

.hidden {
    display: none;
}

.d-block {
    display: block !important;
}

.visibility-hidden {
    pointer-events: none;
    cursor: not-allowed;
}

.progress-step.completed {
    border-color: #408f6e;
}

.progress-step.completed .done-msg {
    display: block;
    color: #408f6e;
}

.progress-step.completed::after {
    opacity: 1;
}

.completed {
    pointer-events: none;
    cursor: not-allowed;
}

.progress-step.active {
    color: #000;
}

.step_title {
    font-size: 40px;
    text-align: left;
}

.main-content__inner {
    display: flex;
    gap: 40px;
}

.step-sidebar {
    width: 400px;
    position: relative;
}

.step-sidebar__inner {
    position: relative;
}

.step-sidebar__inner::before {
    content: "";
    border-left: 1px solid #000;
    position: absolute;
    width: 1px;
    height: 80%;
    top: 10%;
    left: 14px;
}

.step-sidebar p {
    margin: 0;
}

.content-area {
    flex: 1;
    background: white;
    padding: 0 30px;
    border-left: 1px solid #e7e6e6;
    max-width: 100%;
    min-width: 739px;
}

.step-item {
    display: flex;
    align-items: center;
    padding: 15px 0;
    margin-bottom: 30px;
}

.step-item:last-child {
    border-bottom: none;
}

.step-circle {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-weight: 600;
    font-size: 16px;
    font-family: var(--sub-heading-font);
    border: 1px solid #000;
    position: relative;
}

.step-item.completed .step-circle {
    background: #408f6e;
    color: white;
    border-color: #408f6e;
}

.step-item.active .step-circle {
    background: #fff;
    color: #000;
}

.step-info h4 {
    font-family: var(--sub-heading-font);
    font-size: 20px;
    font-weight: 600;
    margin-bottom: 2px;
}

.step-info p {
    font-size: 12px;
    color: #2b2b2b;
}

.step-info .congrats {
    color: #408f6e;
    font-size: 11px;
    margin: 0;
}

.form-group {
    margin-bottom: 25px;
}

label {
    display: block;
    font-weight: 600;
    margin-bottom: 8px;
    color: #2b2b2b;
    font-family: var(--sub-heading-font);
    font-size: 20px;
}

input[type="text"],
input[type="email"],
textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    font-size: 14px;
    font-family: inherit;
    height: 60px;
    color: #2b2b2b;
    font-family: var(--sub-heading-font);
}

input[type="text"]:focus,
textarea:focus {
    outline: none;
    border-color: #007bff;
}

textarea {
    min-height: 180px;
    resize: vertical;
}

/* 
.pricing-section {
    margin: 30px 0;
} */

.pricing-plans {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.pricing-plan,
.plan-tab {
    padding: 12px 16px;
    border: 1px solid #000;
    border-radius: 5px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
    font-size: 12px;
    font-weight: normal;
    color: #2b2b2b;
}

.pricing-plan.selected,
.plan-tab.active {
    background: #000;
    color: white;
    border-color: #000;
}

.pricing-plan:hover:not(.selected) {
    border-color: #007bff;
}

.pricing-section p {
    color: #2b2b2b;
    font-size: 14px;
}

.step-features_wrap strong {
    font-size: 18px;
    font-family: var(--sub-heading-font);
    font-weight: 600;
}

.step-features {
    list-style: none;
    font-size: 14px;
}

.step-features li {
    padding: 3px 0;
    position: relative;
    padding-left: 15px;
    color: #2b2b2b;
}

.step-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: #2b2b2b;
    font-weight: bold;
}
.swal2-title{
    font-weight: 400 !important;
}
.upload-area {
    border: 2px dashed #2b2b2b;
    border-radius: 5px;
    padding: 40px;
    text-align: center;
    margin-bottom: 10px;
    cursor: pointer;
    transition: all 0.2s;
    position: relative;
    min-height: 170px;
}

.upload-area section {
    padding: 0px !important;
}

.upload-area form {
    border: none !important;
    background: none !important;
}

.upload-text {
    position: absolute;
    background: transparent;
    border: none !important;
    left: 0;
    top: 0;
    z-index: 9999;
}

.upload-area:hover {
    border-color: #007bff;
    background: #f8f9ff;
}

.upload-area p {
    font-size: 12px;
    color: #2b2b2b;
    font-family: var(--sub-heading-font);
}

.upload-icons {
    display: flex;
    gap: 20px;
    justify-content: center;
    /* margin-bottom: 15px; */
    flex-direction: column;
    align-items: center;
    height: 100%;
}

.icons__container {
    display: flex;
    gap: 16px;
}

.flex {
    display: flex;
}

.items-center {
    align-items: center;
}

.justify-center {
    justify-content: center;
}

.justify-between {
    justify-content: space-between;
}

.flex-col {
    flex-direction: column;
}

.w-full {
    width: 100%;
}

.gap-10 {
    gap: 10px;
}

.live-moment p {
    font-size: 14px;
    color: #2b2b2b;
    line-height: 24px;
    padding-right: 30px;
}

.notification span {
    font-size: 14px;
    color: #2b2b2b;
    line-height: 16px;
    font-family: var(--sub-heading-font);
}

.upload-icon {
    width: 40px;
    height: 40px;
    background: #fff;
    border-radius: 3px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    border: 1px dashed #e7e6e6;
}

.live-moment {
    max-width: 310px;
    position: relative;
}

/* .live-moment::after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    bottom: 22px;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M12.6667 2.66667H12.328L10.872 0.778667C10.6844 0.537204 10.4442 0.341611 10.1698 0.206703C9.89534 0.0717943 9.5938 0.0011087 9.288 0L6.712 0C6.4062 0.0011087 6.10466 0.0717943 5.83022 0.206703C5.55579 0.341611 5.31565 0.537204 5.128 0.778667L3.672 2.66667H3.33333C2.4496 2.66773 1.60237 3.01925 0.97748 3.64415C0.352588 4.26904 0.00105857 5.11627 0 6L0 12.6667C0.00105857 13.5504 0.352588 14.3976 0.97748 15.0225C1.60237 15.6474 2.4496 15.9989 3.33333 16H12.6667C13.5504 15.9989 14.3976 15.6474 15.0225 15.0225C15.6474 14.3976 15.9989 13.5504 16 12.6667V6C15.9989 5.11627 15.6474 4.26904 15.0225 3.64415C14.3976 3.01925 13.5504 2.66773 12.6667 2.66667ZM6.184 1.59333C6.24645 1.5127 6.32646 1.44738 6.41796 1.40232C6.50945 1.35727 6.61001 1.33367 6.712 1.33333H9.288C9.38997 1.33377 9.4905 1.35741 9.58198 1.40246C9.67346 1.4475 9.75348 1.51278 9.816 1.59333L10.644 2.66667H5.356L6.184 1.59333ZM14.6667 12.6667C14.6667 13.1971 14.456 13.7058 14.0809 14.0809C13.7058 14.456 13.1971 14.6667 12.6667 14.6667H3.33333C2.8029 14.6667 2.29419 14.456 1.91912 14.0809C1.54405 13.7058 1.33333 13.1971 1.33333 12.6667V6C1.33333 5.46957 1.54405 4.96086 1.91912 4.58579C2.29419 4.21071 2.8029 4 3.33333 4H12.6667C13.1971 4 13.7058 4.21071 14.0809 4.58579C14.456 4.96086 14.6667 5.46957 14.6667 6V12.6667Z' fill='black'/%3E%3Cpath d='M8 5.33301C7.20888 5.33301 6.43552 5.5676 5.77772 6.00713C5.11992 6.44666 4.60723 7.07137 4.30448 7.80227C4.00173 8.53318 3.92252 9.33745 4.07686 10.1134C4.2312 10.8893 4.61216 11.602 5.17157 12.1614C5.73098 12.7208 6.44372 13.1018 7.21964 13.2561C7.99556 13.4105 8.79983 13.3313 9.53074 13.0285C10.2616 12.7258 10.8864 12.2131 11.3259 11.5553C11.7654 10.8975 12 10.1241 12 9.33301C11.9989 8.27247 11.5772 7.25567 10.8273 6.50575C10.0773 5.75583 9.06054 5.33407 8 5.33301ZM8 11.9997C7.47259 11.9997 6.95701 11.8433 6.51848 11.5503C6.07995 11.2572 5.73816 10.8408 5.53632 10.3535C5.33449 9.86623 5.28168 9.33005 5.38457 8.81277C5.48747 8.29548 5.74144 7.82033 6.11438 7.44739C6.48732 7.07445 6.96248 6.82047 7.47976 6.71758C7.99704 6.61469 8.53322 6.6675 9.02049 6.86933C9.50776 7.07116 9.92424 7.41296 10.2173 7.85149C10.5103 8.29002 10.6667 8.80559 10.6667 9.33301C10.6667 10.0403 10.3857 10.7185 9.88562 11.2186C9.38552 11.7187 8.70725 11.9997 8 11.9997Z' fill='black'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right center;
    width: 16px;
    height: 16px;
} */
.capture-btn {
    padding: 12px 26px;
    border-radius: 35px;
    background-color: transparent;
    border: solid 1px #2b2b2b;
    cursor: pointer;
}

.capture-btn span {
    font-size: 16px;
    font-weight: 500;
}

.capsule-skins,
.guardians {
    display: inline-flex;
    gap: 16px;
    margin: 15px 0;
    overflow-x: auto;
    padding: 10px;
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    width: auto;
}

.skin-option,
.guardian-option {
    width: 60px;
    height: 60px;
    border-radius: 8px;
    cursor: pointer;
    border: 1px solid transparent;
    transition: all 0.2s;
    flex-shrink: 0;
}

.guardian-option {
    background-color: #f6f6f6;
    display: flex;
    justify-content: center;
    align-items: center;
}

.skin-option.selected,
.guardian-option.selected {
    border-color: #2b2b2b;
}

.select-date {
    max-width: 310px;
    position: relative;
}

/* .select-date::after {
    content: "";
    display: block;
    position: absolute;
    right: 20px;
    top: 57px;
    background-image: url("data:image/svg+xml,%3Csvg width='25' height='24' viewBox='0 0 25 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M21.759 4.65076H3.80723C2.84337 4.65076 2 5.43388 2 6.45796V20.1927C2 21.1566 2.78313 22 3.80723 22H21.759C22.7229 22 23.5663 21.2168 23.5663 20.1927V6.45796C23.5663 5.43388 22.7831 4.65076 21.759 4.65076Z' stroke='black' stroke-width='2.4342' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M2.05957 10.313H23.5656' stroke='black' stroke-width='2.4342' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M8.14355 2V6.6385' stroke='black' stroke-width='2.4342' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M17.4805 2V6.6385' stroke='black' stroke-width='2.4342' stroke-miterlimit='10' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    background-repeat: no-repeat;
    background-position: right center;
    width: 25px;
    height: 25px;
} */

.calendar-container {
    max-width: 100%;
    margin: 20px 0;
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    font-family: var(--sub-heading-font);
}

.calendar-header {
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    margin-bottom: 20px;
    padding: 10px;
    color: #bdbdbd;
    font-size: 20px;
}

.calendar-nav {
    background: none;
    border: none;
    font-size: 27px;
    cursor: pointer;
    padding: 0;
    border-radius: 4px;
    color: #bdbdbd;
}

.calendar-nav:hover {
    color: #2b2b2b;
}

.calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 1px;
    background: #fff;
    border-radius: 8px;
    overflow: hidden;
}

.calendar-header-cell {
    padding: 10px;
    text-align: center;
    font-weight: 600;
    font-size: 20px;
    color: #2b2b2b;
}

.calendar-day {
    padding: 12px;
    text-align: center;
    cursor: pointer;
    min-height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.calendar-day:hover {
    background: #e3f2fd;
}

.calendar-day.other-month {
    color: #ccc;
}

.calendar-day.selected {
    background: #007bff;
    color: white;
}

.radio-group {
    margin: 20px 0;
}

.radio-option {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
}

.radio-option label {
    font-size: 18px;
    font-weight: normal;
    font-family: var(--body-font);
    cursor: pointer;
    position: relative;
    padding-left: 30px;
}

.radio-option label::before {
    content: "";
    width: 20px;
    height: 20px;
    border: 1px solid #000;
    border-radius: 100%;
    position: absolute;
    left: 0;
    top: 4px;
}

.radio-option label::after {
    content: "";
    width: 11px;
    height: 9px;
    border-radius: 100%;
    position: absolute;
    background-image: url("data:image/svg+xml,%3Csvg width='11' height='9' viewBox='0 0 11 9' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 5.77273C1 5.77273 1.96429 5.77273 3.25 8C3.25 8 6.82351 2.16666 10 1' stroke='black' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
    left: 6px;
    top: 10px;
    opacity: 0;
}

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

.radio-option input[type="radio"]:checked+label::after {
    opacity: 1;
}

.btn {
    padding: 12px 24px;
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    font-size: 16px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    height: 48px;
    line-height: 24px;
    text-align: center;
}

.btn-light {
    background-color: #f0f0f0;
    width: 40%;
}

.btn-pay {
    width: 60%;
    background-color: #408f6e !important;
    color: white !important;
}

.btn-primary {
    background: #2b2b2b;
    color: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-primary::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.25C1.08579 5.25 0.75 5.58579 0.75 6C0.75 6.41421 1.08579 6.75 1.5 6.75L1.5 5.25ZM15.0303 6.53033C15.3232 6.23744 15.3232 5.76256 15.0303 5.46967L10.2574 0.6967C9.96447 0.403807 9.48959 0.403807 9.1967 0.6967C8.90381 0.989593 8.90381 1.46447 9.1967 1.75736L13.4393 6L9.1967 10.2426C8.90381 10.5355 8.90381 11.0104 9.1967 11.3033C9.48959 11.5962 9.96447 11.5962 10.2574 11.3033L15.0303 6.53033ZM1.5 6L1.5 6.75L14.5 6.75L14.5 6L14.5 5.25L1.5 5.25L1.5 6Z' fill='white'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 16px;
    height: 12px;
}

.btn-primary:hover {
    background: #fff;
    color: #2b2b2b;
}

.btn-primary:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.25C1.08579 5.25 0.75 5.58579 0.75 6C0.75 6.41421 1.08579 6.75 1.5 6.75L1.5 5.25ZM15.0303 6.53033C15.3232 6.23744 15.3232 5.76256 15.0303 5.46967L10.2574 0.6967C9.96447 0.403807 9.48959 0.403807 9.1967 0.6967C8.90381 0.989593 8.90381 1.46447 9.1967 1.75736L13.4393 6L9.1967 10.2426C8.90381 10.5355 8.90381 11.0104 9.1967 11.3033C9.48959 11.5962 9.96447 11.5962 10.2574 11.3033L15.0303 6.53033ZM1.5 6L1.5 6.75L14.5 6.75L14.5 6L14.5 5.25L1.5 5.25L1.5 6Z' fill='black'/%3E%3C/svg%3E");
}

.btn-secondary {
    background: transparent;
    color: #2b2b2b;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.btn-secondary::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.25C1.08579 5.25 0.75 5.58579 0.75 6C0.75 6.41421 1.08579 6.75 1.5 6.75L1.5 5.25ZM15.0303 6.53033C15.3232 6.23744 15.3232 5.76256 15.0303 5.46967L10.2574 0.6967C9.96447 0.403807 9.48959 0.403807 9.1967 0.6967C8.90381 0.989593 8.90381 1.46447 9.1967 1.75736L13.4393 6L9.1967 10.2426C8.90381 10.5355 8.90381 11.0104 9.1967 11.3033C9.48959 11.5962 9.96447 11.5962 10.2574 11.3033L15.0303 6.53033ZM1.5 6L1.5 6.75L14.5 6.75L14.5 6L14.5 5.25L1.5 5.25L1.5 6Z' fill='black'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    width: 16px;
    height: 12px;
}

.btn-secondary:hover {
    background-color: #2b2b2b;
    color: #fff;
}

.btn-secondary:hover::after {
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='12' viewBox='0 0 16 12' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 5.25C1.08579 5.25 0.75 5.58579 0.75 6C0.75 6.41421 1.08579 6.75 1.5 6.75L1.5 5.25ZM15.0303 6.53033C15.3232 6.23744 15.3232 5.76256 15.0303 5.46967L10.2574 0.6967C9.96447 0.403807 9.48959 0.403807 9.1967 0.6967C8.90381 0.989593 8.90381 1.46447 9.1967 1.75736L13.4393 6L9.1967 10.2426C8.90381 10.5355 8.90381 11.0104 9.1967 11.3033C9.48959 11.5962 9.96447 11.5962 10.2574 11.3033L15.0303 6.53033ZM1.5 6L1.5 6.75L14.5 6.75L14.5 6L14.5 5.25L1.5 5.25L1.5 6Z' fill='white'/%3E%3C/svg%3E");
}

.btn-dark {
    background: #000;
    color: white;
}

.btn-dark:hover {
    background: #333;
}

.data-review {
    margin-bottom: 40px;
    border-radius: 5px;
}

.data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 10px;
    border-bottom: 1px solid #2B2B2B;
    font-size: 18px;
}
.data-item:last-child{
    border-bottom: none;
}
.edit-btn {
    background: none;
    border: none;
    color: #2b2b2b;
    cursor: pointer;
    font-size: 12px;
    font-family: var(--sub-heading-font);
    display: flex;
    align-items: center;
    gap: 10px;
}

.selected-thumbnail {
    display: flex;
    gap: 30px;
}

.thumbnail-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin: 20px 0;
}

.thumbnail {
    aspect-ratio: 1;
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    background-color: #f6f6f6;
    height: 150px;
    width: 150px;
}

.thumbnail.filled {
    border-color: transparent;
}

.remove-btn {
    position: absolute;
    top: 8px;
    right: 8px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='8' cy='8' r='7.5' fill='white' stroke='black'/%3E%3Cpath d='M5 5L11 11' stroke='black' stroke-linecap='round'/%3E%3Cpath d='M11 5L5 11' stroke='black' stroke-linecap='round'/%3E%3C/svg%3E%0A");
    border: none;
    cursor: pointer;
    font-size: 0;
}

.hidden {
    display: none;
}

/* Step-specific styling */
/* .step-1 .step-1-content,
.step-2 .step-2-content,
.step-3 .step-3-content,
.step-4 .step-4-content,
.step-5 .step-5-content {
    display: block;
} */

.step-content {
    display: none;
}

.button-wrap {
    display: flex;
    gap: 20px;
}

.radio-btns,
.radio-btns-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 16px;
    margin-left: 20px;
}

.radio-btns-section {
    gap: 8px;
    margin-left: 40px;
}

.radio-btns label,
.radio-btns-section label {
    margin-bottom: 0px !important;
    display: flex;
    align-items: center;
    gap: 10px;
}

.radio-btns>label>span,
.radio-btns-section>label>span {
    color: #2b2b2b !important;
    font-size: 16px !important;
    line-height: 16px;
    font-weight: 400;
}

@media screen and (max-width: 768px) {

    .radio-btns>label>span,
    .radio-btns-section>label>span {
        line-height: 32px;
    }
}

.radio-btns-section h3 {
    font-weight: 600;
    font-size: 18px;
    line-height: 16px;
    color: #2b2b2b;
}

#options-slider-container {
    position: relative;
    border: 1px solid #ccc;
    border-radius: 8px;
    padding: 10px 30px;
    display: flex;
    align-items: center;
    overflow: hidden;
    margin: 20px 0px 0px 40px;
}

.skin-slider,
.guardian-slider {
    display: flex;
    gap: 12px;
    overflow-x: auto;
    scroll-behavior: smooth;
    padding: 5px 0;
    min-height: 130px;
    /* Hide scrollbar - Webkit (Chrome, Safari) */
    scrollbar-width: none;
    /* Firefox */
    -ms-overflow-style: none;
    /* IE and Edge */
}

.skin-slider::-webkit-scrollbar,
.guardian-slider::-webkit-scrollbar {
    display: none;
    /* Chrome, Safari, Opera */
}

.slider-option {
    flex: 0 0 auto;
    border: 1px solid #eee;
    border-radius: 6px;
    padding: 7px;
    width: 92px;
    cursor: pointer;
    transition: transform 0.2s ease;
    background-color: #f6f6f6;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.slider-option span {
    color: #2b2b2b;
    font-size: 12px;
    line-height: 16px;
    font-weight: 500;
}

.slider-option img {
    height: 70px;
    border-radius: 6px;
}

/* 
.skin-slider:hover {
    transform: scale(1.05);
    border-color: #aaa;
} */

.slider-nav {
    background-color: #fff;
    border: none;
    font-size: 24px;
    padding: 0 8px;
    cursor: pointer;
    z-index: 1;
    color: #333;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    height: 100%;
}

.slider-nav.left {
    left: 0;
}

.slider-nav.right {
    right: 0;
}

.slider-nav:focus {
    outline: none;
}

.cart-container {
    min-height: 108px;
    background-color: #fdf1de;
    width: 100%;
    margin-top: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.cart-items {
    display: flex;
    gap: 20px;
    justify-content: center;
}

.item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    width: 64px;
}

.item-content {
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: #2b2b2b solid 1px;
    height: 55px;
    width: 64px;
    text-align: center;
    padding: 5px;
}

.item-content img {
    height: 44px;
}

.item-content span {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    color: #2b2b2b;
    padding: 0 5px;
    /* Add padding to ensure text fits well */
}

.item p,
.discount-item p {
    font-size: 16px;
    font-weight: 600;
    line-height: 16px;
    color: #2b2b2b;
    margin-bottom: 0px !important;
}

.plus_item {
    font-size: 24px;
    font-weight: 600;
    color: #2b2b2b;
}

.discount-item {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 10px;
    width: 64px;
}

.discount-item .item-content {
    background-color: #fff;
    border-radius: 8px;
    border: #2b2b2b solid 1px;
    height: 55px;
    width: 64px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.discount-item .item-content span {
    font-size: 11px;
    font-weight: 500;
    line-height: 16px;
    color: #2b2b2b;
}

.total_cart {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.total_cart_content {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.total_cart_content span {
    font-size: 24px;
    font-weight: 600;
    line-height: 28px;
    color: #2b2b2b;
}

.total_cart p a {
    font-size: 18px;
    text-decoration: underline;
}

.btn-procees {
    background-color: #2b2b2b;
    border-radius: 8px;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 12px 40px;
    color: #fff;
}

/*payment section */
.headings {
    display: flex;
    justify-content: center;
    flex-direction: column;
}

.headings>h2 {
    font-size: 40px;
    line-height: 28px;
    color: #2b2b2b;
    text-align: left;
}

.heading>p {
    font-size: 14px;
    line-height: 28px;
    color: #2b2b2b;
}

.payment-method {
    display: flex;
    align-items: center;
    border: 1px solid #2b2b2b;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    overflow: hidden;
    width: 100%;
}

.payment-method input[type="text"],
.payment-method input[type="email"] {
    flex: 1;
    padding: 12px 14px;
    border: none;
    font-size: 14px;
    outline: none;
}

.payment-select {
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: #fff;
    position: relative;
}

.payment-select select {
    opacity: 0;
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
    cursor: pointer;
}

.payment-select img {
    width: 36px;
    height: auto;
}

.card-details {
    display: flex;
    border: 1px solid #2b2b2b;
    border-top: none;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    overflow: hidden;
}

.vault-name {
    display: flex;
    border: 1px solid #2b2b2b;
    overflow: hidden;
    border-radius: 5px;
    min-height: 50px;
}

.card-details input {
    flex: 1;
    padding: 12px 14px;
    font-size: 14px;
    border: none;
    outline: none;
    border-radius: 0px;
    border-left: 1px solid #2b2b2b;
}

.card-details input:first-child {
    border-left: none;
}

.cvc-wrapper {
    display: flex;
    align-items: center;
    position: relative;
    flex: 1;
    border-left: 1px solid #2b2b2b;
}

.cvc-wrapper input {
    flex: 1;
    padding: 12px 14px;
    font-size: 14px;
    border: none;
    outline: none;
}

.cvv-icon {
    width: 20px;
    height: auto;
    margin-right: 12px;
}

.billing {
    border: 1px solid #2b2b2b;
    border-radius: 6px;
    overflow: hidden;
}

select,
.billing input {
    width: 100%;
    border: none;
    height: 50px;
    border-bottom: 1px solid #2b2b2b;
    padding: 14px;
    font-size: 14px;
    box-sizing: border-box;
    outline: none;
    border-radius: 0px;
}

.billing input::placeholder {
    color: #bdbdbd;
}

select {
    color: #bdbdbd !important;
    /* for placeholder */
}

select:valid {
    color: #2b2b2b !important;
    /* after selection */
}

select:last-child,
.billing input:last-child {
    border-bottom: none;
}

.vault_view_select {
    border: #2b2b2b solid 1px !important;
    border-radius: 6px;
}

.row-two-cols {
    display: flex;
    border-bottom: 1px solid #2b2b2b;
}

.row-two-cols select,
.row-two-cols input {
    flex: 1;
    border-bottom: none;
    border-right: 1px solid #2b2b2b;
}

.row-two-cols input {
    border-right: none;
}

.vault-name-wrapper {
    display: flex;
    /* Equivalent to Tailwind's flex */
    align-items: center;
    /* Equivalent to Tailwind's items-center */
    border-radius: 5px;
    background-color: white;
    padding: 0px 12px;
    /* Equivalent to Tailwind's p-3 */
    width: 100%;
}

.vault-icon {
    margin-right: 2px;
    /* Equivalent to Tailwind's mr-3 */
    width: 1.5rem;
    /* Equivalent to Tailwind's w-6 */
    height: 1.5rem;
    /* Equivalent to Tailwind's h-6 */
}

.vault-name-input {
    flex-grow: 1;
    outline: none;
    border: none !important;
    padding: 0;
    font-size: 1rem;
    /* Equivalent to Tailwind's text-base */
    background-color: transparent;
    /* Ensure background is transparent */
    width: 100% !important;
}

.vault-name-input::placeholder {
    color: var(--secondary-text-color);
}

/*close payment section */

@media (max-width: 768px) {
    .step-sidebar {
        display: none;
    }

    .content-area {
        padding: 0;
        border-left: 0;
        max-width: 100%;
    }

    #progress-bar {
        flex-wrap: wrap;
        justify-content: space-evenly;
    }

    .progress-step {
        flex: inherit;
        width: 100%;
        max-width: 320px;
    }

    .pricing-plans {
        flex-wrap: wrap;
    }

    .pricing-plan,
    .plan-tab {
        flex: inherit;
        width: 100%;
        max-width: 180px;
    }
}

/* Blind Box*/
.blind-box_wrap {
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-color: #fdf1de;
    width: 1400px;
    display: none;
}

.section_heading {
    max-width: 540px !important;
    width: 100%;
}

.spin-text {
    font-size: 1.8rem;
    font-weight: bold;
    color: #2c1810;
    margin-bottom: 30px;
    text-align: center;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}

.blind-cards-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 27px;
    margin: 40px 0;
    flex-wrap: wrap;
    perspective: 1000px;
    width: 100%;
}

.blind-card {
    width: 170px;
    height: 220px;
    background: linear-gradient(145deg, #1a1a1a, #333);
    border-radius: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 3px solid transparent;
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
}

@media (min-width: 769px) {
    .blind-card:nth-child(1) {
        transform: rotate(-8.49deg);
        margin-bottom: -81px;
    }

    .blind-card:nth-child(2) {
        transform: rotate(-4.15deg);
        margin-bottom: -32px;
    }

    .blind-card:nth-child(3) {
        transform: rotate(-2.05deg);
        margin-bottom: -9px;
    }

    .blind-card:nth-child(4) {
        transform: rotate(0deg);
        margin-bottom: 0px;
    }

    .blind-card:nth-child(5) {
        transform: rotate(2.05deg);
        margin-bottom: -9px;
    }

    .blind-card:nth-child(6) {
        transform: rotate(4.15deg);
        margin-bottom: -32px;
    }

    .blind-card:nth-child(7) {
        transform: rotate(8.49deg);
        margin-bottom: -81px;
    }

    .blind-card:nth-child(8) {
        transform: rotate(9deg);
        margin-bottom: -135px;
    }
}

.blind-card::before,
.blind-card::after {
    content: "";
    background-image: url("data:image/svg+xml,%3Csvg width='19' height='26' viewBox='0 0 19 26' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9.5 26L18.5933 0.5H0.406734L9.5 26Z' fill='white'/%3E%3C/svg%3E%0A");
    width: 20px;
    height: 26px;
    display: block;
    position: absolute;
    opacity: 0;
    transition: all 0.3s ease;
}

.blind-card::before {
    top: -2px;
}

.blind-card::after {
    bottom: -2px;
    transform: rotate(180deg);
}

.blind-card.spinning {
    animation: spin 2s ease-in-out;
}

.blind-card:hover,
.blind-card.selected {
    border-color: #fff;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.16);
}

.blind-card:hover:before,
.blind-card:hover::after,
.blind-card.selected::before,
.blind-card.selected::after {
    opacity: 1;
}

.blind-card-content {
    transition: all 0.3s ease;
    backface-visibility: hidden;
}

.blind-card-content img {
    display: block;
}

.reward {
    position: absolute;
    width: 100%;
    height: 100%;
    backface-visibility: hidden;
    transform: rotateY(180deg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    background: linear-gradient(145deg, #ffd700, #ffed4e);
    border-radius: 12px;
}

@keyframes spin {
    0% {
        transform: rotateY(0deg);
    }

    50% {
        transform: rotateY(180deg) scale(1.1);
    }

    100% {
        transform: rotateY(360deg);
    }
}

@keyframes glow {

    0%,
    100% {
        box-shadow: 0 0 20px rgba(255, 215, 0, 0.3);
    }

    50% {
        box-shadow: 0 0 40px rgba(255, 215, 0, 0.8);
    }
}

.blind-card.glowing {
    animation: glow 1.5s ease-in-out infinite;
}

.retrieve-btn {
    background: #000;
    color: white;
    border: none;
    padding: 15px 40px;
    font-size: 14px;
    font-weight: normal;
    border-radius: 50px;
    cursor: pointer;
    transition: all 0.3s ease;
    margin: 70px 0 30px;
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3);
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    margin-right: auto;
}

.retrieve-btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.4);
    background: #000;
}

.retrieve-btn:active {
    transform: translateY(0);
}

.blind-box_wrap .vault-info {
    margin-top: 20px;
    font-size: 1rem;
    color: #2b2b2b;
    text-align: center;
}

.vault-highlight {
    font-weight: bold;
    color: #2b2b2b;
}

.particles {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: -1;
}

.particle {
    position: absolute;
    width: 4px;
    height: 4px;
    background: rgba(255, 215, 0, 0.6);
    border-radius: 50%;
    animation: float 6s ease-in-out infinite;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
        opacity: 0;
    }

    50% {
        transform: translateY(-100px) rotate(180deg);
        opacity: 1;
    }
}

.play-icon {
    font-size: 1rem;
}

.result-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.8);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: 1000;
}

.modal-content {
    background: linear-gradient(145deg, #f4e4bc, #e6d5a8);
    padding: 40px;
    border-radius: 20px;
    text-align: center;
    max-width: 400px;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
}

.modal-reward {
    font-size: 4rem;
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
    gap: 10px;
    align-items: center;
}

.modal-text {
    font-size: 1.3rem;
    color: #2c1810;
    margin-bottom: 20px;
}

.close-btn {
    background: #2c1810;
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1rem;
}

.__skin,
.__guardian {
    width: 100px;
    height: 100px;
    min-height: 120px;
    gap: 10px;
    cursor: pointer;
    padding: 10px;
}

.__skin img,
.__guardian img {
    display: block;
    width: 100%;
    height: 80px;
    object-fit: contain;
}

.__skin span,
.__guardian span {
    display: block;
    text-align: center;
    font-size: 12px;
    color: #000;
    margin-top: 5px;
}

#card-element {
    border: 1px solid #2b2b2b;
    border-radius: 5px;
    padding: 21px;
}

#emailError {
    color: crimson;
    font-size: 12px;
    margin-top: 10px;
}

.alert {
    padding: 10px;
    margin-top: 10px;
    border-radius: 5px;
    position: relative;
}

/* Base alert styles */
.alert {
    position: relative;
    margin-bottom: 20px;
    border: none;
    /* Remove default border */
    border-radius: 8px;
    /* Rounded corners */
    font-size: 16px;
    /* Readable font size */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    /* Subtle shadow */
    transition: opacity 0.3s ease, transform 0.3s ease;
    /* Smooth fade and slide */
}

/* Success alert */
.alert-success {
    background: linear-gradient(135deg, #28a745, #34c759);
    /* Gradient background */
    color: #fff;
    /* White text */
}

/* Error alert */
.alert-error {
    background: linear-gradient(135deg, #dc3545, #e4606d);
    /* Gradient background */
    color: #fff;
    /* White text */
}

/* Strong tag styling */
.alert strong {
    font-weight: 600;
    /* Slightly bold */
    text-transform: capitalize;
    /* Ensure consistent capitalization */
}

/* Close button styling */
.btn-close {
    position: absolute;
    top: 50%;
    right: 16px;
    transform: translateY(-50%);
    /* Center vertically */
    background: none;
    border: none;
    font-size: 18px;
    /* Larger close icon */
    color: #fff;
    /* White close button */
    opacity: 0.8;
    /* Slightly transparent */
    transition: opacity 0.2s ease;
    padding: 8px;
    /* Larger click area */
    cursor: pointer;
}

.btn-close:hover {
    opacity: 1;
    /* Full opacity on hover */
}

/* Animation for fade and show (Bootstrap compatibility) */
.alert.fade {
    opacity: 0;
    transform: translateY(-10px);
    /* Slide up effect */
}

.alert.fade.show {
    opacity: 1;
}

.dropzone {
    min-height: 0px;
    background: transparent;
    border: none;
    padding: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-top: 17px;
}

.dropzone .dz-message {
    margin: 0px !important;
    color: #BDBDBD !important;
    font-size: 12px !important;
}

.upload-icons {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}

.icons__container {
    display: flex;
    gap: 10px;
}

.upload-icon {
    cursor: pointer;
    padding: 10px;
    background: #fff;
    border-radius: 5px;
    transition: background 0.3s;
}

.upload-icon:hover {
    background: #f0f0f0;
}

.image-preview {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.dz-preview {
    position: relative;
    display: flex;
    align-items: center;
    text-align: center;
    border: #2b2b2b solid 1px;
    border-radius: 8px;
    padding: 5px;
    display: flex;
    justify-content: center;
    align-items: center;
}

.dz-file-preview .dz-file-icon {
    font-size: 40px;
    color: #666;
}

.dz-file-preview .dz-filename {
    font-size: 12px;
    word-break: break-all;
    margin-top: 5px;
}

.dz-remove {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #ff4444;
    color: white;
    border: none;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    cursor: pointer;
    font-size: 12px;
}

.error-message {
    color: white;
    margin-top: 10px;
}

.dz-filename {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: none;
    max-width: 150px; /* Adjust this value as needed */
}
.dz-preview{
    height: 50px;
    width: 50px;
    object-fit: cover;
}
.thumbnail-guardian, .thumbnail-skin{
    width: max-content;
    padding: 10px;
    border-radius: 5px;
}

.thumbnail-guardian label, .thumbnail-skin label{
    margin-bottom: 0px;
}
.thumbnail img{
    height: 100px;
    width: 100px;
    object-fit: cover;
}
.thumbnail a{
    height: 100%;
    width: 100%;
}
#vault-name,#vault-unlock-date{
    outline: none;
    width: 100%;
}