/**
 * WooCommerce Forms
 *
 * All form-related styles including inputs, select2, and validation
 *
 * @package BadassNetwork
 */

/* ==========================================================================
   FORMS - Base Styles
   ========================================================================== */

.woocommerce form .form-row {
    margin-bottom: var(--space-xl);
}

.woocommerce form .form-row label {
    display: block;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    text-transform: uppercase;
    letter-spacing: 1px;
    margin-bottom: var(--space-sm);
    font-weight: 700;
}

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select {
    width: 100%;
    padding: var(--space-md) var(--space-lg);
    font-family: var(--font-main);
    font-size: var(--text-base);
    border: 3px solid var(--color-border);
    background: var(--color-bg);
    transition: all 0.2s ease;
}

.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row textarea:focus,
.woocommerce form .form-row select:focus {
    outline: none;
    background: var(--color-surface);
    box-shadow: var(--shadow-sm);
}

.woocommerce form .form-row .required {
    color: var(--color-hot);
}

/* ==========================================================================
   FORM CARD STYLING - Edit Address & Account Details
   Matches the design from docs/html/woocommerce-my-account.html
   ========================================================================== */

/* Edit Address Form Wrapper */
body.woocommerce-account .woocommerce-address-fields,
body.woocommerce-account .woocommerce-EditAccountForm,
body.woocommerce-account form.woocommerce-EditAccountForm,
body.woocommerce-account form.edit-account {
    background: var(--color-surface) !important;
    border: 3px solid var(--color-border) !important;
    box-shadow: var(--shadow) !important;
}

/* Form Header - Add a visual header to forms */
body.woocommerce-account .woocommerce-address-fields > h3,
body.woocommerce-account .woocommerce-address-fields > p:first-child,
body.woocommerce-account .woocommerce-address-fields .woocommerce-address-fields__field-wrapper::before {
    display: block;
    padding: 20px 28px;
    border-bottom: 3px solid var(--color-border);
    background: var(--color-bg);
    font-size: 16px;
    font-weight: 800;
    text-transform: uppercase;
    margin: 0;
}

/* Form Body - Contains the fields */
body.woocommerce-account .woocommerce-address-fields .woocommerce-address-fields__field-wrapper,
body.woocommerce-account form.woocommerce-EditAccountForm > fieldset,
body.woocommerce-account form.woocommerce-EditAccountForm > p.form-row,
body.woocommerce-account form.edit-account > fieldset,
body.woocommerce-account form.edit-account > p.form-row {
    padding: 28px !important;
    margin: 0 !important;
    border: none !important;
}

