/* Global styles */
body {
    background-color: #14161F;
    color: #ffffff;
}

/* Existing font faces */
@font-face {
    font-family: "Block Berthold Regular";
    src: url("../fonts/794a0de6a529290274465576a9a6990b.eot");
    src: url("../fonts/794a0de6a529290274465576a9a6990b.eot?#iefix") format("embedded-opentype"),
    url("../fonts/794a0de6a529290274465576a9a6990b.woff") format("woff"),
    url("../fonts/794a0de6a529290274465576a9a6990b.woff2") format("woff2"),
    url("../fonts/794a0de6a529290274465576a9a6990b.ttf") format("truetype"),
    url("../fonts/794a0de6a529290274465576a9a6990b.svg#Block Berthold Regular") format("svg");
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Austere';
    font-style: normal;
    font-weight: normal;
    src: local('Austere'), url('../fonts/Austere.ttf') format('truetype');
}

@font-face {
    font-family: 'Santeria Signature';
    font-style: normal;
    font-weight: normal;
    src: local('Austere'), url('../fonts/Santeria Signature.ttf') format('truetype');
}

#orderModal .modal-body {
    display: flex;
    flex-direction: column;
    align-items: center;
}

#orderModal .modal-body input {
    width: 100%;
    height: 50px;
    margin-top: 20px;
    border-radius: 8px;
    text-indent: 15px;
    border: 1px solid grey;
}

.sendFormBtn {
    text-decoration: none;
    display: inline-block;
    padding-right: 40px;
    padding-left: 40px;
    height: 45px;
    line-height: 45px;
    border-radius: 12px;

    font-family: 'Montserrat', sans-serif;
    font-size: 11px;
    margin: 0 auto;
    text-transform: uppercase;
    text-align: center;
    letter-spacing: 3px;
    font-weight: 600;
    background: #2EE59D;
    box-shadow: 0 15px 20px rgba(46, 229, 157, .4);
    transition: .3s;
    color: white;
    outline: none;
    border: none;
    cursor: pointer;
}

#orderModal .modal-dialog {
    max-width: 400px;
}





body {
    margin: 0;
    padding: 0;
    width: 100%;
    font-family: 'Gilroy',
    sans-serif;

}

a,
p,
h1,
h2,
h3,
h4,
h5,
h6 {
    margin: 0;
    text-decoration: none;
    line-height: 1.2;
}

button:focus,
textarea:focus,
select:focus {
    outline: none !important;
    box-shadow: none;
}

input:focus {
    outline: none !important;
}

a:active,
a:focus {
    outline: 0;
    outline: none !important;
    -moz-outline-style: none;
}

span,
button,
img,
a {
    transition: .3s all ease;
}

a,
span,
button {
    display: inline-block;
}

.wrapper {
    overflow: hidden;
    min-height: 100vh;
    height: 100%;
    padding-bottom: 70px;
}


header .navbar {
    padding: 0;
    width: 100%;
    background: #f8f8f8;
    border-bottom: 1px solid #202020;
    justify-content: space-between;
    height: 60px;
}

header .navbar .navbar-brand {
    padding: 0;
    margin-right: 0;
    max-width: 292px;
    width: 100%;
    height: 100%;
    text-align: center;
    border-right: 1px solid #202020;
    display: flex;
    align-items: center;
    justify-content: center;
}

header .navbar .navbar-collapse {
    height: 100%;
}

header .navbar .navbar-nav {
    margin-left: auto;
    margin-right: auto;
    justify-content: space-between;
    width: 100%;
    height: 100%;
}

header .navbar .navbar-nav .nav-item {
    border-right: 1px solid #202020;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-expand-lg .navbar-nav .nav-link {
    padding: 0;
    font-size: 18px;
    line-height: 1.2;
    width: 100%;
    height: 100%;
    color: #202020;
    display: flex;
    align-items: center;
    justify-content: center;
}

.navbar-expand-lg .navbar-nav .nav-link:hover {
    color: #f8f8f8;
    background-color: #202020;
}

.navbar-expand-lg .navbar-nav .nav-link.orange,
.navbar-expand-lg .navbar-nav .nav-link.orange:hover {
    background: linear-gradient(112.45deg,
    #D5AC52 -4.35%,
    #EAD373 96.27%);
    color: #202020;
}

header .nav-right {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 292px;
    width: 100%;
    height: 100%;
    text-align: center;
    gap: 0 50px;
}

header .nav-right a {
    font-size: 18px;
    line-height: 1.2;
    color: #202020;
    opacity: 0.5;
}

header .nav-right a.active {
    opacity: 1;
}

/* main */
.main-sec {
    padding: 50px 90px;
}

.main-left {
    width: 100%;
}

.main-left-title {
    display: block;
    font-size: 18px;
    line-height: 1.2;
    color: #202020;
    margin-bottom: 20px;
}

.main-rov {
    display: flex;
    align-items: flex-start;
    gap: 40px 80px;
    justify-content: center;
}


/* dropdown and gallery */
.dropdown {
    position: relative;
    display: inline-block;
    margin-bottom: 20px;
}

.dropdown select {
    padding: 10px;
    font-size: 16px;
}

.design-gallery {
    width: 100%;
    max-width: 421px;
    display: grid;
    padding-bottom: 20px;

    grid-template-columns: 1fr 1fr;
    gap: 20px;

    box-shadow: rgba(0, 0, 0, 0.05) 0rem 1.25rem 1.6875rem 0rem;
    border-radius: 1rem;
    border: none;


    background-color: rgb(255, 255, 255);
}

.design-item {
    display: none;
    border: 1px solid #adadad;
    cursor: pointer;
    border-radius: 4px;
    text-align: center;
    min-width: 160px;
    width: 160px;
    height: 100px;
}


.design-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}


.design-info {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    max-width: 411px;
    margin-top: 14px;
}


.design-gallery .design-item {
    display: none;
}

.design-gallery .design-item.visible {
    display: block;
}

.pagination {
    margin-left: 8px;
    cursor: pointer;
}

.pagination.active {
    font-weight: 700;
}

.green-btn {
    padding-top: 10px;
    padding-bottom: 10px;
    padding-left: 20px;
    padding-right: 20px;
    font-weight: 700;
    color: #000000;
    border-radius: 8px;
    border: 2px solid #000000;
    background-color: transparent;
    text-align: center;
}

.wrapper-select {
    position: relative;
    width: 100%;
    max-width: 380px;
}

.title-span {
    font-size: 14px;
    background-color: white;
    border-radius: 8px;
    position: absolute;

    top: -10px;
    left: 20px;
    z-index: 2;
}

