/**
 * Premium Styles for WooCommerce MT Easy Italian Checkout Fields.
 *
 * Implements smooth visual transitions, premium card formatting for invoice controls,
 * custom focus glow effects, and auto-uppercasing visual helpers.
 */

/* 1. Dynamic Slide & Fade Transitions for Conditional Fields */
.mt-conditional-field,
#billing_company_field {
    display: block !important; /* Ensure it is block so height/opacity transition work */
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    border: none !important;
    pointer-events: none;
    transition: 
        opacity 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1),
        margin-bottom 0.35s cubic-bezier(0.25, 1, 0.5, 1),
        padding 0.35s cubic-bezier(0.25, 1, 0.5, 1);
}

.mt-conditional-field.mt-visible,
#billing_company_field.mt-visible {
    opacity: 1;
    max-height: 120px; /* Sufficient height to contain field + label + descriptions */
    margin-bottom: 15px !important;
    padding-top: 5px !important;
    pointer-events: auto;
}

/* Specific margins for grid-aligned (half-width) elements */
.form-row.mt-conditional-field.form-row-first.mt-visible,
.form-row#billing_company_field.form-row-first.mt-visible {
    margin-right: 4% !important;
}

/* 2. Premium Containers for Selectors */

/* Option 1: Invoice Checkbox Card */
.form-row.mt-invoice-checkbox-row {
    background: #f8fafc;
    border: 1px dashed #cbd5e1;
    border-radius: 8px;
    padding: 16px 20px !important;
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.02);
    transition: all 0.3s ease;
    clear: both;
}

.form-row.mt-invoice-checkbox-row:hover {
    background: #f1f5f9;
    border-color: #94a3b8;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05);
}

.form-row.mt-invoice-checkbox-row label.checkbox {
    display: inline-flex !important;
    align-items: center;
    font-weight: 600 !important;
    color: #334155 !important;
    cursor: pointer;
    margin: 0 !important;
    user-select: none;
    font-size: 14px;
}

.form-row.mt-invoice-checkbox-row input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    margin-right: 12px !important;
    margin-top: 0 !important;
    border: 2px solid #94a3b8 !important;
    border-radius: 4px !important;
    transition: all 0.2s ease;
    cursor: pointer;
}

.form-row.mt-invoice-checkbox-row input[type="checkbox"]:checked {
    background-color: #2563eb !important;
    border-color: #2563eb !important;
}

/* Option 2: Customer Type Selector Header */
.form-row.mt-invoice-select-row {
    background: #f8fafc;
    border-left: 4px solid #2563eb;
    border-radius: 4px 8px 8px 4px;
    padding: 16px 20px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

.form-row.mt-invoice-select-row label {
    font-weight: 700 !important;
    color: #1e293b !important;
    margin-bottom: 8px !important;
    display: block;
    font-size: 13.5px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.form-row.mt-invoice-select-row select {
    width: 100% !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 6px !important;
    padding: 10px 14px !important;
    font-weight: 500 !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important;
    transition: all 0.2s ease !important;
}

.form-row.mt-invoice-select-row select:focus {
    border-color: #2563eb !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.15) !important;
}

/* 3. Visual Casing Helpers for Inputs */
.mt-field-cf input,
.mt-field-sdi input {
    text-transform: uppercase;
    font-family: monospace;
    font-size: 15px;
    letter-spacing: 1px;
}

.mt-field-piva input {
    font-family: monospace;
    font-size: 15px;
    letter-spacing: 1.5px;
}

.mt-field-pec input {
    text-transform: lowercase;
}

/* 4. Elegant Field Outline Highlights on Required State Errors */
.mt-error-outline input,
.mt-error-outline select {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

/* 5. Custom transition for WooCommerce My-Account edit address page */
.woocommerce-address-fields .mt-conditional-field {
    /* Ensure styles apply correctly in the My Account section */
    box-sizing: border-box;
}

/* 6. Clean Optional Label Overrides (hides WooCommerce's default grey "(facoltativo)") */
.mt-invoice-checkbox-row label span.optional,
.mt-invoice-select-row label span.optional,
.mt-field-cf label span.optional,
.mt-field-piva label span.optional,
.mt-field-sdi label span.optional,
.mt-field-company label span.optional {
    display: none !important;
}