/**
 * Advanced Search Widget v2 — Frontend CSS
 * New: filters row, tags, type badge, reading time, history panel, view-all footer, highlight marks.
 * @package Advanced_Search_Widget
 */

/* ── Reset & Tokens ──────────────────────────────────────────────── */
.asw-wrapper*,.asw-wrapper *::before,.asw-wrapper *::after{box-sizing:border-box;}

.asw-wrapper{
	--asw-accent:      #4f46e5;
	--asw-accent-rgb:  79,70,229;
	--asw-text:        #111827;
	--asw-muted:       #6b7280;
	--asw-border:      #e5e7eb;
	--asw-bg:          #ffffff;
	--asw-bg-hover:    #f9fafb;
	--asw-shadow:      0 8px 32px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06);
	--asw-radius:      10px;
	--asw-tr:          .17s ease;
	--asw-font:        -apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
	position:relative;width:100%;
	font-family:var(--asw-font);font-size:15px;color:var(--asw-text);
}

/* ── Row 1: Main bar ─────────────────────────────────────────────── */
.asw-form-row{display:flex;gap:8px;align-items:center;}

/* Input wrap */
.asw-input-wrap{position:relative;flex:1;min-width:0;}

.asw-input{
	display:block;width:100%;height:48px;
	padding:0 72px 0 44px;
	font-size:15px;font-family:var(--asw-font);color:var(--asw-text);
	background:var(--asw-bg);border:1.5px solid var(--asw-border);
	border-radius:var(--asw-radius);outline:none;
	transition:border-color var(--asw-tr),box-shadow var(--asw-tr);
	-webkit-appearance:none;appearance:none;
}
.asw-input::placeholder{color:var(--asw-muted);}
.asw-input:focus{border-color:var(--asw-accent);box-shadow:0 0 0 3px rgba(var(--asw-accent-rgb),.15);}
.asw-input::-webkit-search-cancel-button{-webkit-appearance:none;}

/* Date input variant */
.asw-input--date{height:40px;padding:0 12px;font-size:13px;flex:1;}

.asw-input-icon{position:absolute;top:50%;left:14px;transform:translateY(-50%);color:var(--asw-muted);pointer-events:none;display:flex;align-items:center;}

/* Clear button */
.asw-clear-btn{
	position:absolute;top:50%;right:40px;transform:translateY(-50%);
	background:none;border:none;cursor:pointer;color:var(--asw-muted);
	font-size:14px;padding:4px 6px;line-height:1;
	transition:color var(--asw-tr);
}
.asw-clear-btn:hover{color:var(--asw-text);}

/* Spinner */
.asw-spinner{
	position:absolute;top:50%;right:14px;transform:translateY(-50%);
	width:18px;height:18px;border:2px solid var(--asw-border);
	border-top-color:var(--asw-accent);border-radius:50%;
	opacity:0;pointer-events:none;transition:opacity var(--asw-tr);
}
.asw-spinner.is-active{opacity:1;animation:asw-spin .65s linear infinite;}
@keyframes asw-spin{to{transform:translateY(-50%) rotate(360deg);}}

.asw-is-loading .asw-input-icon{opacity:0;}

/* Select wrap */
.asw-select-wrap{position:relative;flex-shrink:0;}
.asw-select-wrap--sm{flex-shrink:0;}

.asw-select{
	height:48px;padding:0 34px 0 14px;
	font-size:14px;font-family:var(--asw-font);color:var(--asw-text);
	background:var(--asw-bg);border:1.5px solid var(--asw-border);
	border-radius:var(--asw-radius);outline:none;cursor:pointer;
	-webkit-appearance:none;appearance:none;
	transition:border-color var(--asw-tr),box-shadow var(--asw-tr);
}
.asw-select:focus{border-color:var(--asw-accent);box-shadow:0 0 0 3px rgba(var(--asw-accent-rgb),.15);}
.asw-select-arrow{position:absolute;top:50%;right:10px;transform:translateY(-50%);color:var(--asw-muted);pointer-events:none;font-size:18px;line-height:1;}

/* Search button */
.asw-btn{
	flex-shrink:0;display:flex;align-items:center;justify-content:center;
	width:48px;height:48px;background:var(--asw-accent);color:#fff;
	border:none;border-radius:var(--asw-radius);cursor:pointer;
	transition:background var(--asw-tr),transform var(--asw-tr),box-shadow var(--asw-tr);
}
.asw-btn:hover{filter:brightness(.9);box-shadow:0 4px 14px rgba(var(--asw-accent-rgb),.4);}
.asw-btn:active{transform:scale(.95);}

