/*
 Theme Name:   Blocksy Child
 Template:     blocksy
 Description:  Tema child per integralinea.it (Design System & UI)
 Version:      1.0.0
*/

/* ==========================================
   1. VARIABILI GLOBALI DESIGN SYSTEM
   ========================================== */
:root {
    /* Palette Colori Principale */
    --cp-green: #138977;
    --cp-green-dark: #0e6b5d;
    --cp-green-light: #e0f2f1;
    --cp-orange: #FF7700;
    --cp-orange-dark: #cc5f00;
    --cp-orange-light: #fff3e0;
    --cp-navy: #2c3e50;
    --cp-white: #ffffff;
    --cp-red: #c0392b;

    /* Grigi e Sfondi */
    --cp-gray-text: #64748b;
    --cp-gray-border: #e2e8f0;
    --cp-gray-light: #f8fafc;

    /* Elementi UI */
    --cp-radius: 10px;
    --cp-shadow: 0 4px 10px rgba(44, 62, 80, 0.08);
    --cp-font-family: 'DM Sans', 'Segoe UI', sans-serif;
}

/* ==========================================
   2. REFACTORING WS FORM (UI/UX)
   ========================================== */
.wsf-form {
    background-color: var(--cp-white);
    border-radius: var(--cp-radius);
    padding: 35px;
    box-shadow: var(--cp-shadow);
    border: 1px solid var(--cp-gray-border);
    font-family: var(--cp-font-family);
}

.wsf-form .wsf-field {
    border: 1px solid var(--cp-gray-border);
    border-radius: 8px;
    padding: 12px 15px;
    font-family: var(--cp-font-family);
    background-color: var(--cp-gray-light);
    color: var(--cp-navy);
    transition: border-color 0.3s ease, box-shadow 0.3s ease, background-color 0.3s ease;
}

.wsf-form .wsf-field:focus,
.wsf-form .wsf-field:active {
    border-color: var(--cp-green);
    box-shadow: 0 0 0 3px rgba(19, 137, 119, 0.1); 
    background-color: var(--cp-white);
    outline: none;
}

.wsf-form input[type="checkbox"] {
    float: left;
    margin-right: 15px;
    margin-top: 5px;
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: var(--cp-green);
}

.wsf-form .wsf-label[for] {
    display: block;
    margin-left: 35px;
    line-height: 1.6;
    font-size: 0.95rem;
    color: var(--cp-gray-text);
}

.wsf-form .wsf-button[type="submit"] {
    background-color: var(--cp-green);
    color: var(--cp-white);
    font-family: var(--cp-font-family);
    font-weight: 700;
    border-radius: 8px;
    padding: 15px 30px;
    width: 100%;
    border: none;
    margin-top: 10px;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease;
}

.wsf-form .wsf-button[type="submit"]:hover,
.wsf-form .wsf-button[type="submit"]:focus {
    background-color: var(--cp-green-dark);
    outline: none;
}

/* ==========================================
   STILE CAMPO COUPON WOOCOMMERCE
   ========================================== */

/* Contenitore Coupon */
.woocommerce-cart .coupon,
.woocommerce-checkout .checkout_coupon {
    display: flex;
    gap: 10px;
    background-color: var(--cp-gray-light);
    padding: 20px;
    border-radius: var(--cp-radius);
    border: 1px solid var(--cp-gray-border);
    box-shadow: var(--cp-shadow);
    margin-bottom: 30px;
}

/* Campo di testo del codice promozionale */
.woocommerce-cart .coupon input.input-text,
.woocommerce-checkout .checkout_coupon input.input-text {
    flex-grow: 1;
    border: 1px solid var(--cp-gray-border);
    border-radius: 8px;
    padding: 12px 15px;
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    color: var(--cp-navy);
    background-color: var(--cp-white);
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

/* Focus state (Accessibilità e UI attiva) */
.woocommerce-cart .coupon input.input-text:focus,
.woocommerce-checkout .checkout_coupon input.input-text:focus {
    border-color: var(--cp-green);
    box-shadow: 0 0 0 3px rgba(19, 137, 119, 0.1);
    outline: none;
}

/* Pulsante Applica Codice */
.woocommerce-cart .coupon button.button,
.woocommerce-checkout .checkout_coupon button.button {
    background-color: var(--cp-navy);
    color: var(--cp-white);
    border-radius: 8px;
    padding: 12px 25px;
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    font-weight: 600;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
}

.woocommerce-cart .coupon button.button:hover,
.woocommerce-checkout .checkout_coupon button.button:hover {
    background-color: var(--cp-orange); /* Highlight interattivo */
}

/* Messaggi di successo o errore nativi di WooCommerce */
.woocommerce-message, 
.woocommerce-error, 
.woocommerce-info {
    border-radius: 8px;
    font-family: 'DM Sans', 'Segoe UI', sans-serif;
    padding: 15px 20px;
    margin-bottom: 25px;
    display: flex;
    align-items: center;
}

/* Successo (Coupon applicato) */
.woocommerce-message {
    border-left: 5px solid var(--cp-green);
    background-color: var(--cp-green-light);
    color: var(--cp-green-dark);
}

/* Errore (Coupon scaduto o invalido) */
.woocommerce-error {
    border-left: 5px solid var(--cp-red);
    background-color: #fdf2f2;
    color: var(--cp-red);
    list-style: none;
}