/* Divine Invoice Reward — tampilan customer.
   Semua warna lewat CSS variable; tema tinggal menimpa variabelnya saja
   (lihat blok .divr-theme-* di bawah). */

.divr-app {
  /* Tema dasar = LIGHT (Putih & Emas) */
  --divr-bg: #ffffff;
  --divr-panel: #faf7f1;
  --divr-line: #e7ddc8;
  --divr-gold: #a8842c;
  --divr-gold-soft: #86691c;
  --divr-text: #1b1a17;
  --divr-muted: #6b665c;

  --divr-tint: rgba(168, 132, 44, 0.08);
  --divr-focus: rgba(168, 132, 44, 0.2);
  --divr-glow: rgba(168, 132, 44, 0.35);
  --divr-glow-soft: rgba(168, 132, 44, 0.12);
  --divr-shadow: rgba(40, 32, 12, 0.16);
  --divr-card-shadow: 0 16px 44px rgba(40, 32, 12, 0.1);
  --divr-box-ink: rgba(255, 255, 255, 0.5);
  --divr-oncta: #241d0a;
  --divr-input-bg: #ffffff;

  --divr-danger: #b3261e;
  --divr-danger-bg: rgba(179, 38, 30, 0.08);
  --divr-danger-line: rgba(179, 38, 30, 0.32);

  --divr-radius: 16px;

  max-width: 760px;
  margin: 0 auto;
  padding: 28px 20px 36px;

  background: var(--divr-bg);
  border: 1px solid var(--divr-line);
  border-radius: var(--divr-radius);
  box-shadow: var(--divr-card-shadow);

  color: var(--divr-text);
  font-family: inherit;
  line-height: 1.55;

  box-sizing: border-box;
}

.divr-app *,
.divr-app *::before,
.divr-app *::after {
  box-sizing: border-box;
}


/*
 * [hidden] hanya diatur UA stylesheet sehingga KALAH dari
 * aturan author yang menyetel display.
 */
.divr-app [hidden] {
  display: none !important;
}


/* =========================================================
   THEMES
   ========================================================= */


/* Tema default memakai palet dasar Putih & Emas */


/* Krem & Emas — hangat, cocok untuk butik emas */
.divr-theme-cream {
  --divr-bg: #fbf7ef;
  --divr-panel: #f4ecdc;
  --divr-line: #e0d1b2;
  --divr-gold: #96761c;
  --divr-gold-soft: #765d13;
  --divr-text: #241f16;
  --divr-muted: #6d6455;

  --divr-tint: rgba(150, 118, 28, 0.09);
  --divr-focus: rgba(150, 118, 28, 0.22);
  --divr-glow: rgba(150, 118, 28, 0.35);
  --divr-glow-soft: rgba(150, 118, 28, 0.14);
  --divr-shadow: rgba(60, 47, 18, 0.18);
  --divr-card-shadow: 0 16px 44px rgba(60, 47, 18, 0.12);

  --divr-input-bg: #fffdf8;
}


/* Rose Gold — lembut, feminin */
.divr-theme-rose {
  --divr-bg: #fffafa;
  --divr-panel: #fdf1f2;
  --divr-line: #f0d3d7;
  --divr-gold: #b0616d;
  --divr-gold-soft: #8d4a55;
  --divr-text: #26191c;
  --divr-muted: #7a6469;

  --divr-tint: rgba(176, 97, 109, 0.08);
  --divr-focus: rgba(176, 97, 109, 0.2);
  --divr-glow: rgba(176, 97, 109, 0.32);
  --divr-glow-soft: rgba(176, 97, 109, 0.12);
  --divr-shadow: rgba(70, 30, 38, 0.16);
  --divr-card-shadow: 0 16px 44px rgba(70, 30, 38, 0.1);

  --divr-input-bg: #ffffff;
}


