/* components.css - reusable components: buttons, cards, faq */

.btn-primary{background:var(--primary-color);color:var(--primary-contrast);border:0;padding:12px 18px;border-radius:10px;cursor:pointer;box-shadow:none;display:inline-flex;align-items:center;gap:8px}
.btn-primary:hover,.btn-primary:focus{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.12)}
.btn-secondary{background:transparent;border:1px solid rgba(255,255,255,0.18);color:var(--primary-contrast);padding:10px 14px;border-radius:10px}

.voucher-card{display:flex;gap:12px;background:var(--card-bg);border:1px solid var(--card-border);padding:12px;border-radius:10px;align-items:flex-start}
.voucher-card__img{width:88px;height:88px;flex-shrink:0;border-radius:8px;object-fit:cover;display:block;aspect-ratio:1/1}
.voucher-card__title{font-size:var(--heading-3);margin-bottom:6px}
.voucher-card__desc{font-size:0.95rem;color:var(--muted-color);margin-bottom:10px}
.voucher-card__actions{margin-left:auto}

/* Campaign banner image sizing — ensures banners keep consistent height and crop */
.campaign-banner img{width:100%;height:140px;object-fit:cover;border-radius:8px;display:block}

/* FAQ */
.faq-question{width:100%;text-align:left;padding:14px;border-radius:8px;border:1px solid var(--card-border);background:var(--card-bg);cursor:pointer}
.faq-question:focus{outline:2px solid rgba(0,0,0,0.08)}
.faq-answer{padding:12px;border-left:3px solid var(--primary-color);background:linear-gradient(90deg, rgba(255,255,255,0.6), rgba(255,255,255,0.8));border-radius:6px}

/* small screens - full width button in voucher card actions */
.voucher-card__actions .btn-primary{width:100%}

/* Search overlay styles */
.search-overlay{position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:60}
.search-overlay[hidden]{display:none}
.search-inner{background:white;padding:16px;border-radius:8px;max-width:720px;width:90%;display:flex;align-items:center;gap:8px;box-shadow:var(--shadow-sm)}
.search-inner .search-input{flex:1;padding:12px;border:1px solid var(--card-border);border-radius:8px;font-size:1rem}
.search-close{background:transparent;border:0;font-size:26px;line-height:1;cursor:pointer}

/* Small responsive tweaks for nav centering when screen is narrow */
@media (max-width:540px){
	.site-header .main-nav{position:static;transform:none;margin:0 auto}
	.site-header .header-inner{justify-content:space-between;padding:0 12px}
	.site-header .main-nav ul{gap:10px}
}