.grayInput {
    letter-spacing: 0.00938em;
    box-sizing: border-box;
    cursor: text;
    -webkit-box-align: center;
    position: relative;
    border: 0.0625rem solid rgb(210, 214, 218);

    width: 100% !important;
    height: auto !important;
    text-indent: 20px;
    font-weight: 400 !important;
    font-size: 20px;
    line-height: 1.4 !important;
    color: rgb(73, 80, 87) !important;
    background-color: rgb(255, 255, 255) !important;
    background-clip: padding-box !important;
    appearance: none !important;
    transition: box-shadow 150ms, border-color 150ms, padding 150ms !important;
    display: flex !important;
    padding: 0.5rem 1.75rem 0.5rem 0.75rem !important;
    border-radius: 0.5rem !important;
}

.gallery-content {
    margin-top: 40px;
}

.design-info p {
    font-size: 16px;
}

.pagination {
    display: flex;
    align-items: center;
    max-width: 421px;
    width: 100%;
    justify-content: center;
}

.pagination button {
    background-color: transparent;
    outline: none;
    border: none;
    margin-left: 20px;
    margin-right: 20px;
    border-bottom: 2px solid #2EE59D;
}

.pagination button svg {
    fill: #2EE59D;
}

.pagination button:disabled {
    border-color: grey;
}

.pagination button:disabled svg {
    fill: grey;
}

.pagination span,
.pagination .page-link {
    font-size: 16px;
    line-height: 1.2;
    color: #202020;
    padding: 0;
    border: none;
}

.pagination .page-link {
    text-align: center;
    margin: 0 10px;
    border-bottom: 1px solid transparent;
}

.pagination .page-link.active {
    border-color: #202020;
}

.page-link:hover {
    background: transparent;
}

.page-link:focus {
    box-shadow: none;
    outline: none;
    background: transparent;
}


/* card */
/* .card-box {
	max-width: 800px;
	width: 100%;
	max-height: 500px;
	height: 100%;
	background: linear-gradient(113.06deg,
	#040404 7.79%,
	#2D2E2E 50.83%,
	#040404 96.64%);
} */

.visual__card {
    position: relative;
    width: 37.5213541667vw;
    height: 23.6722223438vw;
    transform-style: preserve-3d;
    transform: rotateY(0deg);
    transition: transform ease-in-out 750ms;
    margin-bottom: 3.0864197531vw;
    font-size: .4466458333vw
}

.visual__card-side-inscr {
    position: absolute;
    top: 10%;
    left: 10%;
    min-height: .78125vw;
    cursor: pointer;
    border: none
}

.visual__card-side-inscr-border {
    display: none;
    position: absolute;
    left: 0;
    width: 100%;
    height: .0520833333vw;
    background-color: #0094ff
}

.visual__card-side-inscr-border_top {
    top: 0
}

.visual__card-side-inscr-border_bottom {
    bottom: 0
}

.visual__card-side-inscr-dot {
    display: none;
    position: absolute;
    top: 0;
    width: 1.0416666667vw;
    height: 100%;
    cursor: ew-resize
}

.visual__card-side-inscr-dot::before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
    width: .0520833333vw;
    transform: translateX(-50%);
    background-color: #0094ff
}

.visual__card-side-inscr-dot::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: .5208333333vw;
    height: .5208333333vw;
    border-radius: 50%;
    background-color: #fff;
    border: .0520833333vw solid #0094ff;
    transform: translate(-50%,
    -50%)
}

.visual__card-side-inscr-dot_left {
    left: -.5208333333vw
}

.visual__card-side-inscr-dot_right {
    right: -.5208333333vw
}

.visual__card-side-inscr-text {
    width: 100%
}

.visual__card-side-inscr-text svg {
    width: 100%;
    height: auto;
    pointer-events: none
}

.visual__card-side-inscr_active {
    cursor: grab
}

.visual__card-side-inscr_active-grab {
    cursor: grabbing
}

.visual__card-side-inscr_active .visual__card-side-inscr-border, .visual__card-side-inscr_active .visual__card-side-inscr-dot {
    display: block
}

.visual__card-side-a, .visual__card-side-b {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #040404;
    transform-style: preserve-3d;
    transform: translateZ(0.4409171076vw);
    border-radius: 1.0241798942vw;
    backface-visibility: hidden;
    overflow: hidden
}

.visual__card-side-b {
    background-size: cover !important;
}

.visual__card-side-a-chip {
    position: absolute;
    top: 30.9%;
    left: 10.59%;
    z-index: 100;
    user-select: none;
    pointer-events: none
}

.visual__card-side-a-chip.visual__card-side-a-chip_small {
    width: 11.9048%;
    height: 15.0943%
}

.visual__card-side-a-chip.visual__card-side-a-chip_big {
    width: 15.4762%;
    height: 20.7547%
}

.visual__card-side-a-picture {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 50;
    pointer-events: none
}

.visual__card-side-a-picture picture, .visual__card-side-a-picture img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    position: relative;
    z-index: 1;
}

.visual__card-side-b {
    pointer-events: none;
    transform: rotateY(180deg) translateZ(0.4409171076vw)
}

.visual__card-side-b-magnetic-stripe {
    position: absolute;
    top: 7.27%;
    left: 0;
    width: 100%;
    height: 23.64%;
    z-index: 100;
    user-select: none;
    pointer-events: none;
    background: #adadad
}

.visual__card-side-b-signature-stripe {
    position: absolute;
    bottom: 41.81%;
    left: 4.71%;
    width: 75.29%;
    height: 16.99%;
    z-index: 100;
    user-select: none;
    pointer-events: none;
    background: #fff
}

.visual__card-side-b-logo {
    position: absolute;
    top: 45%;
    right: 1.2%;
    width: 17%;
    height: 8.71%;
    user-select: none;
    pointer-events: none;
    z-index: 100;
    background-position: center center;
    background-size: 100% 100%;
    background-repeat: no-repeat
}

.visual__card-side-b-card-time, .visual__card-side-b-card-num {
    position: absolute;
    top: 60%;
    left: 4.71%;
    z-index: 100;
    font-family: "Card", monospace;
    font-weight: 400;
    font-size: 1.7195767196vw;
    line-height: 1.7195767196vw;
    color: inherit;
    user-select: none;
    pointer-events: none;
    text-shadow: inherit
}

.visual__card-side-b-card-time {
    left: unset;
    right: 20%
}

.visual__card-side-b-picture {
    position: absolute;
    top: 0;
    left: 0;
    min-height: 10%;
    width: 100%;
    z-index: 50
}

.visual__card-side-b-picture svg {
    width: 100%
}

.visual__card-side-b-picture_move {
    cursor: pointer;
    background: #4b4b4b
}

