/* ==========================================================================
   Wholesale buyer registration page (WholeSale/Register.aspx) — modern redesign
   Scoped under .wr-register-page (classes prefixed wr-) so shared theme
   classes aren't affected on other pages. Mirrors the contact-us-page.css /
   content-page.css conventions used elsewhere on the site.
   Palette: coral #FF6B4A / teal #1F7A6C / cream #FFF6EE on warm neutrals.
   Type: Fredoka (headings) + Nunito Sans (body) — loaded from the master page.
   ========================================================================== */

.wr-register-page {
    --wr-coral: #FF6B4A;
    --wr-coral-dark: #E24E2F;
    --wr-coral-soft: rgba(255, 107, 74, 0.08);
    --wr-teal: #1F7A6C;
    --wr-teal-dark: #145E53;
    --wr-gold: #FFB238;
    --wr-green: #2FA36B;
    --wr-danger: #E14D67;
    --wr-danger-soft: rgba(225, 77, 103, 0.08);
    --wr-cream: #FFF6EE;
    --wr-ink: #241F1B;
    --wr-body: #6B6058;
    --wr-muted: #A49A91;
    --wr-border: #F0E2D6;
    --wr-surface: #FFFFFF;
    --wr-radius: 16px;
    --wr-radius-sm: 10px;
    --wr-shadow: 0 10px 30px rgba(36, 31, 27, 0.07);

    color: var(--wr-body);
    font-family: "Nunito Sans", Arial, sans-serif;
}

/* ---------- Breadcrumb ---------- */

.wr-register-page .wr-breadcrumb {
    background: var(--wr-cream);
    border-bottom: 1px solid var(--wr-border);
}

.wr-register-page .wr-breadcrumb ul {
    margin: 0;
    padding: 12px 0;
    list-style: none;
    display: flex;
    gap: 10px;
}

.wr-register-page .wr-breadcrumb li:after {
    content: '/';
    margin-left: 10px;
    color: var(--wr-muted);
}

.wr-register-page .wr-breadcrumb li:last-child:after {
    content: '';
}

.wr-register-page .wr-breadcrumb a {
    color: var(--wr-body);
    font-size: 13.5px;
    text-decoration: none;
}

.wr-register-page .wr-breadcrumb a:hover {
    color: var(--wr-coral);
}

/* ---------- Page head ---------- */

.wr-head {
    margin: 4px 0 6px;
    padding-bottom: 18px;
    border-bottom: 1px solid var(--wr-border);
}

.wr-head::before {
    content: "";
    display: block;
    width: 46px;
    height: 6px;
    border-radius: 999px;
    margin-bottom: 14px;
    background: linear-gradient(90deg, var(--wr-coral), var(--wr-teal));
}

.wr-page-title {
    margin: 0;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 30px;
    font-weight: 600;
    color: var(--wr-ink);
}

.wr-banner {
    margin: 22px 0 0;
}

.wr-banner:empty {
    display: none;
}

.wr-banner img {
    width: 100%;
    border-radius: var(--wr-radius);
}

/* ---------- Cards ---------- */

.wr-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius);
    box-shadow: var(--wr-shadow);
    padding: 26px 28px;
    margin-top: 28px;
}

.wr-card-head {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    margin-bottom: 20px;
}

.wr-card-icon {
    flex: none;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--wr-coral-soft);
    color: var(--wr-coral);
    font-size: 18px;
}

.wr-card-title {
    margin: 4px 0 0;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 19px;
    font-weight: 600;
    color: var(--wr-ink);
}

/* ---------- Login shortcut card ---------- */

.wr-login-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.wr-login-note {
    margin: 0;
    font-size: 13.5px;
    color: var(--wr-muted);
}

.wr-register-page a.wr-login-btn,
.wr-register-page .wr-login-btn {
    flex: none;
    display: inline-block;
    background: none;
    border: 2px solid var(--wr-teal);
    color: var(--wr-teal);
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 11px 26px;
    border-radius: var(--wr-radius-sm);
    text-decoration: none;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}

.wr-register-page a.wr-login-btn:hover,
.wr-register-page .wr-login-btn:hover {
    background: var(--wr-teal);
    color: #fff;
}

