/* ==========================================================================
   Radian Theme — Registration & Login Forms
   ========================================================================== */

:root {
    --reg-accent: #1C3068;
    --reg-accent-hover: #162552;
    --reg-accent-rgb: 28, 48, 104;
}
body.dark-mode {
    --reg-accent: #7C97DD;
    --reg-accent-hover: #9DB2E6;
    --reg-accent-rgb: 124, 151, 221;
}

/* Page Title */
.woocommerce-account .page-title {
    text-align: center;
}

/* Equal-height columns: stretch both cards to match the taller (register) one */
.woocommerce-account #customer_login.col2-set {
    display: flex;
    align-items: stretch;
    gap: 4%;
}
.woocommerce-account #customer_login .col-1,
.woocommerce-account #customer_login .col-2 {
    float: none;
    width: 48%;
    display: flex;
    flex-direction: column;
}
@media (max-width: 768px) {
    .woocommerce-account #customer_login.col2-set {
        flex-direction: column;
    }
    .woocommerce-account #customer_login .col-1,
    .woocommerce-account #customer_login .col-2 {
        width: 100%;
    }
}

/* Form Card */
.woocommerce-account .woocommerce-form-login,
.woocommerce-account .woocommerce-form-register {
    background: var(--color-bg);
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 40px 36px;
    max-width: 520px;
    margin: 0 auto;
    box-shadow: 0 2px 16px rgba(0,0,0,0.06);
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    box-sizing: border-box;
}

/* Headings */
.woocommerce-account .u-column1 h2,
.woocommerce-account .u-column2 h2 {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    text-align: center;
    margin-bottom: 15px;
}

/* Sign-In Link */
.reg-signin-link {
    text-align: center;
    margin-bottom: 24px;
    font-size: 14px;
    color: var(--color-text-muted);
}
.reg-signin-link a {
    color: var(--reg-accent);
    font-weight: 600;
    text-decoration: none;
}
.reg-signin-link a:hover { text-decoration: underline; }

/* Labels */
.woocommerce-form-login label,
.woocommerce-form-register label {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 14px;
    display: block;
    margin-bottom: 6px;
}
.woocommerce-form-login .optional,
.woocommerce-form-register .optional {
    font-weight: 400;
    color: var(--color-text-light);
    font-size: 13px;
}

/* Inputs & Select */
/* !important needed: WooCommerce's own `.woocommerce form .form-row .input-text`
   rule has higher specificity (3 classes vs our 2) and hardcodes a white
   background/black text fallback, which silently wins over our theme
   variables and breaks dark mode. */
.woocommerce-form-login input.input-text,
.woocommerce-form-login select.woocommerce-Input,
.woocommerce-form-register input.input-text,
.woocommerce-form-register select.woocommerce-Input,
.woocommerce-form-register select#reg_business_type {
    width: 100%;
    border: 1.5px solid var(--color-border) !important;
    border-radius: 8px;
    padding: 14px 16px;
    font-size: 15px;
    color: var(--color-primary) !important;
    background: var(--color-bg) !important;
    height: auto;
    transition: border-color 0.2s, box-shadow 0.2s, background-color 0.2s;
}
.woocommerce-form-login input.input-text:focus,
.woocommerce-form-login select:focus,
.woocommerce-form-register input.input-text:focus,
.woocommerce-form-register select:focus {
    border-color: #3182ce !important;
    box-shadow: 0 0 0 3px rgba(49,130,206,0.16);
    outline: none;
}

/* Business Type Dropdown Arrow */
select#reg_business_type {
    appearance: none;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2'%3e%3cpolyline points='6,9 12,15 18,9'/%3e%3c/svg%3e");
    background-repeat: no-repeat;
    background-position: right 14px center;
    background-size: 18px;
    padding-right: 42px;
    cursor: pointer;
}

