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

@import url("https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c:wght@400;500&display=swap");

:root {
  --pink: #e75486;
  --pink-dark: #d94377;

  --pink-soft: #fff0f5;
  --pink-soft-2: #fff8fa;
  --pink-border: #f1d5df;

  --green: #269b62;
  --green-soft: #e7f7ef;

  --text: #242124;
  --muted: #898286;

  --border: #e9e4e6;

  --white: #ffffff;
}


/* =====================================================
   RESET
===================================================== */

* {
  box-sizing: border-box;
}


html {
  min-height: 100%;

  scroll-behavior: smooth;
}


body {
  margin: 0;

  min-height: 100dvh;

  overflow-x: hidden;
  overflow-y: auto;

  color: var(--text);

  background: #fffafb;

  font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;

  -webkit-text-size-adjust: 100%;
}


button,
input {
  font: inherit;
}


button,
input,
a {
  -webkit-tap-highlight-color: transparent;
}


button {
  cursor: pointer;
}


.hidden {
  display: none !important;
}


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

.neyyi-page {
  width: 100%;
  max-width: 430px;

  min-height: 100dvh;

  margin: 0 auto;

  padding:
    0
    14px
    225px;

  transition:
    padding-bottom .15s ease;
}


/*
  Saat ada input aktif,
  hanya tambah ruang scroll.

  Checkout dan nav TIDAK hilang.
*/

body.form-input-active .neyyi-page {
  padding-bottom: 72vh;
}


/* =====================================================
   HEADER
===================================================== */

.neyyi-header {
  height: 64px;

  display: flex;

  align-items: center;
  justify-content: center;
}


.neyyi-brand {
  color: var(--pink);

  font-size: 19px;
  font-weight: 700;

  text-align: center;
}


/* =====================================================
   PRODUCT
===================================================== */

.product-box {
  min-height: 77px;

  padding:
    15px
    16px;

  margin-bottom: 11px;

  background: var(--white);

  border:
    1px solid
    var(--border);

  border-radius: 12px;
}


.product-top {
  display: flex;

  align-items: center;

  flex-wrap: wrap;

  gap: 9px;
}


.product-name {
  color: var(--text);

  font-size: 14px;
  font-weight: 700;
}


.store-badge {
  padding:
    4px
    10px;

  border-radius: 7px;

  font-size: 10px;
  font-weight: 700;
}


.store-badge.open {
  color: var(--green);

  background: var(--green-soft);
}


.store-badge.closed {
  color: var(--pink-dark);

  background: var(--pink-soft);
}


.product-subtitle {
  margin:
    9px
    0
    0;

  color: #777174;

  font-size: 12px;

  line-height: 1.35;
}


/* =====================================================
   HARGA + STOK
===================================================== */

.store-summary {
  display: grid;

  grid-template-columns:
    repeat(
      2,
      minmax(0, 1fr)
    );

  gap: 9px;

  margin-bottom: 19px;
}


.store-summary-card {
  min-width: 0;
  min-height: 79px;

  padding:
    11px
    8px;

  display: flex;

  flex-direction: column;

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

  text-align: center;

  background: var(--white);

  border:
    1px solid
    var(--border);

  border-radius: 12px;
}


.store-summary-card span {
  margin-bottom: 7px;

  color: #676164;

  font-size: 10px;
  line-height: 1.1;

  text-align: center;
}


.store-summary-card strong {
  max-width: 100%;

  color: var(--text);

  font-size: 15px;
  font-weight: 700;

  line-height: 1.2;
}


.price-value {
  color: var(--pink) !important;
}


/* =====================================================
   SECTION
===================================================== */

.home-section {
  margin-bottom: 20px;
}


.home-section-title {
  margin:
    0
    0
    12px;

  display: flex;

  align-items: center;

  gap: 7px;

  color: var(--text);

  font-size: 16px;
  font-weight: 700;

  line-height: 1.25;
}


.home-section-title svg {
  width: 17px;
  height: 17px;

  flex:
    0
    0
    17px;

  stroke: var(--pink);
}


.pink-mark {
  color: var(--pink);

  font-size: 14px;

  line-height: 1;
}


/* =====================================================
   PRESET ROBUX
===================================================== */

.robux-presets {
  display: flex;

  flex-wrap: wrap;
  justify-content: center;

  gap: 12px 12px;

  margin-bottom: 14px;
}


.robux-presets button {
  flex: 0 0 calc((100% - 24px) / 3);

  min-width: 0;
  min-height: 62px;

  padding: 0 8px;

  display: inline-flex;

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

  gap: 6px;

  color: var(--pink);

  background: var(--white);

  border: 1px solid #f0e9ed;

  border-radius: 18px;

  box-shadow: 0 8px 18px rgba(233, 169, 197, .12);

  outline: none;

  transition:
    background .18s ease,
    color .18s ease,
    border-color .18s ease,
    box-shadow .18s ease,
    transform .12s ease;
}


.robux-presets button:nth-child(4),
.robux-presets button:nth-child(5) {
  flex-basis: calc((100% - 24px) / 3);
}


.robux-presets button:nth-child(6) {
  flex-basis: calc((100% - 24px) / 3);
}


.robux-presets button strong,
.robux-presets button span {
  font-size: 17px;
  font-weight: 700;

  line-height: 1;
}


.robux-presets button span {
  margin-top: 0;

  color: inherit;
}


.robux-presets button.active {
  background: #fff4f8;

  border-color: #e4a3b9;

  box-shadow:
    inset 0 0 0 1px rgba(228, 163, 185, .55),
    0 6px 14px rgba(233, 169, 197, .10);
}


.robux-presets button.active strong {
  color: var(--pink);
}


.robux-presets button.active span {
  color: var(--pink);
}


.robux-presets button:active {
  transform: scale(.98);
}


/* =====================================================
   CUSTOM ROBUX
===================================================== */

.custom-robux-box {
  min-height: 68px;

  padding:
    9px
    10px;

  display: flex;

  align-items: center;

  gap: 10px;

  background: var(--pink-soft-2);

  border:
    1px dashed
    var(--pink-border);

  border-radius: 11px;

  scroll-margin-top: 85px;
}


.custom-robux-icon {
  width: 36px;
  height: 36px;

  flex:
    0
    0
    36px;

  display: grid;

  place-items: center;

  color: var(--pink);

  background: #ffe7ef;

  border-radius: 8px;
}


.custom-robux-icon svg {
  width: 16px;
  height: 16px;
}


.custom-robux-info {
  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.custom-robux-info strong {
  color: #4b4548;

  font-size: 11px;
  font-weight: 700;

  line-height: 1.25;
}


.custom-robux-info span {
  color: var(--muted);

  font-size: 10px;
}


.custom-robux-input {
  width: 126px;
  height: 41px;

  flex:
    0
    0
    126px;

  display: flex;

  align-items: center;

  overflow: hidden;

  background: var(--white);

  border:
    1px solid
    var(--pink-border);

  border-radius: 8px;
}


.custom-robux-input input {
  width: 76px;
  height: 100%;

  min-width: 0;

  padding:
    0
    8px;

  color: var(--text);

  background: transparent;

  border: 0;

  outline: none;

  font-size: 12px;
}


.custom-robux-input input::placeholder {
  color: #aaa4a7;
}


.custom-robux-input span {
  margin-left: auto;

  padding-right: 9px;

  color: var(--pink);

  font-size: 10px;
  font-weight: 700;
}


/* =====================================================
   USERNAME
===================================================== */

.field-box {
  width: 100%;

  min-height: 67px;

  padding:
    10px
    13px;

  background: var(--white);

  border:
    1px solid
    var(--border);

  border-radius: 11px;

  scroll-margin-top: 85px;
}


.field-box:focus-within {
  border-color: #ea94b1;
}


.field-box label {
  display: block;

  margin-bottom: 7px;

  color: #70696d;

  font-size: 11px;
}


.field-box input {
  width: 100%;

  padding: 0;

  color: var(--text);

  background: transparent;

  border: 0;

  outline: none;

  font-size: 16px;
  font-weight: 600;
}


.field-box input::placeholder {
  color: #aaa4a7;

  font-weight: 400;
}


.username-message {
  min-height: 0;

  margin:
    5px
    3px
    8px;

  color: var(--pink-dark);

  font-size: 10px;

  line-height: 1.3;
}


/* =====================================================
   ROBLOX PROFILE
===================================================== */

.roblox-card {
  width: 100%;

  min-height: 72px;

  padding:
    9px
    12px;

  margin-bottom: 10px;

  display: flex;

  align-items: center;

  gap: 11px;

  color: inherit;

  text-decoration: none;

  background: var(--white);

  border:
    1px solid
    var(--border);

  border-radius: 11px;
}


.roblox-card img {
  width: 50px;
  height: 50px;

  flex:
    0
    0
    50px;

  object-fit: cover;

  background: #f5f2f3;

  border-radius: 50%;
}


.roblox-card-info {
  min-width: 0;

  display: flex;

  flex-direction: column;
}


.roblox-card-info strong {
  max-width: 100%;

  overflow: hidden;

  color: var(--text);

  font-size: 16px;
  font-weight: 700;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.roblox-card-info span {
  margin-top: 2px;

  color: #746e71;

  font-size: 12px;
}


.roblox-card-info small {
  margin-top: 4px;

  color: var(--green);

  font-size: 11px;
  font-weight: 600;
}


/* =====================================================
   WHATSAPP
===================================================== */

.whatsapp-box {
  width: 100%;

  min-height: 67px;

  padding:
    9px
    12px;

  display: flex;

  align-items: center;

  gap: 11px;

  background: var(--white);

  border:
    1px solid
    var(--border);

  border-radius: 11px;

  /*
    Memberi ruang agar browser
    bisa menggeser WA tinggi.
  */

  scroll-margin-top: 80px;
  scroll-margin-bottom: 65vh;
}


.whatsapp-box:focus-within {
  border-color: #ea94b1;
}


.whatsapp-icon {
  width: 36px;
  height: 36px;

  flex:
    0
    0
    36px;

  display: grid;

  place-items: center;

  color: var(--pink);

  background: #ffe7ef;

  border-radius: 8px;
}


.whatsapp-icon svg {
  width: 17px;
  height: 17px;
}


.whatsapp-field {
  flex: 1;

  min-width: 0;
}


.whatsapp-field label {
  display: block;

  margin-bottom: 6px;

  color: #70696d;

  font-size: 11px;
}


.whatsapp-field input {
  width: 100%;

  padding: 0;

  color: var(--text);

  background: transparent;

  border: 0;

  outline: none;

  font-size: 15px;
}


.whatsapp-field input::placeholder {
  color: #aaa4a7;
}


.whatsapp-helper {
  margin:
    6px
    3px
    0;

  color: #8e878b;

  font-size: 10px;

  line-height: 1.35;
}




/* =====================================================
   VOUCHER V1
===================================================== */

.voucher-box {
  margin-top: 16px;
  padding: 14px;
  background: #fffafb;
  border: 1px solid var(--pink-border);
  border-radius: 13px;
}

.voucher-heading {
  margin-bottom: 10px;
}

.voucher-heading strong,
.voucher-heading span {
  display: block;
}

.voucher-heading strong {
  color: var(--text);
  font-size: 12px;
  font-weight: 700;
}

.voucher-heading span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 9.5px;
}

.voucher-input-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 8px;
}

