/* ============================================================
   auth.css — HiringReferrals Auth Pages  v10.0 MERGED
   Scope   : .hr-auth-page and children ONLY
   Pattern : Perfex CRM-inspired — clean corporate SaaS
   Merged  : v9.0 (oval/pill) + v2 (sharp/Perfex) + register.blade.php
   Rules   : No !important abuse (only where landing.css conflict
             demands it), no inline overrides, zero conflicts with
             landing.css, browse-jobs.css or social.css
   ============================================================ */

/* ── Google Fonts ─────────────────────────────────────────── */

/* ══════════════════════════════════════════════════════════════
   CSS VARIABLES  (auth-scoped — won't bleed into landing.css)
══════════════════════════════════════════════════════════════ */
.hr-auth-page,
.hr-overlay {
    /* Brand */
    --auth-primary:        #202870;
    --auth-primary-dark:   #171e58;
    --auth-primary-mid:    #2a3490;
    --auth-primary-light:  #e8eaf6;
    --auth-accent:         #f4a716;
    --auth-accent-dark:    #d4920f;
    --auth-success:        #28a745;
    --auth-danger:         #e74c3c;
    --auth-warning:        #f39c12;

    /* Surface */
    --auth-white:          #ffffff;
    --auth-bg:             #f0f2f8;
    --auth-card:           #ffffff;
    --auth-border:         #dde2ed;
    --auth-border-focus:   #202870;

    /* Text */
    --auth-text-1:         #1a1d3a;
    --auth-text-2:         #4a5060;
    --auth-text-3:         #8a92a8;

    /* Radius — two scales available; components use whichever fits */
    --auth-radius:         6px;      /* default sharp (Perfex style) */
    --auth-radius-lg:      10px;
    --auth-radius-xl:      16px;
    --auth-radius-pill:    999px;

    /* Shadows */
    --auth-shadow:         0 2px 16px rgba(32,40,112,0.10);
    --auth-shadow-card:    0 4px 32px rgba(32,40,112,0.13);

    /* Dimensions */
    --auth-input-h:        44px;
    --auth-btn-h:          54px;

    /* Typography */
    --auth-font:           'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --auth-font-display:   'Syne', var(--auth-font);
}

/* ══════════════════════════════════════════════════════════════
   BASE RESET  (auth-scoped only)
══════════════════════════════════════════════════════════════ */
.hr-auth-page *,
.hr-auth-page *::before,
.hr-auth-page *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

.hr-auth-page {
    font-family: var(--auth-font);
    background: var(--auth-bg);
    min-height: 100vh;
    color: var(--auth-text-1);
    display: flex;
    width: 100%;
}

/* ══════════════════════════════════════════════════════════════
   LEFT PANEL  (.hr-left)
   — supports both old alias .hr-auth-left and new .hr-left
══════════════════════════════════════════════════════════════ */
.hr-auth-page .hr-left,
.hr-auth-page .hr-auth-left {
    width: 420px;
    min-width: 360px;
    background: var(--auth-primary);
    color: var(--auth-white);
    display: flex;
    flex-direction: column;
    padding: 48px 44px;
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

/* Subtle grid texture */
.hr-auth-page .hr-left::before,
.hr-auth-page .hr-auth-left::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
    background-size: 32px 32px;
    pointer-events: none;
}

/* Decorative orb — bottom-left */
.hr-auth-page .hr-left::after,
.hr-auth-page .hr-auth-left::after {
    content: '';
    position: absolute;
    bottom: -60px;
    left: -60px;
    width: 260px;
    height: 260px;
    border-radius: 50%;
    background: rgba(244,167,22,0.08);
    pointer-events: none;
}

/* ── Left: Logo (hidden by default — controlled per-page) ─── */
.hr-left-logo {
    display: none;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    margin-bottom: 40px;
    position: relative;
    z-index: 1;
}

.hr-left-logo img {
    height: 36px;
    width: auto;
    filter: brightness(0) invert(1);
}

.hr-left-logo-text {
    display: none;
    font-family: var(--auth-font-display);
    font-size: 18px;
    font-weight: 700;
    color: var(--auth-white);
    letter-spacing: -0.3px;
}

.hr-left-logo-text em {
    font-style: normal;
    color: var(--auth-accent);
}

/* ── Left: Headline ──────────────────────────────────────── */
.hr-left-headline {
    font-family: var(--auth-font-display);
    font-size: 28px;
    font-weight: 800;
    line-height: 1.25;
    color: var(--auth-white);
    margin-bottom: 12px;
    position: relative;
    z-index: 1;
}

.hr-left-headline span { color: var(--auth-accent); }

/* Legacy alias used in some templates */
.hr-auth-tagline {
    position: relative;
    z-index: 1;
    margin-bottom: 28px;
}

.hr-auth-tagline h2 {
    font-family: var(--auth-font-display);
    font-size: 26px;
    font-weight: 700;
    color: var(--auth-white);
    line-height: 1.25;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.hr-auth-tagline p {
    font-size: 14px;
    color: rgba(255,255,255,0.70);
    line-height: 1.55;
    font-weight: 400;
}

.hr-auth-tagline .hr-accent-dot { color: var(--auth-accent); }

/* ── Left: Subtitle ──────────────────────────────────────── */
.hr-left-sub {
    font-size: 13.5px;
    color: rgba(255,255,255,0.70);
    line-height: 1.55;
    margin-bottom: 28px;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════════════════════════════
   LIVE FEED  (unified — supports both markup patterns)
══════════════════════════════════════════════════════════════ */

/* Container */
.hr-auth-page .hr-feed,
.hr-auth-page .hr-live-feed {
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: var(--auth-radius-lg);
    padding: 16px;
    margin-bottom: 28px;
    flex: 1;
    min-height: 0;
    position: relative;
    z-index: 1;
    width: 100%;
}

/* Header row */
.hr-auth-page .hr-feed-hd,
.hr-auth-page .hr-live-feed-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.60);
    margin-bottom: 12px;
}

/* Live dot — pulsing glow animation */
.hr-auth-page .hr-live-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #4ade80;
    box-shadow: 0 0 0 0 rgba(74,222,128,0.5);
    animation: hr-live-pulse 2s infinite;
    flex-shrink: 0;
}

@keyframes hr-live-pulse {
    0%   { box-shadow: 0 0 0 0 rgba(74,222,128,0.5); }
    70%  { box-shadow: 0 0 0 7px rgba(74,222,128,0); }
    100% { box-shadow: 0 0 0 0 rgba(74,222,128,0); }
}

/* Feed list */
.hr-auth-page .hr-feed-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    list-style: none;
}

/* Feed item */
.hr-auth-page .hr-feed-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: var(--auth-radius);
    font-size: 12.5px;
    animation: hr-feed-in 0.4s ease both;
    transition: background 0.2s;
}

.hr-auth-page .hr-feed-item:hover {
    background: rgba(255,255,255,0.09);
}

