/**
 * css/custom/search-product.css
 * Stili personalizzati per la ricerca prodotti
 */

/* ============================================
   SEARCH FORM CONTAINER
   ============================================ */
.form-search-product {
    display       : flex !important;
    align-items   : center !important;
    /** gap           : 16px !important; */ 
    max-width     : 800px !important;
    width         : 100% !important;
    height        : 50px !important;
    
    border        : 1px solid var(--odoo-gray-200 ) !important;  
    border-radius : 999px !important;

}


/* ============================================
   INPUT CERCA PRODOTTO
   ============================================ */
.form-search-product .search-input {
    flex            : 1 !important;
    height          : 48px !important;
    padding         : 0px 20px !important; 
    font-size       : 24px !important;
    color           : #333 !important;
    background      : #ffffff !important;
    border          : none    !important;
    outline         : none !important;
}

.form-search-product .search-input:focus {
    outline         : none !important;
}

.form-search-product .search-input::placeholder {
    color           : #999 !important;
    font-size       : 24px !important;
    font-weight     : 300  !important;
}

.form-search-product .search-input:disabled {
    background      : #f5f5f5 !important;
    cursor          : not-allowed !important;
}


/* ============================================
   BOTTONE CERCA
   ============================================ */
.form-search-product .btn-submit-2 {

    position : absolute !important;

    top      : 2px !important;
    right    : 2px !important;
    bottom   : 2px !important;

    padding         : 12px 39px !important;

    border          : none    !important;

    border-radius   : 999px    !important;

    background      : var(--odoo-button)!important;

    color           : white;

    font-size       : 24px !important;
    font-weight     : 600  !important;

    cursor          : pointer !important;
    display         : flex    !important;
    align-items     : center !important;
    justify-content : center !important;
    white-space     : nowrap !important;


    /** height          : 57px; */               /* 55px + 2px di bordo */
    /** transform       : translateY(-5px); */    /* Sposta il bottone verso l'alto di 2px */   

}

.form-search-product .btn-submit-2:hover {
    background      : var(--odoo-theme-light);
    /** transform       : translateY(-5px); */  /* Effetto hover più accentuato */    
}

.form-search-product .btn-submit-2:active {
    transform       : translateY(0);
    box-shadow      : none;
}

.form-search-product .btn-submit-2 .h6 {
    font-size       : 18px;
    font-weight     : 600;
    margin          : 0;
    line-height     : 1;
    color           : white;
}

.form-search-product .btn-submit-2:disabled,
.form-search-product .btn-submit-2.disabled {
    background      : #ccc;
    cursor          : not-allowed;
    pointer-events  : none;
    opacity         : 0.7;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .form-search-product {
        max-width       : 100%;
    }
}

@media (max-width: 767px) {
    .form-search-product {
        border-radius   : 25px;
    }
    
    .form-search-product .style-def {
        height          : 50px;
        font-size       : 16px;
        padding         : 0 15px;
    }
    
    .form-search-product .style-def::placeholder {
        font-size       : 15px;
    }
    
    .form-search-product .btn-submit-2 {
        height          : 50px;
        padding         : 0 25px;
        font-size       : 16px;
    }
    
    .form-search-product .btn-submit-2 .h6 {
        font-size       : 16px;
    }
}