/* Biru Tua & Emas */
.divr-theme-navy {
  --divr-bg: #101a2c;
  --divr-panel: #182640;
  --divr-line: rgba(226, 194, 117, 0.3);
  --divr-gold: #e2c275;
  --divr-gold-soft: #f4ddaa;
  --divr-text: #f3f6fb;
  --divr-muted: #a7b3c8;

  --divr-tint: rgba(226, 194, 117, 0.08);
  --divr-focus: rgba(226, 194, 117, 0.2);
  --divr-glow: rgba(226, 194, 117, 0.45);
  --divr-glow-soft: rgba(226, 194, 117, 0.18);
  --divr-shadow: rgba(0, 0, 0, 0.4);
  --divr-card-shadow: 0 18px 48px rgba(4, 10, 22, 0.4);
  --divr-box-ink: rgba(16, 26, 44, 0.4);
  --divr-oncta: #101a2c;

  --divr-input-bg: #182640;

  --divr-danger: #ff8a8a;
  --divr-danger-bg: rgba(255, 107, 107, 0.14);
  --divr-danger-line: rgba(255, 107, 107, 0.42);
}


/* Hitam & Emas */
.divr-theme-gold {
  --divr-bg: #0f0d0b;
  --divr-panel: #17140f;
  --divr-line: rgba(212, 175, 55, 0.28);
  --divr-gold: #d4af37;
  --divr-gold-soft: #f0d98a;
  --divr-text: #f6f1e7;
  --divr-muted: #b8ac96;

  --divr-tint: rgba(212, 175, 55, 0.07);
  --divr-focus: rgba(212, 175, 55, 0.16);
  --divr-glow: rgba(212, 175, 55, 0.45);
  --divr-glow-soft: rgba(212, 175, 55, 0.18);
  --divr-shadow: rgba(0, 0, 0, 0.35);
  --divr-card-shadow: 0 18px 48px rgba(0, 0, 0, 0.35);
  --divr-box-ink: rgba(23, 20, 15, 0.35);
  --divr-oncta: #17140f;

  --divr-input-bg: #17140f;

  --divr-danger: #ff8a8a;
  --divr-danger-bg: rgba(255, 107, 107, 0.12);
  --divr-danger-line: rgba(255, 107, 107, 0.4);
}


/* =========================================================
   HERO
   ========================================================= */

.divr-hero {
  text-align: center;
  margin-bottom: 26px;
}

.divr-eyebrow {
  display: inline-block;
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--divr-gold);
  margin-bottom: 8px;
}

.divr-hero h2 {
  margin: 0 0 8px;
  font-size: 26px;
  line-height: 1.2;
  color: var(--divr-text);
}

.divr-hero p {
  margin: 0 auto;
  max-width: 52ch;
  color: var(--divr-muted);
  font-size: 15px;
}

.divr-window {
  margin-top: 10px !important;
  font-size: 13px !important;
}

.divr-window strong {
  color: var(--divr-gold-soft);
}


/* =========================================================
   CLOSED
   ========================================================= */

.divr-closed {
  text-align: center;
  padding: 24px 8px;
}

.divr-closed h2 {
  margin: 0 0 8px;
  color: var(--divr-gold);
}

.divr-closed p {
  margin: 0;
  color: var(--divr-muted);
}


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

.divr-step[hidden] {
  display: none;
}

.divr-form {
  display: grid;
  gap: 14px;
}

.divr-field {
  display: grid;
  gap: 6px;
}

.divr-field > span {
  font-size: 13px;
  color: var(--divr-muted);
  letter-spacing: 0.02em;
}

.divr-field > span b {
  color: var(--divr-gold);
}

.divr-field small {
  font-size: 12px;
  color: var(--divr-muted);
  opacity: 0.85;
}


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

