/* ============================================================
   Studio Visuali — Download Attachments  |  visuali-download-attachments.css  |  v2.6.0
   ============================================================ */

.vda-root {
	--vda-gap: 12px;
	--vda-cols: 3;
	--vda-item-bg: #ffffff;
	--vda-item-bg-hover: #f7f8fa;
	--vda-item-radius: 10px;
	--vda-badge-bg: #eef2ff;
	--vda-badge-color: #4338ca;
	--vda-action-bg: #f3f4f6;
	--vda-action-color: #111827;
	--vda-action-bg-hover: #e5e7eb;
	--vda-align: flex-end;
	--vda-text-align: right;
	--vda-loadmore-bg: #f3f4f6;
	--vda-loadmore-color: #111827;
	--vda-loadmore-bg-hover: #e5e7eb;
	--vda-search-bg: #ffffff;
	--vda-search-color: #111827;
	--vda-search-border: #d1d5db;

	display: flex;
	flex-direction: column;
	gap: var(--vda-gap);
}

.vda-layout-grid {
	display: grid;
	grid-template-columns: repeat(var(--vda-cols), 1fr);
}

.vda-layout-grid .vda-item {
	flex-direction: column;
	text-align: var(--vda-text-align);
	align-items: var(--vda-align);
}

/* Must beat ".vda-root a.vda-action" below on specificity (it also has an
   "a" type selector) — otherwise its margin-inline-start:auto always wins
   regardless of source order, and the button ignores card_align entirely. */
.vda-layout-grid a.vda-action,
.vda-layout-grid div.vda-action {
	margin-inline-start: 0 !important;
	margin-top: 10px;
}

.vda-item {
	position: relative;
	display: flex;
	align-items: center;
	gap: 14px;
	background: var(--vda-item-bg);
	border: 1px solid #e5e7eb;
	border-radius: var(--vda-item-radius);
	padding: 14px 16px;
	transition: background-color 0.15s ease;
	cursor: pointer;
}

.vda-item:hover {
	background: var(--vda-item-bg-hover);
}

.vda-badge {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	border-radius: 8px;
	background: var(--vda-badge-bg);
	color: var(--vda-badge-color);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.02em;
	position: relative;
	z-index: 1;
	/* Sits above the card's stretched link — let clicks fall through to it,
	   so clicking the image opens the item like the rest of the card. */
	pointer-events: none;
}

/* Per-type colors requested for these four common formats; anything else
   keeps the general badge_bg/badge_color style-panel colors above. */
.vda-badge--pdf {
	background: #fee2e2;
	color: #b91c1c;
}

.vda-badge--jpg {
	background: #ede9fe;
	color: #6d28d9;
}

.vda-badge--gif {
	background: #dbeafe;
	color: #1d4ed8;
}

.vda-badge--png {
	background: #ffedd5;
	color: #c2410c;
}

.vda-badge--xls {
	background: #dcfce7;
	color: #15803d;
}

.vda-badge--link {
	background: #f1f5f9;
	color: #475569;
}

.vda-badge--ppt {
	background: #ffedd5;
	color: #c2410c;
}

.vda-badge--doc {
	background: #e0e7ff;
	color: #4338ca;
}

.vda-badge--video {
	background: #fee2e2;
	color: #dc2626;
	font-size: 16px;
}

.vda-badge--audio {
	background: #cffafe;
	color: #0e7490;
	font-size: 16px;
}

/* A real image preview (either the file's own thumbnail, or a manually
   assigned representative image) replaces the colored extension badge. */
.vda-badge--thumb {
	padding: 0;
	overflow: hidden;
	background: transparent;
}

.vda-badge--thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: inherit;
}

/* Grid image size (style tab). Only kicks in once a size is set, so
   existing grids keep the small 44px square. */
.vda-layout-grid .vda-badge {
	width: var(--vda-grid-thumb, 44px);
	height: auto;
	max-width: 100%;
	aspect-ratio: var(--vda-grid-thumb-ratio, 1 / 1);
}

.vda-layout-grid .vda-badge--thumb img {
	object-fit: var(--vda-grid-thumb-fit, cover);
}

.vda-info {
	flex: 1 1 auto;
	min-width: 0;
}

.vda-name {
	font-size: 15px;
	font-weight: 600;
	color: #111827;
	overflow-wrap: break-word;
}

.vda-meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	font-size: 12px;
	color: #6b7280;
	margin-top: 2px;
}

/* .vda-meta is itself a flex row, so text-align on its ancestor (which
   correctly centers/right-aligns the plain-text .vda-name above it) has no
   effect on where ITS OWN children land — that needs justify-content,
   driven by the same --vda-align the card's own alignment already uses. */
.vda-layout-grid .vda-meta {
	justify-content: var(--vda-align);
}

/* isolate: without this, mixed size ("220 KB") and count ("630 הורדות")
   segments can visually bleed into each other under the RTL bidi algorithm. */
.vda-meta-item {
	unicode-bidi: isolate;
}

.vda-meta-item:not(:first-child) {
	margin-inline-start: 6px;
}

.vda-meta-item:not(:first-child)::before {
	content: '·';
	margin-inline-end: 6px;
	opacity: 0.7;
}

/* .vda-root prefix + !important: a host-theme link reset (e.g. ".entry-content a")
   can otherwise outrank a plain ".vda-action" selector — see visuali-youtube-feed.css. */
