/**
 * css/custom/common.css
 * Stili custom common
 * 
 * @package ItticiSurgelati
 * @version 0.0.2
 */
:root {
    /** ... COMMON BASE COLORs */ 
    --odoo-white                : #ffffff;
    --odoo-white-050            : #fcfcfc;
    --odoo-white-100            : #f7f7f7;

    --odoo-gray-100             : #f0f0f0;
    --odoo-gray-200             : #e0e0e0;
    --odoo-gray-300             : #dee2e6;
    --odoo-gray-400             : #ced4da;
    --odoo-gray-500             : #adb5bd;
    --odoo-gray-600             : #4b5b63;

    --odoo-text-primary         : #182931;
    --odoo-text-secondary       : #4b5b63;

    /** THEME: ORANGE */ 
    --odoo-brand-accent         : #ff5f1f;
    --odoo-brand-accent-dark    : #e04e0e; 
   
    /** THEME: BLUE - DELFINO */ 
    --odoo-brand-delfino-light  : #0075c9;
    --odoo-brand-delfino-dark   : #002d74;

    /** ASSIGN CURRENT THEME */ 
    --odoo-theme-light          : var(--odoo-brand-delfino-light);
    --odoo-theme-dark           : var(--odoo-brand-delfino-dark);

    --odoo-form-container-back  : #ffffff;

    /** ... FORM HEADING */ 
    --odoo-form-heading-text    : var(--odoo-theme-dark);  
    --odoo-form-heading-back    : var(--odoo-theme-dark);
    --odoo-form-heading-border  : var(--odoo-theme-light);

    /** ... FORM FIELDS */ 
    --odoo-input-back           : #fefefe;
    --odoo-input-border         : var(--odoo-gray-200);
    --odoo-input-focus          : var(--odoo-theme-dark);

    /** ... FORM BUTTONs */ 
    --odoo-button               : var(--odoo-theme-light);
    --odoo-button-hover         : var(--odoo-theme-light);
}
/** ........................................................................... */ 



/** ... bootstrap class styles */
.flat-spacing {
   background  : var(--odoo-white) !important;
}
.container {
   background  : var(--odoo-white) !important;
}
.container-full-2 {
   background  : var(--odoo-white) !important;
}
.row {
   background  : var(--odoo-white) !important;
}
/** ........................................................................... */ 



/* Contenitore principale */
.lista-prodotti-section {
    padding         : 0px 100px 0px 0 !important;
    margin-top      : 50px !important;
    margin-left     : 50px !important;
}










/* ============================================
   FORM SECTION STYLE
   ============================================ */

/** FORM PAGE TITLE */
.form-heading {
    font-family     : 'Kondolar', sans-serif;    
    font-size       : 45px !important;
    font-weight     : 400 !important;
    color           : var(--odoo-brand-delfino-dark) !important;
    border-left     : 8px solid var(--odoo-form-heading-border) !important;
    padding-left    : 12px;
    padding-right   : 12px;
    margin-bottom   : 8px !important;
    padding-bottom  : 0px !important;
    display         : inline-block !important;
    letter-spacing  : -0.3px !important;
    
}

/** FORM PAGE SUBTITLE */
.form-sub-heading {
    font-size       : 20px  !important;
    font-weight     : 300 !important;
    color           : var(--odoo-theme-dark) !important;

}

/* FORM GROUP e LABEL */
.form-group {
    margin-bottom: 24px;
}

/** ... FORM FIELDS CONTAINER */ 
.form-container {
    margin-top  : 20px !important;
    background  : var(--odoo-form-container-back) !important;  
}

/** ... ALTEZZA TRA LE RIGHE DEI FORM FIELDS */
.form-container .row.mb-3 {
    margin-bottom: -18px !important;
}

/** ... ALTEZZA TRA LE RIGHE DEI FORM FIELDS */
.form-container.row.col-md-6 {
    margin-left: 100px !important;
}

