/* Hallmark · component-only · existing Norel gold theme · no macrostructure changes.
   States: default, hover, focus, active, disabled, loading, error, success. */
/* Hallmark · pre-emit critique: P4 H4 E4 S5 R5 V3 · scoped contrast/mobile: pass.
   Genre: modern-minimal; tone: warm restrained; anchor: dark gold; existing Cairo.
   Explicit user-requested success toast; page/nav/footer deliberately untouched. */
#checkoutOverlay .checkout-coupon { margin-block: 18px 0; min-width: 0; font-size: 14px; }
#checkoutOverlay .checkout-coupon label { display: block; margin-bottom: 8px; color: var(--checkout-ink); font-weight: 700; }
#checkoutOverlay .coupon-input-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; }
#checkoutOverlay #couponCode { min-width: 0; width: 100%; min-height: 46px; box-sizing: border-box; padding: 10px 12px; border: 1px solid var(--checkout-muted); border-radius: 12px; background: var(--checkout-input); color: var(--checkout-ink); font: inherit; }
#checkoutOverlay #couponCode::placeholder { color: var(--checkout-muted); }
#checkoutOverlay #couponCode[aria-invalid="true"] { border-color: var(--coupon-error); }
#checkoutOverlay .coupon-input-row button { min-width: 80px; min-height: 46px; padding: 8px 12px; border: 0; border-radius: 12px; font: inherit; font-weight: 700; color: var(--checkout-on-accent); background: var(--checkout-accent); cursor: pointer; white-space: nowrap; transition: background-color 180ms var(--coupon-ease); }
#checkoutOverlay .coupon-input-row button:active { transform: translateY(1px); }
#checkoutOverlay .coupon-input-row button:disabled { cursor: default; background: var(--checkout-selected); color: var(--checkout-muted); }
#checkoutOverlay .coupon-feedback { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 48px; }
#checkoutOverlay #couponStatus { font-size: 14px; line-height: 1.5; color: var(--checkout-muted); overflow-wrap: anywhere; }
#checkoutOverlay #removeCoupon { padding: 0 4px; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--checkout-ink); font: inherit; cursor: pointer; text-decoration: underline; white-space: nowrap; }
#checkoutOverlay #couponDiscountRow { color: var(--coupon-good); font-variant-numeric: tabular-nums; gap: 8px; }
#checkoutOverlay #couponDiscountLabel { overflow-wrap: anywhere; }
#checkoutOverlay #couponDiscount { white-space: nowrap; color: inherit; font-variant-numeric: tabular-nums; }
#checkoutOverlay #couponDiscountRow[hidden], #checkoutOverlay #removeCoupon[hidden], .norel-coupon-notice[hidden] { display: none !important; }
#checkoutOverlay .checkout-coupon :focus-visible, .norel-coupon-notice button:focus-visible { outline: 2px solid var(--coupon-accent); outline-offset: 3px; }
.norel-coupon-notice { position: fixed; top: max(18px, env(safe-area-inset-top)); right: max(18px, env(safe-area-inset-right)); z-index: var(--coupon-toast-layer); display: flex; align-items: center; gap: 8px; width: max-content; max-width: min(370px, calc(100% - 36px)); box-sizing: border-box; min-height: 56px; padding: 6px 14px 6px 6px; border: 0; border-radius: 16px; background: var(--coupon-paper); color: var(--coupon-ink); font: inherit; font-size: 14px; line-height: 1.6; animation: coupon-notice-in 400ms var(--coupon-ease); }
.norel-coupon-notice span { overflow-wrap: anywhere; }
.norel-coupon-notice button { flex: 0 0 44px; width: 44px; height: 44px; border: 0; border-radius: 10px; color: inherit; background: transparent; font: inherit; font-size: 22px; cursor: pointer; }
@media (hover: hover) { #checkoutOverlay .coupon-input-row button:not(:disabled):hover { background: var(--checkout-muted); } .norel-coupon-notice button:hover { color: var(--coupon-accent); } }
@keyframes coupon-notice-in { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } }
@media (prefers-reduced-motion: reduce) { .norel-coupon-notice { animation: none; } #checkoutOverlay .coupon-input-row button { transition: none; transform: none; } }