.products {
    overflow-x: hidden;
    width: 100%;
    max-width: 100vw;

    & .page_product {

        /* & .wrapper_search {
            max-width: none !important;
            margin:0 194px !important;

            @media (max-width: 768px) {
                margin: auto !important;
            }
        }

        & .wrapper_video {
            max-width: none !important;
            margin: 0 92px !important;
            @media (max-width: 768px) {
                margin: auto !important;
            }
        } */
    }

    & .first_screen, .search_screen {
        background: #000;
        padding-bottom: 81px;
        padding-top:50px;

       & .wrapper_search {
            max-width: 868px;
            color:#fff;
             margin: 0 auto;
             text-align: center;
            
             & h1 {
                text-align: center;
                font-weight: 700;
                font-size:32px;
                line-height: 120%;
             }

             & p {
                font-weight: 400;
                font-size: 16px;
                line-height: 100%;
                margin-bottom: 40px;
             }

             & .search_form {
                margin-bottom: 60px;

                & .form-group {
                    display: flex;
                    gap: 15px;
                    margin-bottom: 16px;
                    justify-content: space-between;

                    & .input-wrapper {
                        flex: 1;
                        position: relative;
                        padding: 16px 25px;
                        height: calc(57px - 32px);
                        background: #fff;
                        border-radius: 10px;
                        border:1px solid #E90815;
                        text-align: left;

                        & .icon-question {
                            position: absolute;
                            right: 18px;
                            top: 50%;
                            transform: translateY(-50%);
                            width: 20px;
                            height: 20px;
                            background: transparent;
                            border: none;
                            padding: 0;
                            cursor: pointer;
                            z-index: 1;

                            & img {
                                width: 100%;
                                height: 100%;
                                display: block;
                            }
                        }
                    }

                    & input[type="text"] {
                        width: calc(100% - 50px);
                        font-size: 16px;
                        line-height: 24px;
                        border: none;
                        color: #000;
                        outline: none;
                        
                        &::placeholder {
                            color: #666;
                        }
                    }

                    & .custom-select-wrapper {
                        position: relative;
                        min-width: 200px;
                        

                        & .custom-select-trigger {
                            display: flex;
                            align-items: center;
                            justify-content: center;
                            padding: 16px 20px;
                            font-size: 16px;
                            line-height: 24px;
                            border-radius: 10px;
                            background: #fff;
                            color: #000;
                            cursor: pointer;
                            user-select: none;
                            border:1px solid #E90815;


                            & .arrow-icon {
                                margin-left: 12px;
                                transition: transform 0.3s ease;
                            }
                        }

                        &.open {
                            & .custom-select-trigger .arrow-icon {
                                transform: rotate(180deg);
                            }

                            & .custom-select-dropdown {
                                display: block;
                            }
                        }

                        & .custom-select-dropdown {
                            display: none;
                            position: absolute;
                            top: calc(100% + 8px);
                            left: 0;
                            right: 0;
                            background: #fff;
                            border-radius: 8px;
                            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
                            z-index: 1000;
                            padding: 8px 0;

                            & .checkbox-item {
                                display: flex;
                                align-items: center;
                                padding: 12px 20px;
                                cursor: pointer;
                                transition: background 0.2s ease;

                                &:hover {
                                    background: #f5f5f5;
                                }

                                & input[type="checkbox"] {
                                    position: absolute;
                                    opacity: 0;
                                    cursor: pointer;

                                    &:checked ~ .checkmark {
                                        background: #fff;
                                        border-color: #000;

                                        &::after {
                                            display: block;
                                        }
                                    }
                                }

                                & .checkmark {
                                    position: relative;
                                    width: 20px;
                                    height: 20px;
                                    border: 2px solid #ddd;
                                    border-radius: 4px;
                                    background: #fff;
                                    margin-right: 12px;
                                    flex-shrink: 0;

                                    &::after {
                                        content: '';
                                        position: absolute;
                                        display: none;
                                        left: 6px;
                                        top: 2px;
                                        width: 5px;
                                        height: 10px;
                                        border: solid #000;
                                        border-width: 0 2px 2px 0;
                                        transform: rotate(45deg);
                                    }
                                }

                                & .label-text {
                                    font-size: 16px;
                                    line-height: 24px;
                                    color: #000;
                                    text-align: left;
                                }
                            }
                        }
                    }

                    & select {
                        min-width: 200px;
                        padding: 14px 40px 14px 20px;
                        font-size: 16px;
                        line-height: 24px;
                        border: none;
                        border-radius: 8px;
                        background: #fff;
                        color: #000;
                        cursor: pointer;
                        outline: none;
                        appearance: none;
                        background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1L6 6L11 1' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
                        background-repeat: no-repeat;
                        background-position: right 16px center;
                    }
                }

                & button[type="submit"] {
                    width: 100%;
                    padding: 16px 24px;
                    font-size: 18px;
                    font-weight: 600;
                    line-height: 24px;
                    border: none;
                    border-radius: 8px;
                    background: #E90815;
                    color: #fff;
                    cursor: pointer;
                    transition: background 0.3s ease;

                    &:hover {
                        background: #E90815;
                    }

                    &:active {
                        background: #E90815;
                    }
                }

                @media (max-width: 768px) {
                    & .form-group {
                        flex-direction: column;
                        gap: 12px;

                        & .custom-select-wrapper {
                            min-width: 100%;
                        }

                        & select {
                            min-width: 100%;
                        }
                    }
                }
             }
       }

        & .wrapper_video {
            max-width: 868px;
            margin: 0 auto;
            height: fit-content;
            line-height: 0;
            display: block !important;

            & video {
                width: 100%;
                height: auto;
                display: block;
            }

            & .video-controls {
                top: 0;
                left: 0;
                right: 0;
                bottom: 0;
                transform: none;
            }

            & .video-controls .play-button,
            & .video-controls .pause-button {
                position: absolute;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
            }

            & .video-controls .volume-button {
                right: 10px !important;
                top: auto !important;
                bottom: 10px !important;
            }
        }
    }

    & .search_screen {
        display: flex;
        gap:30px;
        padding-left: 100px;
        padding-right: 110px;

        & .wrapper_search {
            flex: 1 0 55%;
            text-align: left;

            & h1 {
                text-align: left;
            }
        }

        & .wrapper_video {
            display: block;
            align-self: flex-start;
        }

        & .wrapper_search {
            & .note_search {
                text-align: left;
                & h3 {
                    font-size:20px;
                    font-weight: 600px;
                    color:#E90815;
                    margin-bottom:10px;
                }

                & ol {
                    & li {
                        font-size:16px;
                        font-weight: 400;
                        margin-bottom:5px;
                    }


                }
            }
        }
    }

    & .products_list {
        margin: 0 auto;
        background: #fff;
        display: flex;
        gap: 39px;
        padding: 50px 100px;
        align-items: flex-start;
        overflow-x: hidden;
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;

        & .content {
            flex: 1;
            min-width: 500px;
            
            & > p {
                font-size: 16px;
                font-weight: 400;
                color: #000;
                margin-bottom: 20px;

                &:first-of-type {
                    font-size: 18px;
                    font-weight: 700;
                    margin-bottom: 0;
                }
            }

            & .list_items {

                & .item {
                    display: flex;
                    padding: 26px 0 26px 13px;
                    gap:24px;
                    border-bottom: 1px solid #000;

                    &:last-child {
                        border-bottom: none;
                    }

                    & img {
                        width: 125px;
                        height: 125px;
                    }

                    & .item_info {
                        position: relative;;
                        padding-right:87px;
                        flex:1;

                        & h3 {
                            font-size:20px;
                            font-weight: 600;
                            margin-bottom: 12px;
                        }

                        & p {
                            font-size:16px;
                            font-weight: 400;
                            line-height: 100%;
                        }

                        & .btn-request-product {
                            position: absolute;
                            top:50%;
                            right:25px;
                            transform: translateY(-50%);
                            width: 37.5px;
                            height: 37.5px;
                            background: transparent;
                            border: none;
                            padding: 0;
                            cursor: pointer;
                            z-index: 1;

                            & img {
                                width: 37.5px;
                                height: 37.5px;
                            }
                        }
                    }
                }
            }
        }

  
        @media (max-width: 768px) {
            padding:25px 23px;
            & .content {
                width:100%;
                min-width: 0;

                & .list_items {
                    & .item {
                        padding: 30px 0;
                        gap: 16px;
                        flex-wrap: nowrap;
                        align-items: flex-start;
                        overflow: hidden;

                        & img {
                            width: 87px;
                            height: 87px;
                            flex-shrink: 0;
                        }
                        
                        & .item_info {
                            flex: 1;
                            min-width: 0;
                            padding-right: 50px;
                            overflow: hidden;
                            
                            & h3 {
                                font-size: 16px;
                                word-wrap: break-word;
                                overflow-wrap: break-word;
                                line-height: 1.3;
                                margin-bottom: 8px;
                            }
                            
                            & p {
                                font-size: 14px;
                                word-wrap: break-word;
                                overflow-wrap: break-word;
                                line-height: 1.4;
                            }
                            
                            & .btn-request-product {
                                right: 0;
                                width: 37.5px;
                                height: 37.5px;
                            }
                        }
                    }
                }
            }
        }
    }
    
    & .popup-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.7);
        display: none;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        
        &.active {
            display: flex;
        }
        
        & .popup-content {
            background: #fff;
            border-radius: 16px;
            max-width: 500px;
            width: 90%;
            overflow: hidden;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
            
            & .popup-header {
                background: #E90815;
                color: #fff;
                padding: 24px;
                position: relative;
                
                & h2 {
                    font-size: 24px;
                    font-weight: 700;
                    line-height: 1.3;
                    margin: 0;
                    padding-right: 40px;

                    @media (max-width: 768px) {
                        font-size: 16px;
                    }
                }
                
                & .icon-close {
                    position: absolute;
                    top: 50%;
                    right: 20px;
                    width: 32px;
                    height: 32px;
                    background: transparent;
                    border: none;
                    color: #fff;
                    font-size: 32px;
                    line-height: 1;
                    cursor: pointer;
                    padding: 0;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    transition: opacity 0.2s ease;
                    transform: translateY(-50%);
                    
                    &:hover {
                        opacity: 0.8;
                    }
                }
            }
            
            & .popup-body {
                padding: 32px 24px;
                font-size: 24px;
                
                & ol {
                    margin: 0;
                    padding-left: 20px;
                    color: #000;
                    
                    & li {
                        font-size: 24px;
                        line-height: 1.6;
                        margin-bottom: 16px;
                        
                        &:last-child {
                            margin-bottom: 0;
                        }

                         @media (max-width: 768px) {
                            font-size: 16px;
                        }
                    }
                }
            }
            
            & .popup-footer {
                text-align: center;
                & .btn-close-popup {
                    margin: 0 24px 24px 24px;
                    padding: 14px 24px;
                    background: #E90815;
                    color: #fff;
                    border: none;
                    border-radius: 10px;
                    font-size: 16px;
                    font-weight: 400;
                    cursor: pointer;
                    transition: background 0.3s ease;
                    
                    &:hover {
                        background: #CC0010;
                    }
                }
            }
        }
    }

     @media (max-width: 768px) {
        & .first_screen, .search_screen {
            display: flex;
            flex-direction: column-reverse;
            padding:0;
            gap:30px;


            & .wrapper_search {
                padding:0;

                & .note_search {
                    display: none;
                }

                & h1 {
                    font-size: 24px;
                    letter-spacing: -1px;
                }
            }
        }
    }
}

