/* World Time Clocks styles */
.ttb-wtc{--bg:#fff;--fg:#111;--muted:#666;--accent:#2563eb;--panel:#f7f7f8;--border:#e5e7eb}
.ttb-wtc.dark{--bg:#0f1115;--fg:#eaeef5;--muted:#9aa3b2;--accent:#60a5fa;--panel:#171a22;--border:#2a2f3a}
.ttb-wtc *{box-sizing:border-box}
.ttb-wtc{font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial, "Apple Color Emoji","Segoe UI Emoji"; background:var(--bg); color:var(--fg); border:1px solid var(--border); border-radius:16px; padding:16px; box-shadow:0 10px 24px rgba(0,0,0,.08)}
.ttb-wtc .ttb-wtc-tabs{display:flex; gap:8px; margin-bottom:12px; border-bottom:1px solid var(--border)}
.ttb-wtc .ttb-wtc-tab{appearance:none; background:transparent; border:none; padding:10px 14px; border-bottom:3px solid transparent; cursor:pointer; color:var(--muted); font-weight:600}
.ttb-wtc .ttb-wtc-tab.is-active{color:var(--fg); border-color:var(--accent)}
.ttb-wtc .ttb-wtc-panel{display:none; padding:8px 0}
.ttb-wtc .ttb-wtc-panel.is-active{display:block}
.ttb-wtc .ttb-wtc-field{position:relative; margin:10px 0}
.ttb-wtc .ttb-wtc-field input{width:100%; padding:12px 12px; border:1px solid var(--border); border-radius:10px; background:var(--panel); color:var(--fg); outline:none}
.ttb-wtc .ttb-wtc-field input:focus{border-color:var(--accent); box-shadow:0 0 0 4px rgba(37,99,235,.12)}
.ttb-wtc .ttb-wtc-actions{display:flex; gap:8px; margin:6px 0 14px}
.ttb-wtc button{padding:10px 14px; border-radius:10px; border:1px solid var(--border); background:var(--accent); color:#fff; font-weight:600; cursor:pointer}
.ttb-wtc button.ttb-wtc-ghost{background:transparent; color:var(--fg)}
.ttb-wtc .ttb-wtc-note{font-size:12px; color:var(--muted); margin-bottom:10px}
.ttb-wtc .ttb-wtc-suggestions{position:absolute; top:100%; left:0; right:0; background:var(--bg); border:1px solid var(--border); border-top:none; z-index:50; max-height:220px; overflow:auto; border-radius:0 0 10px 10px; display:none}
.ttb-wtc .ttb-wtc-suggestions.is-open{display:block}
.ttb-wtc .ttb-wtc-suggestion{padding:10px 12px; cursor:pointer; border-top:1px solid var(--border)}
.ttb-wtc .ttb-wtc-suggestion:hover{background:var(--panel)}
.ttb-wtc .ttb-wtc-results{display:grid; grid-template-columns:repeat(auto-fill, minmax(220px,1fr)); gap:16px; margin-top:10px}
.ttb-wtc .ttb-wtc-clock{background:var(--panel); border:1px solid var(--border); border-radius:14px; padding:12px; display:flex; flex-direction:column; align-items:center; gap:10px; box-shadow:0 6px 16px rgba(0,0,0,.06)}
.ttb-wtc .ttb-wtc-title{font-weight:700; font-size:14px}
.ttb-wtc .ttb-wtc-sub{color:var(--muted); font-size:12px}

/* Clock face container */
.ttb-wtc .face-wrap{position:relative; display:grid; place-items:center}
.ttb-wtc .face-wrap svg{display:block}

/* Luxury theme extras */
.ttb-wtc .luxury .bezel{filter: drop-shadow(0 2px 3px rgba(0,0,0,.25));}
.ttb-wtc .luxury .glass{opacity:.25}
.ttb-wtc .dark .glass{opacity:.18}

/* Suggestions scrollbar */
.ttb-wtc .ttb-wtc-suggestions::-webkit-scrollbar{width:8px}
.ttb-wtc .ttb-wtc-suggestions::-webkit-scrollbar-thumb{background:var(--border); border-radius:8px}

/* Fixed clock box size (160px) */
.ttb-wtc .ttb-wtc-clock .face-wrap{
  width:160px !important;
  height:160px !important;
}

/* Digital time below the analog face */
.ttb-wtc .ttb-wtc-digital{
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size:14px;
  padding:6px 10px;
  background: var(--panel);
  border:1px solid var(--border);
  border-radius:8px;
  color:var(--fg);
}