.divr-app input[type="text"],
.divr-app input[type="tel"],
.divr-app input[type="email"] {
  width: 100%;

  padding: 13px 14px;

  background: var(--divr-input-bg);

  border: 1px solid var(--divr-line);
  border-radius: 10px;

  color: var(--divr-text);

  /*
   * 16px mencegah auto zoom Safari/iPhone.
   */
  font-size: 16px;

  font-family: inherit;
}

.divr-app input:focus {
  outline: none;

  border-color: var(--divr-gold);

  box-shadow: 0 0 0 3px var(--divr-focus);
}

.divr-app input::placeholder {
  color: var(--divr-muted);
  opacity: 0.6;
}


/* =========================================================
   CONSENT
   ========================================================= */

.divr-consent {
  display: flex;

  gap: 10px;

  align-items: flex-start;

  font-size: 13px;

  color: var(--divr-muted);
}

.divr-consent input {
  margin-top: 3px;

  accent-color: var(--divr-gold);
}


/* =========================================================
   HONEYPOT
   ========================================================= */

.divr-hp {
  position: absolute;

  left: -9999px;

  height: 0;

  overflow: hidden;
}


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

.divr-cta {
  margin-top: 4px;

  padding: 15px 20px;

  width: 100%;

  border: 0;

  border-radius: 12px;

  background:
    linear-gradient(
      135deg,
      var(--divr-gold),
      var(--divr-gold-soft)
    );

  color: #fff;

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

  letter-spacing: 0.02em;

  cursor: pointer;

  transition:
    transform 0.15s ease,
    opacity 0.15s ease;
}

.divr-theme-gold .divr-cta,
.divr-theme-navy .divr-cta {
  background:
    linear-gradient(
      135deg,
      var(--divr-gold),
      var(--divr-gold-soft)
    );

  color: var(--divr-oncta);
}

.divr-cta:hover {
  transform: translateY(-1px);
}

.divr-cta:disabled {
  opacity: 0.6;

  cursor: progress;

  transform: none;
}


/* =========================================================
   ERROR
   ========================================================= */

.divr-error {
  margin: 6px 0 0;

  padding: 11px 13px;

  border-radius: 10px;

  background: var(--divr-danger-bg);

  border: 1px solid var(--divr-danger-line);

  color: var(--divr-danger);

  font-size: 14px;
}


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

.divr-invoice-card {
  display: grid;

  gap: 2px;

  padding: 16px 18px;

  margin-bottom: 22px;

  background: var(--divr-panel);

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

  border-radius: 12px;

  text-align: center;
}

.divr-invoice-label {
  font-size: 11px;

  letter-spacing: 0.18em;

  color: var(--divr-gold);
}

.divr-invoice-card strong {
  font-size: 19px;
}

.divr-invoice-card span:not(.divr-invoice-label) {
  font-size: 14px;

  color: var(--divr-muted);
}

.divr-tier {
  font-size: 13px !important;

  color: var(--divr-gold-soft) !important;
}

.divr-step-boxes h3 {
  margin: 0 0 4px;

  text-align: center;

  font-size: 20px;
}

.divr-sub {
  margin: 0 0 20px;

  text-align: center;

  color: var(--divr-muted);

  font-size: 14px;
}


/* =========================================================
   BLIND BOX
   ========================================================= */

.divr-boxes {
  display: grid;

  grid-template-columns: repeat(3, 1fr);

  justify-items: center;

  gap: 14px;

  margin-bottom: 22px;
}

.divr-app[data-boxes="2"] .divr-boxes {
  grid-template-columns: repeat(2, 1fr);
}

.divr-app[data-boxes="4"] .divr-boxes,
.divr-app[data-boxes="7"] .divr-boxes,
.divr-app[data-boxes="8"] .divr-boxes {
  grid-template-columns: repeat(4, 1fr);
}

.divr-app[data-boxes="5"] .divr-boxes {
  grid-template-columns: repeat(5, 1fr);
}


/* =========================================================
   BOX
   ========================================================= */

