/* DonasiWP Member Vyzor - lite skin */
@import url("https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,600;700;800&family=Space+Grotesk:wght@400;500;600;700&display=swap");
:root{
  --dwp-grad-a:#34104a;
  --dwp-grad-b:#7a1fa2;
  --dwp-primary:#7b2dd6;
  --dwp-primary-dark:#5f1fb0;
  --dwp-accent:#ffb703;
  --dwp-accent-dark:#ff8f1f;
  --dwp-success:#2fbfaa;
  --dwp-btn-purple:#8d36f2;
  --dwp-btn-purple-dark:#7a2fe0;
  --dwp-btn-teal:#22bfa1;
  --dwp-btn-teal-dark:#1aa389;
  --dwp-card:#ffffff;
  --dwp-muted:#6b7280;
  --dwp-ink:#1b1026;
  --dwp-border:rgba(27,16,38,.18);
  --dwp-ring:rgba(123,45,214,.18);
  --dwp-font-body:"Space Grotesk","Sora",sans-serif;
  --dwp-font-head:"Fraunces","Space Grotesk",serif;
}

.dwp-hero{
  min-height: 92vh;
  position: relative;
  background:
    radial-gradient(1100px 460px at 8% -10%, rgba(255,183,3,.22) 0%, rgba(255,183,3,0) 60%),
    radial-gradient(720px 460px at 95% 12%, rgba(255,88,214,.22) 0%, rgba(255,88,214,0) 60%),
    linear-gradient(135deg,var(--dwp-grad-a),var(--dwp-grad-b));
  padding: 56px 16px;
  font-family: var(--dwp-font-body);
  color: var(--dwp-ink);
}
.dwp-hero::after{
  content:"";
  position:absolute;
  inset:0;
  background-image: radial-gradient(rgba(255,255,255,.28) 1px, transparent 1px);
  background-size: 26px 26px;
  opacity:.10;
  pointer-events:none;
}
.dwp-hero .dwp-shell{ position: relative; z-index: 1; }
.dwp-hero h1,
.dwp-hero h2,
.dwp-hero h3,
.dwp-hero h4,
.dwp-hero h5,
.dwp-hero h6{
  font-family: var(--dwp-font-head);
  letter-spacing:.2px;
}
.dwp-hero .text-primary{ color: var(--dwp-primary) !important; }

.dwp-shell{
  max-width: 980px;
  margin: 0 auto;
}

.dwp-card{
  background: var(--dwp-card);
  border-radius: 10px;
  box-shadow: 0 18px 40px rgba(0,0,0,.12);
  overflow: visible;
}

.dwp-card-inner{
  padding: 54px 34px 28px;
}

/* Public order/confirm form refresh */
.dwp-hero .dwp-card{
  border-radius: 18px;
  background: rgba(255,255,255,.98);
  border: 1px solid rgba(255,255,255,.75);
  box-shadow: 0 32px 70px rgba(22,8,34,.35), 0 8px 16px rgba(22,8,34,.12);
  animation: dwp-rise .6s ease-out both;
}
.dwp-hero .dwp-tab-badge{
  background: linear-gradient(135deg,var(--dwp-accent),var(--dwp-accent-dark));
  color:#2b1600;
  border-radius:999px;
  padding: 10px 18px;
  font-weight: 800;
  letter-spacing:.3px;
  border:1px solid rgba(255,255,255,.45);
  box-shadow: 0 14px 28px rgba(255,143,31,.35);
  animation: dwp-badge .5s ease-out .1s both;
  z-index: 5;
}
.dwp-hero .dwp-form-label{
  font-weight: 700;
  color: var(--dwp-ink);
}
.dwp-hero .dwp-help{
  color: #7b5f97;
}
.dwp-hero .dwp-link{
  color: var(--dwp-primary);
}
.dwp-hero .dwp-link:hover{
  color: var(--dwp-primary-dark);
  text-decoration: underline;
}
.dwp-hero .dwp-btn{
  background: linear-gradient(180deg,var(--dwp-btn-purple),var(--dwp-btn-purple-dark));
  color: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 18px rgba(123,45,214,.32);
  border: 0;
  letter-spacing:.2px;
}
.dwp-hero .dwp-btn:hover{ filter: brightness(.98); }
.dwp-hero .dwp-btn-success{
  background: linear-gradient(180deg,var(--dwp-btn-purple),var(--dwp-btn-purple-dark));
  box-shadow: 0 10px 18px rgba(123,45,214,.32);
}
.dwp-hero .dwp-checkbox{
  border-color: rgba(123,45,214,.2);
  background: #f7f1ff;
  color: #3b294c;
}