/** ... FIELDSET */
.fieldset {
    margin-bottom   : 0px !important;
    margin-right    : 0px !important;
}

/** ... FORM LABEL */
.form-label {
    display         : block !important;
    font-size       : 18px !important;
    font-weight     : 600 !important;
    color           : var(--odoo-gray-600) !important;
    margin-bottom   : 3px !important;
    letter-spacing  : 0.7px !important;
    display         : block;
}

/* ... FORM INPUT */
.form-control {
    min-height      : 40px !important;
    max-height      : 40px !important;
    padding         : 14px 18px !important;  
    width           : 100% !important;
    font-size       : 23px !important;
    font-weight     : 300 !important;
    color           : var(--odoo-brand-delfino-dark) !important;
    background      : var(--odoo-white-050) !important;  
    border          : 1px solid var(--odoo-input-border) !important;
    border-radius   : 8px !important; 
    transition      : border-color 0.2s ease !important;
    box-shadow      : none !important;
    /**
    4px	    Angoli leggermente smussati	Design conservativo
    8px	    Bilanciato e moderno	Maggioranza dei casi
    12px	Molto morbido	Design giocoso/friendly
    22.5px	Forma a pillola	Badge, chip, input singoli
    */
}

/* ... FORM INPUT PLACEHOLDER */
.form-control::placeholder {
    color       : #adb5bd;
    font-weight : 400;
    opacity     : 1;
}

/** ... FORM INPUT FOCUS */
.form-control:focus {
    outline         : none !important;
    border          : 1px solid var(--odoo-input-focus) !important;
    border          : 1px solid var(--odoo-brand-delfino-light) !important;
    box-shadow      : none !important;
}

/** ... PASSWORD WRAPPER */
.password-wrapper {
    position        : relative !important;
}

/** ... PASSWORD FIELD */
.password-field {
    padding-right   : 48px !important;
    border          : 1px solid var(--odoo-input-border) !important;
    border-radius   : 8px !important; 
}

/** ... TOGGLE PASSWORD - ICON */
.toggle-pass {
    position    : absolute !important;
    right       : 18px !important;
    top         : 70% !important;
    transform   : translateY(-50%) !important;
    cursor      : pointer !important;
    width       : 15px !important;
    height      : 15px !important;
    background  : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%236c757d"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>') center/contain no-repeat !important;
    transition  : all 0.2s !important;
}

.toggle-pass.active {
    background  : url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23ff5f1f"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" /></svg>') !important;

}

/* ... HELPER TEXT */
.form-text {
    font-size   : 12px;
    color       : var(--text-secondary);
    margin-top  : 8px;
    display     : block;
    margin-left : 12px;
}


/** ... FORM BUTTONs  */ 
.tf-btn.animate-btn {
    display         : inline-block !important;
    width           : 100% !important;
    padding         : 14px 20px !important;

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

    color           : #fff !important;
    text-align      : center !important;
    text-decoration : none !important;
    font-size       : 20px !important;
    font-weight     : 600 !important;
    border-radius   : 500 !important;
    border          : none !important;
    cursor          : pointer !important;
    /** transition      : all 0.2s ease !important; */ 
    transition      : all 0.2s cubic-bezier(0.4, 0, 0.2, 1);

    /** margin-top      : 16px !important; */ 
    margin-top      : 16px !important;  
}

.tf-btn::before {
    content         : '';
    position        : absolute;
    top             : 50%;
    left            : 50%;
    width           : 0;
    height          : 0;
    border-radius   : 50%;
    background      : rgba(255, 255, 255, 0.3);
    transform       : translate(-50%, -50%);
    transition      : width 0.4s, height 0.4s;
}

.tf-btn:active::before {
    width           : 200px;
    height          : 200px;
}

/* ... FULL WIDTH */
.tf-btn.w-100 {
    width: 100%;
}

.tf-btn.animate-btn:hover {
    background: var(--odoo-theme-light) !important;
}

