/* BAJAJ4D local styles
   Extracted from index.html; source order is preserved. */

/* Keep the desktop banner square instead of using its HTML height of 1254px. */
@media screen and (min-width: 641px) {
  .pd-main-image img {
    height: auto;
  }
}

/* ===== Inline style block 1 ===== */
.paylater-promo {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, #ffffff 0, #ffffff 100%);
      border: 1px solid #000000;
      border-radius: 8px;
      padding: 8px 12px;
      font-size: 13px;
      line-height: 1.4;
      margin: 8px 0
    }

    .paylater-promo-sm {
      padding: 6px 10px;
      font-size: 11px;
      gap: 6px
    }

    .paylater-promo-md {
      padding: 8px 12px;
      font-size: 13px;
      gap: 8px
    }

    .paylater-promo-lg {
      padding: 10px 16px;
      font-size: 14px;
      gap: 10px
    }

    .paylater-icon {
      font-size: 1.2em;
      flex-shrink: 0
    }

    .paylater-text {
      display: flex;
      flex-direction: column;
      gap: 2px
    }

    .paylater-text strong {
      color: #000000;
      font-weight: 600
    }

    .paylater-text small {
      color: #000000;
      font-size: .85em;
      opacity: .9
    }

    .paylater-desktop-only {
      display: none
    }

    .paylater-mobile-only {
      display: flex
    }

    @media (min-width:641px) {
      .paylater-desktop-only {
        display: flex
      }

      .paylater-mobile-only {
        display: none
      }
    }

    @media (max-width:640px) {
      .paylater-promo {
        font-size: 12px;
        padding: 7px 10px
      }

      .paylater-promo-lg {
        font-size: 13px;
        padding: 8px 12px
      }
    }

    @media print {
      .paylater-promo {
        display: none !important
      }
    }

    .paylater-compact {
      display: inline-block;
      font-size: 11px;
      font-weight: 600;
      color: #f97316;
      background: #d1fae5;
      padding: 3px 8px;
      border-radius: 4px;
      margin: 6px 0 4px;
      line-height: 1.3
    }

    @media (max-width:640px) {
      .paylater-compact {
        font-size: 10px;
        padding: 2px 6px;
        margin: 5px 0 3px
      }
    }

    @media print {
      .paylater-compact {
        display: none !important
      }
    }

