/* Kamar Step 26 compatibility stylesheet */

/* Kamar Step 59: style the JS-injected global header used on
   dashboard.html, admin*.html, member-*.html, affiliate-dashboard.html.
   Without these rules the logo image and Beranda/Logout links render
   completely unstyled (logo shows at its raw 1536x1536 size). */
.kamar-global-brand{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
  color:var(--text);
  font-weight:1000;
}
.kamar-global-brand img{
  width:46px;
  height:46px;
  border-radius:14px;
  object-fit:cover;
}
.kamar-global-center,
.kamar-global-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
}
.kamar-global-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  text-decoration:none;
  color:var(--gold);
  font-weight:900;
  background:rgba(255,255,255,.035);
}

/* Kamar Step 66: hide the plain "Beranda" center nav text in the
   JS-injected global header (dashboard.html, admin*.html, member-*.html,
   affiliate-dashboard.html). The Beranda/Logout pill buttons on the
   right side (.kamar-global-actions) stay untouched. */
.kamar-global-center{
     display:none!important;
}

/* Kamar Step 67: elegant member dashboard pass. Upgrades the shared
   split-shell / split-card / split-sidebar system used by dashboard.html
   and every member-*.html page so they match the premium, dark-glass,
   gold-accented look of the public homepage. Scoped to classes only
   used on member pages, so admin-*.html (its own .card system) is
   unaffected. */
.split-card,
.member-page-panel{
     position:relative;
     overflow:hidden;
     box-shadow:0 22px 70px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.05);
     transition:box-shadow .25s ease, transform .25s ease;
}
.split-card::before,
.member-page-panel::before{
     content:"";
     position:absolute;
     inset:0 0 auto 0;
     height:1px;
     background:linear-gradient(90deg,transparent,rgba(244,223,144,.55),transparent);
     pointer-events:none;
}
.split-card:hover,
.member-page-panel:hover{
     box-shadow:0 28px 84px rgba(0,0,0,.38), inset 0 1px 0 rgba(255,255,255,.07);
}
.kamar-title-card{
     background:linear-gradient(135deg,rgba(244,223,144,.10),rgba(255,255,255,.02))!important;
}
.kamar-title-card h1{
     letter-spacing:-.03em;
}
.split-sidebar{
     background:
            linear-gradient(160deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
            radial-gradient(circle at 0% 0%,rgba(244,223,144,.10),transparent 46%);
     box-shadow:0 20px 60px rgba(0,0,0,.30);
}
.split-sidebar a{
     transition:background .18s ease, color .18s ease, transform .18s ease;
}
.split-sidebar a.active{
     background:linear-gradient(135deg,rgba(244,223,144,.16),rgba(244,223,144,.05))!important;
     color:#fff3d8!important;
     box-shadow:inset 0 0 0 1px rgba(244,223,144,.25);
}
.split-sidebar a:hover{
     transform:translateX(2px);
}
.split-sidebar .sidebar-group{
     border-top:1px solid rgba(238,206,122,.14);
     margin-top:10px;
     padding-top:8px;
}
.split-sidebar summary{
     cursor:pointer;
     list-style:none;
     display:flex;
     align-items:center;
     justify-content:space-between;
     gap:10px;
     padding:12px 14px;
     border-radius:16px;
     font-weight:900;
     color:#d8d0bd;
     transition:background .18s ease, color .18s ease;
}
.split-sidebar summary::-webkit-details-marker{
     display:none;
}
.split-sidebar summary::after{
     content:"\203A";
     color:#d8cda9;
     font-size:16px;
     font-weight:900;
     transform:rotate(90deg);
     transition:transform .18s ease;
}
.split-sidebar .sidebar-group[open] summary::after{
     transform:rotate(270deg);
}
.split-sidebar summary:hover{
     background:rgba(244,223,144,.07);
     color:#f4df90;
}
.split-sidebar a.disabled{
     opacity:.5;
}
.stat-card,
.member-card,
.setting-card,
.video-card{
     transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
     box-shadow:0 14px 40px rgba(0,0,0,.20);
}

/* Kamar Step 68: elegant label/value formatting for detail-panel cards
   (Detail Akun Online di dashboard.html, dan panel detail sejenis).
   Sebelumnya <span>Label</span><strong>Value</strong> di dalam
   .setting-card tidak punya spacing sama sekali sehingga tampil mepet
   ("WhatsApp0812-3456-7890"). Sekarang meniru .detail-grid di halaman
   utama: label kecil huruf kapital warna emas, value lebih besar &
   tebal di baris baru, kartu tersusun rapi dalam grid multi-kolom. */
.admin-detail-panel{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(220px,1fr));
     gap:14px;
}
.setting-card,
.action-card,
.video-card{
     display:flex;
     flex-direction:column;
     gap:6px;
}
.setting-card span,
.action-card span,
.video-card span,
.member-card span,
.todo-item span{
     display:block;
     color:#f1d99a;
     font-size:12px;
     font-weight:1000;
     letter-spacing:.14em;
     text-transform:uppercase;
}
.setting-card strong,
.action-card strong,
.video-card strong,
.member-card strong,
.todo-item strong{
     display:block;
     color:#fff3d8;
     font-size:16px;
     font-weight:800;
     line-height:1.45;
     word-break:break-word;
}
@media(max-width:820px){
     .admin-detail-panel{
            grid-template-columns:1fr;
     }
}