#visualChoiceB:checked ~ .visual__card {
    transform: rotateY(180deg)
}

#visualChoiceB:checked ~ .visual__card .visual__card-side-b {
    pointer-events: initial
}

#visualChoiceB:checked ~ .visual__card .visual__card-side-a {
    pointer-events: none
}

.visual__bottom {
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: space-between
}

.visual__bottom-header {
    color: #202020;
    font-family: "Gilroy", sans-serif;
    font-weight: 300;
    font-size: .9382716049vw;
    line-height: 1.1252204586vw;
    margin-bottom: 1.1463844797vw
}

.visual__bottom-price {
    font-size: 4.4338624339vw;
    line-height: 5.3209876543vw;
    margin-right: .7813051146vw;
    display: inline
}

.visual__bottom-btn {
    position: relative;
    width: 6.8262786596vw;
    height: 6.8262786596vw;
    border: none;
    background: none;
    outline: none;
    cursor: pointer;
    color: #202020;
    font-family: "Gilroy", sans-serif;
    font-weight: 300;
    font-size: .9382716049vw;
    line-height: 1.1252204586vw;
    transform: translateY(-0.7054673721vw)
}

.visual__bottom-btn-inner {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform: rotateY(0deg);
    transform-style: preserve-3d;
    transition: transform ease-in-out 450ms
}

.visual__bottom-btn-inner_dark, .visual__bottom-btn-inner_white {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    transform-style: preserve-3d;
    backface-visibility: hidden
}

.visual__bottom-btn-inner_dark {
    background: #202020;
    color: #f8f8f8;
    transform: translateZ(0.4409171076vw)
}

.visual__bottom-btn-inner_white {
    background: #fff;
    color: #202020;
    transform: rotateY(180deg) translateZ(-0.4409171076vw)
}

.visual__bottom-btn:hover .visual__bottom-btn-inner {
    transform: rotateY(180deg)
}

.sub-designs {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    padding: 4.3229166667vw 0 0
}

.sub-designs__label {
    position: relative;
    width: 7.1354166667vw;
    height: 4.6166145833vw;
    border: .0881834215vw solid #adadad;
    border-radius: .5624206349vw;
    margin-bottom: .78125vw;
    cursor: pointer
}

.sub-designs__label span {
    position: absolute;
    top: 100%;
    left: 100%;
    height: 1.7636684303vw;
    width: 1.7636684303vw;
    background-image: url(/images/checkmark.svg);
    background-position: center center;
    background-size: 100% 100%;
    opacity: 0;
    pointer-events: none;
    transition: opacity ease-in-out 300ms;
    transform: translate(-70%,
    -70%)
}

.sub-designs__label:hover span {
    opacity: .4
}

.sub-designs__label input:checked ~ span {
    opacity: 1
}

.sub-designs__label svg {
    width: 100%;
    height: 100%
}


.main-select {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
}

.main-select .next-btn {
    min-width: 100px;
    min-height: 100px;
    border-radius: 50%;
    border: 1px solid #202020;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    background-color: #fff;
}

.title-p {
    margin-bottom: 20px;
    font-size: 18px;
    line-height: 1.2;
    color: #202020;
}


.visual {
    color: #202020;
    font-family: "Gilroy", sans-serif;
    font-weight: 300;
    font-size: .9382716049vw;
    line-height: 1.1252204586vw;
}

.visual__color-container-state-btn {
    display: none;
    flex-direction: row;
    align-items: center;
    width: 100%;
    height: 100%;
    background: none;
    outline: none;
    border: none;
    text-align: left;
    padding-left: 2.2222222222vw
}

.visual__color-container-state-btn-color {
    display: inline-block;
    position: relative;
    width: 3.5555555556vw;
    height: 3.5555555556vw;
    border: .1311111111vw solid #202020;
    margin-right: 2.2222222222vw
}

.visual__color-container-state-btn-name {
    display: none
}

.visual__color-container-inner {
    display: flex;

    width: 100%;
    margin-bottom: 20px;
}

.visual__color-label {
    position: relative;
    cursor: pointer;
    width: 1.3020833333vw;
    width: 40px;
    margin-right: 10px;
    border-radius: 7px;

    height: 40px;
    /* height: 1.3020833333vw; */
    /* border: .0520833333vw solid #202020; */
    background: #202020;
}

.visual__color-label::after {
    right: 5px;
    bottom: 5px;
    content: url("../images/checkmark.svg");
    position: absolute;
    height: 10px;
    width: 10px;
    opacity: 0;
}

.visual__color-label:hover::after {
    opacity: .6
}

.visual__color-label-color {
    display: block;
    position: relative;
    border-radius: 8px;
    width: 100%;
    height: 100%
}

.visual__color-label-name {
    display: none
}

#visualChoiceA:checked ~ .visual__top #visualChoiceALabel, #visualChoiceA:checked ~ .visual__top #visualChoiceALabel::after, #visualChoiceB:checked ~ .visual__top #visualChoiceBLabel, #visualChoiceB:checked ~ .visual__top #visualChoiceBLabel::after {
    opacity: 1
}

#visualChoiceB:checked ~ .visual__top #side-b-state, .visual #side-a-state {
    display: inline-block
}

#visualChoiceB:checked ~ .visual__top #side-a-state {
    display: none
}

.visual #black-silver-mat-card-label .visual__color-label-color,
#black-silver-mat-card:checked ~ .visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right,
    #040404 0%,
    #040404 50%,
    #DFDFDF 50%,
    #DFDFDF 100%);
}

#black-silver-mat-card:checked ~ .visual #black-silver-mat-card-label::after {
    opacity: 1;
}

#black-silver-mat-card:checked ~ .visual #black-silver-mat-card-state {
    display: inline-block;
}

.visual .visual__card_black-silver-mat .visual__card-side-a,
.visual .visual__card_black-silver-mat .visual__card-side-b,
.buy-pop__inner .preview .preview-card_black-silver-mat {
    color: #f2f2f2;
    background: linear-gradient(113.06deg,
    #040404 7.79%,
    #2D2E2E 50.83%,
    #040404 96.64%);
}

.visual .visual__card_black-silver-mat .visual__card-side-a .fillable,
.visual .visual__card_black-silver-mat .visual__card-side-a .svgdevtextmc,
.visual .visual__card_black-silver-mat .visual__card-side-b .fillable,
.visual .visual__card_black-silver-mat .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_black-silver-mat .fillable,
.buy-pop__inner .preview .preview-card_black-silver-mat .svgdevtextmc {
    fill: #f2f2f2;
}

.visual .visual__card_black-silver-mat .visual__card-side-a .strokable,
.visual .visual__card_black-silver-mat .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_black-silver-mat .strokable {
    stroke: #f2f2f2;
}

.visual .visual__card_black-silver-mat .visual__card-side-b-logo,
.buy-pop__inner .preview .preview-card_black-silver-mat .preview-card-logo {
    background-image: url(/images/cardLogos/Metal-white.svg);
}

.visual #black-gold-mat-card-label .visual__color-label-color,
#black-gold-mat-card:checked ~ .visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right,
    #040404 0%,
    #040404 50%,
    #F3CB5B 50%,
    #F3CB5B 100%);
}

