/* Onam quick play: a cream kasavu sheet; the quantities are cream petals
   with a gold rim (the chosen one marigold, a white flower lit at its
   corner) and each ticket row is a slip with a garland of dots down its
   edge. */
@import url("../../../lottery/modal-quick-play.css");
@import url("../_balls.css");

.qp-panel { position: relative; overflow: hidden; background: var(--paper-2); border-radius: 16px; }
.qp-panel::after { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 10px; background: var(--onm-kasavu-top); pointer-events: none; }
.btn-tactile-qp { box-shadow: var(--btn-shadow); border-radius: 12px; transition: transform .12s ease, box-shadow .12s ease; }
.btn-tactile-qp:hover { box-shadow: var(--btn-shadow-hover); }
.btn-tactile-qp:active { transform: translateY(3px); box-shadow: var(--btn-hem); }
.qp-qty-btn { position: relative; overflow: hidden; border-radius: 14px; background: var(--paper-2); color: var(--ink); border: 0 !important; box-shadow: inset 0 0 0 1.5px var(--onm-gold), 0 3px 0 var(--onm-gold-deep); transition: transform .12s ease, box-shadow .12s ease, background .15s ease; }
.qp-qty-btn::before { content: ''; position: absolute; left: 7px; top: 6px; width: 10px; height: 10px; border-radius: 50%; background: radial-gradient(circle, var(--onm-gold) 0 30%, transparent 34%), radial-gradient(circle, var(--paper-3) 0 70%, transparent 72%); }
[dir="rtl"] .qp-qty-btn::before { left: auto; right: 7px; }
.qp-qty-btn:hover { transform: translateY(-1px); }
.qp-qty-btn:active { transform: translateY(3px); box-shadow: inset 0 0 0 1.5px var(--onm-gold); }
.qp-qty-btn.is-chosen { background: #fde68a; box-shadow: inset 0 0 0 2px #d97706, 0 3px 0 #a5821a, 0 0 18px rgba(245, 158, 11, .45); }
html.dark .qp-qty-btn.is-chosen { background: #fbbf24; }
.qp-qty-btn.is-chosen::before { background: radial-gradient(circle, #ea580c 0 30%, #fffdf6 34% 70%, transparent 72%); }
.qp-qty-btn, .qp-qty-btn * { color: var(--ink) !important; }
.qp-qty-btn.is-chosen, .qp-qty-btn.is-chosen * { color: #2b2312 !important; }
.qp-qty-btn:not(.is-chosen) > .qp-qty-price { color: var(--ink-soft) !important; }
.qp-qty-price { white-space: normal; overflow: visible; text-overflow: clip; font-family: var(--font-num); }
.qp-header-rule { border-bottom: 1px solid var(--rule); }
.qp-footer-rule { border-top: 1px solid var(--rule); }
.qp-tickets-wrap { border-radius: 14px; background: var(--paper-3); }
.qp-ticket-row { position: relative; overflow: hidden; border-radius: 12px; padding-inline-end: 20px; background: var(--paper-2); border: 1px solid var(--rule); }
.qp-ticket-row::after { content: ''; position: absolute; inset-inline-end: 6px; top: 6px; bottom: 6px; width: 6px; background: radial-gradient(circle, var(--onm-mari) 0 2.4px, transparent 2.8px) 0 0 / 6px 8px repeat-y; }
.qp-icon-btn { border-radius: 12px; }
.qp-icon-btn:hover { color: var(--ink); border-color: var(--onm-gold); }
.qp-edit-input { border-radius: 12px; font-family: var(--font-num); }