/* ==========================================================================
   LinkQu Registration Portal — Modern Clean Theme
   --------------------------------------------------------------------------
   Lapisan tampilan (CSS-only). File ini HANYA mengubah tampilan:
   tidak ada perubahan markup, id, name, atau perilaku JavaScript.
   Merah brand LinkQu (#E60000) tetap menjadi warna utama.
   Dimuat paling akhir di <head> agar menimpa gaya lama.
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
  --lq-red: #E60000;          /* merah brand */
  --lq-red-600: #C80000;
  --lq-red-700: #A8001A;
  --lq-red-50: #FFF1F1;
  --lq-red-100: #FFE0E0;
  --lq-ring: rgba(230, 0, 0, .14);
  --lq-grad: linear-gradient(110deg, #B6093A 0%, #CA173A 45%, #E63538 100%);

  --lq-ink: #101828;
  --lq-ink-2: #344054;
  --lq-muted: #667085;
  --lq-subtle: #98A2B3;
  --lq-line: #E4E7EC;
  --lq-line-2: #F0F2F5;
  --lq-bg: #F7F8FA;
  --lq-card: #FFFFFF;

  --lq-radius-sm: 10px;
  --lq-radius: 14px;
  --lq-radius-lg: 20px;
  --lq-shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --lq-shadow: 0 1px 2px rgba(16, 24, 40, .04), 0 8px 24px rgba(16, 24, 40, .06);
  --lq-shadow-lg: 0 2px 4px rgba(16, 24, 40, .04), 0 18px 40px rgba(16, 24, 40, .10);
  --lq-font: 'Plus Jakarta Sans', 'Lexend', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --lq-sidebar: 264px;
}

/* --------------------------------------------------------------------------
   1. Dasar & tipografi
   -------------------------------------------------------------------------- */