#black-gold-mat-card:checked ~ .visual #black-gold-mat-card-label::after {
    opacity: 1;
}

#black-gold-mat-card:checked ~ .visual #black-gold-mat-card-state {
    display: inline-block;
}

.visual .visual__card_black-gold-mat .visual__card-side-a,
.visual .visual__card_black-gold-mat .visual__card-side-b,
.buy-pop__inner .preview .preview-card_black-gold-mat {
    color: #d5b869;
    background: linear-gradient(113.06deg,
    #040404 7.79%,
    #2D2E2E 50.83%,
    #040404 96.64%);
}

.visual .visual__card_black-gold-mat .visual__card-side-a .fillable,
.visual .visual__card_black-gold-mat .visual__card-side-a .svgdevtextmc,
.visual .visual__card_black-gold-mat .visual__card-side-b .fillable,
.visual .visual__card_black-gold-mat .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_black-gold-mat .fillable,
.buy-pop__inner .preview .preview-card_black-gold-mat .svgdevtextmc {
    fill: url(#gold-gradient);
}

.visual .visual__card_black-gold-mat .visual__card-side-a .strokable,
.visual .visual__card_black-gold-mat .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_black-gold-mat .strokable {
    stroke: url(#gold-gradient);
}

.visual .visual__card_black-gold-mat .visual__card-side-b-logo,
.buy-pop__inner .preview .preview-card_black-gold-mat .preview-card-logo {
    background-image: url(/images/cardLogos/Metal-gold.svg);
}

.visual #gold-mirror-card-label .visual__color-label-color,
#gold-mirror-card:checked ~ .visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right,
    #FED760 0%,
    #9E761B 50%,
    #DFDFDF 50%,
    #DFDFDF 100%);
}

#gold-mirror-card:checked ~ .visual #gold-mirror-card-label::after {
    opacity: 1;
}

#gold-mirror-card:checked ~ .visual #gold-mirror-card-state {
    display: inline-block;
}

.visual .visual__card_gold-mirror .visual__card-side-a,
.visual .visual__card_gold-mirror .visual__card-side-b,
.buy-pop__inner .preview .preview-card_gold-mirror {
    color: #f2f2f2;
    background: linear-gradient(113.06deg,
    #A87234 7.79%,
    #FED760 30.47%,
    #AB7F42 55%,
    #D1A751 78.6%,
    #A0763C 96.64%);
}

.visual .visual__card_gold-mirror .visual__card-side-a .fillable,
.visual .visual__card_gold-mirror .visual__card-side-a .svgdevtextmc,
.visual .visual__card_gold-mirror .visual__card-side-b .fillable,
.visual .visual__card_gold-mirror .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_gold-mirror .fillable,
.buy-pop__inner .preview .preview-card_gold-mirror .svgdevtextmc {
    fill: #f2f2f2;
}

.visual .visual__card_gold-mirror .visual__card-side-a .strokable,
.visual .visual__card_gold-mirror .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_gold-mirror .strokable {
    stroke: #f2f2f2;
}

.visual .visual__card_gold-mirror .visual__card-side-b-logo,
.buy-pop__inner .preview .preview-card_gold-mirror .preview-card-logo {
    background-image: url(/images/cardLogos/Metal-white.svg);
}

.visual #gold-mirror-black-card-label .visual__color-label-color,
#gold-mirror-black-card:checked ~ .visual .visual__color-container-state-btn-color {
    background: linear-gradient(to bottom right,
    #FED760 0%,
    #9E761B 50%,
    #040404 50%,
    #040404 100%);
}

#gold-mirror-black-card:checked ~ .visual #gold-mirror-black-card-label::after {
    opacity: 1;
}

#gold-mirror-black-card:checked ~ .visual #gold-mirror-black-card-state {
    display: inline-block;
}

.visual .visual__card_gold-mirror-black .visual__card-side-a,
.visual .visual__card_gold-mirror-black .visual__card-side-b,
.buy-pop__inner .preview .preview-card_gold-mirror-black {
    color: #202020;
    background: linear-gradient(113.06deg,
    #A87234 7.79%,
    #FED760 30.47%,
    #AB7F42 55%,
    #D1A751 78.6%,
    #A0763C 96.64%);
}

.visual .visual__card_gold-mirror-black .visual__card-side-a .fillable,
.visual .visual__card_gold-mirror-black .visual__card-side-a .svgdevtextmc,
.visual .visual__card_gold-mirror-black .visual__card-side-b .fillable,
.visual .visual__card_gold-mirror-black .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_gold-mirror-black .fillable,
.buy-pop__inner .preview .preview-card_gold-mirror-black .svgdevtextmc {
    fill: #202020;
}

.visual .visual__card_gold-mirror-black .visual__card-side-a .strokable,
.visual .visual__card_gold-mirror-black .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_gold-mirror-black .strokable {
    stroke: #202020;
}

.visual .visual__card_gold-mirror-black .visual__card-side-b-logo,
.buy-pop__inner .preview .preview-card_gold-mirror-black .preview-card-logo {
    background-image: url(/images/cardLogos/Metal-black.svg);
}

.visual #black-gold-rib-card-label .visual__color-label-color,
#black-gold-rib-card:checked ~ .visual .visual__color-container-state-btn-color {
    background: linear-gradient(113.06deg,
    #646464 7.79%,
    #393939 50.37%,
    #6F6F6F 96.64%);
}

#black-gold-rib-card:checked ~ .visual #black-gold-rib-card-label::after {
    opacity: 1;
}

#black-gold-rib-card:checked ~ .visual #black-gold-rib-card-state {
    display: inline-block;
}

.visual .visual__card_black-gold-rib .visual__card-side-a,
.visual .visual__card_black-gold-rib .visual__card-side-b,
.buy-pop__inner .preview .preview-card_black-gold-rib {
    color: #d5b869;
    background: url(/images/black-rib-back.jpg) 0 0 / cover no-repeat;
}