/* ---------- Divider ---------- */

.wr-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin: 26px 0;
    color: var(--wr-muted);
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
}

.wr-divider::before,
.wr-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--wr-border);
}

/* ---------- Form ---------- */

.wr-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0 16px;
}

.wr-form-group {
    margin-bottom: 18px;
}

.wr-form-group label {
    display: block;
    font-weight: 600;
    color: var(--wr-ink);
    margin-bottom: 6px;
    font-size: 13.5px;
}

.wr-card .form-control {
    width: 100%;
    padding: 11px 14px;
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius-sm);
    background: var(--wr-cream);
    font-size: 14px;
    color: var(--wr-ink);
    height: auto;
    box-shadow: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.wr-card .form-control:focus {
    border-color: var(--wr-coral);
    outline: none;
    box-shadow: 0 0 0 3px var(--wr-coral-soft);
}

.wr-card .form-control.Mandetry {
    border-color: var(--wr-danger);
    background-color: var(--wr-danger-soft);
}

.wr-submit-btn {
    display: inline-block;
    border: none;
    background: var(--wr-coral);
    color: #fff;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-weight: 600;
    font-size: 15px;
    letter-spacing: 0.02em;
    padding: 13px 34px;
    border-radius: var(--wr-radius-sm);
    cursor: pointer;
    transition: background 0.2s ease, transform 0.2s ease;
}

.wr-submit-btn:hover {
    background: var(--wr-coral-dark);
    color: #fff;
    transform: translateY(-1px);
}

/* ---------- Success panel ---------- */

.wr-success {
    text-align: center;
    padding: 20px 10px;
}

.wr-success i {
    font-size: 40px;
    color: var(--wr-teal);
}

.wr-success h1 {
    margin: 14px 0 0;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 24px;
    font-weight: 600;
    color: var(--wr-ink);
}

.wr-success hr {
    max-width: 120px;
    margin: 18px auto;
    border-color: var(--wr-border);
}

.wr-success h2 {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
    color: var(--wr-body);
}

/* ---------- Sidebar ---------- */

.wr-side-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius);
    box-shadow: var(--wr-shadow);
    padding: 24px;
    margin-bottom: 24px;
}

.wr-side-card h4 {
    margin: 0 0 4px;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 15px;
    font-weight: 600;
    color: var(--wr-ink);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.wr-side-card h4 i {
    color: var(--wr-coral);
    font-size: 16px;
}

.wr-side-card p {
    margin: 6px 0 0;
    font-size: 13.5px;
    color: var(--wr-body);
}

.wr-side-card hr {
    border-color: var(--wr-border);
    margin: 16px 0;
}

.wr-help-card {
    background: var(--wr-surface);
    border: 1px solid var(--wr-border);
    border-radius: var(--wr-radius);
    box-shadow: var(--wr-shadow);
    padding: 26px 22px;
    text-align: center;
}

.wr-help-card i {
    font-size: 28px;
    color: var(--wr-coral);
}

.wr-help-card h4 {
    margin: 10px 0 6px;
    font-family: "Fredoka", "Nunito Sans", Arial, sans-serif;
    font-size: 18px;
    font-weight: 600;
    color: var(--wr-ink);
}

.wr-help-card h4 span {
    color: var(--wr-coral);
}

.wr-help-card a.phone {
    display: inline-block;
    margin-top: 2px;
    font-size: 17px;
    font-weight: 800;
    color: var(--wr-teal);
    text-decoration: none;
}

.wr-help-card a.phone:hover {
    color: var(--wr-coral);
}

.wr-help-card small {
    display: block;
    margin-top: 10px;
    color: var(--wr-muted);
    font-size: 12.5px;
}

/* ---------- Mobile ---------- */

@media (max-width: 767.98px) {
    .wr-page-title {
        font-size: 23px;
    }

    .wr-card {
        padding: 20px;
    }

    .wr-form-row {
        grid-template-columns: 1fr;
    }

    .wr-login-row {
        flex-direction: column;
        align-items: stretch;
        text-align: center;
    }
}