/*
 TOMEY CASIA2 Cases - overview filter bar and "show more" button

 Chips in the TOMEY blue (#0a1e5f), the active one filled; the doctor select
 sits at the right end of the row. Loaded whenever the filter is rendered,
 independent of the "ship the card design" switch, because the chips are new
 markup the customer's stylesheet knows nothing about.

 @copyright  (C) 2026 Sascha Heinemann, heinemann.media
 @license    GNU General Public License version 2 or later; see LICENSE.txt
*/
/* overview.js hides a card with the hidden attribute; the card's own display:flex
   (ours and the customer's copy) would beat the browser's [hidden] rule. */
.casia-card[hidden]{display:none !important;}

.casia-filter{
	display:flex;
	flex-wrap:wrap;
	align-items:center;
	gap:12px 20px;
	margin:8px 0 4px;
	font-family:"Lato",Arial,sans-serif;
}

.casia-filter__topics{
	display:flex;
	flex-wrap:wrap;
	gap:8px;
}

.casia-filter__chip{
	padding:7px 14px;
	border:1px solid #0a1e5f;
	border-radius:999px;
	background:#fff;
	color:#0a1e5f;
	font:inherit;
	font-size:.9rem;
	line-height:1.2;
	cursor:pointer;
	transition:background-color .15s ease, color .15s ease;
}