.visual .visual__card_black-gold-rib .visual__card-side-a .fillable,
.visual .visual__card_black-gold-rib .visual__card-side-a .svgdevtextmc,
.visual .visual__card_black-gold-rib .visual__card-side-b .fillable,
.visual .visual__card_black-gold-rib .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_black-gold-rib .fillable,
.buy-pop__inner .preview .preview-card_black-gold-rib .svgdevtextmc {
    fill: url(#gold-gradient);
}

.visual .visual__card_black-gold-rib .visual__card-side-a .strokable,
.visual .visual__card_black-gold-rib .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_black-gold-rib .strokable {
    stroke: url(#gold-gradient);
}

.visual .visual__card_black-gold-rib .visual__card-side-b-logo,
.buy-pop__inner .preview .preview-card_black-gold-rib .preview-card-logo {
    background-image: url(/images/cardLogos/Metal-gold.svg);
}

.visual #red-card-label .visual__color-label-color,
#red-card:checked ~ .visual .visual__color-container-state-btn-color {
    background: linear-gradient(130.61deg,
    #B70404 0%,
    #E25B5B 50%,
    #B70404 100%);
}

#red-card:checked ~ .visual #red-card-label::after {
    opacity: 1;
}

#red-card:checked ~ .visual #red-card-state {
    display: inline-block;
}

.visual .visual__card_red .visual__card-side-a,
.visual .visual__card_red .visual__card-side-b,
.buy-pop__inner .preview .preview-card_red {
    color: #f2f2f2;
    background: linear-gradient(130.61deg,
    #B70404 0%,
    #E25B5B 50%,
    #B70404 100%);
}

.visual .visual__card_red .visual__card-side-a .fillable,
.visual .visual__card_red .visual__card-side-a .svgdevtextmc,
.visual .visual__card_red .visual__card-side-b .fillable,
.visual .visual__card_red .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_red .fillable,
.buy-pop__inner .preview .preview-card_red .svgdevtextmc {
    fill: #f2f2f2;
}

.visual .visual__card_red .visual__card-side-a .strokable,
.visual .visual__card_red .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_red .strokable {
    stroke: #f2f2f2;
}

.visual .visual__card_red .visual__card-side-b-logo,
.buy-pop__inner .preview .preview-card_red .preview-card-logo {
    background-image: url(/images/cardLogos/Metal-white.svg);
}

.visual #blue-card-label .visual__color-label-color,
#blue-card:checked ~ .visual .visual__color-container-state-btn-color {
    background: linear-gradient(130.61deg,
    #1C55A2 0%,
    #547EB8 100%);
}

#blue-card:checked ~ .visual #blue-card-label::after {
    opacity: 1;
}

#blue-card:checked ~ .visual #blue-card-state {
    display: inline-block;
}

.visual .visual__card_blue .visual__card-side-a,
.visual .visual__card_blue .visual__card-side-b,
.buy-pop__inner .preview .preview-card_blue {
    color: #f2f2f2;
    background: linear-gradient(130.61deg,
    #0441B7 0%,
    #5BB2E2 50%,
    #044CB7 100%);
}

.visual .visual__card_blue .visual__card-side-a .fillable,
.visual .visual__card_blue .visual__card-side-a .svgdevtextmc,
.visual .visual__card_blue .visual__card-side-b .fillable,
.visual .visual__card_blue .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_blue .fillable,
.buy-pop__inner .preview .preview-card_blue .svgdevtextmc {
    fill: #f2f2f2;
}

.visual .visual__card_blue .visual__card-side-a .strokable,
.visual .visual__card_blue .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_blue .strokable {
    stroke: #f2f2f2;
}

.visual .visual__card_blue .visual__card-side-b-logo,
.buy-pop__inner .preview .preview-card_blue .preview-card-logo {
    background-image: url(/images/cardLogos/Metal-white.svg);
}

.visual #green-card-label .visual__color-label-color,
#green-card:checked ~ .visual .visual__color-container-state-btn-color {
    background: linear-gradient(130.61deg,
    #137B0A 0%,
    #50CC3C 50%,
    #137B0A 100%);
}

#green-card:checked ~ .visual #green-card-label::after {
    opacity: 1;
}

#green-card:checked ~ .visual #green-card-state {
    display: inline-block;
}

.visual .visual__card_green .visual__card-side-a,
.visual .visual__card_green .visual__card-side-b,
.buy-pop__inner .preview .preview-card_green {
    color: #f2f2f2;
    background: linear-gradient(130.61deg,
    #137B0A 0%,
    #50CC3C 50%,
    #137B0A 100%);
}

.visual .visual__card_green .visual__card-side-a .fillable,
.visual .visual__card_green .visual__card-side-a .svgdevtextmc,
.visual .visual__card_green .visual__card-side-b .fillable,
.visual .visual__card_green .visual__card-side-b .svgdevtextmc,
.buy-pop__inner .preview .preview-card_green .fillable,
.buy-pop__inner .preview .preview-card_green .svgdevtextmc {
    fill: #f2f2f2;
}

.visual .visual__card_green .visual__card-side-a .strokable,
.visual .visual__card_green .visual__card-side-b .strokable,
.buy-pop__inner .preview .preview-card_green .strokable {
    stroke: #f2f2f2;
}

.visual .visual__card_green .visual__card-side-b-logo,
.buy-pop__inner .preview .preview-card_green .preview-card-logo {
    background-image: url(/images/cardLogos/Metal-white.svg);
}

.visual__color-container-inner {
    width: 20.833333333333336vw
}

@media (max-width: 768px) {
    .visual__color-container-inner {
        width: 55.55555555555556vw;
    }

    #color-state:checked ~ .visual__color-container-inner {
        height: 46.666666666666664vw
    }
}


footer {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background: #fff;
    z-index: 10;
}

footer .ftr-block {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 25px 90px;
}

footer .ftr-block a,
footer .ftr-block span {
    font-size: 18px;
    line-height: 20px;
    color: #202020;
}

.change-side {
    background: transparent;
    border: 1px solid grey;
    padding: 10px;
    margin-top: 10px;
    margin-bottom: 10px;
    display: inline-block;
    cursor: pointer;
    border-radius: 8px;
}

.wrapper-number-inputs {
    display: flex;
}

.date-card {
    width: 80px;
    border-radius: 8px;
    height: 46px;
    border: 0.0625rem solid rgb(210, 214, 218);
    margin-left: 10px;
    text-align: center;
}

/* custom checkbox */
.control {
    display: block;
    position: relative;
    cursor: pointer;
}

.control input {
    position: absolute;
    z-index: -1;
    opacity: 0;
}

.control__indicator {
    position: absolute;
    right: -10px;
    bottom: -10px;
    height: 28px;
    width: 28px;
    opacity: 0;
}