.divr-box {
  width: 100%;

  max-width: 190px;

  position: relative;

  aspect-ratio: 1 / 1;

  padding: 0;

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

  border-radius: 14px;

  background:
    linear-gradient(
      160deg,
      var(--divr-panel),
      var(--divr-tint)
    );

  cursor: pointer;

  overflow: hidden;

  transition:
    transform 0.18s ease,
    box-shadow 0.18s ease,
    opacity 0.3s ease;
}

.divr-box:hover:not(:disabled) {
  transform: translateY(-4px);

  box-shadow: 0 10px 24px var(--divr-shadow);

  border-color: var(--divr-gold);
}

.divr-box:disabled {
  cursor: default;
}

.divr-box.is-dimmed {
  opacity: 0.25;

  transform: scale(0.94);
}


/* =========================================================
   BOX BODY
   ========================================================= */

.divr-box-body {
  position: absolute;

  inset: 34% 18% 16%;

  border-radius: 6px;

  background:
    linear-gradient(
      180deg,
      var(--divr-gold),
      var(--divr-gold-soft)
    );
}

.divr-box-body::after {
  content: "";

  position: absolute;

  left: 50%;

  top: 0;
  bottom: 0;

  width: 12%;

  transform: translateX(-50%);

  background: var(--divr-box-ink);
}


/* =========================================================
   BOX LID
   ========================================================= */

.divr-box-lid {
  position: absolute;

  left: 12%;
  right: 12%;

  top: 24%;

  height: 16%;

  border-radius: 5px;

  background:
    linear-gradient(
      180deg,
      var(--divr-gold-soft),
      var(--divr-gold)
    );

  transform-origin: center bottom;

  transition:
    transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 0.6s ease;
}


/* =========================================================
   BOX NUMBER
   ========================================================= */

.divr-box-no {
  position: absolute;

  top: 8%;

  left: 0;
  right: 0;

  font-size: 13px;

  color: var(--divr-muted);
}


/* =========================================================
   BOX ANIMATION
   ========================================================= */

.divr-box.is-opening {
  animation: divr-shake 0.5s ease-in-out 2;
}

.divr-box.is-opening .divr-box-lid {
  transform:
    translateY(-70%)
    rotate(-14deg);

  opacity: 0.9;
}

.divr-box.is-open {
  box-shadow:
    0 0 0 2px var(--divr-gold),
    0 0 34px var(--divr-glow);
}

@keyframes divr-shake {

  0%,
  100% {
    transform: rotate(0deg);
  }

  25% {
    transform: rotate(-4deg);
  }

  75% {
    transform: rotate(4deg);
  }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

  .divr-box,
  .divr-box-lid,
  .divr-cta {
    transition: none;
  }

  .divr-box.is-opening {
    animation: none;
  }

}


/* =========================================================
   PRIZE LIST
   ========================================================= */

.divr-prize-list {
  padding: 14px 16px;

  border: 1px dashed var(--divr-line);

  border-radius: 12px;

  font-size: 13px;

  color: var(--divr-muted);
}

.divr-prize-list > span {
  display: block;

  margin-bottom: 6px;

  letter-spacing: 0.04em;
}

.divr-prize-list ul {
  margin: 0;

  padding-left: 18px;
}

.divr-prize-list li {
  margin-bottom: 2px;
}

.divr-prize-list strong {
  color: var(--divr-gold-soft);
}

.divr-prize-list em {
  font-style: normal;

  opacity: 0.8;
}

.divr-chance-note {
  margin: 10px 0 0;

  padding-top: 8px;

  border-top: 1px dashed var(--divr-line);

  font-size: 12px;

  color: var(--divr-gold-soft);
}


/* =========================================================
   RESULT
   ========================================================= */

.divr-result-card {
  padding: 26px 22px;

  text-align: center;

  background: var(--divr-panel);

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

  border-radius: 16px;
}

.divr-step-result.is-winner .divr-result-card {
  border-color: var(--divr-gold);

  box-shadow:
    0 0 44px var(--divr-glow-soft) inset;
}