/* Kamar Step 69: elegant facility/payment card grid for
   member-renewal.html ("Pilih Fasilitas Kamar") and any page using
   .member-payment-grid / .member-payment-card. These classes had zero
   CSS anywhere before, so the section rendered as unstyled text with
   the AKTIFKAN button and "Coming Soon" label floating side by side.
   Mirrors homepage's .facility-card: rounded gradient card, shadow,
   hover lift, actions pinned to the bottom of the card. */
.member-payment-grid{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
     gap:18px;
     margin-top:20px;
}
.member-payment-card{
     display:flex;
     flex-direction:column;
     justify-content:space-between;
     gap:14px;
     border:1px solid rgba(238,206,122,.16);
     border-radius:26px;
     padding:22px;
     background:
            linear-gradient(135deg,rgba(255,255,255,.055),rgba(255,255,255,.016)),
            radial-gradient(circle at 0% 0%,rgba(244,223,144,.10),transparent 46%);
     box-shadow:0 18px 50px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.05);
     transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.member-payment-card:hover{
     transform:translateY(-3px);
     border-color:rgba(244,223,144,.42);
     box-shadow:0 24px 64px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.07);
}
.member-payment-card h3{
     margin:0;
     color:#fff3d8;
     font-size:19px;
     letter-spacing:-.02em;
}
.member-payment-card p{
     margin:0;
     color:var(--muted);
     font-size:14px;
     line-height:1.6;
}
.member-payment-card.is-coming-soon{
     opacity:.72;
}
.activate-row{
     display:flex;
     align-items:center;
     gap:10px;
     flex-wrap:wrap;
     margin-top:auto;
}
.activate-coming-soon{
     display:inline-flex;
     align-items:center;
     border:1px solid rgba(238,206,122,.24);
     border-radius:999px;
     padding:6px 12px;
     font-size:11px;
     font-weight:1000;
     letter-spacing:.10em;
     text-transform:uppercase;
     color:#f1d99a;
     background:rgba(216,178,92,.08);
}
.btn.disabled-payment{
     opacity:.5;
     cursor:not-allowed;
     pointer-events:none;
}
.payment-note-box{
     border:1px solid rgba(238,206,122,.18);
     border-radius:20px;
     padding:16px 18px;
     background:rgba(255,255,255,.03);
     color:var(--muted);
     line-height:1.6;
     margin-top:8px;
}


/* Kamar Step 70: highlight fasilitas yang sudah unlock di sidebar member
   (lihat unlockSidebarFacilities() di kamar-data-online-25e.js). Link yang
   tadinya class="disabled" + ikon kunci sekarang diberi warna aktif dan
   badge hijau "Aktif" menggantikan ikon kunci. */
.split-sidebar a.kamar-facility-unlocked{
     color:#f4df90;
     background:rgba(212,166,63,.10);
}
.split-sidebar a.kamar-facility-unlocked:hover{
     background:rgba(212,166,63,.18);
}
.kamar-unlock-badge{
     display:inline-flex;
     align-items:center;
     border:1px solid rgba(158,255,202,.35);
     background:rgba(28,97,65,.18);
     color:#9effca;
     font-size:10px;
     font-weight:1000;
     letter-spacing:.08em;
     text-transform:uppercase;
     padding:3px 8px;
     border-radius:999px;
}

/* Kamar Step 71: grid & card untuk section Download (tabel materials) dan
   Tools (tabel tools_files) di halaman fasilitas member (member-materials,
   member-study, member-private, member-indicator, member-robot). Meniru
   gaya .member-payment-card supaya konsisten dengan tampilan halaman utama. */
.facility-content-grid{
     display:grid;
     grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
     gap:16px;
     margin-top:16px;
}
.facility-content-card{
     display:flex;
     flex-direction:column;
     justify-content:space-between;
     gap:10px;
     border:1px solid rgba(238,206,122,.16);
     border-radius:22px;
     padding:18px;
     background:
            linear-gradient(135deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),
            radial-gradient(circle at 0% 0%,rgba(244,223,144,.08),transparent 46%);
     box-shadow:0 14px 40px rgba(0,0,0,.20);
     transition:transform .2s ease, border-color .2s ease;
}
.facility-content-card:hover{
     transform:translateY(-3px);
     border-color:rgba(244,223,144,.38);
}
.facility-content-card h3{
     margin:0;
     color:#fff3d8;
     font-size:16px;
     letter-spacing:-.01em;
}
.facility-content-card p{
     margin:0;
     color:var(--muted);
     font-size:13px;
     line-height:1.55;
}
.facility-locked-box{
     border:1px solid rgba(255,96,96,.24);
     background:rgba(255,96,96,.07);
     border-radius:22px;
     padding:20px;
     color:#ffd8d8;
     line-height:1.6;
     display:flex;
     flex-wrap:wrap;
     align-items:center;
     gap:12px;
     justify-content:space-between;
}
/* Kamar Step 75: rapikan card Profil Akun (label/value) */ .profile-detail-list{display:flex;flex-direction:column;gap:2px} .profile-detail-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:14px 4px;border-bottom:1px solid rgba(255,255,255,.06);flex-wrap:wrap} .profile-detail-row:last-child{border-bottom:none} .profile-detail-row>span{color:var(--muted);font-size:13px;font-weight:700;letter-spacing:.01em;white-space:nowrap} .profile-detail-row>strong{color:var(--text);font-size:14px;font-weight:600;text-align:right;word-break:break-word} .facility-guide-box{
     border:1px solid rgba(158,255,202,.22);
     background:rgba(28,97,65,.08);
     border-radius:20px;
     padding:14px 16px;
     color:#c9ffe1;
     font-size:13px;
     line-height:1.6;
     margin:0 0 16px;
}