.voucher-input-row input {
  min-width: 0;
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--pink-border);
  border-radius: 10px;
  background: #fff;
  color: var(--text);
  font-size: 12px;
  text-transform: uppercase;
  outline: none;
}

.voucher-input-row input:focus {
  border-color: var(--pink);
}

.voucher-input-row button {
  min-height: 42px;
  padding: 0 14px;
  border: 0;
  border-radius: 10px;
  background: var(--pink-soft);
  color: var(--pink);
  font-size: 10px;
  font-weight: 800;
}

.voucher-input-row button:disabled {
  opacity: .5;
}

.voucher-message {
  min-height: 14px;
  margin: 7px 2px 0;
  color: #a68d95;
  font-size: 9.5px;
  line-height: 1.4;
}

.voucher-message.success {
  color: #55916a;
}

.voucher-message.error {
  color: #c94c75;
}

.checkout-price-stack {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.checkout-discount {
  color: #55916a;
  font-size: 9px;
  font-weight: 700;
}

.checkout-discount.hidden {
  display: none;
}


/* =====================================================
   CHECKOUT
===================================================== */

.checkout-bar {
  position: fixed;

  left: 50%;
  bottom: 70px;

  z-index: 45;

  width: 100%;
  max-width: 430px;

  transform:
    translateX(-50%);

  padding:
    9px
    14px
    7px;

  background:
    rgba(255, 250, 251, .985);

  border-top:
    1px solid
    var(--border);
}


.checkout-total {
  min-height: 55px;

  padding:
    8px
    12px;

  margin-bottom: 8px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  background: #fff6f9;

  border:
    1px solid
    var(--pink-border);

  border-radius: 10px;
}


.checkout-total-info {
  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 3px;
}


.checkout-total-info strong {
  color: var(--text);

  font-size: 13px;
  font-weight: 700;
}


.checkout-total-info span {
  color: var(--muted);

  font-size: 10px;
}


.checkout-total-value {
  flex:
    0
    0
    auto;

  color: var(--pink);

  font-size: 20px;
  font-weight: 700;

  line-height: 1;
}


.continue-button {
  width: 100%;

  min-height: 44px;

  padding:
    0
    15px;

  display: flex;

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

  color: var(--white);

  background: var(--pink);

  border: 0;

  border-radius: 9px;

  font-size: 13px;
  font-weight: 700;
}


.continue-button:disabled {
  opacity: .48;

  cursor: not-allowed;
}


.continue-button:active:not(:disabled) {
  transform: scale(.99);
}


.order-message {
  min-height: 12px;

  margin:
    5px
    2px
    0;

  color: #c94c75;

  text-align: center;

  font-size: 9px;

  line-height: 1.2;
}


/* =====================================================
   BOTTOM NAV
===================================================== */

.customer-bottom-nav {
  position: fixed;

  left: 50%;
  bottom: 0;

  z-index: 50;

  width: 100%;
  max-width: 430px;

  height: 64px;

  transform:
    translateX(-50%);

  display: grid;

  grid-template-columns:
    repeat(
      4,
      minmax(0, 1fr)
    );

  padding-bottom:
    env(safe-area-inset-bottom);

  background:
    rgba(255, 255, 255, .99);

  border-top:
    1px solid
    var(--border);
}


.bottom-nav-item {
  position: relative;

  display: flex;

  flex-direction: column;

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

  gap: 3px;

  padding: 6px 2px 8px;

  color: #2d292b;

  text-decoration: none;

  font-size: 10px;
  line-height: 1.1;

  text-align: center;

  isolation: isolate;
}


.bottom-nav-item span {
  display: block;
}


.bottom-nav-item svg {
  width: 19px;
  height: 19px;
  flex: 0 0 auto;
}


.bottom-nav-item.active {
  color: var(--pink);
}


.bottom-nav-item.active::before {
  content: "";

  position: absolute;

  z-index: -1;

  width: 56px;
  height: 44px;

  background: var(--pink-soft);

  border-radius: 12px;
}


@media (max-width: 380px) {

  .customer-bottom-nav {
    height: 60px;
  }


  .bottom-nav-item {
    font-size: 9.5px;
    gap: 2px;
    padding-left: 1px;
    padding-right: 1px;
  }


  .bottom-nav-item svg {
    width: 18px;
    height: 18px;
  }


  .bottom-nav-item.active::before {
    width: 52px;
    height: 40px;
  }
}


/* =====================================================
   LOADING
===================================================== */

.page-loader {
  position: fixed;

  inset: 0;

  z-index: 1000;

  display: flex;

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

  opacity: 1;

  visibility: visible;

  background: #fffafb;

  transition:
    opacity .2s ease,
    visibility .2s ease;
}


.page-loader.hidden {
  opacity: 0;

  visibility: hidden;

  pointer-events: none;
}


.loading-content {
  display: flex;

  flex-direction: column;

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

  gap: 16px;

  text-align: center;
}


.loading-logo {
  width: 92px;
  height: 92px;

  object-fit: contain;

  animation:
    logoPulse
    1.1s
    ease-in-out
    infinite;
}


.loader-spinner {
  width: 28px;
  height: 28px;

  border:
    3px solid
    #f6dae3;

  border-top-color:
    var(--pink);

  border-radius: 50%;

  animation:
    spinner
    .7s
    linear
    infinite;
}


.loading-text {
  margin-top: -5px;

  color: #998e92;

  font-size: 11px;
}


@keyframes spinner {

  to {
    transform:
      rotate(360deg);
  }
}


@keyframes logoPulse {

  0%,
  100% {
    opacity: .72;

    transform:
      scale(.96);
  }


  50% {
    opacity: 1;

    transform:
      scale(1);
  }
}


/* =====================================================
   HP KECIL
===================================================== */

@media (max-width: 360px) {

  .neyyi-page {
    padding-left: 11px;
    padding-right: 11px;
  }


  .checkout-bar {
    padding-left: 11px;
    padding-right: 11px;
  }


  .custom-robux-box {
    gap: 7px;
  }


  .custom-robux-input {
    width: 112px;

    flex-basis: 112px;
  }


  .custom-robux-input input {
    width: 65px;
  }


  .store-summary-card strong {
    font-size: 14px;
  }


  .robux-presets {
    gap: 10px 10px;
  }


  .robux-presets button {
    min-height: 58px;
    border-radius: 18px;
  }


  .robux-presets button strong,
  .robux-presets button span {
    font-size: 13px;
  }


  .robux-presets button:nth-child(4),
  .robux-presets button:nth-child(5) {
    flex-basis: calc((100% - 20px) / 3);
  }
}


@media (max-width: 430px) {

  .robux-presets {
    gap: 12px 12px;
  }


  .robux-presets button {
    flex-basis: calc((100% - 24px) / 3);
    min-height: 58px;
    border-radius: 18px;
    padding: 0 6px;
  }


  .robux-presets button strong,
  .robux-presets button span {
    font-size: 13px;
  }


  .robux-presets button:nth-child(4),
  .robux-presets button:nth-child(5) {
    flex-basis: calc((100% - 24px) / 3);
  }
}


/* =====================================================
   DESKTOP
===================================================== */

@media (min-width: 431px) {

  body {
    background: #fff3f7;
  }


  .neyyi-page {
    background: #fffafb;
  }
}

/* =========================================================
   PAYMENT PAGE FINAL
========================================================= */

.payment-page-body {
  margin: 0;

  min-height: 100dvh;

  color: var(--text);

  background: #fffafb;

  font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
}


/* PAGE */

.payment-page {
  width: 100%;
  max-width: 430px;

  min-height: 100dvh;

  margin: 0 auto;

  padding:
    0
    14px
    105px;
}


/* =========================================================
   HEADER
========================================================= */

.payment-header {
  min-height: 70px;

  display: grid;

  grid-template-columns:
    42px 1fr 42px;

  align-items: center;

  gap: 5px;
}


.payment-back {
  width: 38px;
  height: 38px;

  display: grid;

  place-items: center;

  color: var(--text);

  text-decoration: none;

  background: var(--white);

  border:
    1px solid
    var(--border);

  border-radius: 10px;
}


.payment-back svg {
  width: 19px;
  height: 19px;
}


.payment-brand {
  font-size: 17px;
}


.payment-header-space {
  width: 38px;
  height: 38px;
}



/* =========================================================
   TOP CUSTOMER
========================================================= */

.top-customer-card {
  margin-bottom: 16px;
  padding: 13px;
  border: 1px solid #f0d9e2;
  border-radius: 17px;
  background: linear-gradient(145deg,#fff4f8,#ffffff);
  box-shadow: 0 5px 18px rgba(202,126,151,.06);
}

.top-customer-card.hidden {
  display: none;
}

.top-customer-badge {
  display: inline-flex;
  margin-bottom: 10px;
  padding: 5px 9px;
  border-radius: 999px;
  background: #ffe8f0;
  color: #df7395;
  font-size: 9px;
  font-weight: 800;
}

.top-customer-note {
  margin: -5px 0 9px 2px;
  color: #b09aa2;
  font-size: 7.5px;
  line-height: 1.35;
}

.top-customer-list {
  display: grid;
  gap: 8px;
}

.top-customer-row {
  display: grid;
  grid-template-columns: 38px 42px minmax(0,1fr) auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 8px;
  padding: 8px;
  border-radius: 13px;
  background: rgba(255,255,255,.72);
}

.top-customer-rank {
  display: grid;
  place-items: center;
  width: 25px;
  height: 25px;
  border-radius: 8px;
  background: #ffe7ef;
  color: #d86e90;
  font-size: 10px;
  font-weight: 900;
}

.top-customer-row.is-top-one {
  border: 1px solid #f3c9d8;
  background: linear-gradient(135deg,#fff0f5,#fff9fb);
  box-shadow: 0 4px 12px rgba(216,110,144,.08);
}

.top-customer-row.is-top-one .top-customer-rank {
  width: 36px;
  min-width: 36px;
  margin-right: 2px;
  background: #ffdce8;
  color: #cf6286;
  font-size: 9px;
}

.top-customer-row.is-top-one .top-customer-rank {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
}

.top-one-crown {
  display: inline-flex;
  width: 11px;
  height: 11px;
  color: currentColor;
}

.top-one-crown svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.top-customer-row.is-top-one .top-customer-score strong {
  color: #cf6286;
}

.top-customer-avatar {
  width: 42px;
  height: 42px;
  object-fit: cover;
  border: 2px solid #f6dce5;
  border-radius: 14px;
  background: #fff;
}

.top-customer-info {
  min-width: 0;
}

.top-customer-info strong,
.top-customer-info span,
.top-customer-score strong,
.top-customer-score span {
  display: block;
}

.top-customer-info strong {
  overflow: hidden;
  color: #4b3b41;
  font-size: 12px;
  font-weight: 800;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-customer-info span {
  margin-top: 3px;
  overflow: hidden;
  color: #a08790;
  font-size: 9px;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.top-customer-score {
  text-align: right;
}

.top-customer-score strong {
  color: #df7395;
  font-size: 11px;
  font-weight: 800;
}

.top-customer-score span {
  margin-top: 3px;
  color: #aa929a;
  font-size: 8.5px;
}


/* =========================================================
   TITLE
========================================================= */

.payment-title-section {
  margin:
    3px
    0
    15px;
}


.payment-title-section h1 {
  margin: 0;

  color: var(--text);

  font-size: 20px;
  font-weight: 700;

  line-height: 1.25;
}


.payment-title-section p {
  margin:
    5px
    0
    0;

  color: var(--muted);

  font-size: 11px;

  line-height: 1.4;
}


/* =========================================================
   CARD
========================================================= */

.payment-card {
  width: 100%;

  padding:
    14px
    14px;

  margin-bottom: 11px;

  background: var(--white);

  border:
    1px solid
    var(--border);

  border-radius: 12px;
}


.payment-card-title {
  margin:
    0
    0
    13px;

  color: var(--text);

  font-size: 14px;
  font-weight: 700;
}


/* =========================================================
   INVOICE
========================================================= */

.invoice-card {
  background: #fff8fa;

  border-color:
    var(--pink-border);
}


.payment-card-label {
  margin-bottom: 6px;

  color: var(--muted);

  font-size: 10px;
}


.invoice-row {
  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 10px;
}


.invoice-row strong {
  color: var(--pink);

  font-size: 19px;
  font-weight: 700;

  letter-spacing: .3px;
}


.copy-invoice-button {
  width: 34px;
  height: 34px;

  flex:
    0
    0
    34px;

  display: grid;

  place-items: center;

  color: var(--pink);

  background: var(--white);

  border:
    1px solid
    var(--pink-border);

  border-radius: 8px;
}


.copy-invoice-button svg {
  width: 15px;
  height: 15px;
}



/* =========================================================
   DETAIL ORDER
========================================================= */

.payment-detail-row {
  min-height: 39px;

  display: flex;

  align-items: center;
  justify-content: space-between;

  gap: 12px;

  border-bottom:
    1px solid
    #f0ecee;
}


.payment-detail-row:last-child {
  border-bottom: 0;
}


.payment-detail-row span {
  color: #746e71;

  font-size: 11px;
}


.payment-detail-row strong {
  color: var(--text);

  font-size: 13px;
  font-weight: 700;
}


.payment-detail-row.total-row {
  margin-top: 3px;

  padding-top: 5px;
}


.payment-detail-row.total-row strong {
  color: var(--pink);

  font-size: 17px;
}



.voucher-discount-value {
  color: #55916a !important;
}

#checkVoucher {
  color: #e7789a;
}


/* =========================================================
   QRIS
========================================================= */

.qris-title {
  margin-bottom: 14px;

  display: flex;

  align-items: flex-start;
  justify-content: space-between;

  gap: 12px;
}


.qris-title h2 {
  margin: 0;

  color: var(--text);

  font-size: 14px;
  font-weight: 700;
}


.qris-title p {
  margin:
    4px
    0
    0;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.35;
}


.qris-badge {
  padding:
    4px
    8px;

  color: var(--pink);

  background: var(--pink-soft);

  border:
    1px solid
    var(--pink-border);

  border-radius: 6px;

  font-size: 9px;
  font-weight: 700;
}


.qris-image-wrapper {
  position: relative;

  width: min(
    100%,
    285px
  );

  min-height: 285px;

  margin:
    0
    auto;

  display: grid;

  place-items: center;

  overflow: hidden;

  background: var(--white);

  border:
    1px solid
    var(--border);

  border-radius: 12px;
}


.qris-image {
  display: none;

  width: 100%;
  height: auto;

  object-fit: contain;
}


.qris-image.show {
  display: block;
}


.qris-placeholder {
  min-height: 285px;

  display: flex;

  flex-direction: column;

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

  gap: 6px;

  color: #aaa2a6;

  text-align: center;
}


.qris-placeholder svg {
  width: 45px;
  height: 45px;

  stroke-width: 1.5;
}


.qris-placeholder span {
  font-size: 10px;
}


.qris-info {
  margin-top: 12px;

  padding:
    9px
    10px;

  display: flex;

  align-items: flex-start;

  gap: 8px;

  background: #fff6f9;

  border:
    1px solid
    var(--pink-border);

  border-radius: 9px;
}


.qris-info svg {
  width: 15px;
  height: 15px;

  flex:
    0
    0
    15px;

  color: var(--pink);
}


.qris-info p {
  margin: 0;

  color: #70696d;

  font-size: 9px;

  line-height: 1.45;
}


/* =========================================================
   UPLOAD
========================================================= */

.upload-description {
  margin:
    -4px
    0
    11px;

  color: var(--muted);

  font-size: 10px;

  line-height: 1.4;
}


.payment-upload-box {
  width: 100%;

  min-height: 67px;

  padding:
    10px
    11px;

  display: flex;

  align-items: center;

  gap: 10px;

  cursor: pointer;

  background: #fff8fa;

  border:
    1px dashed
    var(--pink-border);

  border-radius: 10px;
}


.payment-upload-icon {
  width: 38px;
  height: 38px;

  flex:
    0
    0
    38px;

  display: grid;

  place-items: center;

  color: var(--pink);

  background: #ffe7ef;

  border-radius: 9px;
}


.payment-upload-icon svg {
  width: 16px;
  height: 16px;
}


.payment-upload-text {
  flex: 1;

  min-width: 0;

  display: flex;

  flex-direction: column;

  gap: 4px;
}


.payment-upload-text strong {
  color: #494346;

  font-size: 11px;
  font-weight: 700;
}


.payment-upload-text span {
  color: var(--muted);

  font-size: 9px;
}


.payment-upload-arrow {
  width: 17px;
  height: 17px;

  color: #aaa3a6;
}


.payment-file-input {
  position: absolute;

  width: 1px;
  height: 1px;

  opacity: 0;

  pointer-events: none;
}


/* =========================================================
   SUBMIT PAYMENT
========================================================= */

.payment-submit-section {
  margin-top: 4px;

  padding-bottom: 7px;
}


.payment-submit-button {
  width: 100%;

  min-height: 47px;

  display: flex;

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

  color: var(--white);

  background: var(--pink);

  border: 0;

  border-radius: 10px;

  font-size: 13px;
  font-weight: 700;
}


.payment-submit-button:disabled {
  opacity: .46;

  cursor: not-allowed;
}


.payment-submit-button:active:not(:disabled) {
  transform: scale(.99);
}


.payment-message {
  min-height: 13px;

  margin:
    6px
    3px
    0;

  color: #c94c75;

  text-align: center;

  font-size: 9px;

  line-height: 1.35;
}


/* =========================================================
   SUCCESS POPUP
========================================================= */

.payment-success-overlay {
  position: fixed;

  inset: 0;

  z-index: 2000;

  padding:
    20px;

  display: flex;

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

  background:
    rgba(31, 27, 29, .58);
}


.payment-success-modal {
  width: 100%;
  max-width: 345px;

  padding:
    25px
    20px
    19px;

  text-align: center;

  background: var(--white);

  border-radius: 17px;

  box-shadow:
    0
    18px
    45px
    rgba(0, 0, 0, .17);
}


.payment-success-icon {
  margin-bottom: 11px;

  font-size: 39px;

  line-height: 1;
}


.payment-success-modal h2 {
  margin:
    0
    0
    10px;

  color: var(--text);

  font-size: 18px;
  font-weight: 700;

  line-height: 1.3;
}


.payment-success-modal p {
  margin:
    0
    0
    9px;

  color: #766f73;

  font-size: 11px;

  line-height: 1.5;
}


.pending-status-badge {
  width: fit-content;

  margin:
    14px
    auto;

  padding:
    7px
    14px;

  color: #a26b13;

  background: #fff5d9;

  border:
    1px solid
    #f1dfad;

  border-radius: 999px;

  font-size: 10px;
  font-weight: 700;
}


.view-order-status-button {
  width: 100%;

  min-height: 45px;

  margin-top: 3px;

  color: var(--white);

  background: var(--pink);

  border: 0;

  border-radius: 9px;

  font-size: 12px;
  font-weight: 700;
}


/* =========================================================
   PAYMENT BOTTOM NAV
========================================================= */

.payment-bottom-nav {
  z-index: 60;
}


/* =========================================================
   PAYMENT MOBILE SMALL
========================================================= */

@media (max-width: 360px) {

  .payment-page {
    padding-left: 11px;
    padding-right: 11px;
  }


  .qris-image-wrapper,
  .qris-placeholder {
    min-height: 255px;
  }


  .payment-success-modal {
    padding-left: 17px;
    padding-right: 17px;
  }
}

/* =========================================================
   UPLOAD SUDAH DIPILIH
========================================================= */

.payment-card.proof-selected
.payment-card-title,

.payment-card.proof-selected
.upload-description {
  display: none;
}


.payment-card.proof-selected {
  padding:
    12px
    14px;
}


.payment-card.proof-selected
.payment-upload-box {
  min-height: 65px;

  background: #fff6f9;

  border:
    1px solid
    var(--pink-border);
}


.payment-card.proof-selected
.payment-upload-icon {
  background: #ffe5ee;
}


.payment-card.proof-selected
.payment-upload-text strong {
  color: var(--pink);
}

/* =========================================================
   CEK PESANAN
========================================================= */

.check-page-body {
  margin: 0;
  min-height: 100vh;
  background: #fffafb;
  color: #3d3034;
  padding-bottom: 82px;
}


.check-page {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;
  padding:
    calc(14px + env(safe-area-inset-top))
    14px
    28px;
}


/* =========================================================
   HEADER
========================================================= */

.check-header {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 42px;
  margin-bottom: 10px;
}


.check-brand {
  text-align: center;
  font-size: 18px;
  font-weight: 800;
  color: #ef7fa2;
}


/* =========================================================
   TITLE
========================================================= */

.check-title-section {
  margin-bottom: 14px;
}


.check-title-section h1 {
  margin: 0 0 4px;
  font-size: 20px;
  line-height: 1.25;
  font-weight: 800;
  color: #3d3034;
}


.check-title-section p {
  margin: 0;
  font-size: 12px;
  line-height: 1.55;
  color: #8f7c82;
}


/* =========================================================
   CARD
========================================================= */

.check-card {
  background: #ffffff;
  border: 1px solid #f1dfe5;
  border-radius: 16px;
  padding: 14px;
  box-shadow:
    0 4px 14px
    rgba(202, 126, 151, 0.05);
}


.check-search-card {
  margin-bottom: 18px;
}


/* =========================================================
   SEARCH
========================================================= */

.check-input-label {
  display: block;
  margin-bottom: 7px;
  font-size: 12px;
  font-weight: 700;
  color: #5e4c52;
}


.check-input-wrapper {
  display: flex;
  align-items: center;
  gap: 9px;

  min-height: 46px;
  padding: 0 12px;

  background: #fffafb;

  border: 1px solid #efdce3;
  border-radius: 12px;
}


.check-input-wrapper:focus-within {
  border-color: #ee9bb5;
  box-shadow:
    0 0 0 3px
    rgba(238, 155, 181, 0.10);
}


.check-input-wrapper svg {
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  color: #d98aa4;
}


.check-input-wrapper input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  background: transparent;

  font-family: inherit;
  font-size: 14px;
  font-weight: 700;

  color: #44353a;

  text-transform: uppercase;
}


.check-input-wrapper input::placeholder {
  color: #baaab0;
  font-weight: 500;
  text-transform: none;
}


.check-order-button {
  width: 100%;
  min-height: 44px;

  margin-top: 10px;

  border: 0;
  border-radius: 12px;

  background: #ef86a7;

  color: #ffffff;

  font-family: inherit;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.2px;

  cursor: pointer;
}


.check-order-button:active {
  transform: scale(0.99);
}


.check-order-button:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}


.check-message {
  min-height: 0;
  margin: 8px 2px 0;

  font-size: 11px;
  line-height: 1.45;

  color: #cf5e82;
}


.check-message:empty {
  display: none;
}


/* =========================================================
   DETAIL ORDER
========================================================= */

.check-order-detail {
  display: grid;
  gap: 10px;

  margin-bottom: 20px;
}


.check-order-detail.hidden {
  display: none !important;
}


.check-section-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  padding: 0 2px;
}


.check-section-heading > div {
  font-size: 15px;
  font-weight: 800;
  color: #44353a;
}


.check-status-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 25px;
  padding: 0 10px;

  border-radius: 999px;

  background: #fff0f5;
  border: 1px solid #f3c9d7;

  font-size: 10px;
  font-weight: 800;

  color: #d96589;
}


