@charset "UTF-8";

/**
 * Guest fields inside the PDP request popups (partial/_pdp_request_guest_fields.blade.php).
 * Matches the popup's textarea (product.modern.css .nx-pdp__request-textarea).
 */

/* ds-allow-hardcode:start component token definitions */
.nx-req-guest {
    --rg-ink: var(--text-primary, #1f2937);
    --rg-muted: var(--text-secondary, #6b7280);
    --rg-line: #e5e7eb;
    --rg-accent: var(--nx-accent, #f97316);
    --rg-accent-ring: rgba(249, 115, 22, 0.15);
    --rg-primary-deep: color-mix(in srgb, var(--primary, #8bc34a) 62%, #000);
    --rg-ok: color-mix(in srgb, var(--primary, #8bc34a) 62%, #000);
    --rg-ok-soft: color-mix(in srgb, var(--primary, #8bc34a) 10%, #fff);
    --rg-error: #b91c1c;
    --rg-error-soft: #fef2f2;
    --rg-radius: 10px;
    --rg-field-h: 46px;
    --rg-fs-xs: 0.78rem;
    --rg-fs-sm: 0.875rem;
    --rg-fs-md: 0.9375rem;
    --rg-fs-code: 1.25rem;
    --rg-surface: #fff;
    --rg-surface-ro: #f9fafb;
    --rg-ring-w: 3px;
    --rg-google: #ea4335;
    --rg-facebook: #1877f2;
    --rg-fs-icon: 1.25rem;
    --rg-dur: var(--duration-base, 0.2s);
    --rg-focus-w: 2px;
}
/* ds-allow-hardcode:end */

.nx-req-guest {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    margin-bottom: var(--space-3);
}

.nx-req-guest__intro {
    margin: 0;
    font-size: var(--rg-fs-sm);
    color: var(--rg-muted);
}

/* Google / Facebook (same look as the checkout sign-in modal) */
.nx-req-guest__social {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-2);
}

@media (min-width: 400px) {
    .nx-req-guest__social--dual {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.nx-req-guest__social-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--rg-field-h);
    padding: 0 var(--space-3);
    font-size: var(--rg-fs-sm);
    font-weight: 700;
    color: var(--rg-ink);
    text-decoration: none;
    background: var(--rg-surface);
    border: 1px solid var(--rg-line);
    border-radius: var(--rg-radius);
    transition: border-color var(--rg-dur) ease, filter var(--rg-dur) ease;
}

.nx-req-guest__social-btn i {
    font-size: var(--rg-fs-icon);
}

.nx-req-guest__social-btn--google i {
    color: var(--rg-google);
}

.nx-req-guest__social-btn--facebook {
    color: var(--rg-surface);
    background: var(--rg-facebook);
    border-color: var(--rg-facebook);
}

.nx-req-guest__social-btn:hover {
    color: var(--rg-ink);
    border-color: var(--rg-accent);
}

.nx-req-guest__social-btn--facebook:hover {
    color: var(--rg-surface);
    border-color: var(--rg-facebook);
    filter: brightness(1.08);
}

.nx-req-guest__social-btn:focus-visible {
    outline: var(--rg-focus-w) solid var(--rg-accent);
    outline-offset: var(--rg-focus-w);
}

.nx-req-guest__or {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--rg-fs-xs);
    font-weight: 600;
    color: var(--rg-muted);
}

.nx-req-guest__or::before,
.nx-req-guest__or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--rg-line);
}

.nx-req-guest__alert {
    padding: var(--space-2) var(--space-3);
    font-size: var(--rg-fs-sm);
    font-weight: 600;
    line-height: 1.45;
    border-radius: var(--rg-radius);
}

.nx-req-guest__alert.is-error {
    color: var(--rg-error);
    background: var(--rg-error-soft);
}

.nx-req-guest__alert.is-ok {
    color: var(--rg-ok);
    background: var(--rg-ok-soft);
}

.nx-req-guest__alert[hidden],
.nx-req-guest__code[hidden] {
    display: none;
}

.nx-req-guest__row {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--space-3);
}

@media (min-width: 520px) {
    .nx-req-guest__row {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.nx-req-guest__field {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--rg-fs-sm);
    font-weight: 600;
    color: var(--rg-ink);
}

/* The sitewide input skin (input:not(...) chain, weight 0,8,1, !important) only loses to ids:
   the two popups use fixed prefixes nxVarReq / nxProdReq (see _pdp_request_guest_fields $prefix) */
#nxVarReqName,
#nxVarReqPhone,
#nxVarReqCode,
#nxProdReqName,
#nxProdReqPhone,
#nxProdReqCode {
    width: 100%;
    min-height: var(--rg-field-h);
    padding: 0 var(--space-4) !important;
    font-size: var(--rg-fs-md);
    font-weight: 400;
    text-indent: 0 !important;
    color: var(--rg-ink);
    background: var(--rg-surface) !important;
    border: 1px solid var(--rg-line) !important;
    border-radius: var(--rg-radius) !important;
    outline: none !important;
    box-shadow: none !important;
}

#nxVarReqName:focus,
#nxVarReqPhone:focus,
#nxVarReqCode:focus,
#nxProdReqName:focus,
#nxProdReqPhone:focus,
#nxProdReqCode:focus {
    border-color: var(--rg-accent) !important;
    box-shadow: 0 0 0 var(--rg-ring-w) var(--rg-accent-ring) !important;
}

#nxVarReqPhone[readonly],
#nxProdReqPhone[readonly] {
    color: var(--rg-muted);
    background: var(--rg-surface-ro) !important;
}

#nxVarReqCode,
#nxProdReqCode.nx-req-guest__input--code {
    font-size: var(--rg-fs-code);
    font-weight: 700;
    letter-spacing: 0.5em;
    text-align: center;
}

.nx-req-guest__code {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.nx-req-guest__resend {
    align-self: flex-start;
    padding: 0;
    font-size: var(--rg-fs-xs);
    font-weight: 600;
    color: var(--rg-primary-deep);
    background: none;
    border: 0;
    text-decoration: underline;
    cursor: pointer;
}

.nx-req-guest__login {
    margin: 0;
    font-size: var(--rg-fs-xs);
    color: var(--rg-muted);
}

.nx-req-guest__login a {
    font-weight: 700;
    color: var(--rg-primary-deep);
}