/* Theme-adaptive variables */
:root {
    --cls-accent: #2d2d2d;
    --cls-accent-bg: rgba(45,45,45,0.06);
    --cls-accent-border: rgba(45,45,45,0.2);
    --cls-accent-light: rgba(45,45,45,0.12);
}

/**
 * CLS Tools Shop Manager — My Account "Quotas" Tab
 * Neutral warm palette + teal accent
 * © 2026 Codélior Studio
 */
.cls-mq-wrap { margin-top: 10px; font-family: inherit; }
.cls-mq-empty { padding: 40px; text-align: center; color: #9a9a9a; background: #f7f7f5; border-radius: 10px; }

/* Summary */
.cls-mq-summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; }
.cls-mq-stat { background: #fff; border: 1px solid #e8e7e4; border-radius: 10px; padding: 16px; text-align: center; box-shadow: 0 1px 3px rgba(0,0,0,.04); }
.cls-mq-stat:nth-child(1) { border-top: 3px solid var(--cls-accent, #0d9488); }
.cls-mq-stat:nth-child(2) { border-top: 3px solid #16a34a; }
.cls-mq-stat:nth-child(3) { border-top: 3px solid #dc2626; }
.cls-mq-stat-val { display: block; font-size: 28px; font-weight: 700; color: #1a1a1a; line-height: 1; letter-spacing: -.02em; }
.cls-mq-stat-label { display: block; font-size: 12px; color: #9a9a9a; margin-top: 4px; }

/* Grid */
.cls-mq-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }

/* Card */
.cls-mq-card { background: #fff; border-radius: 14px; border: 1px solid #e8e7e4; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,.04); transition: box-shadow .15s; }
.cls-mq-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.cls-mq-card-full { border-color: #fecaca; }
.cls-mq-card-high { border-color: #fde68a; }

/* Top line */
.cls-mq-card-bar { height: 2px; }
.cls-mq-card-bar:not(.full):not(.high) { background: linear-gradient(90deg, var(--cls-accent, #0d9488), var(--cls-accent, #0f766e)); }
.cls-mq-card-bar.full { background: linear-gradient(90deg, #dc2626, #b91c1c); }
.cls-mq-card-bar.high { background: linear-gradient(90deg, #d97706, #b45309); }

.cls-mq-card-body { padding: 16px; }

/* Header */
.cls-mq-card-header { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.cls-mq-card-img { width: 42px; height: 42px; border-radius: 10px; background: #f2f1ee; display: flex; align-items: center; justify-content: center; overflow: hidden; flex-shrink: 0; margin-right: 10px; }
.cls-mq-card-img img { width: 100%; height: 100%; object-fit: cover; }
.cls-mq-card-placeholder { font-size: 20px; }
.cls-mq-card-info { flex: 1; }
.cls-mq-card-name { font-size: 14px; font-weight: 600; color: #1a1a1a; line-height: 1.3; letter-spacing: -.01em; }
.cls-mq-card-price { font-size: 12px; color: #9a9a9a; margin-top: 2px; }
.cls-mq-card-badge { flex-shrink: 0; }

/* Badges */
.cls-mq-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 600; letter-spacing: .01em; }
.cls-mq-badge.success { background: #f0fdf4; color: #16a34a; border: 1px solid #bbf7d0; }
.cls-mq-badge.warning { background: #fffbeb; color: #d97706; border: 1px solid #fde68a; }
.cls-mq-badge.danger { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }

/* Progress */
.cls-mq-progress { margin-bottom: 10px; }
.cls-mq-progress-bar { height: 6px; background: #f0efec; border-radius: 99px; overflow: hidden; }
.cls-mq-card-full .cls-mq-progress-bar { background: #fee2e2; }
.cls-mq-card-high .cls-mq-progress-bar { background: #fef3c7; }
.cls-mq-progress-fill { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--cls-accent, #0d9488), var(--cls-accent, #0f766e)); transition: width .5s; }
.cls-mq-progress-fill.full { background: linear-gradient(90deg, #dc2626, #b91c1c); }
.cls-mq-progress-fill.high { background: linear-gradient(90deg, #d97706, #b45309); }
.cls-mq-progress-labels { display: flex; justify-content: space-between; font-size: 11px; color: #9a9a9a; margin-top: 4px; font-weight: 500; }

/* Dates */
.cls-mq-card-dates { display: flex; justify-content: center; align-items: center; padding: 8px 10px; background: #f2f1ee; border-radius: 6px; font-size: 11px; color: #6b6b6b; margin-bottom: 12px; }
.cls-mq-card-dates.full { background: #fef2f2; color: #dc2626; }
.cls-mq-card-reset { font-weight: 600; color: #1a1a1a; }
.cls-mq-card-dates.full .cls-mq-card-reset { color: #dc2626; }

/* Actions */
.cls-mq-card-action { display: block; width: 100%; padding: 9px; border-radius: 6px; font-size: 13px; font-weight: 600; text-align: center; box-sizing: border-box; text-decoration: none; letter-spacing: .01em; }
.cls-mq-card-action-full { background: #fef2f2; color: #dc2626; border: 1px solid #fecaca; }
.cls-mq-card-action-buy {
    background: var(--cls-accent, #0d9488);
    color: #fff !important;
    border: 1.5px solid var(--cls-accent, #0d9488);
    cursor: pointer;
    position: relative;
    overflow: hidden;
    transition: transform .2s, box-shadow .2s;
}
.cls-mq-card-action-buy:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}
.cls-mq-card-action-buy:active { transform: translateY(0); }
.cls-mq-card-action-buy::after {
    content: '';
    position: absolute;
    top: 50%; left: 50%;
    width: 0; height: 0;
    background: rgba(255,255,255,.2);
    border-radius: 50%;
    transform: translate(-50%,-50%);
    transition: width .4s, height .4s;
}
.cls-mq-card-action-buy:hover::after { width: 200px; height: 200px; }

/* Footer */
.cls-mq-footer { margin-top: 24px; font-size: 11px; color: #9a9a9a; text-align: center; }

@media (max-width: 600px) {
    .cls-mq-summary { flex-direction: column; }
    .cls-mq-grid { grid-template-columns: 1fr; }
}

/* Accent-adaptive elements */
.cls-mq-stat:nth-child(1) { border-top-color: var(--cls-accent, #0d9488); }
.cls-mq-badge.success { background: var(--cls-accent-bg, #f0fdf4); color: var(--cls-accent, #16a34a); border-color: var(--cls-accent-border, #bbf7d0); }

/* Card hover animation */
.cls-mq-card { transition: transform .2s, box-shadow .2s; }
.cls-mq-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.08); }

/* Progress bar animation */
.cls-mq-progress-fill { animation: cls-bar-fill .8s ease-out; }
@keyframes cls-bar-fill { from { width: 0; } }

/* Intro text styling */
.cls-mq-intro { padding: 14px 18px; background: #fafaf8; border: 1px solid #e8e7e4; border-left: 3px solid var(--cls-accent, #0d9488); border-radius: 6px; margin-bottom: 20px; font-size: 14px; color: #1a1a1a; }

/* ═══ FAMILY QUOTA (theme-adaptive, same as quantity) ═══ */
.cls-mq-card-family { border-color: var(--cls-accent-border, #e8e7e4); }
.cls-mq-card-bar.family { background: linear-gradient(90deg, var(--cls-accent, #0d9488), var(--cls-accent, #0f766e)); }
.cls-mq-card-family .cls-mq-progress-bar { background: #f0efec; }
.cls-mq-progress-fill.family { background: linear-gradient(90deg, var(--cls-accent, #0d9488), var(--cls-accent, #0f766e)); }
.cls-mq-badge.family { background: var(--cls-accent-bg, #f0fdf4); color: var(--cls-accent, #0d9488); border: 1px solid var(--cls-accent-border, #bbf7d0); }
.cls-mq-card-dates.family { background: #f2f1ee; color: #6b6b6b; }
.cls-mq-card-dates.family .cls-mq-card-reset { color: #1a1a1a; }
.cls-mq-card-action-family {
    background: var(--cls-accent, #0d9488);
    color: #fff !important;
    border: 1.5px solid var(--cls-accent, #0d9488);
    cursor: pointer;
    transition: transform .2s, box-shadow .2s;
}
.cls-mq-card-action-family:hover {
    color: #fff;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0,0,0,.15);
}