/* =====================================================================
   PROMOTIONS — card grid + POS coupon input
   ===================================================================== */

.promo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
    gap: 14px;
    margin-top: 14px;
}

.promo-card {
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 18px;
    padding: 18px;
    position: relative;
    overflow: hidden;
    transition: .2s;
    --accent: #6c5ce7;
    display: flex; flex-direction: column;
}
.promo-card::before {
    content: ""; position: absolute;
    top: 0; left: 0; right: 0;
    height: 5px;
    background: var(--accent);
}
.promo-card.live { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 25%, transparent); }
.promo-card:hover { transform: translateY(-3px); box-shadow: 0 16px 30px rgba(0,0,0,.10); }

.promo-top {
    display: flex; align-items: center; gap: 8px;
    margin-bottom: 12px;
}
.promo-status {
    font-size: 11px; font-weight: 800;
    padding: 3px 10px;
    border-radius: 999px;
}
.promo-status.on        { background: var(--c-green-soft); color: var(--c-green); }
.promo-status.scheduled { background: #dbeafe;             color: #0EA5E9; }
.promo-status.expired   { background: var(--c-red-soft);   color: var(--c-red); }
.promo-status.exhausted { background: #fef3c7;             color: #d97706; }
.promo-status.off       { background: #f3f4f6;             color: var(--c-text-muted); }

.promo-code {
    margin-inline-start: auto;
    font-family: monospace; font-weight: 800; font-size: 13px;
    background: var(--accent);
    color: #fff;
    padding: 4px 12px;
    border-radius: 8px;
    letter-spacing: 1px;
    direction: ltr;
    box-shadow: 0 4px 10px color-mix(in srgb, var(--accent) 35%, transparent);
}
.promo-auto {
    margin-inline-start: auto;
    display: inline-flex; align-items: center; gap: 4px;
    background: rgba(108,92,231,.10); color: var(--c-primary);
    padding: 4px 10px; border-radius: 8px;
    font-size: 11.5px; font-weight: 800;
}
.promo-auto .material-symbols-rounded { font-size: 14px; }

.promo-body { flex: 1; }
.promo-name { margin: 4px 0 6px; font-size: 16px; font-weight: 800; color: var(--c-text); }
.promo-desc { margin: 0 0 12px; font-size: 12.5px; color: var(--c-text-muted); line-height: 1.5; }

.promo-value-block {
    text-align: center;
    background: color-mix(in srgb, var(--accent) 7%, transparent);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}
.pv-big { display: inline-flex; align-items: baseline; gap: 4px; color: var(--accent); direction: ltr; }
.pv-num { font-size: 36px; font-weight: 800; line-height: 1; }
.pv-unit { font-size: 16px; font-weight: 800; }
.pv-type { color: var(--c-text-muted); font-size: 11px; margin-top: 4px; font-weight: 700; }

.promo-cond {
    display: flex; align-items: center; gap: 8px;
    padding: 4px 0;
    font-size: 12.5px; color: var(--c-text-muted);
}
.promo-cond b { color: var(--c-text); margin-inline-start: 2px; }
.promo-cond .material-symbols-rounded { font-size: 14px; color: var(--accent); }

.promo-usage {
    margin-top: 10px;
    padding: 8px;
    background: rgba(0,0,0,.02);
    border-radius: 8px;
}
.pu-label {
    display: flex; justify-content: space-between;
    font-size: 11.5px; color: var(--c-text-muted); font-weight: 700;
    margin-bottom: 4px;
}
.pu-bar {
    height: 6px;
    background: #f3f4f6;
    border-radius: 999px;
    overflow: hidden;
}
.pu-fill { height: 100%; border-radius: 999px; transition: width .3s; }

.promo-actions {
    display: flex; gap: 6px;
    padding-top: 10px;
    margin-top: 12px;
    border-top: 1px dashed var(--c-border);
}
.promo-actions .btn.sm { padding: 7px 12px; font-size: 12.5px; flex: 1; }
.promo-actions .btn.sm.primary { color: #fff; }
.promo-actions .btn.sm.danger {
    flex: 0 0 auto;
    color: var(--c-red); border-color: #fecaca;
}
.promo-actions .btn.sm.danger:hover { background: var(--c-red-soft); }

/* =================== POS Coupon Input =================== */
.pos-coupon-row {
    display: flex; align-items: center; gap: 8px;
    padding: 10px 14px;
    margin-top: 10px;
    background: rgba(245,158,11,.05);
    border: 1px dashed rgba(245,158,11,.30);
    border-radius: 12px;
}
.pcoup-input {
    flex: 1;
    display: flex; align-items: center; gap: 8px;
    background: var(--c-surface);
    border: 1px solid var(--c-border);
    border-radius: 8px;
    padding: 6px 12px;
    height: 36px;
}
.pcoup-input .material-symbols-rounded { color: #F59E0B; font-size: 18px; }
.pcoup-input input {
    flex: 1; border: 0; background: transparent; outline: none;
    font-family: monospace; font-size: 13px; font-weight: 700;
    text-transform: uppercase;
}
.pcoup-input input:disabled { color: var(--c-green); }

.pcoup-btn {
    border: 0; border-radius: 8px;
    padding: 8px 14px;
    font-family: inherit; font-weight: 800; font-size: 12.5px;
    display: inline-flex; align-items: center; gap: 4px;
    cursor: pointer;
    transition: .15s;
}
.pcoup-btn.apply { background: #F59E0B; color: #fff; }
.pcoup-btn.apply:hover:not(:disabled) { background: #D97706; }
.pcoup-btn.apply:disabled { opacity: .5; cursor: not-allowed; }
.pcoup-btn.remove { background: transparent; color: var(--c-red); }
.pcoup-btn.remove:hover { background: var(--c-red-soft); }
.pcoup-btn .material-symbols-rounded { font-size: 16px; }

.pos-coupon-msg {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 12px;
    margin-top: 4px;
    border-radius: 8px;
    font-size: 12.5px; font-weight: 700;
}
.pos-coupon-msg.ok { background: var(--c-green-soft); color: var(--c-green); }
.pos-coupon-msg.err { background: var(--c-red-soft); color: var(--c-red); }
.pos-coupon-msg .material-symbols-rounded { font-size: 16px; }