@keyframes hr-feed-in {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

.hr-auth-page .hr-feed-item:nth-child(1) { animation-delay: 0.04s; }
.hr-auth-page .hr-feed-item:nth-child(2) { animation-delay: 0.10s; }
.hr-auth-page .hr-feed-item:nth-child(3) { animation-delay: 0.16s; }
.hr-auth-page .hr-feed-item:nth-child(4) { animation-delay: 0.22s; }
.hr-auth-page .hr-feed-item:nth-child(5) { animation-delay: 0.28s; }
.hr-auth-page .hr-feed-item:nth-child(6) { animation-delay: 0.34s; }

/* Feed icon / avatar */
.hr-auth-page .hr-feed-icon,
.hr-auth-page .hr-feed-avatar {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    line-height: 1;
}

.hr-auth-page .hr-feed-icon.green,
.hr-auth-page .hr-feed-avatar.green   { background: rgba(40,167,69,0.25);  color: #4ade80; }
.hr-auth-page .hr-feed-icon.orange,
.hr-auth-page .hr-feed-avatar.orange  { background: rgba(244,167,22,0.25); color: var(--auth-accent); }
.hr-auth-page .hr-feed-icon.blue,
.hr-auth-page .hr-feed-avatar.blue    { background: rgba(99,179,237,0.25); color: #63b3ed; }
.hr-auth-page .hr-feed-avatar.purple  { background: rgba(124,58,237,0.25); color: #a78bfa; }

/* Feed text */
.hr-auth-page .hr-feed-text {
    flex: 1;
    min-width: 0;
}


.hr-auth-page .hr-feed-name {
    display: block;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--auth-white);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
}

.hr-auth-page .hr-feed-text span,
.hr-auth-page .hr-feed-body .hr-feed-text {
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    line-height: 1.4;
}

.hr-auth-page .hr-feed-text strong { color: var(--auth-accent); font-weight: 600; }

/* Feed timestamp */
.hr-auth-page .hr-feed-time {
    font-size: 10.5px;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
    flex-shrink: 0;
}

/* ══════════════════════════════════════════════════════════════
   STATS BAR  (left panel bottom)
══════════════════════════════════════════════════════════════ */
.hr-auth-page .hr-left-stats,
.hr-auth-page .hr-auth-stats {
    display: flex;
    gap: 0;
    border-top: 1px solid rgba(255,255,255,0.12);
    padding-top: 22px;
    position: relative;
    z-index: 1;
    width: 100%;
    margin-top: 0;
}

.hr-auth-page .hr-stat {
    flex: 1;
    text-align: center;
    padding: 0 8px;
    border-right: 1px solid rgba(255,255,255,0.12);
}

.hr-auth-page .hr-stat:last-child { border-right: none; }

.hr-auth-page .hr-stat-val {
    font-family: var(--auth-font-display);
    font-size: 18px;
    font-weight: 800;
    color: var(--auth-accent);
    line-height: 1.1;
    margin-bottom: 3px;
}

.hr-auth-page .hr-stat-lbl {
    font-size: 10px;
    color: rgba(255,255,255,0.50);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

/* ══════════════════════════════════════════════════════════════
   RIGHT PANEL  (.hr-right / .hr-auth-right)
══════════════════════════════════════════════════════════════ */
.hr-auth-page .hr-right,
.hr-auth-page .hr-auth-right {
    flex: 1;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    overflow-y: auto;
    padding: 80px 24px 40px;
    background: var(--auth-bg);
    min-height: 100vh;
}

/* ══════════════════════════════════════════════════════════════
   FORM CARD  (.hr-form-card / .hr-auth-card)
══════════════════════════════════════════════════════════════ */
.hr-auth-page .hr-form-card,
.hr-auth-page .hr-auth-card {
    width: 100%;
    max-width: 440px;
    background: var(--auth-card);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-lg);
    box-shadow: var(--auth-shadow-card);
    padding: 38px 36px 28px;
}

/* Mobile logo inside card (tablet breakpoint) */
.hr-form-mobile-logo {
    display: none;
    margin-bottom: 24px;
}

/* ── Card header / title ─────────────────────────────────── */
.hr-auth-page .hr-form-title,
.hr-auth-page .hr-auth-header h1 {
    font-family: var(--auth-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--auth-text-1);
    margin: 0 0 5px;
    line-height: 1.25;
    letter-spacing: -0.2px;
}

.hr-auth-page .hr-form-sub,
.hr-auth-page .hr-auth-header p {
    font-size: 13.5px;
    color: var(--auth-text-3);
    margin: 0 0 22px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   AUTH TABS  (login page role switch)
══════════════════════════════════════════════════════════════ */
.hr-auth-tabs {
    display: flex;
    gap: 6px;
    background: var(--auth-bg);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    padding: 4px;
    margin-bottom: 22px;
}

.hr-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 12px;
    border: none;
    background: transparent;
    border-radius: calc(var(--auth-radius) - 2px);
    font-family: var(--auth-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-text-3);
    cursor: pointer;
    transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    white-space: nowrap;
}

.hr-tab-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.6;
    transition: opacity 0.18s;
}

.hr-tab-btn.active {
    background: var(--auth-white);
    color: var(--auth-primary);
    font-weight: 600;
    box-shadow: 0 1px 4px rgba(32,40,112,0.12);
}

.hr-tab-btn.active svg { opacity: 1; }
.hr-tab-btn:hover:not(.active) { color: var(--auth-text-2); }

/* ══════════════════════════════════════════════════════════════
   ROLE SELECTOR  (register page — radio chips)
══════════════════════════════════════════════════════════════ */
.hr-role-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-text-2);
    margin-bottom: 8px;
}

.hr-role-label .req { color: var(--auth-danger); margin-left: 1px; }

.hr-role-group {
    display: flex;
    gap: 8px;
}

.hr-role-group input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
    pointer-events: none;
}

/* Role chip — used in both register and login pages */
.hr-role-chip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 12px;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    font-family: var(--auth-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-text-2);
    cursor: pointer;
    background: var(--auth-bg);
    transition: border-color 0.18s, background 0.18s, color 0.18s, box-shadow 0.18s;
    user-select: none;
    position: relative;
    line-height: 1;
}

.hr-role-chip:hover {
    border-color: var(--auth-primary);
    background: var(--auth-primary-light);
    color: var(--auth-primary);
}

.hr-role-group input[type="radio"]:checked + .hr-role-chip {
    border-color: var(--auth-primary);
    background: var(--auth-primary-light);
    color: var(--auth-primary);
    font-weight: 600;
}

/* Checkmark inside selected chip */
.chip-icon { font-size: 14px; line-height: 1; }

.chip-check {
    display: none;
    width: 16px;
    height: 16px;
    background: var(--auth-primary);
    border-radius: 50%;
    align-items: center;
    justify-content: center;
    margin-left: auto;
    flex-shrink: 0;
}

.chip-check svg { width: 8px; height: 8px; }

.hr-role-group input[type="radio"]:checked + .hr-role-chip .chip-check {
    display: flex;
}

/* ══════════════════════════════════════════════════════════════
   SECTION LABELS  (register page dividers)
══════════════════════════════════════════════════════════════ */
.hr-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.7px;
    color: var(--auth-text-3);
    margin: 18px 0 10px;
    padding-bottom: 6px;
    border-bottom: 1px solid var(--auth-border);
}

.hr-section-label-top { margin-top: 14px; }

/* ══════════════════════════════════════════════════════════════
   FORM FIELDS
══════════════════════════════════════════════════════════════ */
.hr-field,
.hr-form-group {
    margin-bottom: 16px;
}

.hr-form-row {
    display: flex;
    gap: 12px;
}

.hr-form-row .hr-form-group,
.hr-form-row .hr-field { flex: 1; }

/* Labels */
.hr-field label,
.hr-form-label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-text-2);
    margin-bottom: 6px;
    letter-spacing: 0.1px;
}

.hr-field label .req,
.hr-form-label .hr-required { color: var(--auth-danger); margin-left: 1px; }

/* Text inputs and selects */
.hr-input,
.hr-form-input {
    display: block;
    width: 100%;
    height: var(--auth-input-h);
    padding: 0 12px;
    font-family: var(--auth-font);
    font-size: 14px;
    color: var(--auth-text-1);
    background: var(--auth-white);
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    appearance: none;
    -webkit-appearance: none;
}

.hr-input::placeholder,
.hr-form-input::placeholder {
    color: var(--auth-text-3);
    font-size: 13.5px;
}

.hr-input:focus,
.hr-form-input:focus {
    border-color: var(--auth-border-focus);
    box-shadow: 0 0 0 3px rgba(32,40,112,0.09);
}

/* Icon-padded inputs */
.hr-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.hr-input-icon {
    position: absolute;
    left: 13px;
    color: var(--auth-text-3);
    display: flex;
    align-items: center;
    pointer-events: none;
    z-index: 1;
}

.hr-input-icon svg { width: 16px; height: 16px; }

.hr-input-wrap .hr-form-input { padding-left: 38px; }
.hr-form-input.no-icon { padding-left: 14px; }
.hr-input-wrap:focus-within .hr-input-icon { color: var(--auth-primary); }

/* Select */
.hr-form-select {
    width: 100%;
    height: var(--auth-input-h);
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    padding: 0 14px 0 38px;
    font-family: var(--auth-font);
    font-size: 14px;
    color: var(--auth-text-1);
    background: var(--auth-white);
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238a92a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
}

.hr-form-select:focus {
    border-color: var(--auth-border-focus);
    box-shadow: 0 0 0 3px rgba(32,40,112,0.09);
}

/* Validation states */
.hr-input.is-error,
.hr-form-input.is-error,
.hr-form-select.is-error,
.hr-auth-page .is-invalid {
    border-color: var(--auth-danger);
    box-shadow: 0 0 0 3px rgba(231,76,60,0.08);
}

.hr-input.is-valid,
.hr-form-input.is-valid,
.hr-form-select.is-valid {
    border-color: var(--auth-success);
}

/* Field hint */
.hr-field-hint {
    display: block;
    font-size: 11.5px;
    color: var(--auth-text-3);
    margin-top: 4px;
    line-height: 1.4;
}

/* Error / help text */
.hr-form-error,
.hr-auth-page .text-danger,
.hr-auth-page .invalid-feedback {
    font-size: 11.5px;
    color: var(--auth-danger);
    margin-top: 4px;
    display: block;
}

.hr-form-help { font-size: 11.5px; color: var(--auth-text-3); margin-top: 4px; }

/* ══════════════════════════════════════════════════════════════
   PASSWORD FIELD
══════════════════════════════════════════════════════════════ */
.hr-pw-wrap {
    position: relative;
}

.hr-pw-wrap .hr-input {
    padding-right: 42px;
}

.hr-pw-toggle {
    position: absolute;
    right: 0;
    top: 0;
    width: 40px;
    height: var(--auth-input-h);
    border: none;
    background: transparent;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--auth-text-3);
    transition: color 0.15s;
    z-index: 1;
}

.hr-pw-toggle:hover { color: var(--auth-primary); }
.hr-pw-toggle svg   { width: 16px; height: 16px; pointer-events: none; }

/* Strength meter */
.hr-pw-strength { margin-top: 6px; }

.hr-pw-strength-bar {
    height: 4px;
    border-radius: 999px;
    background: var(--auth-border);
    overflow: hidden;
    margin-bottom: 4px;
}

.hr-pw-strength-fill {
    height: 100%;
    border-radius: 999px;
    transition: width 0.3s ease, background 0.3s ease;
    width: 0%;
}