.control__indicator img {
    width: 28px;
    height: 28px;
}

.control:hover input ~ .control__indicator {
    opacity: 0.5;
}

.control input:checked ~ .control__indicator:hover,
.control input:checked ~ .control__indicator {
    opacity: 1;
}

.control__indicator:after {
    content: '';
    position: absolute;
    display: none;
}

.control input:checked ~ .control__indicator:after {
    display: block;
}

.control--checkbox .control__indicator:after {
    left: 8px;
    top: 4px;
    width: 3px;
    height: 8px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.control--checkbox input:disabled ~ .control__indicator:after {
    border-color: #7b7b7b;
}

.control--radio .control__indicator:after {
    background-image: url('../images/checkmark.svg');
    background-repeat: no-repeat;
    background-size: 27px;
}

.control--radio input:disabled ~ .control__indicator:after {
    background: #7b7b7b;
}

/* custom select style */
.select-hidden {
    display: none;
    visibility: hidden;
    padding-right: 10px;
}

.select {
    cursor: pointer;
    display: inline-block;
    position: relative;
    width: 400px;
    height: 50px;
}

.select-styled {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-color: transparent;
    border: 1px solid #202020;
    height: 50px;
    padding: 0 14px;
    -moz-transition: all 0.2s ease-in;
    -o-transition: all 0.2s ease-in;
    -webkit-transition: all 0.2s ease-in;
    transition: all 0.2s ease-in;
    color: #202020;
    font-size: 18px;
    line-height: 1.2;
    display: flex;
    align-items: center;
}

.select-styled:after {
    content: "";
    width: 22px;
    height: 22px;
    position: absolute;
    top: 16px;
    right: 14px;
    background-image: url('../images/plus.svg');
    background-repeat: no-repeat;
    background-size: 22px;
    transition: .3s all ease;
}

.select-styled:active:after,
.select-styled.active:after {
    transform: rotate(45deg);
}

.select-options {
    display: none;
    position: absolute;
    top: 99%;
    right: 0;
    left: 0;
    z-index: 999;
    margin: 0;
    padding: 0;
    list-style: none;
    background-color: #fff;
    border: 1px solid #202020;
    max-height: 340px;
    overflow-x: hidden;
    overflow-y: auto;
    padding: 0 10px;
    transition: .3s all ease;
}

.select-options::-webkit-scrollbar-track {
    background-color: #F5F5F5;
}

.select-options::-webkit-scrollbar {
    width: 4px;
    background-color: #F5F5F5;
}

.select-options::-webkit-scrollbar-thumb {
    background-color: #7b7b7b;
}

.select-options li {
    margin: 0;
    padding: 12px 0;
    border-top: 1px solid #202020;
    -moz-transition: all 0.15s ease-in;
    -o-transition: all 0.15s ease-in;
    -webkit-transition: all 0.15s ease-in;
    transition: all 0.15s ease-in;
    font-size: 18px;
    line-height: 1.2;
}

.select-options li:first-child {
    border-top: none;
}

.select-options li:hover,
.select-options li.is-selected {
    background: #e9e9e9;
}

.select-options li[rel="hide"] {
    display: none;
}


/*@media only screen and (max-width: 480px){}*/
input[type="radio"] {
    display: none;
}

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

#black-silver-mat-card + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #DFDFDF 50%, #DFDFDF 100%);
}

#black-silver-mat-card + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #DFDFDF 50%, #DFDFDF 100%);
}

#black-gold-mat-card-label + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #F3CB5B 50%, #F3CB5B 100%);
}

#gold-mirror-card + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #FED760 0%, #9E761B 50%, #DFDFDF 50%, #DFDFDF 100%);

}

#gold-mirror-black-card-label + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #FED760 0%, #9E761B 50%, #040404 50%, #040404 100%);

}

