/* =========================================================================
   BREEDER PARTNER REGISTRATION — v1.2.0
   
   VISIBILITY SYSTEM:
   Elements that toggle use: display:none !important (default)
   + .vpr-visible { display:xxx !important } (when active)
   JS uses: addClass('vpr-visible') / removeClass('vpr-visible')
   
   All rules scoped under .vpr-form-wrapper to prevent theme conflicts.
   ========================================================================= */

/* ---------- HARD RESET ---------- */
.vpr-form-wrapper,
.vpr-form-wrapper *,
.vpr-form-wrapper *::before,
.vpr-form-wrapper *::after {
    box-sizing: border-box !important;
    margin: 0;
    padding: 0;
}

.vpr-form-wrapper {
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Helvetica Neue', Arial, sans-serif !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    color: #1e293b !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    width: 100% !important;
}

.vpr-form-wrapper ul,
.vpr-form-wrapper ol,
.vpr-form-wrapper li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ---------- CONTAINER ---------- */
.vpr-form-wrapper .vpr-form-container {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    padding: 56px 100px 80px 100px !important;
    background-color: #e8edf3 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

/* ---------- TITLE ---------- */
.vpr-form-wrapper .vpr-title {
    font-size: 40px !important;
    font-weight: 700 !important;
    color: #1a2340 !important;
    margin: 0 0 16px 0 !important;
    padding: 0 !important;
    letter-spacing: -0.03em !important;
    line-height: 1.15 !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
}

/* ---------- DESCRIPTION ---------- */
.vpr-form-wrapper .vpr-description {
    font-size: 13.5px !important;
    color: #6b7a8d !important;
    margin: 0 0 44px 0 !important;
    padding: 0 !important;
    max-width: 520px !important;
    line-height: 1.65 !important;
}

/* ---------- SECTION TITLES ---------- */
.vpr-form-wrapper .vpr-section-title {
    font-size: 15.5px !important;
    font-weight: 700 !important;
    color: #1a2340 !important;
    margin: 0 0 24px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
    line-height: 1.3 !important;
}

.vpr-form-wrapper .vpr-section-title--business {
    margin-top: 12px !important;
}

/* ---------- SECTION SUBTITLES (v1.3.5) ----------
   Optional dark-gray helper text shown below a section title.
   Negative top margin pulls it tight under the title; bottom margin
   restores the spacing originally on the title alone. */
.vpr-form-wrapper .vpr-section-subtitle {
    font-size: 13px !important;
    font-weight: 400 !important;
    color: #6b7a8d !important;
    margin: -16px 0 24px 0 !important;
    padding: 0 !important;
    line-height: 1.55 !important;
    max-width: 640px !important;
    border: none !important;
    background: none !important;
    text-transform: none !important;
}

/* ---------- SUBTITLE WITH NO HEADING ABOVE IT (v1.17.3) ----------
   .vpr-section-subtitle uses margin-top:-16px to tuck itself under a section
   title. When an admin hides the Business-section heading the subtitle becomes
   the first element inside the form, and that negative pull would eat 16px out
   of the gap below the form description. This modifier restores normal spacing.
   Purely additive — the class is only emitted when the heading is hidden, so
   nothing changes for installs that leave the heading switched on. */
.vpr-form-wrapper .vpr-section-subtitle--no-title {
    margin-top: 0 !important;
}

/* ---------- TWO-COLUMN ROWS ---------- */
.vpr-form-wrapper .vpr-row {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    gap: 40px !important;
    margin-bottom: 22px !important;
    width: 100% !important;
}

.vpr-form-wrapper .vpr-col {
    flex: 1 1 0% !important;
    min-width: 0 !important;
}

.vpr-form-wrapper .vpr-row-half .vpr-col {
    flex: 0 0 calc(50% - 20px) !important;
    max-width: calc(50% - 20px) !important;
}

/* ---------- LABELS ---------- */
.vpr-form-wrapper .vpr-label {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: #1a2340 !important;
    margin: 0 0 8px 0 !important;
    padding: 0 !important;
    line-height: 1.3 !important;
}

.vpr-form-wrapper .vpr-req {
    color: #ef4444 !important;
    margin-left: 1px !important;
    font-weight: 700 !important;
}

/* ---------- INPUTS ---------- */
.vpr-form-wrapper .vpr-input {
    display: block !important;
    width: 100% !important;
    height: 46px !important;
    padding: 0 16px !important;
    font-size: 14px !important;
    font-family: inherit !important;
    color: #334155 !important;
    background-color: #ffffff !important;
    border: 1px solid #dce1e8 !important;
    border-radius: 5px !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    line-height: 46px !important;
}

.vpr-form-wrapper .vpr-input::placeholder {
    color: #9ba8b7 !important;
    font-weight: 400 !important;
    opacity: 1 !important;
}

.vpr-form-wrapper .vpr-input:hover {
    border-color: #c5cdd6 !important;
}

.vpr-form-wrapper .vpr-input:focus {
    border-color: #1a2340 !important;
    box-shadow: 0 0 0 3px rgba(26, 35, 64, 0.08) !important;
    outline: none !important;
}

.vpr-form-wrapper .vpr-input.vpr-error {
    border-color: #ef4444 !important;
    background-color: #fef2f2 !important;
}

.vpr-form-wrapper .vpr-input.vpr-error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

.vpr-form-wrapper .vpr-input.vpr-success {
    border-color: #22c55e !important;
}

/* ---------- SELECT ---------- */
.vpr-form-wrapper .vpr-select-wrap {
    position: relative !important;
    display: block !important;
}

.vpr-form-wrapper .vpr-select {
    cursor: pointer !important;
    padding-right: 44px !important;
    color: #9ba8b7 !important;
}

.vpr-form-wrapper .vpr-select option {
    color: #334155 !important;
}

.vpr-form-wrapper .vpr-select-arrow {
    position: absolute !important;
    right: 14px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    color: #6b7a8d !important;
    pointer-events: none !important;
}

/* ---------- ERROR MESSAGES ---------- */
.vpr-form-wrapper .vpr-error-msg {
    font-size: 12px !important;
    color: #ef4444 !important;
    margin-top: 5px !important;
    line-height: 1.4 !important;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(-4px);
    transition: opacity 0.25s ease, transform 0.25s ease, max-height 0.25s ease;
}

.vpr-form-wrapper .vpr-error-msg.visible {
    opacity: 1;
    max-height: 40px;
    transform: translateY(0);
}

/* ---------- INTL-TEL-INPUT (wrapper-level only) ---------- */
.vpr-form-wrapper .iti {
    width: 100% !important;
    display: block !important;
    position: relative !important;
}

.vpr-form-wrapper .iti .vpr-phone-input,
.vpr-form-wrapper .iti input[type="tel"] {
    padding-left: 96px !important;
    width: 100% !important;
}

.vpr-form-wrapper .iti__flag-container {
    position: absolute !important;
    top: 0 !important;
    bottom: 0 !important;
    left: 0 !important;
    padding: 0 !important;
    z-index: 2 !important;
}

/* ---------- FILE UPLOAD ---------- */
.vpr-form-wrapper .vpr-file-upload {
    position: relative !important;
    height: 46px !important;
    background-color: #ffffff !important;
    border: 1px solid #dce1e8 !important;
    border-radius: 5px !important;
    overflow: hidden !important;
    transition: border-color 0.2s ease !important;
}

.vpr-form-wrapper .vpr-file-upload:hover {
    border-color: #c5cdd6 !important;
}

.vpr-form-wrapper .vpr-file-upload.vpr-error {
    border-color: #ef4444 !important;
}

/* File input — always present but invisible */
.vpr-form-wrapper .vpr-file-hidden {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    z-index: 2 !important;
}

/* TOGGLE: file input hides when preview shown */
.vpr-form-wrapper .vpr-file-hidden.vpr-hidden {
    display: none !important;
}

/* File label (Choose file / No file chosen) */
.vpr-form-wrapper .vpr-file-label {
    display: flex !important;
    align-items: center !important;
    height: 46px !important;
    cursor: pointer !important;
    gap: 0 !important;
}

/* TOGGLE: label hides when preview shown */
.vpr-form-wrapper .vpr-file-label.vpr-hidden {
    display: none !important;
}

.vpr-form-wrapper .vpr-file-btn {
    display: inline-flex !important;
    align-items: center !important;
    height: 100% !important;
    padding: 0 14px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #475569 !important;
    background-color: #f1f5f9 !important;
    border-right: 1px solid #dce1e8 !important;
    white-space: nowrap !important;
}

.vpr-form-wrapper .vpr-file-text {
    padding-left: 14px !important;
    font-size: 13.5px !important;
    color: #9ba8b7 !important;
}

/* TOGGLE: file preview — hidden by default, shown with .vpr-visible */
.vpr-form-wrapper .vpr-file-preview {
    display: none !important;
}

.vpr-form-wrapper .vpr-file-preview.vpr-visible {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 6px 12px !important;
    position: relative !important;
    z-index: 3 !important;
    background-color: #f8fafc !important;
    height: 100% !important;
}

.vpr-form-wrapper .vpr-file-preview img {
    width: 34px !important;
    height: 34px !important;
    object-fit: cover !important;
    border-radius: 4px !important;
    border: 1px solid #e2e8f0 !important;
}

/* TOGGLE: preview-img hidden by default */
.vpr-form-wrapper .vpr-file-preview img.vpr-hidden {
    display: none !important;
}

.vpr-form-wrapper #vpr-preview-doc {
    display: none !important;
}