/* =========================================================
   RESULT BADGE
   ========================================================= */

.divr-result-badge {
  display: inline-block;

  padding: 6px 14px;

  margin-bottom: 12px;

  border-radius: 999px;

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

  font-size: 11px;

  letter-spacing: 0.18em;

  color: var(--divr-muted);
}

.divr-step-result.is-winner .divr-result-badge {
  border-color: var(--divr-gold);

  color: var(--divr-gold);
}

.divr-result-card h3 {
  margin: 0 0 6px;

  font-size: 26px;

  line-height: 1.25;
}

.divr-discount {
  margin: 0 0 18px;

  font-size: 17px;

  color: var(--divr-gold-soft);
}


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

.divr-voucher {
  display: grid;

  gap: 8px;

  justify-items: center;

  padding: 18px;

  border: 1px dashed var(--divr-gold);

  border-radius: 12px;

  background: var(--divr-tint);
}

.divr-voucher > span {
  font-size: 11px;

  letter-spacing: 0.18em;

  color: var(--divr-muted);
}

.divr-voucher code {
  font-size: 26px;

  font-weight: 700;

  letter-spacing: 0.08em;

  color: var(--divr-gold);

  background: none;

  padding: 0;
}


/* =========================================================
   COPY BUTTON
   ========================================================= */

.divr-copy {
  padding: 9px 16px;

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

  border-radius: 9px;

  background: transparent;

  color: var(--divr-text);

  font-size: 13px;

  cursor: pointer;
}

.divr-copy:hover {
  border-color: var(--divr-gold);

  color: var(--divr-gold);
}

.divr-voucher-meta {
  margin: 0;

  font-size: 13px;

  color: var(--divr-muted);
}


/* =========================================================
   NOTE
   ========================================================= */

.divr-note {
  margin: 14px 0 0;

  font-size: 13px;

  color: var(--divr-gold-soft);
}


/* =========================================================
   TERMS
   ========================================================= */

.divr-terms {
  margin-top: 18px;

  padding-top: 14px;

  border-top: 1px solid var(--divr-line);

  text-align: left;

  font-size: 13px;

  color: var(--divr-muted);
}

.divr-terms strong {
  display: block;

  margin-bottom: 6px;

  color: var(--divr-text);

  font-size: 12px;

  letter-spacing: 0.1em;
}

.divr-terms ul {
  margin: 0;

  padding-left: 18px;
}

.divr-screenshot-hint {
  margin: 16px 0 0;

  font-size: 12px;

  color: var(--divr-muted);
}


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


/* ==========================================================
   TABLET / ELEMENTOR FIX
   Halaman Rewards = page ID 5766
   ========================================================== */

@media screen and (max-width: 767px) {

  /*
   * Elementor website Anda mempunyai default padding
   * kiri/kanan 6rem pada .e-con.
   *
   * Khusus container Rewards ini kita kembalikan menjadi
   * padding mobile normal.
   */

  body.page-id-5766
  .elementor-element.elementor-element-2bb552d {
    --container-default-padding-left: 16px !important;
    --container-default-padding-right: 16px !important;

    --padding-left: 16px !important;
    --padding-right: 16px !important;

    width: 100% !important;
    max-width: 100% !important;

    padding-left: 16px !important;
    padding-right: 16px !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    box-sizing: border-box !important;
  }


  /*
   * HTML Widget yang berisi shortcode reward.
   */

  body.page-id-5766
  .elementor-element.elementor-element-2b405f2 {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
  }


  body.page-id-5766
  .elementor-element.elementor-element-2b405f2
  > .elementor-widget-container {
    width: 100% !important;
    max-width: 100% !important;

    margin: 0 !important;

    padding: 0 !important;
  }


  /*
   * DIVR card.
   *
   * Tetap mempertahankan desain desktop asli.
   */

  body.page-id-5766 .divr-app {
    display: block;

    width: 100% !important;
    max-width: 760px !important;

    min-width: 0;

    margin-left: auto !important;
    margin-right: auto !important;

    box-sizing: border-box !important;
  }


  /*
   * Semua step tidak boleh melebihi card.
   */

  .divr-step,
  .divr-form,
  .divr-field {
    max-width: 100%;

    min-width: 0;
  }


  /*
   * Input selalu mengikuti parent.
   */

  .divr-app input[type="text"],
  .divr-app input[type="tel"],
  .divr-app input[type="email"] {
    max-width: 100%;

    min-width: 0;
  }

}


