.motorsingle-coupon-promotion { position: fixed; z-index: 9990; inset: 88px 12px auto; max-height: 35dvh; overflow-y: auto; overscroll-behavior: contain; box-sizing: border-box; padding: 12px 16px; border: 1px solid #163b52; border-radius: 16px; color: #163b52; background: #fffdf8; box-shadow: 0 12px 36px #0002; font: 14px/1.4 Arial, sans-serif; }
.motorsingle-coupon-heading, .motorsingle-coupon-code-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.motorsingle-coupon-heading > button { font: 26px/1 Arial, sans-serif; min-width: 44px; min-height: 44px; padding: 0; border: 0; color: inherit; background: transparent; cursor: pointer; }
.motorsingle-coupon-item + .motorsingle-coupon-item { margin-top: 12px; padding-top: 12px; border-top: 1px solid #163b5226; }
.motorsingle-coupon-code-row { margin-block: 6px; }
.motorsingle-coupon-code-row code { color: inherit; background: transparent; font-size: 16px; font-weight: 700; overflow-wrap: anywhere; }
.motorsingle-coupon-code-row a { display: inline-flex; align-items: center; min-height: 44px; flex-shrink: 0; padding: 10px 14px; border-radius: 8px; color: #fff; background: #163b52; font: inherit; text-decoration: none; }
.motorsingle-coupon-promotion summary { min-height: 32px; cursor: pointer; }
.motorsingle-coupon-promotion details p, .motorsingle-coupon-message { margin-block: 6px 0; font-size: 12px; }
.motorsingle-coupon-promotion :is(button, a, summary):focus-visible { outline: 3px solid currentColor; outline-offset: 3px; }
body:has(dialog[open], [aria-modal="true"], input:focus, select:focus, textarea:focus) .motorsingle-coupon-promotion { visibility: hidden; }
@media (min-width: 768px) { .motorsingle-coupon-promotion { inset: auto auto 24px 24px; width: 360px; max-width: calc(100vw - 48px); max-height: 50dvh; } }