.vpr-form-wrapper #vpr-preview-doc.vpr-visible {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    font-size: 13px !important;
    color: #475569 !important;
}

.vpr-form-wrapper #vpr-preview-doc svg {
    color: #3b82f6 !important;
    flex-shrink: 0 !important;
}

.vpr-form-wrapper #vpr-doc-name {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
}

.vpr-form-wrapper .vpr-remove-file {
    position: absolute !important;
    top: 50% !important;
    right: 8px !important;
    transform: translateY(-50%) !important;
    width: 22px !important;
    height: 22px !important;
    border: none !important;
    background: #ef4444 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 14px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    z-index: 5 !important;
    padding: 0 !important;
}

.vpr-form-wrapper .vpr-remove-file:hover {
    background: #dc2626 !important;
}

/* ---------- CUSTOM CHECKBOXES ---------- */
.vpr-form-wrapper .vpr-checkboxes {
    margin: 36px 0 32px !important;
    padding: 0 !important;
}

.vpr-form-wrapper .vpr-cb-label {
    display: flex !important;
    align-items: flex-start !important;
    gap: 16px !important;
    cursor: pointer !important;
    margin-bottom: 18px !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

.vpr-form-wrapper .vpr-cb-label:last-of-type {
    margin-bottom: 0 !important;
}

.vpr-form-wrapper .vpr-cb-label input[type="checkbox"] {
    /* Visually hidden but stays in document flow so clicking the
       label doesn't trigger focus-scroll-to-top. Old approach used
       position:absolute which parked the input at (0,0). */
    position: static !important;
    width: 1px !important;
    height: 1px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    opacity: 0 !important;
    overflow: hidden !important;
    clip: rect(0 0 0 0) !important;
    clip-path: inset(50%) !important;
    pointer-events: none !important;
    flex-shrink: 0 !important;
}

.vpr-form-wrapper .vpr-cb-box {
    flex-shrink: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    border: 2px solid #c5cdd6 !important;
    border-radius: 4px !important;
    background-color: #ffffff !important;
    transition: all 0.15s ease !important;
    margin-top: 2px !important;
}

.vpr-form-wrapper .vpr-cb-box svg {
    width: 12px !important;
    height: 10px !important;
    color: transparent !important;
    transition: color 0.1s ease !important;
}

.vpr-form-wrapper .vpr-cb-label input[type="checkbox"]:checked + .vpr-cb-box {
    background-color: #1a2340 !important;
    border-color: #1a2340 !important;
}

.vpr-form-wrapper .vpr-cb-label input[type="checkbox"]:checked + .vpr-cb-box svg {
    color: #ffffff !important;
}

.vpr-form-wrapper .vpr-cb-box.vpr-error {
    border-color: #ef4444 !important;
}

.vpr-form-wrapper .vpr-cb-text {
    font-size: 14px !important;
    color: #475569 !important;
    line-height: 1.55 !important;
}

.vpr-form-wrapper .vpr-cb-text a {
    color: #3b82f6 !important;
    text-decoration: underline !important;
}

.vpr-form-wrapper .vpr-cb-text a:hover {
    color: #2563eb !important;
}

/* ---------- reCAPTCHA ---------- */
.vpr-form-wrapper .vpr-recaptcha-wrap {
    margin: 28px 0 8px !important;
}

/* ---------- SUBMIT BUTTON ---------- */
.vpr-form-wrapper .vpr-submit-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 244px !important;
    height: 50px !important;
    padding: 0 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #ffffff !important;
    background-color: #1a2740 !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: background-color 0.2s ease, box-shadow 0.2s ease !important;
    margin-top: 16px !important;
    letter-spacing: 0.01em !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 50px !important;
}