label[for="black-gold-rib-card"] .visual__color-label-color {
    background: linear-gradient(113.06deg, #646464 7.79%, #393939 50.37%, #6F6F6F 96.64%);
}

label[for="red-card-label"] .visual__color-label-color {
    background: linear-gradient(130.61deg, #B70404 0%, #E25B5B 50%, #B70404 100%);
}

label[for="blue-card"] .visual__color-label-color {
    background: linear-gradient(130.61deg, #1C55A2 0%, #547EB8 100%);
}

label[for="green-card"] .visual__color-label-color {
    background: linear-gradient(130.61deg, #137B0A 0%, #50CC3C 50%, #137B0A 100%);
}

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

.step-2 {
    display: flex;
    flex-direction: column;
    width: 100%;
}

.configurator__card-data-radio-cont {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.0416666667vw;
    width: 340px;
    flex-wrap: wrap;
    margin-top: 30px;

}

.configurator__card-data-radio-cont span::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 80%;
    height: 80%;
    transform: translate(-50%, -50%);
    opacity: 0;
    transition: opacity ease-in-out 400ms;
    background: green;
}

input[name="chipInput"]:checked + label {
    border: 2px solid #000000;
}

input[name="chipInput"] + label {
    padding: 10px;
    border-radius: 8px;
}

.hover-block {
    background-color: white;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 10px;
    padding-right: 10px;
    position: absolute;
    top: -50px;
    font-size: 16px;
    width: 320px;
    border-radius: 8px;
    z-index: 10;
    text-align: center;
    font-weight: 600;
    box-shadow: 0 15px 20px rgba(88, 89, 88, 0.4);
    color: black;
    display: none;
}

label:hover .hover-block {
    display: block;
}

.configurator__card-data-radio-cont span {
    position: relative;
    width: 2.7083333333vw;
    height: 2.5vw;
    margin-right: .78125vw;
    border: .0520833333vw solid #202020;
    background: #fff;
}

.configurator__card-data-radio-cont label input:checked ~ span::after {
    opacity: 1;
}

.configurator__card-data-radio-cont label {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-direction: row;
    margin-top: 20px;
    cursor: pointer;
}

.configurator__card-data-desc button {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    /*border: none;*/
    outline: none;
    background: none;
    font: inherit;
    cursor: pointer;
}

.addText {
    max-width: 380px;
}

.font-input {
    margin-top: 15px;
}

.hidden-step {
    display: none;
}

#font {
    margin-top: 20px;
}

.big {
    width: 15.4762% !important;
    height: 20.7547% !important;
}

.addText {
    margin-top: 10px;
    cursor: pointer;
}

.visual__card-side-a {
    position: relative;
}

.visual__card-side-a canvas {
    position: absolute;
    right: 0;
    top: 0;
    width: 100%;
    z-index: 1000;
    height: 100%;
}

.hiddenColor {
    display: none;
}

label[for="addImage"] {
    max-width: 380px;
}

.visual__color-container-inner.wallet {
    width: 100%;
    justify-content: center;
}

.wallet-wrapper-images {
    display: none;
    justify-content: center;

}

.wallet-block {
    display: flex;
}

.wallet-block img {
    height: 150px;
    width: 85px;
    object-fit: contain;
}

.visual__color-container-inner.wallet label {
    width: 64px;
    height: 64px;
}

input[name='color'][value='1'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #DFDFDF 50%, #DFDFDF 100%) !important;
    background-size: 20px 20px; /* Размер текстуры */
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}

input[name='color'][value='2'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #1a1a1a 0%, #1a1a1a 50%, #d4af37 50%, #d4af37 100%) !important;
    background-size: 20px 20px; /* Размер текстуры */
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}

input[name='color'][value='3'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #ffffff 50%, #ffffff 100%) !important;
    background-size: 20px 20px; /* Размер текстуры */
    background-image: linear-gradient(45deg, rgba(255, 255, 255, 0.1) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.1) 50%, rgba(255, 255, 255, 0.1) 75%, transparent 75%, transparent);
}

input[name='color'][value='4'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #ffd700 0%, #ffd700 50%, #ffffff 50%, #ffffff 100%) !important;
    background-size: 20px 20px; /* Размер текстуры */
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
}

input[name='color'][value='5'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #ffd700 0%, #ffd700 50%, #000000 50%, #000000 100%) !important;
    background-size: 20px 20px; /* Размер текстуры */
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
}

input[name='color'][value='6'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #c0c0c0 0%, #c0c0c0 50%, #000000 50%, #000000 100%) !important;
    background-size: 20px 20px; /* Размер текстуры */
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
}

input[name='color'][value='7'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #c0c0c0 0%, #c0c0c0 50%, #ffffff 50%, #ffffff 100%) !important;
    background-size: 20px 20px; /* Размер текстуры */
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
}

input[name='color'][value='8'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #e0b084 0%, #e0b084 50%, #c0c0c0 50%, #c0c0c0 100%) !important;
    background-size: 20px 20px; /* Размер текстуры */
    background-image: linear-gradient(45deg, rgba(0, 0, 0, 0.1) 25%, transparent 25%, transparent 50%, rgba(0, 0, 0, 0.1) 50%, rgba(0, 0, 0, 0.1) 75%, transparent 75%, transparent);
}

input[name='color'][value='9'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #ffd700 0%, #ffd700 50%, #c0c0c0 50%, #c0c0c0 100%) !important;

}

input[name='color'][value='10'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #ff0000 0%, #ff7f00 16.66%, #ffff00 33.33%, #00ff00 50%, #0000ff 66.66%, #4b0082 83.33%, #8b00ff 100%) !important;

}


input[name='color'][value='11'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #ffd700 0%, #ffd700 50%) !important;

}

input[name='color'][value='12'] + label .visual__color-label-color {
    background: linear-gradient(to bottom right, #040404 0%, #040404 50%, #c0c0c0 0%, #c0c0c0 50%) !important;

}

.question {
    color: black;
    font-size: 18px;
}

.question label {
    font-size: 18px;
}


.form-check-input:checked {
    background-color: #000000;
}

.visual__card-side-a {
    background-size: cover !important;
}

input[type="file"] {
    display: none;
}

.customize-wallet {
    margin-left: 8px;
}

.customize-wallet label {
    font-size: 16px;
}

.wallet-wrapper {
    display: none;
}

.customize-wallet {
    display: none;
}


.question-input + label {
    margin-top: 20px;
    margin-bottom: 20px;
    cursor: pointer;
    font-size: 18px;
    padding-top: 5px;
    padding-bottom: 5px;
    padding-left: 20px;
    padding-right: 20px;


}

.delete-btn {
    border-color: red;
    color: red;
}

.question-input:checked + label {
    border-bottom: 3px solid black;
}

textarea.grayInput {
    height: 120px !important;
}


  .card-preview {
    margin-bottom: 20px;
    padding: 15px;
    border: 1px solid #ddd;
    border-radius: 8px;
  }
  
  #modalCardPreview {
    max-width: 100%;
    height: auto;
  }

  .modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 1000;
  }

  .modal-content {
    position: relative;
    background-color: white;
    margin: 2rem auto;
    padding: 2rem;
    width: 90%;
    max-width: 600px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  }

  .close {
    position: absolute;
    top: 1rem;
    right: 1rem;
    font-size: 1.5rem;
    cursor: pointer;
    color: #666;
  }

  .form-group {
    margin-bottom: 1.5rem;
  }

  .form-group label {
    display: block;
    margin-bottom: 0.5rem;
    color: #333;
    font-weight: 500;
  }

  .form-group input {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 1rem;
  }

  /* #4CAF50 */

  .form-group input:focus {
    outline: none;
    border-color: #000000;
    box-shadow: 0 0 0 2px rgba(76, 175, 80, 0.2);
  }

  .submit-btn, .place-order-btn{
    background-color: #000000;
    color: white;
    padding: 1rem 2rem;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    width: 100%;
    font-size: 1rem;
    font-weight: 500;
  }

  .submit-btn:hover, .place-order-btn:hover {
    background-color: #000000;
  }

@media (max-width: 1399px) {
}

@media (max-width: 1199px) {
    .visual__color-container-inner {
        width: 100%;
    }

    .main-rov {
        flex-direction: column;
    }
}

@media (max-width: 991px) {

}

@media (max-width: 767px) {
    .main-sec {
        padding: 0;
        padding-left: 10px;
        padding-right: 10px;
    }

    .design-gallery {
        grid-template-columns: 1fr 1fr;
    }

    .main-left {
        width: 100%;
        margin-top: 25px;
    }

    .main-right {
        width: 100%;
    }

    .visual__card-side-a-picture {
        width: 100%;

        max-width: 405px;
    }

    .visual__card {
        width: 100%;
        max-width: 355px;
        height: 220px;
        margin: 0 auto;
    }

    .configurator__card-data-radio-cont {
        margin-bottom: 20px;
    }
      
}

#payment-element {
    margin: 24px 0;
  }
  
  .payment-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 12px;
  }
  
  .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-left: 12px;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  .hidden {
    display: none;
  }

.floating-button {
    position: fixed;
    bottom: 20px;
    right: 20px; /* Changed from left: 50% */
    padding: 15px 30px;
    background-color: #000000;
    color: white;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 16px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    z-index: 1000;
    transition: all 0.3s ease;
    transform: none; /* Remove transform */
  }
  
  .floating-button:hover {
    background-color: #000000;
    transform: translateY(-2px);
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
  }