.dwp-tab-badge{
  position: absolute;
  transform: translate(24px, -18px);
  background: var(--dwp-success);
  color: #fff;
  padding: 10px 18px;
  border-radius: 6px;
  box-shadow: 0 12px 22px rgba(0,0,0,.15);
  font-weight: 700;
}

.dwp-form-label{
  font-weight: 600;
  color: #111827;
}

.dwp-help{
  font-size: 12px;
  color: #0ea5a4;
  margin-top: 6px;
}

.dwp-btn{
  border: 0;
  background: var(--dwp-primary);
  color: #fff;
  padding: 12px 18px;
  border-radius: 8px;
  font-weight: 700;
  min-width: 180px;
  box-shadow: 0 14px 22px rgba(92,99,242,.25);
}
.dwp-btn:hover{ filter: brightness(.97); }

.dwp-btn-success{
  background: var(--dwp-success);
  box-shadow: 0 14px 22px rgba(47,191,170,.25);
}

.dwp-checkbox{
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 12px;
  font-size: 12px;
  color: #4b5563;
  background: #fafafa;
}

.dwp-topnav{
  background: #fff;
  border-bottom: 1px solid #f1f5f9;
}

.dwp-topnav .nav-link{
  color:#111827;
  font-weight: 600;
}

.dwp-topnav .nav-link.active{
  color: var(--dwp-primary);
}

.dwp-brand{
  display:flex;
  align-items:center;
  gap:10px;
  font-weight: 800;
  color:#111827;
}

.dwp-brand img{ height: 26px; width:auto; }

.dwp-page{
  background: #f6f7fb;
  min-height: 85vh;
  padding: 28px 12px;
}

.dwp-card-soft{
  background:#fff;
  border:1px solid #eef2ff;
  border-radius: 10px;
  padding: 18px;
  box-shadow: 0 10px 30px rgba(17,24,39,.05);
}

.dwp-product{
  display:flex;
  gap:16px;
  align-items:flex-start;
}
.dwp-product img{
  width: 220px;
  height: 120px;
  object-fit: cover;
  border-radius: 10px;
  background:#f3f4f6;
}

