/* Universe World Clock Pro - Frontend Styles */

.uwc-widget {
	--uwc-accent: #6C5CE7;
	--uwc-accent-2: #00cec9;
	--uwc-bg: #eef0fb;
	--uwc-bg-2: #f7f4fd;
	--uwc-card: rgba(255, 255, 255, 0.55);
	--uwc-card-border: rgba(255, 255, 255, 0.7);
	--uwc-text: #1b1c2e;
	--uwc-text-soft: #5c5e77;
	--uwc-shadow: 0 20px 50px -20px rgba(76, 60, 150, 0.35);
	--uwc-radius: 22px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif;
	max-width: 760px;
	margin: 0 auto;
	color: var(--uwc-text);
	box-sizing: border-box;
	background:
		radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--uwc-accent) 18%, transparent), transparent 45%),
		radial-gradient(circle at 90% 90%, color-mix(in srgb, var(--uwc-accent-2) 18%, transparent), transparent 45%),
		linear-gradient(160deg, var(--uwc-bg), var(--uwc-bg-2));
	padding: 28px;
	border-radius: calc(var(--uwc-radius) + 6px);
	box-shadow: var(--uwc-shadow);
}
.uwc-widget * { box-sizing: border-box; }

.uwc-widget.uwc-theme-dark {
	--uwc-bg: #0f0e1a;
	--uwc-bg-2: #171531;
	--uwc-card: rgba(255, 255, 255, 0.06);
	--uwc-card-border: rgba(255, 255, 255, 0.12);
	--uwc-text: #f2f1fb;
	--uwc-text-soft: #a9a8c6;
	--uwc-shadow: 0 20px 60px -20px rgba(0, 0, 0, 0.6);
}

/* Header / Search */
.uwc-header { margin-bottom: 18px; }
.uwc-search-wrap { position: relative; display: flex; align-items: center; }
.uwc-search-icon { position: absolute; left: 18px; color: var(--uwc-text-soft); pointer-events: none; }
.uwc-search-input {
	width: 100%;
	padding: 16px 52px;
	border-radius: 999px;
	border: 1px solid var(--uwc-card-border);
	background: var(--uwc-card);
	backdrop-filter: blur(14px);
	-webkit-backdrop-filter: blur(14px);
	font-size: 16px;
	color: var(--uwc-text);
	outline: none;
	transition: box-shadow .2s ease, border-color .2s ease;
}
.uwc-search-input::placeholder { color: var(--uwc-text-soft); }
.uwc-search-input:focus { border-color: var(--uwc-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--uwc-accent) 20%, transparent); }
.uwc-theme-toggle {
	position: absolute; right: 8px; width: 40px; height: 40px; border-radius: 50%;
	border: 1px solid var(--uwc-card-border); background: var(--uwc-card);
	color: var(--uwc-text); display: flex; align-items: center; justify-content: center; cursor: pointer;
}
.uwc-theme-toggle:hover { background: color-mix(in srgb, var(--uwc-accent) 15%, var(--uwc-card)); }

.uwc-autocomplete {
	position: absolute; top: calc(100% + 8px); left: 0; right: 0; z-index: 20;
	background: var(--uwc-bg-2); border: 1px solid var(--uwc-card-border); border-radius: 16px;
	box-shadow: var(--uwc-shadow); overflow: hidden; max-height: 300px; overflow-y: auto;
}
.uwc-ac-item { display: flex; align-items: center; gap: 10px; padding: 12px 18px; cursor: pointer; font-size: 14px; }
.uwc-ac-item:hover, .uwc-ac-item.uwc-active { background: color-mix(in srgb, var(--uwc-accent) 12%, transparent); }
.uwc-ac-item .uwc-ac-country { color: var(--uwc-text-soft); font-size: 12px; margin-left: auto; }

