/* Premium / Refined color palette variables */
:root{
	--card-bg-start: #ffffff;
	--card-bg-end: #fbfaf8;
	--text-900: #0b1220; /* primary text */
	--text-700: #24303b; /* secondary */
	--muted: #6b7785;
	--navy: #0b2540; /* primary accent */
	--gold: #c6a34b; /* highlight */
	--danger: #a1272f; /* in-scope */
	--danger-soft: #fff6f6;
	--success: #2a8451; /* out-of-scope - adjusted for WCAG contrast */
	--success-soft: #f6fff8;
	--font-sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial;
	--font-serif: 'Merriweather', Georgia, 'Times New Roman', serif;
	/* pill / chip colors */
	--scope-bg-danger: rgba(255,242,242,0.95);
	--scope-text-danger: var(--danger);
	--scope-bg-success: rgba(240,255,243,0.95);
	--scope-text-success: var(--success);
    /* select / option colors */
    --select-bg: #ffffff;
    --select-option-bg: #ffffff;
    --select-color: var(--text-900);
}

/* Final fallback: force option text to a readable dark color on white background
   Some browsers render option lists using native UI; this rule ensures options
   are visible even if other variable-based rules are ignored. */
.skd-row select option {
	color: #0b1220 !important;
	background-color: #ffffff !important;
}

@media (prefers-color-scheme: dark) {
	/* In dark mode many browsers still paint native option lists with white
	   backgrounds; keep option text dark to ensure legibility on those UIs. */
	.skd-row select option {
		color: #0b1220 !important;
		background-color: #ffffff !important;
	}
}

/* Card */
.skd-checker {
	max-width:860px;
	margin: 14px auto;
	border-radius:18px;
	padding:30px;
	background: linear-gradient(180deg, var(--card-bg-start) 0%, var(--card-bg-end) 100%);
	box-shadow: 0 22px 60px rgba(11,24,36,0.08);
	border: 1px solid rgba(11,22,36,0.06);
	font-family: var(--font-sans);
	color: var(--text-900);
}

.skd-row { margin-bottom:18px; }
.skd-row label { display:block; font-weight:600; margin-bottom:8px; color:var(--text-900); font-size:15px; }
.skd-row select {
	width:100%;
	padding:14px 16px;
	border-radius:12px;
	border:1px solid rgba(11,22,36,0.06);
	background: #ffffff;
	color:var(--text-900);
	box-shadow: 0 6px 22px rgba(11,22,36,0.04);
	font-size:15px;
	outline: none;
}
.skd-row select:focus { border-color: rgba(11,37,65,0.12); box-shadow: 0 12px 36px rgba(11,37,65,0.06); }

/* Search wrapper and input styles */
.skd-search-wrapper {
	position: relative;
	margin-bottom: 12px;
	width: 100%;
}

.skd-search-input {
	width: 100%;
	padding: 14px 48px 14px 44px;
	border-radius: 12px;
	border: 1px solid rgba(11,22,36,0.06);
	background: #ffffff;
	color: var(--text-900);
	box-shadow: 0 6px 22px rgba(11,22,36,0.04);
	font-size: 15px;
	font-family: var(--font-sans);
	outline: none;
	transition: all 0.2s ease;
}

.skd-search-input:focus {
	border-color: rgba(11,37,65,0.12);
	box-shadow: 0 12px 36px rgba(11,37,65,0.06);
}

.skd-search-input.disabled {
	background: rgba(11,22,36,0.02);
	color: var(--muted);
	cursor: not-allowed;
	opacity: 0.6;
}

.skd-search-input::placeholder {
	color: var(--muted);
	opacity: 0.7;
}

.skd-search-icon {
	position: absolute;
	left: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-size: 18px;
	pointer-events: none;
	opacity: 0.6;
}

.skd-search-clear {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	background: rgba(11,22,36,0.06);
	border: none;
	border-radius: 50%;
	width: 28px;
	height: 28px;
	font-size: 20px;
	line-height: 1;
	cursor: pointer;
	color: var(--text-700);
	display: none;
	align-items: center;
	justify-content: center;
	transition: all 0.2s ease;
	padding: 0;
}

.skd-search-clear:hover {
	background: rgba(11,22,36,0.12);
	transform: translateY(-50%) scale(1.1);
}

.skd-search-clear:active {
	transform: translateY(-50%) scale(0.95);
}

/* Search info messages */
.skd-search-info {
	margin-top: 8px;
	font-size: 14px;
	min-height: 20px;
}