/* =========================================================
   DETAIL ROW
========================================================= */

.check-detail-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;

  min-height: 30px;
}


.check-detail-row span {
  font-size: 12px;
  color: #8b777e;
}


.check-detail-row strong {
  max-width: 65%;

  text-align: right;

  font-size: 12px;
  font-weight: 800;

  color: #44353a;

  overflow-wrap: anywhere;
}


/* =========================================================
   ROBLOX PROFILE
========================================================= */

.check-profile {
  display: flex;
  align-items: center;
  gap: 11px;

  padding-bottom: 12px;

  border-bottom: 1px solid #f4e6eb;
}


.check-avatar {
  width: 52px;
  height: 52px;

  flex: 0 0 52px;

  object-fit: cover;

  border-radius: 13px;

  background: #f7edf0;

  border: 1px solid #eedce2;
}


.check-profile-info {
  display: flex;
  flex-direction: column;
  min-width: 0;
}


.check-profile-info strong {
  font-size: 14px;
  line-height: 1.3;
  font-weight: 800;

  color: #44353a;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.check-profile-info span {
  margin-top: 2px;

  font-size: 11px;

  color: #9a858c;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}


.check-order-info {
  display: grid;
  gap: 7px;

  padding-top: 11px;
}


/* =========================================================
   CARD TITLE
========================================================= */

.check-card-title {
  margin: 0 0 13px;

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

  color: #44353a;
}


/* =========================================================
   TIMELINE
========================================================= */

.check-timeline {
  display: grid;
  gap: 0;
}


.timeline-item {
  position: relative;

  display: grid;
  grid-template-columns: 25px 1fr;
  column-gap: 10px;

  min-height: 51px;
}


.timeline-marker {
  position: relative;

  display: flex;
  justify-content: center;
}


.timeline-dot {
  position: relative;
  z-index: 2;

  width: 10px;
  height: 10px;

  margin-top: 4px;

  border-radius: 50%;

  background: #eadde1;

  border: 2px solid #ffffff;

  box-shadow:
    0 0 0 1px #eadde1;
}


.timeline-line {
  position: absolute;

  top: 15px;
  bottom: -4px;

  width: 2px;

  background: #eee3e6;
}


.timeline-item:last-child
.timeline-line {
  display: none;
}


.timeline-content {
  padding-bottom: 13px;
}


.timeline-content strong {
  display: block;

  font-size: 12px;
  line-height: 1.3;
  font-weight: 700;

  color: #99878d;
}


.timeline-content span {
  display: block;

  margin-top: 2px;

  font-size: 10px;
  line-height: 1.4;

  color: #b0a0a5;
}


/* ACTIVE / DONE */

.timeline-item.completed
.timeline-dot,

.timeline-item.active
.timeline-dot {
  background: #ef86a7;

  box-shadow:
    0 0 0 1px #ef86a7;
}


.timeline-item.completed
.timeline-line {
  background: #efb2c5;
}


.timeline-item.completed
.timeline-content strong,

.timeline-item.active
.timeline-content strong {
  color: #4a393f;
}


.timeline-item.active
.timeline-content strong {
  color: #db6388;
}


/* CANCEL */

.timeline-item.cancelled
.timeline-dot {
  background: #df6b6b;

  box-shadow:
    0 0 0 1px #df6b6b;
}


.timeline-item.cancelled
.timeline-content strong {
  color: #c95555;
}


/* =========================================================
   LATEST TRANSACTIONS
========================================================= */

.latest-transactions-section {
  margin-top: 4px;
}


.latest-transactions-section h2 {
  margin: 0 0 9px;

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

  color: #44353a;
}


.latest-table-wrapper {
  width: 100%;

  overflow-x: auto;
  overflow-y: hidden;

  background: #ffffff;

  border: 1px solid #f0dfe5;
  border-radius: 14px;

  -webkit-overflow-scrolling: touch;
}


.latest-table {
  width: 100%;
  min-width: 610px;

  border-collapse: collapse;

  font-size: 10px;
}


.latest-table th,
.latest-table td {
  padding: 10px 9px;

  text-align: left;
  white-space: nowrap;

  border-bottom: 1px solid #f5e9ed;
}


.latest-table th {
  background: #fff5f8;

  font-size: 9px;
  font-weight: 800;
  text-transform: uppercase;

  color: #ad7c8c;
}


.latest-table td {
  color: #66535a;
}


.latest-table tbody
tr:last-child td {
  border-bottom: 0;
}


.latest-table td:nth-child(2),
.latest-table td:nth-child(3) {
  font-weight: 700;
}


.latest-empty {
  padding: 18px !important;

  text-align: center !important;

  color: #ad999f !important;
}


/* =========================================================
   STATUS DI TABLE
========================================================= */

.latest-status {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-height: 22px;

  padding: 0 8px;

  border-radius: 999px;

  font-size: 9px;
  font-weight: 800;
}


.latest-status.pending {
  background: #fff0f5;
  color: #db668a;
}


.latest-status.process {
  background: #fff5df;
  color: #b78131;
}


.latest-status.done {
  background: #edf8f0;
  color: #559466;
}


.latest-status.cancel {
  background: #fbecec;
  color: #c75c5c;
}


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

@media (max-width: 380px) {

  .check-page {
    padding-left: 11px;
    padding-right: 11px;
  }


  .check-card {
    padding: 12px;
  }


  .check-title-section h1 {
    font-size: 19px;
  }


  .check-brand {
    font-size: 17px;
  }
}

/* =========================================================
   MENU PAGE
========================================================= */

.menu-page-body {
  margin: 0;
  min-height: 100vh;
  background: #fffafb;
  color: #3d3034;
  padding-bottom: 82px;
}


.menu-page {
  width: 100%;
  max-width: 520px;
  margin: 0 auto;

  padding:
    calc(14px + env(safe-area-inset-top))
    14px
    28px;
}


/* =========================================================
   HEADER
========================================================= */

.menu-header {
  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 42px;

  margin-bottom: 10px;
}


.menu-brand {
  text-align: center;

  font-size: 18px;
  font-weight: 800;

  color: #ef7fa2;
}


/* =========================================================
   TITLE
========================================================= */

.menu-title-section {
  margin-bottom: 14px;
}


.menu-title-section h1 {
  margin: 0 0 4px;

  font-size: 20px;
  line-height: 1.25;

  font-weight: 800;

  color: #3d3034;
}


.menu-title-section p {
  margin: 0;

  font-size: 12px;
  line-height: 1.55;

  color: #8f7c82;
}


/* =========================================================
   MENU LIST
========================================================= */

.menu-list {
  display: grid;

  gap: 10px;
}


/* =========================================================
   MENU ITEM
========================================================= */

.menu-item {
  width: 100%;
  min-height: 76px;

  display: grid;

  grid-template-columns:
    46px
    minmax(0, 1fr)
    22px;

  align-items: center;

  gap: 11px;

  padding: 12px 13px;

  border:
    1px solid
    #f1dfe5;

  border-radius: 16px;

  background: #ffffff;

  box-shadow:
    0 4px 14px
    rgba(202, 126, 151, 0.05);

  text-align: left;

  font-family: inherit;

  cursor: pointer;
}


.menu-item:active {
  transform: scale(0.99);

  background: #fff8fa;
}


/* =========================================================
   ICON
========================================================= */

.menu-item-icon {
  width: 44px;
  height: 44px;

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

  border-radius: 13px;

  background: #fff0f5;

  color: #e97c9e;
}


.menu-item-icon svg {
  width: 20px;
  height: 20px;
}


/* =========================================================
   TEXT
========================================================= */

.menu-item-text {
  min-width: 0;

  display: flex;
  flex-direction: column;

  gap: 3px;
}


.menu-item-text strong {
  font-size: 13px;
  line-height: 1.3;

  font-weight: 800;

  color: #44353a;
}


.menu-item-text span {
  font-size: 10.5px;
  line-height: 1.45;

  color: #99868c;
}


/* =========================================================
   ARROW
========================================================= */

.menu-item-arrow {
  width: 18px;
  height: 18px;

  color: #c7aeb6;
}


/* =========================================================
   DETAIL OVERLAY
========================================================= */

.menu-detail-overlay {
  position: fixed;

  inset: 0;

  z-index: 1200;

  display: flex;

  align-items: flex-end;

  justify-content: center;

  background:
    rgba(58, 41, 47, 0.28);

  backdrop-filter:
    blur(3px);

  -webkit-backdrop-filter:
    blur(3px);
}


.menu-detail-overlay.hidden {
  display: none !important;
}


/* =========================================================
   DETAIL SHEET
========================================================= */

.menu-detail-sheet {
  width: 100%;
  max-width: 520px;

  max-height: 88vh;

  display: flex;
  flex-direction: column;

  background: #fffafb;

  border-radius:
    22px
    22px
    0
    0;

  box-shadow:
    0 -10px 30px
    rgba(91, 56, 68, 0.12);

  overflow: hidden;
}


/* =========================================================
   DETAIL HEADER
========================================================= */

.menu-detail-header {
  display: grid;

  grid-template-columns:
    38px
    1fr
    38px;

  align-items: center;

  min-height: 58px;

  padding:
    8px
    12px;

  border-bottom:
    1px solid
    #f1e3e8;

  background: #ffffff;
}


.menu-detail-header h2 {
  margin: 0;

  text-align: center;

  font-size: 15px;
  font-weight: 800;

  color: #44353a;
}


.menu-detail-close {
  width: 36px;
  height: 36px;

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

  border: 0;

  border-radius: 11px;

  background: #fff0f5;

  color: #dd718f;

  cursor: pointer;
}


.menu-detail-close svg {
  width: 18px;
  height: 18px;
}


.menu-detail-space {
  width: 36px;
  height: 36px;
}


/* =========================================================
   DETAIL CONTENT
========================================================= */

.menu-detail-content {
  overflow-y: auto;

  padding:
    14px
    14px
    calc(
      22px +
      env(safe-area-inset-bottom)
    );

  -webkit-overflow-scrolling:
    touch;
}


/* =========================================================
   CONTENT CARD
========================================================= */

.menu-info-card {
  background: #ffffff;

  border:
    1px solid
    #f0dfe5;

  border-radius: 15px;

  padding: 14px;

  margin-bottom: 10px;
}


.menu-info-card:last-child {
  margin-bottom: 0;
}


.menu-info-card h3 {
  margin: 0 0 7px;

  font-size: 13px;
  font-weight: 800;

  color: #44353a;
}


.menu-info-card p {
  margin: 0;

  font-size: 11px;
  line-height: 1.65;

  color: #756168;
}


/* =========================================================
   STEPS
========================================================= */

.menu-step-list {
  display: grid;

  gap: 9px;
}


.menu-step {
  display: grid;

  grid-template-columns:
    28px
    1fr;

  gap: 10px;

  align-items: flex-start;
}


.menu-step-number {
  width: 27px;
  height: 27px;

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

  border-radius: 50%;

  background: #ffe7ef;

  color: #d9688b;

  font-size: 11px;
  font-weight: 800;
}


.menu-step-content strong {
  display: block;

  margin-bottom: 2px;

  font-size: 11.5px;
  font-weight: 800;

  color: #4c3b41;
}


.menu-step-content span {
  display: block;

  font-size: 10.5px;
  line-height: 1.55;

  color: #88747b;
}


/* =========================================================
   FAQ
========================================================= */

.menu-faq-item {
  padding:
    12px
    0;

  border-bottom:
    1px solid
    #f3e5ea;
}


.menu-faq-item:first-child {
  padding-top: 0;
}


.menu-faq-item:last-child {
  padding-bottom: 0;

  border-bottom: 0;
}


.menu-faq-item strong {
  display: block;

  margin-bottom: 4px;

  font-size: 11.5px;
  line-height: 1.45;

  color: #49383e;
}


.menu-faq-item p {
  margin: 0;

  font-size: 10.5px;
  line-height: 1.6;

  color: #827078;
}


/* =========================================================
   RULE LIST
========================================================= */

.menu-rule-list {
  margin: 0;

  padding-left: 18px;
}


.menu-rule-list li {
  margin-bottom: 8px;

  font-size: 10.5px;
  line-height: 1.6;

  color: #756269;
}


.menu-rule-list li:last-child {
  margin-bottom: 0;
}


/* =========================================================
   CONTACT BUTTON
========================================================= */

.menu-contact-button {
  width: 100%;

  min-height: 45px;

  display: flex;

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

  gap: 8px;

  margin-top: 12px;

  border: 0;

  border-radius: 12px;

  background: #ef86a7;

  color: #ffffff;

  text-decoration: none;

  font-size: 11px;
  font-weight: 800;
}


.menu-contact-button svg {
  width: 17px;
  height: 17px;
}


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

@media (max-width: 380px) {

  .menu-page {
    padding-left: 11px;
    padding-right: 11px;
  }


  .menu-item {
    grid-template-columns:
      42px
      minmax(0, 1fr)
      20px;

    padding:
      11px
      12px;
  }


  .menu-item-icon {
    width: 40px;
    height: 40px;
  }


  .menu-title-section h1 {
    font-size: 19px;
  }


  .menu-brand {
    font-size: 17px;
  }

}

.menu-rule-list {
  list-style: none;
  padding-left: 0;
}

.menu-rule-list li {
  position: relative;
  padding-left: 24px;
}

.menu-rule-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;

  color: #ef86a7;
  font-weight: 900;
  font-size: 14px;
}