.btn-request-product {
    position: relative;
    
    & .img-checked {
        display: none;
    }
    
    & .img-plus {
        display: block;
    }
    
    &.checked {
        & .img-checked {
            display: block;
        }
        
        & .img-plus {
            display: none;
        }
    }
}

.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
    margin: 50px auto;
    padding: 20px;
}

/* Arrow */
.pagination .page-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
}

.pagination .page-arrow img {
    width: 7px;
    height: auto;
    opacity: 0.6;
}

.pagination .page-arrow:hover img {
    opacity: 1;
}

/* Page number */
.pagination .page-number,
.pagination .page-numbers {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    text-decoration: none;
    font-size: 14px;
    color: #666;
    border-radius: 50%;
    transition: all 0.2s ease;
}

/* Current page (circle) */
.pagination .current {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  width: 32px;
  height: 32px;

  padding: 0;             
  line-height: 1;

  background: #9e9e9e;
  color: #fff;
  font-weight: 500;

  border-radius: 50%;
}

/* Active page */
.pagination .page-number.active {
    background: #9e9e9e;
    color: #fff;
    font-weight: 500;
}

/* Dots */
.pagination .dots {
    pointer-events: none;
    color: #999;
}

/* Remove underline everywhere */
.pagination a {
    text-decoration: none;
}