/* ===== Inline style block 2 ===== */
.pd-voucher-minimal {
      margin: 10px 0;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .pdv-min-item {
      display: flex;
      align-items: center;
      gap: 8px;
      padding: 0;
      height: 32px;
      transition: all .2s ease
    }

    .pdv-min-hidden {
      display: none
    }

    .pdv-min-disabled {
      opacity: .5
    }

    .pdv-badge-btn {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      background: linear-gradient(135deg, #c2410c 0, #c2410c 100%);
      border: none;
      border-radius: 8px;
      padding: 3px;
      cursor: pointer;
      transition: all .2s ease;
      width: auto
    }

    .pdv-badge-btn:hover:not(:disabled) {
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(234, 88, 12, .3)
    }

    .pdv-badge-btn:disabled {
      opacity: .6;
      cursor: not-allowed
    }

    .pdv-badge-icon {
      color: #fff;
      flex-shrink: 0
    }

    .pdv-badge-text {
      font-size: 14px;
      font-weight: 700;
      color: #fff;
      white-space: nowrap
    }

    .pdv-badge-code {
      font-family: 'Courier New', monospace;
      font-size: 13px;
      font-weight: 700;
      color: #fff;
      background: rgba(255, 255, 255, .2);
      padding: 4px 8px;
      border-radius: 4px;
      border: none;
      white-space: nowrap
    }

    .pdv-min-copy,
    .pdv-min-more {
      padding: 4px 12px;
      font-size: 12px;
      font-weight: 600;
      border-radius: 5px;
      border: 1px solid #e2e8f0;
      background: #fff;
      color: #c2410c;
      cursor: pointer;
      transition: all .2s ease;
      white-space: nowrap
    }

    .pdv-min-copy:hover:not(:disabled),
    .pdv-min-more:hover {
      background: #c2410c;
      color: #fff;
      border-color: #c2410c
    }

    .pdv-min-copy:disabled {
      opacity: .4;
      cursor: not-allowed
    }

    .pdv-min-copy.copied {
      background: #c52222;
      color: #fff;
      border-color: #c52222
    }

    .pdv-min-more {
      margin-left: auto
    }

    .modal-close {
      position: absolute;
      top: 20px;
      right: 20px;
      background: none;
      border: none;
      cursor: pointer;
      color: #64748b;
      padding: 4px;
      transition: color .2s ease
    }

    .modal-close:hover {
      color: #1e293b
    }

    .modal-body {
      margin-bottom: 8px
    }

    .voucher-modal-content {
      text-align: center
    }

    .voucher-modal-badge {
      display: inline-flex;
      flex-direction: row;
      align-items: center;
      gap: 6px;
      background: linear-gradient(135deg, #c2410c 0, #c2410c 100%);
      border-radius: 10px;
      padding: 8px 16px;
      margin-bottom: 12px
    }

    .vmb-value {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      line-height: 1
    }

    .vmb-label {
      font-size: 18px;
      font-weight: 700;
      color: #fff;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .voucher-modal-code {
      font-family: 'Courier New', monospace;
      font-size: 14px;
      font-weight: 700;
      color: #c2410c;
      background: rgba(234, 88, 12, .1);
      padding: 6px 12px;
      border-radius: 6px;
      border: 2px dashed rgba(234, 88, 12, .3);
      display: inline-block;
      margin-bottom: 10px
    }

    .voucher-modal-name {
      font-size: 14px;
      font-weight: 600;
      color: #1e293b;
      margin-bottom: 16px
    }

    .voucher-modal-details {
      text-align: left;
      background: #f8fafc;
      border-radius: 8px;
      padding: 12px;
      margin-bottom: 16px
    }

    .vmd-item {
      display: flex;
      align-items: flex-start;
      gap: 8px;
      padding: 6px 0;
      font-size: 13px;
      color: #64748b;
      border-bottom: 1px solid #e2e8f0
    }

    .vmd-item:last-child {
      border-bottom: none
    }

    .vmd-item svg {
      color: #c2410c;
      flex-shrink: 0;
      margin-top: 2px
    }

    .vmd-item strong {
      color: #1e293b
    }

    .modal-actions {
      padding: 20px
    }

    .modal-btn-primary {
      background: linear-gradient(135deg, #c2410c 0, #c2410c 100%);
      color: #fff
    }

    .modal-btn-primary:hover {
      opacity: .9;
      transform: translateY(-1px)
    }

    @media (max-width:640px) {
      .pdv-min-item {
        gap: 6px
      }

      .pdv-badge-btn {
        padding: 3px;
        gap: 6px
      }

      .pdv-badge-text {
        font-size: 13px
      }

      .pdv-badge-code {
        font-size: 12px;
        padding: 3px 6px
      }

      .pdv-min-copy,
      .pdv-min-more {
        padding: 3px 10px;
        font-size: 11px
      }

      .modal-dialog {
        max-width: 95%;
        margin: 20px
      }

      .vmb-value {
        font-size: 16px
      }

      .vmb-label {
        font-size: 16px
      }

      .voucher-modal-code {
        font-size: 13px;
        padding: 5px 10px
      }
    }

/* ===== Inline style block 3 ===== */
.promo-endyear-mini-banner {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 12px 16px;
      background: rgba(255, 255, 255, .8);
      backdrop-filter: blur(10px);
      -webkit-backdrop-filter: blur(10px);
      border: 2px solid rgba(242, 140, 26, .2);
      border-radius: 12px;
      margin: 16px 0;
      box-shadow: 0 4px 16px rgba(0, 0, 0, .08);
      transition: all .3s ease
    }

    .promo-endyear-mini-banner:hover {
      transform: translateY(-2px);
      box-shadow: 0 6px 20px rgba(0, 0, 0, .12);
      border-color: rgba(242, 140, 26, .4)
    }

    .pey-icon {
      font-size: 32px;
      line-height: 1;
      flex-shrink: 0
    }

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

    .pey-content strong {
      display: block;
      font-size: 14px;
      font-weight: 700;
      color: #c2410c;
      margin-bottom: 2px
    }

    .pey-content span {
      display: block;
      font-size: 13px;
      color: #64748b;
      line-height: 1.4
    }

    .pey-link {
      flex-shrink: 0;
      padding: 8px 16px;
      background: linear-gradient(135deg, #c2410c, #ea580c);
      color: #fff;
      text-decoration: none;
      font-size: 13px;
      font-weight: 700;
      border-radius: 8px;
      white-space: nowrap;
      transition: all .2s ease;
      box-shadow: 0 2px 8px rgba(242, 140, 26, .25)
    }

    .pey-link:hover {
      transform: translateX(2px);
      box-shadow: 0 4px 12px rgba(242, 140, 26, .35)
    }

    @media(max-width:640px) {
      .promo-endyear-mini-banner {
        flex-wrap: wrap;
        gap: 8px;
        padding: 10px 12px
      }

      .pey-icon {
        font-size: 28px;
        align-self: flex-start
      }

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

      .pey-content strong {
        font-size: 12px
      }

      .pey-content span {
        font-size: 11px;
        line-height: 1.3
      }

      .pey-link {
        width: 100%;
        flex-basis: 100%;
        font-size: 11px;
        padding: 6px 12px;
        text-align: center
      }
    }

    @media print {
      .promo-endyear-mini-banner {
        display: none !important
      }
    }

/* ===== Inline style block 4 ===== */
.pd-title-row {
      position: relative;
      margin-bottom: 12px;
      padding-right: 52px
    }

    .pd-title {
      margin: 0 !important
    }

    .pd-share-btn {
      position: absolute;
      top: 0;
      right: 0;
      width: 40px;
      height: 40px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 10px;
      border: 1px solid #e2e8f0;
      background: #fff;
      color: #64748b;
      cursor: pointer;
      transition: all .2s ease;
      -webkit-tap-highlight-color: transparent
    }

    .pd-share-btn:hover {
      background: #f8fafc;
      border-color: #cbd5e1;
      color: #0f172a;
      transform: translateY(-1px)
    }

    .pd-share-btn:active {
      transform: translateY(0)
    }

    .pd-share-btn svg {
      display: block
    }

    .pd-share-modal-overlay {
      position: fixed;
      inset: 0;
      background: rgba(15, 23, 42, .75);
      backdrop-filter: blur(4px);
      z-index: 99999;
      display: none;
      align-items: center;
      justify-content: center;
      padding: 0;
      animation: fadeIn .2s ease
    }

    .pd-share-modal-overlay.show {
      display: flex
    }

    .pd-share-modal {
      background: #fff;
      border-radius: 20px;
      box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
      max-width: 480px;
      width: 100%;
      max-height: 90vh;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      animation: slideUp .3s cubic-bezier(.16, 1, .3, 1)
    }

    @keyframes fadeIn {
      from {
        opacity: 0
      }

      to {
        opacity: 1
      }
    }

    @keyframes slideUp {
      from {
        opacity: 0;
        transform: translateY(20px) scale(.95)
      }

      to {
        opacity: 1;
        transform: translateY(0) scale(1)
      }
    }

    .pd-share-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: 20px 24px;
      border-bottom: 1px solid #f1f5f9
    }

    .pd-share-title {
      font-size: 18px;
      font-weight: 700;
      color: #0f172a;
      margin: 0
    }

    .pd-share-close {
      width: 32px;
      height: 32px;
      border-radius: 8px;
      border: 0;
      background: transparent;
      color: #64748b;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all .15s ease
    }

    .pd-share-close:hover {
      background: #f1f5f9;
      color: #0f172a
    }

    .pd-share-body {
      padding: 24px;
      overflow-y: auto
    }

    .pd-share-preview {
      display: flex;
      gap: 12px;
      padding: 16px;
      background: #f8fafc;
      border-radius: 12px;
      margin-bottom: 24px
    }

    .pd-share-preview-img {
      width: 64px;
      height: 64px;
      border-radius: 8px;
      object-fit: cover;
      flex-shrink: 0;
      border: 1px solid #e2e8f0
    }

    .pd-share-preview-info {
      flex: 1;
      min-width: 0
    }

    .pd-share-preview-name {
      font-size: 14px;
      font-weight: 600;
      color: #0f172a;
      margin: 0 0 4px 0;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden
    }

    .pd-share-preview-price {
      font-size: 16px;
      font-weight: 700;
      color: #f97316;
      margin: 0
    }

    .pd-share-label {
      font-size: 13px;
      font-weight: 600;
      color: #475569;
      margin: 0 0 12px 0;
      text-transform: uppercase;
      letter-spacing: .5px
    }

    .pd-share-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 12px;
      margin-bottom: 24px
    }

    .pd-share-option {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      padding: 16px 8px;
      border: 1.5px solid #e2e8f0;
      border-radius: 12px;
      background: #fff;
      cursor: pointer;
      transition: all .2s ease;
      text-decoration: none;
      color: inherit
    }

    .pd-share-option:hover {
      border-color: #94a3b8;
      background: #f8fafc;
      transform: translateY(-2px)
    }

    .pd-share-option:active {
      transform: translateY(0)
    }

    .pd-share-icon {
      width: 40px;
      height: 40px;
      border-radius: 10px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      position: relative
    }

    .pd-share-icon svg {
      width: 24px;
      height: 24px;
      display: block
    }

    .pd-share-icon-whatsapp {
      background: linear-gradient(135deg, #f97316 0%, #3c3300 100%);
      color: #fff
    }

    .pd-share-icon-facebook {
      background: linear-gradient(135deg, #c2410c 0%, #c2410c 100%);
      color: #fff
    }

    .pd-share-icon-twitter {
      background: linear-gradient(135deg, #c2410c 0%, #c2410c 100%);
      color: #fff
    }

    .pd-share-icon-telegram {
      background: linear-gradient(135deg, #431407 0%, #9a3412 100%);
      color: #fff
    }

    .pd-share-icon-email {
      background: linear-gradient(135deg, #EA4335 0%, #c5331f 100%);
      color: #fff

    }

    .pd-share-icon-copy {
      background: linear-gradient(135deg, #fdba74 0%, #ea580c 100%);
      color: #fff
    }

    .pd-share-icon-pdf {
      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
      color: #fff
    }

    .pd-share-name {
      font-size: 12px;
      font-weight: 600;
      color: #475569;
      text-align: center
    }

    .pd-share-copy-section {
      background: #f8fafc;
      padding: 16px;
      border-radius: 12px
    }

    .pd-share-copy-input-wrap {
      display: flex;
      gap: 8px
    }

    .pd-share-copy-input {
      flex: 1;
      padding: 12px 14px;
      border: 1px solid #e2e8f0;
      border-radius: 10px;
      font-size: 14px;
      color: #0f172a;
      background: #fff;
      font-family: 'Segoe UI', system-ui, sans-serif
    }

    .pd-share-copy-input:focus {
      outline: 0;
      border-color: #f97316;
      box-shadow: 0 0 0 3px rgba(249, 115, 22, .1)
    }

    .pd-share-copy-btn {
      padding: 12px 20px;
      border: 0;
      border-radius: 10px;
      background: linear-gradient(135deg, #e90e0e 0%, #c2410c 100%);
      color: #fff;
      font-size: 14px;
      font-weight: 600;
      cursor: pointer;
      transition: all .2s ease;
      white-space: nowrap;
      display: inline-flex;
      align-items: center;
      gap: 6px
    }

    .pd-share-copy-btn:hover {
      background: linear-gradient(135deg, #c2410c 0%, #c2410c 100%);
      transform: translateY(-1px);
      box-shadow: 0 4px 12px rgba(249, 115, 22, .3)
    }

    .pd-share-copy-btn:active {
      transform: translateY(0)
    }

    .pd-share-copy-btn svg {
      width: 16px;
      height: 16px
    }

    .pd-share-copy-btn.copied {
      background: linear-gradient(135deg, #c52222 0%, #a31616 100%);
      pointer-events: none
    }

    @media(max-width:640px) {
      .pd-share-modal {
        border-radius: 20px 20px 0 0;
        margin-top: auto;
        max-height: 85vh
      }

      .pd-share-grid {
        grid-template-columns: repeat(3, 1fr)
      }

      .pd-share-header {
        padding: 16px 20px
      }

      .pd-share-body {
        padding: 20px
      }

      .pd-share-btn {
        width: 36px;
        height: 36px
      }

      .pd-share-btn svg {
        width: 18px;
        height: 18px
      }
    }

    @media(max-width:480px) {
      .pd-share-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px
      }

      .pd-share-option {
        padding: 12px 6px
      }

      .pd-share-icon {
        width: 36px;
        height: 36px
      }

      .pd-share-icon svg {
        width: 20px;
        height: 20px
      }

      .pd-share-name {
        font-size: 11px
      }
    }

    .mf-share {
      background: #fff;
      color: #f97316;
      border: 2px solid #f97316;
      display: inline-flex;
      align-items: center;
      justify-content: center
    }

    .mf-share:active {
      transform: scale(.95)
    }

    .mf-share svg {
      display: block
    }

    @media(max-width:640px) {
      .pd-share-btn {
        display: none !important
      }
    }

    .stock-badge.in {
      background: #e6f9ec;
      color: #801515;
      border-radius: 999px;
      padding: 4px 10px;
      font-weight: 700
    }

    .stock-badge.out {
      background: #fee2e2;
      color: #b91c1c;
      border-radius: 999px;
      padding: 4px 10px;
      font-weight: 700
    }

    .stock-info-btn {
      --c: #e90e0e;
      --b: #fed7aa;
      --bg: #fffbeb;
      --bg-h: #ffedd5;
      --b-h: #e90e0e;
      margin-left: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 0.5rem;
      padding: 4px 10px;
      border-radius: 999px;
      border: 1.5px solid var(--b);
      background: var(--bg);
      color: var(--c);
      cursor: pointer;
      font-size: 12px;
      font-weight: 600;
      transition: all .2s ease;
      -webkit-tap-highlight-color: transparent
    }

    .stock-info-btn:hover {
      background: var(--bg-h);
      border-color: var(--b-h);
      color: #c2410c;
      transform: translateY(-1px);
      box-shadow: 0 2px 8px rgba(249, 115, 22, .15)
    }

    .stock-info-btn:active {
      transform: translateY(0)
    }

    .stock-info-btn:focus-visible {
      outline: 0;
      box-shadow: 0 0 0 3px rgba(249, 115, 22, .2)
    }

    .stock-info-btn svg {
      width: 14px;
      height: 14px;
      flex-shrink: 0
    }

    .stock-info-btn .btn-text {
      white-space: nowrap
    }

    .stock-popover {
      position: absolute;
      z-index: 9999;
      min-width: 280px;
      max-width: 92vw;
      background: #0b1220;
      color: #fff7ed;
      border: 1px solid rgba(255, 255, 255, .08);
      border-radius: 14px;
      box-shadow: 0 20px 40px rgba(12, 12, 20, .45);
      padding: 12px 12px 8px;
      display: none
    }

    .stock-popover.show {
      display: block
    }

    .stock-popover::before {
      content: "";
      position: absolute;
      top: -8px;
      left: 24px;
      width: 14px;
      height: 14px;
      background: #0b1220;
      border-left: 1px solid rgba(255, 255, 255, .08);
      border-top: 1px solid rgba(255, 255, 255, .08);
      transform: rotate(45deg)
    }

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

    .sp-title {
      font-weight: 800;
      font-size: 14px
    }

    .sp-close {
      background: transparent;
      border: 0;
      color: #98a2b3;
      cursor: pointer
    }

    .sp-list {
      list-style: none;
      margin: 0;
      padding: 0;
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .sp-item {
      display: grid;
      grid-template-columns: 1fr auto 32px;
      column-gap: 12px;
      align-items: center;
      padding: 10px 10px;
      min-height: 44px;
      border-radius: 10px;
      background: rgba(255, 255, 255, .03)
    }

    .sp-left {
      display: flex;
      align-items: center;
      gap: 10px
    }

    .sp-dot {
      width: 10px;
      height: 10px;
      border-radius: 999px;
      background: var(--dot, #ea580c);
      display: inline-block
    }

    .sp-label {
      font-weight: 600;
      font-size: 13px
    }


    .sp-qty {
      grid-column: 2;
      justify-self: end;
      min-width: 40px;
      text-align: right;
      font-weight: 800;
      font-size: 13px;
      color: #fed7aa;
      font-variant-numeric: tabular-nums
    }

    .sp-wa {
      grid-column: 3;
      justify-self: end;
      width: 32px;
      height: 32px;
      min-width: 32px;
      min-height: 32px;
      box-sizing: border-box;
      padding: 0;
      line-height: 0;
      text-decoration: none;
      outline: 0;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      border-radius: 999px;
      border: 1px solid rgba(211, 37, 37, 0.6);
      /* 1px untuk hasil “crisp” */
      background: rgba(37, 211, 102, .08);
      color: #d32525;
      transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
      -webkit-tap-highlight-color: transparent;
    }

    .sp-wa:hover {
      background: rgba(37, 211, 102, .16);
      border-color: rgba(37, 211, 102, .75)
    }

    .sp-wa:active {
      transform: translateY(.5px) scale(.98)
    }

    .sp-wa svg {
      width: 18px;
      height: 18px;
      display: block;
      vertical-align: middle
    }

    .stock-popover a {
      text-decoration: none
    }

    #deskripsi img {
      max-width: 200px !important;
      height: unset !important
    }


    @media(max-width:640px) {
      .stock-popover {
        position: fixed;
        left: 0;
        right: 0;
        bottom: max(12px, env(safe-area-inset-bottom, 12px));
        margin: 0 10px;
        padding: 14px 12px 10px;
        border-radius: 16px
      }

      .stock-popover::before {
        display: none
      }

      .stock-info-btn {
        padding: 4px 8px;
        gap: 4px;
        border: 0;
        background: transparent
      }

      .stock-info-btn:hover {
        background: transparent;
        box-shadow: none;
        transform: none
      }

      .stock-info-btn .btn-text {
        display: none
      }

      .stock-info-btn svg {
        width: 16px;
        height: 16px
      }

      .sp-item {
        grid-template-columns: 1fr auto 36px
      }

      .sp-wa {
        width: 36px;
        height: 36px;
        min-width: 36px;
        min-height: 36px
      }

      .sp-wa svg {
        width: 19px;
        height: 19px
      }
    }

    .stock-dot {
      position: absolute;
      bottom: 8px;
      right: 8px;
      width: 8px;
      height: 8px;
      border-radius: 50%;
      box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
      z-index: 2;
      cursor: help
    }

    .stock-dot.ready {
      background: #10b981
    }

    .stock-dot.low {
      background: #c2410c
    }

    .stock-dot.out {
      background: #ef4444
    }

    .stock-dot:hover {
      transform: scale(1.2);
      transition: transform 0.2s ease
    }

    @media(max-width:640px) {
      .stock-dot {
        width: 7px;
        height: 7px;
        bottom: 6px;
        right: 6px
      }
    }

    .pd-related-card .spec-chips {
      font-size: 11px;
      color: #64748b;
      margin: 4px 0 6px 0;
      line-height: 1.3;
      font-weight: 500
    }

    .pd-related-card .spec-chips .spec-divider {
      margin: 0 4px;
      opacity: 0.6
    }

    @media(max-width:640px) {
      .pd-related-card .spec-chips {
        font-size: 10px;
        margin: 3px 0 5px 0
      }

      #deskripsi img {
        max-width: 300px !important;
        height: unset !important;
        justify-self: center !important
      }
    }

    .pwp-trigger-badge {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      padding: 3px 8px 4px;
      background: linear-gradient(135deg, #f97316 0%, #c2410c 100%);
      color: #5f4608;
      border-radius: 6px;
      font-size: .65rem;
      font-weight: 600;
      border: 0
    }

    .pwp-trigger-badge svg {
      flex-shrink: 0;
      width: 12px;
      height: 12px
    }

    .pwp-deals-section {
      margin: 0;
      padding: 12px;
      background: linear-gradient(135deg, #ffedd5 0%, #fed7aa 100%);
      border-radius: 12px;
      border: 2px solid #f97316
    }

    .pwp-deals-header {
      display: flex;
      gap: 10px;
      margin-bottom: 10px
    }

    .pwp-icon {
      flex-shrink: 0;
      color: #c2410c;
      width: 18px;
      height: 18px
    }

    .pwp-text .pwp-title {
      margin: 0 0 2px 0;
      font-size: 14px;
      font-weight: 700;
      color: #5f4608
    }

    .pwp-text .pwp-subtitle {
      margin: 0;
      font-size: 11px;
      color: #431407;
      opacity: 0.9
    }

    .pwp-deals-loading {
      text-align: center;
      padding: 40px 0;
      color: #431407
    }

    .pwp-spinner {
      width: 40px;
      height: 40px;
      border: 3px solid #f97316;
      border-top-color: #c2410c;
      border-radius: 50%;
      animation: spin 0.8s linear infinite;
      margin: 0 auto 12px
    }

    @keyframes spin {
      to {
        transform: rotate(360deg)
      }
    }

    .pwp-deals-grid {
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .pwp-deal-card {
      background: #fff;
      border-radius: 6px;
      overflow: hidden;
      border: 1px solid #f97316;
      display: flex;
      align-items: center;
      padding: 8px;
      gap: 10px
    }

    .pwp-deal-card:hover {
      background: #ffedd5
    }

    .pwp-deal-thumb {
      flex-shrink: 0;
      width: 50px;
      height: 50px;
      background: #f8fafc;
      overflow: hidden;
      border-radius: 4px
    }

    .pwp-deal-thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover
    }

    .pwp-deal-badge {
      background: #dc2626;
      color: #fff;
      padding: 2px 5px;
      border-radius: 3px;
      font-size: 9px;
      font-weight: 700;
      margin-left: auto
    }

    .pwp-deal-info {
      flex: 1;
      display: flex;
      flex-direction: column;
      gap: 4px
    }

    .pwp-deal-name {
      font-size: 12px;
      font-weight: 600;
      color: #0f172a;
      margin: 0;
      line-height: 1.2
    }

    .pwp-deal-prices {
      display: flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap
    }

    .pwp-deal-price {
      font-size: 14px;
      font-weight: 800;
      color: #dc2626;
      white-space: nowrap
    }

    .pwp-deal-original {
      font-size: 11px;
      color: #64748b;
      text-decoration: line-through;
      white-space: nowrap
    }

    .pwp-cart-note {
      margin-top: 8px;
      padding: 6px 10px;
      background: #ffedd5;
      border-left: 2px solid#e90e0e;
      font-size: 11px;
      color: #7c2d12;
      border-radius: 4px
    }

    @media(max-width:640px) {
      .pwp-deals-section {
        margin: 12px 0;
        padding: 10px;
        border-radius: 10px
      }

      .pwp-deals-header {
        gap: 8px
      }

      .pwp-text .pwp-title {
        font-size: 13px
      }

      .pwp-text .pwp-subtitle {
        font-size: 10px
      }

      .pwp-deal-card {
        padding: 6px;
        gap: 8px
      }

      .pwp-deal-thumb {
        width: 45px;
        height: 45px
      }

      .pwp-deal-name {
        font-size: 11px
      }

      .pwp-deal-price {
        font-size: 13px
      }

      .pwp-deal-original {
        font-size: 10px
      }
    }

    .preorder-badge {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      padding: 6px 12px;
      background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
      color: #fff;
      border-radius: 8px;
      font-size: 13px;
      font-weight: 700;
      border: 0;
      box-shadow: 0 2px 8px rgba(139, 92, 246, .25)
    }

    .preorder-badge svg {
      width: 16px;
      height: 16px;
      flex-shrink: 0
    }

    .preorder-info {
      margin: 12px 0;
      padding: 14px;
      background: linear-gradient(135deg, #f5f3ff 0%, #ede9fe 100%);
      border: 1.5px solid #c4b5fd;
      border-radius: 12px
    }

    .preorder-info-header {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 10px
    }

    .preorder-info-icon {
      width: 20px;
      height: 20px;
      color: #7c3aed;
      flex-shrink: 0
    }

    .preorder-info-title {
      font-size: 14px;
      font-weight: 700;
      color: #5b21b6;
      margin: 0
    }

    .preorder-info-items {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .preorder-info-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px
    }

    .preorder-info-label {
      color: #6b21a8;
      font-weight: 600
    }

    .preorder-info-value {
      color: #5b21b6;
      font-weight: 700
    }

    .preorder-info-value.highlight {
      color: #dc2626;
      font-size: 14px
    }

    .preorder-info-note {
      margin-top: 10px;
      padding: 8px 10px;
      background: #ffedd5;
      border-left: 2px solid #c2410c;
      font-size: 12px;
      color: #5f4608;
      border-radius: 6px;
      line-height: 1.4
    }

    @media(max-width:640px) {
      .preorder-badge {
        font-size: 12px;
        padding: 5px 10px
      }

      .preorder-info {
        margin: 10px 0;
        padding: 12px
      }

      .preorder-info-title {
        font-size: 13px
      }

      .preorder-info-row {
        font-size: 12px
      }

      .preorder-info-note {
        font-size: 11px;
        padding: 6px 8px
      }
    }

/* ===== Inline style block 5 ===== */
.qoala-banner-card {
              padding: 0;
              overflow: hidden
            }

            .qoala-banner {
              background: linear-gradient(135deg, #ffffff 0%, #ffffff 100%);
              padding: 12px 16px;
              display: flex;
              align-items: center;
              justify-content: space-between;
              color: rgb(0, 0, 0);
              text-decoration: none;
              min-height: 60px
            }

            .qoala-banner-content {
              display: flex;
              align-items: center;
              gap: 12px
            }

            .qoala-icon {
              display: flex;
              align-items: center;
              justify-content: center
            }

            .qoala-shield-img {
              width: 36px;
              height: 36px;
              object-fit: contain;
              opacity: 0.9
            }

            .qoala-title {
              font-weight: 600;
              font-size: 14px;
              line-height: 1.2
            }

            .qoala-subtitle {
              font-size: 12px;
              opacity: 0.9;
              line-height: 1.2
            }

            .qoala-cta {
              background: rgba(255, 255, 255, 0.2);
              color: rgb(0, 0, 0);
              padding: 6px 12px;
              border-radius: 6px;
              font-size: 12px;
              font-weight: 600;
              text-decoration: none;
              transition: background 0.2s ease;
              border: 1px solid rgba(255, 255, 255, 0.3)
            }

            .qoala-cta:hover {
              background: rgba(255, 255, 255, 0.3);
              color: rgb(0, 0, 0)
            }

            @media(max-width:768px) {
              .qoala-banner {
                padding: 10px 12px
              }

              .qoala-title {
                font-size: 17px
              }

              .qoala-subtitle {
                font-size: 11px
              }
            }

/* ===== Inline style block 6 ===== */
:root {
        --sd-black: #07040d;
        --sd-dark: #12071f;
        --sd-purple: #8b00ff;
        --sd-violet: #5d00d9;
        --sd-magenta: #ff1493;
        --sd-cyan: #fdba74;
        --sd-white: #f7f2ff;
        --sd-muted: #d8cbea;
      }

      /* CONTAINER STREET DEMONS */
      .article-pro {
        width: calc(100% - 30px);
        max-width: 1000px;
        margin: 40px auto;
        padding: 32px 28px;
        box-sizing: border-box;

        background:
          radial-gradient(circle at top right,
            rgba(255, 20, 147, 0.18),
            transparent 34%),
          radial-gradient(circle at bottom left,
            rgba(234, 88, 12, 0.14),
            transparent 38%),
          linear-gradient(145deg,
            #090510 0%,
            #160824 48%,
            #07040d 100%);

        border: 2px solid var(--sd-purple);
        border-radius: 10px 24px 10px 24px;

        box-shadow:
          0 18px 40px rgba(0, 0, 0, 0.6),
          0 0 18px rgba(139, 0, 255, 0.55),
          0 0 30px rgba(255, 20, 147, 0.22),
          inset 0 0 22px rgba(234, 88, 12, 0.08);

        font-family: "Poppins", Arial, sans-serif;
        color: var(--sd-white);
        line-height: 1.8;

        position: relative;
        isolation: isolate;
        overflow: hidden;

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

      /* HOVER CONTAINER */
      .article-pro:hover {
        transform: translateY(-3px);
        border-color: var(--sd-cyan);

        box-shadow:
          0 22px 48px rgba(0, 0, 0, 0.7),
          0 0 20px rgba(234, 88, 12, 0.55),
          0 0 38px rgba(255, 20, 147, 0.32),
          inset 0 0 24px rgba(139, 0, 255, 0.12);
      }

      /* KILATAN NEON BERGERAK */
      .article-pro::before {
        content: "";
        position: absolute;
        top: -20%;
        left: -160%;
        width: 65%;
        height: 140%;
        z-index: 0;
        pointer-events: none;

        background: linear-gradient(90deg,
            transparent,
            rgba(139, 0, 255, 0.12),
            rgba(255, 20, 147, 0.52),
            rgba(234, 88, 12, 0.58),
            transparent);

        transform: skewX(-24deg);
        filter: blur(1px);
        animation: streetDemonShine 4.5s infinite ease-in-out;
      }

      /* TEKSTUR GRAFFITI DAN GARIS DISTORSI */
      .article-pro::after {
        content: "";
        position: absolute;
        inset: 0;
        z-index: 0;
        pointer-events: none;
        border-radius: inherit;

        background:
          repeating-linear-gradient(-35deg,
            transparent 0,
            transparent 12px,
            rgba(255, 255, 255, 0.025) 13px,
            rgba(255, 20, 147, 0.04) 15px,
            transparent 18px),
          repeating-linear-gradient(0deg,
            transparent 0,
            transparent 4px,
            rgba(234, 88, 12, 0.025) 5px,
            transparent 6px);

        box-shadow:
          inset 0 0 0 1px rgba(255, 255, 255, 0.04),
          inset 0 0 20px rgba(139, 0, 255, 0.16);

        opacity: 0.9;
        mix-blend-mode: screen;
      }

      /* PASTIKAN KONTEN BERADA DI DEPAN EFEK */
      .article-pro>* {
        position: relative;
        z-index: 2;
      }

      /* PARAGRAF */
      .article-pro p {
        margin: 0 0 18px;
        color: var(--sd-muted);
        font-size: 15px;
        line-height: 1.85;
        text-align: justify;

        transition:
          color 0.3s ease,
          text-shadow 0.3s ease,
          transform 0.3s ease;
      }

      .article-pro p:last-child {
        margin-bottom: 0;
      }

      /* HOVER PARAGRAF */
      .article-pro p:hover {
        color: #ffffff;
        transform: translateX(3px);

        text-shadow:
          0 0 7px rgba(234, 88, 12, 0.34),
          0 0 12px rgba(255, 20, 147, 0.22);
      }

      /* JUDUL DI DALAM ARTIKEL */
      .article-pro h1,
      .article-pro h2,
      .article-pro h3 {
        color: #ffffff;
        font-weight: 900;
        font-style: italic;
        text-transform: uppercase;
        letter-spacing: 1.5px;

        text-shadow:
          3px 3px 0 rgba(139, 0, 255, 0.75),
          -2px -2px 0 rgba(255, 20, 147, 0.42),
          0 0 12px rgba(234, 88, 12, 0.45);
      }

      .article-pro h1::after,
      .article-pro h2::after,
      .article-pro h3::after {
        content: "";
        display: block;
        width: 110px;
        height: 4px;
        margin-top: 10px;

        background: linear-gradient(90deg,
            var(--sd-magenta),
            var(--sd-purple),
            var(--sd-cyan),
            transparent);

        box-shadow:
          0 0 8px rgba(255, 20, 147, 0.7),
          0 0 14px rgba(234, 88, 12, 0.45);

        transform: skewX(-25deg);
      }

      /* LINK */
      .article-pro a {
        color: #f97316;
        font-weight: 700;
        text-decoration: none;
        position: relative;

        text-shadow:
          0 0 7px rgba(234, 88, 12, 0.48);

        transition:
          color 0.3s ease,
          text-shadow 0.3s ease;
      }

      .article-pro a::after {
        content: "";
        position: absolute;
        right: 0;
        bottom: -3px;
        left: 0;
        height: 2px;

        background: linear-gradient(90deg,
            var(--sd-magenta),
            var(--sd-purple),
            var(--sd-cyan));

        transform: scaleX(0);
        transform-origin: right;
        transition: transform 0.3s ease;
      }

      .article-pro a:hover {
        color: #ffffff;

        text-shadow:
          0 0 8px var(--sd-cyan),
          0 0 15px rgba(255, 20, 147, 0.85);
      }

      .article-pro a:hover::after {
        transform: scaleX(1);
        transform-origin: left;
      }

      /* TEKS TEBAL */
      .article-pro strong {
        color: #ff62bc;

        text-shadow:
          0 0 8px rgba(255, 20, 147, 0.45);
      }

      /* LIST */
      .article-pro ul,
      .article-pro ol {
        margin: 18px 0;
        padding-left: 24px;
        color: var(--sd-muted);
      }

      .article-pro li {
        margin-bottom: 9px;
      }

      .article-pro li::marker {
        color: var(--sd-cyan);
      }

      /* BLOCKQUOTE */
      .article-pro blockquote {
        margin: 24px 0;
        padding: 18px 20px;

        color: #f7ecff;

        background: linear-gradient(90deg,
            rgba(139, 0, 255, 0.18),
            rgba(255, 20, 147, 0.08),
            transparent);

        border-left: 4px solid var(--sd-magenta);
        border-radius: 4px 14px 14px 4px;

        box-shadow:
          inset 8px 0 18px rgba(139, 0, 255, 0.1),
          0 0 15px rgba(255, 20, 147, 0.12);
      }

      /* ANIMASI KILATAN */
      @keyframes streetDemonShine {
        0% {
          left: -160%;
          opacity: 0;
        }

        12% {
          opacity: 1;
        }

        40% {
          left: 170%;
          opacity: 1;
        }

        100% {
          left: 170%;
          opacity: 0;
        }
      }

      /* RESPONSIVE TABLET */
      @media (max-width: 768px) {
        .article-pro {
          margin: 28px auto;
          padding: 25px 20px;
          border-radius: 8px 18px 8px 18px;
        }

        .article-pro p {
          font-size: 14.5px;
          text-align: left;
        }
      }

      /* RESPONSIVE HP */
      @media (max-width: 600px) {
        .article-pro {
          width: calc(100% - 20px);
          margin: 22px auto;
          padding: 21px 16px;
        }

        .article-pro h1 {
          font-size: 24px;
        }

        .article-pro h2 {
          font-size: 21px;
        }

        .article-pro h3 {
          font-size: 18px;
        }

        .article-pro p {
          font-size: 14px;
          line-height: 1.75;
        }
      }

      /* AKSESIBILITAS */
      @media (prefers-reduced-motion: reduce) {

        .article-pro,
        .article-pro::before,
        .article-pro p,
        .article-pro a {
          animation: none;
          transition: none;
        }
      }

/* ===== Inline style block 7 ===== */
:root {
        --sd-bg: #0b0711;
        --sd-box: #140b1d;
        --sd-card: #1b1026;
        --sd-purple: #c2410c;
        --sd-pink: #c2410c;
        --sd-cyan: #c2410c;
        --sd-white: #ffffff;
        --sd-text: #ddd3e7;
        --sd-muted: #a99db5;
      }

      * {
        box-sizing: border-box;
      }

      .sgt-wrap {
        width: 100%;
        max-width: 1050px;
        margin: 40px auto;
        padding: 0 16px;
        font-family: Arial, Helvetica, sans-serif;
      }

      .sgt-box {
        padding: 32px;
        overflow: hidden;
        position: relative;

        background:
          linear-gradient(145deg,
            rgba(139, 44, 255, 0.08),
            transparent 45%),
          var(--sd-bg);

        border: 1px solid rgba(139, 44, 255, 0.65);
        border-radius: 18px;

        box-shadow:
          0 16px 36px rgba(0, 0, 0, 0.4),
          0 0 15px rgba(139, 44, 255, 0.18);
      }

      .sgt-box::before {
        content: "";
        position: absolute;
        top: 0;
        right: 0;

        width: 180px;
        height: 180px;

        background: radial-gradient(circle,
            rgba(255, 60, 166, 0.13),
            transparent 68%);

        pointer-events: none;
      }

      .sgt-title {
        position: relative;
        z-index: 1;

        margin: 0 0 28px;
        color: var(--sd-white);

        font-size: clamp(22px, 4vw, 30px);
        font-weight: 900;
        line-height: 1.35;
        letter-spacing: 1px;
        text-align: center;
        text-transform: uppercase;

        text-shadow: 2px 2px 0 rgba(139, 44, 255, 0.65);
      }

      .sgt-title::after {
        content: "";
        display: block;

        width: 110px;
        height: 3px;
        margin: 12px auto 0;

        background: linear-gradient(90deg,
            var(--sd-pink),
            var(--sd-purple),
            var(--sd-cyan));

        border-radius: 20px;
      }

      .sgt-section-title {
        margin-top: 42px;
        font-size: clamp(19px, 3vw, 24px);
      }

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

      .sgt-faq-list {
        display: grid;
        gap: 14px;
        position: relative;
        z-index: 1;
      }

      .sgt-faq {
        overflow: hidden;
        cursor: pointer;

        background: var(--sd-card);
        border: 1px solid rgba(253, 186, 116, 0.22);
        border-left: 4px solid var(--sd-cyan);
        border-radius: 12px;

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

      .sgt-faq:hover,
      .sgt-faq.active {
        transform: translateY(-2px);
        border-color: rgba(253, 186, 116, 0.7);

        box-shadow:
          0 8px 20px rgba(0, 0, 0, 0.28),
          0 0 10px rgba(253, 186, 116, 0.1);
      }

      .sgt-question {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 14px;

        padding: 18px 20px;

        color: var(--sd-white);
        font-size: 16px;
        font-weight: 700;
        line-height: 1.5;
      }

      .sgt-icon {
        flex: 0 0 auto;
        color: var(--sd-cyan);
        font-size: 15px;

        transition: transform 0.25s ease;
      }

      .sgt-faq.active .sgt-icon {
        transform: rotate(180deg);
      }

      .sgt-answer {
        max-height: 0;
        overflow: hidden;

        padding: 0 20px;

        color: var(--sd-text);
        font-size: 15px;
        line-height: 1.75;

        opacity: 0;

        transition:
          max-height 0.35s ease,
          padding 0.35s ease,
          opacity 0.25s ease;
      }

      .sgt-faq.active .sgt-answer {
        max-height: 300px;
        padding: 0 20px 18px;
        opacity: 1;
      }

      /* =====================
     REVIEW
  ====================== */

      .sgt-review-note {
        margin: -10px 0 22px;
        color: var(--sd-muted);
        font-size: 13px;
        text-align: center;
      }

      .sgt-review-list {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 16px;

        position: relative;
        z-index: 1;
      }

      .sgt-review {
        padding: 20px;

        background:
          linear-gradient(145deg,
            rgba(255, 60, 166, 0.07),
            transparent 55%),
          var(--sd-card);

        border: 1px solid rgba(255, 60, 166, 0.25);
        border-bottom: 4px solid var(--sd-pink);
        border-radius: 14px;

        color: var(--sd-text);
        font-size: 15px;
        line-height: 1.7;

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

      .sgt-review:hover {
        transform: translateY(-3px);
        border-color: rgba(255, 60, 166, 0.65);

        box-shadow:
          0 10px 22px rgba(0, 0, 0, 0.3),
          0 0 10px rgba(255, 60, 166, 0.12);
      }

      .sgt-review-top {
        display: flex;
        align-items: center;
        gap: 12px;
        margin-bottom: 14px;
      }

      .sgt-avatar {
        display: grid;
        place-items: center;
        flex: 0 0 44px;

        width: 44px;
        height: 44px;

        color: var(--sd-white);
        background: linear-gradient(135deg,
            var(--sd-purple),
            var(--sd-pink));

        border-radius: 10px;
        font-weight: 900;
      }

      .sgt-name {
        color: var(--sd-white);
        font-size: 15px;
        font-weight: 800;
        text-transform: uppercase;
      }

      .sgt-date {
        display: block;
        margin-top: 2px;
        color: var(--sd-muted);
        font-size: 12px;
      }

      .sgt-stars {
        margin-top: 3px;
        color: var(--sd-cyan);
        font-size: 13px;
        letter-spacing: 1px;
      }

      .sgt-review p {
        margin: 0;
      }

      .sgt-footer {
        margin-top: 34px;
        padding-top: 18px;

        color: var(--sd-muted);
        border-top: 1px solid rgba(139, 44, 255, 0.22);

        font-size: 13px;
        text-align: center;
      }

      @media (max-width: 768px) {
        .sgt-wrap {
          margin: 25px auto;
          padding: 0 10px;
        }

        .sgt-box {
          padding: 24px 16px;
        }

        .sgt-review-list {
          grid-template-columns: 1fr;
        }

        .sgt-question {
          padding: 16px;
          font-size: 15px;
        }

        .sgt-answer {
          padding-right: 16px;
          padding-left: 16px;
          font-size: 14px;
        }

        .sgt-faq.active .sgt-answer {
          padding: 0 16px 16px;
        }
      }

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

        .sgt-faq,
        .sgt-review,
        .sgt-answer,
        .sgt-icon {
          transition: none;
        }
      }

/* ===== Inline style block 8 ===== */
.toast-root {
      position: fixed;
      left: 50%;
      bottom: 18px;
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      gap: 10px;
      z-index: 99999;
      pointer-events: none;
      max-width: min(92vw, 540px)
    }

    .toast {
      display: grid;
      grid-template-columns: 28px 1fr auto;
      gap: 12px;
      background: #0b1220;
      color: #fff7ed;
      border: 1px solid rgba(255, 255, 255, .08);
      padding: 12px 14px;
      border-radius: 12px;
      box-shadow: 0 10px 30px rgba(10, 10, 20, .35);
      pointer-events: auto;
      overflow: hidden
    }

    .toast .ico {
      align-self: start;
      margin-top: 2px
    }

    .toast .ttl {
      font-weight: 700;
      line-height: 1.25;
      font-size: 14px;
      margin-bottom: 4px
    }

    .toast .msg {
      opacity: .95;
      line-height: 1.45;
      font-size: 13px
    }

    .toast .actions {
      display: flex;
      gap: 8px;
      align-self: center
    }

    .toast .btn {
      background: #e90e0e;
      color: #fff;
      border: 0;
      border-radius: 999px;
      padding: 8px 12px;
      font-size: 12px;
      font-weight: 700;
      cursor: pointer
    }

    .toast .btn.alt {
      background: transparent;
      color: #fdba74;
      border: 1px solid rgba(253, 186, 116, .35)
    }

    .toast .close {
      background: transparent;
      border: 0;
      color: #98a2b3;
      cursor: pointer;
      padding: 4px;
      margin-left: 6px
    }

    .toast.success {
      border-left: 4px solid #c52222
    }

    .toast.info {
      border-left: 4px solid #e90e0e
    }

    .toast.warn {
      border-left: 4px solid #c2410c
    }

    .toast .progress {
      position: absolute;
      left: 0;
      bottom: 0;
      height: 3px;
      background: linear-gradient(90deg, #ea580c, #c52222);
      width: 100%;
      transform-origin: left;
      animation: toastBar linear forwards
    }

    @keyframes toastBar {
      from {
        transform: scaleX(1)
      }

      to {
        transform: scaleX(0)
      }
    }

    @media(max-width:640px) {
      .toast {
        grid-template-columns: 24px 1fr auto;
        padding: 12px
      }

      .toast .btn {
        padding: 7px 10px
      }
    }

/* ===== Inline style block 9 ===== */
.toast .msg {
      word-break: break-word;
      overflow-wrap: anywhere;
    }

    .toast-root {
      bottom: max(12px, env(safe-area-inset-bottom, 12px));
    }

    @media (max-width: 540px) {
      .toast-root {
        left: 0;
        right: 0;
        transform: none;
        padding: 0 12px;
        bottom: calc(max(12px, env(safe-area-inset-bottom, 12px)) + var(--fab-offset, 72px));
        max-width: none;
      }

      .toast {
        grid-template-columns: 1fr;
        /* 1 kolom */
        position: relative;
        padding: 14px 14px 12px 14px;
        border-radius: 16px;
      }

      .toast .ico {
        position: absolute;
        left: 14px;
        top: 14px;
        margin: 0;
        transform: translateY(1px);
      }

      .toast .cnt {
        padding-left: 34px;
      }

      .toast .ttl {
        font-size: 15px;
        margin-bottom: 6px;
      }

      .toast .msg {
        font-size: 13px;
        opacity: .96;
      }

      .toast .actions {
        margin-top: 12px;
        gap: 10px;
        width: 100%;
        display: grid;
        grid-template-columns: 1fr 1fr;
      }

      .toast .btn {
        width: 100%;
        min-width: 0;
        padding: 10px 0;
      }

      .toast .close {
        position: absolute;
        right: 6px;
        top: 6px;
      }
    }

/* ===== Inline style block 10 ===== */
:root {
        --sd-black: #07040c;
        --sd-dark: #12071b;
        --sd-panel: #1b0d28;
        --sd-purple: #c2410c;
        --sd-violet: #c2410c;
        --sd-pink: #c2410c;
        --sd-cyan: #c2410c;
        --sd-white: #ffffff;
        --sd-text: #dcd2e6;
        --blade-cut: 10px;
      }

      * {
        box-sizing: border-box;
      }

      body {
        margin: 0;
        padding: 0;
        font-family: "Segoe UI", Arial, sans-serif;
        background: transparent;
        color: var(--sd-text);
      }

      /* =========================
     POPUP OVERLAY
  ========================= */
      .popup-overlay {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100vh;

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

        padding: 18px;
        background: rgba(3, 1, 7, 0.76);
        backdrop-filter: blur(3px);
        -webkit-backdrop-filter: blur(3px);

        z-index: 9999;
      }

      /* =========================
     POPUP CONTAINER
  ========================= */
      .popup-container {
        position: relative;
        width: 100%;
        max-width: 420px;
        overflow: hidden;

        padding-bottom: 18px;

        color: var(--sd-text);
        text-align: center;

        background:
          radial-gradient(circle at top right,
            rgba(255, 60, 166, 0.16),
            transparent 34%),
          radial-gradient(circle at bottom left,
            rgba(253, 186, 116, 0.11),
            transparent 38%),
          linear-gradient(145deg,
            #08030d 0%,
            #170923 52%,
            #09040f 100%);

        border: 1px solid rgba(139, 44, 255, 0.58);
        border-radius: 10px 26px 10px 26px;

        box-shadow:
          0 22px 55px rgba(0, 0, 0, 0.72),
          0 0 18px rgba(139, 44, 255, 0.34),
          0 0 32px rgba(255, 60, 166, 0.14);

        animation: streetPopupIn 0.45s ease-out;
      }

      /* Tekstur graffiti ringan */
      .popup-container::before {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        z-index: 1;

        background:
          repeating-linear-gradient(-35deg,
            transparent 0,
            transparent 14px,
            rgba(255, 255, 255, 0.025) 15px,
            rgba(253, 186, 116, 0.035) 17px,
            transparent 19px);

        opacity: 0.8;
      }

      /* Aksen neon di sisi kiri */
      .popup-container::after {
        content: "";
        position: absolute;
        top: 0;
        left: 0;

        width: 5px;
        height: 100%;
        z-index: 3;

        background: linear-gradient(to bottom,
            var(--sd-pink),
            var(--sd-purple),
            var(--sd-cyan));

        box-shadow:
          0 0 10px rgba(255, 60, 166, 0.65),
          0 0 16px rgba(253, 186, 116, 0.35);
      }

      @keyframes streetPopupIn {
        from {
          opacity: 0;
          transform: translateY(18px) scale(0.96);
        }

        to {
          opacity: 1;
          transform: translateY(0) scale(1);
        }
      }

      /* =========================
     IMAGE
  ========================= */
      .popup-image {
        position: relative;
        z-index: 2;

        display: block;
        width: 100%;
        height: auto;

        border-bottom: 1px solid rgba(253, 186, 116, 0.2);
      }

      /* =========================
     BUTTON WRAPPER
  ========================= */
      .clk-btn-sgp {
        position: relative;
        z-index: 3;

        width: 100%;
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 12px;

        padding: 18px;
        font-family: "Segoe UI", Arial, sans-serif;
      }

      .clk-btn-sgp a {
        position: relative;
        overflow: hidden;

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

        min-height: 50px;
        padding: 13px 12px;

        color: var(--sd-white);
        text-align: center;
        text-decoration: none;
        text-transform: uppercase;

        font-size: 13px;
        font-weight: 900;
        letter-spacing: 1.2px;

        border-radius: 7px 15px 7px 15px;
        clip-path: polygon(var(--blade-cut) 0,
            100% 0,
            100% calc(100% - var(--blade-cut)),
            calc(100% - var(--blade-cut)) 100%,
            0 100%,
            0 var(--blade-cut));

        transition:
          transform 0.22s ease,
          border-color 0.22s ease,
          box-shadow 0.22s ease,
          filter 0.22s ease;
      }

      .clk-btn-sgp a::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;

        background: linear-gradient(110deg,
            transparent 25%,
            rgba(255, 255, 255, 0.16) 48%,
            transparent 70%);

        transform: translateX(-140%);
        transition: transform 0.45s ease;
      }

      .clk-btn-sgp a:hover::after {
        transform: translateX(140%);
      }

      .clk-btn-sgp a:hover {
        transform: translateY(-3px);
        filter: brightness(1.12);
      }

      /* =========================
     LOGIN BUTTON
  ========================= */
      .login {
        color: var(--sd-cyan) !important;

        background:
          linear-gradient(145deg,
            rgba(253, 186, 116, 0.08),
            rgba(139, 44, 255, 0.14)),
          #0a0710;

        border: 1px solid rgba(253, 186, 116, 0.65);

        box-shadow:
          0 7px 16px rgba(0, 0, 0, 0.42),
          inset 0 0 10px rgba(253, 186, 116, 0.05);
      }

      .login:hover {
        color: #ffffff !important;
        border-color: var(--sd-cyan);

        box-shadow:
          0 10px 22px rgba(0, 0, 0, 0.5),
          0 0 13px rgba(253, 186, 116, 0.26);
      }

      /* =========================
     REGISTER BUTTON
  ========================= */
      .register {
        color: #ffffff !important;

        background: linear-gradient(135deg,
            var(--sd-purple),
            var(--sd-pink));

        border: 1px solid rgba(255, 255, 255, 0.38);

        box-shadow:
          0 7px 16px rgba(0, 0, 0, 0.42),
          0 0 10px rgba(255, 60, 166, 0.18);
      }

      .register:hover {
        color: #ffffff !important;

        background: linear-gradient(135deg,
            var(--sd-pink),
            var(--sd-violet));

        border-color: #ffffff;

        box-shadow:
          0 10px 22px rgba(0, 0, 0, 0.5),
          0 0 14px rgba(255, 60, 166, 0.32);
      }

      .clk-btn-sgp a span {
        position: relative;
        z-index: 2;
      }

      /* =========================
     INFO TABLE
  ========================= */
      .info-table {
        position: relative;
        z-index: 3;

        width: calc(100% - 36px);
        margin: 2px auto 18px;

        color: var(--sd-text);
        background: rgba(13, 7, 20, 0.9);

        border-collapse: separate;
        border-spacing: 0;
        overflow: hidden;

        border: 1px solid rgba(139, 44, 255, 0.25);
        border-radius: 12px;

        font-size: 13px;
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.32);
      }

      .info-table th {
        padding: 13px 10px;

        color: #ffffff;
        background: linear-gradient(135deg,
            var(--sd-purple),
            var(--sd-pink));

        border: 0;

        font-size: 13px;
        font-weight: 900;
        letter-spacing: 0.8px;
        text-transform: uppercase;

        text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.35);
      }

      .info-table td {
        padding: 11px 12px;

        color: var(--sd-text);
        text-align: left;

        border-bottom: 1px solid rgba(253, 186, 116, 0.1);
      }

      .info-table tr:last-child td {
        border-bottom: none;
      }

      .info-table tr:hover td {
        background: rgba(139, 44, 255, 0.07);
      }

      /* =========================
     FOOTER
  ========================= */
      .popup-footer {
        position: relative;
        z-index: 3;

        padding: 4px 20px 8px;

        color: #bfb3ca;
        font-size: 12px;
        line-height: 1.6;
        text-align: center;
      }

      /* =========================
     DECORATIVE BORDER
  ========================= */
      .luxury-border {
        position: absolute;
        inset: 9px;
        z-index: 4;
        pointer-events: none;

        border: 1px solid rgba(253, 186, 116, 0.08);
        border-radius: 7px 20px 7px 20px;
      }

      /* =========================
     PARTICLE
  ========================= */
      .gold-particle {
        display: none;
      }

      /* =========================
     CLOSE BUTTON
  ========================= */
      .close-btn {
        position: absolute;
        top: 12px;
        right: 12px;
        z-index: 10;

        width: 34px;
        height: 34px;

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

        cursor: pointer;

        background: rgba(8, 4, 13, 0.82);
        border: 1px solid rgba(255, 60, 166, 0.58);
        border-radius: 9px 4px 9px 4px;

        box-shadow:
          0 0 10px rgba(255, 60, 166, 0.18);

        transition:
          transform 0.22s ease,
          background 0.22s ease,
          border-color 0.22s ease;
      }

      .close-btn:hover {
        transform: rotate(90deg);
        background: var(--sd-pink);
        border-color: #ffffff;
      }

      .close-btn::before,
      .close-btn::after {
        content: "";
        position: absolute;

        width: 16px;
        height: 2px;

        background: #ffffff;
        border-radius: 3px;
      }

      .close-btn::before {
        transform: rotate(45deg);
      }

      .close-btn::after {
        transform: rotate(-45deg);
      }

      /* =========================
     RESPONSIVE
  ========================= */
      @media (max-width: 480px) {
        .popup-overlay {
          padding: 12px;
        }

        .popup-container {
          max-width: 355px;
          border-radius: 8px 20px 8px 20px;
        }

        .clk-btn-sgp {
          grid-template-columns: 1fr;
          gap: 10px;
          padding: 14px;
        }

        .clk-btn-sgp a {
          min-height: 47px;
          padding: 12px;
          font-size: 12px;
        }

        .info-table {
          width: calc(100% - 28px);
          font-size: 12px;
        }

        .info-table th,
        .info-table td {
          padding: 10px;
        }

        .popup-footer {
          padding-right: 16px;
          padding-left: 16px;
          font-size: 11px;
        }

        .close-btn {
          width: 30px;
          height: 30px;
        }
      }

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

        .popup-container,
        .clk-btn-sgp a,
        .close-btn {
          animation: none;
          transition: none;
        }
      }

/* ===== Inline style block 11 ===== */
/* Chat Widget Styles - Lightweight & Minimal */
      .chat-widget {
        position: fixed;
        bottom: 20px;
        right: 20px;
        z-index: 9999;
        font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
      }

      /* Hide floating button on mobile - use bottom nav instead */
      @media (max-width: 640px) {
        .chat-toggle-btn {
          display: none !important;
        }

        /* Ensure popup is still visible on mobile even when button is hidden */
        .chat-widget {
          display: block !important;
        }

        .chat-popup {
          display: none;
          /* Hidden by default, shown via JS */
        }

        .chat-popup[style*="display: block"],
        .chat-popup[style*="display:block"] {
          display: block !important;
        }
      }

      .chat-toggle-btn {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        background: linear-gradient(135deg, #c2410c 0%, #ffffff 100%);
        border: none;
        color: rgb(0, 0, 0);
        cursor: pointer;
        box-shadow: 0 4px 12px rgba(242, 140, 26, 0.3);
        position: relative;
        transition: transform 0.2s, box-shadow 0.2s;
      }

      .chat-toggle-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 6px 20px rgba(242, 140, 26, 0.4);
      }

      #chat-toggle-btn .chat-icon {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 28px !important;
        height: 28px !important;
      }

      .chat-unread-badge {
        position: absolute;
        top: -5px;
        right: -5px;
        background: #ef4444;
        color: white;
        border-radius: 12px;
        padding: 2px 6px;
        font-size: 11px;
        font-weight: 600;
        min-width: 20px;
        text-align: center;
      }

      .chat-popup {
        position: absolute;
        bottom: 80px;
        right: 0;
        width: 380px;
        max-width: calc(100vw - 40px);
        height: 500px;
        max-height: calc(100vh - 120px);
        background: white;
        border-radius: 12px;
        box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
        display: flex;
        flex-direction: column;
        overflow: hidden;
      }

      .chat-popup-header {
        background: linear-gradient(135deg, #c2410c 0%, #7c2d12 100%);
        color: white;
        padding: 16px 20px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;
      }

      .chat-header-title {
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-height: 0;
      }

      .chat-popup-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        line-height: 1.2;
      }

      .chat-operating-hours {
        font-size: 11px;
        opacity: 0.9;
        font-weight: 400;
        display: flex;
        align-items: center;
        gap: 4px;
        line-height: 1.2;
      }

      .chat-operating-hours svg {
        width: 12px;
        height: 12px;
        opacity: 0.8;
        flex-shrink: 0;
      }

      .chat-header-actions {
        display: flex;
        align-items: center;
        gap: 8px;
      }

      /* Notification Toggle Button */
      .btn-notif-toggle {
        background: none;
        border: none;
        color: white;
        font-size: 18px;
        cursor: pointer;
        padding: 4px 8px;
        transition: all 0.2s;
        opacity: 0.8;
      }

      .btn-notif-toggle:hover {
        opacity: 1;
        transform: scale(1.1);
      }

      /* Icon states */
      .btn-notif-toggle[data-status="not-subscribed"] svg {
        opacity: 0.7;
      }

      .btn-notif-toggle[data-status="not-subscribed"]:hover svg {
        opacity: 1;
      }

      .btn-notif-toggle[data-status="subscribed"] svg {
        opacity: 1;
        animation: bellRing 2s ease-in-out;
      }

      .btn-notif-toggle[data-status="blocked"] svg {
        color: #ff6b6b;
      }

      .btn-notif-toggle[data-status="not-supported"] {
        display: none !important;
      }

      @keyframes bellRing {

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

        10%,
        30% {
          transform: rotate(-10deg);
        }

        20%,
        40% {
          transform: rotate(10deg);
        }
      }

      /* Notification Info Bar */
      .chat-notif-info-bar {
        position: absolute;
        top: 64px;
        left: 0;
        right: 0;
        background: linear-gradient(to right, #fff7ed, #f5f5f5);
        border-bottom: 1px solid #fdba74;
        padding: 8px 12px;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #616161;
        z-index: 10;
        animation: slideDown 0.3s ease;
      }

      .chat-notif-info-bar svg {
        flex-shrink: 0;
      }

      .chat-notif-info-bar .small {
        flex: 1;
        line-height: 1.4;
      }

      .chat-notif-info-bar .btn-dismiss {
        background: none;
        border: none;
        color: #9e9e9e;
        cursor: pointer;
        padding: 0 4px;
        font-size: 16px;
        transition: color 0.2s;
      }

      .chat-notif-info-bar .btn-dismiss:hover {
        color: #616161;
      }

      @keyframes slideDown {
        from {
          max-height: 0;
          opacity: 0;
        }

        to {
          max-height: 50px;
          opacity: 1;
        }
      }

      .chat-close-btn {
        background: none;
        border: none;
        color: white;
        font-size: 28px;
        line-height: 1;
        cursor: pointer;
        padding: 0;
        width: 30px;
        height: 30px;
      }

      .chat-popup-body {
        flex: 1 1 auto;
        display: flex;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
        height: calc(100% - 64px);
        position: relative;
        transition: padding-top 0.3s ease;
      }

      /* Add padding when info bar is visible */
      .chat-popup-body.has-info-bar {
        padding-top: 40px;
      }

      .chat-view {
        flex: 1 1 auto;
        display: none;
        flex-direction: column;
        min-height: 0;
        overflow: hidden;
      }

      #chat-list-view {
        display: flex;
      }

      #chat-messages-view {
        display: none;
      }

      #chat-messages-view.active {
        display: flex;
        flex-direction: column;
      }

      #chat-new-view {
        display: none;
      }

      #chat-new-view.active {
        display: flex;
      }

      .chat-conversations-list {
        flex: 1;
        overflow-y: auto;
        padding: 0;
        background: white;
      }

      /* Custom Scrollbar for Conversations List */
      .chat-conversations-list::-webkit-scrollbar {
        width: 6px;
      }

      .chat-conversations-list::-webkit-scrollbar-track {
        background: #f1f1f1;
      }

      .chat-conversations-list::-webkit-scrollbar-thumb {
        background: #c2410c;
        border-radius: 3px;
      }

      .chat-conversations-list::-webkit-scrollbar-thumb:hover {
        background: #7c2d12;
      }

      /* Firefox */
      .chat-conversations-list {
        scrollbar-width: thin;
        scrollbar-color: #c2410c #f1f1f1;
      }

      .chat-conversation-item {
        padding: 12px 16px;
        cursor: pointer;
        display: flex;
        gap: 12px;
        align-items: flex-start;
        transition: background 0.15s ease;
        color: #33371f;
        border-bottom: 1px solid #f0f0f0;
      }

      .chat-conversation-item:hover {
        background: #f5f5f5;
      }

      .chat-conversation-item.active {
        background: #fff7ed;
      }

      /* WhatsApp-like Avatar */
      .conversation-avatar {
        width: 48px;
        height: 48px;
        border-radius: 50%;
        background: linear-gradient(135deg, #c2410c 0%, #7c2d12 100%);
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        color: white;
        font-weight: 600;
        font-size: 18px;
      }

      .conversation-avatar svg {
        width: 24px;
        height: 24px;
      }

      /* WhatsApp-like Content */
      .conversation-content {
        flex: 1;
        min-width: 0;
        display: flex;
        flex-direction: column;
        gap: 4px;
      }

      .conversation-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }

      .conversation-name {
        font-weight: 600;
        font-size: 15px;
        color: #111;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .conversation-time {
        font-size: 12px;
        color: #7d8166;
        flex-shrink: 0;
      }

      .conversation-preview {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 8px;
      }

      .conversation-message {
        font-size: 14px;
        color: #667781;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0;
        flex: 1;
      }

      .conversation-unread {
        background: #d32525;
        color: white;
        border-radius: 12px;
        padding: 2px 8px;
        font-size: 12px;
        font-weight: 600;
        min-width: 20px;
        text-align: center;
        flex-shrink: 0;
      }

      /* Active item styling */
      .chat-conversation-item.active .conversation-name {
        color: #c2410c;
      }

      .chat-conversation-item.active .conversation-time {
        color: #c2410c;
      }

      .chat-new-btn {
        margin: 12px;
        padding: 12px;
        background: linear-gradient(135deg, #c2410c 0%, #7c2d12 100%);
        color: white;
        border: none;
        border-radius: 8px;
        cursor: pointer;
        font-weight: 500;
        font-size: 14px;
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        transition: all 0.2s;
        flex-shrink: 0;
      }

      .chat-new-btn:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(242, 140, 26, 0.3);
      }

      .chat-conversation-title {
        flex: 1;
        font-weight: 600;
        font-size: 16px;
        color: #1f2937;
      }

      .chat-messages-container {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;
        min-height: 0;
        background: #E5DDD5;
      }

      /* Custom Scrollbar for Messages Container */
      .chat-messages-container::-webkit-scrollbar {
        width: 6px;
      }

      .chat-messages-container::-webkit-scrollbar-track {
        background: rgba(0, 0, 0, 0.05);
      }

      .chat-messages-container::-webkit-scrollbar-thumb {
        background: rgba(242, 140, 26, 0.6);
        border-radius: 3px;
      }

      .chat-messages-container::-webkit-scrollbar-thumb:hover {
        background: #c2410c;
      }

      /* Firefox */
      .chat-messages-container {
        scrollbar-width: thin;
        scrollbar-color: rgba(242, 140, 26, 0.6) rgba(0, 0, 0, 0.05);
      }

      /* WhatsApp Group-like Messages */
      .chat-message {
        display: flex;
        margin-bottom: 4px;
        animation: fadeIn 0.2s ease;
      }

      @keyframes fadeIn {
        from {
          opacity: 0;
          transform: translateY(10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .chat-message.mine {
        justify-content: flex-end;
      }

      .chat-message-bubble {
        max-width: 80%;
        padding: 6px 8px 8px 10px;
        border-radius: 8px;
        position: relative;
        box-shadow: 0 1px 0.5px rgba(0, 0, 0, 0.13);
      }

      /* Bubble from others (Admin/CS) */
      .chat-message:not(.mine) .chat-message-bubble {
        background: #FFFFFF;
        border-radius: 0 8px 8px 8px;
      }

      /* Bubble tail for others */
      .chat-message:not(.mine) .chat-message-bubble::before {
        content: '';
        position: absolute;
        top: 0;
        left: -8px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 8px 13px 0;
        border-color: transparent #FFFFFF transparent transparent;
      }

      /* Bubble from user (mine) */
      .chat-message.mine .chat-message-bubble {
        background: #e4f5d0;
        /* Light accent for user messages */
        border-radius: 8px 0 8px 8px;
      }

      /* Bubble tail for mine */
      .chat-message.mine .chat-message-bubble::before {
        content: '';
        position: absolute;
        top: 0;
        right: -8px;
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 0 0 13px 8px;
        border-color: transparent transparent transparent #eaf5d0;
      }

      .message-sender {
        font-size: 12.5px;
        font-weight: 600;
        color: #c2410c !important;
        margin-bottom: 4px;
      }

      .chat-message.mine .message-sender {
        display: none;
      }

      /* Message text */
      .message-text {
        font-size: 14px;
        line-height: 19px;
        color: #000000 !important;
        word-wrap: break-word;
        white-space: pre-wrap;
        margin-bottom: 4px;
      }

      /* Message metadata (time + status) */
      .message-meta {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        gap: 4px;
        margin-top: 2px;
      }

      .message-time {
        font-size: 11px;
        color: #728166 !important;
        line-height: 15px;
      }

      /* Use multiple selectors to override global styles */
      .chat-message-bubble .message-status,
      .message-meta .message-status,
      .chat-message .message-status {
        width: 16px !important;
        height: 16px !important;
        min-width: 16px !important;
        min-height: 16px !important;
        max-width: 16px !important;
        max-height: 16px !important;
        flex-shrink: 0;
        color: #728166 !important;
        fill: currentColor !important;
      }

      .chat-message:not(.mine) .message-status {
        display: none;
      }

      /* Loading dots animation */
      @keyframes loadingDots {

        0%,
        20% {
          content: '.';
        }

        40% {
          content: '..';
        }

        60%,
        100% {
          content: '...';
        }
      }

      .message-status.loading::after {
        content: '...';
        animation: loadingDots 1.5s infinite;
        font-size: 16px;
        line-height: 16px;
      }

      .message-status.loading path {
        display: none;
      }

      .message-status.failed {
        color: #ef4444 !important;
        cursor: pointer;
      }

      .message-status.sent {
        color: #667781 !important;
      }

      .chat-new-form {
        flex: 1;
        overflow-y: auto;
        padding: 16px;
        display: flex;
        flex-direction: column;
      }

      .chat-new-form form {
        display: flex;
        flex-direction: column;
        gap: 16px;
        flex: 1;
      }

      .chat-new-form .form-group {
        display: flex;
        flex-direction: column;
        gap: 6px;
      }

      .chat-new-form label {
        font-size: 14px;
        font-weight: 500;
        color: #374151;
      }

      .chat-new-form .form-control {
        width: 100%;
        padding: 10px 12px;
        border: 1px solid #d1d5db;
        border-radius: 8px;
        font-size: 14px;
        font-family: inherit;
        transition: border-color 0.2s;
        box-sizing: border-box;
      }

      .chat-new-form .form-control:focus {
        outline: none;
        border-color: #c2410c;
        box-shadow: 0 0 0 3px rgba(242, 140, 26, 0.1);
      }

      .chat-new-form textarea.form-control {
        resize: vertical;
        min-height: 100px;
      }

      .chat-new-form .btn {
        padding: 12px 20px;
        border: none;
        border-radius: 8px;
        font-size: 15px;
        font-weight: 500;
        cursor: pointer;
        transition: all 0.2s;
        text-align: center;
      }

      .chat-new-form .btn-primary {
        background: linear-gradient(135deg, #c2410c 0%, #7c2d12 100%);
        color: white;
      }

      .chat-new-form .btn-primary:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 8px rgba(242, 140, 26, 0.3);
      }

      .chat-new-form .btn-primary:active {
        transform: scale(0.98);
      }

      .chat-new-form .btn-block {
        width: 100%;
        margin-top: auto;
      }

      .chat-message-form {
        padding: 12px;
        border-top: 1px solid #e5e7eb;
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        align-items: flex-end;
        flex-shrink: 0;
        background: white;
      }

      .chat-product-card {
        flex: 1 1 100%;
        max-width: 100%;
        display: flex;
        gap: 12px;
        padding: 12px;
        background: #f3f4f6;
        border-radius: 8px;
        margin-bottom: 4px;
        border: 1px solid #e5e7eb;
      }

      .chat-product-card img {
        width: 60px;
        height: 60px;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0;
      }

      .chat-product-card-content {
        flex: 1;
        min-width: 0;
      }

      .chat-product-card-name {
        font-weight: 500;
        font-size: 14px;
        color: #1f2937;
        margin-bottom: 4px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }

      .chat-product-card-variant {
        font-size: 12px;
        color: #74806b;
        margin-bottom: 4px;
      }

      .chat-product-card-price {
        font-size: 13px;
        color: #8bea66;
        font-weight: 600;
      }

      .chat-product-card-remove {
        align-self: flex-start;
        background: none;
        border: none;
        color: #9ca3af;
        cursor: pointer;
        padding: 4px;
        font-size: 18px;
        line-height: 1;
        transition: color 0.2s;
      }

      .chat-product-card-remove:hover {
        color: #ef4444;
      }

      /* Product card in messages (read-only display) */
      .message-product-card {
        display: flex;
        gap: 10px;
        padding: 10px;
        background: rgba(255, 255, 255, 0.5);
        border-radius: 8px;
        margin-bottom: 6px;
        border: 1px solid rgba(0, 0, 0, 0.08);
        align-items: center;
      }

      .chat-message.mine .message-product-card {
        background: rgba(255, 255, 255, 0.7);
      }

      .message-product-card img {
        width: 50px;
        height: 50px;
        object-fit: cover;
        border-radius: 6px;
        flex-shrink: 0;
      }

      .message-product-info {
        flex: 1;
        min-width: 0;
      }

      .message-product-name {
        font-weight: 500;
        font-size: 13px;
        color: #33371f;
        margin-bottom: 2px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        line-height: 1.3;
      }

      .message-product-variant {
        font-size: 11px;
        color: #78806b;
        margin-bottom: 2px;
      }

      .message-product-price {
        font-size: 12px;
        color: #c7ea66;
        font-weight: 600;
      }

      .message-product-link {
        flex-shrink: 0;
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: rgba(234, 88, 12, 0.1);
        border-radius: 6px;
        color: #c7ea66;
        text-decoration: none;
        transition: all 0.2s;
      }

      .message-product-link:hover {
        background: #b7ea66;
        color: white;
      }

      .message-product-link svg {
        width: 16px;
        height: 16px;
      }

      .chat-message-input {
        flex: 1;
        border: 1px solid #d1d5db;
        border-radius: 20px;
        padding: 10px 16px;
        resize: none;
        max-height: 100px;
        font-family: inherit;
        font-size: 14px;
        line-height: 1.5;
        box-sizing: border-box;
        overflow-y: hidden;
      }

      .chat-message-input:focus {
        outline: none;
        border-color: #c2410c;
        box-shadow: 0 0 0 3px rgba(242, 140, 26, 0.1);
      }

      .chat-send-btn {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background: linear-gradient(135deg, #c2410c 0%, #7c2d12 100%);
        border: none;
        color: white;
        cursor: pointer;
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: all 0.2s;
      }

      .chat-send-btn:hover {
        transform: scale(1.05);
        box-shadow: 0 2px 8px rgba(242, 140, 26, 0.3);
      }

      .chat-send-btn:active {
        transform: scale(0.95);
      }

      .chat-loading {
        text-align: center;
        padding: 20px;
        color: #6b7280;
      }

      /* Date Separator (WhatsApp-style) */
      .date-separator {
        display: flex;
        align-items: center;
        gap: 12px;
        margin: 24px 0 16px;
        opacity: 0;
        animation: fadeInSeparator 0.3s ease forwards;
      }

      @keyframes fadeInSeparator {
        from {
          opacity: 0;
          transform: translateY(-10px);
        }

        to {
          opacity: 1;
          transform: translateY(0);
        }
      }

      .date-separator-line {
        flex: 1;
        height: 1px;
        background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.1) 50%, transparent);
      }

      .date-separator-text {
        flex-shrink: 0;
        padding: 4px 12px;
        background: #e9ecef;
        color: #6c757d;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.5px;
        border-radius: 12px;
        box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
      }

      /* Mobile responsive */
      @media (max-width: 640px) {
        .chat-popup {
          position: fixed !important;
          /* Override absolute positioning */
          bottom: 45px !important;
          /* Above bottom nav */
          right: 0 !important;
          left: 0 !important;
          width: 100% !important;
          max-width: 100% !important;
          /* Use dvh (dynamic viewport height) for browser UI awareness */
          height: calc(100dvh - 45px) !important;
          max-height: calc(100dvh - 45px) !important;
          /* Fallback for browsers that don't support dvh */
          height: calc(var(--viewport-height, 100vh) - 45px) !important;
          max-height: calc(var(--viewport-height, 100vh) - 45px) !important;
          border-radius: 0 !important;
          z-index: 9999 !important;
        }

        .chat-popup-header {
          border-radius: 0;
        }

        .chat-messages-container,
        .chat-conversations-list {
          /* Adjust for mobile keyboard using dynamic viewport */
          max-height: calc(100dvh - 190px);
          /* Fallback for browsers that don't support dvh */
          max-height: calc(var(--viewport-height, 100vh) - 190px);
        }
      }

/* ===== Inline style block 12 ===== */
:root {
      --mawar-black: #07040c;
      --mawar-dark: #12071b;
      --mawar-purple: #c2410c;
      --mawar-pink: #c2410c;
      --mawar-cyan: #c2410c;
      --mawar-white: #ffffff;
    }

    /* =========================================================
     FIXED FOOTER – STREET DEMONS MODE
  ========================================================= */

    .mawar-fixed-footer {
      position: fixed;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 999;

      display: flex;
      align-items: center;
      justify-content: space-around;
      gap: 8px;

      padding: 11px 12px calc(11px + env(safe-area-inset-bottom));
      overflow: hidden;

      background:
        radial-gradient(circle at 50% 0%,
          rgba(139, 44, 255, 0.24),
          rgba(20, 8, 30, 0.96) 58%,
          rgba(5, 2, 9, 1)),
        linear-gradient(180deg,
          rgba(34, 13, 48, 0.95),
          rgba(5, 2, 9, 1));

      border-top: 2px solid rgba(249, 115, 22, 0.6);
      border-radius: 18px 18px 0 0;

      box-shadow:
        0 -12px 35px rgba(139, 44, 255, 0.22),
        0 -4px 18px rgba(255, 60, 166, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);

      font-family: "Orbitron", "Poppins", Arial, sans-serif;
    }

    /* Scanline ringan */
    .mawar-fixed-footer::before {
      content: "";
      position: absolute;
      inset: 0;
      pointer-events: none;

      background: repeating-linear-gradient(0deg,
          rgba(253, 186, 116, 0.025),
          rgba(253, 186, 116, 0.025) 1px,
          transparent 1px,
          transparent 4px);

      opacity: 0.75;
      mix-blend-mode: screen;
    }

    /* Sweep neon */
    .mawar-fixed-footer::after {
      content: "";
      position: absolute;
      top: 0;
      left: -160%;

      width: 60%;
      height: 100%;

      background: linear-gradient(120deg,
          transparent,
          rgba(255, 0, 0, 0.22),
          rgba(234, 88, 12, 0.527),
          transparent);

      transform: skewX(-25deg);
      animation: mawarShine 4.5s infinite ease-in-out;
      pointer-events: none;
    }

    @keyframes mawarShine {
      0% {
        left: -160%;
        opacity: 0;
      }

      15% {
        opacity: 1;
      }

      55% {
        left: 160%;
        opacity: 1;
      }

      100% {
        left: 160%;
        opacity: 0;
      }
    }

    /* =========================================================
     ITEM STYLE
  ========================================================= */

    .mawar-fixed-footer a {
      flex: 1;
      max-width: 110px;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 5px;

      padding: 8px 4px;

      color: rgba(255, 255, 255, 0.9);
      text-decoration: none;
      text-align: center;
      text-transform: uppercase;

      font-size: 11px;
      font-weight: 800;
      letter-spacing: 0.4px;

      position: relative;
      z-index: 2;

      transition:
        color 0.2s ease,
        transform 0.2s ease,
        filter 0.2s ease;
    }

    .mawar-fixed-footer a:hover {
      color: var(--mawar-white);
      transform: translateY(-2px);

      filter:
        drop-shadow(0 0 6px rgba(250, 0, 0, 0.65)) drop-shadow(0 0 8px rgba(255, 60, 166, 0.35));
    }

    .mawar-fixed-footer img {
      width: 24px;
      height: 24px;
      object-fit: contain;

      filter:
        drop-shadow(0 0 5px rgba(253, 186, 116, 0.55)) drop-shadow(0 0 7px rgba(139, 44, 255, 0.35));

      transition: transform 0.2s ease;
    }

    .mawar-fixed-footer a:hover img {
      transform: scale(1.08);
    }

    /* =========================================================
     CENTER CTA – STREET CORE
  ========================================================= */

    .mawar-fixed-footer .core-cta {
      background:
        linear-gradient(145deg,
          rgba(139, 44, 255, 0.2),
          rgba(255, 60, 166, 0.12));

      border: 1px solid rgba(245, 0, 0, 0.65);
      border-radius: 10px 18px 10px 18px;

      box-shadow:
        0 0 14px rgba(139, 44, 255, 0.28),
        0 0 18px rgba(253, 186, 116, 0.1),
        inset 0 0 10px rgba(255, 60, 166, 0.1);

      transform: scale(1.05);
    }

    .mawar-fixed-footer .core-cta img {
      width: 28px;
      height: 28px;

      filter:
        drop-shadow(0 0 8px rgba(247, 0, 0, 0.8)) drop-shadow(0 0 11px rgba(255, 60, 166, 0.55));
    }

    .mawar-fixed-footer .core-cta::before {
      content: "";
      position: absolute;
      inset: -5px;
      z-index: -1;

      border-radius: 13px 21px 13px 21px;

      background: radial-gradient(circle,
          rgba(139, 44, 255, 0.28),
          rgba(255, 60, 166, 0.1),
          transparent 72%);

      animation: mawarPulse 2.2s ease-in-out infinite;
    }

    @keyframes mawarPulse {

      0%,
      100% {
        opacity: 0.35;
        transform: scale(1);
      }

      50% {
        opacity: 0.8;
        transform: scale(1.08);
      }
    }

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

    @media (max-width: 400px) {
      .mawar-fixed-footer {
        gap: 4px;
        padding-right: 8px;
        padding-left: 8px;
      }

      .mawar-fixed-footer a {
        font-size: 10px;
        letter-spacing: 0.2px;
      }

      .mawar-fixed-footer img {
        width: 20px;
        height: 20px;
      }

      .mawar-fixed-footer .core-cta img {
        width: 24px;
        height: 24px;
      }
    }

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

      .mawar-fixed-footer::after,
      .mawar-fixed-footer .core-cta::before {
        animation: none;
      }

      .mawar-fixed-footer a,
      .mawar-fixed-footer img {
        transition: none;
      }
    }

/* ===== Inline style block 13 ===== */
/* Orange accent theme with dark panels. */
    :root {
      --sd-purple: #c2410c;
      --sd-violet: #7c2d12;
      --sd-pink: #f97316;
      --sd-cyan: #fdba74;
      --mawar-purple: #c2410c;
      --mawar-pink: #f97316;
      --mawar-cyan: #fdba74;
    }

    /* Navigation remains readable on the white background. */
    .pd-breadcrumb a {
      color: #7c2d12 !important;
      font-weight: 700;
    }

    .pd-breadcrumb a:hover {
      color: #5f4608 !important;
    }

    /* Promo tabs and installment badges. */
    .bank-tab.active,
    .tenor-badge,
    .pdv-badge-btn,
    .voucher-modal-badge,
    .modal-btn-primary {
      color: #fff7ed !important;
      background: linear-gradient(135deg, #fdba74 0%, #7c2d12 100%) !important;
      border-color: #431407 !important;
      box-shadow: 0 4px 12px rgba(138, 101, 8, .24);
    }

    .bank-tab.active,
    .bank-tab.active *,
    .tenor-badge,
    .pdv-badge-btn *,
    .voucher-modal-badge * {
      color: #fff7ed !important;
    }

    .inst-month-item {
      border-color: #fdba74 !important;
    }

    /* FAQ and review panels from the supplied screenshot. */
    .sgt-box {
      background: linear-gradient(145deg, rgba(234, 88, 12, .08), transparent 45%), var(--sd-bg);
      border-color: rgba(234, 88, 12, .72);
      box-shadow: 0 16px 36px rgba(0, 0, 0, .4), 0 0 15px rgba(234, 88, 12, .2);
    }

    .sgt-box::before {
      background: radial-gradient(circle, rgba(249, 115, 22, .14), transparent 68%);
    }

    .sgt-title {
      text-shadow: 2px 2px 0 rgba(111, 80, 5, .75);
    }

    .sgt-faq {
      border-color: rgba(253, 186, 116, .3);
      border-left-color: #c2410c;
    }

    .sgt-faq:hover,
    .sgt-faq.active {
      border-color: rgba(253, 186, 116, .82);
      box-shadow: 0 8px 20px rgba(0, 0, 0, .28), 0 0 10px rgba(234, 88, 12, .16);
    }

    .sgt-review {
      background: linear-gradient(145deg, rgba(234, 88, 12, .08), transparent 55%), var(--sd-card);
      border-color: rgba(249, 115, 22, .34);
      border-bottom-color: #c2410c;
    }

    .sgt-review:hover {
      border-color: rgba(253, 186, 116, .78);
      box-shadow: 0 10px 22px rgba(0, 0, 0, .3), 0 0 10px rgba(234, 88, 12, .16);
    }

    .sgt-avatar {
      color: #fff7ed;
      background: linear-gradient(135deg, #fdba74, #7c2d12);
    }

    .sgt-footer {
      border-top-color: rgba(234, 88, 12, .28);
    }

    /* Article panel and floating/footer accents. */
    .article-pro {
      border-color: rgba(234, 88, 12, .68);
      box-shadow: 0 14px 34px rgba(0, 0, 0, .42), 0 0 14px rgba(234, 88, 12, .2);
    }

    .article-pro strong,
    .article-pro a,
    .article-pro li::marker {
      color: #f97316;
    }

    .toast .btn.alt {
      color: #fdba74;
      border-color: rgba(255, 224, 130, .4);
    }

    .toast .progress {
      background: linear-gradient(90deg, #ea580c, #7c2d12);
    }

    .chat-toggle-btn {
      background: linear-gradient(135deg, #c2410c 0%, #ffedd5 100%);
    }

    .clk-btn-sgp .login {
      color: #ea580c !important;
      background: #120d1f !important;
      border-color: #c2410c !important;
      box-shadow: inset 0 0 0 1px rgba(234, 88, 12, .22);
    }

    .clk-btn-sgp .register {
      color: #fff7ed !important;
      background: linear-gradient(135deg, #fdba74, #c2410c) !important;
      border-color: #c2410c !important;
    }

    /* Popup frame: use consistent orange outlines. */
    .popup-container {
      border: 1px solid rgba(234, 88, 12, .92) !important;
      box-shadow: 0 22px 55px rgba(0, 0, 0, .72),
        0 0 18px rgba(234, 88, 12, .38),
        0 0 32px rgba(249, 115, 22, .16) !important;
    }

    .popup-container::before {
      background: repeating-linear-gradient(-35deg, transparent 0, transparent 14px,
        rgba(255, 255, 255, .025) 15px, rgba(234, 88, 12, .035) 17px,
        transparent 19px) !important;
    }

    .popup-container::after {
      background: linear-gradient(to bottom, #fdba74, #c2410c, #7c2d12) !important;
      box-shadow: 0 0 10px rgba(234, 88, 12, .7),
        0 0 16px rgba(249, 115, 22, .4) !important;
    }

    .luxury-border {
      border-color: rgba(249, 115, 22, .48) !important;
      box-shadow: inset 0 0 10px rgba(234, 88, 12, .08) !important;
    }

    .close-btn {
      border-color: rgba(234, 88, 12, .8) !important;
      box-shadow: 0 0 10px rgba(234, 88, 12, .24) !important;
    }

    .close-btn:hover {
      color: #fff7ed !important;
      background: #c2410c !important;
      border-color: #fdba74 !important;
    }

    .article-pro {
      background: radial-gradient(circle at top right, rgba(234, 88, 12, .12), transparent 34%),
        radial-gradient(circle at bottom left, rgba(253, 186, 116, .1), transparent 38%),
        linear-gradient(145deg, #090510 0%, #160f18 48%, #07040d 100%);
    }

    .article-pro::before {
      background: linear-gradient(90deg, transparent, rgba(234, 88, 12, .12),
        rgba(249, 115, 22, .5), rgba(253, 186, 116, .58), transparent);
    }

    .article-pro::after {
      box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .04),
        inset 0 0 20px rgba(234, 88, 12, .1);
    }

    .mawar-fixed-footer::after {
      background: linear-gradient(120deg, transparent, rgba(234, 88, 12, .18),
        rgba(253, 186, 116, .42), transparent);
    }

    /* Bottom navigation: orange lines and glow. */
    .mawar-fixed-footer {
      background: radial-gradient(circle at 50% 0%, rgba(234, 88, 12, .2),
          rgba(20, 13, 20, .97) 58%, rgba(5, 2, 9, 1)),
        linear-gradient(180deg, rgba(38, 27, 16, .96), rgba(5, 2, 9, 1));
      border-top-color: rgba(234, 88, 12, .92);
      box-shadow: 0 -12px 35px rgba(234, 88, 12, .2),
        0 -4px 18px rgba(249, 115, 22, .14),
        inset 0 1px 0 rgba(254, 215, 170, .18);
    }

    .mawar-fixed-footer::before {
      background: repeating-linear-gradient(0deg,
          rgba(249, 115, 22, .035), rgba(249, 115, 22, .035) 1px,
          transparent 1px, transparent 4px);
    }

    .mawar-fixed-footer a:hover {
      color: #fdba74;
      filter: drop-shadow(0 0 6px rgba(234, 88, 12, .72))
        drop-shadow(0 0 9px rgba(253, 186, 116, .38));
    }

    .mawar-fixed-footer img {
      filter: drop-shadow(0 0 5px rgba(234, 88, 12, .66))
        drop-shadow(0 0 8px rgba(253, 186, 116, .36));
    }

    .mawar-fixed-footer .core-cta {
      background: linear-gradient(145deg, rgba(234, 88, 12, .2),
        rgba(249, 115, 22, .11));
      border-color: rgba(234, 88, 12, .88);
      box-shadow: 0 0 14px rgba(234, 88, 12, .36),
        0 0 20px rgba(253, 186, 116, .16),
        inset 0 0 10px rgba(249, 115, 22, .12);
    }

    .mawar-fixed-footer .core-cta img {
      filter: drop-shadow(0 0 8px rgba(234, 88, 12, .9))
        drop-shadow(0 0 12px rgba(253, 186, 116, .58));
    }

    .mawar-fixed-footer .core-cta::before {
      background: radial-gradient(circle, rgba(234, 88, 12, .34),
        rgba(249, 115, 22, .12), transparent 72%);
    }