* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
}

/* PALET WARNA:
   Purple: #C5ADED
   Pink Lilac: #F8ABEB
   Soft Pink: #FFC8DD
   Light Blue: #BCE0FF
   Soft Blue: #A2D2FF
   Background Light Soft Pink-Blue Tint: #F7F5FE
*/

body {
  background: linear-gradient(135deg, #F9F7FE 0%, #EFF6FF 100%);
  color: #2D2738;
}

.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 20px 40px 20px;
}

/* GEN-Z HEADER STYLING */
.genz-header {
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 2px solid #FFC8DD;
  padding: 16px 30px;
  position: sticky;
  top: 0;
  z-index: 90;
  box-shadow: 0 4px 15px rgba(197, 173, 237, 0.15);
}

.header-container {
  max-width: 1120px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.genz-brand h1 {
  font-size: 24px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c4bb3 0%, #d84db8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  letter-spacing: -0.5px;
}

.genz-brand span {
  font-size: 11px;
  color: #726d83;
  font-weight: 700;
  display: block;
}

.genz-search-box {
  flex: 1;
  max-width: 480px;
  display: flex;
  background: #ffffff;
  border-radius: 14px;
  padding: 4px;
  border: 2px solid #BCE0FF;
  transition: all 0.2s;
  box-shadow: 0 2px 8px rgba(188, 224, 255, 0.2);
}

.genz-search-box:focus-within {
  border-color: #C5ADED;
  box-shadow: 0 0 0 4px rgba(197, 173, 237, 0.3);
}

.genz-search-box input {
  flex: 1;
  border: none;
  background: transparent;
  outline: none;
  padding: 10px 14px;
  font-size: 13px;
  color: #2D2738;
}

.genz-search-box .btn-search-icon {
  background: #A2D2FF;
  border: none;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  color: #1e3a8a;
}

.genz-user-box {
  display: flex;
  align-items: center;
  gap: 12px;
}

#cust-name-tag {
  font-size: 13px;
  font-weight: 800;
  color: #6b3ba7;
}

.btn-genz-logout {
  background: #ff758f;
  color: white;
  border: none;
  padding: 8px 14px;
  border-radius: 10px;
  font-size: 12px;
  font-weight: 800;
  cursor: pointer;
  transition: transform 0.2s;
}

.btn-genz-logout:hover {
  transform: scale(1.05);
}