@media (max-width: 768px) {
    .pagination {
        gap: 6px;
        margin: 40px auto;
        padding: 15px 10px;
        justify-content: flex-start;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    
    .pagination::-webkit-scrollbar {
        display: none;
    }
}

.form_request {
    flex-shrink: 0;
    width: 41%;
    /* max-width: 502px;
    width: 502px; */
    position: sticky;
    top: 20px;
    align-self: flex-start;
    
    & .form_request_product {
        background: #fff;
        border: 2px solid #E90815;
        border-radius: 16px;
        padding: 24px;
        width: 100%;
        box-sizing: border-box;
        overflow: hidden;
        
        & h2 {
            color: #E90815;
            font-size: 26px;
            font-weight: 700;
            text-align: center;
            margin: 0 0 24px 0;
            padding: 12px;
            border-radius: 8px;
            background: #fff;
        }
        
        & .form-response-output {
            display: none;
            padding: 12px 16px;
            margin-bottom: 20px;
            border-radius: 6px;
            font-size: 14px;
            line-height: 1.5;
            
            &.success {
                background: #d4edda;
                border: 1px solid #c3e6cb;
                color: #155724;
            }
            
            &.error {
                background: #f8d7da;
                border: 1px solid #f5c6cb;
                color: #721c24;
            }
        }
        
        & .list_request_products {
            margin-bottom: 24px;
            
            & .no-products {
                text-align: center;
                color: #666;
                font-size: 14px;
                padding: 20px 0;
            }
            
            & .request-product-item {
                padding: 12px 0;
                border-bottom: 1px dashed #000;
                display:flex;
                justify-content: space-between;
                align-items: center;
                gap: 12px;
                max-width: 100%;
                
                & .product-name {
                    font-size: 20px;
                    font-weight: 600;
                    /* margin-bottom: 8px; */
                    color: #000;
                    word-wrap: break-word;
                    overflow-wrap: break-word;
                    word-break: break-word;
                    flex: 1;
                    min-width: 0;
                }
                
                & .product-quantity {
                    display: flex;
                    align-items: center;
                    gap: 8px;
                    
                    & .qty-btn {
                        width: 28px;
                        height: 28px;
                        border: 1px solid #ddd;
                        background: #fff;
                        border-radius: 4px;
                        cursor: pointer;
                        font-size: 16px;
                        line-height: 1;
                        transition: all 0.2s;
                        
                        &:hover {
                            background: #f5f5f5;
                            border-color: #999;
                        }
                        
                        &.minus {
                            color: #E90815;
                        }
                        
                        &.plus {
                            color: #00A650;
                        }
                    }
                    
                    & .qty-input {
                        width: 50px;
                        height: 28px;
                        border: 1px solid #ddd;
                        border-radius: 4px;
                        text-align: center;
                        font-size: 14px;
                        background: #f9f9f9;
                    }
                }
            }
        }
        
        & .form_group {
            margin-bottom: 20px;
            max-width: 100%;
            
            & label {
                display: block;
                font-size: 20px;
                font-weight: 600;
                margin-bottom: 8px;
                color: #000;
                word-wrap: break-word;
            }
            
            & input[type="text"],
            & input[type="email"],
            & textarea {
                width: 100%;
                max-width: 100%;
                padding: 12px 16px;
                border: 1px solid #ddd;
                border-radius: 8px;
                font-size: 14px;
                font-family: inherit;
                transition: border-color 0.2s;
                box-sizing: border-box;
                word-wrap: break-word;
                overflow-wrap: break-word;
                
                &:focus {
                    outline: none;
                    border-color: #4DA8FF;
                }
                
                &::placeholder {
                    color: #999;
                }
            }
            
            & textarea {
                resize: vertical;
                min-height: 100px;
            }
        }
        
        & .btn-submit-request {
            width: 100%;
            padding: 14px 24px;
            background: #E90815;
            color: #fff;
            border: none;
            border-radius: 8px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: background 0.3s ease;
            box-sizing: border-box;
            
            &:hover {
                background: #CC0010;
            }
            
            &:active {
                background: #B30000;
            }
        }
    }
    
    @media (max-width: 1024px) {
        width: 350px;
    }
    
    @media (max-width: 768px) {
        width: 100%;
        position: relative;
        top: auto;
        min-width: -webkit-fill-available;
    }
}

.products_list {
    @media (max-width: 768px) {
        flex-direction: column;
        padding: 30px 20px;
        overflow-x: hidden;
        max-width: 100vw;
        box-sizing: border-box;
    }
}

.btn-open-form-mobile {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 60px;
    height: 60px;
    background: #E60012;
    border: none;
    border-radius: 50%;
    box-shadow: 0 4px 12px rgba(230, 0, 18, 0.4);
    cursor: pointer;
    z-index: 999;
    padding: 12px;
    transition: transform 0.2s ease;
    
    & img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }
    
    &:active {
        transform: scale(0.95);
    }
    
    @media (max-width: 768px) {
        display: block;
    }
}