/* Remove default fieldset styling - scoped to account content area */
body.woocommerce-account .woocommerce-MyAccount-content form fieldset {
    border: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form fieldset legend {
    display: block !important;
    width: 100% !important;
    padding: 20px 28px !important;
    border-bottom: 3px solid var(--color-border) !important;
    background: var(--color-bg) !important;
    font-size: 16px !important;
    font-weight: 800 !important;
    text-transform: uppercase !important;
    margin: 0 !important;
    float: none !important;
}

/* Account Details Form Specific - Wrap in card styling */
body.woocommerce-account .woocommerce-MyAccount-content form.woocommerce-EditAccountForm,
body.woocommerce-account .woocommerce-MyAccount-content form.edit-account {
    background: var(--color-surface) !important;
    border: 3px solid var(--color-border) !important;
    box-shadow: var(--shadow) !important;
    overflow: hidden;
}

/* Form row improvements for two-column layout - scoped to account content */
body.woocommerce-account .woocommerce-MyAccount-content form .form-row-first,
body.woocommerce-account .woocommerce-MyAccount-content form .form-row-last {
    float: none !important;
    width: 100% !important;
}

/* Individual form rows - scoped to account content */
body.woocommerce-account .woocommerce-MyAccount-content form .form-row {
    margin-bottom: 20px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form .form-row:last-child {
    margin-bottom: 0 !important;
}

/* Wide rows span full width - scoped to account content */
body.woocommerce-account .woocommerce-MyAccount-content form .form-row-wide {
    grid-column: 1 / -1 !important;
}

/* ==========================================================================
   FORM INPUT STYLING - Comprehensive
   Scoped to .woocommerce-MyAccount-content to avoid affecting admin bar
   ========================================================================== */

/* Labels */
body.woocommerce-account .woocommerce-MyAccount-content form label {
    display: block !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    margin-bottom: 8px !important;
    font-weight: 700 !important;
    color: var(--color-text) !important;
}

/* All text inputs - scoped to account content area only */
body.woocommerce-account .woocommerce-MyAccount-content form input[type="text"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="email"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="password"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="number"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="url"],
body.woocommerce-account .woocommerce-MyAccount-content form input.input-text,
body.woocommerce-account .woocommerce-MyAccount-content form textarea {
    width: 100% !important;
    padding: 14px 16px !important;
    font-family: var(--font-main) !important;
    font-size: 15px !important;
    border: 3px solid var(--color-border) !important;
    background: var(--color-bg) !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form input[type="text"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content form input[type="email"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content form input[type="tel"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content form input[type="password"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content form input[type="number"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content form input[type="url"]:focus,
body.woocommerce-account .woocommerce-MyAccount-content form input.input-text:focus,
body.woocommerce-account .woocommerce-MyAccount-content form textarea:focus {
    outline: none !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form input::placeholder,
body.woocommerce-account .woocommerce-MyAccount-content form textarea::placeholder {
    color: var(--color-text-soft) !important;
}

/* Select dropdowns - scoped to account content area only */
body.woocommerce-account .woocommerce-MyAccount-content form select {
    width: 100% !important;
    padding: 14px 16px !important;
    font-family: var(--font-main) !important;
    font-size: 15px !important;
    border: 3px solid var(--color-border) !important;
    background: var(--color-bg) !important;
    transition: all 0.2s ease !important;
    border-radius: 0 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%230D0D0D' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    background-size: 18px !important;
    padding-right: 44px !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form select:focus {
    outline: none !important;
    background-color: var(--color-surface) !important;
    box-shadow: var(--shadow-sm) !important;
}

/* ==========================================================================
   SELECT2 DROPDOWN STYLING - For Country/State fields
   Scoped to .woocommerce-MyAccount-content to avoid affecting admin bar
   ========================================================================== */

/* Select2 Container */
body.woocommerce-account .woocommerce-MyAccount-content .select2-container {
    width: 100% !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single {
    height: auto !important;
    padding: 14px 16px !important;
    font-family: var(--font-main) !important;
    font-size: 15px !important;
    border: 3px solid var(--color-border) !important;
    background: var(--color-bg) !important;
    border-radius: 0 !important;
    transition: all 0.2s ease !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single:focus,
body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single {
    background: var(--color-surface) !important;
    box-shadow: var(--shadow-sm) !important;
    outline: none !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    line-height: 1.4 !important;
    color: var(--color-text) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--color-text-soft) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100% !important;
    right: 12px !important;
    top: 0 !important;
    width: 24px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: var(--color-text) transparent transparent transparent !important;
    border-width: 6px 5px 0 5px !important;
    margin-left: -5px !important;
    margin-top: -3px !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent var(--color-text) transparent !important;
    border-width: 0 5px 6px 5px !important;
}

/* Select2 Dropdown - Note: dropdown is appended to body, so we target it globally but only style when on account page */
body.woocommerce-account .select2-dropdown {
    border: 3px solid var(--color-border) !important;
    border-radius: 0 !important;
    background: var(--color-surface) !important;
    box-shadow: var(--shadow) !important;
    margin-top: -3px !important;
}

body.woocommerce-account .select2-container--default .select2-search--dropdown .select2-search__field {
    padding: 12px 16px !important;
    font-family: var(--font-main) !important;
    font-size: 14px !important;
    border: 3px solid var(--color-border) !important;
    background: var(--color-bg) !important;
    border-radius: 0 !important;
    margin: 8px !important;
    width: calc(100% - 16px) !important;
}

body.woocommerce-account .select2-container--default .select2-search--dropdown .select2-search__field:focus {
    outline: none !important;
    background: var(--color-surface) !important;
}

body.woocommerce-account .select2-container--default .select2-results__option {
    padding: 12px 16px !important;
    font-size: 14px !important;
    transition: background 0.15s ease !important;
}

body.woocommerce-account .select2-container--default .select2-results__option--highlighted[aria-selected],
body.woocommerce-account .select2-container--default .select2-results__option:hover {
    background: var(--color-sun) !important;
    color: var(--color-text) !important;
}

body.woocommerce-account .select2-container--default .select2-results__option[aria-selected="true"] {
    background: var(--color-electric) !important;
    color: white !important;
}

/* ==========================================================================
   PASSWORD CHANGE SECTION
   Scoped to .woocommerce-MyAccount-content to avoid affecting admin bar
   ========================================================================== */

/* Password change section divider */
body.woocommerce-account .woocommerce-MyAccount-content form fieldset + fieldset,
body.woocommerce-account .woocommerce-MyAccount-content form .clear + .form-row {
    margin-top: 0 !important;
}

/* Password fields wrapper */
body.woocommerce-account .woocommerce-MyAccount-content form fieldset:last-of-type {
    border-top: 3px solid var(--color-border) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form fieldset:last-of-type legend {
    background: var(--color-bg) !important;
}

/* ==========================================================================
   FORM SUBMIT BUTTON ROW
   Scoped to .woocommerce-MyAccount-content to avoid affecting admin bar
   ========================================================================== */

/* Submit button row - only target rows that actually contain submit buttons */
body.woocommerce-account .woocommerce-MyAccount-content form .form-row.submit-row,
body.woocommerce-account .woocommerce-MyAccount-content form p:has(button[type="submit"]),
body.woocommerce-account .woocommerce-MyAccount-content form p:has(input[type="submit"]) {
    padding: 20px 28px !important;
    border-top: 3px solid var(--color-border) !important;
    background: var(--color-bg) !important;
    margin: 0 !important;
    display: flex !important;
    justify-content: flex-end !important;
    gap: 12px !important;
}

/* Style the submit button - scoped to account content area only */
body.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content form input[type="submit"],
body.woocommerce-account .woocommerce-MyAccount-content form .button {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 14px 24px !important;
    font-family: var(--font-main) !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-decoration: none !important;
    border: 3px solid var(--color-border) !important;
    background: var(--color-electric) !important;
    color: white !important;
    box-shadow: var(--shadow-sm) !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    border-radius: 0 !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form button[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content form input[type="submit"]:hover,
body.woocommerce-account .woocommerce-MyAccount-content form .button:hover {
    transform: translate(2px, 2px) !important;
    box-shadow: 1px 1px 0 var(--color-border) !important;
}

/* ==========================================================================
   FORM HELPER TEXT AND ERRORS
   Scoped to .woocommerce-MyAccount-content to avoid affecting admin bar
   ========================================================================== */

/* Description/hint text */
body.woocommerce-account .woocommerce-MyAccount-content form .description,
body.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-password-hint,
body.woocommerce-account .woocommerce-MyAccount-content form span.description,
body.woocommerce-account .woocommerce-MyAccount-content form em {
    font-size: 12px !important;
    color: var(--color-text-soft) !important;
    margin-top: 6px !important;
    display: block !important;
    font-style: normal !important;
}

/* Required asterisk */
body.woocommerce-account .woocommerce-MyAccount-content form .required,
body.woocommerce-account .woocommerce-MyAccount-content form abbr.required {
    color: var(--color-hot) !important;
    text-decoration: none !important;
    border: none !important;
}

/* Error styling */
body.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-invalid input,
body.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-invalid select {
    border-color: var(--color-hot) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content form .woocommerce-invalid label {
    color: var(--color-hot) !important;
}

/* ==========================================================================
   INPUT WRAPPER FIXES
   WooCommerce wraps inputs in .woocommerce-input-wrapper
   Scoped to .woocommerce-MyAccount-content to avoid affecting admin bar
   ========================================================================== */

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-input-wrapper {
    display: block !important;
    width: 100% !important;
}

/* Ensure inputs inside wrapper still get full width */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-input-wrapper input,
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-input-wrapper select {
    width: 100% !important;
}

/* Password strength meter */
body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength {
    margin-top: 8px !important;
    padding: 8px 12px !important;
    font-family: var(--font-mono) !important;
    font-size: 11px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    border: 2px solid var(--color-border) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength.short {
    background: var(--color-hot) !important;
    color: white !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength.bad {
    background: var(--color-hot) !important;
    color: white !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength.good {
    background: var(--color-sun) !important;
    color: var(--color-text) !important;
}

body.woocommerce-account .woocommerce-MyAccount-content .woocommerce-password-strength.strong {
    background: var(--color-mint) !important;
    color: var(--color-text) !important;
}