.vpr-form-wrapper .vpr-submit-btn:hover {
    background-color: #0f1a2e !important;
    box-shadow: 0 4px 16px rgba(26, 39, 64, 0.28) !important;
}

.vpr-form-wrapper .vpr-submit-btn:disabled {
    opacity: 0.65 !important;
    cursor: not-allowed !important;
}

/* TOGGLE: btn text hidden when loading */
.vpr-form-wrapper .vpr-btn-text.vpr-hidden {
    display: none !important;
}

/* TOGGLE: btn loader hidden by default */
.vpr-form-wrapper .vpr-btn-loader {
    display: none !important;
}

.vpr-form-wrapper .vpr-btn-loader.vpr-visible {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.vpr-form-wrapper .vpr-spinner {
    width: 20px !important;
    height: 20px !important;
    animation: vpr-spin 0.75s linear infinite !important;
}

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

/* ---------- OVERLAY PRELOADER (TOGGLE) ---------- */
.vpr-form-wrapper .vpr-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 999999 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.vpr-form-wrapper .vpr-overlay.vpr-visible {
    display: flex !important;
    animation: vpr-fadeIn 0.25s ease;
}

@keyframes vpr-fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.vpr-form-wrapper .vpr-preloader {
    background: #ffffff !important;
    border-radius: 16px !important;
    padding: 44px 52px !important;
    text-align: center !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15) !important;
}

