/* Изолированные стили для формы коробок */
.boxes-form-container {
    font-family: Arial, sans-serif;
    max-width  : 800px;
    margin     : 0 auto;
    padding    : 20px;
}

.boxes-form-container .boxes__instructions {
    display         : flex;
    padding         : 10px 10px;
    background-color: #232F3E;
    border-radius   : 4px;
    color           : #fff;
    text-align      : center;
    margin-bottom   : 20px;
    font-size       : 16px;
    line-height     : 1.5;
}

.boxes-form-container .boxes__instructions.hide {
    display: none;
}

.boxes-form-container .boxes__wrapper {
    display        : flex;
    flex-wrap      : wrap;
    justify-content: center;
    align-items    : flex-start;
    gap            : 10px;
    margin-bottom  : 20px;
    /* max-width убираем */
    margin-left    : auto;
    margin-right   : auto;
}

.boxes-form-container .trye {
    flex          : 0 0 32%;
    max-width     : 32%;
    box-sizing    : border-box;
    margin-bottom : 10px;
    display       : flex;
    flex-direction: column;
    align-items   : center;
    cursor        : pointer;
    transition    : transform 0.2s ease;
    position      : relative;
}

.boxes-form-container .trye:hover {
    transform: scale(1.05);
}

.boxes-form-container .trye:active {
    transform: scale(0.98);
}

.boxes-form-container .trye img {
    width     : 150px;
    object-fit: contain;
    cursor    : pointer;
}

.boxes-form-container .text-box {
    position   : absolute;
    display    : block;
    text-align : center;
    margin-top : 5px;
    font-size  : 14px;
    color      : #e74c3c;
    font-weight: bold;
    top        : calc(50% - 20px);
    font-size  : 150%;
    color      : #474a4c;
    text-shadow: #fff 1px 1px 0, #fff -1px -1px 0, #fff -1px 1px 0, #fff 1px -1px 0;
    line-height: 1;
}

.boxes-form-container .boxes__discount {
    display       : none;
    flex          : 0 0 32%;
    max-width     : 32%;
    box-sizing    : border-box;
    margin-bottom : 10px;
    flex-direction: column;
    align-items   : center;
    text-align    : center;
    position      : relative;
}

.boxes-form-container .boxes__discount.show {
    display: flex;
}

.boxes-form-container .text-box-discount {
    display    : block;
    position   : absolute;
    font-size  : 250%;
    font-weight: bold;
    color      : #ff0000;
    top        : calc(50% - 20px);
    left       : 50%;
    transform  : translateX(-50%);
    line-height: 1;
    text-shadow: #fff 1px 1px 0, #fff -1px -1px 0, #fff -1px 1px 0, #fff 1px -1px 0;
    z-index    : 10;
}

.boxes-form-container .boxes__discount img {
    width     : 150px;
    object-fit: contain;
}

.boxes-form-container .sweet-overlay {
    display   : none;
    position  : fixed;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index   : 9999;
}

.boxes-form-container .sweet-overlay.show {
    display: block !important;
}

.boxes-form-container .sweet-alert {
    display      : none;
    position     : fixed;
    top          : 50%;
    left         : 50%;
    transform    : translate(-50%, -50%);
    background   : white;
    padding      : 30px;
    border-radius: 10px;
    text-align   : center;
    z-index      : 10000;
    max-width    : 400px;
    width        : 90%;
}

.boxes-form-container .sweet-alert.visible {
    display: block !important;
}

.boxes-form-container .sa-icon {
    width        : 80px;
    height       : 80px;
    border       : 4px solid #ddd;
    border-radius: 50%;
    margin       : 0 auto 20px;
    position     : relative;
    display      : block;
}

/* Красный круг с крестиком */
.boxes-form-container .sa-success {
    border-color: #e74c3c;
}

.boxes-form-container .sa-success.animate {
    border-color: #e74c3c;
}

.boxes-form-container .sa-line {
    display         : block;
    position        : absolute;
    height          : 4px;
    background-color: #e74c3c;
    border-radius   : 2px;
}

