#receiptExampleModal { --receipt-green: #075a3e; --receipt-dark: #123f2d; --receipt-gold: #d0a64e; color: #263b32; }
#receiptExampleModal .modal-dialog { max-width: 1120px; }
#receiptExampleModal .modal-content { max-height: calc(100vh - 28px); overflow: hidden; border: 3px solid rgba(212, 180, 102, .75); border-radius: 24px; background: #f5f7f5; box-shadow: 0 28px 80px rgba(5, 37, 25, .4); }
#receiptExampleModal .receipt-example-header { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 20px; padding: 18px 22px; background: radial-gradient(circle at 12% 0, rgba(75, 151, 104, .55), transparent 44%), var(--receipt-dark); color: #fff; }
#receiptExampleModal .receipt-example-kicker { display: block; color: #e6ca7e; font-size: .65rem; font-weight: 900; letter-spacing: .15em; }
#receiptExampleModal .receipt-example-heading h2 { margin: 2px 0; font-size: clamp(1.15rem, 2.5vw, 1.55rem); font-weight: 900; }
#receiptExampleModal .receipt-example-heading p { margin: 0; color: rgba(255,255,255,.76); font-size: .78rem; }
#receiptExampleModal .receipt-example-close { display: grid; flex: 0 0 40px; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: rgba(255,255,255,.13); color: #fff; cursor: pointer; place-items: center; }
#receiptExampleModal .receipt-example-close:hover { background: rgba(255,255,255,.22); }
#receiptExampleModal .receipt-example-selector { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); flex: 0 0 auto; gap: 7px; padding: 9px; border-bottom: 1px solid #dfe5e1; background: #e9eeeb; }
#receiptExampleModal .receipt-example-tab { display: flex; align-items: center; gap: 9px; min-width: 0; min-height: 58px; padding: 7px 10px; border: 1px solid transparent; border-radius: 13px; background: transparent; color: #647169; font-family: inherit; text-align: left; cursor: pointer; transition: .2s ease; }
#receiptExampleModal .receipt-example-tab:hover { background: rgba(255,255,255,.65); }
#receiptExampleModal .receipt-example-tab.is-active { border-color: #d8e0db; background: #fff; color: var(--receipt-green); box-shadow: 0 5px 15px rgba(34, 65, 50, .09); }
#receiptExampleModal .receipt-example-tab > span:last-child { min-width: 0; }
#receiptExampleModal .receipt-example-tab strong, #receiptExampleModal .receipt-example-tab small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#receiptExampleModal .receipt-example-tab strong { font-size: .8rem; }.receipt-example-tab small { font-size: .65rem; opacity: .72; }
#receiptExampleModal .receipt-example-icon { display: grid; flex: 0 0 36px; width: 36px; height: 36px; border-radius: 10px; background: #edf4f0; color: var(--receipt-green); place-items: center; }
#receiptExampleModal .receipt-example-icon img { display: block; width: 29px; height: 29px; object-fit: contain; }
#receiptExampleModal .receipt-example-icon.is-shopee { background: #fff0eb; } #receiptExampleModal .receipt-example-icon.is-lazada { background: #fff0f7; } #receiptExampleModal .receipt-example-icon.is-tiktok { background: #eef9f9; }
#receiptExampleModal .receipt-example-submenu[hidden] { display: none !important; }
#receiptExampleModal .receipt-example-submenu { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; gap: 12px; padding: 8px 12px; border-bottom: 1px solid #e2e6e3; background: #f7f4eb; }
#receiptExampleModal .receipt-example-submenu-label { flex: 0 0 auto; color: #796f5b; font-size: .7rem; font-weight: 800; }
#receiptExampleModal .receipt-example-submenu-label i { margin-right: 4px; color: #b0883c; }
#receiptExampleModal .receipt-example-submenu-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; width: min(100%, 560px); }
#receiptExampleModal .receipt-example-subtab { min-height: 35px; padding: 6px 11px; border: 1px solid #ddd5c5; border-radius: 999px; background: #fff; color: #6c756f; font: inherit; font-size: .7rem; font-weight: 800; cursor: pointer; transition: .2s ease; }
#receiptExampleModal .receipt-example-subtab:hover { border-color: #aabbb2; color: var(--receipt-green); }
#receiptExampleModal .receipt-example-subtab.is-active { border-color: var(--receipt-green); background: var(--receipt-green); color: #fff; box-shadow: 0 4px 11px rgba(7,90,62,.18); }
#receiptExampleModal .receipt-example-subtab i { margin-right: 4px; }
#receiptExampleModal .modal-body { flex: 1 1 auto; min-height: 0; padding: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
#receiptExampleModal .receipt-example-viewer { padding: 14px; }
#receiptExampleModal .receipt-example-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; max-width: 920px; margin: 0 auto 10px; }
#receiptExampleModal .receipt-example-meta span { color: #a27a2c; font-size: .65rem; font-weight: 900; letter-spacing: .08em; }
#receiptExampleModal .receipt-example-meta h3 { margin: 1px 0; color: var(--receipt-green); font-size: 1.05rem; font-weight: 900; }
#receiptExampleModal .receipt-example-meta p { margin: 0; color: #748078; font-size: .72rem; }
#receiptExampleModal .receipt-example-open { flex: 0 0 auto; padding: 7px 12px; border: 1px solid #cad7d0; border-radius: 999px; background: #fff; color: var(--receipt-green); font-size: .72rem; font-weight: 800; text-decoration: none; }
#receiptExampleModal .receipt-example-stage { position: relative; display: flex; align-items: flex-start; justify-content: center; max-width: 920px; height: min(58vh, 610px); margin: auto; overflow: auto; border: 1px solid #dce3df; border-radius: 15px; background: #f1f3f2; }
#receiptExampleModal .receipt-example-stage img { display: block; width: auto; max-width: 100%; height: auto; min-height: 100%; object-fit: contain; opacity: 1; transition: opacity .18s ease; }
#receiptExampleModal .receipt-example-stage img.is-loading { opacity: 0; }
#receiptExampleModal .receipt-example-loading { position: absolute; top: 50%; left: 50%; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 9px 13px; border-radius: 999px; background: rgba(255,255,255,.92); color: #65736b; font-size: .72rem; transform: translate(-50%,-50%); box-shadow: 0 5px 18px rgba(20,45,34,.12); }
#receiptExampleModal .receipt-example-loading[hidden] { display: none; }
#receiptExampleModal .receipt-example-mobile-nav { display: none; }
#receiptExampleModal .receipt-example-footer { display: flex; align-items: center; justify-content: space-between; flex: 0 0 auto; gap: 16px; padding: 11px 18px; border-top: 1px solid #dfe5e1; background: #fff; color: #718078; font-size: .72rem; }
#receiptExampleModal .receipt-example-footer i { margin-right: 5px; color: var(--receipt-gold); }
#receiptExampleModal .receipt-example-done { min-width: 100px; border-radius: 999px; background: var(--receipt-green); color: #fff; font-weight: 800; }
@media (max-width: 767.98px) {
  #receiptExampleModal .modal-dialog { margin: 7px; } #receiptExampleModal .modal-content { max-height: calc(100vh - 14px); border-width: 2px; border-radius: 19px; }
  #receiptExampleModal .receipt-example-header { padding: 14px; } #receiptExampleModal .receipt-example-heading p { display: none; }
  #receiptExampleModal .receipt-example-selector { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; }
  #receiptExampleModal .receipt-example-tab { flex: 0 0 148px; scroll-snap-align: start; } #receiptExampleModal .receipt-example-viewer { padding: 10px; }
  #receiptExampleModal .receipt-example-submenu { align-items: stretch; flex-direction: column; gap: 5px; padding: 7px 9px; }
  #receiptExampleModal .receipt-example-submenu-label { text-align: center; }
  #receiptExampleModal .receipt-example-subtab { min-height: 38px; padding: 5px 7px; font-size: .65rem; }
  #receiptExampleModal .receipt-example-meta { align-items: flex-end; } #receiptExampleModal .receipt-example-meta p { display: none; } #receiptExampleModal .receipt-example-open { padding: 7px 10px; }
  #receiptExampleModal .receipt-example-stage { height: 54vh; } #receiptExampleModal .receipt-example-stage img { min-height: 0; }
  #receiptExampleModal .receipt-example-mobile-nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
  #receiptExampleModal .receipt-example-mobile-nav button { padding: 7px 11px; border: 0; border-radius: 999px; background: #e8f0ec; color: var(--receipt-green); font: inherit; font-size: .7rem; font-weight: 800; }
  #receiptExampleModal .receipt-example-mobile-nav span { color: #829087; font-size: .68rem; font-weight: 800; }
  #receiptExampleModal .receipt-example-footer > span { display: none; } #receiptExampleModal .receipt-example-done { width: 100%; }
}