/* BANNER HERO */
.banner-hero {
  background: linear-gradient(135deg, #FFC8DD 0%, #BCE0FF 100%);
  border: 2px solid #ffffff;
  border-radius: 24px;
  padding: 32px;
  margin-top: 25px;
  box-shadow: 0 10px 30px rgba(248, 171, 235, 0.25);
}

.banner-tag {
  display: inline-block;
  background: #ffffff;
  color: #8c53d1;
  padding: 4px 14px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 800;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.banner-hero h2 {
  font-size: 24px;
  font-weight: 800;
  color: #2b2140;
  margin-bottom: 8px;
}

.banner-hero p {
  font-size: 13px;
  color: #4b4457;
  font-weight: 600;
}

/* SECTION TITLE */
.section-title-box {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}

.section-title-box h2 {
  font-size: 20px;
  font-weight: 800;
  color: #2D2738;
}

.count-badge {
  font-size: 12px;
  color: #6b3ba7;
  font-weight: 700;
  background: #FFC8DD;
  padding: 6px 12px;
  border-radius: 12px;
}

/* GRID PRODUK GEN-Z */
.genz-grid-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 22px;
}

.genz-card {
  background: #ffffff;
  border-radius: 20px;
  overflow: hidden;
  border: 2px solid #BCE0FF;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
  box-shadow: 0 4px 12px rgba(162, 210, 255, 0.15);
}

.genz-card:hover {
  transform: translateY(-6px);
  border-color: #C5ADED;
  box-shadow: 0 14px 28px rgba(197, 173, 237, 0.35);
}

.genz-img-wrapper {
  width: 100%;
  height: 190px;
  background: #F8ABEB;
  position: relative;
  overflow: hidden;
}

.genz-img-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.genz-card:hover .genz-img-wrapper img {
  transform: scale(1.05);
}

.genz-card-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.badge-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

.genz-badge {
  padding: 4px 10px;
  border-radius: 8px;
  font-size: 10px;
  font-weight: 800;
}

.badge-digital { background-color: #FFC8DD; color: #8c53d1; }
.badge-physical { background-color: #BCE0FF; color: #1e3a8a; }

/* TERJUAL BADGE ALA SHOPEE */
.sold-count-tag {
  font-size: 11px;
  font-weight: 800;
  color: #726d83;
  background: #F9F7FE;
  padding: 3px 9px;
  border-radius: 12px;
  border: 1px solid #E2D9F3;
}

.genz-title {
  font-size: 14px;
  font-weight: 700;
  color: #2D2738;
  line-height: 1.4;
  margin-bottom: 12px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.genz-price {
  font-size: 18px;
  font-weight: 800;
  color: #7c4bb3;
  margin-bottom: 14px;
}

/* BUTTON STYLES PASTELES */
.btn-genz-primary {
  width: 100%;
  background: linear-gradient(135deg, #C5ADED 0%, #A2D2FF 100%);
  color: #2b2140;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  display: block;
  box-shadow: 0 4px 10px rgba(197, 173, 237, 0.3);
}

.btn-genz-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(197, 173, 237, 0.45);
}

.btn-genz-secondary {
  width: 100%;
  background: linear-gradient(135deg, #F8ABEB 0%, #FFC8DD 100%);
  color: #2b2140;
  border: none;
  padding: 12px;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 4px 10px rgba(248, 171, 235, 0.3);
}

.btn-genz-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 14px rgba(248, 171, 235, 0.45);
}

/* GEN-Z LANDING AUTH WRAPPER */
.genz-auth-wrapper {
  display: flex;
  min-height: 100vh;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #C5ADED 0%, #FFC8DD 50%, #BCE0FF 100%);
}

.genz-auth-card {
  background: #ffffff;
  border: 3px solid #ffffff;
  border-radius: 28px;
  padding: 35px;
  width: 100%;
  max-width: 420px;
  box-shadow: 0 20px 50px rgba(197, 173, 237, 0.35);
  text-align: center;
}

.brand-badge {
  display: inline-block;
  background: #FFC8DD;
  color: #8c53d1;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 800;
  margin-bottom: 12px;
}

.genz-logo {
  font-size: 32px;
  font-weight: 800;
  background: linear-gradient(135deg, #7c4bb3 0%, #d84db8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  margin-bottom: 6px;
}

.genz-tagline {
  font-size: 13px;
  color: #615a70;
  margin-bottom: 22px;
  line-height: 1.4;
  font-weight: 600;
}

.genz-tab-box {
  display: flex;
  gap: 8px;
  background: #F7F5FE;
  padding: 5px;
  border-radius: 14px;
  margin-bottom: 20px;
  border: 1px solid #E2D9F3;
}

.genz-tab-btn {
  flex: 1;
  padding: 10px;
  border: none;
  background: transparent;
  color: #726d83;
  font-weight: 700;
  font-size: 13px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.2s;
}

.genz-tab-btn.active {
  background: #C5ADED;
  color: #2b2140;
}

.admin-link-box {
  margin-top: 22px;
  padding-top: 15px;
  border-top: 1px solid #E2D9F3;
}

.link-admin-portal {
  color: #7c4bb3;
  font-size: 12px;
  text-decoration: none;
  font-weight: 800;
  transition: color 0.2s;
}

.link-admin-portal:hover {
  color: #d84db8;
}

/* FORM FIELD GEN-Z */
.form-group {
  margin-bottom: 14px;
  text-align: left;
}

.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  color: #4b4457;
  margin-bottom: 6px;
}

.form-group input, .form-group textarea, .form-group select {
  width: 100%;
  padding: 12px 14px;
  background: #F9F7FE;
  border: 2px solid #BCE0FF;
  border-radius: 12px;
  color: #2D2738;
  font-size: 13px;
  outline: none;
  transition: border-color 0.2s;
}

.form-group input:focus, .form-group textarea:focus, .form-group select:focus {
  border-color: #C5ADED;
  background: #ffffff;
}

.error-text {
  color: #ef4444;
  font-size: 12px;
  margin-bottom: 12px;
  text-align: left;
  font-weight: 700;
}

.info-note {
  font-size: 11px;
  color: #726d83;
  margin-bottom: 14px;
  text-align: left;
}

/* MODAL STYLING GEN-Z */
.modal {
  display: none;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(43, 33, 64, 0.4);
  backdrop-filter: blur(8px);
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.genz-modal {
  background: #ffffff;
  padding: 28px;
  border-radius: 24px;
  width: 100%;
  max-width: 460px;
  position: relative;
  box-shadow: 0 25px 50px rgba(197, 173, 237, 0.3);
  color: #2D2738;
  border: 2px solid #FFC8DD;
}

.price-highlight {
  font-size: 20px;
  font-weight: 800;
  color: #7c4bb3;
  margin-bottom: 15px;
}

.close-btn {
  position: absolute;
  right: 20px;
  top: 18px;
  font-size: 24px;
  font-weight: bold;
  cursor: pointer;
  color: #94a3b8;
}

/* ADMIN DASHBOARD UI */
.grid-admin-products {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

.admin-prod-card {
  background: #ffffff;
  border-radius: 16px;
  border: 2px solid #BCE0FF;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(162, 210, 255, 0.15);
}

.admin-prod-img {
  width: 100%;
  height: 150px;
  object-fit: cover;
  background: #FFC8DD;
}

.admin-prod-content {
  padding: 14px;
}

.main-nav-btn {
  padding: 10px 18px;
  background: #ffffff;
  border: 2px solid #BCE0FF;
  border-radius: 12px;
  font-weight: 800;
  font-size: 13px;
  color: #5c5870;
  cursor: pointer;
}

.main-nav-btn.active {
  background: #C5ADED;
  color: #2b2140;
  border-color: #C5ADED;
}

.admin-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
.filter-tabs { display: flex; gap: 10px; margin-bottom: 20px; }

.tab-btn {
  padding: 8px 18px;
  background: #ffffff;
  border: 2px solid #BCE0FF;
  border-radius: 20px;
  cursor: pointer;
  font-weight: 700;
  font-size: 12px;
  color: #5c5870;
}

.tab-btn.active { background: #C5ADED; color: #2b2140; border-color: #C5ADED; }

.order-card {
  background: #ffffff;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  border: 2px solid #E2D9F3;
  border-left: 6px solid #C5ADED;
  box-shadow: 0 4px 12px rgba(197, 173, 237, 0.15);
}

.order-card.status-pending { border-left-color: #F8ABEB; }
.order-card.status-paid { border-left-color: #10b981; }
.order-card.status-shipped { border-left-color: #A2D2FF; }

.order-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px solid #F0EAFB; }
.badge-status { padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 800; }
.status-pending .badge-status { background: #FFC8DD; color: #8c53d1; }
.status-paid .badge-status { background: #d1fae5; color: #047857; }
.status-shipped .badge-status { background: #BCE0FF; color: #1e3a8a; }

.order-body { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; font-size: 13px; color: #2D2738; }
.order-actions { margin-top: 14px; padding-top: 10px; border-top: 1px dashed #E2D9F3; display: flex; gap: 10px; flex-wrap: wrap; }

.subadmin-card, .customer-card {
  background: #ffffff;
  border: 2px solid #BCE0FF;
  border-radius: 14px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

.badge-role {
  background: #C5ADED;
  color: #2b2140;
  font-size: 11px;
  padding: 4px 10px;
  border-radius: 12px;
  font-weight: 800;
}

.btn-gear {
  background: #FFC8DD;
  color: #8c53d1;
  border: 1px solid #F8ABEB;
  padding: 8px 14px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 12px;
  font-weight: 800;
}