/* Checkout forms — marketing-site-v2 controls and focus states. */

.woocommerce-checkout #customer_details,
.woocommerce-checkout #customer_details .col-1,
.woocommerce-checkout .woocommerce-billing-fields,
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
    width: 100%;
    max-width: none;
    float: none;
}

.woocommerce form .form-row,
.woocommerce .woocommerce-billing-fields .form-row {
    margin: 0 0 20px;
    padding: 0;
}

.woocommerce-checkout .form-row label {
    margin: 0 0 7px;
    display: block;
    color: var(--osp-text-secondary);
    font-size: 14px;
    font-weight: 550;
    line-height: 1.4;
}

.woocommerce form .form-row .required {
    color: var(--osp-text-secondary);
}

.woocommerce-checkout .form-row input.input-text,
.woocommerce-checkout .form-row textarea,
.woocommerce-checkout .form-row select,
.woocommerce-checkout .form-row select#billing_country,
.woocommerce-checkout .form-row select#billing_state {
    width: 100%;
    min-height: 56px;
    padding: 13px 16px;
    border: 1px solid var(--osp-border);
    border-radius: var(--osp-radius-card);
    background: var(--osp-input-background);
    color: var(--osp-text-primary);
    font-family: var(--osp-font-sans);
    font-size: 15px;
    line-height: 1.4;
    box-shadow: none;
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.woocommerce-checkout .form-row textarea {
    min-height: 118px;
    resize: vertical;
}

.woocommerce-checkout .form-row input.input-text:hover,
.woocommerce-checkout .form-row textarea:hover,
.woocommerce-checkout .form-row select:hover {
    border-color: var(--osp-border-strong);
    background: var(--osp-input-background);
}

.woocommerce-checkout .form-row input.input-text:focus,
.woocommerce-checkout .form-row textarea:focus,
.woocommerce-checkout .form-row select:focus,
.woocommerce-checkout .form-row select#billing_country:focus,
.woocommerce-checkout .form-row select#billing_state:focus {
    border-color: var(--osp-focus-ring) !important;
    background: var(--osp-input-background) !important;
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--osp-focus-ring) 18%, transparent) !important;
}

.woocommerce-checkout .form-row input.input-text:active,
.woocommerce-checkout .form-row textarea:active,
.woocommerce-checkout .form-row select:active {
    background: var(--osp-input-background) !important;
}

.woocommerce-checkout .form-row input.input-text::placeholder,
.woocommerce-checkout .form-row textarea::placeholder,
.woocommerce-checkout .form-row input[type="number"]::placeholder {
    color: var(--osp-text-muted) !important;
    opacity: 1 !important;
}

.woocommerce-checkout .form-row.woocommerce-invalid input.input-text,
.woocommerce-checkout .form-row.woocommerce-invalid textarea,
.woocommerce-checkout .form-row.woocommerce-invalid .select2-selection {
    border-color: var(--osp-danger) !important;
}

/* Select2 fields generated by WooCommerce. */
.woocommerce-checkout .select2-container {
    width: 100% !important;
}

.woocommerce-checkout .select2-selection,
.woocommerce-checkout .select2-container--default .select2-selection--single {
    height: 56px !important;
    padding: 0 42px 0 16px;
    border: 1px solid var(--osp-border);
    border-radius: var(--osp-radius-card);
    background: var(--osp-input-background);
    color: var(--osp-text-primary);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.woocommerce-checkout .select2-container--default .select2-selection--single:hover {
    border-color: var(--osp-border-strong);
    background: var(--osp-input-background);
}

.woocommerce-checkout .select2-selection__rendered,
.select2-container .select2-selection--single .select2-selection__rendered {
    padding: 0 !important;
    color: var(--osp-text-primary) !important;
    font-size: 15px;
    line-height: 54px !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--osp-text-muted) !important;
}

.woocommerce-checkout .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 50%;
    right: 13px;
    transform: translateY(-50%);
}

.woocommerce-checkout .select2-container--default .select2-selection--single:focus,
.woocommerce-checkout .select2-container--default.select2-container--focus .select2-selection--single,
.woocommerce-checkout .select2-container--open .select2-selection--single {
    border-color: var(--osp-focus-ring) !important;
    background: var(--osp-input-background) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--osp-focus-ring) 18%, transparent) !important;
}

.select2-dropdown {
    padding: 8px !important;
    border: 1px solid var(--osp-border) !important;
    border-radius: var(--osp-radius-control) !important;
    background: var(--osp-surface-raised) !important;
    box-shadow: var(--osp-shadow-raised);
}

.select2-container--default .select2-search--dropdown .select2-search__field {
    min-height: 42px;
    padding: 8px 12px;
    border: 1px solid var(--osp-border);
    border-radius: var(--osp-radius-control);
    background: var(--osp-input-background);
    color: var(--osp-text-primary);
    transition: border-color 160ms ease, box-shadow 160ms ease;
}