/* ── Row 2: Filters ──────────────────────────────────────────────── */
.asw-filters-row{
	display:flex;gap:8px;align-items:center;flex-wrap:wrap;
	margin-top:8px;
}
.asw-filters-row .asw-select{height:40px;font-size:13px;}
.asw-filters-row .asw-select-arrow{font-size:15px;}

/* Date range */
.asw-date-range{display:flex;align-items:center;gap:6px;}
.asw-date-sep{color:var(--asw-muted);font-size:13px;}

/* ── Results container ───────────────────────────────────────────── */
.asw-results{
	position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:9999;
	background:var(--asw-bg);border:1.5px solid var(--asw-border);
	border-radius:var(--asw-radius);box-shadow:var(--asw-shadow);
	overflow:hidden;max-height:520px;overflow-y:auto;
	opacity:0;transform:translateY(-6px);pointer-events:none;
	transition:opacity var(--asw-tr),transform var(--asw-tr);
}
.asw-results[hidden]{display:block!important;visibility:hidden;}
.asw-results.is-visible{opacity:1;transform:translateY(0);pointer-events:auto;visibility:visible;}
.asw-results::-webkit-scrollbar{width:5px;}
.asw-results::-webkit-scrollbar-thumb{background:var(--asw-border);border-radius:3px;}

/* ── Result item ─────────────────────────────────────────────────── */
.asw-result-item{
	display:flex;align-items:center;gap:14px;padding:13px 16px;
	text-decoration:none;color:inherit;
	border-left:3px solid transparent;
	transition:background var(--asw-tr),border-color var(--asw-tr);
}
.asw-result-item+.asw-result-item{border-top:1px solid var(--asw-border);}
.asw-result-item:hover,.asw-result-item.is-active,.asw-result-item:focus{
	background:var(--asw-bg-hover);border-left-color:var(--asw-accent);outline:none;
}

/* Thumbnail */
.asw-result-thumb{flex-shrink:0;width:52px;height:52px;border-radius:8px;overflow:hidden;background:var(--asw-bg-hover);display:flex;align-items:center;justify-content:center;}
.asw-result-thumb img{width:100%;height:100%;object-fit:cover;display:block;}
.asw-result-thumb--placeholder svg{color:var(--asw-border);}

/* Body */
.asw-result-body{flex:1;min-width:0;}
.asw-result-meta{display:flex;align-items:center;gap:6px;flex-wrap:wrap;margin-bottom:3px;}

.asw-result-category{
	display:inline-block;font-size:11px;font-weight:600;
	letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;
	border-radius:20px;background:rgba(var(--asw-accent-rgb),.1);color:var(--asw-accent);
	white-space:nowrap;
}
.asw-result-type{
	display:inline-block;font-size:10px;font-weight:600;
	letter-spacing:.04em;text-transform:uppercase;padding:2px 7px;
	border-radius:20px;background:#f3f4f6;color:#374151;
	white-space:nowrap;
}
.asw-result-date,.asw-result-rt{font-size:11px;color:var(--asw-muted);}

.asw-result-title{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.35;}
.asw-result-title mark{background:rgba(var(--asw-accent-rgb),.15);color:var(--asw-accent);border-radius:3px;padding:0 2px;}