/* Loader */
.uwc-loader { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 40px 0; color: var(--uwc-text-soft); }
.uwc-skeleton {
	width: 100%; max-width: 320px; height: 70px; border-radius: 16px;
	background: linear-gradient(90deg, color-mix(in srgb, var(--uwc-accent) 10%, transparent) 25%, color-mix(in srgb, var(--uwc-accent) 22%, transparent) 37%, color-mix(in srgb, var(--uwc-accent) 10%, transparent) 63%);
	background-size: 400% 100%; animation: uwc-shimmer 1.4s ease infinite;
}
@keyframes uwc-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }

.uwc-error {
	background: color-mix(in srgb, #ff5c5c 12%, transparent); border: 1px solid color-mix(in srgb, #ff5c5c 35%, transparent);
	color: #b3261e; padding: 14px 18px; border-radius: 14px; margin-bottom: 16px; font-size: 14px;
}
.uwc-theme-dark .uwc-error { color: #ff9c96; }

/* Result card */
.uwc-result { display: none; }
.uwc-result.uwc-visible { display: block; animation: uwc-fade-in .35s ease; }
@keyframes uwc-fade-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.uwc-result-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; gap: 12px; }
.uwc-city-info { display: flex; align-items: center; gap: 12px; }
.uwc-flag { font-size: 34px; line-height: 1; }
.uwc-city-name { margin: 0; font-size: 22px; font-weight: 700; }
.uwc-country-name { margin: 2px 0 0; color: var(--uwc-text-soft); font-size: 13px; }
.uwc-period-badge {
	padding: 8px 16px; border-radius: 999px; font-size: 13px; font-weight: 600;
	background: color-mix(in srgb, var(--uwc-accent) 16%, transparent); color: var(--uwc-accent); white-space: nowrap;
}

.uwc-clocks { display: grid; grid-template-columns: 1fr auto; gap: 20px; align-items: center; margin-bottom: 20px; }
.uwc-digital-clock {
	background: var(--uwc-card); border: 1px solid var(--uwc-card-border); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
	border-radius: var(--uwc-radius); padding: 26px; text-align: center;
}
.uwc-digital-time { display: block; font-size: clamp(32px, 8vw, 52px); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: 1px; }
.uwc-digital-time .uwc-colon { animation: uwc-blink 1s step-start infinite; }
@keyframes uwc-blink { 50% { opacity: 0.15; } }
.uwc-digital-date { display: block; margin-top: 8px; color: var(--uwc-text-soft); font-size: 14px; }

.uwc-analog-clock { width: 128px; height: 128px; flex-shrink: 0; }
.uwc-analog-svg { width: 100%; height: 100%; }
.uwc-analog-face { fill: var(--uwc-card); stroke: var(--uwc-card-border); stroke-width: 2; }
.uwc-analog-ticks line { stroke: var(--uwc-text-soft); stroke-width: 2; }
.uwc-hand { stroke-linecap: round; }
.uwc-hand-hour { stroke: var(--uwc-text); stroke-width: 6; }
.uwc-hand-minute { stroke: var(--uwc-text); stroke-width: 4; }
.uwc-hand-second { stroke: var(--uwc-accent); stroke-width: 2; }
.uwc-analog-center { fill: var(--uwc-accent); }

.uwc-details-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 20px; }
.uwc-detail {
	background: var(--uwc-card); border: 1px solid var(--uwc-card-border); border-radius: 14px; padding: 12px 14px;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.uwc-detail-wide { grid-column: 1 / -1; }
.uwc-detail-label { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--uwc-text-soft); margin-bottom: 4px; }
.uwc-detail-value { display: block; font-size: 14px; font-weight: 600; word-break: break-word; }

