/* Arya Auth Styles
 *
 * Selectors are class based and deliberately shallow (two classes at most) so the
 * Elementor widget and Gutenberg block can override them with `{{WRAPPER}} .arya-auth-*`
 * without needing !important. The only !important rules are the display toggles the
 * JavaScript relies on, which no style control writes to.
 */

.arya-auth-instance {
    /* Custom properties are the styling surface for the Gutenberg block, which sets
     * them inline. Elementor writes real declarations instead and wins on specificity. */
    --arya-auth-accent: #0892de;
    --arya-auth-accent-contrast: #ffffff;
    --arya-auth-radius: 5px;
    --arya-auth-width: 300px;
    --arya-auth-title-color: inherit;
    --arya-auth-title-underline: #fc3;
    --arya-auth-label-color: inherit;
    --arya-auth-field-bg: transparent;
    --arya-auth-field-text: inherit;
    --arya-auth-field-border: #d1d1d1;
    --arya-auth-font-family: inherit;

    margin: 30px 0;
    color: inherit;
    font-family: var(--arya-auth-font-family, inherit);
}

.arya-auth-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

.arya-auth-align-left .arya-auth-wrapper {
    align-items: flex-start;
}

.arya-auth-align-center .arya-auth-wrapper {
    align-items: center;
}

.arya-auth-align-right .arya-auth-wrapper {
    align-items: flex-end;
}

.arya-auth-title,
.arya-auth-description {
    text-align: center;
    margin: 10px auto;
    width: fit-content;
    font-family: inherit;
}

.arya-auth-description {
    margin-bottom: 30px;
}