.asw-result-excerpt{font-size:12px;color:var(--asw-muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px;line-height:1.4;}
.asw-result-excerpt mark{background:rgba(var(--asw-accent-rgb),.12);color:inherit;border-radius:2px;padding:0 1px;}

.asw-result-tags-row{margin-top:5px;display:flex;flex-wrap:wrap;gap:4px;}
.asw-tag-pill{font-size:10px;padding:2px 7px;border-radius:20px;background:var(--asw-bg-hover);border:1px solid var(--asw-border);color:var(--asw-muted);}

.asw-result-arrow{flex-shrink:0;font-size:20px;color:var(--asw-border);transition:color var(--asw-tr),transform var(--asw-tr);line-height:1;}
.asw-result-item:hover .asw-result-arrow,.asw-result-item.is-active .asw-result-arrow{color:var(--asw-accent);transform:translateX(2px);}

/* ── View all footer ──────────────────────────────────────────────── */
.asw-view-all{
	display:flex;align-items:center;justify-content:center;
	padding:12px;text-decoration:none;
	font-size:13px;font-weight:600;color:var(--asw-accent);
	background:rgba(var(--asw-accent-rgb),.04);
	border-top:1px solid var(--asw-border);
	transition:background var(--asw-tr);
}
.asw-view-all:hover{background:rgba(var(--asw-accent-rgb),.1);}

/* ── History panel ───────────────────────────────────────────────── */
.asw-history-header{
	display:flex;align-items:center;justify-content:space-between;
	padding:10px 16px 8px;font-size:11px;font-weight:700;
	text-transform:uppercase;letter-spacing:.06em;color:var(--asw-muted);
}
.asw-history-clear{
	background:none;border:none;cursor:pointer;font-size:11px;
	color:var(--asw-muted);padding:2px 6px;border-radius:4px;
	transition:color var(--asw-tr),background var(--asw-tr);
}
.asw-history-clear:hover{color:var(--asw-text);background:var(--asw-border);}

.asw-history-item{
	display:flex;align-items:center;gap:10px;width:100%;
	padding:10px 16px;background:none;border:none;border-top:1px solid var(--asw-border);
	text-align:left;cursor:pointer;color:var(--asw-text);font-size:14px;font-family:var(--asw-font);
	transition:background var(--asw-tr);
}
.asw-history-item:hover{background:var(--asw-bg-hover);}
.asw-history-item svg{flex-shrink:0;color:var(--asw-muted);}

/* ── Messages ────────────────────────────────────────────────────── */
.asw-message{padding:20px 16px;text-align:center;font-size:14px;}
.asw-message--info,.asw-message--empty{color:var(--asw-muted);}
.asw-message--error{color:#dc2626;}

/* ── Responsive ──────────────────────────────────────────────────── */
@media(max-width:640px){
	.asw-form-row{flex-wrap:wrap;}
	.asw-select-wrap{width:100%;}
	.asw-select{width:100%;}
	.asw-filters-row{flex-direction:column;align-items:stretch;}
	.asw-filters-row .asw-select-wrap{width:100%;}
	.asw-filters-row .asw-select{width:100%;}
	.asw-date-range{width:100%;}
}

/* ── Dark mode ───────────────────────────────────────────────────── */
@media(prefers-color-scheme:dark){
	.asw-wrapper{
		--asw-text:    #f9fafb;
		--asw-muted:   #9ca3af;
		--asw-border:  #374151;
		--asw-bg:      #1f2937;
		--asw-bg-hover:#111827;
		--asw-shadow:  0 8px 32px rgba(0,0,0,.5),0 2px 6px rgba(0,0,0,.3);
	}
	.asw-result-type{background:#374151;color:#d1d5db;}
	.asw-tag-pill{background:#374151;border-color:#4b5563;color:#9ca3af;}
}

/* ── Elementor editor demo helper (never renders on the live site) ── */
.asw-editor-demo {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-wrap: wrap;
	margin-top: 12px;
	padding: 10px 12px;
	background: repeating-linear-gradient(45deg, #f8f5ff, #f8f5ff 10px, #f1ebff 10px, #f1ebff 20px);
	border: 1px dashed #a78bfa;
	border-radius: 8px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.asw-editor-demo__btn {
	appearance: none;
	border: 1px solid #7c3aed;
	background: #7c3aed;
	color: #fff;
	font-size: 12px;
	font-weight: 600;
	padding: 6px 12px;
	border-radius: 6px;
	cursor: pointer;
	line-height: 1.4;
	transition: background .15s ease;
}
.asw-editor-demo__btn:hover { background: #6d28d9; }
.asw-editor-demo__btn--clear {
	background: #fff;
	color: #6d28d9;
}
.asw-editor-demo__btn--clear:hover { background: #f5f3ff; }
.asw-editor-demo__hint {
	font-size: 11px;
	color: #6b5b8a;
	flex: 1 1 100%;
	line-height: 1.5;
}

/* ── Pinned demo results (Elementor editor only) ──
   When the demo button pins results open for styling, drop the dropdown out of
   absolute positioning so the cards sit in normal flow on the canvas and don't
   overlap widgets below. Scoped to the pinned state, so the live front-end
   dropdown behaviour is unchanged. */
.asw-demo-pinned .asw-results {
	position: static;
	opacity: 1;
	transform: none;
	pointer-events: auto;
	margin-top: 10px;
	max-height: none;
}
.asw-demo-pinned .asw-results[hidden] {
	visibility: visible;
}

/* Demo status line */
.asw-editor-demo__status { font-size:11px; font-weight:600; flex:1 1 100%; line-height:1.5; }
.asw-editor-demo__status.is-load { color:#6d28d9; }
.asw-editor-demo__status.is-ok   { color:#16a34a; }
.asw-editor-demo__status.is-warn { color:#b45309; }
.asw-editor-demo__status.is-err  { color:#dc2626; }