.select2-container--default .select2-search--dropdown .select2-search__field:hover {
    border-color: var(--osp-border-strong);
    background: var(--osp-input-background);
}

.select2-results__option {
    padding: 9px 10px;
    border-radius: var(--osp-radius-control);
    color: var(--osp-text-secondary);
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option--highlighted[data-selected],
.select2-container--default .select2-results__option[aria-selected="true"],
.select2-container--default .select2-results__option[data-selected="true"] {
    background: var(--osp-state-selected);
    color: var(--osp-text-primary);
}

/* WooCommerce loading overlay. */
.woocommerce .blockUI.blockOverlay {
    background: transparent !important;
    opacity: 1 !important;
}

#payment > :not(.blockUI),
.osp-3sc-review-table > :not(.blockUI) {
    opacity: 1;
}

#payment:has(> .blockUI.blockOverlay) > :not(.blockUI),
.osp-3sc-review-table:has(> .blockUI.blockOverlay) > :not(.blockUI) {
    opacity: 0.5;
}

.woocommerce .blockUI.blockOverlay::before {
    display: none !important;
}

.woocommerce .blockUI.blockOverlay::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 30px;
    height: 30px;
    margin: -15px 0 0 -15px;
    border: 2px solid transparent;
    border-top-color: var(--osp-text-primary);
    border-radius: var(--osp-radius-full);
    animation: osp-checkout-spinner 800ms linear infinite;
}

@keyframes osp-checkout-spinner {
    to { transform: rotate(360deg); }
}

/* Policy and optional checkboxes. */
.policy-checkboxes-wrapper {
    margin: 22px 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    background: transparent !important;
}

.policy-checkboxes-wrapper .form-row {
    margin-bottom: 13px !important;
}

.policy-checkboxes-wrapper label,
.osp-newsletter-optin__label,
.woocommerce-account-fields .checkbox {
    display: flex !important;
    align-items: flex-start !important;
    gap: 10px;
    color: var(--osp-text-secondary) !important;
    font-size: 14px;
    line-height: 1.55 !important;
    cursor: pointer !important;
}

.policy-checkboxes-wrapper input[type="checkbox"],
.osp-newsletter-optin__checkbox,
.woocommerce-account-fields input[type="checkbox"] {
    width: 19px !important;
    height: 19px !important;
    margin: 1px 0 0 !important;
    position: relative;
    flex: 0 0 19px !important;
    appearance: none;
    border: 1px solid var(--osp-glass-border);
    border-radius: var(--osp-radius-full);
    background: var(--osp-surface);
    cursor: pointer;
    transition: background-color 160ms ease, box-shadow 160ms ease;
}

#policies_accepted {
    border-radius: 6px !important;
}

.policy-checkboxes-wrapper input[type="checkbox"]:hover,
.osp-newsletter-optin__checkbox:hover,
.woocommerce-account-fields input[type="checkbox"]:hover {
    border-color: var(--osp-border-hover);
    background: color-mix(in srgb, var(--osp-surface) 90%, var(--osp-foreground));
}

.policy-checkboxes-wrapper input[type="checkbox"]:focus-visible,
.osp-newsletter-optin__checkbox:focus-visible,
.woocommerce-account-fields input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--osp-focus-ring) 18%, transparent);
}

.policy-checkboxes-wrapper input[type="checkbox"]:checked,
.osp-newsletter-optin__checkbox:checked,
.woocommerce-account-fields input[type="checkbox"]:checked {
    border-color: var(--osp-action);
    background: var(--osp-action);
}

.policy-checkboxes-wrapper input[type="checkbox"]:checked::after,
.osp-newsletter-optin__checkbox:checked::after,
.woocommerce-account-fields input[type="checkbox"]:checked::after {
    content: "";
    position: absolute;
    top: 4px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid var(--osp-on-action);
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.policy-checkboxes-wrapper .woocommerce-form__label-text {
    color: var(--osp-text-secondary) !important;
    font-size: 14px !important;
    line-height: 1.55 !important;
}

.policy-checkboxes-wrapper a {
    color: var(--osp-decorative-blue) !important;
    text-decoration: underline !important;
    text-underline-offset: 2px;
}

.policy-checkboxes-wrapper .woocommerce-invalid .woocommerce-form__label-text,
.policy-checkboxes-wrapper .form-row.woocommerce-invalid .woocommerce-form__label-text {
    color: var(--osp-danger) !important;
}

.osp-newsletter-optin {
    margin-top: 16px;
}

.osp-newsletter-optin__optional {
    color: var(--osp-text-muted);
    font-size: 13px;
}

button[aria-label="Open Form"]:hover,
button[aria-label="Open Form"]:focus-visible,
button[aria-label="Open Form"]:active {
    border-radius: var(--osp-radius-card) !important;
    background: var(--osp-state-hover) !important;
}