.vda-root a.vda-action,
.vda-root div.vda-action {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	background: var(--vda-action-bg) !important;
	color: var(--vda-action-color) !important;
	padding: 8px 16px;
	border-radius: 8px;
	font-size: 13px;
	font-weight: 600;
	text-decoration: none !important;
	white-space: nowrap;
	margin-inline-start: auto;
	transition: background-color 0.15s ease;
}

/* Stretches the link's hit area over the whole card (badge + name + meta),
   not just the visible "פתיחה" pill — the link itself is still this one
   anchor, so lightbox/tracking behaviour is unchanged either way. */
.vda-root a.vda-action::after,
.vda-root div.vda-action::after {
	content: '';
	position: absolute;
	inset: 0;
}

.vda-root a.vda-action:hover,
.vda-root div.vda-action:hover {
	background: var(--vda-action-bg-hover) !important;
	color: var(--vda-action-color) !important;
}

/* "Hide the button" only hides its own visible box — position stays static
   (not display:none) so its ::after stretched-link keeps using .vda-item as
   its containing block and the whole card stays clickable either way. */
.vda-root a.vda-action.vda-action--hidden,
.vda-root div.vda-action.vda-action--hidden {
	width: 0;
	height: 0;
	padding: 0;
	margin: 0 !important;
	overflow: hidden;
	font-size: 0;
	background: transparent !important;
	border: 0;
}

.vda-item.vda-hidden,
.vda-item.vda-search-hidden,
.vda-item.vda-year-hidden {
	display: none;
}

/* Shown only when this widget instance was loaded via a site-search deep
   link (?vda_q=...) — tells the visitor why the list is already filtered. */
.vda-deeplink-banner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
	background: #eef2ff;
	color: #3730a3;
	border: 1px solid #c7d2fe;
	border-radius: 8px;
	padding: 10px 16px;
	font-size: 13px;
	font-weight: 600;
}

.vda-deeplink-banner .vda-deeplink-clear {
	background: transparent;
	border: 1px solid currentColor;
	color: inherit;
	border-radius: 6px;
	padding: 4px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
}

/* Grid (not flex) so the 30/70 split is exact regardless of the theme's
   "input, select { width: 100% }" reset — a flex item's basis can still get
   dragged around by that, a grid track size can't. */
.vda-filters {
	display: grid;
	grid-template-columns: 30% 1fr;
	gap: 8px;
	margin-bottom: 2px;
}

.vda-layout-grid .vda-filters {
	grid-column: 1 / -1;
}

.vda-root input.vda-search,
.vda-root select.vda-year-filter {
	display: block;
	box-sizing: border-box;
	width: 100%;
	min-width: 0;
	background: var(--vda-search-bg) !important;
	color: var(--vda-search-color) !important;
	border: 1px solid var(--vda-search-border) !important;
	border-radius: 8px !important;
	padding: 9px 14px;
	font-size: 14px;
}

/* input[type="search"] keeps a native WebKit appearance (rounded "pill" look
   with its own clipping) that otherwise fights the border-radius above. */
.vda-root input.vda-search {
	appearance: none;
	-webkit-appearance: none;
}

@media (max-width: 480px) {
	.vda-filters {
		grid-template-columns: 1fr;
	}
}

.vda-root button.vda-loadmore {
	display: block;
	width: fit-content;
	margin: 4px auto 0;
	background: var(--vda-loadmore-bg) !important;
	color: var(--vda-loadmore-color) !important;
	border: none !important;
	padding: 10px 28px;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	cursor: pointer;
	transition: background-color 0.15s ease;
}

.vda-layout-grid button.vda-loadmore {
	grid-column: 1 / -1;
}

.vda-root button.vda-loadmore:hover {
	background: var(--vda-loadmore-bg-hover) !important;
}

.vda-placeholder,
.vda-empty {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 32px 20px;
	border: 1px dashed #d1d5db;
	border-radius: 10px;
	color: #6b7280;
	font-size: 14px;
	text-align: center;
}

.vda-placeholder i {
	font-size: 26px;
	color: #9ca3af;
}

/* Mobile column count comes from the grid_columns control (mobile_default 1,
   same as the old hard-coded phone layout) — no media query overriding it. */

@media (max-width: 480px) {
	.vda-item {
		flex-wrap: wrap;
	}
	.vda-root a.vda-action,
	.vda-root div.vda-action {
		margin-inline-start: 0 !important;
		width: 100%;
		justify-content: center;
	}
}

/* Generic modal for Drive-preview iframes and direct <audio> playback — kept
   deliberately simple (no Elementor lightbox involvement) since neither
   content type fits Elementor's own lightbox factory (no "audio" videoType,
   and Drive's own preview UI is already a full player, not a raw file to
   wrap in <video>). */
.vda-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
	align-items: center;
	justify-content: center;
}

.vda-modal--open {
	display: flex;
}

.vda-modal__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.75);
}

.vda-modal__box {
	position: relative;
	z-index: 1;
	width: min(90vw, 640px);
	background: #000;
	border-radius: 8px;
	overflow: hidden;
}

.vda-modal__close {
	position: absolute;
	top: -40px;
	inset-inline-end: 0;
	background: transparent;
	border: 0;
	color: #fff;
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
}

.vda-modal__body iframe {
	display: block;
	width: 100%;
	height: 60vh;
	border: 0;
}

.vda-modal__body audio {
	display: block;
	width: 100%;
	margin: 24px 16px;
}