.casia-filter__chip:hover{background:#eef1f8;}

/* No case of the chosen doctor in this topic (overview.js) */
.casia-filter__chip:disabled{opacity:.35;cursor:default;background:#fff;}

.casia-filter__chip[aria-pressed="true"]{
	background:#0a1e5f;
	color:#fff;
}

.casia-filter__chip:focus-visible,
.casia-filter__select:focus-visible{outline:2px solid #ff373b;outline-offset:2px;}

.casia-filter__doctor{
	display:flex;
	align-items:center;
	gap:8px;
	margin-left:auto;
	font-size:.9rem;
	color:#0a1e5f;
}

.casia-filter__select{
	/* The longest doctor name would otherwise set the select's minimum width and
	   push it past a phone screen */
	min-width:0;
	max-width:280px;
	padding:6px 10px;
	border:1px solid #0a1e5f;
	border-radius:4px;
	background:#fff;
	color:#0a1e5f;
	font:inherit;
	font-size:.9rem;
}

.casia-filter__status{
	flex-basis:100%;
	margin:0;
	font-size:.85rem;
	color:#5d6f9a;
}

.casia-filter__status.is-empty{color:#ff373b;}

@media (max-width:640px){
	.casia-filter__doctor{margin-left:0;width:100%;}
	.casia-filter__select{max-width:none;flex:1;}
	.casia-filter__doctor .choices{flex:1;min-width:0;}
}

/* Choices.js (Joomla core) dressed like the chips: blue hairline, Lato, no Bootstrap grey */
/* The outer box carries radius 4px + overflow hidden from Choices and would round the
   sharp corners of the frame below into little 4px curves */
.casia-filter__doctor .choices,
.casia-filter__doctor .choices.is-open,
.casia-filter__doctor .choices.is-focused{width:280px;max-width:100%;margin:0;border-radius:0;background:transparent;box-shadow:none;font-family:"Lato",Arial,sans-serif;font-size:.9rem;}
/* Shape of the "Contact" button in the navigation (measured: 1px hairline, 38px high,
   16px side padding, one rounded corner bottom left 18px), in TOMEY blue instead of red */
.casia-filter__doctor .choices .choices__inner{display:flex;align-items:center;min-height:38px;padding:0 64px 0 16px;border:1px solid #0a1e5f;border-radius:0 0 0 18px;background:#fff;color:#0a1e5f;font-weight:600;}
.casia-filter__doctor .choices[data-type*="select-one"] .choices__inner{padding-bottom:0;}
.casia-filter__doctor .choices[data-type*="select-one"]::after{border-color:#0a1e5f transparent transparent;right:14px;}
/* × next to the chosen name: Choices centres it with top:50% + negative margin, keep that */
.casia-filter__doctor .choices[data-type*="select-one"] .choices__button{top:50%;right:34px;width:20px;height:20px;margin:-10px 0 0;padding:0;opacity:.6;box-shadow:none;}
.casia-filter__doctor .choices[data-type*="select-one"] .choices__button:hover,
.casia-filter__doctor .choices[data-type*="select-one"] .choices__button:focus-visible{opacity:1;}
.casia-filter__doctor .choices.is-open[data-type*="select-one"]::after{border-color:transparent transparent #0a1e5f;}
/* Open/focused: Choices squares the corners and adds a halo - keep the plain frame like the
   Contact button; keyboard focus gets the same red outline as the chips */
.casia-filter__doctor .choices.is-focused .choices__inner,
.casia-filter__doctor .choices.is-open .choices__inner,
.casia-filter__doctor .choices.is-open.is-flipped .choices__inner{border-color:#0a1e5f;border-radius:0 0 0 18px;box-shadow:none;}
/* Choices focuses the box by script after a search, so :focus-visible fires after mouse use
   too - a second hairline instead of the red outline, which would read as an error */
.casia-filter__doctor .choices:focus-visible{outline:none;}
.casia-filter__doctor .choices:focus-visible .choices__inner{box-shadow:inset 0 0 0 1px #0a1e5f;}
.casia-filter__doctor .choices__list--single{padding:0;}
.casia-filter__doctor .choices__list--single .choices__item{color:#0a1e5f;}
.casia-filter__doctor .choices__list--dropdown,
.casia-filter__doctor .choices__list[aria-expanded]{border:1px solid #0a1e5f;border-radius:0 0 0 18px;margin-top:4px;overflow:hidden;box-shadow:0 10px 24px rgba(10,30,95,.12);z-index:20;}
.casia-filter__doctor .choices__list--dropdown .choices__item,
.casia-filter__doctor .choices__list[aria-expanded] .choices__item{padding:8px 10px;font-size:.9rem;color:#0a1e5f;}
.casia-filter__doctor .choices__list--dropdown .choices__item--selectable.is-highlighted,
.casia-filter__doctor .choices__list[aria-expanded] .choices__item--selectable.is-highlighted{background:#eef1f8;color:#0a1e5f;}
/* Search field inside the list: the template paints focused inputs teal - hairline only */
.casia-filter__doctor .choices__input,
.casia-filter__doctor .choices__input:focus{margin:0;padding:8px 10px;border:0;border-bottom:1px solid #d7dcea;border-radius:0;outline:none;box-shadow:none;background:#fff;font-family:inherit;font-size:.9rem;color:#0a1e5f;}
.casia-filter__doctor .choices__item--selectable::after{display:none;}

/* "Show more" under the grid: outlined like an inactive chip, full-width tap
   target on phones. Hidden until overview.js runs. */
.casia-more{
	display:block;
	margin:4px auto 32px;
	padding:11px 28px;
	border:1px solid #0a1e5f;
	border-radius:999px;
	background:#fff;
	color:#0a1e5f;
	font-family:"Lato",Arial,sans-serif;
	font-size:.95rem;
	font-weight:600;
	line-height:1.2;
	cursor:pointer;
	transition:background-color .15s ease, color .15s ease;
}
/* Cards revealed by "Show more" fade and slide in, staggered by overview.js via animation-delay */
@keyframes casia-card-in{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}}
.casia-card--in{animation:casia-card-in .4s ease-out both;}
/* Filter change: the whole result fades in once, quickly, without stagger */
@keyframes casia-cards-swap{from{opacity:0;}to{opacity:1;}}
.casia-cards--swap{animation:casia-cards-swap .2s ease-out;}
@media (prefers-reduced-motion:reduce){.casia-card--in,.casia-cards--swap{animation:none;}}

.casia-more:hover{background:#0a1e5f;color:#fff;}
.casia-more:focus-visible{outline:2px solid #ff373b;outline-offset:2px;}
.casia-more[hidden]{display:none;}
@media (max-width:640px){
	.casia-more{width:100%;}
}