/* ==========================================================================
   Sitewide form consistency pass
   Fields on different pages (checkout, my-account, contact forms, cart,
   Elementor forms) were styled at different times with different font
   sizes / radii. This file forces one consistent look everywhere and
   fixes the oversized / wrong-colour "required field" error messages.
   !important is used deliberately: Elementor injects per-widget inline
   overrides that load after this file, so normal cascade order cannot
   be relied on here.
   ========================================================================== */

:root {
    --form-field-radius: 8px;
    --form-field-height: 50px;
    --form-field-font-size: 15px;
}

/* --------------------------------------------------------------------
   Text inputs, selects, textareas — every known markup pattern
   -------------------------------------------------------------------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input.input-text,
textarea,
textarea.input-text,
select,
.select2-container .select2-selection,
.select2-container .select2-selection__rendered {
    font-size: var(--form-field-font-size) !important;
    border-radius: var(--form-field-radius) !important;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="search"],
input[type="date"],
input.input-text,
select,
.select2-container .select2-selection {
    min-height: var(--form-field-height) !important;
}

textarea,
textarea.input-text {
    padding-top: 14px !important;
    padding-bottom: 14px !important;
}

/* Elementor widgets sometimes wrap fields with their own radius/border
   controls on ::before/::after or wrapper divs — flatten those too. */
.elementor-field-group .elementor-field,
.elementor-field-textual {
    border-radius: var(--form-field-radius) !important;
    font-size: var(--form-field-font-size) !important;
}

/* Placeholder text should match the field's own size, not the
   ambient heading/body size it happens to sit inside. */
input::placeholder,
textarea::placeholder {
    font-size: var(--form-field-font-size) !important;
}

/* --------------------------------------------------------------------
   Required-field validation messages
   -------------------------------------------------------------------- */

.wpcf7-not-valid-tip {
    font-size: 13px !important;
    color: #c43002 !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
}

.woocommerce-error,
.woocommerce-error li {
    font-size: 13px !important;
    color: #c43002 !important;
}

/* Give the notice its own red-bordered box instead of the generic grey
   tint shared with success/info messages. */
.woocommerce-error {
    border: 1px solid #c43002 !important;
    background-color: rgba(196, 48, 2, .06) !important;
}

.woocommerce-error:before {
    background: #c43002 !important;
    opacity: .08 !important;
}

.woocommerce form .woocommerce-invalid .input-text,
.woocommerce form .woocommerce-invalid select {
    border-color: #c43002 !important;
}

/* WooCommerce's checkout.js injects this <p> straight into the .form-row
   with no class-based styling of its own, so it was rendering in whatever
   dark/oversized text the surrounding form happened to use. Selector
   weight is stacked on purpose — Elementor's global typography rule for
   paragraph text also carries !important and loads after this file, so a
   single low-specificity rule keeps losing to it. */
.woocommerce form .form-row .checkout-inline-error-message,
.woocommerce-checkout .checkout-inline-error-message,
p.checkout-inline-error-message.checkout-inline-error-message {
    margin: 6px 0 0 !important;
    font-size: 13px !important;
    line-height: 1.4 !important;
    color: #c43002 !important;
    font-style: normal !important;
}

.elementor-message,
.elementor-message-danger {
    font-size: 13px !important;
    color: #c43002 !important;
}

/* --------------------------------------------------------------------
   My Account — Edit account form
   Labels/hint text were inheriting the ambient (20px) body font size
   instead of a fixed caption size, and the password fieldset had a
   tinted panel background that the rest of the form doesn't have.
   -------------------------------------------------------------------- */

.woocommerce-EditAccountForm label,
.woocommerce-address-fields label,
.woocommerce-address-fields legend {
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
}

.woocommerce-address-fields .required {
    font-size: 15px !important;
}

.woocommerce-EditAccountForm .description,
.woocommerce-EditAccountForm #account_display_name_description {
    display: block;
    margin-top: 6px !important;
    font-size: 13px !important;
    font-style: italic;
    color: var(--theme-three-color, #999) !important;
    line-height: 1.5 !important;
}

.woocommerce-EditAccountForm fieldset {
    background: none !important;
    background-color: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 10px 0 0 !important;
}

.woocommerce-EditAccountForm fieldset legend {
    width: 100%;
    font-size: 15px !important;
    font-weight: 600 !important;
    color: inherit !important;
    padding: 0 0 16px !important;
    margin: 0 0 20px !important;
    border-bottom: 1px solid var(--theme-border-color);
}

.woocommerce-EditAccountForm fieldset .form-row,
.woocommerce-EditAccountForm fieldset p {
    background: none !important;
}

.woocommerce-EditAccountForm fieldset input.input-text {
    background-color: var(--theme-body-bg-color, #fff) !important;
}