/* VietCALL: the timezone control in the top bar (signed-in users) as a live clock, and its pop-up in the convention's
   look. Button markup: templates/core/_session_bar.html (.vc-tz-button); time, offset and hands: js/vietcall-event-chrome.js.
   The pop-up is Indico's own qTip with #tz-selector-widget inside. 2026-11-12. */

/* ---- Button ---- */
.i-button.vc-tz-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: auto !important;
  min-height: 32px;
  padding: 3px 10px 3px 8px !important;
  line-height: 1.1 !important;
  white-space: nowrap;
}
.i-button.vc-tz-button::before { display: none !important; }    /* Indico's clock glyph: the SVG replaces it */
/* Visitors (Login shown) see only Login and Create account in the bar, as before; the date line's chip gives the timezone. */
.page-header:has(.session-bar a.icon-enter) .i-button.vc-tz-button { display: none !important; }
.i-button.vc-tz-button.arrow::after { margin-left: 2px !important; opacity: 0.8; }
.vc-tz-clock {
  flex: none;
  width: 22px;
  height: 22px;
  overflow: visible;
}
.vc-tz-clock circle:first-child { fill: none; stroke: currentColor; stroke-width: 1.6; }
.vc-tz-clock line { stroke: currentColor; stroke-linecap: round; transition: transform 0.6s ease; }
.vc-tz-clock .vc-tz-h { stroke-width: 2.2; }
.vc-tz-clock .vc-tz-m { stroke-width: 1.6; }
.vc-tz-clock .vc-tz-dot { fill: #ff6b5f; }
.vc-tz-text { display: inline-flex; flex-direction: column; align-items: flex-start; gap: 1px; text-align: left; }
.vc-tz-time { font-size: 14px; font-weight: 700; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }
.vc-tz-time:empty { display: none; }
.vc-tz-zone { font-size: 10.5px; font-weight: 500; opacity: 0.8; }
/* Before the script runs, the zone name alone reads as before. */
.vc-tz-button:not(.is-live) .vc-tz-zone { font-size: inherit; opacity: 1; }

/* ---- Pop-up ---- */
.qtip:has(#tz-selector-widget) {
  max-width: 340px !important;
  border: 1px solid #e8e3dd !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(28, 35, 57, 0.22) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.qtip:has(#tz-selector-widget) .qtip-tip { display: none !important; }
.qtip:has(#tz-selector-widget) .qtip-content { padding: 0 !important; }
#tz-selector-widget > div { width: 300px; padding: 18px 20px 20px; box-sizing: border-box; color: #2c2c2c; }
#tz-selector-widget h2 {
  margin: 0 0 4px !important;
  padding: 0 !important;
  border: 0 !important;
  font-family: 'Playfair Display', Georgia, serif !important;
  font-size: 20px !important;
  font-weight: 600 !important;
  color: #323e69 !important;
}
#tz-selector-widget #tz-profile-setting { margin: 0 0 14px; font-size: 12.5px; color: #5f6368; }
#tz-selector-widget #tz-profile-setting span + span { color: #323e69; font-weight: 600; }
#tz-selector-widget fieldset { margin: 0 0 12px; padding: 0; border: 0; }
#tz-selector-widget legend { margin: 0 0 6px; padding: 0; font-size: 11.5px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #8a8f9c; }
/* Event/category · Profile · Custom as a segmented control */
#tz-selector-widget .options {
  display: flex !important;
  gap: 2px;
  padding: 3px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #f1efeb !important;
}
/* Indico shows the labels as display: contents and wraps the row; one row of three equal segments instead. */
#tz-selector-widget .options { flex-wrap: nowrap !important; }
#tz-selector-widget .options label { display: flex !important; flex: 1 1 auto; min-width: 0; margin: 0 !important; cursor: pointer; }
#tz-selector-widget .options label span { flex: 1 1 auto; min-width: 0; }
#tz-selector-widget .options label span::before { display: none !important; }   /* Indico's check mark */
#tz-selector-widget .options input { position: absolute; opacity: 0; pointer-events: none; }
#tz-selector-widget .options label span {
  display: block;
  padding: 7px 8px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: transparent !important;
  color: #5f6368 !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  text-align: center;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
#tz-selector-widget .options label:hover span { color: #323e69 !important; }
#tz-selector-widget .options input:checked + span { background: #323e69 !important; color: #fff !important; box-shadow: 0 2px 6px rgba(50, 62, 105, 0.3); }
#tz-selector-widget .options input:focus-visible + span { outline: 2px solid rgba(50, 62, 105, 0.35); outline-offset: 1px; }
/* Custom zone list */
#tz-selector-widget #tz-custom-field { display: block; margin: 0 0 12px; }
#tz-selector-widget #tz-custom-field > span { display: block; margin: 0 0 6px; font-size: 12.5px; font-weight: 600; color: #2c2c2c; }
#tz-selector-widget select {
  width: 100% !important;
  height: 190px;
  padding: 4px !important;
  border: 1px solid #cfd4de !important;
  border-radius: 8px !important;
  background: #fff !important;
  font: inherit !important;
  font-size: 13px !important;
  color: #2c2c2c;
}
#tz-selector-widget select:disabled { opacity: 0.5; }
#tz-selector-widget select option { padding: 4px 8px; border-radius: 5px; }
#tz-selector-widget select option:checked { background: #323e69 linear-gradient(#323e69, #323e69); color: #fff; }
#tz-selector-widget #tz-remember-setting { display: flex; align-items: center; gap: 8px; margin: 0 0 14px; font-size: 13px; color: #2c2c2c; cursor: pointer; }
#tz-selector-widget #tz-remember-setting input { width: 16px; height: 16px; margin: 0; accent-color: #323e69; }
#tz-selector-widget button[data-href] {
  display: block;
  width: 100%;
  height: 42px;
  margin: 0;
  border: 0 !important;
  border-radius: 8px !important;
  background: #bb0400 !important;
  box-shadow: none !important;
  color: #fff !important;
  font: inherit !important;
  font-size: 14.5px !important;
  font-weight: 700 !important;
  text-shadow: none !important;
  cursor: pointer;
}
#tz-selector-widget button[data-href]:hover,
#tz-selector-widget button[data-href]:focus-visible { background: #d62839 !important; }
#tz-selector-widget button[data-href]:disabled { opacity: 0.45; cursor: default; }

