.vault-capsule_wrap{
    background-color: #FFF;
}
.progress-bar {
    display: flex;
    margin-bottom: 40px;
    background: white;
    gap: 20px;
}

.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;
}
.progress-step.completed {
    border-color: #408F6E;
}
.progress-step.completed .done-msg{
    display: block;
    color: #408F6E;
}
.progress-step.completed::after {
    opacity: 1;
}

.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: 710px;
}

.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: #000;
    font-family: var(--sub-heading-font);
    font-size: 20px;
}

input[type="text"], textarea {
    width: 100%;
    padding: 12px;
    border: 1px solid #2B2B2B;
    border-radius: 5px;
    font-size: 12px;
    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 {
    flex: 1;
    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 {
    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;
}

.upload-area {
    border: 2px dashed #2B2B2B;
    border-radius: 5px;
    padding: 40px;
    text-align: center;
    margin-bottom: 30px;
    cursor: pointer;
    transition: all 0.2s;
}

.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;
}

.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;
}


.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: 6px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    width: 100%;
    height: 48px;
}
.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;
}

.data-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 0;
    border-bottom: 1px solid #e9ecef;
    font-size: 18px;
}

.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;
}

.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;
}
@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 {
        flex: inherit;
        width: 100%;
        max-width: 180px;
    }
}