/* Sample templates gallery (app/view/gallery/*.phtml): home page, "Templates" page and reserved area. Same palette of home.css / resarea.css
-------------------------------------------------- */

.ap-gallery {
    --ap-accent: #712cf9;
    --ap-accent-soft: rgba(113, 44, 249, .10);
}

/* Cards */
.ap-gallery .card-hover { transition: transform .15s ease, box-shadow .15s ease; }
.ap-gallery .card-hover:hover { transform: translateY(-3px); box-shadow: 0 .75rem 1.5rem rgba(0, 0, 0, .12); }
.ap-gallery .example-thumb { height: 200px; width: 100%; object-fit: contain; background: var(--bs-tertiary-bg); }
.ap-gallery .hello-thumb span { background: #2874a6; color: #fff; font: 700 1.4rem Helvetica, Arial, sans-serif; padding: .6rem 2rem; box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .2); }
.ap-gallery .tag { background: var(--ap-accent-soft); color: var(--ap-accent); font-weight: 500; }
.ap-gallery .lang-badge { background: var(--bs-tertiary-bg); color: var(--bs-secondary-color); border: 1px solid var(--bs-border-color); font-weight: 600; }
.ap-gallery .lang-switch .btn { --bs-btn-padding-y: .1rem; --bs-btn-padding-x: .45rem; --bs-btn-font-size: .75rem; font-weight: 600; color: var(--bs-secondary-color); border-color: var(--bs-border-color); }
.ap-gallery .lang-switch .btn.active { background: var(--ap-accent); border-color: var(--ap-accent); color: #fff; }

/* Filters */
.ap-gallery .filter-chip { border: 1px solid var(--bs-border-color); border-radius: 2rem; color: var(--bs-body-color); background: var(--bs-body-bg); }
.ap-gallery .filter-chip:hover { border-color: var(--ap-accent); color: var(--ap-accent); }
.ap-gallery .filter-chip.active { background: var(--ap-accent); border-color: var(--ap-accent); color: #fff; }
.ap-gallery .filter-chip .count { opacity: .65; font-size: .75em; margin-left: .15rem; }
.ap-gallery .gallery-search { width: 14rem; max-width: 100%; }
.ap-gallery .gallery-empty { border: 2px dashed var(--bs-border-color); border-radius: .5rem; color: var(--bs-secondary-color); }

[data-bs-theme="dark"] .ap-gallery .tag { color: #b794ff; }
[data-bs-theme="dark"] .ap-gallery .filter-chip:hover:not(.active) { color: #b794ff; border-color: #b794ff; }

@media (max-width: 575.98px) {
    .ap-gallery .gallery-search { width: 100%; }
}

/* "Templates" page (app/view/gallery/index.phtml) */
.ap-templates {
    --ap-accent: #712cf9;
    color: var(--bs-body-color);        /* carousel.css sets a lighter body text color */
    padding-top: 1.5rem;
}
.ap-templates .kicker { color: var(--ap-accent); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; font-size: .8rem; }
.ap-templates .cta-box { background: var(--bs-tertiary-bg); border: 1px solid var(--bs-border-color); }
[data-bs-theme="dark"] .ap-templates .kicker { color: #b794ff; }