/*
 * REI membership fields in the Add to Cart popup (WSD-208).
 * Matches the popup's THWEPO student fields (bb-theme-child style.css,
 * "#nols-add-to-cart form table.extra-options") and uses the theme's colour
 * variables, with fallbacks for pages outside the popup.
 */

.nols-rei-membership {
    --nols-rei-error: #b42318;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    min-width: 0;
    font-family: 'DM Sans', sans-serif;
    color: var(--ink, #0d110f);
}

.nols-rei-membership[hidden] {
    display: none !important;
}

.nols-rei-membership .nols-rei-membership__title {
    display: block;
    width: 100%;
    margin: 0 0 4px;
    padding: 0;
    border: 0;
    font-family: 'DM Sans', sans-serif;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink, #0d110f);
}

.nols-rei-membership .nols-rei-membership__intro,
.nols-rei-membership .nols-rei-membership__hint,
.nols-rei-membership .nols-rei-membership__status {
    margin: 0;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: var(--sage, #4a5c52);
}

.nols-rei-membership .nols-rei-membership__help {
    margin: 0 0 14px;
    font-size: 14px;
    line-height: 1.6;
    color: var(--ink, #0d110f);
}

.nols-rei-membership .nols-rei-membership__help a,
.nols-rei-membership .nols-rei-membership__status a {
    color: var(--ember, #b24d28);
    text-decoration: underline;
}

.nols-rei-membership .nols-rei-membership__help a:hover,
.nols-rei-membership .nols-rei-membership__status a:hover {
    color: var(--ember-hover, #9e3a1a);
}

.nols-rei-membership .nols-rei-membership__intro {
    margin-bottom: 14px;
}

.nols-rei-membership [hidden] {
    display: none !important;
}

.nols-rei-membership .nols-rei-membership__names {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.nols-rei-membership .nols-rei-membership__field {
    display: flex;
    flex-direction: column;
    gap: 7px;
    margin: 0 0 10px;
}

.nols-rei-membership .nols-rei-membership__field label {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    line-height: 1.4;
    color: var(--ink, #0d110f);
}

.nols-rei-membership .nols-rei-membership__field abbr.required {
    color: var(--ember, #b24d28);
    text-decoration: none;
    border: 0;
}

.nols-rei-membership .nols-rei-membership__field input {
    width: 100%;
    height: 48px !important;
    margin: 0;
    padding: 12px 16px !important;
    border: 1px solid var(--fog, #dce6e0) !important;
    border-radius: 10px !important;
    background: var(--white, #ffffff) !important;
    box-shadow: none;
    box-sizing: border-box;
    font-family: 'DM Sans', sans-serif !important;
    font-size: 14px !important;
    line-height: 1em;
    color: var(--ink, #0d110f) !important;
    outline: none !important;
    -webkit-appearance: none;
    appearance: none;
    transition: box-shadow 400ms cubic-bezier(0.22, 1, 0.36, 1);
}

.nols-rei-membership .nols-rei-membership__field input:focus {
    border-color: var(--ember, #b24d28) !important;
    box-shadow: 0 0 0 3px var(--ember-glow, rgba(178, 77, 40, 0.07));
}

.nols-rei-membership .nols-rei-membership__field input[aria-invalid="true"] {
    border-color: var(--nols-rei-error) !important;
}

.nols-rei-membership .nols-rei-membership__hint {
    margin-top: -4px;
}

.nols-rei-membership .nols-rei-membership__number-row {
    display: flex;
    gap: 12px;
    align-items: center;
}

.nols-rei-membership .nols-rei-membership__number-row input {
    flex: 1 1 auto;
    min-width: 0;
}

/* Beat the popup's ".woocommerce div.product #nols-add-to-cart form.cart .button" margin and sizing. */
.woocommerce div.product form.cart .nols-rei-membership .nols-rei-membership__verify,
.nols-rei-membership .nols-rei-membership__verify {
    flex: 0 0 auto;
    height: 48px;
    margin: 0 !important;
    padding: 0 24px !important;
    border: 0;
    border-radius: 100px;
    background: var(--ember, #b24d28) !important;
    color: var(--white, #ffffff) !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    line-height: normal;
    white-space: nowrap;
}

.woocommerce div.product form.cart .nols-rei-membership .nols-rei-membership__verify:hover {
    background: var(--ember-hover, #9e3a1a) !important;
}

.woocommerce div.product form.cart .nols-rei-membership .nols-rei-membership__verify:disabled {
    background: var(--snow, #f2f5f3) !important;
    color: var(--lichen, #7a9484) !important;
    box-shadow: inset 0 0 0 1px var(--fog, #dce6e0) !important;
    border-radius: 10px;
    cursor: not-allowed;
    transform: none;
}

.woocommerce div.product form.cart .nols-rei-membership .nols-rei-membership__verify[aria-busy="true"] {
    cursor: progress;
    opacity: 0.7;
}

.nols-rei-membership .nols-rei-membership__error {
    margin: 0;
    font-size: 13px;
    line-height: 1.4;
    color: var(--nols-rei-error);
}

.nols-rei-membership .nols-rei-membership__status {
    margin: 0;
}

.nols-rei-membership .nols-rei-membership__status:not(:empty) {
    margin: 4px 0 12px;
}

.nols-rei-membership .nols-rei-membership__status[data-state="error"] {
    color: var(--nols-rei-error);
}

@media (max-width: 767px) {
    .nols-rei-membership .nols-rei-membership__names {
        grid-template-columns: 1fr;
    }
}

/* While the REI step is locked, the popup shows only the pricing option and the REI step. */
form.nols-rei-locked .single_variation_wrap .woocommerce-variation,
form.nols-rei-locked .woocommerce-variation-add-to-cart > *:not(.nols-rei-membership):not(input[type="hidden"]) {
    display: none !important;
}

.nols-rei-step-hidden {
    display: none !important;
}

/* Validated: "REI membership for First Last (••••4444) applied to this cart" + Change. */
.nols-rei-membership .nols-rei-membership__applied {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin: 0;
    padding: 14px 16px;
    border: 1px solid #b7dcb4;
    border-radius: 10px;
    background: #e8f4e6;
}

.nols-rei-membership .nols-rei-membership__applied-text {
    margin: 0;
    font-size: 14px;
    line-height: 1.5;
    color: #1e6b35;
}

.nols-rei-membership .nols-rei-membership__applied-text::before {
    content: "\2713\00a0";
}

.woocommerce div.product form.cart .nols-rei-membership .nols-rei-membership__change,
.nols-rei-membership .nols-rei-membership__change {
    flex: 0 0 auto;
    margin: 0 !important;
    padding: 8px 18px !important;
    border: 1px solid var(--ember, #b24d28) !important;
    border-radius: 10px;
    background: var(--white, #ffffff) !important;
    color: var(--ember, #b24d28) !important;
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 500;
    line-height: normal;
    box-shadow: none !important;
    transform: none;
}

.woocommerce div.product form.cart .nols-rei-membership .nols-rei-membership__change:hover {
    background: var(--ember-glow, rgba(178, 77, 40, 0.07)) !important;
}

/* No focus outline on the confirmation (focused from script after verifying) or on a
   mouse-clicked Change button; keyboard focus gets the same ember ring as the inputs. */
.nols-rei-membership .nols-rei-membership__applied-text:focus,
.woocommerce div.product form.cart .nols-rei-membership .nols-rei-membership__change:focus {
    outline: none !important;
}

.woocommerce div.product form.cart .nols-rei-membership .nols-rei-membership__change:focus-visible {
    box-shadow: 0 0 0 3px rgba(178, 77, 40, 0.35) !important;
}

/* "Become one today" notice. Above the UABB popup. */
.nols-rei-dialog-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000001;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(13, 17, 15, 0.35);
}

.nols-rei-dialog {
    width: 100%;
    max-width: 470px;
    padding: 28px 24px 20px;
    border-radius: 14px;
    background: var(--white, #ffffff);
    box-shadow: 0 20px 48px rgba(13, 17, 15, 0.25);
    font-family: 'DM Sans', sans-serif;
}

.nols-rei-dialog .nols-rei-dialog__text {
    margin: 0 0 20px;
    font-size: 17px;
    line-height: 1.6;
    color: var(--ink, #0d110f);
}

.nols-rei-dialog .nols-rei-dialog__actions {
    display: flex;
    justify-content: flex-end;
}

.nols-rei-dialog .nols-rei-dialog__ok {
    margin: 0;
    padding: 10px 20px;
    border: 0;
    border-radius: 10px;
    background: var(--ember, #b24d28);
    color: var(--white, #ffffff);
    font-family: 'DM Sans', sans-serif;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
}

.nols-rei-dialog .nols-rei-dialog__ok:hover,
.nols-rei-dialog .nols-rei-dialog__ok:focus-visible {
    background: var(--ember-hover, #9e3a1a);
}

/* Cart and checkout line: "REI Member — First Last — REI ••••4444". */
dl.variation dt.nols-rei-cart-label {
    float: none;
    clear: both;
    width: 100%;
    margin: 0;
    font-weight: 600;
}

@media (max-width: 480px) {
    .nols-rei-membership .nols-rei-membership__applied {
        flex-direction: column;
        align-items: flex-start;
    }
}