/* Kiosk Industry Company Directory — front-end styles
   TIG brand: navy #0B2A4A, teal #20808D, warm bg #F6F4EF */

.kiosk-dir {
	--kd-navy: #0B2A4A;
	--kd-teal: #20808D;
	--kd-bg: #F6F4EF;
	--kd-card: #FFFFFF;
	--kd-border: #E3DED4;
	--kd-text: #1c2530;
	--kd-muted: #5d6b78;
	--kd-radius: 12px;
	font-family: "DM Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	color: var(--kd-text);
	max-width: 1200px;
	margin: 0 auto;
	box-sizing: border-box;
}
.kiosk-dir *, .kiosk-dir *::before, .kiosk-dir *::after { box-sizing: border-box; }

/* Header */
.kiosk-dir__header {
	background: linear-gradient(135deg, var(--kd-navy) 0%, #103a63 100%);
	color: #fff;
	border-radius: var(--kd-radius);
	padding: 28px 30px;
	margin-bottom: 22px;
	border-bottom: 4px solid var(--kd-teal);
}
.kiosk-dir__title { margin: 0 0 6px; font-size: 1.7rem; font-weight: 700; color: #fff; }
.kiosk-dir__subtitle { margin: 0; font-size: .95rem; color: #c9d6e2; line-height: 1.5; }
.kiosk-dir__count { font-weight: 700; color: #fff; }

/* Controls card */
.kiosk-dir__controls {
	background: var(--kd-card);
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius);
	padding: 20px 22px;
	margin-bottom: 22px;
	box-shadow: 0 1px 3px rgba(11,42,74,.05);
}
.kiosk-dir__searchrow { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.kiosk-dir__search {
	flex: 1 1 320px;
	min-width: 0;
	padding: 12px 16px;
	font-size: 1rem;
	border: 1.5px solid var(--kd-border);
	border-radius: 10px;
	background: #fff;
	color: var(--kd-text);
	font-family: inherit;
}
.kiosk-dir__search:focus { outline: none; border-color: var(--kd-teal); box-shadow: 0 0 0 3px rgba(32,128,141,.15); }
.kiosk-dir__sort { display: flex; align-items: center; gap: 8px; font-size: .9rem; color: var(--kd-muted); }
.kiosk-dir__sortsel { padding: 9px 12px; border: 1.5px solid var(--kd-border); border-radius: 8px; background: #fff; font-family: inherit; font-size: .9rem; color: var(--kd-text); }

.kiosk-dir__filtergroup { margin-top: 16px; }
.kiosk-dir__label { display: block; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; color: var(--kd-muted); margin-bottom: 8px; font-weight: 600; }
.kiosk-dir__pills { display: inline-flex; flex-wrap: wrap; gap: 8px; vertical-align: middle; }
.kiosk-dir__pill {
	padding: 7px 14px;
	border: 1.5px solid var(--kd-border);
	border-radius: 999px;
	background: #fff;
	color: var(--kd-text);
	font-size: .85rem;
	font-family: inherit;
	cursor: pointer;
	transition: all .15s ease;
}
.kiosk-dir__pill:hover { border-color: var(--kd-teal); }
.kiosk-dir__pill.is-active { background: var(--kd-teal); border-color: var(--kd-teal); color: #fff; }
.kiosk-dir__toggle { display: inline-flex; align-items: center; gap: 7px; margin-left: 16px; font-size: .9rem; color: var(--kd-text); cursor: pointer; vertical-align: middle; }

.kiosk-dir__statusrow { display: flex; justify-content: space-between; align-items: center; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--kd-border); flex-wrap: wrap; gap: 10px; }
.kiosk-dir__status { font-size: .9rem; color: var(--kd-muted); }
.kiosk-dir__status strong { color: var(--kd-navy); }
.kiosk-dir__clear { background: none; border: none; color: var(--kd-teal); font-size: .9rem; font-family: inherit; cursor: pointer; font-weight: 600; }
.kiosk-dir__clear:hover { text-decoration: underline; }

/* Grid */
.kiosk-dir__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 18px; }
.kd-card {
	background: var(--kd-card);
	border: 1px solid var(--kd-border);
	border-radius: var(--kd-radius);
	padding: 18px 18px 16px;
	display: flex;
	flex-direction: column;
	transition: box-shadow .15s ease, transform .15s ease;
}
.kd-card.is-featured { border-color: #d8c89a; box-shadow: 0 0 0 1px #e7d9ad inset; }
.kd-card:hover { box-shadow: 0 6px 18px rgba(11,42,74,.10); transform: translateY(-2px); }
.kd-card__top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.kd-card__name { margin: 0; font-size: 1.08rem; font-weight: 700; color: var(--kd-navy); line-height: 1.25; }
.kd-card__name a { color: inherit; text-decoration: none; }
.kd-card__name a:hover { color: var(--kd-teal); text-decoration: underline; }
.kd-card__star { color: #d4a017; font-size: 1rem; flex-shrink: 0; }
.kd-card__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0 12px; }
.kd-badge { font-size: .68rem; letter-spacing: .04em; text-transform: uppercase; font-weight: 700; padding: 3px 9px; border-radius: 6px; }
.kd-badge--cat { background: var(--kd-teal); color: #fff; }
.kd-badge--region { background: #eef2f5; color: var(--kd-navy); font-weight: 600; }
.kd-card__desc { margin: 0 0 12px; font-size: .9rem; line-height: 1.5; color: #3a4753; flex: 1; }
.kd-card__tags { display: flex; flex-wrap: wrap; gap: 6px; }
.kd-tag { font-size: .72rem; color: var(--kd-muted); background: #f1efe8; padding: 3px 8px; border-radius: 5px; }

.kiosk-dir__empty { text-align: center; padding: 50px 20px; color: var(--kd-muted); font-size: 1rem; }
.kiosk-dir__more-wrap { text-align: center; margin-top: 24px; }
.kiosk-dir__more {
	background: var(--kd-navy);
	color: #fff;
	border: none;
	padding: 12px 28px;
	border-radius: 10px;
	font-size: .95rem;
	font-family: inherit;
	font-weight: 600;
	cursor: pointer;
	transition: background .15s ease;
}
.kiosk-dir__more:hover { background: var(--kd-teal); }

.kiosk-dir__footer { margin-top: 28px; padding-top: 18px; border-top: 1px solid var(--kd-border); font-size: .82rem; color: var(--kd-muted); text-align: center; }
.kiosk-dir__footer a { color: var(--kd-teal); text-decoration: none; }
.kiosk-dir__footer a:hover { text-decoration: underline; }

.kiosk-dir__grid.is-loading { opacity: .5; pointer-events: none; }

@media (max-width: 600px) {
	.kiosk-dir__header { padding: 22px 20px; }
	.kiosk-dir__title { font-size: 1.4rem; }
	.kiosk-dir__grid { grid-template-columns: 1fr; }
	.kiosk-dir__toggle { margin-left: 0; margin-top: 10px; display: flex; }
}