/*
 * Yuluma Conversie Booster — Frontend CSS
 * Covers: delivery promise widget, checkout field validation states.
 * Disable via WooCommerce > Yuluma Booster > Styling when using custom CSS.
 */

/* ==========================================================================
   Delivery Promise
   ========================================================================== */

.ycb-delivery-promise {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    margin: 14px 0;
    background-color: #f0faf3;
    border: 1px solid #b7dfc4;
    border-radius: 6px;
    font-size: 14px;
    line-height: 1.5;
    color: #1e5c35;
    box-sizing: border-box;
}

/* Truck emoji via ::before — no icon font dependency */
.ycb-delivery-promise__icon::before {
    content: '🚚';
    font-size: 17px;
    line-height: 1;
    display: inline-block;
    flex-shrink: 0;
}

.ycb-delivery-promise__text {
    font-weight: 600;
}

/* Ensure the widget does not bleed outside single-column product summaries */
.woocommerce div.product .ycb-delivery-promise {
    max-width: 100%;
}

/* ==========================================================================
   Checkout Inline Validation
   ========================================================================== */

/* Invalid field border */
.woocommerce-checkout .form-row input.ycb-field-invalid,
.woocommerce-checkout .form-row select.ycb-field-invalid,
.woocommerce-checkout .form-row textarea.ycb-field-invalid {
    border-color: #cc1818 !important;
    box-shadow: 0 0 0 2px rgba(204, 24, 24, 0.12) !important;
    outline: none !important;
}

/* Valid field border — subtle, not to clash with theme */
.woocommerce-checkout .form-row input.ycb-field-valid,
.woocommerce-checkout .form-row select.ycb-field-valid {
    border-color: #3a9c5b !important;
    box-shadow: 0 0 0 2px rgba(58, 156, 91, 0.1) !important;
}

/* Inline error label */
.ycb-field-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #cc1818;
    animation: ycb-error-in 0.15s ease-out both;
}

/* Entrance animation for error messages */
@keyframes ycb-error-in {
    from {
        opacity: 0;
        transform: translateY(-3px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/*
 * Prevent double-border when WooCommerce and our script both mark a field.
 * WooCommerce uses .woocommerce-invalid on the .form-row wrapper; our
 * script adds .ycb-field-invalid on the <input>. Both can safely coexist.
 */
.woocommerce-checkout .form-row.woocommerce-invalid input.ycb-field-invalid {
    border-color: #cc1818 !important;
}

.woocommerce-checkout .form-row.woocommerce-validated input.ycb-field-valid {
    border-color: #3a9c5b !important;
}

/* ==========================================================================
   WooCommerce Blocks — Checkout Inline Validation
   ========================================================================== */

/*
 * Error message injected by blocks-checkout-validation.js.
 * Mirrors the native .wc-block-components-validation-error markup so it
 * inherits WC Blocks base styles (red text, small font) automatically.
 * The [data-ycb-error] attribute scopes our overrides without touching
 * WooCommerce's own error elements.
 */
.wc-block-components-validation-error[data-ycb-error="1"] {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    font-weight: 500;
    color: #cc1818;
    animation: ycb-error-in 0.15s ease-out both;
}

/* Field wrapper — invalid state */
.wc-block-components-text-input.has-error.ycb-has-error input,
.wc-block-components-text-input.has-error.ycb-has-error select {
    border-color: #cc1818 !important;
    box-shadow: 0 0 0 2px rgba(204, 24, 24, 0.12) !important;
    outline: none !important;
}

/* Field wrapper — valid state (only after user interaction) */
.wc-block-components-text-input.ycb-is-valid input,
.wc-block-components-text-input.ycb-is-valid select {
    border-color: #3a9c5b !important;
    box-shadow: 0 0 0 2px rgba(58, 156, 91, 0.1) !important;
}

/* ==========================================================================
   Address Autofill
   ========================================================================== */

/*
 * Loading state — applied directly to the street/city <input> while the
 * postcode lookup runs. <input> is a void element so ::after does not work;
 * we use opacity + cursor instead to signal the loading state visually.
 */
.ycb-autofill-loading {
    opacity: 0.55;
    cursor: wait !important;
    pointer-events: none;
    transition: opacity 0.2s;
}

/* Readonly state — applied by address-autofill.js when config.readonly === true */
.woocommerce-checkout .form-row input[readonly].ycb-autofill-readonly,
.wc-block-components-text-input input[readonly].ycb-autofill-readonly {
    background-color: #f6f7f7;
    color: #50575e;
    cursor: default;
    border-color: #dcdcde !important;
    box-shadow: none !important;
}

/*
 * Inline autofill error message — class applied by address-autofill.js.
 * Must match the className set in JS: 'ycb-autofill-error'.
 */
.ycb-autofill-error {
    display: block;
    margin-top: 5px;
    font-size: 12px;
    font-weight: 500;
    color: #cc1818;
    animation: ycb-error-in 0.15s ease-out both;
}

/* Scoped to Blocks checkout */
.wc-block-checkout .ycb-autofill-error {
    margin-top: 4px;
}

/* Success flash — briefly applied to filled fields after successful lookup */
@keyframes ycb-autofill-flash {
    0%   { background-color: #f0faf3; }
    80%  { background-color: #f0faf3; }
    100% { background-color: transparent; }
}

.ycb-autofill-filled {
    animation: ycb-autofill-flash 1.2s ease-out both;
}

/* ==========================================================================
   Simplified Address Fields — injected house-number / suffix fields
   ========================================================================== */

/*
 * Injected wrapper uses the WC Blocks text-input class so it inherits
 * the active theme's WC Blocks styles automatically.
 * The .ycb-injected-field class scopes our own tweaks.
 */
.ycb-injected-field {
    /* Ensure it takes the full row width like native WC Blocks fields */
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 8px;
}

/*
 * Floating label pattern — mirrors WC Blocks default so injected fields
 * look identical to native WC Blocks fields.
 */
.ycb-injected-field input {
    width: 100%;
    box-sizing: border-box;
    height: 3em;
    padding: 1.5em 0.75em 0.5em;
    border: 1px solid #767676;
    border-radius: 4px;
    font-size: 1em;
    line-height: 1.5;
    background: #fff;
    outline: none;
    transition: border-color 0.15s;
}

.ycb-injected-field input:focus {
    border-color: var(--wp--preset--color--primary, #5b50e8);
    box-shadow: 0 0 0 2px rgba(91, 80, 232, 0.15);
}

.ycb-injected-field label {
    display: block;
    font-size: 0.85em;
    font-weight: 500;
    color: #50575e;
    margin-bottom: 4px;
}

/* Classic checkout: house-number fields inherit WC form-row appearance. */
.woocommerce-checkout .form-row input#ycb_billing_house_number,
.woocommerce-checkout .form-row input#ycb_shipping_house_number,
.woocommerce-checkout .form-row input#ycb_billing_house_number_suffix,
.woocommerce-checkout .form-row input#ycb_shipping_house_number_suffix {
    /* No overrides needed — WC's .form-row styles already apply */
}