@media (max-width: 575px) {

    .visual__card {
        height: 215px !important;
    }

    .Wallet {
        width: 100%;
        height: 300px !important;
        display: block;
    }
    .visual__card-side-b-card-time, .visual__card-side-b-card-num {
        top: 66%;
        font-size: 20px;
    }
}

#payment-element {
    margin: 24px 0;
  }
  
  .payment-message {
    color: #dc3545;
    font-size: 14px;
    margin-top: 12px;
  }
  
  .spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255,255,255,.3);
    border-radius: 50%;
    border-top-color: white;
    animation: spin 1s ease-in-out infinite;
    margin-left: 12px;
  }
  
  @keyframes spin {
    to { transform: rotate(360deg); }
  }
  
  .hidden {
    display: none;
  }

    .total-amount {
        display: flex;
        align-items: center;
        gap: 20px;
        margin-top: 20px;
        margin-bottom: 20px;
    }

    .total-amount p {
        font-size: 18px;
        font-weight: 700;
        font-size: larger;
        text-decoration: underline;
    }

    .floating-total-container {
        position: fixed;
        bottom: 20px;
        right: 20px;
        background: white;
        padding: 15px;
        border-radius: 8px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        z-index: 1000;
      }
      
      .tip-options {
        margin-bottom: 10px;
      }
      
      .tip-btn {
        padding: 5px 10px;
        margin: 0 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
        background: white;
        cursor: pointer;
      }
      
      .tip-btn.active {
        background: #000000;
        color: white;
        border-color: #000000;
      }
      
      .custom-tip {
        display: inline-block;
        margin-left: 5px;
      }
      
      .custom-tip input {
        width: 60px;
        padding: 5px;
        border: 1px solid #ddd;
        border-radius: 4px;
      }
      
      .total-display {
        font-size: 1.2em;
        font-weight: bold;
        margin-bottom: 10px;
      }

      .card-care-description {
        color: #6c757d;
        font-size: 0.95rem;
        line-height: 1.5;
        margin: 0;
        padding-left: 2.25rem; /* Aligns with text after question mark */
    }



    .card-editor-section {
        background: #fff;
        border-radius: 12px;
        padding: 25px;
        max-width: 600px;
        margin: 20px auto;
        box-shadow: 0 2px 15px rgba(0,0,0,0.08);
        width: 100%;
      }
      
      .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 20px;
      }
      
      .section-title {
        color: #333;
        font-size: 1.5rem;
        margin: 0;
      }
      
      .step-indicator {
        display: flex;
        gap: 8px;
        align-items: center;
      }
      
      .step {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #e0e0e0;
      }
      
      .step.active {
        background: #000000;
        transform: scale(1.2);
      }
      
      .card-options {
        display: grid;
        gap: 12px;
        margin-bottom: 20px;
      }
      
      .visually-hidden {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        border: 0;
      }
      
      .card-option-label {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px;
        background: #f8f9fa;
        border-radius: 8px;
        cursor: pointer;
        transition: all 0.2s;
        border: 2px solid transparent;
      }
      
      .card-option-label:hover {
        background: #e9ecef;
        transform: translateY(-1px);
      }
      
      .option-details {
        display: flex;
        flex-direction: column;
        gap: 4px;
      }
      
      .option-name {
        font-weight: 500;
        color: #333;
      }
      
      .option-description {
        font-size: 0.875rem;
        color: #666;
      }
      
      .option-price {
        font-weight: 600;
        color: #000000;
        font-size: 1.125rem;
      }
      
      input[type="radio"]:checked + label {
        background: #eeeded;
        border-color: #000000;
      }
      
      .navigation-buttons {
        display: flex;
        gap: 12px;
        margin-top: 24px;
        border-top: 1px solid #eee;
        padding-top: 20px;
      }
      
      .nav-button {
        padding: 14px 24px;
        border-radius: 8px;
        border: none;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        display: flex;
        align-items: center;
        gap: 8px;
        min-width: 120px;
        justify-content: center;
      }
      
      .next-button {
        background: #000000;
        color: white;
        margin-left: auto;
      }
      
      .next-button:hover {
        background: #000000;
        transform: translateY(-1px);
      }
      
      .back-button {
        background: white;
        border: 2px solid #9e9e9e;
        color: #666;
      }
      
      .back-button:hover {
        background: #f5f5f5;
        transform: translateY(-1px);
      }
      
      .back-button[disabled] {
        opacity: 0.5;
        cursor: not-allowed;
        transform: none;
      }
      
      .selected-price {
        font-weight: 600;
        color: white;
        background: rgba(0,0,0,0.1);
        padding: 4px 8px;
        border-radius: 4px;
      }

      .section {
        display: none; /* Hide all sections by default */
      }
      
      .section.active {
        display: block; /* Only show active section */
      }
      
      /* Important: Override any existing display properties */
      .first:not(.active),
      .second:not(.active),
      .third:not(.active) {
        display: none !important;
      }
      
      .first.active,
      .second.active,
      .third.active {
        display: block !important;
      }

      .section {
        display: none;
      }
      
      .section.active {
        display: block;
      }
      
      /* Add specific section visibility */
      .card-editor-section.first,
      .second,
      .third {
        display: none;
      }
      
      .card-editor-section.first.active,
      .second.active,
      .third.active {
        display: block;
      }

      /* Properly hide radio inputs while maintaining functionality */
.question-input {
    position: absolute !important;
    opacity: 0;
    width: 1px;
    height: 1px;
  }
  
  /* Style the labels that act as radio buttons */
  .question-input + label {
    display: inline-block;
    padding: 8px 20px;
    margin: 5px 10px 5px 0;
    cursor: pointer;
    border: 2px solid #ddd;
    border-radius: 4px;
    transition: all 0.2s ease;
    background-color: white;
    font-size: 16px;
    position: relative;
    z-index: 1;
  }
  
  /* Style for checked state */
  .question-input:checked + label {
    border-bottom: 3px solid black;
    background-color: #f5f5f5;
  }
  
  /* Hover state */
  .question-input + label:hover {
    border-color: #aaa;
  }
  
  /* Focus state for accessibility */
  .question-input:focus + label {
    outline: 2px solid #000000;
    outline-offset: 2px;
  }
  
  /* Question text styling */
  .question {
    margin: 20px 0 10px 0;
    font-weight: normal;
  }
  
  /* Mobile optimizations */
  @media (max-width: 767px) {
    .question-input + label {
      display: block;
      width: 100%;
      margin: 8px 0;
      text-align: center;
    }
    
    /* Remove d-none d-md-block classes' effect */
    .d-none.d-md-block {
      display: block !important;
    }
  }