/* ... BOTTONE SECONDARIO ?? */
.tf-btn.style-line {
    background  : transparent !important;
    border      : 1px solid var(--odoo-theme-light) !important;
    color       : var(--odoo-theme-light) !important;
}

.tf-btn.style-line:hover {
    background  : var(--odoo-theme-light) !important;
    color       : #fff !important;
}

/** ... SEZIONE PERSONA GIURIDICA */ 
.form-persona-giuridica {
    padding         : 5px;
    border          : 1px solid var(--odoo-theme-light) !important;
    border-radius   : 32px !important;
    margin-bottom   : -20px !important;
    background      : var(--odoo-container-back) !important;  
}

.form-persona-giuridica .row.mb-3 {
    margin-top      : 5px;
    margin-left     : 10px;
    margin-right    : 5px;

    margin-bottom   : 20px !important;
}


/* ============================================
   SEZIONE PRINCIPALE
   ============================================ */
.flat-spacing {
    padding: 60px 0;
    background: linear-gradient(135deg, #faf9ff 0%, #f0f2f5 100%);
    min-height: calc(100vh - 200px);
}

.heading {
    font-size: 32px;
    font-weight: 600;
    color: #1a1a1a !important;  /* Nero intenso */
    margin-bottom: 20px;
    letter-spacing: -0.5px;
    position: relative;
    border-left: 10px solid transparent;
    border-image: var(--brand-gradient);
    border-image-slice: 1;
    padding-left: 16px;
    /** border-bottom: 1px solid transparent; */ 
    border-bottom: none !important;
    border-image: var(--brand-gradient);
    border-image-slice: 1;
    padding-bottom: 0px;
    display: inline-block;
}



/* Se vuoi SOLO il bordo laterale (senza bottom) - più pulito */
.heading.no-bottom-border {
    border-bottom   : none;
    padding-bottom  : 0;
}

/* Per titoli centrati */
.heading.text-center,
.text-center .heading {
    border-left         : none;
    padding-left        : 0;
    border-bottom       : 1px solid transparent;
    border-image        : var(--brand-gradient);
    border-image-slice  : 1;
    padding-bottom      : 0x;
}

/* Versione alternativa: solo bordo bottom (centrato) */
.heading.bottom-only {
    border-left     : none;
    padding-left    : 0;
    border-bottom   : 1px solid var(--brand-primary);
    padding-bottom  : 0px;
    display         : inline-block;
}

/* Responsive titoli */
@media (max-width: 768px) {
    .heading {
        font-size: 24px;
        border-left-width: 3px;
        padding-left: 12px;
        margin-bottom: 20px;
        border-bottom-width: 2px;
        padding-bottom: 6px;
    }
}

/* Campo password con toggle - ancora più arrotondato */
.password-wrapper {
    position: relative;
}

.password-field {
    padding-right: 48px;
    border-radius: 28px;  /* Stesso arrotondamento */
}

/* Toggle password - icona */
.toggle-pass {
    position: absolute;
    right: 18px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    width: 22px;
    height: 22px;
    background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%236c757d"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" /><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z" /></svg>') center/contain no-repeat;
    transition: all 0.2s;
}

.toggle-pass.active {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="%23ff5f1f"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13.875 18.825A10.05 10.05 0 0112 19c-4.478 0-8.268-2.943-9.543-7a9.97 9.97 0 011.563-3.029m5.858.908a3 3 0 114.243 4.243M9.878 9.878l4.242 4.242M9.88 9.88l-3.29-3.29m7.532 7.532l3.29 3.29M3 3l3.59 3.59m0 0A9.953 9.953 0 0112 5c4.478 0 8.268 2.943 9.543 7a10.025 10.025 0 01-4.132 5.411m0 0L21 21" /></svg>');
}

/* Helper text */
.form-text {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 8px;
    display: block;
    margin-left: 12px;
}

/* ============================================
   BOTTONI - Arrotondati anche loro
   ============================================ */
.tf-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 28px;
    font-size: 16px;
    font-weight: 600;
    border-radius: 40px;  /* Pillola completa */
    border: none;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    text-decoration: none;
    position: relative;
    overflow: hidden;
}