.uwc-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.uwc-action-btn {
	border: 1px solid var(--uwc-card-border); background: var(--uwc-card); color: var(--uwc-text);
	padding: 9px 14px; border-radius: 999px; font-size: 13px; cursor: pointer; transition: transform .12s ease, background .12s ease;
}
.uwc-action-btn:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--uwc-accent) 14%, var(--uwc-card)); }
.uwc-favorite-btn.uwc-active { color: #f5a623; border-color: #f5a623; }
.uwc-share-group { display: flex; gap: 8px; margin-left: auto; }

/* Sections: popular / history / favorites */
.uwc-section { margin-top: 22px; }
.uwc-section h4 { margin: 0 0 10px; font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--uwc-text-soft); display: flex; justify-content: space-between; align-items: center; }
.uwc-clear-history { background: none; border: none; color: var(--uwc-accent); cursor: pointer; font-size: 12px; text-transform: none; letter-spacing: 0; }
.uwc-chip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.uwc-chip {
	border: 1px solid var(--uwc-card-border); background: var(--uwc-card); border-radius: 999px; padding: 8px 14px;
	font-size: 13px; cursor: pointer; display: flex; align-items: center; gap: 6px; transition: transform .12s ease;
}
.uwc-chip:hover { transform: translateY(-1px); border-color: var(--uwc-accent); }

/* Weather panel */
.uwc-weather-panel {
	margin-top: 4px; margin-bottom: 20px; background: var(--uwc-card); border: 1px solid var(--uwc-card-border);
	border-radius: 16px; padding: 16px 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
	display: flex; flex-wrap: wrap; align-items: center; gap: 10px 20px;
}
.uwc-weather-temp { font-size: 22px; font-weight: 700; }
.uwc-weather-desc { color: var(--uwc-text-soft); font-size: 14px; }
.uwc-weather-grid { display: flex; gap: 16px; flex-wrap: wrap; font-size: 13px; color: var(--uwc-text-soft); margin-left: auto; }

/* Responsive */
@media (max-width: 560px) {
	.uwc-widget { padding: 18px; border-radius: 20px; }
	.uwc-clocks { grid-template-columns: 1fr; justify-items: center; }
	.uwc-details-grid { grid-template-columns: repeat(2, 1fr); }
	.uwc-result-top { flex-wrap: wrap; }
	.uwc-share-group { margin-left: 0; }
}