/* Phones: the strip is narrow, so only the clock and the time show. */
@media (max-width: 620px) {
  .i-button.vc-tz-button.is-live .vc-tz-zone { display: none; }
  .qtip:has(#tz-selector-widget) { max-width: calc(100vw - 24px) !important; }
}

/* ---- Account button (signed in): full name and photo, a white pill on the navy bar ---- */
.page-header .session-bar .i-button.i-button.i-button.vc-user-button {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  height: 36px !important;
  max-width: 260px;
  margin-left: 4px !important;
  padding: 0 12px 0 4px !important;
  border: 0 !important;
  border-radius: 999px !important;
  background: #fff !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25) !important;
  color: #323e69 !important;
  font-weight: 700 !important;
  line-height: 36px !important;
}
.page-header .session-bar .i-button.i-button.i-button.vc-user-button::before { display: none !important; }
.page-header .session-bar .i-button.i-button.i-button.vc-user-button::after { color: #323e69 !important; }
.page-header .session-bar .i-button.i-button.i-button.vc-user-button:hover,
.page-header .session-bar .i-button.i-button.i-button.vc-user-button:focus-visible,
.page-header .session-bar .i-button.i-button.i-button.vc-user-button.open { background: #eef0f6 !important; }
.i-button.vc-user-button img.vc-user-avatar {
  flex: none;
  width: 28px !important;
  height: 28px !important;
  border: 2px solid #bb0400 !important;
  border-radius: 50% !important;
  background: #eef0f6;
  object-fit: cover;
}
.vc-user-name { overflow: hidden; font-size: 13.5px; text-overflow: ellipsis; white-space: nowrap; }
/* Narrow windows, where the buttons sit on a light strip: the pill turns navy. */
@media (max-width: 1100px) {
  html body .event-page-header .main-action-bar .session-bar .i-button.i-button.i-button.i-button.vc-user-button { background: #323e69 !important; color: #fff !important; }
  html body .event-page-header .main-action-bar .session-bar .i-button.i-button.i-button.i-button.vc-user-button::after { color: #fff !important; }
}
@media (max-width: 620px) {
  .page-header .session-bar .i-button.i-button.i-button.vc-user-button { max-width: 190px; }
}

/* Account pop-up: same card as the timezone pop-up */
.qtip:has(#user-settings-widget) {
  border: 1px solid #e8e3dd !important;
  border-radius: 12px !important;
  background: #fff !important;
  box-shadow: 0 18px 44px rgba(28, 35, 57, 0.22) !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
.qtip:has(#user-settings-widget) .qtip-tip { display: none !important; }
.qtip:has(#user-settings-widget) .qtip-content { padding: 0 !important; }
#user-settings-widget { min-width: 250px; padding: 14px 16px !important; box-sizing: border-box; }
#user-settings-widget .vc-user-card { display: flex; align-items: center; gap: 12px; margin-bottom: 4px; }
.vc-user-card-avatar { flex: none; width: 44px; height: 44px; border: 2px solid #bb0400; border-radius: 50%; object-fit: cover; }
#user-settings-widget .settingsWidgetHeader {
  display: block;
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.25;
  color: #323e69;
}
.vc-user-card-email { display: block; font-size: 12px; color: #5f6368; overflow-wrap: anywhere; }
#user-settings-widget .settingsSeparator { margin: 10px 0 6px !important; border-color: #ebe7e1 !important; }
#user-settings-widget .settingsWidgetSection { padding: 0 !important; }
#user-settings-widget .settingsWidgetSection > a {
  display: block;
  padding: 7px 8px;
  border-radius: 6px;
  color: #2c2c2c !important;
  font-size: 13.5px;
  font-weight: 600;
  text-decoration: none;
}
#user-settings-widget .settingsWidgetSection > a:hover { background: #f3f1ed; color: #323e69 !important; }
#user-settings-widget .settingsWidgetSection:last-child > a { color: #bb0400 !important; }

/* ---- Event date line (js/vietcall-event-chrome.js builds .vc-when): dates, venue and timezone as chips ---- */
#event-search-box { display: none !important; }    /* the timetable has its own search; Indico's box sat beside the dates */
.confSubTitle .datePlace.vc-has-chips > .date,
.confSubTitle .datePlace.vc-has-chips > .place,
.confSubTitle .datePlace.vc-has-chips > .timezone { display: none !important; }
.confSubTitle .datePlace.vc-has-chips { width: 100% !important; max-width: none !important; }
div.confSubTitle.confSubTitle:has(.vc-when) { flex: 1 1 auto; max-width: none !important; }
.vc-when { display: flex; flex-wrap: wrap; gap: 12px; padding: 4px 0; }
.vc-chip {
  display: inline-flex;
  align-items: center;
  gap: 11px;
  min-width: 0;
  padding: 7px 16px 7px 7px;
  border: 1px solid #e1e5ee;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(50, 62, 105, 0.06);
  color: #323e69 !important;
  font-family: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  text-decoration: none !important;
}
a.vc-chip:hover { border-color: #c9cfdf; box-shadow: 0 4px 14px rgba(50, 62, 105, 0.12); }
a.vc-chip:hover .vc-chip-main { text-decoration: underline; }
.vc-chip-icon,
.vc-chip .vc-tz-clock {
  flex: none;
  box-sizing: border-box;
  width: 38px !important;
  height: 38px !important;
  padding: 8px;
  border-radius: 50%;
  background: #eef0f6;
  overflow: visible;
}
.vc-chip-icon { fill: none; stroke: #323e69; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.vc-chip-tz { color: #bb0400 !important; }
.vc-chip-tz .vc-tz-clock { background: #fbeaea; }
.vc-chip-text { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.vc-chip-main { overflow: hidden; color: #323e69; font-size: 14.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.vc-chip-sub { overflow: hidden; color: #6b7182; font-size: 12.5px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.vc-chip-tz .vc-tz-time { font-size: inherit; font-weight: 700; color: #bb0400; letter-spacing: 0; }
@media screen {
  html.vc-dark .vc-chip { border-color: var(--vcd-line); background: var(--vcd-raised); box-shadow: none; }
  html.vc-dark .vc-chip-main { color: var(--vcd-text); }
  html.vc-dark .vc-chip-sub { color: var(--vcd-muted); }
  html.vc-dark .vc-chip-icon, html.vc-dark .vc-chip .vc-tz-clock { background: var(--vcd-fill); }
  html.vc-dark .vc-chip-icon { stroke: #fff; }
  html.vc-dark .vc-chip-tz, html.vc-dark .vc-chip-tz .vc-tz-time { color: var(--vcd-accent) !important; }
  html.vc-dark .vc-chip-tz .vc-tz-clock { background: rgba(255, 155, 147, 0.16); }
}
@media (max-width: 760px) {
  .vc-when { flex-direction: column; gap: 8px; }
  .vc-chip { width: 100%; box-sizing: border-box; }
  .vc-chip-main, .vc-chip-sub { white-space: normal; overflow: visible; }
}

/* ---- Pop-ups on phones: Indico places them by the button, which pushed the account menu past the right edge. ---- */
@media (max-width: 620px) {
  .qtip:has(#user-settings-widget),
  .qtip:has(#tz-selector-widget) {
    left: 8px !important;
    right: auto !important;
    width: calc(100vw - 16px) !important;
    max-width: none !important;
  }
  #user-settings-widget { min-width: 0; width: 100%; }
  #tz-selector-widget > div { width: 100%; }
}
#user-settings-widget .settingsWidgetSection a,
#user-settings-widget .settingsWidgetSection button { text-align: left !important; }
#user-settings-widget .vc-user-card > div { min-width: 0; }
#user-settings-widget .settingsWidgetHeader { overflow-wrap: anywhere; }