/* =========================================================
   Prezzomania V2 - Shared Components
   Load after Bootstrap, tokens, base and layout
   ========================================================= */

/* ---------- Cards ---------- */

.pm-card {
    background: var(--pm-surface);
    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
}

.pm-card--flat {
    border-color: transparent;
}

.pm-card--shadow {
    box-shadow: var(--pm-shadow-sm);
}

.pm-card__body {
    padding: var(--pm-space-4);
}

@media (min-width: 768px) {
    .pm-card__body {
        padding: var(--pm-space-6);
    }
}

/* ---------- Buttons ---------- */

.pm-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;

    min-height: 48px;
    padding: 0.7rem 1.15rem;

    border: 1px solid transparent;
    border-radius: var(--pm-radius);

    font-weight: var(--pm-font-weight-semibold);
    line-height: 1.2;
    text-align: center;
    text-decoration: none;

    cursor: pointer;
    user-select: none;

    transition:
        background-color var(--pm-transition),
        border-color var(--pm-transition),
        color var(--pm-transition),
        box-shadow var(--pm-transition),
        transform var(--pm-transition-fast);
}

.pm-btn:active {
    transform: translateY(1px);
}

.pm-btn:disabled,
.pm-btn[aria-disabled="true"] {
    opacity: 0.55;
    pointer-events: none;
}

.pm-btn--primary {
    background: var(--pm-primary);
    border-color: var(--pm-primary);
    color: var(--pm-text-inverse);
}

.pm-btn--primary:hover {
    background: var(--pm-primary-hover);
    border-color: var(--pm-primary-hover);
    color: var(--pm-text-inverse);
}

.pm-btn--primary:active {
    background: var(--pm-primary-active);
    border-color: var(--pm-primary-active);
}

.pm-btn--outline {
    background: var(--pm-surface);
    border-color: var(--pm-border-strong);
    color: var(--pm-text);
}

.pm-btn--outline:hover {
    background: var(--pm-surface-soft);
    border-color: var(--pm-gray-700);
    color: var(--pm-text);
}

.pm-btn--ghost {
    min-height: 40px;
    padding-inline: 0.75rem;
    background: transparent;
    border-color: transparent;
    color: var(--pm-text);
}

.pm-btn--ghost:hover {
    background: var(--pm-gray-100);
    color: var(--pm-text);
}

.pm-btn--block {
    width: 100%;
}

/* Bootstrap primary button alignment */
.btn-primary {
    --bs-btn-bg: var(--pm-primary);
    --bs-btn-border-color: var(--pm-primary);
    --bs-btn-hover-bg: var(--pm-primary-hover);
    --bs-btn-hover-border-color: var(--pm-primary-hover);
    --bs-btn-active-bg: var(--pm-primary-active);
    --bs-btn-active-border-color: var(--pm-primary-active);
    --bs-btn-focus-shadow-rgb: var(--pm-primary-rgb);
}

/* ---------- Forms ---------- */

.pm-form-control {
    min-height: 48px;
    border: 1px solid var(--pm-border-strong);
    border-radius: var(--pm-radius);
    background: var(--pm-surface);
    color: var(--pm-text);
}

.pm-form-control:hover {
    border-color: var(--pm-gray-500);
}

.pm-form-control:focus {
    border-color: var(--pm-primary);
    box-shadow: var(--pm-focus-ring);
}

/* ---------- Labels / badges ---------- */

.pm-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.3rem 0.55rem;
    border-radius: var(--pm-radius-pill);
    background: var(--pm-gray-100);
    color: var(--pm-text-secondary);
    font-size: var(--pm-font-size-xs);
    font-weight: var(--pm-font-weight-semibold);
}

/* ---------- Dividers ---------- */

.pm-divider {
    border: 0;
    border-top: 1px solid var(--pm-border);
    margin: var(--pm-space-5) 0;
}

/* ---------- Icon button ---------- */

.pm-icon-btn {
    width: 44px;
    height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--pm-text-secondary);

    cursor: pointer;

    transition:
        background-color var(--pm-transition-fast),
        color var(--pm-transition-fast);
}

.pm-icon-btn:hover {
    background: var(--pm-gray-100);
    color: var(--pm-text);
}

/* ---------- Accordion-like rows ---------- */

.pm-action-row {
    width: 100%;
    min-height: 58px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--pm-space-4);

    padding: 0 var(--pm-space-4);

    border: 1px solid var(--pm-border);
    border-radius: var(--pm-radius-lg);
    background: var(--pm-surface);
    color: var(--pm-text);

    text-align: left;
    text-decoration: none;
}

.pm-action-row:hover {
    background: var(--pm-gray-50);
    color: var(--pm-text);
}

/* ---------- Price ---------- */

.pm-price {
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.pm-price--strong {
    font-weight: var(--pm-font-weight-bold);
}