/* 
   AWWO® Frontend UI - Styles
   Purpose: public-facing components, messages, and utilities
   @package cw-awwo-nt 
*/

/**
 * © AWWO® (Advertise What We Offer)
 * Unauthorized use, copying, modification, distribution, or reverse engineering is strictly prohibited without prior written authorization from CITIPRO WORLD™.
 * @license LicenseRef-Proprietary
 */

input.cw_hide_arrow::-webkit-outer-spin-button,
input.cw_hide_arrow::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin:0;
}

input.cw_hide_arrow {
    appearance:textfield;
    -moz-appearance:textfield;
}

.cw_nt_qr_box {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: .5em;
    border-radius: 8px;
    position: relative
}

.cw_nt_qr_box.bordered {
    border: 5px solid #000
}

.cw_nt_qr_link_embed {
    display: inline-block;
    visibility: hidden
}

.cw_nt_qr_shortcode_container {
    display: inline-block;
    text-align: center;
}

.cw_nt_qr_box.cw_nt_qr_link {
    padding: 1.7em;
    margin: 0 auto
}

#cw_nt_qr_container>.generated {
    visibility: hidden
}

#cw_user_gender[disabled] {
    pointer-events: none;
    opacity: 0.7;
}

/* Birthdate's write-once lock (see $disable_birthdate in
   cw_register_extra_profile_fields()) used to get this same graying via a
   now-removed .hasDatepicker[disabled] rule, tied to a class jQuery UI
   Datepicker added — lost when the datepicker was removed. Restoring it here
   keyed to the actual [disabled] state, matching Gender/Email's locked look. */
#cw_user_birthdate_field input[disabled] {
    color: light-dark(graytext, rgb(170, 170, 170));
    background-color: light-dark(rgba(239, 239, 239, 0.3), rgba(59, 59, 59, 0.3));
    opacity: 0.7;
    pointer-events: none;
}

.theme-betheme.woocommerce-account .select2-container--default .select2-selection--single {
    padding: 3px 8px;
    min-height: 40px;
}

.theme-betheme .select2-container .select2-selection--single .select2-selection__rendered {
    display: inline;
}

.theme-betheme.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0;
}

.theme-betheme.woocommerce-checkout .select2-container--default .select2-selection--single {
    padding: 9px 10px;
    margin-bottom: -1.4px;
}

/* Country Code + Phone in one wrap (checkout, My Account addresses). Each keeps
   its own label above it. Where the storefront script gives the two halves the
   theme's own form-row-first / form-row-last classes, the gap between them is
   whatever the active theme puts between every other pair of fields (the wrap
   only spreads them like the theme's own floats would); anywhere else the select
   and input sit flush together, sharing one border, above the 500px breakpoint. */