.hr-pw-strength-fill.weak   { width: 33%;  background: var(--auth-danger); }
.hr-pw-strength-fill.fair   { width: 66%;  background: var(--auth-warning); }
.hr-pw-strength-fill.strong { width: 100%; background: var(--auth-success); }

.hr-pw-strength-text        { font-size: 11px; color: var(--auth-text-3); font-weight: 500; }
.hr-pw-strength-text.weak   { color: var(--auth-danger); }
.hr-pw-strength-text.fair   { color: var(--auth-warning); }
.hr-pw-strength-text.strong { color: var(--auth-success); }

/* ══════════════════════════════════════════════════════════════
   PHONE INPUT
══════════════════════════════════════════════════════════════ */
.hr-phone-wrap {
    display: flex;
    align-items: center;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    overflow: hidden;
    transition: border-color 0.18s, box-shadow 0.18s;
    background: var(--auth-white);
}

.hr-phone-wrap:focus-within {
    border-color: var(--auth-border-focus);
    box-shadow: 0 0 0 3px rgba(32,40,112,0.09);
}

.hr-phone-prefix {
    padding: 0 10px;
    font-size: 13px;
    font-weight: 600;
    color: var(--auth-text-2);
    border-right: 1.5px solid var(--auth-border);
    height: var(--auth-input-h);
    display: flex;
    align-items: center;
    background: var(--auth-bg);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Override inner input border when inside phone-wrap */
.hr-phone-wrap .hr-input {
    border: none;
    border-radius: 0;
    box-shadow: none;
    flex: 1;
}

.hr-phone-wrap .hr-input:focus { box-shadow: none; }

/* Legacy phone layout */
.hr-phone-code {
    height: var(--auth-input-h);
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    padding: 0 10px;
    font-family: var(--auth-font);
    font-size: 14px;
    color: var(--auth-text-1);
    background: var(--auth-bg);
    min-width: 68px;
    max-width: 80px;
    display: flex;
    align-items: center;
    font-weight: 500;
    flex-shrink: 0;
}

.hr-phone-input {
    flex: 1;
    height: var(--auth-input-h);
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    padding: 0 14px;
    font-family: var(--auth-font);
    font-size: 14px;
    color: var(--auth-text-1);
    background: var(--auth-white);
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
}

.hr-phone-input::placeholder { color: var(--auth-text-3); font-size: 13.5px; }

.hr-phone-input:focus {
    border-color: var(--auth-border-focus);
    box-shadow: 0 0 0 3px rgba(32,40,112,0.09);
}

/* ══════════════════════════════════════════════════════════════
   OTP INPUT
══════════════════════════════════════════════════════════════ */
/* Boxed OTP (6-digit) */
.hr-otp-boxes {
    display: flex;
    gap: 10px;
    justify-content: center;
    margin-bottom: 14px;
}

.hr-otp-box {
    width: 52px;
    height: 56px;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background: var(--auth-white);
    font-family: var(--auth-font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--auth-primary);
    text-align: center;
    outline: none;
    transition: border-color 0.18s, box-shadow 0.18s;
    appearance: none;
    -webkit-appearance: none;
}

.hr-otp-box:focus {
    border-color: var(--auth-primary);
    box-shadow: 0 0 0 3px rgba(32,40,112,0.09);
}

/* Inline OTP (single field + button) */
.hr-otp-wrap {
    display: flex;
    gap: 8px;
    align-items: center;
}

.hr-otp-input {
    flex: 1;
    height: var(--auth-input-h);
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    padding: 0 14px;
    font-family: var(--auth-font);
    font-size: 14px;
    color: var(--auth-text-1);
    background: var(--auth-white);
    transition: border-color 0.18s, box-shadow 0.18s;
    outline: none;
    letter-spacing: 3px;
    font-weight: 600;
    text-align: center;
}

.hr-otp-input:focus {
    border-color: var(--auth-border-focus);
    box-shadow: 0 0 0 3px rgba(32,40,112,0.09);
}

.hr-otp-btn {
    height: var(--auth-input-h);
    padding: 0 14px;
    border-radius: var(--auth-radius);
    border: 1.5px solid var(--auth-primary);
    background: var(--auth-white);
    color: var(--auth-primary);
    font-family: var(--auth-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background 0.18s, color 0.18s;
    flex-shrink: 0;
}

.hr-otp-btn:hover { background: var(--auth-primary); color: var(--auth-white); }
.hr-otp-btn:disabled { opacity: 0.55; cursor: not-allowed; }

/* OTP step panels */
.hr-otp-step { display: none; }
.hr-otp-step.active { display: block; }

/* Timer */
.hr-otp-timer {
    font-size: 12.5px;
    color: var(--auth-text-3);
    text-align: center;
    margin-bottom: 8px;
}

.hr-otp-timer span {
    font-weight: 600;
    color: var(--auth-text-2);
    font-variant-numeric: tabular-nums;
}

.hr-resend-btn {
    background: none;
    border: none;
    font-family: var(--auth-font);
    font-size: 12.5px;
    color: var(--auth-primary);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s;
}

.hr-resend-btn:disabled {
    color: var(--auth-text-3);
    text-decoration: none;
    cursor: not-allowed;
    opacity: 0.6;
}

/* Back link */
.hr-back-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: none;
    border: none;
    font-family: var(--auth-font);
    font-size: 13px;
    color: var(--auth-text-2);
    cursor: pointer;
    padding: 0;
    margin-bottom: 14px;
    font-weight: 500;
    transition: color 0.15s;
}

.hr-back-link:hover { color: var(--auth-primary); }

.hr-otp-masked {
    font-size: 13.5px;
    color: var(--auth-text-2);
    margin-bottom: 10px;
}

.hr-otp-masked strong { color: var(--auth-primary); font-weight: 600; }

/* ══════════════════════════════════════════════════════════════
   CHECKBOXES / TERMS
══════════════════════════════════════════════════════════════ */
.hr-checkbox-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 10px;
}

.hr-checkbox-row-mb { margin-bottom: 16px; }

.hr-checkbox-row input[type="checkbox"] {
    width: 15px;
    height: 15px;
    accent-color: var(--auth-primary);
    cursor: pointer;
    flex-shrink: 0;
    margin-top: 2px;
}

.hr-checkbox-row label,
.hr-check-label {
    font-size: 12.5px;
    color: var(--auth-text-2);
    line-height: 1.45;
    cursor: pointer;
    user-select: none;
}

.hr-checkbox-row label a,
.hr-check-label a {
    color: var(--auth-primary);
    font-weight: 500;
    text-decoration: none;
}

.hr-checkbox-row label a:hover,
.hr-check-label a:hover { text-decoration: underline; }

/* Remember + Forgot row */
.hr-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.hr-forgot {
    background: none;
    border: none;
    font-family: var(--auth-font);
    font-size: 13px;
    color: var(--auth-primary);
    font-weight: 600;
    cursor: pointer;
    padding: 0;
    text-decoration: underline;
    text-underline-offset: 2px;
    transition: opacity 0.15s;
}

.hr-forgot:hover { opacity: 0.75; }

/* Forgot password link variant */
.hr-forgot-row {
    display: flex;
    justify-content: flex-end;
    margin-top: -6px;
    margin-bottom: 14px;
}

.hr-forgot-link {
    font-size: 12.5px;
    color: var(--auth-primary);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s;
}

.hr-forgot-link:hover { opacity: 0.75; text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   WORK STATUS SELECTOR  (register — candidate only)
══════════════════════════════════════════════════════════════ */
.hr-ws-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 8px;
}

.hr-ws-opt {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    cursor: pointer;
    transition: border-color 0.18s, background 0.18s;
    background: var(--auth-white);
}

.hr-ws-opt input[type="radio"] { display: none; }
.hr-ws-opt:hover { border-color: var(--auth-primary); background: var(--auth-primary-light); }
.hr-ws-opt.selected { border-color: var(--auth-primary); background: var(--auth-primary-light); }

.hr-ws-icon  { font-size: 20px; flex-shrink: 0; }
.hr-ws-label { font-size: 13.5px; font-weight: 600; color: var(--auth-text-1); }
.hr-ws-desc  { font-size: 12px; color: var(--auth-text-3); margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════
   GOOGLE / SOCIAL BUTTONS
══════════════════════════════════════════════════════════════ */
.hr-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 44px;
    border: 1.5px solid #dadce0;
    border-radius: var(--auth-radius);
    background: #fff;
    font-family: var(--auth-font);
    font-size: 14px;
    font-weight: 500;
    color: #3c4043;
    text-decoration: none;
    cursor: pointer;
    transition: background 0.18s, box-shadow 0.18s;
    margin-bottom: 16px;
}

.hr-google-btn:hover {
    background: #f8f9fa;
    box-shadow: 0 1px 4px rgba(0,0,0,0.12);
}

/* Social button row (legacy multi-provider) */
.hr-social-row {
    display: flex;
    gap: 10px;
    margin-bottom: 18px;
}

.hr-btn-social {
    flex: 1;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    background: var(--auth-white);
    font-family: var(--auth-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-text-1);
    cursor: pointer;
    text-decoration: none;
    transition: border-color 0.18s, box-shadow 0.18s;
}

