:root { --rayo-red: #E30613; --rayo-red-dark: #B8040F; --rayo-black: #121212; }

.rayo-quick { margin-top: 10px; }
.rayo-quick__sizes { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
.rayo-quick__size { min-width: 34px; height: 30px; padding: 0 8px; border: 1px solid #d1d5db; border-radius: .5rem; background: #fff; color: #111827; font-size: 12px; font-weight: 700; cursor: pointer; transition: all .15s; }
.rayo-quick__size:hover:not(:disabled) { border-color: var(--rayo-black); }
.rayo-quick__size.is-active { background: var(--rayo-black); border-color: var(--rayo-black); color: #fff; }
.rayo-quick__size:disabled { opacity: .4; text-decoration: line-through; cursor: not-allowed; }
.rayo-quick.is-shake .rayo-quick__sizes { animation: rayoShake .4s; }
@keyframes rayoShake { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } }
.rayo-quick.is-shake .rayo-quick__size:not(:disabled) { border-color: var(--rayo-red); }

.rayo-quick__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 10px; border: 0; border-radius: .75rem; background: var(--rayo-red); color: #fff; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; transition: background .2s; }
.rayo-quick__btn:hover { background: var(--rayo-red-dark); color: #fff; }
.rayo-quick__btn--view { background: var(--rayo-black); }
.rayo-quick__btn--view:hover { background: #374151; }
.rayo-quick__btn.is-loading { opacity: .7; pointer-events: none; }
.rayo-quick__btn.is-done { background: #16a34a; }
.rayo-quick__msg { margin: 8px 0 0; font-size: 12px; color: var(--rayo-red); }