.vpr-form-wrapper .vpr-preloader-spin {
    width: 44px !important;
    height: 44px !important;
    border: 4px solid #e2e8f0 !important;
    border-top-color: #1a2340 !important;
    border-radius: 50% !important;
    animation: vpr-spin 0.65s linear infinite !important;
    margin: 0 auto 18px !important;
}

.vpr-form-wrapper .vpr-preloader p {
    font-size: 15px !important;
    color: #475569 !important;
    margin: 0 !important;
    font-weight: 500 !important;
}

/* ---------- SUCCESS MODAL (TOGGLE) ---------- */
.vpr-form-wrapper .vpr-modal-bg {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(15, 23, 42, 0.55) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 1000000 !important;
    display: none !important;
    align-items: center !important;
    justify-content: center !important;
}

.vpr-form-wrapper .vpr-modal-bg.vpr-visible {
    display: flex !important;
    animation: vpr-fadeIn 0.25s ease;
}

.vpr-form-wrapper .vpr-modal {
    background: #ffffff !important;
    border-radius: 18px !important;
    padding: 44px 48px !important;
    text-align: center !important;
    max-width: 420px !important;
    width: 90% !important;
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18) !important;
    animation: vpr-modalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
}

@keyframes vpr-modalIn {
    from { opacity: 0; transform: scale(0.85) translateY(20px); }
    to { opacity: 1; transform: scale(1) translateY(0); }
}

.vpr-form-wrapper .vpr-modal-icon svg {
    width: 60px !important;
    height: 60px !important;
}

.vpr-form-wrapper .vpr-modal-icon {
    margin-bottom: 18px !important;
}

.vpr-form-wrapper .vpr-modal-icon circle {
    stroke-dasharray: 157;
    stroke-dashoffset: 157;
    animation: vpr-circleDraw 0.6s 0.2s ease forwards;
}

.vpr-form-wrapper .vpr-modal-icon path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: vpr-checkDraw 0.4s 0.6s ease forwards;
}

@keyframes vpr-circleDraw { to { stroke-dashoffset: 0; } }
@keyframes vpr-checkDraw { to { stroke-dashoffset: 0; } }

.vpr-form-wrapper .vpr-modal-title {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: #1a2340 !important;
    margin: 0 0 10px !important;
}