.skd-results-count {
	color: var(--success);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.skd-no-results {
	color: var(--danger);
	font-weight: 600;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

/* Force select/options readable colors (some browsers need explicit option styling) */
.skd-row select, .skd-row select option { color: var(--select-color); background: var(--select-bg); }

/* Stronger select/option rules to avoid white-on-white in various browsers/themes */
.skd-row select {
	color: var(--select-color) !important;
	background-color: var(--select-bg) !important;
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
}
.skd-row select option {
	color: var(--select-color) !important;
	background-color: var(--select-option-bg) !important;
}
.skd-row select::-ms-expand { display: none; }
.skd-row select:focus { outline: none; }

/* hide native select when enhanced, but allow mobile override */
.hidden-select { display: none !important; }

/* on small screens, prefer native select for platform UI */
@media (max-width:640px) {
	.custom-select { display: none !important; }
	.hidden-select { display: block !important; }
}

/* Custom select component styles */
.custom-select { position: relative; width: 100%; }
.custom-selected {
	width: 100%;
	text-align: left;
	padding: 14px 16px;
	border-radius: 12px;
	border: 1px solid rgba(11,22,36,0.06);
	background: var(--select-bg);
	color: var(--select-color);
	cursor: pointer;
	font-size: 15px;
	box-shadow: 0 6px 22px rgba(11,22,36,0.04);
}
.custom-selected::after{ content: '\25BE'; float:right; margin-top:2px; opacity:0.8; }
.custom-options{
	position: absolute;
	left:0; right:0;
	margin-top:8px;
	background: #ffffff !important;
	border-radius:10px;
	box-shadow: 0 18px 40px rgba(11,22,36,0.12);
	z-index: 1200;
	display: none;
	list-style: none;
	padding:6px 6px;
	max-height: 260px; overflow:auto;
	border: 1px solid rgba(11,22,36,0.08);
}
.custom-option{ 
	padding:10px 12px; 
	border-radius:8px; 
	cursor:pointer; 
	color: #0b1220 !important;
	background: #ffffff !important;
}
.custom-option.selected, .custom-option:hover{ 
	background: rgba(11,22,36,0.08) !important;
	color: #0b1220 !important;
}

/* ensure options are visible on dark backgrounds too */
@media (prefers-color-scheme: dark){
	.custom-selected { background: var(--select-bg); color: var(--select-color); border:1px solid rgba(255,255,255,0.04); box-shadow:none; }
	.custom-options { background: var(--select-option-bg); }
	.custom-option { color: var(--select-color); }
}

.skd-button { display:inline-block; margin-top:8px; background:var(--navy); color:#fff; padding:12px 22px; border-radius:12px; border:none; cursor:pointer; font-weight:700; letter-spacing:0.5px; font-size:15px; box-shadow: 0 10px 30px rgba(11,37,65,0.14); }
.skd-button:hover { transform: translateY(-1px); box-shadow: 0 20px 48px rgba(11,37,65,0.18); }

/* Result base */
.skd-result { padding:24px; border-radius:14px; margin-top:18px; transition: all 220ms ease; }
.skd-result .skd-title { font-family: var(--font-serif); font-size:20px; margin:0 0 10px 0; font-weight:700; }
.skd-result .skd-body { font-size:15px; line-height:1.65; color:var(--text-700); }

/* In-scope (alert / kırmızı) */
.skd-result.in-scope {
	background: linear-gradient(180deg, var(--danger-soft) 0%, #fff1f1 100%);
	border-left: 6px solid var(--danger);
	color: #4a1b1b;
}
.skd-result.in-scope .skd-title { color:var(--danger); font-weight:800; }
.skd-result.in-scope .skd-scope {
	display:inline-block;
	padding:8px 16px;
	border-radius:999px;
	background: var(--scope-bg-danger);
	color: var(--scope-text-danger);
	font-weight:800;
	box-shadow: 0 10px 28px rgba(161,42,47,0.06);
}
.skd-result.in-scope .gtip-box {
	margin-top:14px;
	padding:14px;
	border-radius:10px;
	background:#fff8f8;
	border:1px dashed rgba(161,42,47,0.16);
	color:#7a2a2a;
	font-weight:600;
}
.skd-result.in-scope .skd-note { margin-top:10px; color:#4b2323; font-weight:600; }

/* Out-of-scope (positive / green) */
.skd-result.out-of-scope {
	background: linear-gradient(180deg, var(--success-soft) 0%, #f1fff4 100%);
	border-left: 6px solid var(--success);
	color: #063b28;
}
.skd-result.out-of-scope .skd-title { color:var(--success); font-weight:800; }
.skd-result.out-of-scope .skd-scope {
	display:inline-block;
	padding:8px 16px;
	border-radius:999px;
	background: var(--scope-bg-success);
	color: var(--scope-text_success, var(--scope-text-success));
	font-weight:800;
	box-shadow: 0 10px 28px rgba(44,138,84,0.06);
}
.skd-result.out-of-scope .gtip-box {
	margin-top:14px;
	padding:14px;
	border-radius:10px;
	background:#f8fff9;
	border:1px dashed rgba(44,138,84,0.12);
	color:#0b6b3a;
	font-weight:600;
}
.skd-result.out-of-scope .skd-note { margin-top:10px; color:#0b563b; font-style:italic; font-weight:600; }

/* small helpers */
.skd-body p { margin:10px 0; }
.skd-gtip { margin-top:12px; }
.gtip-box { font-size:14px; line-height:1.5; }

/* Responsive tweaks */
@media (max-width:640px) {
	.skd-checker { padding:18px; }
	.skd-row select { padding:12px; }
	.skd-button { width:100%; text-align:center; }
	.skd-result { padding:16px; }
	
	/* Mobile search adjustments */
	.skd-search-input {
		padding: 12px 44px 12px 40px;
		font-size: 14px;
	}
	
	.skd-search-icon {
		left: 14px;
		font-size: 16px;
	}
	
	.skd-search-clear {
		width: 26px;
		height: 26px;
		font-size: 18px;
	}
	
	.skd-search-info {
		font-size: 13px;
	}
}

/* Dark mode support using system preference */
@media (prefers-color-scheme: dark) {
	:root {
		--card-bg-start: #071226;
		--card-bg-end: #03121a;
		--text-900: #e6eef6;
		--text-700: #cbe3f2;
		--muted: #9fb2c6;
		--navy: #0b2540;
		--gold: #b78f32;
		--danger: #ff7b7b;
		--danger-soft: #2b1010;
		--success: #49b574;
		--success-soft: #052518;
		/* select overrides for dark mode */
		--select-bg: rgba(255,255,255,0.03);
		--select-option-bg: rgba(255,255,255,0.02);
		--select-color: var(--text-900);
	}

	.skd-checker {
		background: linear-gradient(180deg, var(--card-bg-start) 0%, var(--card-bg-end) 100%);
		border: 1px solid rgba(255,255,255,0.04);
		box-shadow: 0 18px 50px rgba(0,0,0,0.6);
		color: var(--text-900);
	}

	.skd-row label { color: var(--text-900); }
	.skd-row select { background: var(--select-bg); color: var(--select-color); border:1px solid rgba(255,255,255,0.04); box-shadow:none; }
	.skd-row select option { background: var(--select-option-bg); color: var(--select-color); }
	.skd-button { background: linear-gradient(90deg, #0f2d48, #071b33); box-shadow: 0 10px 30px rgba(2,6,23,0.6); }

	/* Dark mode search styles */
	.skd-search-input {
		background: var(--select-bg);
		color: var(--text-900);
		border: 1px solid rgba(255,255,255,0.04);
		box-shadow: none;
	}
	
	.skd-search-input:focus {
		border-color: rgba(255,255,255,0.08);
		box-shadow: 0 8px 24px rgba(0,0,0,0.4);
	}
	
	.skd-search-input.disabled {
		background: rgba(255,255,255,0.01);
		color: var(--muted);
	}
	
	.skd-search-icon {
		opacity: 0.5;
	}
	
	.skd-search-clear {
		background: rgba(255,255,255,0.08);
		color: var(--text-900);
	}
	
	.skd-search-clear:hover {
		background: rgba(255,255,255,0.14);
	}
	
	.skd-results-count {
		color: var(--success);
	}
	
	.skd-no-results {
		color: var(--danger);
	}

	.skd-result { background: rgba(255,255,255,0.03); border-left-color: rgba(255,255,255,0.12); }

	.skd-result.in-scope {
		background: linear-gradient(180deg, rgba(255,120,120,0.06), rgba(255,90,90,0.04));
		border-left: 6px solid var(--danger);
		color: var(--text-900);
	}

	.skd-result.in-scope .gtip-box { background: rgba(255,120,120,0.03); border:1px dashed rgba(255,120,120,0.12); }

	.skd-result.out-of-scope {
		background: linear-gradient(180deg, rgba(60,160,100,0.04), rgba(34,120,70,0.03));
		border-left: 6px solid var(--success);
		color: var(--text-900);
	}

	.skd-result.out-of-scope .gtip-box { background: rgba(60,160,100,0.03); border:1px dashed rgba(60,160,100,0.08); }

	/* Dark mode: ensure pill and select readability */
	.skd-result.in-scope .skd-scope {
		background: rgba(255,120,120,0.08) !important;
		color: var(--danger) !important;
	}
	.skd-result.out-of-scope .skd-scope {
		background: rgba(60,160,100,0.06) !important;
		color: var(--success) !important;
	}


}