/* Commerce module: coupons, discount line, payment choices, payment page. */
.commerce-discount span:last-child{color:var(--green);font-weight:600}
.commerce-coupon{margin:18px 0 6px;padding:16px 0 4px;border-top:1px solid var(--line)}
.commerce-coupon h3{font-size:15px;margin:0 0 10px}
.commerce-coupon.compact{margin:10px 0 0;padding:8px 0 0}
.commerce-coupon.compact summary{cursor:pointer;font-size:13px;font-weight:500;color:var(--green);list-style-position:inside}
.coupon-form{display:flex;gap:8px;align-items:stretch;margin-top:8px}
.coupon-form input{text-transform:uppercase;letter-spacing:.04em;min-height:40px;padding:8px 11px;margin:0}
.coupon-form .button{white-space:nowrap;flex-shrink:0;width:auto;margin:0}
.commerce-coupon .button.small{min-height:40px}
.coupon-applied{display:flex;flex-wrap:wrap;align-items:center;gap:6px 10px;margin:8px 0 0;padding:10px 12px;border:1px dashed var(--green);border-radius:5px;background:var(--green-light);font-size:13px}
.coupon-applied strong{letter-spacing:.04em;color:var(--green-dark)}
.coupon-applied span{flex:1;color:var(--muted)}
.coupon-applied .text-button,.coupon-error .text-button{padding:0;font-size:12px}
.coupon-error,.coupon-result.error{color:var(--danger);font-size:13px;margin:8px 0 0}
.coupon-result{font-size:13px;margin:6px 0 0}
.coupon-result:empty{display:none}
.coupon-offers{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:8px}
.coupon-offers li{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:5px;background:var(--cream)}
.coupon-offers strong{display:block;font-size:13px;letter-spacing:.04em}
.coupon-offers small{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.coupon-offers .text-button{padding:0;color:var(--green);font-weight:600}
.payment-choice+.payment-choice{margin-top:10px}
.payment-choice:has(input:not(:checked)){border-color:var(--line);background:var(--paper)}
.commerce-payment .form-card h1{font-size:30px;margin-bottom:14px}
.commerce-payment .form-card>p{margin-bottom:18px}
.commerce-payment .summary-row small{display:block;color:var(--muted)}
.payment-ways{display:flex;flex-wrap:wrap;gap:10px}
.payment-ways .button{margin:0}
.upi-qr{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:start;margin:0 0 16px;padding:18px;border:1px solid var(--line);border-radius:8px;background:var(--cream)}
.upi-qr img{display:block;width:220px;height:220px;max-width:100%;padding:6px;border:1px solid var(--line);border-radius:6px;background:#fff;transition:opacity .2s}
.upi-qr.is-expired img{opacity:.2}
.upi-qr h2{font-size:18px;margin:0 0 8px}
.upi-qr ol{margin:0 0 12px;padding-left:18px;font-size:14px;line-height:1.6;color:var(--muted)}
.upi-qr .button{margin:0 0 10px}
.upi-qr-status{display:flex;align-items:center;gap:8px;margin:0 0 10px;font-size:14px;font-weight:500;color:var(--green-dark)}
.upi-qr-status::before{content:"";flex-shrink:0;width:8px;height:8px;border-radius:50%;background:var(--green);animation:upi-qr-wait 1.4s ease-in-out infinite}
.upi-qr-status.error{color:var(--danger)}
.upi-qr-status.error::before{background:var(--danger);animation:none}
@keyframes upi-qr-wait{50%{opacity:.25}}
@media (prefers-reduced-motion:reduce){.upi-qr-status::before{animation:none}}
.upi-checkout .upi-title{font-size:28px;margin-bottom:14px}
.upi-checkout>p{margin-bottom:18px}
.upi-id{margin:0 0 10px;font-size:14px;color:var(--muted)}
.upi-id strong{margin-left:4px;color:var(--ink);word-break:break-all}
.upi-proof{margin:2px 0 0;padding-top:18px;border-top:1px solid var(--line)}
.upi-proof h2{font-size:18px;margin:0 0 12px}
.upi-proof label small{display:block;margin-top:4px;font-size:12px;color:var(--muted)}
.upi-proof .form-result{margin:-4px 0 12px}
/* The UPI app link is for phones; a desktop scans the code instead. */
@media (hover:hover) and (pointer:fine){.upi-qr .upi-qr-app{display:none}}
@media (max-width:700px){.coupon-form input{font-size:16px}.commerce-payment .form-card h1{font-size:24px}.upi-qr{grid-template-columns:1fr;justify-items:center;text-align:center}.upi-qr ol{text-align:left}.upi-qr-status{justify-content:center}.payment-ways .button{width:100%}}