.hr-btn-social:hover {
    border-color: var(--auth-primary);
    box-shadow: 0 2px 8px rgba(32,40,112,0.09);
}

.hr-btn-social svg { width: 18px; height: 18px; flex-shrink: 0; }

/* ══════════════════════════════════════════════════════════════
   OR DIVIDER
══════════════════════════════════════════════════════════════ */
.hr-divider,
.hr-auth-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    color: var(--auth-text-3);
    font-size: 12px;
    font-weight: 500;
}

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

/* ══════════════════════════════════════════════════════════════
   SUBMIT BUTTON  (auth-scoped — does NOT override landing .hr-btn-primary)
══════════════════════════════════════════════════════════════ */
.hr-auth-page .hr-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: var(--auth-btn-h);
    padding: 0 20px;
    background: var(--auth-primary);
    color: var(--auth-white);
    border: none;
    border-radius: var(--auth-radius-pill);
    font-family: var(--auth-font);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
    box-shadow: 0 2px 12px rgba(32,40,112,0.20);
    letter-spacing: 0.1px;
    text-decoration: none;
    margin-top: 4px;
    line-height: var(--auth-btn-h);
}

.hr-auth-page .hr-submit-btn svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.hr-auth-page .hr-submit-btn:hover {
    background: var(--auth-primary-dark);
    box-shadow: 0 5px 18px rgba(32,40,112,0.26);
    transform: translateY(-1px);
}

.hr-auth-page .hr-submit-btn:active {
    transform: scale(0.99);
    box-shadow: 0 2px 8px rgba(32,40,112,0.16);
}

.hr-auth-page .hr-submit-btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Spinner inside button */
.hr-btn-spinner {
    width: 17px;
    height: 17px;
    border: 2px solid rgba(255,255,255,0.35);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hr-spin 0.7s linear infinite;
    flex-shrink: 0;
}

@keyframes hr-spin { to { transform: rotate(360deg); } }

/* Ghost / outline button */
.hr-btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 38px;
    padding: 0 18px;
    background: transparent;
    color: var(--auth-primary);
    border: 1.5px solid var(--auth-primary);
    border-radius: var(--auth-radius-pill);
    font-family: var(--auth-font);
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
}

.hr-btn-ghost:hover { background: var(--auth-primary); color: var(--auth-white); }

/* ══════════════════════════════════════════════════════════════
   ALERTS / FLASH MESSAGES
══════════════════════════════════════════════════════════════ */
.hr-errors,
.hr-alert {
    border-radius: var(--auth-radius);
    padding: 11px 14px;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 8px;
    line-height: 1.45;
}

.hr-errors {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: var(--auth-danger);
    flex-direction: column;
}

.hr-alert svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 1px; }

.hr-alert-danger  { background: #fef2f2;              color: #b91c1c; border: 1px solid #fecaca; }
.hr-alert-success { background: #f0fdf4;              color: #15803d; border: 1px solid #bbf7d0; }
.hr-alert-warning { background: #fffbeb;              color: #92400e; border: 1px solid #fde68a; }
.hr-alert-info    { background: var(--auth-primary-light); color: var(--auth-primary); border: 1px solid rgba(32,40,112,0.15); }

/* Mismatch banner */
.hr-mismatch {
    display: none;
    align-items: center;
    gap: 7px;
    background: #fef9ec;
    border: 1px solid #fde68a;
    border-radius: var(--auth-radius);
    padding: 8px 12px;
    font-size: 12.5px;
    color: #92400e;
    margin-top: 8px;
    margin-bottom: 4px;
}

.hr-mismatch.show { display: flex; }

/* Info box */
.hr-info {
    background: var(--auth-primary-light);
    border: 1px solid rgba(32,40,112,0.15);
    border-radius: var(--auth-radius);
    padding: 9px 13px;
    font-size: 12.5px;
    color: var(--auth-primary);
    margin-bottom: 18px;
    line-height: 1.5;
}

/* ══════════════════════════════════════════════════════════════
   FORM FOOTER  (links + CTA at bottom of card)
══════════════════════════════════════════════════════════════ */
.hr-form-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--auth-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.hr-form-footer-row { text-align: center; }

.hr-form-footer-row a {
    font-size: 12.5px;
    color: var(--auth-primary);
    text-decoration: none;
    font-weight: 500;
    transition: opacity 0.15s;
}

.hr-form-footer-row a:hover { opacity: 0.75; text-decoration: underline; }

/* Auth footer (legacy) */
.hr-auth-footer {
    text-align: center;
    margin-top: 20px;
    font-size: 13px;
    color: var(--auth-text-2);
}

.hr-auth-footer a { color: var(--auth-primary); font-weight: 600; text-decoration: none; }
.hr-auth-footer a:hover { text-decoration: underline; }

/* ══════════════════════════════════════════════════════════════
   NEW-USER / EXISTING-USER CTA BLOCK
══════════════════════════════════════════════════════════════ */
.hr-new-user-cta {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-top: 14px;
    padding: 14px 16px;
    background: linear-gradient(135deg, #f8f9ff 0%, var(--auth-primary-light) 100%);
    border: 1px solid rgba(32,40,112,0.12);
    border-radius: var(--auth-radius);
}

.hr-new-user-icon {
    width: 36px;
    height: 36px;
    background: var(--auth-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 4px rgba(32,40,112,0.10);
    flex-shrink: 0;
}

.hr-new-user-text { flex: 1; min-width: 0; }

.hr-new-user-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--auth-text-1);
}

.hr-new-user-text span { font-size: 12px; color: var(--auth-text-3); }

.hr-new-user-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    height: 36px;
    padding: 0 16px;
    background: var(--auth-primary);
    /* !important guards against landing.css 'a' color reset inside this specific widget */
    color: var(--auth-white) !important;
    border-radius: var(--auth-radius);
    font-family: var(--auth-font);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    flex-shrink: 0;
    white-space: nowrap;
    transition: background 0.18s;
}

.hr-new-user-btn:hover { background: var(--auth-primary-dark); }
.hr-new-user-btn svg   { width: 11px; height: 11px; }

/* Client company login button */
.hr-client-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    border: 1.5px solid var(--auth-border);
    border-radius: var(--auth-radius);
    font-family: var(--auth-font);
    font-size: 13px;
    font-weight: 500;
    color: var(--auth-text-2);
    text-decoration: none;
    background: var(--auth-bg);
    transition: border-color 0.18s, color 0.18s, background 0.18s;
}

.hr-client-btn svg { width: 14px; height: 14px; flex-shrink: 0; }

.hr-client-btn:hover {
    border-color: var(--auth-primary);
    color: var(--auth-primary);
    background: var(--auth-primary-light);
}

/* ══════════════════════════════════════════════════════════════
   BENEFITS PANEL  (register page left panel variant)
══════════════════════════════════════════════════════════════ */
.hr-benefits {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    margin-bottom: 24px;
}

.hr-benefit-item {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--auth-radius);
}

.hr-benefit-icon {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    flex-shrink: 0;
}

.hr-benefit-icon.green  { background: rgba(40,167,69,0.25);   color: #4ade80; }
.hr-benefit-icon.orange { background: rgba(244,167,22,0.25);  color: #fbbf24; }
.hr-benefit-icon.blue   { background: rgba(99,179,237,0.25);  color: #63b3ed; }
.hr-benefit-icon.yellow { background: rgba(251,191,36,0.25);  color: #fbbf24; }
.hr-benefit-icon.purple { background: rgba(167,139,250,0.25); color: #a78bfa; }

.hr-benefit-text { flex: 1; min-width: 0; }

.hr-benefit-text strong {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
    margin-bottom: 1px;
}

.hr-benefit-text span { font-size: 11px; color: rgba(255,255,255,0.55); }

/* ══════════════════════════════════════════════════════════════
   FEATURES PANEL  (client portal left panel)
══════════════════════════════════════════════════════════════ */
.hr-features {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex: 1;
    margin-bottom: 24px;
}

.hr-feature {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: var(--auth-radius);
}

.hr-feature-icon { font-size: 18px; line-height: 1; flex-shrink: 0; margin-top: 1px; }

.hr-feature-text { flex: 1; min-width: 0; }

.hr-feature-text strong {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    margin-bottom: 2px;
}

.hr-feature-text span { font-size: 12px; color: rgba(255,255,255,0.55); line-height: 1.4; }

/* ══════════════════════════════════════════════════════════════
   BADGES & TAGS
══════════════════════════════════════════════════════════════ */
.hr-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 10px;
    border-radius: var(--auth-radius-pill);
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
}

.hr-badge-accent  { background: rgba(244,167,22,0.12); color: var(--auth-accent-dark); }
.hr-badge-primary { background: var(--auth-primary-light); color: var(--auth-primary); }
.hr-badge-success { background: #dcfce7; color: #15803d; }

/* Client badge */
.hr-client-badge {
    display: inline-block;
    padding: 4px 12px;
    background: rgba(255,255,255,0.12);
    border: 1px solid rgba(255,255,255,0.20);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: rgba(255,255,255,0.80);
    margin-bottom: 18px;
}

/* Portal badge */
.hr-portal-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    background: #e8f5e9;
    border: 1px solid #c8e6c9;
    border-radius: 100px;
    font-size: 11.5px;
    font-weight: 600;
    color: #2e7d32;
    margin-bottom: 14px;
}

/* Step badge (forgot password popup) */
.hr-step-badge {
    display: inline-block;
    padding: 3px 10px;
    background: var(--auth-primary-light);
    border-radius: 100px;
    font-size: 11px;
    font-weight: 700;
    color: var(--auth-primary);
    letter-spacing: 0.3px;
    margin-bottom: 12px;
}

/* ══════════════════════════════════════════════════════════════
   STEP DOTS  (multi-step register)
══════════════════════════════════════════════════════════════ */
.hr-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}

.hr-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--auth-border);
    transition: background 0.2s, width 0.2s;
}

.hr-step-dot.active { width: 24px; border-radius: 999px; background: var(--auth-primary); }
.hr-step-dot.done   { background: var(--auth-success); }

/* ══════════════════════════════════════════════════════════════
   SEPARATOR
══════════════════════════════════════════════════════════════ */
.hr-sep { height: 1px; background: var(--auth-border); margin: 18px 0; }

/* ══════════════════════════════════════════════════════════════
   FORGOT PASSWORD OVERLAY + POPUP
══════════════════════════════════════════════════════════════ */
.hr-overlay {
    position: fixed;
    inset: 0;
    background: rgba(20,25,60,0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s;
    padding: 20px;
}

.hr-overlay.open { opacity: 1; pointer-events: auto; }

.hr-popup {
    background: var(--auth-card);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius-lg);
    box-shadow: 0 20px 60px rgba(20,25,60,0.25);
    padding: 32px 32px 28px;
    width: 100%;
    max-width: 420px;
    position: relative;
    transform: translateY(12px);
    transition: transform 0.22s;
}

.hr-overlay.open .hr-popup { transform: translateY(0); }

.hr-popup-close {
    position: absolute;
    top: 14px;
    right: 14px;
    width: 28px;
    height: 28px;
    border: 1px solid var(--auth-border);
    border-radius: 50%;
    background: var(--auth-white);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--auth-text-3);
    transition: color 0.15s, border-color 0.15s;
}