.arya-auth-title {
    border-bottom: 2px solid var(--arya-auth-title-underline, #fc3);
    padding-bottom: 10px;
    color: var(--arya-auth-title-color, inherit);
}

.arya-auth-form {
    width: var(--arya-auth-width, 300px);
    max-width: 100%;
}

.arya-auth-label {
    min-width: 123px;
    display: block;
    color: var(--arya-auth-label-color, inherit);
    font-family: inherit;
}

.arya-auth-input {
    border: 1px solid var(--arya-auth-field-border, #d1d1d1);
    border-radius: var(--arya-auth-radius, 5px);
    background-color: var(--arya-auth-field-bg, transparent);
    color: var(--arya-auth-field-text, inherit);
    font-family: inherit;
    margin-top: 5px;
    width: 100%;
}

.arya-auth-field-code {
    margin-top: 10px;
}

.arya-auth-field-password {
    margin-top: 10px;
}

/* Display toggles driven by auth.js */
.arya-auth-form .arya-auth-field-code,
.arya-auth-form .arya-auth-submit {
    display: none !important;
}

.arya-auth-form .arya-auth-field-code.active,
.arya-auth-form .arya-auth-submit.active {
    display: block !important;
}

.arya-auth-form .arya-auth-field-name {
    display: none;
}

.arya-auth-form .arya-auth-field-name.active {
    display: block;
}

.arya-auth-submit-wrap {
    margin-top: 10px;
}

.arya-auth-send-actions {
    display: flex;
    flex-direction: row;
    gap: 5px;
    width: 100%;
}

.arya-auth-send-actions.channel-selected {
    gap: 0;
}

.arya-auth-send-actions .arya-auth-send-code {
    width: 100%;
    flex: 1 1 0;
}

.arya-auth-send-actions .arya-auth-send-code.is-hidden-channel {
    display: none !important;
}

.arya-auth-send-actions.channel-selected .arya-auth-send-code:not(.is-hidden-channel) {
    flex: 1 1 100%;
    width: 100%;
}

.arya-auth-btn {
    border: none;
    color: var(--arya-auth-accent-contrast, #ffffff);
    background: var(--arya-auth-accent, #0892de);
    padding: 10px 12px;
    min-height: 40px;
    border-radius: var(--arya-auth-radius, 5px);
    box-sizing: border-box;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.3;
    cursor: pointer;
    width: 100%;
}

.arya-auth-form .arya-auth-submit.active {
    width: 100%;
    margin-top: 8px;
}

.arya-auth-btn.send {
    opacity: .5;
    pointer-events: none;
}

.arya-auth-instance .unactive {
    pointer-events: none;
    opacity: .5;
}

/* Applied by auth.js after a successful login. The extra class keeps this ahead of the
 * `.active` display toggles, which carry the same specificity. */
.arya-auth-instance .arya-auth-btn.dnone,
.arya-auth-instance .dnone {
    display: none !important;
}

.arya-auth-feedback {
    display: block;
    font-family: inherit;
    font-size: 12px;
    min-height: 1em;
}

.arya-auth-field.valid .arya-auth-feedback {
    color: green;
}

.arya-auth-field.valid .arya-auth-input {
    border-color: green;
}

.arya-auth-field.invalid .arya-auth-feedback {
    color: red;
}

.arya-auth-field.invalid .arya-auth-input {
    border-color: red;
}

.arya-auth-toggle-wrap {
    text-align: center;
    margin-top: 10px;
}

.arya-auth-toggle-password {
    color: var(--arya-auth-accent, #0892de);
    text-decoration: none;
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
}

.arya-auth-toggle-password:hover {
    text-decoration: underline;
}

/* Google Identity Services button */
.arya-auth-google-wrap {
    width: var(--arya-auth-width, 300px);
    max-width: 100%;
    margin: 16px auto 0;
    text-align: center;
}

.arya-auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    color: #888;
    font-family: inherit;
    font-size: 13px;
}

.arya-auth-divider::before,
.arya-auth-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #ddd;
}

.arya-auth-google-btn {
    width: 100%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: none;
    color: var(--arya-auth-accent-contrast, #ffffff);
    background: var(--arya-auth-accent, #0892de);
    padding: 8px 12px;
    min-height: 40px;
    border-radius: var(--arya-auth-radius, 5px);
    cursor: pointer;
    font-family: inherit;
    font-size: 14px;
    line-height: 1.4;
    box-sizing: border-box;
}

.arya-auth-google-btn:hover {
    opacity: .92;
}

.arya-auth-google-btn.loading {
    opacity: .5;
    pointer-events: none;
}

.arya-auth-provider-icon {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.arya-auth-google-btn .arya-auth-provider-icon {
    background: #fff;
    border-radius: 3px;
    padding: 2px;
    box-sizing: content-box;
}

.arya-auth-google-feedback {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    min-height: 1em;
}

.arya-auth-google-wrap.invalid .arya-auth-google-feedback {
    color: red;
}

.arya-auth-google-wrap.valid .arya-auth-google-feedback {
    color: green;
}

/* Block editor preview is a static render, so clicks must not reach the form */
.arya-auth-block-editor-shield {
    pointer-events: none;
}

/* Login popup */
.popup.login-popup .contain-m,
.popup.login-popup .body .arya-auth-instance {
    width: 100%;
    max-width: 400px;
}

.popup.login-popup .body {
    padding: 20px;
}

/* WooCommerce replacement */
.woocommerce-form-login.arya-auth-woocommerce-login .arya-auth-instance,
.arya-auth-woocommerce {
    --arya-auth-width: 380px;
}

.woocommerce-form-login.arya-auth-woocommerce-login .arya-auth-instance {
    margin: 10px 0 20px;
}

.arya-auth-woocommerce-checkout-block-wrap {
    margin: 0 0 24px;
}

.arya-auth-woocommerce-checkout-block {
    margin: 0;
    padding: 8px 0 4px;
}

body.arya-auth-wc-replaced-login .wc-block-checkout__login-prompt,
body.arya-auth-wc-replaced-login .wc-block-checkout-login-prompt,
body.arya-auth-wc-replaced-login .wc-block-components-checkout-login-prompt {
    display: none;
}

/* Responsive */
@media (max-width: 768px) {
    .arya-auth-form,
    .arya-auth-google-wrap {
        width: 100%;
    }

    .popup.login-popup .contain-m,
    .popup.login-popup .body .arya-auth-instance {
        max-width: 100%;
    }
}