/* =========================================================
   ADMIN GLOBAL
========================================================= */

* {
  box-sizing: border-box;
}


html {
  -webkit-text-size-adjust: 100%;
}


body {
  margin: 0;
  font-family: 'Plus Jakarta Sans', Arial, Helvetica, sans-serif;
}


/* =========================================================
   ADMIN LOGIN BODY
========================================================= */

.admin-login-body {
  min-height: 100vh;

  background:
    linear-gradient(
      180deg,
      #fffafb 0%,
      #fff5f8 100%
    );

  color: #3f3237;
}


/* =========================================================
   LOGIN PAGE
========================================================= */

.admin-login-page {
  width: 100%;
  max-width: 430px;

  min-height: 100vh;

  margin: 0 auto;

  display: flex;
  flex-direction: column;
  justify-content: center;

  padding:
    calc(24px + env(safe-area-inset-top))
    18px
    calc(24px + env(safe-area-inset-bottom));
}


/* =========================================================
   BRAND
========================================================= */

.admin-login-brand {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 10px;

  margin-bottom: 22px;
}


.admin-login-logo {
  width: 48px;
  height: 48px;

  object-fit: contain;

  border-radius: 13px;
}


.admin-login-brand > div {
  display: flex;
  flex-direction: column;
}


.admin-login-store-name {
  font-size: 17px;
  line-height: 1.2;

  font-weight: 800;

  color: #e9789b;
}