/* ==========================================================
   MOBILE
   ========================================================== */

@media screen and (max-width: 560px) {

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

  .divr-app {
    width: 100% !important;
    max-width: 100% !important;

    min-width: 0;

    margin: 0 auto !important;

    /*
     * Desain asli tetap:
     * background, border, radius, shadow.
     */
    padding: 22px 14px 28px;

    border-radius: 12px;

    box-sizing: border-box;
  }


  /* ========================================================
     HERO
     ======================================================== */

  .divr-hero {
    width: 100%;

    margin-bottom: 24px;

    padding-left: 2px;
    padding-right: 2px;

    text-align: center;
  }

  .divr-eyebrow {
    display: inline-block;

    margin-bottom: 8px;

    font-size: 10px;

    line-height: 1.5;

    letter-spacing: 0.20em;
  }

  .divr-hero h2 {
    margin: 0 0 10px;

    font-size: 22px;

    line-height: 1.2;

    word-break: normal;

    overflow-wrap: anywhere;
  }

  .divr-hero p {
    width: 100%;

    max-width: 32ch;

    margin-left: auto;
    margin-right: auto;

    font-size: 14px;

    line-height: 1.6;
  }

  .divr-window {
    margin-top: 10px !important;

    font-size: 12px !important;

    line-height: 1.5 !important;
  }


  /* ========================================================
     STEP
     ======================================================== */

  .divr-step {
    width: 100%;

    max-width: 100%;

    min-width: 0;
  }


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

  .divr-step-form,
  .divr-form {
    width: 100%;

    max-width: 100%;

    min-width: 0;
  }

  .divr-form {
    display: grid;

    gap: 15px;
  }


  /* ========================================================
     FIELD
     ======================================================== */

  .divr-field {
    display: grid;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    gap: 6px;
  }

  .divr-field > span {
    display: block;

    font-size: 13px;

    line-height: 1.45;
  }

  .divr-field small {
    display: block;

    font-size: 12px;

    line-height: 1.5;
  }


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

  .divr-app input[type="text"],
  .divr-app input[type="tel"],
  .divr-app input[type="email"] {
    display: block;

    width: 100% !important;
    max-width: 100% !important;

    min-width: 0 !important;

    height: 50px;

    margin: 0;

    padding: 0 14px;

    border-radius: 10px;

    font-size: 16px;

    line-height: normal;

    box-sizing: border-box;

    -webkit-appearance: none;

    appearance: none;
  }

  .divr-app input::placeholder {
    font-size: 14px;

    white-space: nowrap;

    overflow: hidden;

    text-overflow: ellipsis;
  }


  /* ========================================================
     CONSENT
     ======================================================== */

  .divr-consent {
    display: flex;

    width: 100%;

    max-width: 100%;

    min-width: 0;

    gap: 9px;

    align-items: flex-start;

    font-size: 12px;

    line-height: 1.5;
  }

  .divr-consent input[type="checkbox"] {
    width: 17px;

    height: 17px;

    min-width: 17px;

    flex: 0 0 17px;

    margin: 2px 0 0;

    padding: 0;
  }

  .divr-consent span {
    display: block;

    flex: 1;

    min-width: 0;
  }


  /* ========================================================
     CTA
     ======================================================== */

  .divr-cta {
    width: 100%;

    min-height: 50px;

    margin-top: 3px;

    padding: 13px 15px;

    border-radius: 12px;

    font-size: 15px;

    line-height: 1.35;

    touch-action: manipulation;
  }

  .divr-cta:hover {
    transform: none;
  }

  .divr-cta:active:not(:disabled) {
    transform: scale(0.985);
  }


  /* ========================================================
     ERROR
     ======================================================== */

  .divr-error {
    width: 100%;

    padding: 10px 12px;

    font-size: 13px;

    line-height: 1.5;

    box-sizing: border-box;
  }


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

  .divr-invoice-card {
    width: 100%;

    max-width: 100%;

    padding: 14px 15px;

    margin-bottom: 20px;

    border-radius: 12px;

    box-sizing: border-box;
  }

  .divr-invoice-label {
    font-size: 10px;
  }

  .divr-invoice-card strong {
    font-size: 18px;

    line-height: 1.4;

    overflow-wrap: anywhere;
  }

  .divr-invoice-card span:not(.divr-invoice-label) {
    font-size: 13px;

    line-height: 1.45;
  }


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

  .divr-step-boxes h3 {
    margin-bottom: 5px;

    font-size: 19px;

    line-height: 1.3;
  }

  .divr-sub {
    max-width: 32ch;

    margin-left: auto;
    margin-right: auto;

    margin-bottom: 18px;

    font-size: 13px;

    line-height: 1.55;
  }


  /* ========================================================
     BLIND BOX GRID
     ======================================================== */

  .divr-boxes,
  .divr-app[data-boxes="2"] .divr-boxes,
  .divr-app[data-boxes="3"] .divr-boxes,
  .divr-app[data-boxes="4"] .divr-boxes,
  .divr-app[data-boxes="5"] .divr-boxes,
  .divr-app[data-boxes="6"] .divr-boxes,
  .divr-app[data-boxes="7"] .divr-boxes,
  .divr-app[data-boxes="8"] .divr-boxes {
    width: 100%;

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

    gap: 10px;

    margin-bottom: 20px;
  }


  /*
   * Bila jumlah box ganjil,
   * box terakhir berada di tengah.
   */

  .divr-app[data-boxes="3"]
  .divr-box:last-child,

  .divr-app[data-boxes="5"]
  .divr-box:last-child,

  .divr-app[data-boxes="7"]
  .divr-box:last-child {
    grid-column: 1 / -1;

    width: calc(50% - 5px);

    justify-self: center;
  }


  /* ========================================================
     BOX
     ======================================================== */

  .divr-box {
    width: 100%;

    max-width: none;

    border-radius: 14px;

    touch-action: manipulation;
  }


  /*
   * Tidak perlu hover desktop pada touchscreen.
   */

  .divr-box:hover:not(:disabled) {
    transform: none;

    box-shadow: none;
  }

  .divr-box:active:not(:disabled) {
    transform: scale(0.97);

    border-color: var(--divr-gold);
  }


  /* ========================================================
     PRIZE LIST
     ======================================================== */

  .divr-prize-list {
    width: 100%;

    max-width: 100%;

    padding: 13px 14px;

    font-size: 12px;

    line-height: 1.55;

    box-sizing: border-box;
  }

  .divr-prize-list > span {
    line-height: 1.5;
  }

  .divr-prize-list ul {
    padding-left: 17px;
  }

  .divr-prize-list li {
    margin-bottom: 4px;

    overflow-wrap: anywhere;
  }

  .divr-chance-note {
    font-size: 11px;

    line-height: 1.5;
  }


  /* ========================================================
     RESULT
     ======================================================== */

  .divr-result-card {
    width: 100%;

    max-width: 100%;

    padding: 22px 16px;

    border-radius: 14px;

    box-sizing: border-box;
  }

  .divr-result-badge {
    max-width: 100%;

    padding: 5px 11px;

    margin-bottom: 10px;

    font-size: 9px;

    line-height: 1.5;

    letter-spacing: 0.14em;

    white-space: normal;
  }

  .divr-result-card h3 {
    font-size: 22px;

    line-height: 1.3;

    overflow-wrap: anywhere;
  }

  .divr-discount {
    margin-bottom: 16px;

    font-size: 15px;

    line-height: 1.5;
  }


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

  .divr-voucher {
    width: 100%;

    max-width: 100%;

    padding: 15px 11px;

    gap: 8px;

    box-sizing: border-box;
  }

  .divr-voucher > span {
    font-size: 10px;

    line-height: 1.4;

    letter-spacing: 0.15em;
  }

  .divr-voucher code {
    display: block;

    width: 100%;

    max-width: 100%;

    padding: 0;

    font-size: 21px;

    line-height: 1.35;

    white-space: normal;

    word-break: break-word;

    overflow-wrap: anywhere;
  }

  .divr-copy {
    min-height: 42px;

    padding: 8px 15px;

    font-size: 12px;

    touch-action: manipulation;
  }

  .divr-voucher-meta {
    font-size: 12px;

    line-height: 1.5;
  }


  /* ========================================================
     TERMS
     ======================================================== */

  .divr-note,
  .divr-terms {
    font-size: 12px;

    line-height: 1.55;
  }

  .divr-screenshot-hint {
    font-size: 11px;

    line-height: 1.55;
  }

}


