.rf5-form-theme {
  border-radius: 0px;
  min-height: 100%;
}

.rf5-prev,
.rf5-next,
.rf5-submit {
  min-width: 120px;
  font-weight: 600;
  transform: none !important;
  box-shadow: none !important;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease !important;
}

/* BACK — outline/secondary: clearly subordinate to the primary CTA */
.rf5-prev,
.rf5-prev:focus,
.rf5-prev:active {
  background-color: transparent !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
  border-radius: var(--rf5-btn-back-radius, 8px) !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}
.rf5-prev:hover {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #9ca3af !important;
}

/* NEXT */
.rf5-next,
.rf5-next:hover,
.rf5-next:focus,
.rf5-next:active {
  background-color: var(--rf5-btn-next-bg, #dc3545) !important;
  color: var(--rf5-btn-next-text, #ffffff) !important;
  border: 1px solid var(--rf5-btn-next-bg, #dc3545) !important;
  border-radius: var(--rf5-btn-next-radius, 8px) !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* SUBMIT */
.rf5-submit,
.rf5-submit:hover,
.rf5-submit:focus,
.rf5-submit:active {
  background-color: var(--rf5-btn-submit-bg, #dc3545) !important;
  color: var(--rf5-btn-submit-text, #ffffff) !important;
  border: 1px solid var(--rf5-btn-submit-bg, #dc3545) !important;
  border-radius: var(--rf5-btn-submit-radius, 8px) !important;
  box-shadow: none !important;
  transform: none !important;
  text-decoration: none !important;
}

/* focus ring แบบเบา ๆ เผื่อ accessibility */
.rf5-prev:focus-visible,
.rf5-next:focus-visible,
.rf5-submit:focus-visible {
  outline: 2px solid rgba(0, 0, 0, 0.15);
  outline-offset: 2px;
}

/* disabled */
.rf5-prev:disabled,
.rf5-next:disabled,
.rf5-submit:disabled {
  opacity: 0.65;
  cursor: not-allowed;
  box-shadow: none !important;
  transform: none !important;
}

.rf5-prev:hover,
.rf5-next:hover,
.rf5-submit:hover {
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.08) !important;
  filter: brightness(0.97);
}

/* ตอนกด */
.rf5-prev:active,
.rf5-next:active,
.rf5-submit:active {
  transform: translateY(0) !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08) !important;
  filter: brightness(0.95);
}





/* Beautiful Banner Image Styling */
.rf5-banner-image {
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-top: 12px;
    margin-bottom: 12px;
    max-width: 100%;
    height: auto;
    border-radius: 18px;
    /* box-shadow: 0 4px 24px 0 rgba(0,0,0,0.10), 0 1.5px 6px 0 rgba(0,0,0,0.08);
    transition: box-shadow 0.3s, transform 0.3s;
    background: #fff; */
    padding: 8px 0;
}
/* .rf5-banner-image:hover {
    box-shadow: 0 8px 32px 0 rgba(0,0,0,0.18), 0 3px 12px 0 rgba(0,0,0,0.12);
    transform: scale(1.01);
} */
/**
 * RegisterV5 Optimized CSS
 * Performance-optimized for high-load scenarios
 * 
 * Features:
 * - Critical CSS for above-the-fold content
 * - Reduced specificity for faster rendering
 * - CSS containment for better performance
 * - Hardware acceleration where beneficial
 * - Smooth animations for better UX
 */

/* ============================================
   ANIMATIONS & KEYFRAMES
   ============================================ */

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

@keyframes slideInRight {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes scaleIn {
    from {
        opacity: 0;
        transform: scale(0.95);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes pulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.05);
    }
}

@keyframes shake {
    0%, 100% {
        transform: translateX(0);
    }
    10%, 30%, 50%, 70%, 90% {
        transform: translateX(-5px);
    }
    20%, 40%, 60%, 80% {
        transform: translateX(5px);
    }
}

/* ============================================
   CRITICAL STYLES (Above the fold)
   ============================================ */

.rf5-shell-header {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    padding-bottom: 10px;
    contain: layout style; /* CSS containment for performance */
    animation: fadeIn 0.5s ease;
}

/* Form Shell - Critical */
.rf5-shell {
    max-width: 1200px;
    margin: 0 auto;
    padding-left: 20px;
    padding-right: 20px;
    contain: layout style; /* CSS containment for performance */
    animation: fadeIn 0.5s ease;
}

/* Form shell (not banner) — match card width to banner image width */
.rf5-shell:not(.rf5-banner-wrap) {
    max-width: 1036px;
    padding-top: 10px;
}
.rf5-complete-card {
    margin-top: 15px;
}

/* Dynamic HTML content inside the complete card.
   The outer .rf5-card already provides uniform 24px padding on all sides,
   so this wrapper just suppresses default browser margins on the
   first and last block elements to keep spacing predictable. */
.rf5-html-content {
    display: flow-root; /* contains floats from dynamic HTML */
}
.rf5-html-content > *:first-child { margin-top: 0; }
.rf5-html-content > *:last-child  { margin-bottom: 0; }

/* Card Container - Critical */
.rf5-card {
    background: #fff;
    border-radius: 14px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
    margin-bottom: 20px;
    animation: scaleIn 0.4s ease;
    transition: box-shadow 0.3s ease;
}

.rf5-card:hover {
    box-shadow: 0 4px 16px rgba(0,0,0,0.12);
}

/* Inner form sections should read as lightweight blocks, not full cards.
   The primary page card remains .rf5-page > .rf5-card. */
.rf5-card .rf5-card-white {
    background: #fbfcfe;
    border: 1px solid #edf0f5;
    box-shadow: none !important;
    padding: 18px 20px;
    animation: none;
}

.rf5-card .rf5-card-white:hover {
    box-shadow: none !important;
}

.rf5-card .rf5-card-white > .mb-3:first-child {
    padding-bottom: 10px;
    border-bottom: 1px solid #eef1f6;
    margin-bottom: 18px !important;
}

/* Member sub-cards: nested inside parent .rf5-card, so use lighter treatment */
.rf5-member-card {
    background: #f9fafb !important;
    box-shadow: none !important;
    border: 1px solid #e5e7eb;
    border-radius: 10px;
    padding: 18px 20px;
    animation: none;
}

.rf5-member-card:hover {
    box-shadow: none !important;
}

.rf5-member-card > .d-flex:first-child {
    padding-bottom: 10px;
    border-bottom: 1px solid #e5e7eb;
    margin-bottom: 12px !important;
}

/* Row and Column Layout - Critical */
.rf5-row {
    display: flex;
    flex-wrap: wrap;
    row-gap: 0;        /* flex lines abut; vertical rhythm is entirely from .rf5-col margin-bottom */
    column-gap: 16px;  /* horizontal gutter between side-by-side columns */
    margin: 0 -8px;
}

.rf5-col {
    padding: 0 8px;
    min-width: 0; /* Prevent flex overflow */
    margin-bottom: 1.25rem; /* primary vertical-rhythm source — moved from .rf5-qwrap margin-bottom */
    animation: fadeInUp 0.5s ease backwards;
}

.rf5-col:nth-child(1) { animation-delay: 0.05s; }
.rf5-col:nth-child(2) { animation-delay: 0.1s; }
.rf5-col:nth-child(3) { animation-delay: 0.15s; }
.rf5-col:nth-child(4) { animation-delay: 0.2s; }
.rf5-col:nth-child(5) { animation-delay: 0.25s; }
.rf5-col:nth-child(6) { animation-delay: 0.3s; }

/* Question Wrapper - Critical */
.rf5-qwrap {
    margin-bottom: 0;        /* spacing moved to .rf5-col — avoids contain:layout side-effects */
    contain: layout; /* Containment for better performance */
}

/* Form Inputs - Critical */

/* Unified Input Styles */
.rf5-input,
.form-control,
select.form-control,
select.rf5-input,
textarea.form-control,
textarea.rf5-input,
input.flatpickr-time,
input.flatpickr-date,
input.flatpickr-datetime,
input.flatpickr-daterange {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    will-change: border-color;
    box-sizing: border-box;
}

.rf5-input:focus,
.form-control:focus,
select.form-control:focus,
select.rf5-input:focus,
textarea.form-control:focus,
textarea.rf5-input:focus,
input.flatpickr-time:focus,
input.flatpickr-date:focus,
input.flatpickr-datetime:focus,
input.flatpickr-daterange:focus {
    outline: 0;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    transform: translateY(-1px);
}

.rf5-input:hover,
.form-control:hover,
select.form-control:hover,
select.rf5-input:hover,
textarea.form-control:hover,
textarea.rf5-input:hover,
input.flatpickr-time:hover,
input.flatpickr-date:hover,
input.flatpickr-datetime:hover,
input.flatpickr-daterange:hover {
    border-color: #adb5bd;
}

/* Form Labels - Critical */
.form-label {
    display: block;            /* was inline-block: block gives full-width box, no sub-pixel shrink */
    margin-bottom: 0.5rem;
    font-weight: 500;
    line-height: 1.5;          /* pin line-height — prevents font sub-pixel height variance */
    min-height: 1.5rem;        /* at least 1 line — keeps paired columns in the same row aligned */
    transition: color 0.2s ease;
    overflow-wrap: break-word;
    word-break: break-word;
}

/* Required Indicator - Critical */
.text-danger {
    color: #dc3545;
}

/* Required star: must not stretch label height or shift baseline */
.form-label > .text-danger {
    display: inline;
    font-size: inherit;
    line-height: inherit;
    vertical-align: baseline;
}

/* Field description helper text — rendered directly after the label, before the control */
.rf5-field-description {
    font-size: .8em;
    color: #9ca3af;
    line-height: 1.4;
    margin-top: -0.25rem;  /* pull closer to the label above */
    margin-bottom: 0.5rem; /* same gap to the control as label alone would give */
    display: block;
}

/* Button Base - Critical */
.btn {
    display: inline-block;
    font-weight: 400;
    text-align: center;
    vertical-align: middle;
    user-select: none;
    border: 1px solid transparent;
    padding: 0.375rem 0.75rem;
    font-size: 1rem;
    line-height: 1.5;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

.btn::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 0.6s, height 0.6s;
}

.btn:active::before {
    width: 300px;
    height: 300px;
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.65;
    cursor: not-allowed;
}

.btn-danger {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-danger:hover:not(:disabled) {
    background-color: #c82333;
    border-color: #c82333;
}

.btn-primary {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
}

.btn-primary:hover:not(:disabled),
.btn-primary:active:not(:disabled),
.btn-primary:focus:not(:disabled) {
    color: #fff;
    background-color: #c82333;
    border-color: #c82333;
}

.btn-primary:focus:not(:disabled) {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.rf5-auto-fill .input-group {
    display: flex;
    flex-wrap: nowrap;
    align-items: stretch;
    gap: 0.75rem;
}

.rf5-auto-fill .input-group > .rf5-auto-fill-input {
    flex: 1 1 auto;
    width: 1%;
    min-width: 0;
    border-radius: 0.65rem !important;
}

.rf5-auto-fill .rf5-auto-fill-fetch {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    min-width: 132px;
    min-height: 44px;
    padding: 0.5rem 1.25rem;
    border: 0;
    border-radius: 0.65rem !important;
    color: #fff !important;
    background: linear-gradient(135deg, #e11d48 0%, #dc3545 100%);
    box-shadow: 0 0.55rem 1.1rem rgba(220, 53, 69, 0.26);
    font-weight: 700;
    letter-spacing: 0;
    white-space: nowrap;
}

.rf5-auto-fill .rf5-auto-fill-fetch:hover:not(:disabled),
.rf5-auto-fill .rf5-auto-fill-fetch:active:not(:disabled),
.rf5-auto-fill .rf5-auto-fill-fetch:focus:not(:disabled) {
    color: #fff !important;
    background: linear-gradient(135deg, #be123c 0%, #c82333 100%);
    box-shadow: 0 0.65rem 1.25rem rgba(220, 53, 69, 0.34);
}

.rf5-auto-fill .rf5-auto-fill-fetch:focus-visible {
    outline: 0;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.22), 0 0.65rem 1.25rem rgba(220, 53, 69, 0.34);
}

.rf5-auto-fill .rf5-auto-fill-fetch:disabled {
    opacity: 0.82;
    box-shadow: 0 0.35rem 0.85rem rgba(220, 53, 69, 0.18);
    transform: none;
}

.rf5-auto-fill .rf5-auto-fill-fetch-icon,
.rf5-auto-fill .rf5-auto-fill-fetch-label,
.rf5-auto-fill .rf5-auto-fill-fetch-spinner {
    position: relative;
    z-index: 1;
}

.rf5-auto-fill .rf5-auto-fill-fetch-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1rem;
    height: 1rem;
}

.rf5-auto-fill .rf5-auto-fill-fetch-spinner {
    width: 1rem;
    height: 1rem;
    border-width: 0.15em;
}

.rf5-auto-fill .rf5-auto-fill-status {
    margin-top: 0.45rem;
    font-weight: 500;
}

@media (max-width: 575.98px) {
    .rf5-auto-fill .input-group {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .rf5-auto-fill .input-group > .rf5-auto-fill-input {
        flex: 1 0 100%;
        width: 100%;
    }

    .rf5-auto-fill .rf5-auto-fill-fetch {
        width: 100%;
        min-width: 0;
    }
}

.btn-outline-danger {
    color: #dc3545;
    border-color: #dc3545;
    background-color: transparent;
}

.btn-outline-danger:hover:not(:disabled),
.btn-outline-danger:active:not(:disabled),
.btn-outline-danger:focus:not(:disabled) {
    color: #fff;
    background-color: #c82333;
    border-color: #c82333;
}

.btn-outline-danger:focus:not(:disabled) {
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.btn-light {
    color: #212529;
    background-color: #f8f9fa;
    border-color: #f8f9fa;
}

.btn-light:hover:not(:disabled) {
    background-color: #e2e6ea;
    border-color: #dae0e5;
}

/* ============================================
   NAVIGATION (Deferred - load after critical)
   ============================================ */

/* Top Navigation Pills */
.nav {
    display: flex;
    flex-wrap: wrap;
    padding-left: 0;
    margin-bottom: 0;
    list-style: none;
}

.nav-pills {
    gap: 0.5rem;
    animation: slideInRight 0.5s ease;
}

.nav-item {
    margin-bottom: 0;
    animation: fadeInUp 0.4s ease backwards;
}

.nav-item:nth-child(1) { animation-delay: 0.1s; }
.nav-item:nth-child(2) { animation-delay: 0.15s; }
.nav-item:nth-child(3) { animation-delay: 0.2s; }
.nav-item:nth-child(4) { animation-delay: 0.25s; }
.nav-item:nth-child(5) { animation-delay: 0.3s; }

.nav-link {
    display: block;
    padding: 0.5rem 1rem;
    color: #495057;
    text-decoration: none;
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: 0.25rem;
    transition: all 0.3s ease;
    position: relative;
}

.nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: #dc3545;
    transform: translateX(-50%);
    transition: width 0.3s ease;
}

.nav-link:hover {
    color: #0056b3;
    text-decoration: none;
    transform: translateY(-2px);
}

.nav-link:hover::after {
    width: 80%;
}

.nav-link.active {
    color: #fff;
    background-color: #dc3545;
    border-color: #dc3545;
    transform: scale(1.05);
}

.nav-link.active::after {
    display: none;
}

.rf5-topnav {
    margin-bottom: 1rem;
}

/* ============================================
   PAGE MANAGEMENT
   ============================================ */

.rf5-page {
    animation: fadeIn 0.3s ease-in;
    margin-top: 15px;
}

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

/* ============================================
   FORM ELEMENTS (Deferred)
   ============================================ */

/* Checkboxes and Radios */
.form-check {
    display: block;
    padding-left: 1.25rem;
    margin-bottom: 0.4rem;
    transition: all 0.2s ease;
}

.form-check:hover {
    transform: translateX(2px);
}

.form-check-input {
    position: absolute;
    margin-top: 0.3rem;
    margin-left: -1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
}

.form-check-input:hover {
    transform: scale(1.1);
}

.form-check-input:checked {
    animation: pulse 0.3s ease;
}

.form-check-label {
    margin-bottom: 0;
    cursor: pointer;
    transition: color 0.2s ease;
    user-select: none;
    overflow-wrap: break-word;
    word-break: break-word;
}

.form-check-label:hover {
    color: #495057;
}

/* ── RF5 radio / checkbox option indent ──────────────────────────────
   Shift option lists right so they sit inside the question content area,
   not flush with the card's left edge.

   Two selector groups cover all four rendering paths:
   1) .rf5-radio-group   — static radio (renderStaticRadio)
      .rf5-checkbox-group — static + dynamic checkbox
   2) .rf5-qwrap > .form-check — dynamic radio (no group wrapper) +
                                  ml-main radio options
   Reset rules prevent double-indent inside .rf5-ml-sub panels.
   ──────────────────────────────────────────────────────────────── */

.rf5-radio-group,
.rf5-checkbox-group {
    padding-left: 0.75rem;
}

/* Dynamic radio renders form-checks as direct children of .rf5-qwrap */
.rf5-qwrap > .form-check {
    margin-left: 0.75rem;
}

/* Multi-level sub-panels already carry card padding — reset to avoid compounding */
.rf5-ml-sub .rf5-radio-group,
.rf5-ml-sub .rf5-checkbox-group {
    padding-left: 0;
}
.rf5-ml-sub .rf5-qwrap > .form-check {
    margin-left: 0.5rem;
}

/* Select Dropdowns */
select.form-control,
select.rf5-input {
    padding-right: 2rem;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23343a40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 12px;
}

/* Textarea */
textarea.form-control,
textarea.rf5-input {
    min-height: 100px;
    resize: vertical;
}

/* Flatpickr date/time inputs */
input.flatpickr-time,
input.flatpickr-date,
input.flatpickr-datetime,
input.flatpickr-daterange {
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    color: #495057 !important;
    background-color: #fff !important;
    border: 1px solid #ced4da !important;
    border-radius: 0.25rem !important;
    cursor: pointer;
    box-sizing: border-box !important;
}

input.flatpickr-date,
input.flatpickr-datetime,
input.flatpickr-daterange {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 16px !important;
    padding-right: 2.5rem !important;
}

input.flatpickr-time {
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="%23495057" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle><polyline points="12 6 12 12 16 14"></polyline></svg>') !important;
    background-repeat: no-repeat !important;
    background-position: right 0.75rem center !important;
    background-size: 16px 16px !important;
    padding-right: 2.5rem !important;
}

/* ============================================
   VALIDATION STATES
   ============================================ */

.is-invalid {
    border-color: #dc3545;
}

.is-valid {
    border-color: #28a745;
}

.is-invalid:focus {
    border-color: #c82333;
    box-shadow: 0 0 0 0.2rem rgba(220, 53, 69, 0.25);
}

.is-valid:focus {
    border-color: #28a745;
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Smooth border-color transition for all RF5 inputs (including textarea) */
.rf5-input,
.rf5-tel-input {
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

/* ============================================
   FILE UPLOAD (Lazy loaded)
   ============================================ */

.rf5-file-upload-modern {
    contain: layout;
}

.rf5-file-dropzone {
    border: 2px dashed #dee2e6;
    border-radius: 8px;
    padding: 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #f8f9fa;
}

.rf5-file-dropzone:hover,
.rf5-file-dropzone.dragover {
    border-color: #dc3545;
    background-color: #fff5f6;
}

.rf5-file-upload-modern.is-invalid .rf5-file-dropzone {
    border-color: #dc3545;
    background-color: #fff5f6;
}

.rf5-file-icon {
    margin-bottom: 1rem;
    color: #6c757d;
}

.rf5-file-main-text {
    font-size: 1rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
}

.rf5-file-browse {
    color: #dc3545;
    text-decoration: underline;
    cursor: pointer;
}

.rf5-file-sub-text {
    font-size: 0.875rem;
    color: #6c757d;
    margin: 0;
}

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

.rf5-file-preview {
    margin-top: 1rem;
    padding: 1rem;
    background: #f8f9fa;
    border-radius: 4px;
}

.rf5-file-previews-container {
    margin-top: 1rem;
}

.rf5-file-preview-item {
    padding: 0.75rem;
    background: #f8f9fa;
    border-radius: 4px;
    border: 1px solid #dee2e6;
}

.rf5-file-preview-content {
    display: flex;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.rf5-file-preview-icon {
    font-size: 2rem;
    flex-shrink: 0;
}

.rf5-file-preview-icon img {
    width: 48px;
    height: 48px;
    object-fit: cover;
    border-radius: 4px;
    display: block;
}

.rf5-file-preview-details {
    flex: 1;
    min-width: 0;
}

.rf5-file-preview-name {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.rf5-file-preview-size {
    font-size: 0.875rem;
    color: #6c757d;
}

.rf5-file-remove {
    background: transparent;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: #dc3545;
    transition: color 0.15s ease;
    flex-shrink: 0;
}

.rf5-file-remove:hover {
    color: #c82333;
}

.rf5-file-progress {
    width: 100%;
    height: 4px;
    background-color: #e9ecef;
    border-radius: 2px;
    overflow: hidden;
    margin-top: 0.5rem;
}

/* Large Preview Mode (single image upload with drag-drop) */
.rf5-file-preview-large {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
    position: relative;
}

.rf5-file-preview-image-large {
    width: 100%;
    max-width: 100%;
    height: 180px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    border-radius: 8px;
    background: #f8f9fa;
}

.rf5-file-preview-image-large img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 8px;
}

.rf5-file-preview-info-large {
    width: 100%;
    text-align: center;
    padding: 0.5rem;
    background: #ffffff;
    border-radius: 4px;
}

.rf5-file-preview-large .rf5-file-remove {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    width: 2rem;
    height: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    z-index: 10;
}

.rf5-file-preview-large .rf5-file-remove:hover {
    background: rgba(255, 255, 255, 1);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
}

.rf5-file-progress-bar {
    height: 100%;
    background-color: #dc3545;
    transition: width 0.3s ease;
    will-change: width;
}

/* ---- Upload: has-files state — eliminates gap between hidden dropzone and preview rows ---- */

/* Collapse the always-reserved feedback height when files are present */
.rf5-file-upload-modern.rf5-has-files .rf5-file-feedback {
    height: 0 !important;
    margin-top: 0 !important;
    overflow: hidden;
}

/* Compact top margin for the preview list now that the feedback gap is gone */
.rf5-file-upload-modern.rf5-has-files .rf5-file-previews-container {
    margin-top: 8px;
}

/* No extra bottom margin after the last file row */
.rf5-file-upload-modern .rf5-file-previews-container > .rf5-file-preview-item:last-child {
    margin-bottom: 0;
}

/* Large image preview item: remove outer padding so the image fills the card cleanly */
.rf5-file-upload-modern .rf5-file-preview-item:has(> .rf5-file-preview-large) {
    padding: 0;
    overflow: hidden;
}

/* Keep the info strip below the image readable with its own padding */
.rf5-file-upload-modern .rf5-file-preview-item:has(> .rf5-file-preview-large) .rf5-file-preview-info-large {
    padding: 0.5rem 0.75rem;
    border-radius: 0;
}

/* ============================================
   MULTI-LEVEL DROPDOWNS (Lazy loaded)
   ============================================ */

.rf5-ml-root {
    contain: layout;
}

.rf5-ml-sub {
    margin-top: 1rem;
    padding-left: 1.5rem;
    border-left: 2px solid #dee2e6;
    max-width: 100%;
    box-sizing: border-box;
    overflow-wrap: break-word;
}

/* UNDER-mode: nested directly below its triggering option with no label of its
   own, so the usual margin-top (sized to sit under a label) reads as a gap. */
.rf5-ml-sub.rf5-ml-sub--no-label {
    margin-top: 0.35rem;
}

.rf5-ml-sub.rf5-hidden {
    display: none;
}

.rf5-otherwrap {
    margin-top: 0.5rem;
}

.rf5-otherwrap.rf5-hidden {
    display: none;
}

/* ============================================
   CATEGORY TREE (Lazy loaded)
   ============================================ */

.rf5-cat-tree {
    contain: layout;
}

.rf5-cat-node {
    margin-bottom: 0.5rem;
}

.rf5-cat-children {
    margin-top: 0.5rem;
}

.rf5-cat-children.rf5-hidden {
    display: none;
}

/* ============================================
   SIGNATURE PAD (Lazy loaded)
   ============================================ */

.signature-pad-container {
    contain: layout;
}

.signature-canvas {
    border: 1px solid #ced4da;
    border-radius: 4px;
    display: block;
    max-width: 100%;
    cursor: crosshair;
    touch-action: none;
}

.signature-controls {
    display: flex;
    gap: 0.5rem;
    margin-top: 0.5rem;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

.rf5-hidden {
    display: none !important;
}

.d-flex {
    display: flex;
}

.justify-content-between {
    justify-content: space-between;
}

.mt-2 { margin-top: 0.5rem; }
.mt-3 { margin-top: 1rem; }
.mb-3 { margin-bottom: 1rem; }
.ms-2 { margin-left: 0.5rem; }

.text-muted {
    color: #6c757d;
}

.small {
    font-size: 0.875rem;
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    .rf5-shell {
        padding: 10px;
    }

    .rf5-card {
        padding: 16px;
    }

    .rf5-card .rf5-card-white,
    .rf5-member-card {
        padding: 14px;
    }

    .rf5-col {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    .nav-pills {
        flex-direction: column;
    }
}

/* ============================================
     RF5 Copy Questionnaire (compact + modern)
     ============================================ */

[data-rf5-copy-slot="1"] {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.rf5-copyq-wrap {
    display: inline-flex;
    align-items: center;
    min-width: 0;
}

.rf5-copyq-source {
    -webkit-appearance: none;
    appearance: none;
    min-width: 190px;
    max-width: 240px;
    height: 32px;
    border: 1px solid #d6dbe5;
    border-radius: 8px;
    background-color: #ffffff;
    color: #1f2937;
    font-size: 0.84rem;
    line-height: 1.2;
    padding: 0.28rem 1.9rem 0.28rem 0.68rem;
    background-position: right 0.52rem center;
    background-size: 12px 9px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, background-color 0.2s ease;
}

.rf5-copyq-source--placeholder {
    color: #667085;
    background-color: #fbfcfe;
}

.rf5-copyq-source:hover:not(:disabled) {
    border-color: #b5bfd1;
    background-color: #ffffff;
}

.rf5-copyq-source:focus {
    border-color: #dc3545;
    box-shadow: 0 0 0 0.16rem rgba(220, 53, 69, 0.16);
    outline: none;
}

.rf5-copyq-source:active:not(:disabled) {
    border-color: #c82333;
}

.rf5-copyq-source:disabled {
    border-color: #e1e6ef;
    color: #98a2b3;
    background-color: #f5f7fb;
    cursor: not-allowed;
}

.rf5-copyq-swal {
    width: min(92vw, 470px) !important;
    border-radius: 14px !important;
    border: 1px solid #e7eaf1 !important;
    box-shadow: 0 16px 36px rgba(15, 23, 42, 0.16) !important;
    padding: 1rem 1rem 0.9rem !important;
}

.rf5-copyq-swal__title {
    color: #17243a !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    line-height: 1.25 !important;
    margin-bottom: 0.4rem !important;
}

.rf5-copyq-swal .swal2-html-container {
    margin: 0.25rem 0 0 !important;
    color: #4b5563 !important;
    font-size: 0.95rem !important;
    line-height: 1.48 !important;
}

.rf5-copyq-swal__html {
    margin: 0.25rem 0 0 !important;
    max-height: none !important;
    overflow: visible !important;
    overflow-y: visible !important;
    padding-right: 0 !important;
    word-break: break-word;
}

.rf5-copyq-swal__actions {
    gap: 0.5rem;
    margin-top: 0.9rem !important;
}

.rf5-copyq-swal__confirm,
.rf5-copyq-swal__cancel {
    border: 1px solid transparent;
    border-radius: 8px;
    font-size: 0.86rem;
    font-weight: 600;
    line-height: 1;
    min-height: 34px;
    min-width: 96px;
    padding: 0.5rem 0.78rem;
    transition: all 0.2s ease;
}

.rf5-copyq-swal__confirm {
    background: #dc3545 !important;
    border-color: #dc3545 !important;
    color: #fff !important;
}

.rf5-copyq-swal__confirm:hover {
    background: #c82333 !important;
    border-color: #c82333 !important;
}

.rf5-copyq-swal__cancel {
    background: #fff !important;
    border-color: #d3d9e5 !important;
    color: #374151 !important;
}

.rf5-copyq-swal__cancel:hover {
    background: #f8fafc !important;
    border-color: #bdc7d8 !important;
}

.rf5-copyq-toast {
    border-radius: 11px !important;
    border: 1px solid transparent !important;
    box-shadow: 0 10px 24px rgba(15, 23, 42, 0.13) !important;
    padding: 0.6rem 0.72rem !important;
}

.rf5-copyq-toast__title {
    font-size: 0.84rem !important;
    font-weight: 600 !important;
    color: #1f2937 !important;
}

.rf5-copyq-toast--success {
    border-color: #cae7d2 !important;
    background: #f4fbf6 !important;
}

.rf5-copyq-toast--warning {
    border-color: #f2dfb0 !important;
    background: #fffaf0 !important;
}

@media (max-width: 767px) {
    .rf5-copyq-source {
        min-width: 160px;
        max-width: 190px;
        font-size: 0.8rem;
    }

    .rf5-copyq-swal {
        width: min(96vw, 420px) !important;
        padding: 0.9rem 0.85rem 0.8rem !important;
    }

    .rf5-copyq-swal .swal2-html-container {
        font-size: 0.9rem !important;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */

/* Reduce repaints for animations */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
@media (prefers-reduced-motion: reduce) {
  .spinner-border,
  .rf5-spinner-ring {
    animation-duration: 0.75s !important;
    animation-iteration-count: infinite !important;
  }
}
/* Hardware acceleration for smooth scrolling */
.rf5-page,
.rf5-card {
    transform: translateZ(0);
    backface-visibility: hidden;
}

/* Prevent layout shift */
img {
    max-width: 100%;
    height: auto;
}

/* Optimize font rendering */
body {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

/* Optimize repaints for form elements */
input,
select,
textarea {
    will-change: border-color;
}

/* Checkbox/Radio optimization */
input[type="checkbox"],
input[type="radio"] {
    transform: translateZ(0); /* Force GPU acceleration */
}
/* ============================================
   CATEGORY TREE STYLES - Enhanced with Neutral Colors
   ============================================ */

/* Category Tree Card Container */
.rf5-cat-tree-card {
    background: #ffffff;
    border: 1px solid #dee2e6;
    border-radius: 8px;
    padding: 0;
    margin: 20px 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    animation: scaleIn 0.4s ease;
    transition: all 0.3s ease;
}

.rf5-cat-tree-card:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

/* Category Header */
.rf5-cat-tree-header {
    background: #f8f9fa;
    color: #212529;
    padding: 16px 20px;
    border-bottom: 1px solid #dee2e6;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
}

.rf5-cat-title {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #495057;
}

.rf5-cat-title-icon {
    color: #6c757d;
}

.rf5-cat-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.rf5-cat-actions .btn {
    font-size: 0.85rem;
    padding: 6px 12px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rf5-cat-actions .btn svg {
    flex-shrink: 0;
}

/* Category Tree Body */
.rf5-cat-tree-body {
    padding: 16px 20px;
    max-height: 500px;
    overflow-y: auto;
    background: white;
}

.rf5-cat-tree-body::-webkit-scrollbar {
    width: 8px;
}

.rf5-cat-tree-body::-webkit-scrollbar-track {
    background: #f1f3f5;
    border-radius: 4px;
}

.rf5-cat-tree-body::-webkit-scrollbar-thumb {
    background: #adb5bd;
    border-radius: 4px;
}

.rf5-cat-tree-body::-webkit-scrollbar-thumb:hover {
    background: #868e96;
}

/* Category Node */
.rf5-cat-node {
    position: relative;
    animation: fadeInUp 0.3s ease backwards;
}

.rf5-cat-enhanced {
    margin-bottom: 4px;
}

.rf5-cat-enhanced:nth-child(1) { animation-delay: 0.05s; }
.rf5-cat-enhanced:nth-child(2) { animation-delay: 0.08s; }
.rf5-cat-enhanced:nth-child(3) { animation-delay: 0.11s; }
.rf5-cat-enhanced:nth-child(4) { animation-delay: 0.14s; }
.rf5-cat-enhanced:nth-child(5) { animation-delay: 0.17s; }
.rf5-cat-enhanced:nth-child(6) { animation-delay: 0.2s; }

/* Category Item Wrapper */
.rf5-cat-item-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 5px 10px;
    min-height: 52px;
    border-radius: 10px;
    background: #fff;
    border: 1px solid transparent;
    transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    cursor: pointer;
}

.rf5-cat-item-wrapper:hover {
    background: #f8fafc;
    border-color: #e2e8f0;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}

.rf5-cat-enhanced.is-selected > .rf5-cat-item-wrapper {
    background: #f0fdf4;
    border-color: #4ade80;
    box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.25), inset 0 0 0 1px #bbf7d0;
}

/* Depth-based styling */
.rf5-cat-enhanced.depth-0 { margin-left: 0; }
.rf5-cat-enhanced.depth-1 { margin-left: 20px; }
.rf5-cat-enhanced.depth-2 { margin-left: 40px; }
.rf5-cat-enhanced.depth-3 { margin-left: 60px; }
.rf5-cat-enhanced.depth-4 { margin-left: 80px; }
.rf5-cat-enhanced.depth-5 { margin-left: 100px; }

.rf5-cat-enhanced.depth-0 > .rf5-cat-item-wrapper {
    font-weight: 600;
    border-left: 3px solid #475569;
}

.rf5-cat-enhanced.depth-1 > .rf5-cat-item-wrapper {
    font-weight: 500;
    border-left: 3px solid #94a3b8;
}

.rf5-cat-enhanced.depth-2 > .rf5-cat-item-wrapper {
    border-left: 2px solid #cbd5e1;
}

/* Toggle Button */
.rf5-cat-toggle {
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    padding: 4px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex: 0 0 28px;
    color: #64748b;
}

.rf5-cat-toggle:hover {
    background: #334155;
    border-color: #334155;
    color: #fff;
}

.rf5-cat-toggle:active {
    transform: scale(0.95);
}

.rf5-cat-chevron {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.rf5-cat-toggle.is-expanded .rf5-cat-chevron {
    transform: rotate(90deg);
}

.rf5-cat-spacer {
    width: 28px;
    height: 28px;
    display: inline-block;
    flex: 0 0 28px;
}

/* Checkbox Wrapper */
.rf5-cat-checkbox-wrapper {
    display: flex;
    align-items: center;
    flex: 0 0 20px;
    justify-content: center;
}

.rf5-cat-check {
    width: 18px;
    height: 18px;
    cursor: pointer;
    accent-color: #16a34a;
    transition: transform 0.15s ease;
    flex-shrink: 0;
}

.rf5-cat-check:hover {
    transform: scale(1.15);
}

.rf5-cat-check:checked {
    animation: pulse 0.3s ease;
}

/* ---- Media Box ---- */
.rf5-cat-media {
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

/* Base media box — fallback icon size */
.rf5-cat-media-box {
    width: 42px;
    height: 42px;
    flex: 0 0 42px;
    border-radius: 9px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.rf5-cat-item-wrapper:hover .rf5-cat-media-box {
    border-color: #c1cdd9;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.09);
}

.rf5-cat-enhanced.is-selected > .rf5-cat-item-wrapper .rf5-cat-media-box {
    border-color: #4ade80;
    background: #f0fdf4;
}

/* Image thumbnail — larger, more visual weight */
.rf5-cat-media-box--image {
    width: 52px;
    height: 52px;
    flex: 0 0 52px;
    border-radius: 10px;
    border: 1.5px solid #d9e2ea;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.10);
    background: #f8fafc;
}

.rf5-cat-item-wrapper:hover .rf5-cat-media-box--image {
    border-color: #a8b8c8;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.13);
}

.rf5-cat-enhanced.is-selected > .rf5-cat-item-wrapper .rf5-cat-media-box--image {
    border-color: #4ade80;
    box-shadow: 0 2px 8px rgba(74, 222, 128, 0.28);
}

.rf5-cat-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Fallback icon box — stronger, more intentional */
.rf5-cat-media-box--icon {
    background: #dce3ec;
    border-color: #c8d2dd;
}

.rf5-cat-media-box--icon .rf5-cat-icon {
    width: 24px;
    height: 24px;
    color: #475569;
    stroke: currentColor;
}

/* ---- Category Label ---- */
.rf5-cat-label {
    flex: 1;
    cursor: pointer;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.rf5-cat-label-text {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.rf5-cat-name {
    font-size: 0.925rem;
    color: #1e293b;
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.rf5-cat-enhanced.is-selected > .rf5-cat-item-wrapper .rf5-cat-name {
    color: #15803d;
    font-weight: 600;
}

/* Category Badge */
.rf5-cat-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    background: #16a34a;
    color: #fff;
    border-radius: 99px;
    font-size: 0.68rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

/* Category Children */
.rf5-cat-children {
    margin-top: 4px;
    padding-left: 12px;
    border-left: 1px solid #eaecf0;
    animation: slideInRight 0.2s ease;
}

.rf5-hidden {
    display: none !important;
}

/* Category Summary */
.rf5-cat-summary {
    background: #f8fafc;
    border-top: 1px solid #e2e8f0;
    padding: 12px 20px;
    text-align: center;
    font-size: 0.9rem;
    color: #475569;
    animation: fadeInUp 0.4s ease;
}

.rf5-cat-summary strong {
    color: #1e293b;
    font-size: 1.1rem;
    font-weight: 700;
}

/* Empty State */
.rf5-cat-empty {
    text-align: center;
    padding: 40px 20px;
    color: #64748b;
}

.rf5-cat-empty p {
    margin: 0;
    font-size: 0.95rem;
}

/* Responsive Design */
@media (max-width: 768px) {
    .rf5-cat-tree-header {
        padding: 14px 16px;
    }

    .rf5-cat-title {
        font-size: 1rem;
    }

    .rf5-cat-tree-body {
        padding: 12px 16px;
        max-height: 400px;
    }

    .rf5-cat-item-wrapper {
        padding: 5px 8px;
        gap: 7px;
        min-height: 46px;
    }

    .rf5-cat-media-box {
        width: 36px;
        height: 36px;
        flex: 0 0 36px;
        border-radius: 8px;
    }

    .rf5-cat-media-box--image {
        width: 44px;
        height: 44px;
        flex: 0 0 44px;
    }
}

@media (max-width: 480px) {
    .rf5-cat-actions .btn {
        font-size: 0.8rem;
        padding: 5px 10px;
    }

    .rf5-cat-media-box {
        width: 32px;
        height: 32px;
        flex: 0 0 32px;
        border-radius: 7px;
    }

    .rf5-cat-media-box--image {
        width: 40px;
        height: 40px;
        flex: 0 0 40px;
    }

    .rf5-cat-name {
        font-size: 0.875rem;
    }
}

/* ============================================
   FLATPICKR OVERRIDES - Must be at end to override library CSS
   ============================================ */
.form-control.flatpickr-time,
.rf5-input.flatpickr-time,
input[type="text"].flatpickr-time,
.form-control.flatpickr-date,
.rf5-input.flatpickr-date,
input[type="text"].flatpickr-date,
.form-control.flatpickr-datetime,
.rf5-input.flatpickr-datetime,
input[type="text"].flatpickr-datetime,
.form-control.flatpickr-daterange,
.rf5-input.flatpickr-daterange,
input[type="text"].flatpickr-daterange {
    width: 100% !important;
    padding: 0.5rem 0.75rem !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    min-height: 38px !important;
    height: auto !important;
}

/* ============================================
   INTL TEL INPUT - International phone number styling
   ============================================ */
.iti {
    width: 100%;
    display: block;
    position: relative;
}

.iti__flag-container {
    position: absolute;
    top: 0;
    bottom: 0;
    right: auto;
    left: 0;
    padding: 1px;
}

.iti__selected-flag {
    z-index: 1;
    position: relative;
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0 6px 0 8px;
    cursor: pointer !important;
    pointer-events: auto !important;
}

.iti__arrow {
    margin-left: 4px;
    width: 0;
    height: 0;
    border-left: 3px solid transparent;
    border-right: 3px solid transparent;
    border-top: 4px solid #555;
}

.iti__arrow--up {
    border-top: none;
    border-bottom: 4px solid #555;
}

.iti__selected-dial-code {
    margin-left: 4px;
}

.iti__flag {
    margin-right: 6px;
}

.iti__country-list {
    z-index: 99999 !important;
    list-style: none;
    text-align: left;
    padding: 0;
    margin: 0;
    box-shadow: 0 8px 16px rgba(0,0,0,0.2) !important;
    background-color: white;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    max-height: 200px;
    overflow-y: auto;
    width: 320px !important;
    pointer-events: auto !important;
}

.iti__hide {
    display: none !important;
    pointer-events: none !important;
}

.iti__country-list--dropup {
    bottom: auto !important;
}

.iti__country {
    padding: 8px 12px;
    cursor: pointer;
    outline: none;
}

.iti__country:hover,
.iti__country:focus {
    background-color: #f5f5f5;
}

.iti__country.iti__highlight {
    background-color: #e9ecef;
}

.iti__country.iti__active {
    background-color: #d1ecf1;
}

.iti__divider {
    border-bottom: 1px solid #ccc;
    padding-bottom: 5px;
    margin-bottom: 5px;
}

.iti input.rf5-tel-input,
.iti input.form-control {
    padding-left: 90px;
    width: 100% !important;
}

/* Ensure parent container doesn't clip dropdown */
.rf5-qwrap {
    position: relative;
    overflow: visible !important;
}

.rf5-col {
    overflow: visible !important;
}

/* Show pointer cursor on flag container */
.iti__flag-container:hover {
    cursor: pointer;
}

/* Ensure dropdown container in body is visible */
body > .iti__country-list {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* Mobile responsive for intl-tel-input */
@media (max-width: 768px) {
    .iti__flag-container {
        display: block;
    }
    
    .iti__selected-dial-code {
        display: inline-block;
        font-size: 0.9rem;
    }
    
    .iti input.rf5-tel-input,
    .iti input.form-control {
        padding-left: 90px;
    }
    
    .iti__country-list {
        width: 300px !important;
        max-height: 180px;
    }
}
/* ============================================
   FORM VALIDATION FEEDBACK
   ============================================ */

/* No reserved space: error containers take zero height until a message actually
   needs to show, so the base gap between fields is identical regardless of field
   type. Trade-off: fields below will shift down when an error appears (accepted). */
.rf5-qwrap .invalid-feedback,
.rf5-input + .invalid-feedback,
.rf5-input ~ .invalid-feedback,
.rf5-tel-input + .invalid-feedback,
.rf5-tel-input ~ .invalid-feedback,
.iti + .invalid-feedback,
.iti ~ .invalid-feedback {
    display: none;
}

.rf5-tel-input.is-invalid + .invalid-feedback,
.rf5-tel-input.is-invalid ~ .invalid-feedback,
.rf5-input.is-invalid + .invalid-feedback,
.rf5-input.is-invalid ~ .invalid-feedback,
.iti.is-invalid + .invalid-feedback,
.iti.is-invalid ~ .invalid-feedback {
    display: block;
}

.rf5-qwrap:has(.is-invalid:not(.js-thaddr-subdistrict)) .invalid-feedback {
    display: block;
}

.field-feedback {
    display: none;
    margin: 0.25rem 0 0;
    overflow: hidden;
}

.field-feedback.d-block {
    display: block !important;
}

.rf5-tel-input.is-valid + .valid-feedback,
.rf5-tel-input.is-valid + .valid-feedback,
.rf5-tel-input.is-valid ~ .valid-feedback,
.rf5-input.is-valid + .valid-feedback,
.rf5-input.is-valid ~ .valid-feedback {
    display: block !important;
}

/* For intl-tel-input wrapped fields */
.iti.is-valid + .valid-feedback,
.iti.is-valid ~ .valid-feedback {
    display: block !important;
}
.pdpa-field .pdpa-open{
  text-decoration: underline;
  cursor: pointer;
}
.pdpa-field .pdpa-open:hover{
  opacity: .85;
}

/* ===== Banner frame: fixed size, no crop ===== */
.rf5-banner-wrap{ margin-bottom: 0px; }


/* =========================
   RF5 Banner: FULL (Hard Override)
   ========================= */

/* กรอบต้องไม่มี padding และต้องคุมขนาดชัด */
.rf5-shell.rf5-banner-wrap .rf5-banner-frame.rf5-banner--full{
  padding: 0 !important;
  width: 100% !important;
        min-height: clamp(220px, 30vw, 420px) !important;
    aspect-ratio: auto !important;
    max-height: none !important;
        border-radius: 14px !important;
  overflow: hidden !important;
  position: relative !important;
  display: block !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
        margin-bottom: 18px !important;
}

/* รูป: ต้องยืดให้เต็มกรอบจริง ๆ */
.rf5-shell.rf5-banner-wrap .rf5-banner-frame.rf5-banner--full > img.rf5-banner-image{
  width: 100% !important;
  height: 100% !important;          /* ✅ จุดชนะ: เต็มกรอบ */
  max-width: none !important;
  max-height: none !important;       /* ✅ กันโดน max-height เก่า */
  object-fit: cover !important;      /* ✅ เต็มกรอบ */
    object-position: center !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* ถ้า form_banner ไม่ใช่ URL (เป็น HTML) ให้กินกรอบเหมือนกัน */
.rf5-shell.rf5-banner-wrap .rf5-banner-frame.rf5-banner--full > .rf5-banner-html{
  width: 100% !important;
  height: 100% !important;
}

.rf5-shell.rf5-banner-wrap{
  padding-top: clamp(10px, 2vw, 18px);
  padding-left: clamp(12px, 3vw, 24px);
  padding-right: clamp(12px, 3vw, 24px);
    padding-bottom: clamp(10px, 2vw, 18px);
}

.rf5-shell.rf5-banner-wrap .rf5-banner-content{
    max-width: 1020px;
    margin-left: auto !important;
    margin-right: auto !important;
    width: 100%;
    padding-left: 12px;
    padding-right: 12px;
}

.rf5-shell.rf5-banner-wrap .rf5-banner-body{
  width: 100%;
  max-width: 980px;
  margin-left: auto;
  margin-right: auto;
}

.rf5-shell.rf5-banner-wrap .container-img-bander{
    border-radius: 14px;
}

.rf5-shell.rf5-banner-wrap .rf5-banner-frame.rf5-banner--full > img.rf5-banner-image,
.rf5-shell.rf5-banner-wrap .rf5-banner-frame.rf5-banner--full > .rf5-banner-html{
    border-radius: 14px !important;
}

.rf5-shell.rf5-banner-wrap .rf5-banner-title{
    margin: 0 0 12px;
    width: 100%;
    max-width: 980px;
    margin-left: auto !important;
    margin-right: auto !important;
}

.rf5-shell.rf5-banner-wrap .rf5-banner-meta-list{
    margin-top: 6px !important;
}

.rf5-shell.rf5-banner-wrap .rf5-banner-meta-list .sub-title-event{
    margin-top: 8px !important;
}

.rf5-banner-wrap.rf5-banner-no-image .rf5-banner-meta-list{
    margin-top: .25rem !important;
}

@media (max-width: 991.98px){
    .rf5-shell.rf5-banner-wrap .rf5-banner-content{
        max-width: 900px;
    }
}

@media (max-width: 576px){
    .rf5-shell.rf5-banner-wrap .rf5-banner-frame.rf5-banner--full{
        min-height: 180px !important;
        margin-bottom: 14px !important;
    }
}
/* =========================
   RF5 HTML Header (Hero-lite)
   ========================= */
.rf5-html-header-wrap{
  margin-bottom: 6px;
}

.rf5-html-header{
  background: #fff;
  border-radius: 18px;
  padding: 22px 24px;
  border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 8px 20px rgba(0,0,0,.06);
  position: relative;
  margin-top: 6px;
}

/* accent bar */
.rf5-html-header::before{
  content: "";
  position: absolute;
  left: 0;
  top: 18px;
  bottom: 18px;
    width: 3px;
    background: rgba(0,0,0,.12);
  border-radius: 4px;
}

/* Typography normalize */
.rf5-html-header h1,
.rf5-html-header h2,
.rf5-html-header h3{
  margin: 0 0 10px;
  line-height: 1.25;
}

.rf5-html-header p{
  margin: 0 0 8px;
  opacity: .95;
}

.rf5-html-header ul,
.rf5-html-header ol{
  margin: 0 0 8px 18px;
}

.rf5-html-header a{
  text-decoration: underline;
}

/* =========================
   RF5 Footer Refinement
   ========================= */
.rf5-footer-wrap{
  margin-top: 14px;
  margin-bottom: 0px;
}

.rf5-footer{
  background: linear-gradient(180deg,
    rgba(248,249,250,1),
    rgba(255,255,255,1)
  );
  border: 1px dashed rgba(0,0,0,.12);
  border-radius: 16px;
  padding: 18px 22px;
  color: #495057;
  position: relative;
  margin-bottom: 18px;
}

/* เส้นแบ่งบน เพื่อให้รู้สึกว่า “จบส่วนเนื้อหา” */
.rf5-footer::before{
  content: "";
  position: absolute;
  top: 0;
  left: 16px;
  right: 16px;
  height: 1px;
  background: linear-gradient(
    to right,
    transparent,
    rgba(0,0,0,.15),
    transparent
  );
}

/* Typography */
.rf5-footer h1,
.rf5-footer h2,
.rf5-footer h3{
  margin: 0 0 8px;
  font-size: 1.05rem;
}

.rf5-footer p{
  margin: 0 0 6px;
  font-size: .95rem;
  opacity: .9;
}

.rf5-footer ul,
.rf5-footer ol{
  margin: 0 0 6px 18px;
  font-size: .95rem;
}

.rf5-footer a{
  text-decoration: underline;
  color: inherit;
}

.rf5-footer-fallback{
    text-align: center;
}

.rf5-footer-brand,
.rf5-footer-tagline,
.rf5-footer-contact{
    margin-bottom: 10px !important;
}

.rf5-footer-brand-logo{
    height: 30px;
    margin-top: -5px;
}

.rf5-footer-contact{
    display: flex;
    gap: 14px;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

.rf5-footer-line,
.rf5-footer-phone{
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

/* Responsive: footer ไม่ควรดูเทอะบนมือถือ */
@media (max-width: 576px){
  .rf5-footer{
    padding: 14px 16px;
    font-size: .9rem;
  }
}

/* Password hints: hidden by default, revealed on focus or when any rule is still failing */
.rf5-password-wrap.input-group > .rf5-password-toggle {
  position: absolute;
  /* Bootstrap raises focused/invalid input-group controls to z-index 5. */
  z-index: 6;
  top: 50%;
  right: 0.25rem;
  width: 2.75rem;
  height: calc(100% - 0.5rem);
  margin-left: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #6c757d;
  transform: translateY(-50%);
}

.rf5-password-wrap.input-group > .rf5-password-toggle:hover,
.rf5-password-wrap.input-group > .rf5-password-toggle:focus {
  background: transparent !important;
  color: #495057;
  box-shadow: none;
}

.rf5-password-wrap.input-group {
  position: relative;
  display: block;
}

.rf5-password-wrap .rf5-password-input {
  width: 100%;
  padding-right: 3.25rem;
  border-radius: var(--bs-border-radius, 0.375rem) !important;
}

.rf5-password-hints {
  margin-top: 0 !important; /* collapse spacing when hidden */
  padding-left: 1.2rem;
  font-size: 0.82rem;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.25s ease, opacity 0.2s ease, margin-top 0.2s ease;
}

/* Show while the password field (or anything in the qwrap) is focused */
.rf5-qwrap:focus-within .rf5-password-hints {
  max-height: 200px;
  opacity: 1;
  margin-top: 0.5rem !important;
}

/* Keep visible after blur if any rule is still failing (user already typed something) */
.rf5-qwrap:has(.rf5-password-hints li.is-invalid) .rf5-password-hints {
  max-height: 200px;
  opacity: 1;
  margin-top: 0.5rem !important;
}

.rf5-password-hints li { margin-bottom: 2px; }
.rf5-password-hints li.is-valid { color: #16a34a; }
.rf5-password-hints li.is-invalid { color: #dc3545; }

.rf5-lang-hint {
  color: #9ca3af;
  font-size: .8em;
  display: block;
}

/* ============================================
   Signature pad buttons — match RF5 button system
   ============================================ */
.rf5-sig-save,
.rf5-sig-save:hover,
.rf5-sig-save:focus,
.rf5-sig-save:active {
  background-color: var(--rf5-btn-submit-bg, #dc3545) !important;
  color: #fff !important;
  border: 1px solid var(--rf5-btn-submit-bg, #dc3545) !important;
  border-radius: 6px !important;
  font-weight: 600;
  box-shadow: none !important;
}
.rf5-sig-save:hover {
  filter: brightness(0.95);
}

.rf5-sig-clear,
.rf5-sig-clear:focus,
.rf5-sig-clear:active {
  background-color: transparent !important;
  color: #6b7280 !important;
  border: 1px solid #d1d5db !important;
  border-radius: 6px !important;
  font-weight: 600;
  box-shadow: none !important;
}
.rf5-sig-clear:hover {
  background-color: #f3f4f6 !important;
  color: #374151 !important;
  border-color: #9ca3af !important;
}


/* =====================================================
   RF5 Thailand Address - Select2 (Scoped Override)
   Put this at VERY END of main CSS so it wins
   ===================================================== */
.rf5-thaddr .select2-container { width: 100% !important; }

/* Make selection look identical to .rf5-input / .form-control */
.rf5-thaddr .select2-container--default .select2-selection--single{
  width: 100%;
  padding: 0.5rem 0.75rem;
  font-size: 1rem;
  line-height: 1.5;
  color: #495057;
  background-color: #fff;
  border: 1px solid #ced4da;
  border-radius: 0.25rem;
  box-sizing: border-box;
  min-height: 38px; /* close to bootstrap default */
  height: auto;     /* do NOT force fixed height */
  transition: all 0.3s ease;
}

/* Rendered text aligns like input text */
.rf5-thaddr .select2-container--default .select2-selection--single .select2-selection__rendered{
  padding: 0;               /* we already pad on selection */
  line-height: 1.5;
  color: #495057;
}

/* Placeholder color (when nothing selected) */
.rf5-thaddr .select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: #6c757d;
}

/* Arrow alignment */
.rf5-thaddr .select2-container--default .select2-selection--single .select2-selection__arrow{
  height: 100%;
  right: .5rem;
  top: 0;
}

/* Clear button spacing */
.rf5-thaddr .select2-container--default .select2-selection--single .select2-selection__clear{
  margin-right: 1.75rem;
}

/* Focus/open state: mimic your .rf5-input:focus (including slight lift) */
.rf5-thaddr .select2-container--default.select2-container--open .select2-selection--single,
.rf5-thaddr .select2-container--default .select2-selection--single:focus{
  outline: 0;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
  transform: translateY(-1px);
}

/* Hover state mimic */
.rf5-thaddr .select2-container--default .select2-selection--single:hover{
  border-color: #adb5bd;
}

/* Dropdown should be above everything (you already set overflow visible in .rf5-qwrap/.rf5-col) */
.select2-container--open { z-index: 99999; }

.js-rf5-select2-search + .select2,
.js-rf5-select2-search ~ .select2 { width: 100% !important; }

/* ---- Select2 (searchable selects): match rf5-input in full, not just height/padding ---- */
/* Default Select2 theme hard-codes height:28px, its own border color (#aaa) and
   skips hover/focus entirely — override so countryID/nationality look identical
   to every other .rf5-input, matching the .rf5-thaddr treatment above. */
.js-rf5-select2-search ~ .select2-container--default .select2-selection--single {
    height: auto;
    padding: 0.5rem 2.5rem 0.5rem 0.75rem;
    color: #495057;
    background-color: #fff;
    border: 1px solid #ced4da;
    border-radius: 0.25rem;
    box-sizing: border-box;
    min-height: 38px;
    transition: all 0.3s ease;
}

/* Default theme sets line-height:28px on the text — fix to match rf5-input */
.js-rf5-select2-search ~ .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding: 0;
    color: #495057;
}

/* Placeholder ("Select country" etc.) should read like a native input placeholder,
   not full input text color. */
.js-rf5-select2-search ~ .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #6c757d;
}

/* Hover state mimic (matches .rf5-input:hover) */
.js-rf5-select2-search ~ .select2-container--default .select2-selection--single:hover {
    border-color: #adb5bd;
}

/* Focus/open state mimic (matches .rf5-input:focus, including the slight lift) */
.js-rf5-select2-search ~ .select2-container--default.select2-container--open .select2-selection--single,
.js-rf5-select2-search ~ .select2-container--default .select2-selection--single:focus {
    outline: 0;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.2rem rgba(0,123,255,0.25);
    transform: translateY(-1px);
}

/* Arrow must fill the new taller box */
.js-rf5-select2-search ~ .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 100%;
    top: 0;
}

/* ---- Select2 arrow: match native select chevron (select.rf5-input) ---- */
.js-rf5-select2-search ~ .select2-container--default .select2-selection--single .select2-selection__arrow b,
.rf5-thaddr .select2-container--default .select2-selection--single .select2-selection__arrow b {
    display: none; /* hide default triangle */
}
.js-rf5-select2-search ~ .select2-container--default .select2-selection--single .select2-selection__arrow,
.rf5-thaddr .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 2rem;
    right: 0;
    border: 0;
    outline: 0;
    box-shadow: none;
    background-color: transparent;
    background-image: url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16"><path fill="none" stroke="%23343a40" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2 5l6 6 6-6"/></svg>');
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    background-size: 16px 12px;
    transition: transform 0.15s ease;
}
/* Flip chevron when open (same glyph, rotated) */
.js-rf5-select2-search ~ .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow,
.rf5-thaddr .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow {
    transform: scaleY(-1);
}

/* =====================================================
   Select2 OPEN PANEL — beautified, not the plain default
   theme (flat white box, harsh saturated-blue highlight,
   cramped padding, no elevation). Global (not scoped to
   .js-rf5-select2-search) because dropdownParent is body,
   so the panel renders detached from the trigger element.
   ===================================================== */

/* Panel: soft rounding + a real elevation shadow, like a popover */
.select2-dropdown {
    border: 1px solid #dee2e6;
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1.5rem rgba(15, 23, 42, 0.12), 0 2px 4px rgba(15, 23, 42, 0.06);
    overflow: hidden;
    animation: rf5SelectDropIn 0.15s ease-out;
}

@keyframes rf5SelectDropIn {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Search box inside the dropdown */
.select2-search--dropdown {
    padding: 0.5rem;
}
.select2-search--dropdown .select2-search__field {
    border: 1px solid #ced4da;
    border-radius: 0.375rem;
    padding: 0.4rem 0.6rem;
    font-size: 0.95rem;
    outline: 0;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.select2-search--dropdown .select2-search__field:focus {
    border-color: #80bdff;
    box-shadow: 0 0 0 0.15rem rgba(0,123,255,0.2);
}

/* Results list: breathing room + a quiet scrollbar instead of the browser default */
.select2-results__options {
    padding: 0.25rem;
    scrollbar-width: thin;
    scrollbar-color: #cbd5e1 transparent;
}
.select2-results__options::-webkit-scrollbar {
    width: 8px;
}
.select2-results__options::-webkit-scrollbar-track {
    background: transparent;
}
.select2-results__options::-webkit-scrollbar-thumb {
    background-color: #cbd5e1;
    border-radius: 999px;
}
.select2-results__options::-webkit-scrollbar-thumb:hover {
    background-color: #94a3b8;
}

.select2-results__option {
    padding: 0.55rem 0.75rem;
    border-radius: 0.375rem;
    font-size: 0.95rem;
    color: #374151;
    transition: background-color 0.12s ease, color 0.12s ease;
}

/* Highlighted (hover / keyboard-focused) option — soft tint instead of
   Select2's default harsh saturated blue (#5897fb). */
.select2-results__option--highlighted[aria-selected] {
    background-color: #eef4ff !important;
    color: #0d47a1 !important;
}

/* Selected option — quietly marked (tint + checkmark) instead of loud,
   distinct from the hover tint above. */
.select2-results__option[aria-selected="true"] {
    background-color: #f8fafc;
    color: #1f2937;
    font-weight: 600;
}
.select2-results__option[aria-selected="true"]::after {
    content: "\2713";
    float: right;
    margin-left: 0.5rem;
    color: #16a34a;
    font-weight: 700;
}

/* "Searching…" / "No results found" rows */
.select2-results__message {
    padding: 0.6rem 0.75rem;
    color: #9ca3af;
    font-size: 0.9rem;
}

/* Select2 hides the real <select> and renders its own box, so the
   .is-invalid/.is-valid border-color rules on the select itself never show.
   Mirror that state onto the visible Select2 box here. */
.js-rf5-select2-search.is-invalid ~ .select2-container--default .select2-selection--single {
    border-color: #dc3545;
}
.js-rf5-select2-search.is-valid ~ .select2-container--default .select2-selection--single {
    border-color: #28a745;
}

/* ===== RF5 Loading (10/10 polish) ===== */

/* Spinner: smoother + premium feel */
@keyframes rf5spin {
  0%   { transform: rotate(0deg);   opacity: 0.85; }
  50%  { transform: rotate(180deg); opacity: 1; }
  100% { transform: rotate(360deg); opacity: 0.85; }
}

@keyframes rf5pulse {
  0%, 100% { opacity: 0.9; }
  50%      { opacity: 0.55; }
}

/* Overlay container (fade/scale in) */
.rf5-loading {
  position: fixed;
  inset: 0;
  z-index: 9999;

  display: flex;
  align-items: center;
  justify-content: center;

  opacity: 0;
  transform: scale(1.02);
  transition: opacity 0.22s ease, transform 0.22s ease;
}

.rf5-loading:not([hidden]) {
  opacity: 1;
  transform: scale(1);
}

/* Backdrop (clean blur + dim) */
.rf5-loading__backdrop {
  position: absolute;
  inset: 0;

  background: rgba(0, 0, 0, 0.38);
  backdrop-filter: blur(2px);
}

/* Center content */
.rf5-loading__spinner {
  position: relative;
  z-index: 1;
  text-align: center;

  /* subtle lift */
  transform: translateY(-2px);
}

/* Custom spinner */
.rf5-spinner-custom {
  position: relative;
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
}

.rf5-spinner-ring {
  box-sizing: border-box;
  position: absolute;
  inset: 0;

  border: 4px solid transparent;
    border-top-color: #dc3545;
  border-radius: 50%;

  animation: rf5spin 0.9s cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

.rf5-spinner-ring:nth-child(1) { animation-delay: -0.45s; }
.rf5-spinner-ring:nth-child(2) { animation-delay: -0.30s; }
.rf5-spinner-ring:nth-child(3) { animation-delay: -0.15s; }
.rf5-spinner-ring:nth-child(4) { animation-delay: 0s; }

/* Text: premium uppercase look (still "Processing…") */
.rf5-loading-text {
  margin: 0;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #fff;

  opacity: 0.9;
  animation: rf5pulse 1.4s ease-in-out infinite;
}

/* Keep spinner animated even if user enables reduced motion */
@media (prefers-reduced-motion: reduce) {
  .rf5-spinner-ring {
    animation-duration: 0.9s !important;
    animation-iteration-count: infinite !important;
  }
  .rf5-loading-text {
    animation-duration: 1.4s !important;
    animation-iteration-count: infinite !important;
  }
}

/* Confirm field: stacked (default) — subtle separator */
.rf5-subfield {
  margin-top: .75rem;
  padding-top: .75rem;
  border-top: 1px solid rgba(0,0,0,.08);
}

.rf5-subfield-label {
  font-size: 1rem;       /* was .95rem — normalized to match .form-label */
  opacity: 1;            /* was .9 — full opacity matches main labels */
  margin-bottom: 0.5rem; /* was .35rem — normalized to match .form-label */
}

/* ============================================
   GOAL 1 — Field pairing: email/password + confirm
   Column expands to full width; primary and
   confirm fields sit side-by-side via CSS Grid.
   Confirm is always the last child in .rf5-qwrap.
   ============================================ */

.rf5-col--has-confirm {
  /* Override col-6 inline style to take full row */
  flex: 0 0 calc(100% - 14px) !important;
  max-width: 100% !important;
}

.rf5-col--has-confirm .rf5-qwrap {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* Row 3 is the shared feedback line; collapses to 0 when no message is shown. */
  grid-template-rows: auto auto auto repeat(3, auto);
  /* Match outer rf5-row visual gap: column-gap (16px) + left pad (8px) + right pad (8px) = 32px */
  column-gap: 32px;
  row-gap: 0;
}

/* Every direct child goes to column 1 by default */
.rf5-col--has-confirm .rf5-qwrap > * {
  grid-column: 1;
}

/* Confirm div: column 2, spanning all 6 explicit rows */
.rf5-col--has-confirm .rf5-subfield.rf5-confirm {
  grid-column: 2;
  grid-row: 1 / -1;
  /* Remove stacked-mode separator — no longer needed side-by-side */
  margin-top: 0;
  padding-top: 0;
  border-top: none;
  /* Render label → input → feedback top-aligned */
  display: flex;
  flex-direction: column;
}

/* Normalize confirm label to match main field label so inputs align horizontally */
.rf5-col--has-confirm .rf5-subfield-label {
  font-size: 1rem;
  opacity: 1;
  margin-bottom: .5rem;
}

/* Mobile: revert to stacked layout */
@media (max-width: 767px) {
  .rf5-col--has-confirm .rf5-qwrap {
    display: block;
  }
  .rf5-col--has-confirm .rf5-subfield.rf5-confirm {
    margin-top: .75rem;
    padding-top: .75rem;
    /* border-top: 1px solid rgba(0,0,0,.08); */
  }
}

/* ============================================
   GOAL 3 — Address sub-field text overflow
   Readonly auto-filled inputs can contain long
   Thai placenames; clamp with ellipsis.
   ============================================ */

.rf5-thaddr-wrap .form-control-plaintext[readonly] {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ============================================
   GOAL 4 — Member card header clarity
   Title reads as a section label, not body text.
   Class rf5-member-title added in PHP view.
   JS clones from the same PHP template so
   dynamically added cards inherit this style.
   ============================================ */

.rf5-member-title {
  display: flex;
  align-items: center;
}

.rf5-member-title b {
  font-size: 0.78rem;
  font-weight: 700;
  color: #6b7280;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* ============================================
   RF5 PAGE NAVIGATION - Progress Indicator
   ============================================ */

  .rf5-progress-container {
    background: #ffffff;
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    padding: 20px 24px 16px;
    margin: 0 0 12px;
  }

  .rf5-step-progress {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    margin: 0;
    padding: 0;
    list-style: none;
    position: relative;
  }

  /* Full gray track */
  .rf5-step-progress::before {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    right: 0;
    height: 3px;
    background: #e5e7eb;
    z-index: 0;
  }

  /* Red progress fill — width driven by --rf5-progress set in JS */
  .rf5-step-progress::after {
    content: '';
    position: absolute;
    top: 20px;
    left: 0;
    width: var(--rf5-progress, 0%);
    height: 3px;
    background: #dc3545;
    z-index: 0;
    transition: width 0.4s ease;
  }

  .rf5-step {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    z-index: 1;
  }

  .rf5-step-circle {
    position: relative;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: #ffffff;
    border: 3px solid #e5e7eb;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    color: #9ca3af;
    margin-bottom: 8px;
    transition: background 0.3s ease, border-color 0.3s ease, color 0.3s ease, box-shadow 0.3s ease;
  }

  .rf5-step-label {
    font-size: 13px;
    font-weight: 500;
    color: #6b7280;
    margin-top: 4px;
    max-width: 120px;
    white-space: normal;
    word-break: break-word;
    line-height: 1.3;
    transition: color 0.3s ease, font-weight 0.3s ease;
  }

  /* Active step */
  .rf5-step.active .rf5-step-circle {
    background: #dc3545;
    border-color: #dc3545;
    color: #ffffff;
    box-shadow: 0 0 0 4px rgba(220, 53, 69, 0.15);
  }

  .rf5-step.active .rf5-step-label {
    color: #dc3545;
    font-weight: 600;
  }

  /* Completed step — slate fill + checkmark (neutral palette, doesn't compete with active red) */
  .rf5-step.completed .rf5-step-circle {
    background: #4b5563;
    border-color: #4b5563;
    color: #ffffff;
  }

  .rf5-step.completed .rf5-step-num {
    display: none;
  }

  .rf5-step.completed .rf5-step-circle::after {
    content: '\2713';
    font-size: 17px;
    font-weight: 700;
    line-height: 1;
    color: #ffffff;
  }

  .rf5-step.completed .rf5-step-label {
    color: #374151;
    font-weight: 500;
  }

  /* Final step — dot indicator when upcoming */
  .rf5-step-final .rf5-step-circle::before {
    content: '';
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #d1d5db;
  }

  .rf5-step-final.completed .rf5-step-circle::before {
    display: none;
  }

  .rf5-step-check {
    display: none;
  }

  /* Responsive — tablet */
  @media (max-width: 991px) {
    .rf5-progress-container {
      padding: 18px 20px 14px;
      margin-bottom: 12px;
    }

    .rf5-step-circle {
      width: 36px;
      height: 36px;
      font-size: 14px;
    }

    .rf5-step-label {
      font-size: 12px;
      max-width: 80px;
    }

    .rf5-step-progress::before,
    .rf5-step-progress::after {
      top: 18px;
    }
  }

  /* Responsive — mobile */
  @media (max-width: 767px) {
    .rf5-progress-container {
      padding: 14px 16px 12px;
      margin-bottom: 10px;
    }

    .rf5-step-circle {
      width: 32px;
      height: 32px;
      font-size: 13px;
      border-width: 2px;
    }

    .rf5-step-label {
      font-size: 11px;
      max-width: 72px;
    }

    .rf5-step-progress::before,
    .rf5-step-progress::after {
      top: 16px;
      height: 2px;
    }

    .rf5-step.completed .rf5-step-circle::after {
      font-size: 14px;
    }

    .rf5-step-final .rf5-step-circle::before {
      width: 8px;
      height: 8px;
    }
  }


/* check code pop up */
/* ============================================
   RF5 Code Gate Popup
   ============================================ */

.rf5-swal-popup {
  width: 460px !important;
  max-width: calc(100vw - 24px) !important;
  border-radius: 20px !important;
  padding: 28px 24px 24px !important;
  border: 1px solid rgba(0, 0, 0, 0.08) !important;
  box-shadow: 0 18px 50px rgba(16, 24, 40, 0.18) !important;
  background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%) !important;
}

.rf5-swal-popup--sm {
  width: 360px !important;
  padding: 22px 20px !important;
}

.rf5-codegate {
  text-align: center;
}

.rf5-codegate__badge {
  width: 64px;
  height: 64px;
  margin: 0 auto 14px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
  color: #fff;
  box-shadow: 0 10px 24px rgba(220, 53, 69, 0.22);
}

.rf5-codegate__title {
  margin: 0 0 8px;
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.2;
  color: #1a1a2e;
}

.rf5-codegate__desc {
  margin: 0 0 18px;
  font-size: 0.96rem;
  line-height: 1.55;
  color: #667085;
}

.rf5-codegate__field {
  margin-bottom: 8px;
}

.rf5-codegate__input {
  width: 100%;
  height: 58px;
  border-radius: 14px;
  border: 1px solid #d0d5dd;
  background: #fff;
  padding: 0 16px;
  text-align: center;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #374151;
  transition: all 0.22s ease;
  box-sizing: border-box;
}

.rf5-codegate__input::placeholder {
  color: #98a2b3;
  letter-spacing: 0.08em;
  font-weight: 500;
}

.rf5-codegate__input:hover {
  border-color: #adb5bd;
}

.rf5-codegate__input:focus {
  outline: 0;
  border-color: #80bdff;
  box-shadow: 0 0 0 0.22rem rgba(0, 123, 255, 0.18);
  transform: translateY(-1px);
}

.rf5-codegate__hint {
  font-size: 0.83rem;
  color: #98a2b3;
  margin-top: 6px;
}

.rf5-swal-confirm {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  min-width: 150px;
  height: 46px;
  padding: 0 18px !important;
  border: 0 !important;
  border-radius: 12px !important;
  background: #dc3545 !important;
  color: #fff !important;
  font-size: 0.98rem !important;
  font-weight: 600 !important;
  box-shadow: 0 10px 20px rgba(220, 53, 69, 0.18) !important;
  transition: all 0.22s ease !important;
}

.rf5-swal-confirm:hover {
  background: #c82333 !important;
  transform: translateY(-1px);
}

.rf5-swal-confirm:active {
  transform: translateY(0);
}

.rf5-swal-validation {
  margin-top: 12px !important;
  padding: 10px 12px !important;
  border-radius: 12px !important;
  background: #fff4f4 !important;
  color: #b42318 !important;
  font-size: 0.9rem !important;
  line-height: 1.45 !important;
}

.swal2-icon.swal2-success [class^='swal2-success-line'],
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: #28a745 !important;
  color: #28a745 !important;
}

/* ============================================
     RF5 OTP Modal
     ============================================ */

.rf5-otp-modal {
    position: fixed;
    inset: 0;
    z-index: 99999;
}

.rf5-otp-modal[hidden] {
    display: none !important;
}

.rf5-otp-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(6px);
}

.rf5-otp-shell {
    position: relative;
    min-height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.rf5-otp-panel {
    width: min(100%, 520px);
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overscroll-behavior: contain;
    border-radius: 24px;
    border: 1px solid rgba(0, 0, 0, 0.08);
    box-shadow: 0 24px 64px rgba(16, 24, 40, 0.22);
    background: linear-gradient(180deg, #ffffff 0%, #fafafa 100%);
    padding: 20px 26px 24px;
    position: relative;
}

.rf5-otp-header {
    text-align: center;
    margin-bottom: 22px;
}

.rf5-otp-badge {
    width: 68px;
    height: 68px;
    margin: 0 auto 14px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 30px;
    background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
    color: #fff;
    box-shadow: 0 12px 28px rgba(220, 53, 69, 0.22);
}

.rf5-otp-title {
    margin: 0 0 8px;
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.2;
    color: #1a1a2e;
}

.rf5-otp-desc {
    margin: 0;
    font-size: 0.96rem;
    line-height: 1.6;
    color: #667085;
}

.rf5-otp-options {
    display: grid;
    gap: 10px;
    margin-bottom: 18px;
}

.rf5-otp-channel {
    display: block;
    cursor: pointer;
}

.rf5-otp-channel__control {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.rf5-otp-channel__card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    border-radius: 16px;
    border: 1px solid #d0d5dd;
    background: #fff;
    padding: 14px 16px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease, background 0.22s ease;
}

.rf5-otp-channel__title {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: #1a1a2e;
}

.rf5-otp-channel__value {
    font-size: 0.92rem;
    color: #667085;
    word-break: break-word;
}

.rf5-otp-channel:hover .rf5-otp-channel__card {
    border-color: #b7bfd2;
    transform: translateY(-1px);
}

.rf5-otp-channel__control:checked + .rf5-otp-channel__card {
    border-color: #dc3545;
    background: rgba(220, 53, 69, 0.04);
    box-shadow: 0 10px 22px rgba(220, 53, 69, 0.12);
}

.rf5-otp-sendrow {
    margin-bottom: 18px;
}

.rf5-otp-status {
    min-height: 20px;
    margin: 10px 0 0;
    font-size: 0.9rem;
    color: #667085;
    text-align: center;
}

.rf5-otp-verifying {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin: 0 0 18px;
    color: #475467;
    font-size: 0.92rem;
}

.rf5-otp-verifying[hidden] {
    display: none !important;
}

.rf5-otp-entry {
    margin-bottom: 12px;
}

.rf5-otp-entry[hidden] {
    display: none !important;
}

.rf5-otp-label {
    display: block;
    margin-bottom: 10px;
    font-size: 0.92rem;
    font-weight: 600;
    color: #344054;
}

.rf5-otp-code {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 8px;
    max-width: 580px;
}

.rf5-otp-digit {
    width: 100%;
    height: 50px;
    border-radius: 14px;
    border: 1px solid #d0d5dd;
    background: #fff;
    text-align: center;
    font-size: 1rem;
    font-weight: 700;
    color: #374151;
    text-transform: uppercase;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.rf5-otp-digit:hover {
    border-color: #adb5bd;
}

.rf5-otp-digit:focus {
    outline: 0;
    border-color: #80bdff;
    box-shadow: 0 0 0 0.22rem rgba(0, 123, 255, 0.18);
    transform: translateY(-1px);
}

.rf5-otp-entrymeta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: 8px;
}

.rf5-otp-timer {
    font-size: 0.9rem;
    color: #667085;
}

.rf5-otp-link {
    border: 0;
    background: transparent;
    padding: 0;
    font-size: 0.92rem;
    font-weight: 600;
    color: #dc3545;
}

.rf5-otp-link:disabled {
    color: #98a2b3;
}

.rf5-otp-error {
    margin-bottom: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    background: #fff4f4;
    border: 1px solid #f4c7c3;
    color: #b42318;
    font-size: 0.88rem;
    line-height: 1.4;
}

.rf5-otp-error[hidden] {
    display: none !important;
}

.rf5-otp-actions {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    position: sticky;
    bottom: 0;
    z-index: 3;
    margin-top: 10px;
    padding-top: 10px;
    background: linear-gradient(180deg, rgba(252, 252, 255, 0) 0%, rgba(252, 252, 255, 0.88) 20%, rgba(252, 252, 255, 1) 100%);
}

.rf5-otp-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    border-radius: 14px;
    padding: 0 18px;
    border: 1px solid transparent;
    font-size: 0.98rem;
    font-weight: 600;
    transition: transform 0.22s ease, box-shadow 0.22s ease, background 0.22s ease, border-color 0.22s ease;
}

.rf5-otp-btn:disabled,
.rf5-otp-link:disabled {
    cursor: not-allowed;
}

.rf5-otp-btn--block {
    width: 100%;
}

.rf5-otp-btn--primary {
    background: #dc3545;
    color: #fff;
    box-shadow: 0 10px 20px rgba(220, 53, 69, 0.18);
}

.rf5-otp-btn--primary:hover:not(:disabled) {
    background: #c82333;
    transform: translateY(-1px);
}

.rf5-otp-btn--primary:disabled {
    background: #b8bed0;
    box-shadow: none;
}

.rf5-otp-btn--secondary {
    border-color: #d0d5dd;
    background: #fff;
    color: #344054;
}

.rf5-otp-btn--secondary:hover:not(:disabled) {
    border-color: #b7bfd2;
    background: #f8fafc;
}

@media (max-width: 576px) {
  .rf5-swal-popup {
    width: calc(100vw - 20px) !important;
    padding: 24px 16px 18px !important;
    border-radius: 18px !important;
  }

  .rf5-codegate__badge {
    width: 56px;
    height: 56px;
    font-size: 24px;
    border-radius: 16px;
  }

  .rf5-codegate__title {
    font-size: 1.25rem;
  }

  .rf5-codegate__input {
    height: 54px;
    font-size: 1.08rem;
    letter-spacing: 0.12em;
  }

  .rf5-swal-confirm {
    width: 100%;
  }

    .rf5-otp-shell {
        padding: 12px;
        align-items: flex-end;
    }

    .rf5-otp-panel {
        width: 100%;
        max-height: calc(100vh - 16px);
        padding: 24px 18px 18px;
        border-radius: 22px 22px 18px 18px;
    }

    .rf5-otp-badge {
        width: 60px;
        height: 60px;
        font-size: 26px;
        border-radius: 18px;
    }

    .rf5-otp-title {
        font-size: 1.32rem;
    }

    .rf5-otp-code {
        gap: 6px;
    }

    .rf5-otp-digit {
        height: 44px;
        font-size: 0.92rem;
        border-radius: 12px;
    }

    .rf5-otp-entrymeta,
    .rf5-otp-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .rf5-otp-actions {
        gap: 8px;
        padding-top: 8px;
    }

    .rf5-otp-btn {
        width: 100%;
    }
}

/* captcha style */
#rf5-hcaptcha-container {
    display: flex;
    justify-content: center;
    padding: 10px 0;
}

#rf5-captcha-error {
    margin-top: 0.25rem;
    text-align: center;
}

/* PDPA Modal */
.pdpa-modal-content {
    border: none;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.pdpa-modal-header {
    background: linear-gradient(135deg, #eef6ff 0%, #e3f0fb 100%);
    border-bottom: 1px solid #c8dff5;
    padding: 1.1rem 1.4rem;
    gap: 0.6rem;
    align-items: center;
}

.pdpa-modal-header-icon {
    color: #1976d2;
    flex-shrink: 0;
    display: flex;
    align-items: center;
}

.pdpa-modal-header .modal-title {
    font-weight: 600;
    font-size: 1rem;
    color: #1a3a5c;
    flex: 1;
}

.pdpa-modal-body-wrap {
    padding: 1.5rem;
    background: #fff;
}

.pdpa-modal-body {
    font-size: 0.9rem;
    line-height: 1.75;
    color: #333;
}

.pdpa-modal-body p { margin-bottom: 0.75rem; }
.pdpa-modal-body ul,
.pdpa-modal-body ol { padding-left: 1.4rem; margin-bottom: 0.75rem; }
.pdpa-modal-body a { color: #1976d2; }
.pdpa-modal-body img { max-width: 100%; height: auto; }

.pdpa-modal-footer {
    flex-direction: column;
    align-items: stretch;
    gap: 0.6rem;
    padding: 0.9rem 1.4rem;
    background: #f5f8fc;
    border-top: 1px solid #dce8f5;
}

.pdpa-footer-notice {
    font-size: 0.78rem;
    color: #6b7a8d;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 0.35rem;
}

.pdpa-footer-actions {
    display: flex;
    gap: 0.6rem;
    justify-content: flex-end;
}

.pdpa-footer-actions .pdpa-decline {
    min-width: 90px;
}

.pdpa-footer-actions .pdpa-accept {
    min-width: 110px;
    font-weight: 600;
}

 /* home */
/* secondary button (ใช้กับ complete page) */
.rf5-btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;

    padding: 10px 18px;
    border-radius: 999px;

    font-weight: 500;
    font-size: 14px;

    background: #f1f5f9;
    color: #334155;

    border: 1px solid #e2e8f0;
    box-shadow: none;

    transition: all 0.2s ease;
}

/* icon */
.rf5-btn-icon {
    display: flex;
    align-items: center;
    transition: transform 0.2s ease;
}

/* hover */
.rf5-btn-secondary:hover {
    background: #e2e8f0;
    color: #1e293b;
    text-decoration: none;
}

/* subtle movement */
.rf5-btn-secondary:hover .rf5-btn-icon {
    transform: translateX(-2px);
}

/* active */
.rf5-btn-secondary:active {
    transform: translateY(1px);
}

/* accessibility (pentest + UX) */
.rf5-btn-secondary:focus-visible {
    outline: 2px solid #94a3b8;
    outline-offset: 2px;
}

/* Hide Select2 clear X button */
.select2-container--default .select2-selection--single .select2-selection__clear {
    display: none !important;
}

/* ============================================
   UX IMPROVEMENTS — Page 2 polish
   ============================================ */

/* Item 1: Touch targets (WCAG 2.5.5) — min 44px for radio/checkbox rows */
.rf5-qwrap .form-check,
.rf5-radio-group .form-check,
.rf5-checkbox-group .form-check {
    min-height: 44px;
    display: flex;
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
}

/* Desktop pointers (mouse) don't need the 44px touch-target minimum, and at
   that height radio/checkbox lists read as too spaced out. Tablet/mobile
   keep the full WCAG 2.5.5 target from the base rule above. */
@media (min-width: 768px) {
    .rf5-qwrap .form-check,
    .rf5-radio-group .form-check,
    .rf5-checkbox-group .form-check {
        min-height: 32px;
    }
}

/* Item 3: Mobile full-width navigation buttons (≤575px) */
@media (max-width: 575px) {
    .rf5-prev,
    .rf5-next,
    .rf5-submit {
        width: 100% !important;
    }
}

/* Item 5: Radio/checkbox groups — flex column so gap works across browsers */
.rf5-radio-group,
.rf5-checkbox-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

/* two_column_options: true → lay first-level radio/checkbox choices out in
   2 columns instead of a single stacked column. Opt-in per field
   (FormFieldRenderer only ever adds this class for top-level radio/checkbox
   fields — multi-level sub-questions never receive it). */
.rf5-radio-group.rf5-two-col,
.rf5-checkbox-group.rf5-two-col {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
    row-gap: 0.25rem;
}
.rf5-radio-group.rf5-two-col .rf5-otherwrap,
.rf5-checkbox-group.rf5-two-col .rf5-otherwrap {
    grid-column: 1 / -1;
}
@media (max-width: 575.98px) {
    .rf5-radio-group.rf5-two-col,
    .rf5-checkbox-group.rf5-two-col {
        grid-template-columns: 1fr;
    }
}

/* ── Phase-3 CSP utility classes ──────────────────────────────────────────── */

/* Initial-hide class: no !important so JS el.style.display='' can override it.
   CSSOM init (rf5-csp-init.js) converts these to inline style for JS compat. */
.rf5-init-hidden { display: none; }

/* White card variant used inside group/member/captcha sections */
.rf5-card-white { background: #fff; }

/* Admin staff-create mode warning card (replaces inline border-left) */
.rf5-admin-warning-card { border-left: 4px solid #ffc107; }

/* AdminQuotaFullV5 layout (replaces inline max-width/margin/text-align) */
.rf5-quota-full-card    { max-width: 520px; margin: 3rem auto; text-align: center; }
.rf5-quota-icon         { font-size: 3.5rem; color: #ffc107; margin-bottom: 1rem; }
.rf5-quota-progress     { height: 10px; border-radius: 6px; }
.rf5-quota-progress-bar { border-radius: 6px; }

/* RegisterCompleteV5 layout (replaces inline flex/border) */
.rf5-col-full      { flex: 1 1 100%; }
.rf5-alert-bordered { border: 1px solid #eee; }
/* -- Phase-4 CSP utility classes -------------------------------------------- */

/* Column layout: replaces inline rf5_col_style() output (FormFieldRenderer) */
.rf5-col-1  { flex: 0 0 calc(8.333333% - 14px);  max-width: 8.333333%; }
.rf5-col-2  { flex: 0 0 calc(16.666667% - 14px); max-width: 16.666667%; }
.rf5-col-3  { flex: 0 0 calc(25% - 14px);         max-width: 25%; }
.rf5-col-4  { flex: 0 0 calc(33.333333% - 14px); max-width: 33.333333%; }
.rf5-col-5  { flex: 0 0 calc(41.666667% - 14px); max-width: 41.666667%; }
.rf5-col-6  { flex: 0 0 calc(50% - 14px);         max-width: 50%; }
.rf5-col-7  { flex: 0 0 calc(58.333333% - 14px); max-width: 58.333333%; }
.rf5-col-8  { flex: 0 0 calc(66.666667% - 14px); max-width: 66.666667%; }
.rf5-col-9  { flex: 0 0 calc(75% - 14px);         max-width: 75%; }
.rf5-col-10 { flex: 0 0 calc(83.333333% - 14px); max-width: 83.333333%; }
.rf5-col-11 { flex: 0 0 calc(91.666667% - 14px); max-width: 91.666667%; }
.rf5-col-12 { flex: 0 0 calc(100% - 14px);        max-width: 100%; }

/* Thailand address wrapper top spacing */
.rf5-thaddr-spaced { margin-top: .75rem; }

/* Signature pad widgets */
.rf5-signature-pad-full        { width: 100%; }
.rf5-signature-canvas          { border: 1px solid #ccc; border-radius: 4px; width: 100%; height: 200px; display: block; }
.rf5-signature-canvas-bordered { border: 1px solid #ccc; border-radius: 4px; }
.rf5-signature-preview-img     { max-width: 100%; height: auto; border: 1px solid #eee; border-radius: 4px; }

/* -------------------------------------------------------
 * rf5-complete-html: DB-driven email HTML in browser
 * PHP strips inline style= for CSP; these rules restore
 * safe sizing so images/tables don't render at raw natural size.
 * ------------------------------------------------------- */
.rf5-complete-html {
    width: 100%;
    max-width: 760px;
    margin: 0 auto;
}

/* Email tables: cap width so 600px email tables don't overflow mobile */
.rf5-complete-html table {
    max-width: 100%;
}

.rf5-complete-html td,
.rf5-complete-html th {
    word-break: break-word;
}

/* Baseline: all images stay within container, auto height */
.rf5-complete-html img {
    max-width: 100%;
    height: auto;
    display: inline-block;
}

/* QR code — small fixed cap (96–140px range, use 120px) */
.rf5-complete-html img[id="imageQrCode"],
.rf5-complete-html img[src*="url-image-qrcode"] {
    width: 120px;
    max-width: 120px;
}

/* Barcode */
.rf5-complete-html img[id="imageBarcode"],
.rf5-complete-html img[src*="url-image-barcode"] {
    width: 200px;
    max-width: 220px;
}

/* Profile photo */
.rf5-complete-html img[id="imageProfile"] {
    max-width: 180px;
}

/* Signature */
.rf5-complete-html img[id="imageSignature"] {
    max-width: 200px;
}

/* Event banner — full-width within container */
.rf5-complete-html img[id="imageBanner"],
.rf5-complete-html img[id="bannerevent"] {
    width: 100%;
    max-width: 100%;
}

/* Froala template-editor icons (logos, check marks) — only inline style="width:Xpx", no HTML width attr */
.rf5-complete-html img[src*="manage/templatemail/image/"] {
    max-width: 80px;
    height: auto;
}

/* -------------------------------------------------------
 * rf5-closed-* — Shared closed/ended/coming-soon state card
 * Used by RegisterFormEndedV5 and RegisterFormUnavailableV5 fallback.
 * ------------------------------------------------------- */
.rf5-closed-card {
    max-width: 500px;
    margin: 1.5rem auto;
    padding: 56px 44px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.rf5-closed-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #eef2f7;
    color: #475569;
    margin-bottom: 24px;
    flex-shrink: 0;
}

.rf5-closed-icon--soon {
    background: #fffbeb;
    color: #d97706;
}

.rf5-closed-title {
    font-size: 1.4rem;
    font-weight: 700;
    color: #1e293b;
    line-height: 1.3;
    margin-bottom: 10px;
}

.rf5-closed-subtitle {
    font-size: 0.95rem;
    color: #64748b;
    line-height: 1.55;
    max-width: 340px;
    margin-bottom: 0;
}

.rf5-closed-meta {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    margin-top: 24px;
    padding: 8px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 999px;
    max-width: 100%;
    word-break: break-word;
}

.rf5-closed-meta-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: #94a3b8;
    flex-shrink: 0;
}

.rf5-closed-meta-value {
    font-size: 0.88rem;
    font-weight: 500;
    color: #475569;
}

.rf5-closed-event-info {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 320px;
    margin-top: 24px;
    padding: 16px 20px;
    background: #f8fafc;
    border: 1px solid #e2e8f0;
    border-radius: 10px;
    text-align: left;
    align-self: center;
}

.rf5-closed-event-row {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 0.88rem;
    line-height: 1.4;
    color: #475569;
}

.rf5-closed-event-row svg {
    flex-shrink: 0;
    color: #94a3b8;
}

.rf5-closed-reason {
    display: inline-block;
    margin-top: 24px;
    padding: 7px 20px;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 999px;
    font-size: 0.84rem;
    color: #64748b;
    max-width: 100%;
    word-break: break-word;
    text-align: center;
}

/* Closed card — mobile */
@media (max-width: 480px) {
    .rf5-closed-card {
        margin: 1rem auto;
        padding: 40px 28px;
    }

    .rf5-closed-event-info {
        max-width: 100%;
    }
}

/* ===== Dynamic Static Text blocks (rich text + images from form builder) ===== */
.rf5-static-text-content img {
    max-width: 100%;
    height: auto;
}

/* Froala image alignment classes */
.rf5-static-text-content img.fr-dib {
    display: block;
    margin: 5px auto;
    float: none;
    vertical-align: top;
}

.rf5-static-text-content img.fr-dii {
    display: inline-block;
    float: none;
    vertical-align: bottom;
    max-width: calc(100% - 10px);
}

.rf5-static-text-content img.fr-fil {
    float: left;
    margin: 5px 5px 5px 0;
}

.rf5-static-text-content img.fr-fir {
    float: right;
    margin: 5px 0 5px 5px;
}

.rf5-static-text-content p:last-child {
    margin-bottom: 0;
}