.admin-login-brand span {
  margin-top: 2px;

  font-size: 10px;
  font-weight: 600;

  color: #a38d95;
}


/* =========================================================
   LOGIN CARD
========================================================= */

.admin-login-card {
  width: 100%;

  padding: 18px;

  background: #ffffff;

  border:
    1px solid
    #efdde4;

  border-radius: 20px;

  box-shadow:
    0 12px 35px
    rgba(185, 105, 130, 0.09);
}


/* =========================================================
   LOGIN HEADING
========================================================= */

.admin-login-heading {
  display: flex;
  align-items: center;

  gap: 11px;

  margin-bottom: 20px;
}


.admin-login-heading-icon {
  width: 43px;
  height: 43px;

  flex: 0 0 43px;

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

  background: #fff0f5;

  border-radius: 13px;

  color: #e67598;
}


.admin-login-heading-icon svg {
  width: 20px;
  height: 20px;
}


.admin-login-heading h1 {
  margin: 0;

  font-size: 18px;
  line-height: 1.25;

  font-weight: 800;

  color: #43353a;
}


.admin-login-heading p {
  margin:
    3px
    0
    0;

  font-size: 10.5px;
  line-height: 1.45;

  color: #9c878e;
}


/* =========================================================
   FORM GROUP
========================================================= */