.vpr-form-wrapper .vpr-modal-msg {
    font-size: 14.5px !important;
    color: #64748b !important;
    line-height: 1.6 !important;
    margin: 0 0 26px !important;
}

.vpr-form-wrapper .vpr-modal-close {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 150px !important;
    height: 44px !important;
    padding: 0 30px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    font-family: inherit !important;
    color: #ffffff !important;
    background-color: #1a2740 !important;
    border: none !important;
    border-radius: 6px !important;
    cursor: pointer !important;
}

.vpr-form-wrapper .vpr-modal-close:hover {
    background-color: #0f1a2e !important;
}

/* ---------- SHAKE ---------- */
@keyframes vpr-shake {
    0%, 100% { transform: translateX(0); }
    20%  { transform: translateX(-6px); }
    40%  { transform: translateX(6px); }
    60%  { transform: translateX(-4px); }
    80%  { transform: translateX(4px); }
}

.vpr-form-wrapper .vpr-shake {
    animation: vpr-shake 0.35s ease !important;
}

/* ---------- BREED CHIPS / TAGS ---------- */
.vpr-form-wrapper .vpr-chips-container {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 8px !important;
    margin-top: 10px !important;
    min-height: 0 !important;
}

.vpr-form-wrapper .vpr-chip {
    display: inline-flex !important;
    align-items: center !important;
    gap: 6px !important;
    padding: 6px 12px !important;
    background-color: #f1f5f9 !important;
    border: 1px solid #dce1e8 !important;
    border-radius: 20px !important;
    font-size: 13px !important;
    font-family: inherit !important;
    color: #334155 !important;
    line-height: 1.3 !important;
    white-space: nowrap !important;
    transition: all 0.15s ease !important;
}

.vpr-form-wrapper .vpr-chip:hover {
    background-color: #e2e8f0 !important;
    border-color: #cbd5e1 !important;
}

.vpr-form-wrapper .vpr-chip-remove {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    border: none !important;
    background: #94a3b8 !important;
    color: #fff !important;
    border-radius: 50% !important;
    font-size: 12px !important;
    line-height: 1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    transition: background 0.15s ease !important;
}

.vpr-form-wrapper .vpr-chip-remove:hover {
    background: #ef4444 !important;
}

/* ---------- RESPONSIVE ---------- */
@media (max-width: 1024px) {
    .vpr-form-wrapper .vpr-form-container { padding: 48px 60px 64px !important; }
    .vpr-form-wrapper .vpr-row { gap: 28px !important; }
}

@media (max-width: 768px) {
    .vpr-form-wrapper .vpr-form-container { padding: 36px 24px 48px !important; }
    .vpr-form-wrapper .vpr-title { font-size: 28px !important; }
    .vpr-form-wrapper .vpr-row { flex-direction: column !important; gap: 0 !important; margin-bottom: 0 !important; }
    .vpr-form-wrapper .vpr-col { margin-bottom: 18px !important; }
    .vpr-form-wrapper .vpr-row-half .vpr-col { flex: 1 !important; max-width: 100% !important; }
    .vpr-form-wrapper .vpr-submit-btn { width: 100% !important; }
}

@media (max-width: 480px) {
    .vpr-form-wrapper .vpr-form-container { padding: 28px 16px 36px !important; }
    .vpr-form-wrapper .vpr-title { font-size: 24px !important; }
}

/* =========================================================================
   v1.4.0 — PARTNER PORTAL ACCOUNT SECTION
   All selectors scoped to .vpr-form-wrapper so they cannot leak to the
   surrounding theme. Heavy !important to outweigh aggressive theme resets.
   ========================================================================= */

/* Logo helper text (sits directly under the upload box) */
.vpr-form-wrapper .vpr-logo-helper {
    margin: 8px 0 0 !important;
    padding: 0 !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    color: #475569 !important;
    font-weight: 400 !important;
}

/* Readonly username field */
.vpr-form-wrapper .vpr-input.vpr-readonly {
    background-color: #f1f5f9 !important;
    color: #475569 !important;
    cursor: not-allowed !important;
    border-color: #cbd5e1 !important;
}
.vpr-form-wrapper .vpr-input.vpr-readonly:focus {
    box-shadow: none !important;
    border-color: #cbd5e1 !important;
}