.hr-popup-close:hover { color: var(--auth-text-1); border-color: var(--auth-text-3); }
.hr-popup-close svg   { width: 12px; height: 12px; pointer-events: none; }

.hr-popup-step        { display: none; }
.hr-popup-step.active { display: block; }

.hr-popup-title {
    font-family: var(--auth-font-display);
    font-size: 19px;
    font-weight: 700;
    color: var(--auth-text-1);
    margin-bottom: 5px;
}

.hr-popup-sub {
    font-size: 13px;
    color: var(--auth-text-3);
    margin-bottom: 20px;
    line-height: 1.5;
}

.hr-popup-sub strong { color: var(--auth-primary); font-weight: 600; }

.hr-contact-admin {
    background: var(--auth-bg);
    border: 1px solid var(--auth-border);
    border-radius: var(--auth-radius);
    padding: 16px;
    font-size: 13.5px;
    color: var(--auth-text-2);
    line-height: 1.7;
}

.hr-contact-admin a { color: var(--auth-primary); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }

/* Forgot password admin row */
.hr-fp-admin-row {
    text-align: center;
    margin-top: 14px;
    font-size: 12px;
    color: var(--auth-text-3);
}

.hr-fp-admin-link {
    background: none;
    border: none;
    font-size: 12px;
    color: var(--auth-primary);
    font-weight: 600;
    cursor: pointer;
    text-decoration: underline;
    text-underline-offset: 2px;
    padding: 0;
    margin-left: 4px;
    font-family: inherit;
}