.admin-form-group {
  margin-bottom: 14px;
}


.admin-form-group label {
  display: block;

  margin-bottom: 6px;

  font-size: 11px;
  font-weight: 700;

  color: #624f56;
}


/* =========================================================
   INPUT
========================================================= */

.admin-input-wrapper {
  min-height: 47px;

  display: flex;
  align-items: center;

  gap: 9px;

  padding:
    0
    12px;

  background: #fffafb;

  border:
    1px solid
    #eedce3;

  border-radius: 12px;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
}


.admin-input-wrapper:focus-within {
  border-color: #ec96b1;

  box-shadow:
    0 0 0 3px
    rgba(236, 150, 177, 0.11);
}


.admin-input-wrapper > svg {
  width: 17px;
  height: 17px;

  flex: 0 0 auto;

  color: #d88ca4;
}


.admin-input-wrapper input {
  width: 100%;
  min-width: 0;

  border: 0;
  outline: 0;

  padding:
    13px
    0;

  background: transparent;

  color: #43353a;

  font: inherit;
  font-size: 13px;
}


.admin-input-wrapper input::placeholder {
  color: #b9a8ae;
}


/* =========================================================
   PASSWORD TOGGLE
========================================================= */

.admin-password-toggle {
  width: 34px;
  height: 34px;

  flex: 0 0 34px;

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

  padding: 0;

  border: 0;

  background: transparent;

  color: #ac929b;

  cursor: pointer;
}


.admin-password-toggle svg {
  width: 17px;
  height: 17px;
}


/* =========================================================
   MESSAGE
========================================================= */

.admin-login-message {
  min-height: 0;

  margin:
    2px
    2px
    11px;

  font-size: 10.5px;
  line-height: 1.5;

  color: #d35f83;
}


.admin-login-message:empty {
  display: none;
}


/* =========================================================
   LOGIN BUTTON
========================================================= */

.admin-login-button {
  width: 100%;
  min-height: 47px;

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

  gap: 8px;

  border: 0;

  border-radius: 13px;

  background: #ed83a4;

  color: #ffffff;

  font-size: 11px;
  font-weight: 800;

  letter-spacing: 0.3px;

  cursor: pointer;
}


.admin-login-button svg {
  width: 17px;
  height: 17px;
}


.admin-login-button:active {
  transform: scale(0.99);
}


.admin-login-button:disabled {
  opacity: 0.55;

  cursor: not-allowed;

  transform: none;
}


/* =========================================================
   BACK TO STORE
========================================================= */

.admin-back-store {
  display: flex;
  align-items: center;
  justify-content: center;

  gap: 6px;

  margin-top: 16px;

  color: #9d838c;

  text-decoration: none;

  font-size: 10.5px;
  font-weight: 600;
}


.admin-back-store svg {
  width: 15px;
  height: 15px;
}


/* =========================================================
   ADMIN LOADER
========================================================= */

.admin-page-loader {
  position: fixed;

  inset: 0;

  z-index: 9999;

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

  background: #fffafb;

  transition:
    opacity 0.2s ease,
    visibility 0.2s ease;
}


.admin-page-loader.hidden {
  opacity: 0;
  visibility: hidden;

  pointer-events: none;
}


.admin-loader-content {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 10px;
}


.admin-loader-logo {
  width: 52px;
  height: 52px;

  object-fit: contain;
}
/* REVIEW PAGE */
.review-page {
  padding-bottom: 138px;
}


.review-title h1 {
  font-size: 32px;
  margin: 15px 0 6px;
  color: #171717;
}


.review-title p {
  font-size: 18px;
  color: #777;
  margin: 0 0 12px;
}


.review-title small {
  color: #888;
  display: block;
  font-size: 14px;
}


.review-summary-card {
  margin-top: 22px;
  background: linear-gradient(180deg, #fff6fa 0%, #fff2f7 100%);
  border: 1px solid #f3dce8;
  border-radius: 18px;
  padding: 12px 12px;
  display: flex;
  gap: 14px;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 22px rgba(231, 143, 184, .08);
}


.review-score {
  min-width: 0;
  flex: 1 1 44%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
}


.review-score strong {
  font-size: 42px;
  line-height: .95;
  color: #ed6da5;
  display: block;
  font-weight: 700;
}


.review-stars,
.review-score div {
  color: #ed6da5;
  font-size: 14px;
  letter-spacing: 1px;
  margin-top: 6px;
}


.review-score span {
  color: #777;
  font-size: 12px;
  margin-top: 3px;
}


.review-stats {
  flex: 1 1 56%;
  min-width: 0;
  border-left: 1px solid #eed8e2;
  padding-left: 10px;
  color: #555;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
}


.review-stat-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}


.review-stat-item i {
  width: 18px;
  height: 18px;
  stroke: #8b8789;
  flex: 0 0 auto;
}


.review-card {
  background: #fff;
  border: 1px solid #f3dce8;
  border-radius: 22px;
  padding: 18px;
  display: flex;
  gap: 15px;
  margin-top: 15px;
}


.review-avatar {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  object-fit: cover;
  background: #eee;
}


.review-content b {
  font-size: 18px;
}


.review-content p {
  margin: 12px 0;
  color: #444;
  line-height: 1.5;
}


.review-content footer {
  font-size: 13px;
  color: #999;
  display: flex;
  justify-content: space-between;
  gap: 30px;
}


.review-empty {
  text-align: center;
  padding: 46px 20px;
  color: #888;
  font-size: 16px;
}


@media(max-width:600px) {
  .review-summary-card {
    gap: 10px;
    padding: 12px 12px;
  }


  .review-score strong {
    font-size: 42px;
  }


  .review-score div {
    font-size: 14px;
  }


  .review-score span {
    font-size: 12px;
  }


  .review-stats {
    padding-left: 10px;
    gap: 6px;
  }


  .review-stat-item {
    font-size: 12px;
  }


  .review-title h1 {
    font-size: 28px;
  }
}


/* REVIEW PROMPT */
.review-prompt {
  margin-top: 14px;
  padding: 16px;
  background: #fff2f7;
  border: 1px solid #f3dce8;
  border-radius: 16px;
  text-align: center;
}

.review-prompt p {
  margin: 0 0 14px;
  color: #555;
  line-height: 1.5;
  font-size: 14px;
}

.review-prompt-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 0 18px;
  color: #fff;
  background: var(--pink);
  border-radius: 10px;
  text-decoration: none;
  font-size: 13px;
  font-weight: 700;
}

.review-prompt-button.submitted {
  background: #edf9f1;
  color: #55916a;
  cursor: default;
  pointer-events: none;
}

.latest-transactions-section.temporarily-hidden {
  display: none;
}


/* FINAL ULASAN MOBILE CARD COMPACT */
.review-card-container,
.review-list,
.review-card,
.card-review,
.customer-review-card,
.review-item {
    max-width: 100% !important;
}

.review-card,
.card-review,
.customer-review-card,
.review-item {
    padding: 10px !important;
    min-height: auto !important;
    border-radius: 16px !important;
    margin-bottom: 10px !important;
}

.review-card img,
.card-review img,
.customer-review-card img,
.review-avatar {
    width: 44px !important;
    height: 44px !important;
}

.review-card h3,
.review-card h4,
.card-review h3,
.card-review h4 {
    font-size: 13px !important;
    margin: 0 !important;
}

.review-card p,
.card-review p,
.customer-review-card p {
    font-size: 13px !important;
    margin: 5px 0 !important;
    line-height: 1.35 !important;
}

.review-meta,
.review-info,
.review-date {
    font-size: 11px !important;
}


/* NEYYI REVIEW MOBILE SMALLER V7 */
@media (max-width: 600px) {

  .review-summary,
  .rating-summary,
  .review-stat-card {
      padding: 14px !important;
      border-radius: 16px !important;
  }

  .review-summary svg,
  .rating-summary svg,
  .review-stat-card svg {
      width: 18px !important;
      height: 18px !important;
  }

  .review-summary h1,
  .rating-summary h1 {
      font-size: 42px !important;
      line-height: 1 !important;
  }

  .review-summary .stars,
  .rating-summary .stars {
      font-size: 18px !important;
  }

  .review-card,
  .card-review,
  .customer-review-card,
  .review-item {
      padding: 10px !important;
      min-height: 0 !important;
      border-radius: 14px !important;
      margin-bottom: 8px !important;
  }

  .review-card img,
  .card-review img,
  .customer-review-card img,
  .review-avatar {
      width: 38px !important;
      height: 38px !important;
  }

  .review-card h3,
  .review-card h4,
  .card-review h3,
  .card-review h4 {
      font-size: 15px !important;
  }

  .review-card p,
  .card-review p,
  .customer-review-card p {
      font-size: 12px !important;
  }

}