.dwp-kv{
  display:grid;
  grid-template-columns: 170px 1fr;
  gap: 6px 14px;
  font-size: 13px;
}
.dwp-kv .k{ color:#6b7280; font-weight:600; }
.dwp-kv .v{ color:#111827; font-weight:700; }

.dwp-badge{
  display:inline-block;
  padding: 6px 10px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 12px;
}
.dwp-badge-green{ background:#dcfce7; color:#166534; }
.dwp-badge-red{ background:#fee2e2; color:#991b1b; }
.dwp-badge-blue{ background:#dbeafe; color:#1e40af; }

.dwp-link{
  color: var(--dwp-primary);
  text-decoration: none;
  font-weight: 700;
}

.dwp-success-wrap{
  background:#ffffff;
  color:var(--dwp-ink);
  border-radius: 18px;
  border: 1px solid rgba(123,45,214,.12);
  box-shadow: 0 26px 60px rgba(22,8,34,.15);
  overflow: visible;
}
.dwp-success-top{
  padding: 34px 34px 18px;
  position: relative;
  background: #fbf7ff;
  border-bottom: 1px solid rgba(123,45,214,.12);
  border-radius: 18px 18px 0 0;
  z-index: 1;
}
.dwp-success-top h2{
  margin:0 0 14px;
  font-weight: 900;
  color: var(--dwp-primary);
}
.dwp-success-top .check{
  position:absolute; right: 26px; top: 26px;
  width: 78px; height: 78px;
  border-radius: 999px;
  border: 6px solid rgba(123,45,214,.18);
  background: rgba(123,45,214,.08);
  color: var(--dwp-primary);
  display:flex; align-items:center; justify-content:center;
  font-size: 38px;
  opacity: .85;
}
.dwp-success-mid{
  background: #ffffff;
  padding: 26px 34px 30px;
}
.dwp-success-mid .bankrow{
  display:flex; gap:16px; align-items:center;
  background: #f8f5ff;
  border: 1px solid rgba(123,45,214,.12);
  padding: 14px;
  border-radius: 10px;
}

.dwp-bank-logo{
  width: 88px; height: 52px;
  border-radius: 6px;
  background:#fff;
  display:flex;
  align-items:center;
  justify-content:center;
  font-weight:900;
  color:#111827;
}

@media (max-width: 768px){
  .dwp-card-inner{ padding: 46px 20px 20px; }
  .dwp-kv{ grid-template-columns: 130px 1fr; }
  .dwp-product{ flex-direction: column; }
  .dwp-product img{ width: 100%; height: 160px; }
}

/* Success page readability */
.dwp-success-wrap .dwp-kv{
  color: var(--dwp-ink) !important;
  opacity: 1 !important;
}
.dwp-success-wrap .dwp-kv .k{
  color: #6b5c7a !important;
}
.dwp-success-wrap .dwp-kv .v{
  color: var(--dwp-ink) !important;
}
.dwp-success-wrap .dwp-kv .k:last-of-type + .v{
  color: var(--dwp-primary) !important;
  font-weight: 900;
}
.dwp-success-wrap #dwp-bank-acc{
  color: var(--dwp-primary) !important;
}
.dwp-success-wrap .dwp-link{
  color: var(--dwp-primary) !important;
}
.dwp-copy-mini{
  border: 1px solid rgba(123,45,214,.22);
  background: rgba(123,45,214,.08);
  color: var(--dwp-primary-dark);
  padding: 6px 10px;
  border-radius: 8px;
  font-weight: 800;
  font-size: 12px;
  cursor: pointer;
}
.dwp-copy-mini:hover{ background: rgba(123,45,214,.14); }

.dwp-bank-logo img{display:block;}


/* Navbar brand logo */
.dwp-brand{display:flex;align-items:center;gap:10px;}
.dwp-brand .dwp-brand-logo{height:28px;width:auto;}
@media (max-width:480px){.dwp-brand .dwp-brand-logo{height:24px;}}

/* Login page (Hostinger-like split layout) */
.dwp-login-wrap{
  min-height:100vh;
  display:flex;
  background:#f5f6ff;
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  overflow-x:hidden;
}
.dwp-login-hero{flex:1;display:flex;align-items:center;justify-content:center;padding:56px;}
.dwp-login-hero-inner{width:100%;max-width:860px;}
.dwp-login-panel{width:460px;max-width:100%;background:#fff;padding:56px 44px;border-left:1px solid rgba(0,0,0,.06);display:flex;flex-direction:column;justify-content:center;}
.dwp-login-brand{display:flex;align-items:center;gap:12px;margin-bottom:20px;}
.dwp-login-logo{
  height:34px !important;
  width:34px !important;
  max-height:34px !important;
  max-width:34px !important;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}
.dwp-login-title{font-size:26px;font-weight:900;letter-spacing:.2px;color:#111827;}
.dwp-login-heading{margin-bottom:18px;}
.dwp-login-hi{font-size:22px;font-weight:800;color:#111827;}
.dwp-login-subtitle{margin-top:6px;color:#6b7280;font-weight:600;}
.dwp-alert{background:#fff1f2;border:1px solid #fecdd3;color:#9f1239;padding:12px 14px;border-radius:12px;font-weight:700;margin:14px 0;}
.dwp-login-form{margin-top:10px;}
.dwp-label{display:block;margin:14px 0 8px;font-weight:800;color:#111827;}
.dwp-input{width:100%;height:46px;border-radius:12px;border:1px solid rgba(0,0,0,.14);padding:0 14px;font-weight:700;color:#111827;outline:none;}
.dwp-input:focus{border-color:rgba(108,79,246,.55);box-shadow:0 0 0 4px rgba(108,79,246,.10);}
.dwp-pass-wrap{position:relative;}
.dwp-pass-toggle{position:absolute;right:10px;top:50%;transform:translateY(-50%);border:0;background:transparent;font-size:16px;opacity:.7;cursor:pointer;}
.dwp-login-row{display:flex;align-items:center;justify-content:space-between;margin-top:14px;}
.dwp-check{display:flex;gap:8px;align-items:center;font-weight:700;color:#374151;}
.dwp-check input{transform:translateY(1px);}
.dwp-link{color:#6C4FF6;font-weight:800;text-decoration:none;}
.dwp-link:hover{text-decoration:underline;}
.dwp-login-btn{
  margin-top:18px;
  width:100%;
  height:48px;
  border:0;
  border-radius:12px;
  background: linear-gradient(180deg,var(--dwp-btn-purple),var(--dwp-btn-purple-dark));
  color:#fff;
  font-weight:900;
  letter-spacing:.2px;
  box-shadow: 0 10px 18px rgba(123,45,214,.32);
}
.dwp-login-btn:hover{filter:brightness(.98);}
.dwp-login-btn:focus{
  outline:none;
  box-shadow: 0 0 0 4px rgba(123,45,214,.24);
}
.dwp-login-foot{margin-top:18px;color:#6b7280;font-weight:700;}
@media (max-width: 980px){
  .dwp-login-hero{display:none;}
  .dwp-login-panel{width:100%;border-left:0;}
}

.dwp-ok{background:#ecfdf5;border:1px solid #a7f3d0;color:#065f46;padding:12px 14px;border-radius:12px;font-weight:800;margin:14px 0;}

/* =============================
   Member Dashboard (Hostinger-like)
   Fix: lebar tidak seimbang karena dashboard dirender di dalam container theme.
   Buat full-bleed + topbar sejajar logo/notif/user.
============================= */
:root{--dwp-topbar-h:72px;}

/* Full width (break out of theme/Elementor container) */
.dwp-hostinger-shell{
  width:100vw;
  position:relative;
  left:50%;
  right:50%;
  margin-left:-50vw;
  margin-right:-50vw;
  overflow-x:hidden;
}

/* IMPORTANT: Vyzor default .page is vertically centered (justify-content:center).
   For member area we want content always start from top like Hostinger. */
.dwp-hostinger-shell .page{
  justify-content:flex-start !important;
}

/* Remove Vyzor default top offset so content sits right under our fixed topbar */
.dwp-hostinger-shell .main-content.app-content{
  margin-top:0 !important;
  margin-block-start:0 !important;
}

/* Topbar fixed across full page */
.dwp-hostinger-shell .main-header.dwp-topbar-fixed{
  position:fixed;
  top:0;
  left:0;
  right:0;
  height:var(--dwp-topbar-h);
  background:#ffffff;
  border-bottom:1px solid rgba(15,23,42,.08);
  z-index:1050;
}

.dwp-hostinger-shell .main-header.dwp-topbar-fixed .container-fluid{height:100%;}
.dwp-hostinger-shell .main-header.dwp-topbar-fixed .main-header-container{height:100%;padding:0 22px;}

/* Topbar layout: left (logo+menu) | center (search) | right (actions) */
.dwp-hostinger-shell .main-header.dwp-topbar-fixed .main-header-container.dwp-topbar-grid{
  display:grid;
  grid-template-columns:auto 1fr auto;
  align-items:center;
  gap:16px;
}
.dwp-hostinger-shell .header-content-left{gap:14px;}
.dwp-hostinger-shell .header-content-right{gap:10px;}

/* Make header buttons easier to tap & avoid overlay click issues */
.dwp-hostinger-shell .header-link{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  border-radius:999px;
  position:relative;
  z-index:2;
}
.dwp-hostinger-shell .header-link:hover{background:rgba(15,23,42,.06);}
.dwp-hostinger-shell .header-link .header-link-icon{font-size:20px;}

/* Center search like Hostinger */
.dwp-hostinger-shell .header-content-center{display:flex;justify-content:center;}
.dwp-hostinger-shell .header-content-center .header-search{width:min(640px, 100%);position:relative;}
.dwp-hostinger-shell .header-search .input-group{border-radius:14px;overflow:hidden;}
.dwp-hostinger-shell .header-search .input-group-text{padding-left:14px;padding-right:12px;}
.dwp-hostinger-shell .header-search .form-control{height:44px;font-weight:700;}

/* Dropdown results for search */
.dwp-hostinger-shell #dwp_search_dropdown{
  position:absolute;
  left:0;
  right:0;
  top:calc(100% + 8px);
  box-shadow:0 18px 40px rgba(15,23,42,.10);
  border:1px solid rgba(15,23,42,.08);
  border-radius:14px;
  overflow:hidden;
  display:none;
}
.dwp-hostinger-shell #dwp_search_dropdown.show{display:block;}

/* Sidebar spacing like Hostinger */
.dwp-hostinger-shell .main-menu{padding:4px 0;margin-top:0 !important;}
.dwp-hostinger-shell .main-menu .slide{margin:0;}
.dwp-hostinger-shell .main-menu .side-menu__item{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px 14px;
  margin:6px 12px;
  border-radius:14px;
}
.dwp-hostinger-shell .main-menu .side-menu__icon{font-size:20px;min-width:22px;}
.dwp-hostinger-shell .main-menu .side-menu__label{font-size:14px;font-weight:800;}
.dwp-hostinger-shell .main-menu .side-menu__item.active{background:rgba(92,99,242,.10);}

/* Keep topbar above everything */
.dwp-hostinger-shell .main-header.dwp-topbar-fixed{z-index:12000;}

/* Brand (logo) in topbar */
.dwp-hostinger-shell .dwp-header-brand{display:flex;align-items:center;}
.dwp-hostinger-shell .dwp-header-brand img{height: 34px;width:auto;display:block;}

/* Sidebar should start under topbar */
.dwp-hostinger-shell .app-sidebar{
  top:var(--dwp-topbar-h) !important;
  height:calc(100vh - var(--dwp-topbar-h)) !important;
}
.dwp-hostinger-shell .main-sidebar-header.dwp-sidebar-header-spacer{display:none;}
.dwp-hostinger-shell .main-sidebar{padding-top:6px;justify-content:flex-start !important;}

/* Main content pushed under topbar */
.dwp-hostinger-shell .main-content.app-content{
  padding-top:var(--dwp-topbar-h);
}
.dwp-hostinger-shell .main-content.app-content .container-fluid.mt-4{margin-top:10px !important;}

/* WP admin bar safe-area (front-end logged in) */
html.dwp-gxon-standalone{margin-top:0 !important;}
html.dwp-gxon-standalone body{margin-top:0 !important;padding-top:0 !important;}
html.dwp-gxon-standalone #wpadminbar{display:none !important;}
body.admin-bar .dwp-hostinger-shell .main-header.dwp-topbar-fixed{ top:32px; }
body.admin-bar .dwp-hostinger-shell .app-sidebar{
  top:calc(var(--dwp-topbar-h) + 32px) !important;
  height:calc(100vh - var(--dwp-topbar-h) - 32px) !important;
}
body.admin-bar .dwp-hostinger-shell .main-content.app-content{ padding-top:calc(var(--dwp-topbar-h) + 32px); }
@media (max-width: 782px){
  body.admin-bar .dwp-hostinger-shell .main-header.dwp-topbar-fixed{ top:46px; }
  body.admin-bar .dwp-hostinger-shell .app-sidebar{
    top:calc(var(--dwp-topbar-h) + 46px) !important;
    height:calc(100vh - var(--dwp-topbar-h) - 46px) !important;
  }
  body.admin-bar .dwp-hostinger-shell .main-content.app-content{ padding-top:calc(var(--dwp-topbar-h) + 46px); }
}

/* Header search box sizing like Hostinger */
.dwp-hostinger-shell .header-search .form-control{min-width:260px;max-width:640px;}

/* Mobile: shrink topbar */
@media (max-width: 768px){
  :root{--dwp-topbar-h:62px;}
  .dwp-hostinger-shell .main-header.dwp-topbar-fixed .main-header-container{padding:0 14px;}
  .dwp-hostinger-shell .dwp-header-brand img{height:26px;}
}


/* FIX: badge terpotong + border form lebih tegas */
.dwp-card{ overflow: visible; }
.dwp-tab-badge{ top: 0; left: 0; }

.dwp-hero .form-control,
.dwp-hero .form-select,
.dwp-hero textarea.form-control{
  border-color: var(--dwp-border) !important;
  border-radius: 12px;
  background: #f8f6ff;
  color: var(--dwp-ink);
  font-weight: 600;
  transition: border-color .2s ease, box-shadow .2s ease, background .2s ease;
}
.dwp-hero .form-control::placeholder{ color: #7c6a8e; }
.dwp-hero .form-control:focus,
.dwp-hero .form-select:focus,
.dwp-hero textarea.form-control:focus{
  border-color: var(--dwp-primary) !important;
  box-shadow: 0 0 0 4px var(--dwp-ring) !important;
  background: #ffffff;
}
.dwp-page .form-control,
.dwp-page .form-select,
.dwp-page textarea.form-control{
  border-color: #111 !important;
}
.dwp-page .form-control:focus,
.dwp-page .form-select:focus,
.dwp-page textarea.form-control:focus{
  border-color: #111 !important;
  box-shadow: none !important;
}

/* Ringkasan Harga (Order Form) */
.dwp-hero .dwp-summary{
  border-radius:16px;
  border:1px solid rgba(123,45,214,.12);
  background:#fdf8ff;
  box-shadow:0 14px 30px rgba(36,12,55,.08);
}
.dwp-hero .dwp-summary .card-body{padding:18px;}
.dwp-hero .dwp-sum-row{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:6px 0;
  font-weight:800;
  color:var(--dwp-ink);
}
.dwp-hero .dwp-sum-row span:first-child{font-weight:800;color:#4d3d5e;}
.dwp-hero .dwp-sum-total span{font-size:16px;}
.dwp-hero .dwp-sum-total span:last-child{color:var(--dwp-primary);}
.dwp-hero #dwp_coupon_status{font-weight:700;color:#5d4b74;}

@keyframes dwp-rise{
  from{ opacity:0; transform: translateY(18px) scale(.985); }
  to{ opacity:1; transform: translateY(0) scale(1); }
}
@keyframes dwp-badge{
  from{ opacity:0; transform: translate(24px,-8px); }
  to{ opacity:1; transform: translate(24px,-18px); }
}


/* Dashboard wrapper (Vyzor) */
.dwp-vyzor-wrap{background:#f6f7fb;min-height:85vh;}
.dwp-vyzor-wrap .app-sidebar{background:#fff;}
.dwp-vyzor-wrap .main-header{background:#fff;}
.dwp-vyzor-wrap .side-menu__item.active{color: var(--dwp-primary) !important;}
.dwp-vyzor-wrap .dwp-notif-item.unread{background: #f1f5ff;}
.dwp-vyzor-wrap .dropdown-item.dwp-notif-item.unread .fw-semibold{font-weight:800;}


/* v1.2.3 layout polish: sidebar up + welcome up + mobile toggle click */
.dwp-hostinger-shell .main-menu-container{justify-content:flex-start !important;align-items:stretch !important;}
.dwp-hostinger-shell .app-sidebar .main-menu .side-menu__item{margin:6px 12px;}
/* Raise sidebar menu list */
.dwp-hostinger-shell .app-sidebar{padding-top:0 !important;}
.dwp-hostinger-shell #sidebar-scroll{padding-top:0 !important;}
/* Make home welcome card less tall */
.dwp-hostinger-shell .dwp-card-soft{padding-top:32px !important;padding-bottom:32px !important;}
/* Ensure hamburger always clickable */
.dwp-hostinger-shell .header-content-left{position:relative;z-index:1065;}
.dwp-hostinger-shell .header-content-center{position:relative;z-index:1;}
.dwp-hostinger-shell #dwp_sidebar_toggle{position:relative;z-index:1066;}
.dwp-hostinger-shell #dwp_sidebar_toggle .header-link-icon{pointer-events:none;}
.dwp-hostinger-shell #dwp_sidebar_toggle{cursor:pointer;}
@media (max-width: 640px){
  .dwp-hostinger-shell .main-header.dwp-topbar-fixed .main-header-container.dwp-topbar-grid{gap:10px;padding:0 12px;}
  .dwp-hostinger-shell .header-content-left{gap:10px;}
  .dwp-hostinger-shell .header-content-center{justify-content:center;}
  .dwp-hostinger-shell .header-content-center .header-search{width:min(420px, 100%);}
  .dwp-hostinger-shell .header-link{width:48px;height:48px;}
}

/* v1.2.4: Sidebar menu harus "naik" (mulai dari atas) + greeting seperti Hostinger */
.dwp-hostinger-shell .app-sidebar,
.dwp-hostinger-shell .app-sidebar .main-sidebar,
.dwp-hostinger-shell .app-sidebar #sidebar-scroll{
  overflow:visible;
}

/* Vyzor kadang membuat sidebar center vertical (flex). Paksa jadi block dan mulai dari atas. */
.dwp-hostinger-shell .app-sidebar .main-sidebar{
  display:block !important;
  padding-top:16px !important;
  margin-top:0 !important;
}
.dwp-hostinger-shell .app-sidebar .main-menu-container{
  margin-top:0 !important;
  padding-top:0 !important;
}

/* Body container spacing agar judul tidak di tengah */
.dwp-hostinger-shell .main-content.app-content .dwp-page-body{
  margin-top:0 !important;
  padding-top:18px;
}

/* Home greeting styles */
.dwp-hostinger-shell .dwp-home-head{max-width:1080px;margin:0 auto 14px;padding:0 6px;}
.dwp-hostinger-shell .dwp-home-title{font-size:28px;font-weight:900;margin:0;color:#111827;}
.dwp-hostinger-shell .dwp-home-sub{margin-top:8px;font-weight:700;line-height:1.55;}
.dwp-hostinger-shell .dwp-home-card{max-width:1080px;margin:0 auto;}
.dwp-hostinger-shell .dwp-home-card-row{display:flex;gap:14px;align-items:center;}
.dwp-hostinger-shell .dwp-home-card-icon img{height:48px;width:auto;display:block;}
.dwp-hostinger-shell .dwp-home-card-title{font-weight:900;font-size:16px;color:#111827;}
.dwp-hostinger-shell .dwp-home-card-desc{margin-top:6px;color:#6b7280;font-weight:700;line-height:1.55;}

@media (max-width: 768px){
  .dwp-hostinger-shell .dwp-home-title{font-size:22px;}
  .dwp-hostinger-shell .dwp-home-card-row{align-items:flex-start;}
}


/* === Mobile header & greeting fixes === */
.dwp-mobile-greeting-logo{
  text-align:center;
  margin: 6px 0 14px;
}
.dwp-mobile-greeting-logo img{
  height: 54px;
  width: auto;
  max-width: 70vw;
  object-fit: contain;
  display:inline-block;
}

/* make header logo keep aspect ratio */
.dwp-header-brand img{
  width:auto !important;
  height:30px !important;
  object-fit: contain;
  flex-shrink:0;
}

/* ensure home card icon not 'gepeng' in Safari */
.dwp-home-card-icon img{
  width:48px !important;
  height:48px !important;
  object-fit: contain;
}

/* menu toggle tap target (iOS friendly) */
#dwp_sidebar_toggle{
  display:flex !important;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  padding:0 !important;
  border-radius:999px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* === Purchases table (Vyzor Table Head Info look) === */
.dwp-table-wrap{
  border-radius:10px;
  overflow-x:auto;
  overflow-y:hidden;
  -webkit-overflow-scrolling:touch;
}
.dwp-table-vyzor{margin:0;min-width:720px}
.dwp-table-vyzor th,
.dwp-table-vyzor td{border:0 !important}
/* Force Vyzor 'info' head color even if theme overrides */
.dwp-table-vyzor thead.table-info th{
  background-color:#e6f2ff !important;
  background-color:rgba(var(--info-rgb, 13, 202, 240), .12) !important;
}
/* subtle row separators */
.dwp-table-vyzor tbody tr td{border-bottom:1px solid rgba(0,0,0,.06) !important}
.dwp-table-vyzor tbody tr:last-child td{border-bottom:0 !important}
/* nicer spacing */
.dwp-table-vyzor thead th{padding:14px 18px}
.dwp-table-vyzor tbody td{padding:16px 18px}

/* simple pagination (next/prev) */
.dwp-pagination{
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:8px;
  margin-top:12px;
}
.dwp-pagination .btn{
  border-radius:10px;
}
.dwp-pagination .dwp-page-meta{
  font-size:13px;
  color:#6c757d;
  margin-right:auto;
}

/* Hide header menu toggle on desktop, keep it on mobile */
@media (min-width: 768px){
  #dwp_sidebar_toggle{display:none!important}
}

/* =============================
   GXON Standalone Fixes
   - Prevent brand logo overflow
   - Provide sane defaults for theme/sidebar attributes
============================= */
.dwp-gxon-dashboard .app-navbar-brand img,
.dwp-gxon-dashboard .app-navbar-brand .navbar-brand-logo img,
.dwp-gxon-dashboard .app-navbar-brand .navbar-brand-mini img{
  height: 34px;
  width: auto;
  max-width: 230px;
  display: block;
}
.dwp-gxon-dashboard .app-navbar-brand a{
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100%;
  overflow: hidden;
}
/* If data-bs-theme is missing for any reason, avoid showing both logos */
html:not([data-bs-theme]) .visible-dark{display:none;}
html:not([data-bs-theme]) .visible-light{display:inline-flex;}
/* Ensure full-bleed page with no stray margins */
body.dwp-gxon-standalone{margin:0;}

/* --- Fix: avoid duplicate logos in GXON brand area ---
   Some installations may not load the original GXON CSS that toggles
   .navbar-brand-mini/.visible-light/.visible-dark, causing 2-3 logos
   to appear side-by-side. Keep only the main logo by default.
*/
.dwp-gxon-dashboard .app-navbar-brand .navbar-brand-mini{display:none !important;}
/* Full sidebar: show full logo only */
html[data-app-sidebar="full"] .dwp-gxon-dashboard .app-navbar-brand .navbar-brand-logo{display:flex !important;}
html[data-app-sidebar="full"] .dwp-gxon-dashboard .app-navbar-brand .navbar-brand-mini{display:none !important;}

/* Mini sidebar (collapsed/hover): show mini logo only */
html[data-app-sidebar="mini"] .dwp-gxon-dashboard .app-navbar-brand .navbar-brand-logo{display:none !important;}
html[data-app-sidebar="mini"] .dwp-gxon-dashboard .app-navbar-brand .navbar-brand-mini{display:inline-flex !important;}
html[data-app-sidebar="mini-hover"] .dwp-gxon-dashboard .app-navbar-brand .navbar-brand-logo{display:none !important;}
html[data-app-sidebar="mini-hover"] .dwp-gxon-dashboard .app-navbar-brand .navbar-brand-mini{display:inline-flex !important;}
.dwp-gxon-dashboard .app-navbar-brand .navbar-brand-mini img{height:34px;width:34px;max-width:34px;}
html[data-bs-theme="light"] .visible-dark{display:none!important;}
html[data-bs-theme="light"] .visible-light{display:inline-flex!important;}
html[data-bs-theme="dark"] .visible-light{display:none!important;}
html[data-bs-theme="dark"] .visible-dark{display:inline-flex!important;}


/* =============================
   DonasiWP Brand Color (Primary)
   - Replace GXON/Bootstrap primary (blue) with DonasiWP purple
============================= */
.dwp-gxon-dashboard{
  --bs-primary:#a02baa;
  --bs-primary-rgb:160,43,170;
}

/* Dashboard buttons follow public form button color */
.dwp-gxon-dashboard .btn-primary{
  background: linear-gradient(180deg,var(--dwp-btn-purple),var(--dwp-btn-purple-dark)) !important;
  border-color: var(--dwp-btn-purple-dark) !important;
  color:#fff;
  box-shadow: 0 10px 18px rgba(123,45,214,.32);
}
.dwp-gxon-dashboard .btn-primary:hover,
.dwp-gxon-dashboard .btn-primary:focus,
.dwp-gxon-dashboard .btn-primary:active,
.dwp-gxon-dashboard .btn-primary.active,
.dwp-gxon-dashboard .show > .btn-primary.dropdown-toggle{
  background: linear-gradient(180deg,var(--dwp-btn-purple-dark),#6a24d6) !important;
  border-color: #6a24d6 !important;
  color:#fff;
}
.dwp-gxon-dashboard .btn-primary:focus{
  box-shadow: 0 0 0 4px rgba(123,45,214,.24) !important;
}


/* =============================
   Notifications dropdown header
   - Title left, action right (always inline like reference)
============================= */
.dwp-gxon-dashboard .dwp-notif-head{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px;
  flex-wrap:nowrap !important;
}
.dwp-gxon-dashboard .dwp-notif-head .dwp-notif-title{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
  flex:1 1 auto;
}
.dwp-gxon-dashboard .dwp-notif-head .dwp-notif-title h6{
  margin:0;
  line-height:1.2;
}
.dwp-gxon-dashboard .dwp-notif-head .dwp-notif-mark{
  flex:0 0 auto;
  margin-left:12px;
  white-space:nowrap;
  font-size:12px;
  line-height:1.2;
}
@media (max-width: 380px){
  .dwp-gxon-dashboard .dwp-notif-head .dwp-notif-mark{
    font-size:11px;
  }
}

/* =============================
   Notification bell badge
   - Fix clipped badge on header icon (keep badge inside button)
============================= */
.dwp-gxon-dashboard button[aria-label="Notifications"]{
  overflow: visible !important;
}
.dwp-gxon-dashboard #dwp_notif_badge{
  top: 4px !important;
  right: 4px !important;
  margin-top: 0 !important;
  margin-right: 0 !important;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  line-height: 1;
}
/* override Bootstrap translate-middle (uses !important) */
.dwp-gxon-dashboard #dwp_notif_badge.translate-middle{
  transform: translate(0,0) !important;
}