/* ==========================================================================
   COMPONENTS — Buttons, cards, badges, forms, and UI elements
   ========================================================================== */

/* ---- BUTTONS ---- */
.cuc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--cuc-space-2);
    padding: var(--cuc-space-3) var(--cuc-space-8);
    font-family: var(--cuc-font-body);
    font-size: var(--cuc-text-base);
    font-weight: var(--cuc-weight-semibold);
    line-height: 1;
    border-radius: var(--cuc-radius-full);
    border: 2px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: all var(--cuc-transition-base);
    white-space: nowrap;
}

.cuc-btn--primary {
    background: var(--cuc-green-primary);
    color: var(--cuc-text-light);
    border-color: var(--cuc-green-primary);
    box-shadow: 0 4px 15px rgba(74, 140, 63, 0.35);
}
.cuc-btn--primary:hover {
    background: var(--cuc-green-dark);
    border-color: var(--cuc-green-dark);
    color: var(--cuc-text-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(74, 140, 63, 0.45);
}

.cuc-btn--secondary {
    background: transparent;
    color: var(--cuc-green-primary);
    border-color: var(--cuc-green-primary);
}
.cuc-btn--secondary:hover {
    background: var(--cuc-green-primary);
    color: var(--cuc-text-light);
    transform: translateY(-2px);
}

.cuc-btn--emergency {
    background: var(--cuc-red-emergency);
    color: var(--cuc-text-light);
    border-color: var(--cuc-red-emergency);
    box-shadow: 0 4px 15px rgba(198, 40, 40, 0.35);
}
.cuc-btn--emergency:hover {
    background: #B71C1C;
    border-color: #B71C1C;
    color: var(--cuc-text-light);
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(198, 40, 40, 0.45);
}

.cuc-btn--light {
    background: rgba(255,255,255,0.15);
    color: var(--cuc-text-light);
    border-color: rgba(255,255,255,0.4);
    backdrop-filter: blur(8px);
}
.cuc-btn--light:hover {
    background: rgba(255,255,255,0.25);
    color: var(--cuc-text-light);
    transform: translateY(-2px);
}

.cuc-btn--lg { padding: var(--cuc-space-4) var(--cuc-space-10); font-size: var(--cuc-text-lg); }
.cuc-btn--sm { padding: var(--cuc-space-2) var(--cuc-space-5); font-size: var(--cuc-text-sm); }

/* ---- BADGES ---- */
.cuc-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--cuc-space-1);
    padding: var(--cuc-space-1) var(--cuc-space-3);
    border-radius: var(--cuc-radius-full);
    font-size: var(--cuc-text-xs);
    font-weight: var(--cuc-weight-bold);
    text-transform: uppercase;
    letter-spacing: 0.08em;
}
.cuc-badge--emergency {
    background: var(--cuc-red-emergency);
    color: var(--cuc-text-light);
    animation: badgePulse 2s ease-in-out infinite;
}
.cuc-badge--green { background: var(--cuc-green-xlight); color: var(--cuc-green-dark); }
.cuc-badge--dot::before {
    content: '';
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: currentColor;
}

/* ---- CARDS ---- */
.cuc-card {
    background: var(--cuc-surface);
    border: 1px solid var(--cuc-border-light);
    border-radius: var(--cuc-radius-lg);
    overflow: hidden;
    transition: transform var(--cuc-transition-base), box-shadow var(--cuc-transition-base);
}
.cuc-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--cuc-shadow-xl);
}
.cuc-card__img { width: 100%; aspect-ratio: 3/2; object-fit: cover; }
.cuc-card__body { padding: var(--cuc-space-6); }
.cuc-card__icon {
    width: 56px;
    height: 56px;
    border-radius: var(--cuc-radius-md);
    background: var(--cuc-green-xlight);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--cuc-space-4);
    font-size: 1.75rem;
}
.cuc-card__title { font-size: var(--cuc-text-xl); margin-bottom: var(--cuc-space-2); }
.cuc-card__text  { font-size: var(--cuc-text-sm); color: var(--cuc-text-secondary); line-height: 1.6; margin-bottom: 0; }

/* ---- FORMS ---- */
.cuc-form-group { margin-bottom: var(--cuc-space-5); }
.cuc-form-label {
    display: block;
    font-size: var(--cuc-text-sm);
    font-weight: var(--cuc-weight-semibold);
    color: var(--cuc-text-primary);
    margin-bottom: var(--cuc-space-2);
}
.cuc-form-input,
.cuc-form-textarea,
.cuc-form-select {
    width: 100%;
    padding: var(--cuc-space-3) var(--cuc-space-4);
    background: var(--cuc-surface);
    border: 1.5px solid var(--cuc-border);
    border-radius: var(--cuc-radius-md);
    font-size: var(--cuc-text-base);
    color: var(--cuc-text-primary);
    transition: border-color var(--cuc-transition-fast), box-shadow var(--cuc-transition-fast);
    outline: none;
}
.cuc-form-input:focus,
.cuc-form-textarea:focus,
.cuc-form-select:focus {
    border-color: var(--cuc-green-primary);
    box-shadow: 0 0 0 3px rgba(74, 140, 63, 0.15);
}
.cuc-form-textarea { resize: vertical; min-height: 120px; }

/* ---- STAT ITEM ---- */
.cuc-stat { text-align: center; }
.cuc-stat__number {
    display: block;
    font-family: var(--cuc-font-heading);
    font-size: var(--cuc-text-5xl);
    font-weight: var(--cuc-weight-bold);
    color: var(--cuc-green-primary);
    line-height: 1;
}
.cuc-stat__label {
    font-size: var(--cuc-text-sm);
    color: var(--cuc-text-secondary);
    font-weight: var(--cuc-weight-medium);
    margin-top: var(--cuc-space-2);
}

/* ---- DIVIDER ---- */
.cuc-divider {
    width: 60px;
    height: 4px;
    background: linear-gradient(90deg, var(--cuc-green-primary), var(--cuc-green-light));
    border-radius: var(--cuc-radius-full);
    margin: var(--cuc-space-4) auto;
}
.cuc-divider--left { margin-left: 0; }