/* Print */
@media print {
	.uwc-header, .uwc-actions, .uwc-section, .uwc-loader { display: none !important; }
	.uwc-widget { box-shadow: none; background: #fff; color: #000; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
	.uwc-result.uwc-visible, .uwc-skeleton, .uwc-digital-time .uwc-colon { animation: none; }
}

/* ---------------- Time Difference Calculator ---------------- */
.uwc-tool-title { margin: 0 0 18px; font-size: 20px; font-weight: 700; }

.uwc-timediff-inputs { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; }
.uwc-timediff-inputs .uwc-search-wrap { flex: 1; }
.uwc-td-swap {
	flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
	background: var(--uwc-card); border: 1px solid var(--uwc-card-border); cursor: pointer; font-size: 16px;
}
.uwc-td-swap:hover { border-color: var(--uwc-accent); }

.uwc-td-result[hidden] { display: none; }
.uwc-td-cities-row { display: grid; grid-template-columns: 1fr auto 1fr; gap: 14px; align-items: center; margin-bottom: 14px; }
.uwc-td-city-card {
	background: var(--uwc-card); border: 1px solid var(--uwc-card-border); border-radius: 16px; padding: 18px; text-align: center;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.uwc-td-city-card h4 { margin: 0 0 6px; font-size: 15px; }
.uwc-td-city-card .uwc-digital-time { font-size: clamp(24px, 6vw, 32px); font-weight: 800; font-variant-numeric: tabular-nums; }
.uwc-td-city-card > div:last-child { color: var(--uwc-text-soft); font-size: 12px; margin-top: 6px; }
.uwc-td-diff-badge {
	background: color-mix(in srgb, var(--uwc-accent) 16%, transparent); color: var(--uwc-accent);
	padding: 10px 14px; border-radius: 14px; font-size: 13px; font-weight: 600; text-align: center; max-width: 140px;
}
.uwc-td-daynote { text-align: center; color: var(--uwc-text-soft); font-size: 13px; margin-bottom: 18px; }
.uwc-overlap-row {
	background: var(--uwc-card); border: 1px solid var(--uwc-card-border); border-radius: 12px; padding: 10px 14px;
	font-size: 13px; margin-bottom: 8px;
}
@media (max-width: 560px) {
	.uwc-td-cities-row { grid-template-columns: 1fr; }
	.uwc-td-diff-badge { max-width: none; }
}

/* ---------------- Meeting Planner ---------------- */
.uwc-mp-add-wrap { margin-bottom: 20px; }
.uwc-mp-timeline { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.uwc-mp-row { display: grid; grid-template-columns: 140px 1fr; gap: 12px; align-items: center; }
.uwc-mp-label { display: flex; flex-direction: column; font-size: 13px; position: relative; }
.uwc-mp-label strong { font-size: 14px; }
.uwc-mp-label span { color: var(--uwc-text-soft); font-size: 11px; }
.uwc-mp-remove {
	position: absolute; right: 0; top: 0; background: none; border: none; color: var(--uwc-text-soft);
	cursor: pointer; font-size: 16px; line-height: 1;
}
.uwc-mp-remove:hover { color: #d33; }
.uwc-mp-bar { display: grid; grid-template-columns: repeat(24, 1fr); gap: 2px; height: 28px; }
.uwc-mp-cell { background: var(--uwc-card); border: 1px solid var(--uwc-card-border); border-radius: 3px; }
.uwc-mp-business { background: color-mix(in srgb, var(--uwc-accent) 22%, var(--uwc-card)); }
.uwc-mp-now { outline: 2px solid var(--uwc-accent); outline-offset: -1px; }
@media (max-width: 560px) {
	.uwc-mp-row { grid-template-columns: 1fr; }
}

/* ---------------- Homepage Hero ---------------- */
.uwc-hero {
	--uwc-accent: #6C5CE7; --uwc-accent-2: #00cec9; --uwc-bg: #0f0e1a; --uwc-bg-2: #1b1836;
	--uwc-card: rgba(255,255,255,0.07); --uwc-card-border: rgba(255,255,255,0.14);
	--uwc-text: #f5f4ff; --uwc-text-soft: #b8b6d9;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Inter", Helvetica, Arial, sans-serif;
	position: relative; overflow: hidden; padding: 60px 24px; border-radius: 28px; color: var(--uwc-text);
	background:
		radial-gradient(circle at 20% 20%, color-mix(in srgb, var(--uwc-accent) 35%, transparent), transparent 50%),
		radial-gradient(circle at 85% 80%, color-mix(in srgb, var(--uwc-accent-2) 30%, transparent), transparent 50%),
		linear-gradient(160deg, var(--uwc-bg), var(--uwc-bg-2));
}
.uwc-hero::before {
	content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .5;
	background-image: radial-gradient(circle, rgba(255,255,255,0.06) 1px, transparent 1px);
	background-size: 26px 26px; animation: uwc-hero-drift 40s linear infinite;
}
@keyframes uwc-hero-drift { from { background-position: 0 0; } to { background-position: 260px 260px; } }
@media (prefers-reduced-motion: reduce) { .uwc-hero::before { animation: none; } }

.uwc-hero-inner { position: relative; max-width: 880px; margin: 0 auto; text-align: center; }
.uwc-hero-title { font-size: clamp(30px, 5vw, 46px); font-weight: 800; margin: 0 0 8px; }
.uwc-hero-subtitle { font-size: clamp(15px, 2vw, 18px); color: var(--uwc-text-soft); margin: 0 0 28px; }

.uwc-hero-search-wrap { max-width: 560px; margin: 0 auto 28px; }
.uwc-hero-search-wrap.uwc-hero-sticky { position: sticky; top: 12px; z-index: 50; }
.uwc-hero-search { position: relative; }
.uwc-hero-input {
	width: 100%; padding: 18px 52px; border-radius: 999px; border: 1px solid var(--uwc-card-border);
	background: rgba(255,255,255,0.9); color: #1b1c2e; font-size: 16px; outline: none; box-shadow: 0 20px 40px -16px rgba(0,0,0,0.5);
}
.uwc-hero-input:focus { box-shadow: 0 0 0 4px color-mix(in srgb, var(--uwc-accent) 35%, transparent); }
.uwc-hero-search .uwc-search-icon { color: #6b6b85; }
.uwc-hero-search .uwc-autocomplete { background: #fff; color: #1b1c2e; }

.uwc-hero-utc-gmt { display: flex; justify-content: center; gap: 16px; margin-bottom: 36px; flex-wrap: wrap; }
.uwc-hero-clock-card {
	background: var(--uwc-card); border: 1px solid var(--uwc-card-border); border-radius: 16px; padding: 14px 26px;
	backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.uwc-hero-clock-label { font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--uwc-text-soft); }
.uwc-hero-clock-time { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }

.uwc-hero-popular { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; text-align: left; }
.uwc-hero-popular-group h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .06em; color: var(--uwc-text-soft); margin: 0 0 12px; }
.uwc-hero-city-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.uwc-hero-city-card {
	display: flex; align-items: center; gap: 8px; background: var(--uwc-card); border: 1px solid var(--uwc-card-border);
	border-radius: 12px; padding: 12px 14px; color: var(--uwc-text); text-decoration: none; font-size: 14px;
	transition: transform .15s ease, background .15s ease;
}
.uwc-hero-city-card:hover { transform: translateY(-2px); background: color-mix(in srgb, var(--uwc-accent) 25%, var(--uwc-card)); }
.uwc-hero-city-flag { font-size: 18px; }
@media (max-width: 640px) {
	.uwc-hero { padding: 40px 16px; border-radius: 20px; }
	.uwc-hero-popular { grid-template-columns: 1fr; }
}

/* ---------------- SEO landing pages ---------------- */
.uwc-seo-page.uwc-container { max-width: 900px; margin: 0 auto; padding: 40px 20px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.uwc-breadcrumbs { font-size: 13px; color: #6b6b85; margin-bottom: 18px; }
.uwc-breadcrumbs a { color: inherit; text-decoration: none; }
.uwc-breadcrumbs a:hover { text-decoration: underline; }
.uwc-breadcrumbs span { margin: 0 6px; }
.uwc-seo-h1 { font-size: clamp(26px, 4vw, 36px); font-weight: 800; margin: 0 0 10px; }
.uwc-seo-lede { font-size: 16px; color: #4b4b63; margin: 0 0 28px; }

.uwc-seo-facts h2, .uwc-seo-tools h2, .uwc-seo-related h2, .uwc-seo-faq h2 { font-size: 20px; margin: 32px 0 14px; }
.uwc-fact-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; }
.uwc-fact-grid > div {
	background: rgba(108,92,231,0.06); border: 1px solid rgba(108,92,231,0.15); border-radius: 12px; padding: 12px 14px;
}
.uwc-fact-grid span { display: block; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #7a7a95; margin-bottom: 4px; }
.uwc-fact-grid b { font-size: 14px; }

.uwc-faq-item { border: 1px solid rgba(0,0,0,0.08); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.uwc-faq-item summary { cursor: pointer; font-weight: 600; }
.uwc-faq-item p { margin: 10px 0 0; color: #4b4b63; }

/* ---------------- Ad slots ---------------- */
.uwc-ad-slot { margin: 24px 0; display: flex; justify-content: center; }
.uwc-ad-placeholder {
	font-size: 12px; color: #9a9ab5; border: 1px dashed #c9c9e0; border-radius: 8px; padding: 10px 16px; width: 100%; text-align: center;
}