/* ══════════════════════════════════════════════════════════════
   CLIENT PORTAL  (hr-auth-client variant)
══════════════════════════════════════════════════════════════ */
.hr-auth-client .hr-left { background: #1a3a2a; }

/* ══════════════════════════════════════════════════════════════
   MOBILE BRAND  (shown only when left panel is hidden)
══════════════════════════════════════════════════════════════ */
.hr-mobile-brand {
    display: none;
    text-align: center;
    margin-bottom: 20px;
}

.hr-mobile-brand .hr-brand-name {
    font-family: var(--auth-font-display);
    font-size: 22px;
    font-weight: 800;
    color: var(--auth-primary);
    letter-spacing: -0.5px;
}

.hr-mobile-brand .hr-brand-tagline { font-size: 12px; color: var(--auth-text-3); margin-top: 2px; }
.hr-mobile-logo-img { height: 32px; width: auto; }

/* ══════════════════════════════════════════════════════════════
   UTILITY CLASSES  (auth-scoped)
══════════════════════════════════════════════════════════════ */
.hr-auth-page .d-none      { display: none; }
.hr-auth-page .text-center { text-align: center; }
.hr-auth-page .mt-2        { margin-top: 8px; }
.hr-auth-page .mt-3        { margin-top: 12px; }
.hr-auth-page .mb-0        { margin-bottom: 0; }
.hr-mt-sm                  { margin-top: 14px; }
.hr-tab-panel-hidden       { display: none !important; }

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

/* ══════════════════════════════════════════════════════════════
   LANDING.CSS ISOLATION
   Prevents landing.css global rules bleeding into auth cards
══════════════════════════════════════════════════════════════ */
.hr-auth-page .hr-form-card p  { color: inherit; font-size: inherit; line-height: inherit; }
.hr-auth-page .hr-form-card h1,
.hr-auth-page .hr-form-card h2,
.hr-auth-page .hr-form-card h3,
.hr-auth-page .hr-form-card h4 { color: inherit; line-height: inherit; }
.hr-auth-page .hr-form-card a  { color: var(--auth-primary); text-decoration: none; }

/* ══════════════════════════════════════════════════════════════
   BODY + MAIN WRAPPER  (navbar offset, auth layout fix)
   These rules sit on body/main — outside .hr-auth-page scope —
   so they only apply on pages that set hr-auth-body class
══════════════════════════════════════════════════════════════ */
body.hr-auth-body {
    padding-top: 0 !important;
    background: #f0f2f8 !important;
}

body.hr-auth-body main.inner-page-main {
    padding-top: 0 !important;
    min-height: unset !important;
    display: block !important;
    overflow: visible !important;
    background: transparent !important;
}

body.hr-auth-body .hr-auth-page {
    display: flex !important;
    min-height: calc(100vh - 68px) !important;
    width: 100% !important;
    background: #f0f2f8 !important;
    margin-top: 68px !important;
}

body.hr-auth-body .hr-left,
body.hr-auth-body .hr-auth-left {
    display: flex !important;
    width: 420px !important;
    min-width: 380px !important;
}

body.hr-auth-body .hr-right,
body.hr-auth-body .hr-auth-right { display: flex !important; flex: 1 !important; }

body.hr-auth-body .hr-form-card,
body.hr-auth-body .hr-auth-card  { display: block !important; background: #ffffff !important; }

/* Main auth wrapper override */
main.inner-page-main.hr-main-auth {
    padding: 0 !important;
    min-height: 100vh;
    overflow: visible !important;
    background: transparent !important;
    display: flex;
    flex-direction: column;
}

main.inner-page-main.hr-main-auth .hr-auth-page { flex: 1; min-height: 100vh; }

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Tablet (≤ 900px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 900px) {
    .hr-auth-page .hr-left,
    .hr-auth-page .hr-auth-left { display: none !important; }

    .hr-auth-page .hr-right,
    .hr-auth-page .hr-auth-right {
        min-height: 100vh;
        padding: 20px 16px;
        align-items: flex-start;
    }

    .hr-form-card,
    .hr-auth-card {
        max-width: 480px;
        padding: 28px 24px 22px;
    }

    .hr-form-mobile-logo { display: block; }
    .hr-mobile-brand     { display: block; }

    /* Force left visible when body class present */
    body.hr-auth-body .hr-left,
    body.hr-auth-body .hr-auth-left {
        display: none !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   RESPONSIVE — Mobile (≤ 480px)
══════════════════════════════════════════════════════════════ */
@media (max-width: 480px) {
    .hr-auth-page {
        position: static;
        min-height: 100dvh;
    }

    .hr-auth-page .hr-right,
    .hr-auth-page .hr-auth-right {
        padding: 16px 12px;
        background: var(--auth-white);
    }

    .hr-form-card,
    .hr-auth-card {
        padding: 24px 18px 20px;
        border-radius: var(--auth-radius);
        box-shadow: none;
        border: none;
        background: transparent;
    }

    .hr-form-title { font-size: 19px; }

    .hr-otp-box { width: 44px; height: 48px; font-size: 18px; }

    .hr-popup { padding: 24px 18px 20px; }

    .hr-new-user-cta { flex-wrap: wrap; }

    .hr-role-group { flex-wrap: wrap; }
    .hr-role-chip  { font-size: 12px; padding: 0 10px; }

    .hr-form-row { flex-direction: column; gap: 0; }
}
/* ══════════════════════════════════════════════════════════════
   ENHANCED FORM STYLING v2.0
══════════════════════════════════════════════════════════════ */
.hr-auth-page .hr-form-title {
    font-size: 24px;
    font-weight: 700;
    color: #1a1e3a;
    margin-bottom: 4px;
    letter-spacing: -0.3px;
}
.hr-auth-page .hr-form-sub {
    font-size: 14px;
    color: #6b7280;
    margin-bottom: 20px;
}
.hr-auth-page .hr-google-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    padding: 11px 20px;
    border: 1.5px solid #e5e7eb;
    border-radius: 10px;
    background: #fff;
    font-size: 14px;
    font-weight: 500;
    color: #374151;
    cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s;
    text-decoration: none;
}
.hr-auth-page .hr-google-btn:hover {
    border-color: #202870;
    box-shadow: 0 2px 8px rgba(32,40,112,0.10);
}
.hr-auth-page .hr-input {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    font-size: 14px;
    color: #1a1e3a;
    background: #fff;
    transition: border-color 0.15s, box-shadow 0.15s;
    outline: none;
}
.hr-auth-page .hr-input:focus {
    border-color: #202870;
    box-shadow: 0 0 0 3px rgba(32,40,112,0.08);
}
.hr-auth-page .hr-submit-btn {
    height: 48px !important;
    font-size: 15px !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
.hr-auth-page .hr-role-chip {
    border-radius: 8px;
    font-size: 13px;
    font-weight: 500;
    padding: 8px 14px;
}
.hr-auth-page .hr-ws-opt {
    border-radius: 10px;
    border: 1.5px solid #e5e7eb;
    padding: 12px 14px;
    transition: border-color 0.15s, background 0.15s;
}
.hr-auth-page .hr-ws-opt:hover {
    border-color: #202870;
    background: #f8f9ff;
}
.hr-auth-page .hr-ws-opt.selected {
    border-color: #202870;
    background: #eef0fb;
}
.hr-auth-page .hr-section-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: #9ca3af;
    margin: 16px 0 10px;
}

/* ══════════════════════════════════════════════════════════════
   REGISTER PAGE — COMPLETE FIX v3.0
   Matches login page design language exactly
══════════════════════════════════════════════════════════════ */

/* Form card — match login card exactly */
.hr-auth-page .hr-form-card {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 4px 24px rgba(32,40,112,0.10);
    padding: 36px 32px 28px;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

/* Title + subtitle */
.hr-auth-page .hr-form-title {
    font-size: 22px;
    font-weight: 700;
    color: #1a1e3a;
    margin: 0 0 4px;
    letter-spacing: -0.3px;
    line-height: 1.3;
}
.hr-auth-page .hr-form-sub {
    font-size: 13.5px;
    color: #6b7280;
    margin: 0 0 20px;
    line-height: 1.5;
}

/* Google button — clean white pill */
.hr-auth-page .hr-google-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 10px !important;
    width: 100% !important;
    padding: 11px 20px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    cursor: pointer !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    text-decoration: none !important;
    margin-bottom: 18px !important;
}
.hr-auth-page .hr-google-btn:hover {
    border-color: #202870 !important;
    box-shadow: 0 2px 8px rgba(32,40,112,0.10) !important;
}

/* OR divider */
.hr-auth-page .hr-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0 0 16px;
    color: #9ca3af;
    font-size: 12px;
    font-weight: 500;
}
.hr-auth-page .hr-divider::before,
.hr-auth-page .hr-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Section labels */
.hr-auth-page .hr-section-label {
    font-size: 10.5px !important;
    font-weight: 700 !important;
    letter-spacing: 0.7px !important;
    text-transform: uppercase !important;
    color: #9ca3af !important;
    margin: 18px 0 10px !important;
    display: block !important;
}
.hr-auth-page .hr-section-label:first-child,
.hr-auth-page .hr-section-label-top {
    margin-top: 4px !important;
}

/* Role chips — match login role selector */
.hr-auth-page .hr-role-group {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
}
.hr-auth-page .hr-role-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 9px 16px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #374151 !important;
    background: #fff !important;
    cursor: pointer !important;
    transition: all 0.15s !important;
    user-select: none !important;
    flex: 1 !important;
    justify-content: center !important;
    min-width: 90px !important;
}
.hr-auth-page .hr-role-chip:hover {
    border-color: #202870 !important;
    background: #f8f9ff !important;
}
.hr-auth-page input[type="radio"]:checked + .hr-role-chip {
    border-color: #202870 !important;
    background: #202870 !important;
    color: #fff !important;
}
.hr-auth-page .chip-check {
    display: none !important;
}
.hr-auth-page input[type="radio"]:checked + .hr-role-chip .chip-check {
    display: inline-flex !important;
}

/* Hide radio inputs */
.hr-auth-page input[type="radio"][name="role"],
.hr-auth-page input[type="radio"][name="work_status"] {
    position: absolute !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
}

/* Input fields */
.hr-auth-page .hr-field {
    margin-bottom: 14px !important;
}
.hr-auth-page .hr-field label {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    margin-bottom: 5px !important;
}
.hr-auth-page .hr-field .req {
    color: #ef4444 !important;
}
.hr-auth-page .hr-input {
    width: 100% !important;
    padding: 10px 14px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 8px !important;
    font-size: 14px !important;
    color: #1a1e3a !important;
    background: #fff !important;
    transition: border-color 0.15s, box-shadow 0.15s !important;
    outline: none !important;
    box-sizing: border-box !important;
    font-family: inherit !important;
}
.hr-auth-page .hr-input:focus {
    border-color: #202870 !important;
    box-shadow: 0 0 0 3px rgba(32,40,112,0.08) !important;
}
.hr-auth-page .hr-input::placeholder {
    color: #c4c9d4 !important;
    font-weight: 400 !important;
}
.hr-auth-page .hr-field-hint {
    font-size: 11.5px !important;
    color: #9ca3af !important;
    margin-top: 4px !important;
    display: block !important;
    line-height: 1.4 !important;
}

/* Phone prefix */
.hr-auth-page .hr-phone-wrap {
    display: flex !important;
    align-items: stretch !important;
    gap: 0 !important;
}
.hr-auth-page .hr-phone-prefix {
    display: flex !important;
    align-items: center !important;
    padding: 0 12px !important;
    background: #f3f4f6 !important;
    border: 1.5px solid #e5e7eb !important;
    border-right: none !important;
    border-radius: 8px 0 0 8px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #374151 !important;
    white-space: nowrap !important;
}
.hr-auth-page .hr-phone-wrap .hr-input {
    border-radius: 0 8px 8px 0 !important;
}

/* Password wrap */
.hr-auth-page .hr-pw-wrap {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}
.hr-auth-page .hr-pw-wrap .hr-input {
    padding-right: 44px !important;
}
.hr-auth-page .hr-pw-toggle {
    position: absolute !important;
    right: 12px !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    color: #9ca3af !important;
    padding: 4px !important;
    display: flex !important;
    align-items: center !important;
    transition: color 0.15s !important;
}
.hr-auth-page .hr-pw-toggle:hover { color: #202870 !important; }
.hr-auth-page .hr-pw-toggle svg { width: 18px; height: 18px; }

/* Work status options */
.hr-auth-page .hr-ws-group {
    display: flex !important;
    gap: 10px !important;
}
.hr-auth-page .hr-ws-opt {
    flex: 1 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    padding: 12px 14px !important;
    border: 1.5px solid #e5e7eb !important;
    border-radius: 10px !important;
    cursor: pointer !important;
    transition: border-color 0.15s, background 0.15s !important;
    background: #fff !important;
}
.hr-auth-page .hr-ws-opt:hover {
    border-color: #202870 !important;
    background: #f8f9ff !important;
}
.hr-auth-page .hr-ws-opt.selected,
.hr-auth-page .hr-ws-opt:has(input:checked) {
    border-color: #202870 !important;
    background: #eef0fb !important;
}
.hr-auth-page .hr-ws-icon { font-size: 20px; line-height: 1; }
.hr-auth-page .hr-ws-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1e3a !important;
}
.hr-auth-page .hr-ws-desc {
    font-size: 11.5px !important;
    color: #6b7280 !important;
    margin-top: 1px !important;
}

/* Checkboxes */
.hr-auth-page .hr-checkbox-row {
    display: flex !important;
    align-items: flex-start !important;
    gap: 8px !important;
    margin-bottom: 10px !important;
    font-size: 13px !important;
    color: #374151 !important;
    line-height: 1.4 !important;
}
.hr-auth-page .hr-checkbox-row input[type="checkbox"] {
    width: 15px !important;
    height: 15px !important;
    margin-top: 2px !important;
    accent-color: #202870 !important;
    flex-shrink: 0 !important;
}
.hr-auth-page .hr-checkbox-row a {
    color: #202870 !important;
    text-decoration: underline !important;
}
.hr-auth-page .hr-checkbox-row-mb {
    margin-bottom: 20px !important;
}

/* Submit button — match login button exactly */
.hr-auth-page .hr-submit-btn {
    width: 100% !important;
    height: 48px !important;
    background: #202870 !important;
    color: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s !important;
    letter-spacing: 0.1px !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    padding: 0 20px !important;
    box-sizing: border-box !important;
}
.hr-auth-page .hr-submit-btn:hover {
    background: #171e5a !important;
    box-shadow: 0 4px 16px rgba(32,40,112,0.25) !important;
    transform: translateY(-1px) !important;
}
.hr-auth-page .hr-submit-btn:active {
    transform: translateY(0) !important;
}
.hr-auth-page .hr-submit-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    transform: none !important;
}
.hr-auth-page .hr-submit-btn svg {
    width: 17px !important;
    height: 17px !important;
    flex-shrink: 0 !important;
}