/* Small hint text under the username field */
.vpr-form-wrapper .vpr-field-hint {
    margin: 6px 0 0 !important;
    padding: 0 !important;
    font-size: 12px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
    font-style: italic !important;
}

/* Password input + eye-toggle button */
.vpr-form-wrapper .vpr-pw-wrap {
    position: relative !important;
    display: block !important;
}
.vpr-form-wrapper .vpr-pw-wrap .vpr-pw-input {
    padding-right: 46px !important;
}
.vpr-form-wrapper .vpr-pw-toggle {
    position: absolute !important;
    top: 50% !important;
    right: 10px !important;
    transform: translateY(-50%) !important;
    width: 32px !important;
    height: 32px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: transparent !important;
    border: none !important;
    color: #64748b !important;
    cursor: pointer !important;
    padding: 0 !important;
    border-radius: 4px !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    box-shadow: none !important;
    outline: none !important;
}
.vpr-form-wrapper .vpr-pw-toggle:hover {
    background: #f1f5f9 !important;
    color: #1e293b !important;
}
.vpr-form-wrapper .vpr-pw-toggle:focus {
    background: #f1f5f9 !important;
    color: #1e293b !important;
    box-shadow: 0 0 0 2px rgba(59,130,246,0.25) !important;
}
.vpr-form-wrapper .vpr-pw-toggle svg {
    width: 20px !important;
    height: 20px !important;
}
/* v1.16.6 — Exactly ONE eye icon visible at a time. The previous
   "svg { display:block !important }" forced BOTH the open-eye and slashed-eye
   to render (and defeated the JS toggle, since !important beats inline styles).
   Visibility is now driven by a state class on the button, enforced with
   !important so no parent-theme svg{display:…} rule can reveal the other icon.
   Default (password hidden) → open eye. With .vpr-pw-visible (password shown)
   → slashed eye. */
.vpr-form-wrapper .vpr-pw-toggle .vpr-eye-on  { display: block !important; }
.vpr-form-wrapper .vpr-pw-toggle .vpr-eye-off { display: none  !important; }
.vpr-form-wrapper .vpr-pw-toggle.vpr-pw-visible .vpr-eye-on  { display: none  !important; }
.vpr-form-wrapper .vpr-pw-toggle.vpr-pw-visible .vpr-eye-off { display: block !important; }

/* Password strength rules list */
.vpr-form-wrapper .vpr-pw-rules {
    list-style: none !important;
    margin: 10px 0 0 !important;
    padding: 0 !important;
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 6px 14px !important;
    font-size: 12.5px !important;
    line-height: 1.4 !important;
    color: #64748b !important;
}
.vpr-form-wrapper .vpr-pw-rules li {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
    padding: 0 !important;
    background: none !important;
    list-style: none !important;
    transition: color 0.15s ease !important;
}
.vpr-form-wrapper .vpr-pw-rules li::before,
.vpr-form-wrapper .vpr-pw-rules li::after,
.vpr-form-wrapper .vpr-pw-rules li::marker {
    content: none !important;
    display: none !important;
}
.vpr-form-wrapper .vpr-pw-rules .vpr-pw-dot {
    flex-shrink: 0 !important;
    width: 10px !important;
    height: 10px !important;
    border-radius: 50% !important;
    background: #cbd5e1 !important;
    border: 2px solid #cbd5e1 !important;
    transition: background 0.15s ease, border-color 0.15s ease !important;
    box-shadow: none !important;
}
.vpr-form-wrapper .vpr-pw-rules li.vpr-pw-rule-ok {
    color: #16a34a !important;
}
.vpr-form-wrapper .vpr-pw-rules li.vpr-pw-rule-ok .vpr-pw-dot {
    background: #16a34a !important;
    border-color: #16a34a !important;
}
.vpr-form-wrapper .vpr-pw-rules li.vpr-pw-rule-bad {
    color: #ef4444 !important;
}
.vpr-form-wrapper .vpr-pw-rules li.vpr-pw-rule-bad .vpr-pw-dot {
    background: transparent !important;
    border-color: #ef4444 !important;
}

/* Mobile — single column rule list */
@media (max-width: 640px) {
    .vpr-form-wrapper .vpr-pw-rules {
        grid-template-columns: 1fr !important;
    }
}