/* REAL MOBILE REVIEW SIZE FIX */
@media (max-width:600px){

.review-summary-card{
 padding:10px 8px !important;
 border-radius:14px !important;
 gap:8px !important;
}

.review-score strong{
 font-size:34px !important;
}

.review-score div,
.review-stars{
 font-size:12px !important;
 margin-top:3px !important;
}

.review-score span{
 font-size:10px !important;
}

.review-stat-item{
 font-size:10px !important;
 gap:4px !important;
}

.review-stat-item svg{
 width:15px !important;
 height:15px !important;
}

.review-card{
 padding:10px !important;
 border-radius:16px !important;
 gap:10px !important;
 margin-top:8px !important;
}

.review-avatar{
 width:42px !important;
 height:42px !important;
}

.review-content b{
 font-size:14px !important;
}

.review-content p{
 margin:6px 0 !important;
 font-size:12px !important;
 line-height:1.35 !important;
}

.review-content footer{
 font-size:11px !important;
 gap:10px !important;
}

}


/* NEYYI V12 FINISHING REVIEW CARD */
.review-card {
  position: relative;
}

.review-card .review-top,
.review-card .review-header {
  align-items: center;
}

.review-card .review-robux {
  margin-left: auto;
  font-size: 12px;
}

.review-card .review-date {
  font-size: 12px;
  opacity: .75;
}

/* SUCCESS REVIEW POPUP */
.review-success-popup {
  position: fixed;
  inset: 0;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(255,245,250,.55);
  backdrop-filter: blur(8px);
  z-index: 9999;
}

.review-success-popup.show {
  display: flex;
}

.review-success-box {
  width: min(330px, 85vw);
  padding: 24px;
  border-radius: 24px;
  text-align: center;
  background: #fff;
  box-shadow: 0 12px 40px rgba(0,0,0,.12);
}

.review-success-box button {
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  margin-top: 16px;
  cursor: pointer;
}

/* Neyyi success popup */
.neyyi-success-box{
  width:min(330px,85vw);
  padding:28px 24px;
  border-radius:28px;
  text-align:center;
}
.neyyi-success-box h3{
  color:#d85b94;
  font-size:22px;
  margin-bottom:16px;
}
.neyyi-success-box p{
  color:#555;
  line-height:1.6;
}
.neyyi-success-box button{
  margin-top:18px;
  border:none;
  border-radius:999px;
  padding:12px 28px;
  background:#df6aa1;
  color:white;
  font-weight:700;
}


/* V17 REVIEW CARD CLEAN */
.review-card {
  border-radius: 18px;
  padding: 12px;
  gap: 10px;
  margin-top: 12px;
  align-items: flex-start;
  height: auto;
  min-height: unset;
}

.review-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.review-content {
  flex: 1;
  min-width: 0;
}

.review-content b {
  font-size: 16px;
  font-weight: 700;
  display: inline-block;
  max-width: 55%;
}

.review-content p {
  margin: 8px 0 10px;
  font-size: 15px;
  line-height: 1.35;
  color: #444;
  word-break: break-word;
}

.review-content footer {
  font-size: 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 8px;
}

.review-content footer span {
  white-space: nowrap;
}

/* username + robux layout */
.review-content .review-top {
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.review-content .review-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:4px;
}


/* v18 review card layout */
.review-card{
  padding:12px 14px;
  border-radius:18px;
  gap:0;
  display:block;
}

.review-card-inner{
  width:100%;
}

.review-top{
  display:flex;
  align-items:center;
  gap:10px;
}

.review-avatar{
  width:42px;
  height:42px;
  flex:0 0 42px;
}

.review-user{
  flex:1;
  min-width:0;
}

.review-user b{
  font-size:17px;
  font-weight:700;
}

.review-robux{
  font-size:13px;
  color:#999;
  white-space:nowrap;
}

.review-meta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin:6px 0 8px 52px;
  font-size:13px;
  color:#999;
}

.review-meta .review-stars{
  margin:0;
  letter-spacing:1px;
  color:#ed6da5;
}

.review-card p{
  margin:8px 0 2px 52px;
  line-height:1.45;
  color:#444;
}


/* NEYYI V19 REVIEW CLEAN COMPACT */
.review-card {
  padding: 12px !important;
  border-radius: 18px !important;
  margin-top: 12px !important;
  display:block !important;
}

.review-card-inner {
  display:block;
}

.review-top {
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
}

.review-avatar {
  width:42px !important;
  height:42px !important;
  flex:none;
}

.review-user {
  flex:1;
  min-width:0;
}

.review-user b {
  font-size:14px !important;
  font-weight:600 !important;
  line-height:1.2;
}

.review-robux {
  font-size:11px !important;
  font-weight:600;
  color:#b26a8b !important;
}

.review-meta {
  margin:3px 0 8px 52px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  font-size:11px !important;
}

.review-stars {
  letter-spacing:1px;
  font-size:14px;
  line-height:1;
}

.review-meta span {
  font-size:11px !important;
  color:#999;
}

.review-card-inner p {
  margin:6px 0 0 52px !important;
  line-height:1.45;
  font-size:13px;
  color:#444;
}


/* v20 review spacing fix */
.review-card {
  padding: 14px 16px;
  border-radius: 20px;
}

.review-card-inner {
  width: 100%;
}

.review-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 42px;
  height: 42px;
}

.review-user b {
  font-size: 16px;
  line-height: 1.1;
}

.review-robux {
  margin-left: auto;
  font-size: 14px;
  white-space: nowrap;
}