/* Form footer */
.hr-auth-page .hr-form-footer {
    margin-top: 14px !important;
    text-align: center !important;
}
.hr-auth-page .hr-form-footer a {
    font-size: 13px !important;
    color: #202870 !important;
    font-weight: 500 !important;
    text-decoration: none !important;
}
.hr-auth-page .hr-form-footer a:hover { text-decoration: underline !important; }

/* Already a member CTA — match login signup CTA */
.hr-auth-page .hr-new-user-cta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    background: #f8f9ff !important;
    border: 1.5px solid #e8eaf6 !important;
    border-radius: 10px !important;
    padding: 12px 16px !important;
    margin-top: 14px !important;
}
.hr-auth-page .hr-new-user-icon {
    width: 34px !important;
    height: 34px !important;
    background: #eef0fb !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}
.hr-auth-page .hr-new-user-text {
    flex: 1 !important;
    min-width: 0 !important;
}
.hr-auth-page .hr-new-user-text strong {
    display: block !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #1a1e3a !important;
}
.hr-auth-page .hr-new-user-text span {
    font-size: 12px !important;
    color: #6b7280 !important;
}
.hr-auth-page .hr-new-user-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 4px !important;
    padding: 8px 16px !important;
    background: #202870 !important;
    color: #fff !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    white-space: nowrap !important;
    transition: background 0.15s !important;
    flex-shrink: 0 !important;
}
.hr-auth-page .hr-new-user-btn:hover { background: #171e5a !important; }
.hr-auth-page .hr-new-user-btn svg {
    width: 14px !important;
    height: 14px !important;
}

/* Right panel centering fix */
.hr-auth-page .hr-right,
.hr-auth-page .hr-auth-right {
    display: flex !important;
    flex: 1 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 32px 24px !important;
    background: #f0f2f8 !important;
    min-height: 100% !important;
    overflow-y: auto !important;
}


/* ══ REGISTER FIX v4.0 ══ */
.hr-auth-page .hr-form-card{background:#fff;border-radius:16px;box-shadow:0 4px 24px rgba(32,40,112,.10);padding:36px 32px 28px;width:100%;max-width:460px;margin:0 auto}
.hr-auth-page .hr-form-title{font-size:22px;font-weight:700;color:#1a1e3a;margin:0 0 4px;letter-spacing:-.3px;line-height:1.3}
.hr-auth-page .hr-form-sub{font-size:13.5px;color:#6b7280;margin:0 0 20px;line-height:1.5}
.hr-auth-page .hr-google-btn{display:flex!important;align-items:center!important;justify-content:center!important;gap:10px!important;width:100%!important;padding:11px 20px!important;border:1.5px solid #e5e7eb!important;border-radius:10px!important;background:#fff!important;font-size:14px!important;font-weight:500!important;color:#374151!important;cursor:pointer!important;text-decoration:none!important;margin-bottom:18px!important;transition:border-color .15s,box-shadow .15s!important}
.hr-auth-page .hr-google-btn:hover{border-color:#202870!important;box-shadow:0 2px 8px rgba(32,40,112,.10)!important}
.hr-auth-page .hr-section-label{font-size:10.5px!important;font-weight:700!important;letter-spacing:.7px!important;text-transform:uppercase!important;color:#9ca3af!important;margin:18px 0 10px!important;display:block!important}
.hr-auth-page .hr-role-group{display:flex!important;gap:8px!important;flex-wrap:wrap!important}
.hr-auth-page .hr-role-chip{display:inline-flex!important;align-items:center!important;gap:6px!important;padding:9px 16px!important;border:1.5px solid #e5e7eb!important;border-radius:8px!important;font-size:13px!important;font-weight:500!important;color:#374151!important;background:#fff!important;cursor:pointer!important;transition:all .15s!important;flex:1!important;justify-content:center!important;min-width:90px!important}
.hr-auth-page .hr-role-chip:hover{border-color:#202870!important;background:#f8f9ff!important}
.hr-auth-page input[type="radio"]:checked+.hr-role-chip{border-color:#202870!important;background:#202870!important;color:#fff!important}
.hr-auth-page input[type="radio"][name="role"],.hr-auth-page input[type="radio"][name="work_status"]{position:absolute!important;opacity:0!important;width:0!important;height:0!important}
.hr-auth-page .hr-field{margin-bottom:14px!important}
.hr-auth-page .hr-field label{display:block!important;font-size:13px!important;font-weight:600!important;color:#374151!important;margin-bottom:5px!important}
.hr-auth-page .hr-field .req{color:#ef4444!important}
.hr-auth-page .hr-input{width:100%!important;padding:10px 14px!important;border:1.5px solid #e5e7eb!important;border-radius:8px!important;font-size:14px!important;color:#1a1e3a!important;background:#fff!important;transition:border-color .15s,box-shadow .15s!important;outline:none!important;box-sizing:border-box!important;font-family:inherit!important}
.hr-auth-page .hr-input:focus{border-color:#202870!important;box-shadow:0 0 0 3px rgba(32,40,112,.08)!important}
.hr-auth-page .hr-input::placeholder{color:#c4c9d4!important;font-weight:400!important}
.hr-auth-page .hr-field-hint{font-size:11.5px!important;color:#9ca3af!important;margin-top:4px!important;display:block!important;line-height:1.4!important}
.hr-auth-page .hr-phone-wrap{display:flex!important;align-items:stretch!important}
.hr-auth-page .hr-phone-prefix{display:flex!important;align-items:center!important;padding:0 12px!important;background:#f3f4f6!important;border:1.5px solid #e5e7eb!important;border-right:none!important;border-radius:8px 0 0 8px!important;font-size:13.5px!important;font-weight:600!important;color:#374151!important;white-space:nowrap!important}
.hr-auth-page .hr-phone-wrap .hr-input{border-radius:0 8px 8px 0!important}
.hr-auth-page .hr-pw-wrap{position:relative!important;display:flex!important;align-items:center!important}
.hr-auth-page .hr-pw-wrap .hr-input{padding-right:44px!important}
.hr-auth-page .hr-pw-toggle{position:absolute!important;right:12px!important;background:none!important;border:none!important;cursor:pointer!important;color:#9ca3af!important;padding:4px!important;display:flex!important;align-items:center!important;transition:color .15s!important}
.hr-auth-page .hr-pw-toggle:hover{color:#202870!important}
.hr-auth-page .hr-pw-toggle svg{width:18px;height:18px}
.hr-auth-page .hr-ws-group{display:flex!important;gap:10px!important}
.hr-auth-page .hr-ws-opt{flex:1!important;display:flex!important;align-items:center!important;gap:10px!important;padding:12px 14px!important;border:1.5px solid #e5e7eb!important;border-radius:10px!important;cursor:pointer!important;transition:border-color .15s,background .15s!important;background:#fff!important}
.hr-auth-page .hr-ws-opt:hover{border-color:#202870!important;background:#f8f9ff!important}
.hr-auth-page .hr-ws-opt.selected,.hr-auth-page .hr-ws-opt:has(input:checked){border-color:#202870!important;background:#eef0fb!important}
.hr-auth-page .hr-ws-icon{font-size:20px;line-height:1}
.hr-auth-page .hr-ws-label{font-size:13px!important;font-weight:600!important;color:#1a1e3a!important}
.hr-auth-page .hr-ws-desc{font-size:11.5px!important;color:#6b7280!important;margin-top:1px!important}
.hr-auth-page .hr-checkbox-row{display:flex!important;align-items:flex-start!important;gap:8px!important;margin-bottom:10px!important;font-size:13px!important;color:#374151!important;line-height:1.4!important}
.hr-auth-page .hr-checkbox-row input[type="checkbox"]{width:15px!important;height:15px!important;margin-top:2px!important;accent-color:#202870!important;flex-shrink:0!important}
.hr-auth-page .hr-checkbox-row a{color:#202870!important;text-decoration:underline!important}
.hr-auth-page .hr-checkbox-row-mb{margin-bottom:20px!important}
.hr-auth-page .hr-submit-btn{width:100%!important;height:48px!important;background:#202870!important;color:#fff!important;border:none!important;border-radius:10px!important;font-size:14.5px!important;font-weight:600!important;cursor:pointer!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;transition:background .15s,transform .1s,box-shadow .15s!important;white-space:nowrap!important;overflow:hidden!important;padding:0 20px!important;box-sizing:border-box!important}
.hr-auth-page .hr-submit-btn:hover{background:#171e5a!important;box-shadow:0 4px 16px rgba(32,40,112,.25)!important;transform:translateY(-1px)!important}
.hr-auth-page .hr-submit-btn:disabled{opacity:.65!important;cursor:not-allowed!important;transform:none!important}
.hr-auth-page .hr-submit-btn svg{width:17px!important;height:17px!important;flex-shrink:0!important}
.hr-auth-page .hr-form-footer{margin-top:14px!important;text-align:center!important}
.hr-auth-page .hr-form-footer a{font-size:13px!important;color:#202870!important;font-weight:500!important;text-decoration:none!important}
.hr-auth-page .hr-new-user-cta{display:flex!important;align-items:center!important;gap:12px!important;background:#f8f9ff!important;border:1.5px solid #e8eaf6!important;border-radius:10px!important;padding:12px 16px!important;margin-top:14px!important}
.hr-auth-page .hr-new-user-icon{width:34px!important;height:34px!important;background:#eef0fb!important;border-radius:8px!important;display:flex!important;align-items:center!important;justify-content:center!important;flex-shrink:0!important}
.hr-auth-page .hr-new-user-text{flex:1!important;min-width:0!important}
.hr-auth-page .hr-new-user-text strong{display:block!important;font-size:13px!important;font-weight:600!important;color:#1a1e3a!important}
.hr-auth-page .hr-new-user-text span{font-size:12px!important;color:#6b7280!important}
.hr-auth-page .hr-new-user-btn{display:inline-flex!important;align-items:center!important;gap:4px!important;padding:8px 16px!important;background:#202870!important;color:#fff!important;border-radius:8px!important;font-size:13px!important;font-weight:600!important;text-decoration:none!important;white-space:nowrap!important;transition:background .15s!important;flex-shrink:0!important}
.hr-auth-page .hr-new-user-btn:hover{background:#171e5a!important}
.hr-auth-page .hr-new-user-btn svg{width:14px!important;height:14px!important}
.hr-auth-page .hr-right,.hr-auth-page .hr-auth-right{display:flex!important;flex:1!important;align-items:center!important;justify-content:center!important;padding:32px 24px!important;background:#f0f2f8!important;min-height:100%!important;overflow-y:auto!important}

/* ══ SAAS POLISH v5.0 ══ */

/* Left panel headline fix */
.hr-auth-page .hr-left-headline {
    font-size:28px!important;
    line-height:1.25!important;
    font-weight:800!important;
    letter-spacing:-0.5px!important;
    margin-bottom:10px!important;
}
.hr-auth-page .hr-left-headline span{
    color:#f59e0b!important;
}
.hr-auth-page .hr-left-sub{
    font-size:13px!important;
    opacity:0.85!important;
    line-height:1.5!important;
    margin-bottom:24px!important;
}

/* Live feed fix — no overflow */
.hr-feed-item{
    display:flex!important;
    align-items:center!important;
    gap:8px!important;
    padding:7px 10px!important;
    border-radius:8px!important;
    background:rgba(255,255,255,0.06)!important;
    margin-bottom:5px!important;
    min-width:0!important;
}
.hr-feed-text{
    flex:1!important;
    min-width:0!important;
    overflow:hidden!important;
}
.hr-feed-text strong{
    display:block!important;
    font-size:12px!important;
    font-weight:600!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
    color:#fff!important;
}
.hr-feed-text span{
    display:block!important;
    font-size:11px!important;
    opacity:0.7!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
}
.hr-feed-time{
    font-size:10.5px!important;
    opacity:0.6!important;
    white-space:nowrap!important;
    flex-shrink:0!important;
}
.hr-feed-icon{
    width:28px!important;
    height:28px!important;
    border-radius:50%!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    font-size:12px!important;
    flex-shrink:0!important;
}

/* Work status side by side */
.hr-auth-page .hr-ws-group{
    display:flex!important;
    flex-direction:row!important;
    gap:10px!important;
}
.hr-auth-page .hr-ws-opt{
    flex:1!important;
    flex-direction:column!important;
    align-items:flex-start!important;
    gap:6px!important;
    padding:14px!important;
}
.hr-auth-page .hr-ws-icon{
    font-size:22px!important;
}
.hr-auth-page .hr-ws-label{
    font-size:13px!important;
    font-weight:700!important;
    color:#1a1e3a!important;
    margin-top:2px!important;
}
.hr-auth-page .hr-ws-desc{
    font-size:11px!important;
    color:#6b7280!important;
    line-height:1.3!important;
}

/* Form card — more spacious */
.hr-auth-page .hr-form-card{
    padding:40px 36px 32px!important;
    max-width:480px!important;
    border-radius:18px!important;
    box-shadow:0 8px 40px rgba(32,40,112,0.13)!important;
}

/* Google btn — more prominent */
.hr-auth-page .hr-google-btn{
    padding:13px 20px!important;
    border-radius:10px!important;
    font-size:14.5px!important;
    font-weight:600!important;
    box-shadow:0 1px 4px rgba(0,0,0,0.08)!important;
}

/* OR divider cleaner */
.hr-auth-page .hr-divider{
    margin:16px 0!important;
    font-size:12px!important;
    color:#9ca3af!important;
    letter-spacing:0.3px!important;
}

/* Role chips — equal width, more padding */
.hr-auth-page .hr-role-chip{
    padding:10px 12px!important;
    font-size:13px!important;
    font-weight:600!important;
    border-radius:9px!important;
}

/* Submit btn — bigger, more confident */
.hr-auth-page .hr-submit-btn{
    height:52px!important;
    font-size:15px!important;
    font-weight:700!important;
    border-radius:11px!important;
    letter-spacing:0.2px!important;
    box-shadow:0 4px 14px rgba(32,40,112,0.25)!important;
}
.hr-auth-page .hr-submit-btn:hover{
    box-shadow:0 6px 20px rgba(32,40,112,0.35)!important;
    transform:translateY(-2px)!important;
}

/* Section labels */
.hr-auth-page .hr-section-label{
    font-size:10px!important;
    letter-spacing:1px!important;
    margin:20px 0 8px!important;
    color:#b0b7c3!important;
}

/* Input cleaner */
.hr-auth-page .hr-input{
    padding:11px 14px!important;
    border-radius:9px!important;
    font-size:14px!important;
}

/* Already member CTA */
.hr-auth-page .hr-new-user-cta{
    background:linear-gradient(135deg,#f8f9ff 0%,#eef0fb 100%)!important;
    border:1.5px solid #dde1f5!important;
    border-radius:12px!important;
    padding:14px 18px!important;
}

/* Stats bar */
.hr-left-stats{
    display:flex!important;
    gap:0!important;
    margin-top:auto!important;
    padding-top:20px!important;
    border-top:1px solid rgba(255,255,255,0.12)!important;
}
.hr-stat-item{
    flex:1!important;
    text-align:center!important;
}
.hr-stat-val{
    font-size:18px!important;
    font-weight:800!important;
    color:#fff!important;
    letter-spacing:-0.3px!important;
}
.hr-stat-lbl{
    font-size:10px!important;
    opacity:0.6!important;
    text-transform:uppercase!important;
    letter-spacing:0.5px!important;
    margin-top:2px!important;
}

/* Preferences section */
.hr-auth-page .hr-checkbox-row label{
    font-size:13px!important;
    color:#4b5563!important;
    line-height:1.45!important;
}

/* Form footer link */
.hr-auth-page .hr-form-footer{
    padding-top:6px!important;
}
.hr-auth-page .hr-form-footer a{
    font-size:13px!important;
    color:#6366f1!important;
    font-weight:500!important;
}
.hr-auth-page .hr-form-footer a:hover{
    color:#202870!important;
}

/* Google btn — temporarily hidden */
.hr-auth-page .hr-google-btn { display:none!important; }
.hr-auth-page .hr-divider { display:none!important; }

/* ══ Salary Transparency Badge ══ */
.hr-salary-badge { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:700;padding:3px 10px;border-radius:99px; }
.hr-salary-badge.transparent { background:#f0fdf4;color:#166534;border:1px solid #bbf7d0; }
.hr-salary-badge.hidden { background:#f9fafb;color:#9ca3af;border:1px solid #e5e7eb; }

/* ══ Job Freshness Indicator ══ */
.hr-freshness { display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;padding:3px 9px;border-radius:99px; }
.hr-freshness.fresh  { background:#f0fdf4;color:#166534; }
.hr-freshness.recent { background:#fffbeb;color:#92400e; }
.hr-freshness.stale  { background:#fef2f2;color:#991b1b; }

/* ══ Application Timeline ══ */
.hr-timeline { list-style:none;padding:0;margin:0;position:relative; }
.hr-timeline::before { content:'';position:absolute;left:13px;top:6px;bottom:6px;width:2px;background:#e5e7eb; }
.hr-timeline-item { display:flex;gap:14px;padding:0 0 16px;position:relative; }
.hr-timeline-dot { width:28px;height:28px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;font-size:12px;z-index:1; }
.hr-timeline-dot.applied    { background:#dbeafe;color:#1d4ed8; }
.hr-timeline-dot.shortlisted{ background:#d1fae5;color:#065f46; }
.hr-timeline-dot.interview  { background:#ede9fe;color:#5b21b6; }
.hr-timeline-dot.rejected   { background:#fee2e2;color:#991b1b; }
.hr-timeline-dot.offered    { background:#d1fae5;color:#065f46; }
.hr-timeline-dot.hired      { background:#fef3c7;color:#92400e; }
.hr-timeline-dot.nudge      { background:#f3f4f6;color:#374151; }
.hr-timeline-content { flex:1;padding-top:4px; }
.hr-timeline-title { font-size:13px;font-weight:700;color:#1a1e3a; }
.hr-timeline-desc  { font-size:12px;color:#6b7280;margin-top:2px;line-height:1.4; }
.hr-timeline-time  { font-size:10px;color:#9ca3af;margin-top:3px; }