/* ==========================================================
   SMALL PHONE
   320 - 360 px
   ========================================================== */

@media screen and (max-width: 360px) {

  body.page-id-5766
  .elementor-element.elementor-element-2bb552d {
    --container-default-padding-left: 10px !important;
    --container-default-padding-right: 10px !important;

    --padding-left: 10px !important;
    --padding-right: 10px !important;

    padding-left: 10px !important;
    padding-right: 10px !important;
  }


  .divr-app {
    padding: 20px 12px 26px;
  }


  .divr-eyebrow {
    font-size: 9px;

    letter-spacing: 0.18em;
  }


  .divr-hero h2 {
    font-size: 21px;
  }


  .divr-hero p {
    font-size: 13px;
  }


  .divr-form {
    gap: 14px;
  }


  .divr-field > span {
    font-size: 13px;
  }


  .divr-field small {
    font-size: 11px;
  }


  .divr-app input[type="text"],
  .divr-app input[type="tel"],
  .divr-app input[type="email"] {
    height: 48px;

    padding-left: 12px;
    padding-right: 12px;
  }


  .divr-app input::placeholder {
    font-size: 13px;
  }


  .divr-cta {
    min-height: 48px;

    padding-left: 12px;
    padding-right: 12px;

    font-size: 14px;
  }


  .divr-boxes,
  .divr-app[data-boxes="2"] .divr-boxes,
  .divr-app[data-boxes="3"] .divr-boxes,
  .divr-app[data-boxes="4"] .divr-boxes,
  .divr-app[data-boxes="5"] .divr-boxes,
  .divr-app[data-boxes="6"] .divr-boxes,
  .divr-app[data-boxes="7"] .divr-boxes,
  .divr-app[data-boxes="8"] .divr-boxes {
    gap: 8px;
  }


  .divr-app[data-boxes="3"]
  .divr-box:last-child,

  .divr-app[data-boxes="5"]
  .divr-box:last-child,

  .divr-app[data-boxes="7"]
  .divr-box:last-child {
    width: calc(50% - 4px);
  }


  .divr-result-card {
    padding: 20px 12px;
  }


  .divr-voucher code {
    font-size: 18px;
  }

}


/* ==========================================================
   TOUCH DEVICE
   ========================================================== */

@media (hover: none) and (pointer: coarse) {

  .divr-box:hover:not(:disabled) {
    transform: none;

    box-shadow: none;
  }


  .divr-cta:hover {
    transform: none;
  }

}