.tf-btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.4s, height 0.4s;
}

.tf-btn:active::before {
    width: 200px;
    height: 200px;
}

.tf-btn.animate-btn {
    background: var(--brand-gradient);
    color: white;
    box-shadow: 0 4px 12px rgba(255, 95, 31, 0.3);
}

.tf-btn.animate-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 95, 31, 0.4);
    color: white;
}

.tf-btn.animate-btn:active {
    transform: translateY(0);
}

.tf-btn.style-line {
    background: transparent;
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
    border-radius: 40px;
}

.tf-btn.style-line:hover {
    background: var(--brand-gradient);
    color: white;
    border-color: transparent;
    transform: translateY(-2px);
}

/* Bottone larghezza piena */
.tf-btn.w-100 {
    width: 100%;
}

/* ============================================
   ALERT MESSAGES
   ============================================ */
.alert {
    padding: 14px 20px;
    border-radius: 20px;  /* Arrotondato */
    margin-bottom: 24px;
    font-size: 14px;
    backdrop-filter: blur(8px);
    animation: slideIn 0.3s ease;
    border: none;
}

.alert-danger {
    background: rgba(239, 68, 68, 0.1);
    border-left: 4px solid var(--error-color);
    color: #991b1b;
}

.alert-success {
    background: rgba(16, 185, 129, 0.1);
    border-left: 4px solid var(--success-color);
    color: #065f46;
}

.alert ul {
    margin: 0;
    padding-left: 20px;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ============================================
   DIVIDER
   ============================================ */
hr {
    margin: 32px 0;
    border: none;
    height: 2px;
    background: var(--brand-gradient);
    border-radius: 2px;
}

/* ============================================
   VERIFICA CAP - RISULTATO
   ============================================ */
#cap_result {
    padding: 12px 18px;
    border-radius: 20px;  /* Arrotondato */
    font-size: 14px;
    animation: fadeIn 0.3s ease;
    margin-top: 16px;
}

#cap_result.success {
    background: rgba(16, 185, 129, 0.1);
    color: #065f46;
    border-left: 3px solid var(--success-color);
}

#cap_result.error {
    background: rgba(239, 68, 68, 0.1);
    color: #991b1b;
    border-left: 3px solid var(--error-color);
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* ============================================
   STATO CARICAMENTO BOTTONI
   ============================================ */
.tf-btn.loading {
    pointer-events: none;
    opacity: 0.7;
}

.tf-btn.loading::after {
    content: '';
    width: 18px;
    height: 18px;
    border: 2px solid white;
    border-top-color: transparent;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
    margin-left: 8px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 991px) {
    .flat-spacing {
        padding: 40px 0;
    }
    
    .form-container {
        padding: 24px;
    }
}

@media (max-width: 768px) {
    .flat-spacing {
        padding: 30px 0;
    }
    
    .heading {
        font-size: 22px;
        padding-left: 12px;
        margin-bottom: 20px;
    }
    
    .form-control {
        padding: 12px 16px;
        font-size: 15px;
        border-radius: 24px;  /* Leggermente meno arrotondato su mobile */
    }
    
    .tf-btn {
        padding: 12px 24px;
        font-size: 14px;
    }
    
    .form-container {
        padding: 20px;
        border-radius: 24px;
    }
    
    .row {
        gap: 24px;
    }
}

/* ============================================
   UTILITY
   ============================================ */
.text-sub {
    color: var(--text-secondary);
    line-height: 1.5;
}

.mb-8 {
    margin-bottom: 32px;
}

.pb-3 {
    padding-bottom: 16px;
}

.mt-3 {
    margin-top: 16px;
}

.my-4 {
    margin-top: 24px;
    margin-bottom: 24px;
}