.boxes-form-container .sa-tip {
    width    : 30px;
    transform: rotate(45deg);
    animation: animateErrorLeft 0.3s;
    top      : calc(50% - 2px);
    left     : calc(50% - 15px);
}

.boxes-form-container .sa-tip.animateSuccessTip {
    animation: animateErrorLeft 0.3s;
}

.boxes-form-container .sa-long {
    width    : 30px;
    transform: rotate(-45deg);
    animation: animateErrorRight 0.3s;
    top      : calc(50% - 2px);
    left     : calc(50% - 15px);
}

@keyframes animateErrorLeft {
    0% {
        width: 0;
        left : calc(50% - 15px);
        top  : calc(50% - 2px);
    }

    50% {
        width: 0;
        left : calc(50% - 15px);
        top  : calc(50% - 2px);
    }

    100% {
        width: 30px;
        left : calc(50% - 15px);
        top  : calc(50% - 2px);
    }
}

@keyframes animateErrorRight {
    0% {
        width: 0;
        left : calc(50% - 15px);
        top  : calc(50% - 2px);
    }

    50% {
        width: 0;
        left : calc(50% - 15px);
        top  : calc(50% - 2px);
    }

    100% {
        width: 30px;
        left : calc(50% - 15px);
        top  : calc(50% - 2px);
    }
}

.boxes-form-container .sa-icon button {
    background: none;
    border    : none;
    font-size : 24px;
    color     : #e74c3c;
    cursor    : pointer;
}

.boxes-form-container .sweet-alert button {
    background   : #e74c3c;
    color        : white;
    border       : none;
    padding      : 10px 20px;
    border-radius: 5px;
    cursor       : pointer;
    font-size    : 16px;
    margin-top   : 15px;
}

.boxes-form-container .sweet-alert button:hover {
    background: #c0392b;
}

.boxes-form-container .order_block {
    display      : none;
    background   : #f9f9f9;
    padding      : 20px;
    border-radius: 10px;
    margin       : 20px 0;
    text-align   : center;
}

.boxes-form-container .green_text {
    color        : #27ae60;
    font-weight  : bold;
    margin-bottom: 10px;
}

.boxes-form-container .prod_img_wrapper {
    display        : flex;
    align-items    : center;
    justify-content: center;
    margin         : 20px 0;
    gap            : 30px;
    position       : relative;
}

.boxes-form-container .product img {
    max-width : 350px;
    max-height: 380px;
    object-fit: contain;
}

.boxes-form-container .product {
    position: relative;
}