.review-meta {
  margin-top: 3px;
  margin-left: 52px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-stars {
  letter-spacing: 1px;
  line-height: 1;
}

.review-meta span {
  font-size: 13px;
}

.review-card-inner p {
  margin: 8px 0 0 52px;
  line-height: 1.35;
}

/* V21 REVIEW TIGHT STACK */
.review-card{
  padding:10px 12px !important;
}

.review-card .review-top{
  display:flex !important;
  align-items:center !important;
  margin-bottom:2px !important;
}

.review-user b{
  font-size:15px !important;
  line-height:18px !important;
}

.review-robux{
  font-size:12px !important;
  margin-left:auto !important;
}

.review-card .review-meta{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  margin-top:0 !important;
  padding-left:54px !important;
}

.review-stars{
  line-height:16px !important;
  letter-spacing:0 !important;
  font-size:17px !important;
}

.review-meta span{
  font-size:12px !important;
}

.review-card p{
  margin:5px 0 0 54px !important;
  font-size:14px !important;
  line-height:1.3 !important;
}

/* v22-review-mobile-align-fix */
.review-card {
  padding: 14px;
  border-radius: 20px;
}

.review-card-inner {
  width: 100%;
}

.review-top {
  display: grid;
  grid-template-columns: 42px 1fr auto;
  align-items: start;
  column-gap: 10px;
}

.review-avatar {
  width: 42px;
  height: 42px;
  grid-row: 1 / span 2;
}

.review-user {
  padding-top: 3px;
}

.review-user b {
  font-size: 16px;
  line-height: 1.1;
}

.review-robux {
  font-size: 14px;
  padding-top: 5px;
  white-space: nowrap;
}

.review-meta {
  margin-left: 52px;
  margin-top: -22px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.review-stars {
  font-size: 18px;
  letter-spacing: 1px;
  line-height: 1;
}

.review-meta span {
  font-size: 13px;
  color: #999;
}

.review-card-inner p {
  margin: 8px 0 0 52px;
  font-size: 15px;
  line-height: 1.35;
}

@media(max-width:600px){
  .review-card {
    padding: 13px;
  }
}

/* v23 review card mobile realign */
.review-card-inner{
  width:100%;
  display:flex;
  flex-direction:column;
}

.review-top{
  display:grid !important;
  grid-template-columns:42px 1fr auto !important;
  align-items:center;
  gap:10px !important;
}

.review-avatar{
  width:42px !important;
  height:42px !important;
}

.review-user{
  min-width:0;
}

.review-user b{
  font-size:16px !important;
  line-height:1.2;
}

.review-robux{
  font-size:14px !important;
  white-space:nowrap;
}

.review-meta{
  margin-top:3px !important;
  margin-left:52px !important;
  display:flex !important;
  justify-content:space-between !important;
  align-items:center;
}

.review-meta .review-stars{
  font-size:18px !important;
  letter-spacing:1px;
}

.review-meta span{
  font-size:13px !important;
}

.review-card-inner > p{
  margin:8px 0 0 52px !important;
  font-size:15px;
}


/* =====================================================
   V24 REVIEW SIZE BALANCE MOBILE
===================================================== */

.review-card {
  padding: 12px 14px;
  border-radius: 18px;
}

.review-card-inner {
  width: 100%;
}

.review-top {
  display: flex;
  align-items: center;
  gap: 10px;
}

.review-avatar {
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}

.review-user {
  flex: 1;
  min-width: 0;
}

.review-user b,
.review-content b {
  font-size: 15px !important;
  font-weight: 700;
}

.review-robux {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.review-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-left: 52px;
  margin-top: 3px;
}

.review-meta .review-stars {
  font-size: 16px;
  letter-spacing: 1px;
  margin: 0;
}

.review-meta span {
  font-size: 13px;
  color: #999;
}

.review-card p {
  margin: 7px 0 0 52px;
  font-size: 15px;
  line-height: 1.4;
  color: #444;
}


/* V25 REVIEW CARD FINAL MOBILE */
@media (max-width:600px){

.review-card{
  display:block !important;
  padding:12px 14px !important;
  border-radius:16px !important;
  margin-top:10px !important;
}

.review-card-inner{
  display:block !important;
}

.review-top{
  display:flex !important;
  align-items:center !important;
  gap:10px !important;
  width:100%;
}

.review-avatar{
  width:42px !important;
  height:42px !important;
}

.review-user{
  flex:1 !important;
}

.review-user b{
  font-size:15px !important;
  font-weight:700 !important;
  line-height:1 !important;
}

.review-robux{
  font-size:13px !important;
  font-weight:600 !important;
}

.review-meta{
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  margin-left:52px !important;
  margin-top:3px !important;
}

.review-stars{
  font-size:14px !important;
  letter-spacing:0 !important;
  line-height:1 !important;
  margin:0 !important;
}

.review-meta span{
  font-size:11px !important;
  color:#999 !important;
}

.review-card p{
  margin:8px 0 2px 52px !important;
  font-size:13px !important;
  line-height:1.4 !important;
}

}

/* v26 cute compact review mobile */
@media (max-width:600px){
.review-card{
  padding:10px 12px !important;
  border-radius:18px !important;
  margin-bottom:12px !important;
}
.review-card-inner{
  min-height:0 !important;
}
.review-top{
  min-height:36px !important;
  gap:8px !important;
}
.review-avatar{
  width:36px !important;
  height:36px !important;
}
.review-user b, .review-content b{
  font-size:14px !important;
  line-height:1.1 !important;
}
.review-robux{
  font-size:13px !important;
  font-weight:600 !important;
}
.review-meta{
  margin-left:44px !important;
  margin-top:1px !important;
  height:18px !important;
}
.review-stars{
  font-size:13px !important;
  line-height:1 !important;
  letter-spacing:-1px !important;
}
.review-meta span{
  font-size:10px !important;
}
.review-card p{
  margin:4px 0 0 44px !important;
  font-size:13px !important;
  line-height:1.25 !important;
}
}

/* v27 fix star position cute compact */
.review-card-inner{
  padding:10px 12px !important;
}
.review-top{
  display:grid !important;
  grid-template-columns:36px 1fr auto !important;
  align-items:center !important;
  gap:8px !important;
}
.review-avatar{
  width:36px !important;
  height:36px !important;
}
.review-user b{
  font-size:14px !important;
  line-height:1.1 !important;
}
.review-robux{
  font-size:13px !important;
  font-weight:600 !important;
}
.review-meta{
  display:flex !important;
  justify-content:space-between !important;
  align-items:center !important;
  margin-left:44px !important;
  margin-top:2px !important;
  height:18px !important;
}
.review-stars{
  text-align:left !important;
  font-size:13px !important;
  letter-spacing:0 !important;
  line-height:1 !important;
}
.review-meta span{
  font-size:12px !important;
}
.review-card-inner p{
  margin:5px 0 0 44px !important;
  font-size:14px !important;
  line-height:1.25 !important;
}
.review-card{
  min-height:0 !important;
}


/* V28 REVIEW CARD MOBILE REALIGN */
.review-layout{
  display:flex;
  align-items:flex-start;
  gap:10px;
}

.review-content{
  flex:1;
  min-width:0;
}

.review-row-top,
.review-row-rating{
  display:flex;
  justify-content:space-between;
  align-items:center;
}

.review-user{
  font-size:14px !important;
  font-weight:700;
}

.review-robux{
  font-size:12px !important;
}

.review-stars{
  font-size:13px !important;
  letter-spacing:1px;
  line-height:1;
}

.review-date{
  font-size:11px !important;
}

.review-content p{
  margin:5px 0 0 !important;
  font-size:13px !important;
}

.review-avatar{
  width:36px !important;
  height:36px !important;
}


/* V29 MOBILE MINI CUTE FIX */
@media (max-width:600px){
  .review-card{
    margin-bottom:10px !important;
    border-radius:18px !important;
  }

  .review-card-inner{
    padding:8px 10px !important;
  }

  .review-layout{
    gap:7px !important;
  }

  .review-avatar{
    width:30px !important;
    height:30px !important;
  }

  .review-row-top,
  .review-row-rating{
    min-height:16px !important;
  }

  .review-user,
  .review-user b{
    font-size:13px !important;
    line-height:1 !important;
  }

  .review-robux{
    font-size:11px !important;
    line-height:1 !important;
  }

  .review-stars{
    font-size:11px !important;
    letter-spacing:-1px !important;
  }

  .review-date{
    font-size:10px !important;
  }

  .review-content p{
    margin-top:3px !important;
    font-size:12px !important;
    line-height:1.15 !important;
  }
}


/* V31 TRUE MINI CUTE MOBILE - FINAL OVERRIDE */
@media (max-width:600px){
 .review-card{
   height:auto !important;
   min-height:0 !important;
   margin:8px 0 !important;
   border-radius:14px !important;
 }
 .review-card-inner{
   padding:9px 10px !important;
 }
 .review-mini{
   display:flex !important;
   gap:8px !important;
   align-items:flex-start !important;
 }
 .review-avatar{
   width:28px !important;
   height:28px !important;
   flex:none !important;
 }
 .review-mini-body{
   flex:1 !important;
   min-width:0 !important;
 }
 .review-mini-top,
 .review-mini-mid{
   display:flex !important;
   justify-content:space-between !important;
   align-items:center !important;
   height:15px !important;
 }
 .review-mini-user{
   font-size:12px !important;
   line-height:1 !important;
   font-weight:700 !important;
 }
 .review-mini-robux{
   font-size:10px !important;
 }
 .review-mini-stars{
   font-size:10px !important;
   letter-spacing:0 !important;
   line-height:1 !important;
 }
 .review-mini-date{
   font-size:9px !important;
 }
 .review-mini-body p{
   margin:4px 0 0 !important;
   font-size:12px !important;
   line-height:1.15 !important;
 }
}


/* V32 SOFT PINK CUTE REVIEW STYLE */
@media (max-width:600px){
  .review-card{
    background: linear-gradient(135deg,#fff7fb 0%,#ffeef6 100%) !important;
    border:1px solid #f7d7e6 !important;
    box-shadow:0 3px 12px rgba(220,120,160,.08) !important;
  }

  .review-mini-user,
  .review-user,
  .review-user b{
    color:#4b3742 !important;
    font-family: "Arial Rounded MT Bold", Arial, sans-serif !important;
  }

  .review-mini-stars,
  .review-stars{
    color:#e878ae !important;
  }

  .review-mini-robux,
  .review-robux{
    color:#b06a8d !important;
    font-weight:600 !important;
  }

  .review-mini-date,
  .review-date{
    color:#9c8a92 !important;
  }

  .review-mini-body p,
  .review-content p{
    color:#51444b !important;
    font-family:Arial,sans-serif !important;
  }
}


/* V33 review natural soft gradient */
.review-card,
.review-item,
.card-review {
  background: linear-gradient(to bottom, #ffffff 0%, #fff8fb 45%, #ffe8f2 100%) !important;
  border-color: rgba(230, 150, 180, .22) !important;
  box-shadow: 0 4px 14px rgba(220, 150, 180, .08) !important;
}


/* V35 stronger bottom pink gradient */
.review-card,
.review-item,
.card-review {
  background: linear-gradient(
    to bottom,
    #ffffff 0%,
    #fff8fb 45%,
    #ffdce9 100%
  ) !important;
}


/* COMMENT FONT ONLY - V36 */
.review-mini-body p {
    font-family: "M PLUS Rounded 1c", sans-serif !important;
    font-weight: 400 !important;
    letter-spacing: 0.1px;
}


/* =========================================================
   CEK PESANAN - LANJUT PEMBAYARAN
========================================================= */

.continue-payment-prompt {
  margin-bottom: 14px;
  padding: 14px;
  border: 1px solid #f0d8e1;
  border-radius: 16px;
  background: linear-gradient(145deg,#fff4f8,#ffffff);
  box-shadow: 0 5px 18px rgba(202,126,151,.05);
}

.continue-payment-prompt.hidden {
  display: none;
}

.continue-payment-copy strong,
.continue-payment-copy span {
  display: block;
}

.continue-payment-copy strong {
  color: #5b434c;
  font-size: 12px;
  font-weight: 800;
}

.continue-payment-copy span {
  margin-top: 5px;
  color: #9c858e;
  font-size: 9px;
  line-height: 1.55;
}

.continue-payment-button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 40px;
  margin-top: 11px;
  border-radius: 11px;
  background: #e98eab;
  color: #ffffff;
  font-size: 9.5px;
  font-weight: 900;
  letter-spacing: .25px;
  text-decoration: none;
  box-shadow: 0 4px 12px rgba(217,112,146,.14);
}

.continue-payment-button:active {
  transform: scale(.985);
}


/* =========================================================
   PAYMENT - COPY TOTAL + PROOF PREVIEW
========================================================= */

.payment-total-copy-wrap {
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
}

.copy-total-button {
  width: 27px;
  height: 27px;
  flex: 0 0 27px;
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid #f0dce3;
  border-radius: 8px;
  background: #fff6f9;
  color: var(--pink);
  cursor: pointer;
}

.copy-total-button svg {
  width: 12px;
  height: 12px;
  stroke-width: 1.8;
}

.copy-total-button:active {
  transform: scale(.96);
}

.payment-proof-preview {
  margin-top: 11px;
  padding: 9px;
  border: 1px solid #f0dce3;
  border-radius: 12px;
  background: #fffafb;
}

.payment-proof-preview.hidden {
  display: none;
}

.payment-proof-preview-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 8px;
}

.payment-proof-preview-head span {
  color: #75676c;
  font-size: 9px;
  font-weight: 700;
}

.change-proof-button {
  padding: 5px 8px;
  border: 0;
  border-radius: 8px;
  background: #ffeaf1;
  color: #d87596;
  font-size: 8px;
  font-weight: 800;
  cursor: pointer;
}

.payment-proof-preview-image-wrap {
  overflow: hidden;
  width: 100%;
  max-height: 310px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: #f7f2f4;
}

.payment-proof-preview-image {
  display: block;
  width: 100%;
  max-height: 310px;
  object-fit: contain;
}


/* =========================================================
   CEK PESANAN - INVOICE TERAKHIR
========================================================= */

.last-invoice-shortcut {
  width: 100%;
  margin-top: 9px;
  padding: 9px 11px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  border: 1px solid #f0dde4;
  border-radius: 11px;
  background: #fff8fa;
  color: #9c858e;
  cursor: pointer;
}

.last-invoice-shortcut.hidden {
  display: none;
}

.last-invoice-shortcut span {
  font-size: 8.5px;
}

.last-invoice-shortcut strong {
  color: #df7395;
  font-size: 9px;
  font-weight: 900;
  letter-spacing: .25px;
}

.last-invoice-shortcut:active {
  transform: scale(.99);
}