/*
 * Additions on top of the ported Clentac theme.
 * Kept deliberately small — anything that changes the original look belongs
 * in the theme CSS, not here.
 */

/* Laravel validation + flash messaging, styled to match the theme buttons. */
.app-alert {
    padding: 14px 20px;
    border-radius: 6px;
    margin-bottom: 24px;
    font-size: 16px;
    line-height: 1.5;
}

.app-alert--success {
    background: #e8f5ea;
    border: 1px solid #b7dfbf;
    color: #1e5b2c;
}

.app-alert--error {
    background: #fdecea;
    border: 1px solid #f5c2bd;
    color: #8f2018;
}

.app-alert ul {
    margin: 8px 0 0;
    padding-left: 20px;
}

.app-field-error {
    display: block;
    margin-top: 6px;
    color: #b3261e;
    font-size: 14px;
}

input.is-invalid,
textarea.is-invalid,
select.is-invalid {
    border-color: #b3261e !important;
}

/* Honeypot — hidden from people, visible to naive bots. */
.app-hp {
    position: absolute !important;
    left: -9999px !important;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Empty-state blocks (no products / no posts yet). */
.app-empty {
    padding: 60px 20px;
    text-align: center;
    color: #6b7280;
}

.app-empty h3 {
    margin-bottom: 10px;
}

/* Pagination inherits Bootstrap 5 markup from Laravel's paginator. */
.pagination {
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.pagination .page-link {
    color: var(--tg-secondary-color, #1d3557);
    border-radius: 4px;
}

.pagination .active > .page-link {
    background: var(--tg-primary-color, #dd3333);
    border-color: var(--tg-primary-color, #dd3333);
    color: #fff;
}