/* Submit Buttons */
.woocommerce-form-login button[type="submit"],
.woocommerce-form-register button[type="submit"],
.woocommerce-form-login .woocommerce-Button,
.woocommerce-form-register .woocommerce-Button {
    background-color: var(--reg-accent) !important;
    color: #fff !important;
    width: 100%;
    padding: 16px 24px;
    border-radius: 8px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s;
    margin-top: 8px;
    letter-spacing: 0.3px;
}
.woocommerce-form-login button[type="submit"]:hover,
.woocommerce-form-register button[type="submit"]:hover {
    background-color: var(--reg-accent-hover) !important;
}

/* Row Spacing */
.woocommerce-form-login .woocommerce-form-row,
.woocommerce-form-register .woocommerce-form-row {
    margin-bottom: 20px;
}

/* Required Asterisk */
.woocommerce-form-login .required,
.woocommerce-form-register .required {
    color: var(--color-error);
}

/* Password show/hide toggle (woocommerce-layout.css normally styles this;
   the theme dequeues that file, so it's reimplemented here) */
.woocommerce-form-login .password-input,
.woocommerce-form-register .password-input {
    position: relative;
    display: block;
}
.woocommerce-form-login .password-input input.input-text,
.woocommerce-form-register .password-input input.input-text {
    padding-right: 48px;
}
.woocommerce-form-login .show-password-input,
.woocommerce-form-register .show-password-input {
    position: absolute;
    top: 50%;
    right: 14px;
    transform: translateY(-50%);
    width: 22px;
    height: 22px;
    padding: 0;
    margin: 0;
    border: 0;
    background-color: transparent;
    color: var(--color-text-light);
    cursor: pointer;
    transition: color 0.2s ease;
}
.woocommerce-form-login .show-password-input:hover,
.woocommerce-form-register .show-password-input:hover {
    color: var(--reg-accent);
}
.woocommerce-form-login .show-password-input::before,
.woocommerce-form-register .show-password-input::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z' fill='%23000'/></svg>");
    mask-image: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M17.3 3.3C16.9 2.9 16.2 2.9 15.7 3.3L13.3 5.7C12.2437 5.3079 11.1267 5.1048 10 5.1C6.2 5.2 2.8 7.2 1 10.5C1.2 10.9 1.5 11.3 1.8 11.7C2.6 12.8 3.6 13.7 4.7 14.4L3 16.1C2.6 16.5 2.5 17.2 3 17.7C3.4 18.1 4.1 18.2 4.6 17.7L17.3 4.9C17.7 4.4 17.7 3.7 17.3 3.3ZM6.7 12.3L5.4 13.6C4.2 12.9 3.1 11.9 2.3 10.7C3.5 9 5.1 7.8 7 7.2C5.7 8.6 5.6 10.8 6.7 12.3ZM10.1 9C9.6 8.5 9.7 7.7 10.2 7.2C10.7 6.8 11.4 6.8 11.9 7.2L10.1 9ZM18.3 9.5C17.8 8.8 17.2 8.1 16.5 7.6L15.5 8.6C16.3 9.2 17 9.9 17.6 10.8C15.9 13.4 13 15 9.9 15H9.1L8.1 16C8.8 15.9 9.4 16 10 16C13.3 16 16.4 14.4 18.3 11.7C18.6 11.3 18.8 10.9 19.1 10.5C18.8 10.2 18.6 9.8 18.3 9.5ZM14 10L10 14C12.2 14 14 12.2 14 10Z' fill='%23000'/></svg>");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-size: contain;
    mask-size: contain;
}
.woocommerce-form-login .show-password-input.display-password::before,
.woocommerce-form-register .show-password-input.display-password::before {
    -webkit-mask-image: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z' fill='%23000'/></svg>");
    mask-image: url("data:image/svg+xml,<svg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M18.3 9.49999C15 4.89999 8.50002 3.79999 3.90002 7.19999C2.70002 8.09999 1.70002 9.29999 0.900024 10.6C1.10002 11 1.40002 11.4 1.70002 11.8C5.00002 16.4 11.3 17.4 15.9 14.2C16.8 13.5 17.6 12.8 18.3 11.8C18.6 11.4 18.8 11 19.1 10.6C18.8 10.2 18.6 9.79999 18.3 9.49999ZM10.1 7.19999C10.6 6.69999 11.4 6.69999 11.9 7.19999C12.4 7.69999 12.4 8.49999 11.9 8.99999C11.4 9.49999 10.6 9.49999 10.1 8.99999C9.60003 8.49999 9.60003 7.69999 10.1 7.19999ZM10 14.9C6.90002 14.9 4.00002 13.3 2.30002 10.7C3.50002 8.99999 5.10002 7.79999 7.00002 7.19999C6.30002 7.99999 6.00002 8.89999 6.00002 9.89999C6.00002 12.1 7.70002 14 10 14C12.2 14 14.1 12.3 14.1 9.99999V9.89999C14.1 8.89999 13.7 7.89999 13 7.19999C14.9 7.79999 16.5 8.99999 17.7 10.7C16 13.3 13.1 14.9 10 14.9Z' fill='%23000'/></svg>");
}

