/* Traktir Kopi - minimal, responsive, theme-native */
.wpmedia-traktir-wrap{margin:18px 0 22px;padding:0 0}
.wpmedia-traktir-button{width:100%;min-height:52px;border:0;border-radius:13px;padding:7px 12px;display:flex;align-items:center;gap:10px;text-align:left;cursor:pointer;background:linear-gradient(var(--mainmenu-direction,80deg),var(--mainmenu-bgcolor,#d9091b),var(--mainmenu-secondbgcolor,#3920c9));color:var(--mainmenu-color,#fff);box-shadow:0 4px 12px rgba(0,0,0,.07);transition:transform .18s ease,box-shadow .18s ease;box-sizing:border-box}
.wpmedia-traktir-button:hover,.wpmedia-traktir-button:focus{transform:translateY(-1px);box-shadow:0 6px 16px rgba(0,0,0,.10);color:var(--mainmenu-color,#fff)}
.wpmedia-traktir-cup{width:27px;height:27px;flex:0 0 27px;display:flex;align-items:center;justify-content:center;color:currentColor}
.wpmedia-traktir-cup svg{display:block;width:25px;height:25px}
.wpmedia-traktir-copy{display:flex;align-items:center;gap:9px;min-width:0;flex:1;white-space:nowrap;overflow:visible}
.wpmedia-traktir-copy strong{font-size:17px;line-height:1.15;color:inherit;flex:0 0 auto;font-weight:700}
.wpmedia-traktir-copy small{font-size:12px;line-height:1.2;color:inherit;opacity:.96;min-width:0;flex:1;white-space:nowrap;overflow:visible}
.wpmedia-traktir-separator{width:1px;height:22px;background:currentColor;opacity:.55;flex:0 0 1px}
.wpmedia-traktir-arrow{font-size:27px;line-height:1;opacity:.95;flex:0 0 auto;margin-left:2px}
.wpmedia-traktir-modal{position:fixed;inset:0;z-index:999999;display:none;align-items:center;justify-content:center;padding:20px;box-sizing:border-box}
.wpmedia-traktir-modal.is-open{display:flex}
.wpmedia-traktir-backdrop{position:absolute;inset:0;background:rgba(0,0,0,.62);backdrop-filter:blur(2px)}
.wpmedia-traktir-dialog{position:relative;width:min(100%,480px);max-height:min(90vh,760px);overflow:auto;background:#fff;color:#252525;border-radius:22px;padding:28px;box-sizing:border-box;box-shadow:0 24px 70px rgba(0,0,0,.30);animation:wpmediaTraktirIn .18s ease-out}
@keyframes wpmediaTraktirIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.wpmedia-traktir-close{position:absolute;right:16px;top:12px;border:0;background:transparent;color:#777;font-size:38px;line-height:1;cursor:pointer;padding:4px 8px}
.wpmedia-traktir-heading{display:flex;align-items:center;gap:14px;padding-right:34px}
.wpmedia-traktir-heading-icon{font-size:42px;line-height:1}
.wpmedia-traktir-heading h2{margin:0 0 2px;font-size:28px;line-height:1.15;color:var(--button-bgcolor,#3920c9)}
.wpmedia-traktir-heading p{margin:0;color:#555;font-size:15px}
.wpmedia-traktir-divider{height:1px;background:#eee;margin:18px 0}
.wpmedia-traktir-message{font-size:16px;line-height:1.65;margin:0 0 20px;color:#333}
.wpmedia-traktir-step h3{text-transform:uppercase;font-size:16px;margin:0 0 12px;color:#555;letter-spacing:.2px}
.wpmedia-traktir-amounts{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.wpmedia-traktir-amount{min-height:56px;padding:8px;border:2px solid var(--button-bgcolor,#3920c9);border-radius:11px;background:#fff;color:var(--button-bgcolor,#3920c9);font-weight:700;font-size:16px;cursor:pointer;transition:all .15s ease}
.wpmedia-traktir-amount:hover,.wpmedia-traktir-amount.is-selected{background:var(--button-bgcolor,#3920c9);color:#fff}
.wpmedia-traktir-footer{display:flex;align-items:center;gap:12px;margin-top:24px}
.wpmedia-traktir-cancel,.wpmedia-traktir-next{flex:1;min-height:52px;border:0;border-radius:999px;padding:10px 18px;font-size:16px;font-weight:700;cursor:pointer;text-align:center;box-sizing:border-box;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px}
.wpmedia-traktir-cancel{background:#f1f2f3;color:#555}
.wpmedia-traktir-next{background:var(--button-bgcolor,#3920c9);color:var(--button-color,#fff)}
.wpmedia-traktir-next:hover,.wpmedia-traktir-next:focus{color:var(--button-color,#fff);filter:brightness(.96)}
.wpmedia-traktir-next:disabled{opacity:.45;cursor:not-allowed}
.wpmedia-traktir-selected{display:flex;justify-content:space-between;align-items:center;background:#f7f7f8;border-radius:12px;padding:12px 15px;margin:18px 0;color:#666}
.wpmedia-traktir-selected strong{color:#222;font-size:20px}
.wpmedia-traktir-qris-box{text-align:center;border:1px solid #eee;border-radius:16px;padding:15px;background:#fafafa}
.wpmedia-traktir-qris-box img{display:block;width:min(100%,280px);height:auto;max-height:320px;object-fit:contain;margin:0 auto 10px;border-radius:8px}
.wpmedia-traktir-qris-box p{margin:0;color:#555;font-size:14px;line-height:1.5}
.wpmedia-traktir-qris-empty{border:1px dashed #bbb;border-radius:14px;padding:28px 18px;text-align:center;display:flex;flex-direction:column;gap:7px;color:#666}
.wpmedia-traktir-qris-empty strong{color:#333;font-size:17px}
.wpmedia-traktir-note{text-align:center;color:#777;font-size:12px;line-height:1.5;margin:16px 0 0}
body.wpmedia-traktir-lock{overflow:hidden}
@media(max-width:480px){
 .wpmedia-traktir-wrap{margin:14px 0 18px}
 .wpmedia-traktir-button{min-height:48px;padding:6px 10px;gap:8px;border-radius:11px}
 .wpmedia-traktir-cup{width:24px;height:24px;flex-basis:24px}.wpmedia-traktir-cup svg{width:23px;height:23px}
 .wpmedia-traktir-copy{gap:7px}.wpmedia-traktir-copy strong{font-size:16px}.wpmedia-traktir-copy small{font-size:11px}.wpmedia-traktir-separator{height:20px}.wpmedia-traktir-arrow{font-size:25px}
 .wpmedia-traktir-dialog{padding:22px 18px;border-radius:18px}.wpmedia-traktir-heading h2{font-size:24px}.wpmedia-traktir-amounts{grid-template-columns:repeat(2,1fr)}.wpmedia-traktir-amount{font-size:15px}.wpmedia-traktir-footer{gap:8px}.wpmedia-traktir-cancel,.wpmedia-traktir-next{font-size:15px}
}
@media(max-width:360px){
 .wpmedia-traktir-button{padding-left:8px;padding-right:8px;gap:6px}
 .wpmedia-traktir-copy{gap:5px}.wpmedia-traktir-copy strong{font-size:15px}.wpmedia-traktir-copy small{font-size:10px}.wpmedia-traktir-separator{height:18px}.wpmedia-traktir-arrow{font-size:23px}
}

/* Final compact pass: keep the support bar slim while preventing the description from being clipped. */
.wpmedia-traktir-wrap{margin:12px 0 16px}
.wpmedia-traktir-button{min-height:42px;padding:4px 9px;gap:7px;border-radius:11px}
.wpmedia-traktir-cup{width:22px;height:22px;flex:0 0 22px}
.wpmedia-traktir-cup svg{width:21px;height:21px}
.wpmedia-traktir-copy{gap:7px;flex:1 1 auto;min-width:0;overflow:visible;white-space:nowrap}
.wpmedia-traktir-copy strong{font-size:15px;line-height:1;flex:0 1 auto;white-space:nowrap}
.wpmedia-traktir-copy small{font-size:clamp(8.5px,2.55vw,11px);line-height:1;letter-spacing:-.12px;flex:1 1 auto;min-width:0;white-space:nowrap;overflow:visible}
.wpmedia-traktir-separator{height:18px;flex:0 0 1px}
.wpmedia-traktir-arrow{font-size:21px;line-height:1;flex:0 0 14px;margin-left:0}

/* Subtle animated theme gradient: colors remain inherited from the theme while the gradient gently moves. */
.wpmedia-traktir-button{
 background-size:220% 100%;
 background-position:0% 50%;
 animation:wpmediaTraktirGradient 7s ease-in-out infinite alternate;
 will-change:background-position;
}
@keyframes wpmediaTraktirGradient{
 0%{background-position:0% 50%}
 100%{background-position:100% 50%}
}
@media (prefers-reduced-motion:reduce){
 .wpmedia-traktir-button{animation:none;background-position:50% 50%}
}

@media (max-width:380px){
 .wpmedia-traktir-button{min-height:39px;padding:3px 7px;gap:5px;border-radius:10px}
 .wpmedia-traktir-cup{width:20px;height:20px;flex-basis:20px}
 .wpmedia-traktir-cup svg{width:19px;height:19px}
 .wpmedia-traktir-copy{gap:5px}
 .wpmedia-traktir-copy strong{font-size:14px}
 .wpmedia-traktir-copy small{font-size:8.5px;letter-spacing:-.16px}
 .wpmedia-traktir-separator{height:16px}
 .wpmedia-traktir-arrow{font-size:20px;flex-basis:12px}
}