.boxes-form-container .priceс {
    position         : absolute;
    background       : linear-gradient(135deg, #ffd700 0%, #ffb300 100%);
    padding          : 10px;
    border-radius    : 15px;
    transform        : rotate(-10deg);
    box-shadow       : 0 5px 15px rgba(0, 0, 0, 0.3);
    width            : 220px;
    text-align       : center;
    display          : flex;
    flex-wrap        : wrap;
    flex-direction   : column;
    bottom           : 0px;
    right            : 10px;
    -webkit-transform: rotate(-10deg);
    -moz-transform   : rotate(-10deg);
    -ms-transform    : rotate(-10deg);
    -o-transform     : rotate(-10deg);
}



.boxes-form-container .discountс {
    color      : #000;
    font-weight: bold;
    font-size  : 18px;
    margin     : 0 0 5px 0;
    display    : block;
}

.boxes-form-container .price_old {
    color          : #666;
    text-decoration: line-through;
    font-size      : 16px;
    margin         : 5px 0;
}

.boxes-form-container .price_main {
    color      : #000;
    font-size  : 28px;
    font-weight: bold;
    margin     : 5px 0 0 0;
    text-shadow: 1px 1px 2px rgba(255, 255, 255, 0.8);
}

.boxes-form-container .time_remains {
    color      : #e74c3c;
    font-weight: bold;
    font-size  : 24px;
}

.boxes-form-container .span-input-roulette {
    display      : block;
    margin-bottom: 15px;
}

.boxes-form-container .input-roulette {
    width        : 100%;
    padding      : 12px;
    border       : 1px solid #ddd;
    border-radius: 5px;
    font-size    : 16px;
    box-sizing   : border-box;
}

.boxes-form-container .submit-roulette {
    width        : 100%;
    background   : #27ae60;
    color        : white;
    border       : none;
    padding      : 15px;
    border-radius: 5px;
    font-size    : 16px;
    cursor       : pointer;
    margin-top   : 10px;
}

.boxes-form-container .submit-roulette:hover {
    background: #229954;
}

.boxes-form-container .ft {
    font-size : 12px;
    color     : #666;
    font-style: italic;
    margin-top: 10px;
    display   : block;
}

.boxes-form-container .spin-result-wrapper {
    display   : none;
    position  : fixed;
    top       : 0;
    left      : 0;
    width     : 100%;
    height    : 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index   : 9999;
}

.boxes-form-container .pop-up-window {
    position     : absolute;
    top          : 50%;
    left         : 50%;
    transform    : translate(-50%, -50%);
    background   : white;
    padding      : 30px;
    border-radius: 10px;
    text-align   : center;
    max-width    : 400px;
    width        : 90%;
}

.boxes-form-container .close-popup {
    position : absolute;
    top      : 10px;
    right    : 15px;
    width    : 20px;
    height   : 20px;
    cursor   : pointer;
    font-size: 20px;
    color    : #999;
}

.boxes-form-container .pop-up-heading {
    font-size    : 24px;
    font-weight  : bold;
    color        : #27ae60;
    margin-bottom: 15px;
    display      : block;
}

.boxes-form-container .pop-up-text {
    margin-bottom: 20px;
    line-height  : 1.5;
}

.boxes-form-container .pop-up-button {
    background     : #27ae60;
    color          : white;
    text-decoration: none;
    padding        : 10px 20px;
    border-radius  : 5px;
    display        : inline-block;
    margin-top     : 10px;
}

.boxes-form-container .pop-up-button:hover {
    background: #229954;
}

/* Анимации */
.boxes-form-container .animated {
    animation-duration : 0.5s;
    animation-fill-mode: both;
}

.boxes-form-container .bounceIn {
    animation-name: bounceIn;
}

@keyframes bounceIn {
    0% {
        opacity  : 0;
        transform: translate(-50%, -50%) scale(0.3);
    }

    50% {
        opacity  : 1;
        transform: translate(-50%, -50%) scale(1.05);
    }

    70% {
        transform: translate(-50%, -50%) scale(0.9);
    }

    100% {
        opacity  : 1;
        transform: translate(-50%, -50%) scale(1);
    }
}

/* Адаптивность */
@media (max-width: 600px) {
    .boxes-form-container .boxes__wrapper {
        gap: 6px;
    }

    .boxes-form-container .Figure.product img {
        margin-right: 180px;
    }

    .boxes-form-container .trye {
        flex         : 0 0 32%;
        max-width    : 32%;
        margin-bottom: 6px;
    }

    .boxes-form-container .trye img {
        width: 80px;
    }

    .boxes-form-container .prod_img_wrapper {
        flex-direction: column;
        text-align    : center;
        gap           : 20px;
    }

    .boxes-form-container .product img {
        max-width : 250px;
        max-height: 300px;
    }

    .boxes-form-container .priceс {
        transform: rotate(-2deg);
        min-width: 180px;
        padding  : 15px;
    }

    .boxes-form-container .price_main {
        font-size: 24px;
    }
}

/* Адаптивность */
@media (max-width: 500px) {
    .boxes-form-container .Figure.product img {
        margin       : auto;
        margin-bottom: 80px;
    }

    .boxes-form-container {
        padding: 0px;
    }

    .boxes-form-container .priceс {
        transform: rotate(-2deg);
        left     : 50%;
        transform: translateX(-50%);
    }
}

.boxes-form-container .form-post {
    max-width: 500px;
    margin   : 0 auto;
    width    : 100%;
}

@media screen and (max-width: 600px) {
    .boxes-form-container .text-box {
        margin-top: 10px;
        font-size: 4vw;
    }
}