.cw-nt-phone-combined {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.cw-nt-phone-combined:has(> .form-row-first),
.cw-nt-company-combined:has(> .form-row-first) {
    justify-content: space-between;
}
.cw-nt-phone-combined-col {
    display: flex;
    flex-direction: column;
}
.cw-nt-phone-combined-code:not(.form-row-first),
.cw-nt-phone-combined-number:not(.form-row-last) {
    flex: 1 1 50%;
}
.cw-nt-phone-combined-code .woocommerce-input-wrapper select,
.cw-nt-phone-combined-number .woocommerce-input-wrapper input {
    width: 100%;
}
@media (min-width: 501px) {
    .cw-nt-phone-combined-code:not(.form-row-first) .woocommerce-input-wrapper select {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .cw-nt-phone-combined-number:not(.form-row-last) .woocommerce-input-wrapper input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
@media (max-width: 500px) {
    .cw-nt-phone-combined-code:not(.form-row-first) {
        flex: 1 1 100%;
    }
}

/* Address forms carry no "(optional)" tags. The server side drops them from the
   markup (Cw_AWWO_Billing_And_Shipping_Core), but WooCommerce's own address
   script puts the tag back in the browser whenever the country changes, so the
   tag is also hidden here. */
.woocommerce-checkout .form-row .optional,
.woocommerce-edit-address .form-row .optional {
    display: none;
}

/* WooCommerce Blocks checkout address forms — the same pairs as the classic
   checkout and My Account: Company + Company ID in one row right after the
   name, Country Code + Phone in one row last. Blocks appends this plugin's
   extra fields after its own in a wrapping flex row; pure CSS ordering puts
   them where they belong (no markup change, so it survives React re-renders).
   Each rule applies only while the field it depends on is present. */
.wc-block-components-address-form:has(.wc-block-components-address-form__cw-awwo-nt-company-id) .wc-block-components-address-form__company,
.wc-block-components-address-form .wc-block-components-address-form__cw-awwo-nt-company-id {
    flex-basis: calc(50% - 12px);
    /* Blocks only lets a text field grow once it holds a value, which left an
       empty Company next to a filled Company ID at two different widths. */
    flex-grow: 1;
}
/* Company ID is billing-only. Blocks puts this plugin's address field on the
   shipping form too — hidden there (it's never required, nothing reads it), and
   Company takes the whole row instead of sitting beside an empty slot. */
.wc-block-components-address-form:has(#shipping-address_1) .wc-block-components-address-form__cw-awwo-nt-company-id {
    display: none;
}
.wc-block-components-address-form:has(#shipping-address_1) .wc-block-components-address-form__company {
    flex-basis: 100%;
}
/* Company ID is last in the markup; moving every field that follows Company
   back one step leaves Company ID right beside it. */
.wc-block-components-address-form:has(.wc-block-components-address-form__cw-awwo-nt-company-id) :is(
    .wc-block-components-address-form__address_1,
    .wc-block-components-address-form__address_2-toggle,
    .wc-block-components-address-form__address_2-hidden-input,
    .wc-block-components-address-form__city,
    .wc-block-components-state-input,
    .wc-block-components-address-form__state,
    .wc-block-components-address-form__postcode,
    .wc-block-components-address-form__phone
) {
    order: 1;
}
.wc-block-components-address-form .wc-block-components-select-input-cw-awwo-nt-phone-prefix {
    order: 2;
}
.wc-block-components-address-form:has(.wc-block-components-select-input-cw-awwo-nt-phone-prefix) .wc-block-components-address-form__phone {
    order: 3;
}
/* With a State field the ZIP would otherwise sit alone on a half row. */
.wc-block-components-address-form:has(.wc-block-components-select-input-cw-awwo-nt-phone-prefix):has(.wc-block-components-state-input, .wc-block-components-address-form__state) .wc-block-components-address-form__postcode {
    flex-basis: 100%;
}

/* Company Name + Company ID in one wrap (checkout, My Account addresses), same
   treatment as Country Code + Phone above. */
.cw-nt-company-combined {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.cw-nt-company-combined-col {
    display: flex;
    flex-direction: column;
}
.cw-nt-company-combined-name:not(.form-row-first),
.cw-nt-company-combined-id:not(.form-row-last) {
    flex: 1 1 50%;
}
.cw-nt-company-combined-name .woocommerce-input-wrapper input,
.cw-nt-company-combined-id .woocommerce-input-wrapper input {
    width: 100%;
}
@media (min-width: 501px) {
    .cw-nt-company-combined-name:not(.form-row-first) .woocommerce-input-wrapper input {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .cw-nt-company-combined-id:not(.form-row-last) .woocommerce-input-wrapper input {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
@media (max-width: 500px) {
    .cw-nt-company-combined-name:not(.form-row-first) {
        flex: 1 1 100%;
    }
}

/* Day + Month + Year unified into one control (Edit Account Details).
   Raw <input> markup (no WC .woocommerce-input-wrapper here), same
   flush-join treatment as the pairs above but with three equal columns. */
.cw-nt-birthdate-combined {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
}
.cw-nt-birthdate-combined-col {
    display: flex;
    flex-direction: column;
    flex: 1 1 33.33%;
}
.cw-nt-birthdate-combined-col input[type="text"] {
    width: 100%;
    text-align: center;
    box-sizing: border-box;
}
@media (min-width: 501px) {
    .cw-nt-birthdate-combined-col:not(:last-child) input[type="text"] {
        border-right: none;
        border-top-right-radius: 0;
        border-bottom-right-radius: 0;
    }
    .cw-nt-birthdate-combined-col:not(:first-child) input[type="text"] {
        border-top-left-radius: 0;
        border-bottom-left-radius: 0;
    }
}
@media (max-width: 500px) {
    .cw-nt-birthdate-combined-col {
        flex: 1 1 100%;
    }
}

/* Rounds the actual rendered Cloudflare Turnstile <iframe> itself — unlike
   a wrapper div around .cf-turnstile (which only frames the widget without
   touching its own edges), the iframe ELEMENT is part of our own document
   even though its content is cross-origin, so its own box (border-radius +
   the clipping that comes with it) is something we can style directly; only
   reaching into what's drawn inside it is off-limits. --cw-turnstile-radius
   is set on .cf-turnstile itself by cw-awwo-nt-front.js, read off that
   form's own submit button — same mechanism Math Captcha's own box uses. */
.cf-turnstile iframe {
    border-radius: var(--cw-turnstile-radius, 8px);
    overflow: hidden;
}