/* components.css — shared component library (PLN-021 Phase 2) */

/* ── GROUP 1: Global heading scale ───────────────────────────── */
h1 { font-size: var(--h1-size); }
h2 { font-size: var(--h2-size); }
h3 { font-size: var(--h3-size); }

/* ── GROUP 2: .btn-primary (maroon gradient — buy/pay/submit) ── */
.btn-primary {
    display: inline-block;
    padding: 1rem 3rem;
    font-size: 1.25rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to bottom, var(--btn-primary-from), var(--btn-primary-to));
    border: 1px solid var(--btn-primary-border);
    border-bottom: 3px solid var(--btn-primary-border-bottom);
    border-radius: var(--radius-lg);
    cursor: pointer;
    box-shadow: var(--shadow-btn);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
    text-align: center;
}
.btn-primary:hover {
    background: linear-gradient(to bottom, #b03838, #901010);
    border-color: #700;
    border-bottom-color: #500;
    box-shadow: 0 3px 6px rgba(0,0,0,0.22), 0 6px 12px rgba(0,0,0,0.08),
                inset 0 1px 0 rgba(255,255,255,0.25);
    transform: translateY(-1px);
    color: #fff;
}
.btn-primary:active {
    background: linear-gradient(to bottom, #700000, #600000);
    transform: translateY(2px);
    border-bottom-width: 1px;
    box-shadow: 0 0 2px rgba(0,0,0,0.12), inset 0 2px 4px rgba(0,0,0,0.15);
}
.btn-primary:disabled {
    background: #999;
    border-color: #888;
    border-bottom: 3px solid #777;
    cursor: wait;
    box-shadow: none;
    transform: none;
}

/* ── GROUP 3: .btn-secondary (dark gradient — search/action/CTA) */
.btn-secondary {
    display: inline-block;
    padding: 0.5rem 1.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(to bottom, var(--btn-secondary-from), var(--btn-secondary-to));
    border: 1px solid var(--btn-secondary-border);
    border-bottom: 3px solid var(--btn-secondary-border-bottom);
    border-radius: var(--radius-md);
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.18), 0 4px 8px rgba(0,0,0,0.06),
                inset 0 1px 0 rgba(255,255,255,0.15);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.1s;
    text-decoration: none;
    text-align: center;
}
.btn-secondary:hover {
    background: linear-gradient(to bottom, #444, #222);
    box-shadow: 0 3px 6px rgba(0,0,0,0.22), 0 6px 12px rgba(0,0,0,0.08),
                inset 0 1px 0 rgba(255,255,255,0.2);
    transform: translateY(-1px);
    color: #fff;
}
.btn-secondary:active {
    background: linear-gradient(to bottom, #111, #000);
    transform: translateY(2px);
    border-bottom-width: 1px;
    box-shadow: 0 0 2px rgba(0,0,0,0.12), inset 0 2px 4px rgba(0,0,0,0.15);
}

/* ── GROUP 4: .btn-flat (solid maroon, no gradient) ──────────── */
.btn-flat {
    display: inline-block;
    padding: 0.85rem 2.5rem;
    font-size: 1.3rem;
    font-weight: 700;
    color: #fff;
    background: var(--color-accent);
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    text-align: center;
}
.btn-flat:hover {
    background: #600;
    color: #fff;
}
.btn-flat:disabled {
    background: #999;
    cursor: not-allowed;
}

/* ── GROUP 5: Size modifiers ─────────────────────────────────── */
.btn-sm {
    padding: 0.4rem 1.25rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    border-bottom-width: 2px;
}
.btn-lg {
    padding: 1.25rem 3.5rem;
    font-size: 1.4rem;
}

/* ── GROUP 6: .card ──────────────────────────────────────────── */
.card {
    border: 1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    transition: box-shadow 0.2s;
}
.card:hover {
    box-shadow: var(--shadow-card-hover);
}
.card--flush {
    padding: 0;
}

/* ── GROUP 7: Utility classes ──────────────────────────────── */
.clear-both { clear: both; }
.text-right { text-align: right; }