@media (max-width: 768px) {
    .form_request {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        z-index: 9999;
        display: none;
        min-width: auto;
        
        &.active {
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        & .form_request_overlay {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.5);
            z-index: 1;
        }
        
        & .form_request_wrapper {
            position: relative;
            width: 90%;
            max-width: 500px;
            height: auto;
            max-height: 90vh;
            overflow-y: auto;
            z-index: 2;
            
            & .form_request_product {
                position: relative;
                margin: 0;
            }
            
            & .btn-close-form-mobile {
                display: flex;
                position: absolute;
                top: 10px;
                right: 10px;
                width: 36px;
                height: 36px;
                background: #fff;
                color: #000;
                border: 2px solid #E90815;
                border-radius: 50%;
                font-size: 28px;
                line-height: 1;
                cursor: pointer;
                z-index: 3;
                padding: 0;
                align-items: center;
                justify-content: center;
                
                &:hover {
                    background: #E90815;
                    color: #fff;
                }
            }
        }
    }
}

.btn-close-form-mobile {
    display: none;
}

.product-name {
    word-wrap: break-word;
    overflow-wrap: break-word;
    word-break: break-word;
    max-width: 100%;
}

.request-product-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.request-product-item .product-name {
    flex: 1;
    min-width: 0;
}


/* Mobile pagination: show max 7 numbers */
@media (max-width: 780px) {
  .pagination {
    justify-content: center;
    gap: 6px;
  }

  /* Default: hide all page numbers */
  .pagination .page-number,
  .pagination .page-numbers.dots {
    display: none;
  }

  /* Always show first page */
  .pagination .page-number:first-of-type {
    display: inline-flex;
  }

  /* Show current page */
  .pagination .current {
    display: inline-flex;
    width: 36px;
    height: 36px;
    font-size: 14px;
  }

  /* Show next 2 pages after current */
  .pagination .current + .page-number,
  .pagination .current + .page-number + .page-number {
    display: inline-flex;
  }

  /* Show previous 2 pages before current */
  .pagination .page-number:nth-last-child(3),
  .pagination .page-number:nth-last-child(4) {
    display: inline-flex;
  }

  /* Always show last page */
  .pagination .page-number:last-of-type {
    display: inline-flex;
  }

  /* Arrows bigger for touch */
  .pagination .page-arrow {
    width: 36px;
    height: 36px;
  }

  .pagination .page-arrow img {
    width: 7px;
  }
}