/* --- Custom Checkboxes --- */

/* Extra breathing room above the first checkbox panel. The register form
   itself is a flex column (see .woocommerce-form-register above), so
   sibling margins don't collapse here — this value is added on top of the
   preceding row's 20px margin-bottom, not maxed against it. */
#institution_name_container + .custom-registration-checkbox {
    margin-top: 24px;
}

.custom-registration-checkbox {
    margin-bottom: 24px !important;
    background-color: rgba(var(--reg-accent-rgb), 0.03);
    border: 1px solid rgba(var(--reg-accent-rgb), 0.12);
    padding: 8px !important;
    border-radius: 10px;
    transition: all 0.25s ease;
}
.custom-registration-checkbox:hover {
    border-color: rgba(var(--reg-accent-rgb), 0.3);
    background-color: rgba(var(--reg-accent-rgb), 0.06);
}
/* Light up the whole panel, not just the checkbox, once checked */
.custom-registration-checkbox:has(input[type="checkbox"]:checked) {
    background-color: rgba(var(--reg-accent-rgb), 0.08);
    border-color: var(--reg-accent);
}

.custom-registration-checkbox .checkbox {
    display: flex !important;
    align-items: flex-start;    
    cursor: pointer;
    margin: 0;
}

.custom-registration-checkbox input[type="checkbox"] {
    /* !important needed: WooCommerce's own `.woocommerce form .form-row
       .input-checkbox` rule has higher specificity (3 classes vs our 2)
       and forces display:inline, which breaks the custom box + centered
       checkmark below. */
    appearance: none !important;
    -webkit-appearance: none !important;
    width: 20px !important;
    height: 20px !important;
    border: 2px solid var(--color-border) !important;
    border-radius: 6px !important;
    background-color: var(--color-bg) !important;
    cursor: pointer !important;
    display: inline-grid !important;
    place-content: center;
    margin-top: 2px !important;
    transition: all 0.2s ease;
    flex-shrink: 0;
}
.custom-registration-checkbox input[type="checkbox"]:hover {
    border-color: var(--reg-accent) !important;
}
.custom-registration-checkbox input[type="checkbox"]:checked {
    background-color: var(--reg-accent) !important;
    border-color: var(--reg-accent) !important;
}
.custom-registration-checkbox input[type="checkbox"]:checked::before {
    content: "";
    width: 12px;
    height: 12px;
    clip-path: polygon(14% 44%, 0 58%, 38% 96%, 100% 16%, 86% 2%, 38% 68%);
    background-color: #ffffff;
}

.custom-registration-checkbox .woocommerce-terms-and-conditions-checkbox-text {
    font-size: 14px;
    line-height: 1.5;
    color: var(--color-text-muted);
    font-weight: 500;
}
.custom-registration-checkbox .woocommerce-terms-and-conditions-checkbox-text a {
    color: var(--reg-accent);
    text-decoration: none;
    font-weight: 600;
    border-bottom: 1px dashed var(--reg-accent);
    transition: color 0.2s ease;
}
.custom-registration-checkbox .woocommerce-terms-and-conditions-checkbox-text a:hover {
    color: var(--reg-accent-hover);
    border-bottom-style: solid;
}

.custom-registration-checkbox .required {
    margin-left: 2px;
    font-size: 16px;
}