html body {
  font-family: var(--lq-font);
  color: var(--lq-ink-2);
  background-color: var(--lq-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

body h1, body h2, body h3, body h4, body h5, body h6,
body p, body label, body small, body span:not(.fa):not([class^="pg-"]):not([class*=" pg-"]):not([class^="lnr"]),
body a, body li, body td, body th,
body input, body select, body textarea, body button, body .btn,
body .font-montserrat, body .custom-text, body .custom-span,
body .font12-lexend, body .font14-lexend, body .font14-lexend-s,
body .font16-lexend, body .font20-lexend, body .font22-lexend, body .font24-lexend {
  font-family: var(--lq-font);
}

body h1, body h2, body h3, body h4, body h5, body h6 {
  color: var(--lq-ink);
  font-weight: 700;
  letter-spacing: -0.02em;
}

body p { color: var(--lq-ink-2); }

body a { color: var(--lq-red); transition: color .15s ease; }
body a:hover, body a:focus { color: var(--lq-red-700); }

body .text-danger { color: var(--lq-red) !important; }
body .bg-danger { background-color: var(--lq-red) !important; }
body .hint-text { color: var(--lq-subtle) !important; opacity: 1; }
body .text-muted { color: var(--lq-muted) !important; }

body ::selection { background: var(--lq-red-100); color: var(--lq-ink); }

/* Judul halaman langkah (Kelengkapan Data ...) */
body .custom-text,
body .content-title,
body .content-title h3,
body .content-title h2 {
  color: var(--lq-ink) !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  line-height: 1.2 !important;
}

/* --------------------------------------------------------------------------
   2. Layout dashboard (sidebar + header + konten)
   -------------------------------------------------------------------------- */
body.activation-body,
body.body-form-bisnis {
  background:
    radial-gradient(1200px 380px at 70% -120px, rgba(230, 0, 0, .06), transparent 70%),
    var(--lq-bg) !important;
}

body .sidebar {
  width: var(--lq-sidebar);
  padding: 28px 20px;
  background: #fff !important;
  border-right: 1px solid var(--lq-line);
  box-shadow: none;
  z-index: 200;
}
body .sidebar img { object-fit: contain; }
body .sidebar::after {
  content: "Portal Registrasi";
  margin-top: 14px;
  padding: 6px 12px;
  font: 600 11px/1 var(--lq-font);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lq-red);
  background: var(--lq-red-50);
  border-radius: 999px;
}
body .sidebar .fa-times { color: var(--lq-ink-2); font-size: 24px; cursor: pointer; }

body .activation-content-wrapper,
body .content { padding-left: var(--lq-sidebar); }

body .activation-header-content,
body.body-form-bisnis header {
  width: calc(100vw - var(--lq-sidebar));
  height: 64px;
  min-height: 64px;
  background: var(--lq-grad);
  box-shadow: 0 6px 20px rgba(182, 9, 58, .18);
}
body.body-form-bisnis header { width: 100%; }

body .activation-footer-content,
body.body-form-bisnis footer {
  width: calc(100vw - var(--lq-sidebar));
  height: auto;
  min-height: 64px;
}
body.body-form-bisnis footer { width: 100%; }

body .burger { color: #fff; font-size: 22px; }

/* Kartu konten utama */
body .main-content,
body .form-wrapper:not(.no-bg),
body .top-content,
body .card {
  background: var(--lq-card);
  border: 1px solid var(--lq-line-2) !important;
  border-radius: var(--lq-radius-lg) !important;
  box-shadow: var(--lq-shadow) !important;
}
body .main-content-no-shadow { border-radius: var(--lq-radius-lg); }
body .card-shadow { box-shadow: var(--lq-shadow) !important; }
body .form-wrapper.no-bg { background: transparent !important; border: 0 !important; box-shadow: none !important; }

body .top-content { flex-shrink: 0; }
body .top-content > p { color: var(--lq-ink-2); line-height: 1.6; }

/* Kotak "Datamu aman di LinkQu" */
body .protection-section,
body .bg-light-blue {
  background: linear-gradient(90deg, #ECFDF7, #F0FBFA) !important;
  border: 1px solid #CDEFE6;
  border-radius: var(--lq-radius) !important;
}
body .protection-section { padding-top: 6px; padding-bottom: 6px; }
body .protection-section b { color: #05603A; letter-spacing: .02em; }
body .protection-section small { color: #3B6E5E; }

/* --------------------------------------------------------------------------
   3. Stepper / progress
   -------------------------------------------------------------------------- */
/* Personal: lingkaran .progress di dalam .progress-wrapper */
body .progress-wrapper > .progress,
body .point {
  width: 40px;
  height: 40px;
  font-size: 15px;
  font-weight: 700;
  color: var(--lq-muted);
  background: #fff;
  border: 2px solid var(--lq-line);
  box-shadow: 0 0 0 5px var(--lq-bg);
  transition: all .2s ease;
}
body .progress-wrapper > .progress.active-progress,
body .point.point-active {
  color: #fff !important;
  background: var(--lq-red) !important;
  border-color: var(--lq-red);
  box-shadow: 0 0 0 5px var(--lq-red-100), 0 6px 14px rgba(230, 0, 0, .25);
}
body .progress-wrapper span,
body .progress-point span,
body .custom-span {
  margin-top: 10px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--lq-muted);
}

body .progress-wrapper > .progress span,
body .point span { margin: 0 !important; color: inherit !important; font-size: inherit !important; font-weight: inherit; }

/* garis penghubung */
body .bar { height: 3px; border-radius: 999px; }
body .bar-left, body .bar-right { top: 19px; }
body .bar-grey { background-color: var(--lq-line); }
body .bar.bg-danger, body .bar.active-progress { background-color: var(--lq-red) !important; }

/* Bisnis: track .progress berisi .progress-bar */
body .form-progress > .progress {
  top: 19px;
  height: 3px;
  background: var(--lq-line);
  border-radius: 999px;
  overflow: hidden;
}
body .form-progress > .progress .progress-bar { background: var(--lq-red) !important; }

/* --------------------------------------------------------------------------
   4. Form
   -------------------------------------------------------------------------- */
body .form-group-default {
  background: #fff;
  border: 1px solid var(--lq-line);
  border-radius: 12px !important;
  padding: 10px 14px 6px;
  margin-bottom: 14px;
  box-shadow: var(--lq-shadow-sm);
  transition: border-color .15s ease, box-shadow .15s ease;
}
body .form-group-default:hover { border-color: #D0D5DD; }
body .form-group-default.focused,
body .form-group-default:focus-within {
  border-color: var(--lq-red) !important;
  background: #fff !important;
  box-shadow: 0 0 0 4px var(--lq-ring) !important;
}
body .form-group-default label,
body .form-group-default .label {
  color: var(--lq-ink-2) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-transform: none;
  letter-spacing: 0;
  opacity: 1 !important;
}
body .form-group-default.focused label { color: var(--lq-red) !important; }
body .form-group-default .form-control {
  font-size: 14px;
  color: var(--lq-ink);
  min-height: 26px;
}
body .form-group-default.has-error,
body .form-group-default.has-error.focused {
  border-color: #F04438 !important;
  background: #FFFBFA !important;
}
body .form-group-default.disabled { background: var(--lq-line-2) !important; }

body .form-control {
  font-family: var(--lq-font);
  color: var(--lq-ink);
  border-color: var(--lq-line);
  border-radius: 12px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
body .form-group-default .form-control { border: 0; border-radius: 0; box-shadow: none !important; padding-left: 0; background: transparent; }
body .form-control:not(.form-group-default .form-control):focus {
  border-color: var(--lq-red);
  box-shadow: 0 0 0 4px var(--lq-ring);
}
body .form-control::placeholder { color: var(--lq-subtle); opacity: 1; }

/* input mandiri (halaman daftar) */
body .inputan {
  height: 46px;
  border: 1px solid var(--lq-line);
  border-radius: 12px;
  padding: 10px 14px;
  font-size: 14px;
  box-shadow: var(--lq-shadow-sm);
}
body .inputan:focus { border-color: var(--lq-red); box-shadow: 0 0 0 4px var(--lq-ring); }

body .required-sign { color: var(--lq-red); font-size: 14px; top: 0; }
body label.error,
body .error:not(input):not(.form-group) {
  color: #D92D20 !important;
  font-size: 12px;
  font-weight: 500;
}

/* select2 */
body .select2-container--default .select2-selection--single,
body .select2-container--default .select2-selection--multiple {
  border-color: var(--lq-line);
  border-radius: 10px;
}
body .form-group-default .select2-container--default .select2-selection--single { border: 0; }
body .select2-dropdown {
  border: 1px solid var(--lq-line) !important;
  border-radius: 12px !important;
  box-shadow: var(--lq-shadow-lg);
  overflow: hidden;
}
body .select2-container--default .select2-results__option--highlighted[aria-selected],
body .select2-container--default .select2-results__option--highlighted {
  background-color: var(--lq-red-50) !important;
  color: var(--lq-red-700) !important;
}
body .select2-container--default .select2-search--dropdown .select2-search__field {
  border-radius: 8px;
  border-color: var(--lq-line);
}

/* checkbox & radio */
body input[type="checkbox"], body input[type="radio"] { accent-color: var(--lq-red); }

/* --------------------------------------------------------------------------
   5. Tombol
   -------------------------------------------------------------------------- */
body .btn {
  font-family: var(--lq-font);
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: 12px !important;
  transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .1s ease, color .15s ease;
}
body .btn:active { transform: translateY(1px); }

body .btn-danger,
body .btn-default,
body .btn-custom,
body .complete-btn,
body .c-button {
  color: #fff !important;
  background: var(--lq-red) !important;
  border: 1px solid var(--lq-red) !important;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 6px 16px rgba(230, 0, 0, .22);
}
body .btn-danger:hover, body .btn-danger:focus,
body .btn-default:hover, body .btn-default:focus,
body .btn-custom:hover, body .btn-custom:focus,
body .complete-btn:hover, body .c-button:hover {
  color: #fff !important;
  background: var(--lq-red-600) !important;
  border-color: var(--lq-red-600) !important;
  box-shadow: 0 0 0 4px var(--lq-ring), 0 8px 20px rgba(230, 0, 0, .25);
  transform: none;
}
body .btn-danger.btn-block,
body .btn-default.btn-block { min-height: 48px; font-size: 14px; }

/* tombol sekunder (outline merah) */
body .btn-primary,
body .btn-primary:focus {
  color: var(--lq-red) !important;
  background: #fff !important;
  border: 1.5px solid var(--lq-red) !important;
  box-shadow: none;
}
body .btn-primary:hover {
  color: var(--lq-red-700) !important;
  background: var(--lq-red-50) !important;
  border-color: var(--lq-red) !important;
  transform: none;
}
body .btn-primary.active, body .btn-primary:active {
  color: #fff !important;
  background: var(--lq-red) !important;
  border-color: var(--lq-red) !important;
}

body .btn-link { color: var(--lq-ink-2); font-weight: 600; text-decoration: none; }
body .btn-link:hover { color: var(--lq-red); text-decoration: none; }

body .btn:disabled, body .btn.disabled, body .btn[disabled] {
  opacity: 1 !important;
  color: #fff !important;
  background: #F4A3A3 !important;
  border-color: #F4A3A3 !important;
  box-shadow: none !important;
  cursor: not-allowed;
}

/* Pilihan Personal / Bisnis */
body .personal-card-wrapper,
body .bisnis-card-wrapper {
  width: 200px;
  border-radius: var(--lq-radius-lg);
  border: 1px solid var(--lq-line-2);
  box-shadow: var(--lq-shadow);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
body .personal-card-wrapper { background: linear-gradient(180deg, #FFF5F5, #fff); }
body .bisnis-card-wrapper { background: linear-gradient(180deg, #F3F7FF, #fff); }
body .personal-card-wrapper:hover,
body .bisnis-card-wrapper:hover {
  transform: translateY(-4px);
  box-shadow: var(--lq-shadow-lg);
}
body .personal-card-wrapper:hover { border-color: var(--lq-red-100); }
body .personal-logo-wrapper { background-color: var(--lq-red); }
body .selection-button {
  border: 1px solid var(--lq-line);
  border-radius: 999px;
  padding: 8px 56px;
  font-weight: 600;
  color: var(--lq-ink-2);
  background: #fff;
  box-shadow: var(--lq-shadow-sm);
  transition: all .15s ease;
}
body .selection-button:hover {
  color: #fff;
  background: var(--lq-red);
  border-color: var(--lq-red);
}

/* --------------------------------------------------------------------------
   6. Daftar dokumen / PIC (card-1)
   -------------------------------------------------------------------------- */
body .card.card-1 {
  border-radius: var(--lq-radius) !important;
  box-shadow: var(--lq-shadow-sm) !important;
  margin-bottom: 12px;
  transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease;
}
body .card.card-1:hover {
  transform: translateY(-2px);
  border-color: var(--lq-red-100) !important;
  box-shadow: var(--lq-shadow) !important;
}
body .card.card-1 { position: relative; }
body .card.card-1.box-pointer { padding-right: 44px !important; }
body .card.card-1 > a { color: var(--lq-ink); text-decoration: none; }
body .card.card-1.box-pointer::after {
  content: "\f105";                 /* chevron-right (FontAwesome) */
  font-family: FontAwesome;
  position: absolute;
  right: 22px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 20px;
  color: var(--lq-subtle);
  transition: color .15s ease, right .15s ease;
}
body .card.card-1.box-pointer:hover::after { color: var(--lq-red); right: 18px; }
body .card.card-1 label { color: var(--lq-ink); font-weight: 600; cursor: pointer; }
body .box-pointer { cursor: pointer; }

/* --------------------------------------------------------------------------
   7. Upload
   -------------------------------------------------------------------------- */
body .c-file-input,
body .file_raw,
body .uploaded-file {
  border-radius: var(--lq-radius) !important;
}
body .btn-upload-image,
body .change-image {
  border-radius: 10px !important;
}

/* --------------------------------------------------------------------------
   8. Alert & notifikasi
   -------------------------------------------------------------------------- */
body .alert {
  border-radius: 12px;
  border: 1px solid transparent;
  box-shadow: var(--lq-shadow-sm);
  font-weight: 500;
}
body .alert-danger, body .alert.bg-danger {
  background: #FEF3F2 !important;
  border-color: #FECDCA !important;
  color: #B42318 !important;
}
body .alert-danger .text-white, body .alert.bg-danger .text-white,
body .alert-danger span, body .alert.bg-danger span { color: #B42318 !important; }
body .alert-success { background: #ECFDF3 !important; border-color: #ABEFC6 !important; color: #067647 !important; }
body .alert-info { background: #EFF8FF !important; border-color: #B2DDFF !important; color: #175CD3 !important; }
body .alert-warning { background: #FFFAEB !important; border-color: #FEDF89 !important; color: #B54708 !important; }

/* SweetAlert2 */
body .swal2-popup {
  border-radius: var(--lq-radius-lg) !important;
  font-family: var(--lq-font) !important;
  padding: 1.75em !important;
}
body .swal2-title { color: var(--lq-ink) !important; font-weight: 700 !important; }
body .swal2-styled { border-radius: 12px !important; font-weight: 600 !important; padding: .7em 1.6em !important; }
body .swal2-styled.swal2-confirm { background-color: var(--lq-red) !important; }
body .swal2-styled:focus { box-shadow: 0 0 0 4px var(--lq-ring) !important; }

/* --------------------------------------------------------------------------
   9. Halaman kartu tengah (aktivasi, OTP, reset password, dsb.)
   -------------------------------------------------------------------------- */
body.fixed-header,
body.new-container {
  background:
    radial-gradient(900px 420px at 50% -160px, rgba(230, 0, 0, .07), transparent 70%),
    var(--lq-bg) !important;
}
body .login-wrapper { background: transparent !important; }
body .login-wrapper .login-container > .card,
body .login-container > .card {
  padding: 36px 34px 28px !important;
  border-radius: 24px !important;
  box-shadow: var(--lq-shadow-lg) !important;
}
body .login-container .logo { margin-bottom: 4px; }

/* Halaman Daftar (register/index) */
body .konten {
  background: #fff;
  padding: 36px 36px 30px;
  border-radius: 24px;
  border: 1px solid var(--lq-line-2);
  box-shadow: var(--lq-shadow-lg);
  align-self: center;
}
body .konten .font22-lexend { color: var(--lq-ink) !important; font-size: 26px; font-weight: 800; letter-spacing: -0.02em; margin-top: 18px; }
body .konten .font14-lexend-s { color: var(--lq-muted) !important; }
body .konten label.font14-lexend { color: var(--lq-ink-2); font-size: 13px; font-weight: 600; margin-bottom: 6px; }
body .konten .btn-custom { height: 50px; border-radius: 12px !important; font-size: 15px; font-weight: 700; }
body .link-login { color: var(--lq-red) !important; font-weight: 700; }
body .overlay-text { color: var(--lq-red) !important; font-weight: 800; letter-spacing: -0.02em; }

/* --------------------------------------------------------------------------
   10. Footer
   -------------------------------------------------------------------------- */
body .copyright,
body .copyright p,
body .footer p,
body .activation-footer-content p {
  color: var(--lq-subtle) !important;
  font-size: 12.5px !important;
}
body .footer, body footer { border-top-color: var(--lq-line-2) !important; }

/* --------------------------------------------------------------------------
   11. Responsif
   -------------------------------------------------------------------------- */
@media screen and (max-width: 670px) {
  body .sidebar { transform: translateX(-100%); width: 82vw; max-width: 300px; }
  body .sidebar.open-menu { transform: translateX(0); box-shadow: var(--lq-shadow-lg) !important; }
  body .activation-content-wrapper,
  body .content { padding-left: 0; }
  body .activation-header-content,
  body .activation-footer-content { width: 100%; }
  body .activation-header-content,
  body.body-form-bisnis header { height: 56px; min-height: 56px; display: flex; align-items: center; padding: 0 16px; }

  body .progress-wrapper > .progress,
  body .point { width: 34px; height: 34px; font-size: 13px; box-shadow: 0 0 0 4px var(--lq-bg); }
  body .progress-wrapper > .progress.active-progress,
  body .point.point-active { box-shadow: 0 0 0 4px var(--lq-red-100); }
  body .bar-left, body .bar-right, body .form-progress > .progress { top: 16px; }
  body .progress-point span, body .custom-span, body .progress-wrapper span { font-size: 11px !important; line-height: 1.35; }

  body .card.card-1.box-pointer::after { right: 16px; }

  body .login-wrapper .login-container > .card,
  body .login-container > .card { padding: 26px 20px 22px !important; border-radius: 20px !important; }
  body .konten { padding: 26px 20px; border-radius: 20px; box-shadow: var(--lq-shadow); }
  body .inputan { width: 100%; }

  body .content-selection-wrapper { width: 100% !important; gap: 12px; justify-content: center !important; }
  body .personal-card-wrapper,
  body .bisnis-card-wrapper { width: calc(50% - 6px); max-width: 200px; }
  body .personal-card-wrapper .selection-button,
  body .bisnis-card-wrapper .selection-button { padding: 8px 28px; }
  body .main-content > span { text-align: center; line-height: 1.3; }
}

@media (prefers-reduced-motion: reduce) {
  body *, body *::before, body *::after { transition: none !important; animation-duration: .01ms !important; }
}

/* alert berlatar biru muda (tips upload) tetap teal */
body .alert.bg-light-blue {
  background: linear-gradient(90deg, #ECFDF7, #F0FBFA) !important;
  border-color: #CDEFE6 !important;
  color: #0B4F3C !important;
}
body .alert.bg-light-blue label, body .alert.bg-light-blue b { color: #0B4F3C; }

/* Ikon dokumen/PIC v2: label sejajar tengah ikon (daftar bisnis) */
body .card.card-1.p-0 > a { display: flex !important; align-items: center; justify-content: flex-start !important; width: 100%; text-align: left; }
body .card.card-1.p-0 > a > img.gambar { float: none !important; flex: 0 0 auto; width: 96px; height: auto; }
body .card.card-1.p-0 > a > label { padding: 0 0 0 18px !important; margin: 0 !important; text-align: left !important; flex: 1 1 auto; }

/* ==========================================================================
   12. Tanpa sidebar: logo pindah ke header (Okt 2026)
   Elemen .sidebar tetap ada di markup (JS tidak berubah), tetapi
   ditampilkan sebagai area logo di kiri header, bukan panel putih.
   ========================================================================== */
body .sidebar,
body .sidebar.open-menu {
  position: absolute !important;
  top: 0; left: 0; bottom: auto;
  width: auto !important;
  max-width: none !important;
  height: 64px !important;
  padding: 0 28px !important;
  flex-direction: row !important;
  align-items: center !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  transform: none !important;
  animation: none !important;
  z-index: 300;
}
body .sidebar img { width: auto !important; height: 40px !important; }
body .sidebar::after { margin: 0 0 0 14px; }
body .sidebar span:empty + * { display: none; }
body .sidebar .fa-times,
body .burger { display: none !important; }

body .activation-content-wrapper,
body .content { padding-left: 0 !important; width: 100%; }

body .activation-header-content,
body.body-form-bisnis header {
  width: 100% !important;
  height: 64px !important;
  min-height: 64px !important;
  background: var(--lq-grad) top left / 100% 4px no-repeat, #fff !important;
  border-bottom: 1px solid var(--lq-line);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04) !important;
}
body .activation-footer-content,
body.body-form-bisnis footer { width: 100% !important; }

/* konten tidak melebar berlebihan tanpa sidebar */
body .activation-main-content-wrapper,
body.body-form-bisnis main {
  max-width: 1120px;
  margin-left: auto;
  margin-right: auto;
}

@media screen and (max-width: 670px) {
  body .sidebar, body .sidebar.open-menu { height: 56px !important; padding: 0 16px !important; }
  body .sidebar img { height: 32px !important; }
  body .sidebar::after { font-size: 10px; padding: 5px 10px; margin-left: 10px; }
  body .activation-header-content,
  body.body-form-bisnis header { height: 56px !important; min-height: 56px !important; }
}

/* 12b. Header tetap merah brand, tanpa label "Portal Registrasi";
   logo diberi alas putih agar tetap terbaca di atas merah */
body .sidebar::after { content: none !important; display: none !important; }
body .activation-header-content,
body.body-form-bisnis header {
  background: var(--lq-grad) !important;
  border-bottom: 0;
  box-shadow: 0 6px 20px rgba(182, 9, 58, .18) !important;
}
body .sidebar img {
  box-sizing: border-box;
  height: 44px !important;
  padding: 4px 12px !important;
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(16, 24, 40, .12);
}
@media screen and (max-width: 670px) {
  body .sidebar img { height: 38px !important; padding: 3px 10px !important; border-radius: 10px; }
}

/* 12c. Logo langsung di atas header merah (tanpa alas putih) */
body .sidebar img {
  height: 48px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  filter: drop-shadow(0 2px 6px rgba(80, 0, 20, .35));
}
@media screen and (max-width: 670px) {
  body .sidebar img { height: 36px !important; padding: 0 !important; }
}

/* ==========================================================================
   13. Modal upload dokumen bisnis (dipakai upload-modal.js)
   ========================================================================== */
html.lq-modal-open, html.lq-modal-open body { overflow: hidden !important; }
.lq-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 40, .55);
  backdrop-filter: blur(2px);
  opacity: 0; visibility: hidden;
  transition: opacity .2s ease, visibility .2s ease;
}
.lq-modal.is-open { opacity: 1; visibility: visible; }
.lq-modal__dialog {
  position: relative;
  width: 100%; max-width: 760px;
  height: min(88vh, 900px);
  display: flex; flex-direction: column;
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 24px 64px rgba(16, 24, 40, .28);
  overflow: hidden;
  transform: translateY(12px) scale(.98);
  transition: transform .22s ease;
}
.lq-modal.is-open .lq-modal__dialog { transform: none; }
.lq-modal__head {
  flex: 0 0 auto;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 14px 16px 14px 22px;
  background: var(--lq-grad);
  color: #fff;
}
.lq-modal__title {
  font: 700 15px/1.3 var(--lq-font);
  color: #fff !important;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lq-modal__close {
  flex: 0 0 auto;
  width: 36px; height: 36px;
  border: 0; border-radius: 10px;
  background: rgba(255, 255, 255, .18);
  color: #fff; font-size: 24px; line-height: 1;
  cursor: pointer;
  transition: background .15s ease;
}
.lq-modal__close:hover, .lq-modal__close:focus { background: rgba(255, 255, 255, .32); outline: none; }
.lq-modal__body { position: relative; flex: 1 1 auto; background: var(--lq-bg); }
.lq-modal__frame { display: block; width: 100%; height: 100%; border: 0; background: transparent; }
.lq-modal__loader {
  position: absolute; inset: 0;
  display: none; align-items: center; justify-content: center;
  background: rgba(247, 248, 250, .85);
  z-index: 2;
}
.lq-modal.is-loading .lq-modal__loader { display: flex; }
.lq-modal__loader span {
  width: 38px; height: 38px;
  border: 3px solid var(--lq-red-100);
  border-top-color: var(--lq-red);
  border-radius: 50%;
  animation: lq-spin .8s linear infinite;
}
@keyframes lq-spin { to { transform: rotate(360deg); } }
html.lq-modal-reloading body { cursor: progress; }

@media screen and (max-width: 670px) {
  .lq-modal { padding: 0; align-items: flex-end; }
  .lq-modal__dialog { max-width: none; height: 94vh; border-radius: 20px 20px 0 0; }
}

/* Halaman form upload saat tampil di dalam modal */
html.lq-in-modal body { background: var(--lq-bg) !important; min-height: 0 !important; }
html.lq-in-modal .sidebar,
html.lq-in-modal .burger,
html.lq-in-modal body.body-form-bisnis header,
html.lq-in-modal .activation-header-content,
html.lq-in-modal footer,
html.lq-in-modal .activation-footer-content,
html.lq-in-modal #freshworks-container,
html.lq-in-modal #freshworks-frame-wrapper,
html.lq-in-modal #launcher-frame { display: none !important; }
html.lq-in-modal .content { padding-left: 0 !important; }
html.lq-in-modal body.body-form-bisnis main {
  min-height: 0 !important;
  max-width: none;
  padding: 12px 0 8px;
  margin-bottom: 0 !important;
}
html.lq-in-modal .top-content { margin-top: 8px !important; }

/* 13b. Tombol tutup modal: ikon X tepat di tengah */
.lq-modal__close {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 0 !important;
}
.lq-modal__close svg { display: block; width: 18px; height: 18px; }

/* 13c. Form upload identitas personal di dalam modal */
html.lq-in-modal body.activation-body { display: block; }
html.lq-in-modal .activation-main-content-wrapper { min-height: 0 !important; padding: 12px 0 8px; max-width: none; }
html.lq-in-modal .activation-content-wrapper { width: 100%; }
html.lq-in-modal .pace, html.lq-in-modal .pace-activity, html.lq-in-modal .pace-progress { display: none !important; }

/* 14. Kamera (upload KTP/selfie): video & hasil foto tidak melebihi lebar kartu.
   upload-id.js/upload-k.js memberi width 690px inline; dibatasi di sini. */
body #videoElement,
body .c-file-input video,
body .card-1 .output img.img-cam,
body .card-1 .output img.photo,
body .c-file-input canvas {
  max-width: calc(100% - 24px) !important;
  height: auto !important;
  border-radius: 12px;
}
body .c-file-input,
body .c-file-input > div,
body .c-file-input .output { max-width: 100%; overflow: hidden; }