/* ---------- Programme Fee discount: pay card, payment window, login banner ---------- */

/* pay card */
.pay-card-offer { box-shadow: 0 0 0 2px rgba(253, 230, 138, .55), 0 26px 50px -18px rgba(14, 116, 144, .85); }
.pay-ribbon.of-ribbon { background: linear-gradient(135deg, #f43f5e, #f59e0b); color: #fff; font-size: .78rem; padding: 6px 12px; box-shadow: 0 8px 18px -6px rgba(244, 63, 94, .8); animation: ofPulse 2.2s ease-in-out infinite; }
@keyframes ofPulse { 50% { transform: scale(1.07); } }
.of-was { display: block; font-size: 1.15rem; font-weight: 700; color: rgba(255, 255, 255, .7); text-decoration: line-through; text-decoration-color: #fda4af; text-decoration-thickness: 2px; margin-bottom: -4px; }
.of-save { display: inline-flex; gap: 7px; align-items: center; margin-top: 8px; padding: 6px 14px; border-radius: 99px; background: #fde68a; color: #7c2d12; font-size: .84rem; font-weight: 800; }
.of-seats { margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: rgba(15, 23, 42, .28); border: 1px solid rgba(255, 255, 255, .22); text-align: left; }
.of-seats-top { font-size: .86rem; font-weight: 800; color: #fff; margin-bottom: 8px; }
.of-seats-top i { color: #fdba74; margin-right: 5px; }
.of-meter { height: 9px; border-radius: 99px; background: rgba(255, 255, 255, .25); overflow: hidden; }
.of-meter i { display: block; height: 100%; border-radius: 99px; background: linear-gradient(90deg, #fde68a, #fb923c, #f43f5e); }
.of-seats small { display: block; margin-top: 8px; font-size: .76rem; line-height: 1.4; color: rgba(255, 255, 255, .85); }
.pay-card-locked .pay-ribbon.of-ribbon { animation: none; }
table.tx .of-tag { display: block; margin-top: 2px; font-size: .7rem; font-weight: 800; color: #b45309; }

/* payment window */
.pm-notice { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; background: #fef3c7; border: 1px solid #fde68a; color: #92400e; font-size: .86rem; font-weight: 600; text-align: left; }
.pm-was { font-size: 1.15rem; font-weight: 700; color: #94a3b8; text-decoration: line-through; text-decoration-color: #f43f5e; margin-bottom: -4px; }
.pm-save { display: inline-flex; gap: 7px; align-items: center; margin: -6px 0 14px; padding: 6px 14px; border-radius: 99px; background: #dcfce7; color: #166534; font-size: .84rem; font-weight: 800; }
.pm-rows .pm-disc strong { color: #059669; }

/* login page banner */
.offer-box { position: relative; overflow: hidden; margin: 0 0 18px; padding: 16px 16px 14px; border-radius: 18px; color: #fff; text-align: left;
    background: linear-gradient(135deg, #1e1b4b 0%, #4f46e5 55%, #7c3aed 100%); box-shadow: 0 18px 34px -16px rgba(79, 70, 229, .8); }
.offer-box::before { content: ''; position: absolute; width: 180px; height: 180px; right: -60px; top: -80px; border-radius: 50%; background: radial-gradient(circle, rgba(252, 211, 77, .4), transparent 70%); pointer-events: none; }
.offer-box > * { position: relative; }
.offer-head { display: flex; gap: 14px; align-items: center; }
.offer-burst { flex: none; width: 74px; height: 74px; border-radius: 50%; display: grid; place-content: center; text-align: center; line-height: 1;
    background: linear-gradient(135deg, #fde68a, #f59e0b); color: #7c2d12; font-weight: 800; font-size: 1.45rem; box-shadow: 0 0 0 5px rgba(253, 230, 138, .25); animation: ofPulse 2.2s ease-in-out infinite; }
.offer-burst small { display: block; font-size: .68rem; letter-spacing: 1.5px; margin-top: 2px; }
.offer-kicker { display: block; font-size: .68rem; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: #fde68a; }
.offer-title { display: block; font-size: 1.02rem; font-weight: 800; line-height: 1.25; margin: 2px 0 4px; }
.offer-price { font-size: .95rem; }
.offer-price s { color: #c7d2fe; }
.offer-price b { font-size: 1.3rem; font-weight: 800; color: #fde68a; margin: 0 4px; }
.offer-box .of-seats { background: rgba(15, 23, 42, .3); margin-top: 12px; }
.offer-steps { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.offer-step { padding: 4px 10px; border-radius: 99px; font-size: .72rem; font-weight: 700; background: rgba(255, 255, 255, .14); color: #e0e7ff; }
.offer-step.on { background: #fde68a; color: #7c2d12; }
.offer-step.done { text-decoration: line-through; opacity: .6; }

@media (prefers-reduced-motion: reduce) { .pay-ribbon.of-ribbon, .offer-burst { animation: none; } }