/* Time tools: /time-converter, /market-sessions and the home page box. Mobile first. */

.ms-page,
.ms-now-box {
    --ms-red: #c70906;
    --ms-ink: #161e2d;
    --ms-muted: #5c6368;
    --ms-line: #e4e4e4;
    --ms-soft: #f3f7fd;
    --ms-open: #0b7a55;
    --ms-open-bg: #e3f6ee;
    --ms-lunch: #8a5a00;
    --ms-lunch-bg: #fff3d6;
    --ms-closed: #5c6368;
    --ms-closed-bg: #eef0f2;
}

.ms-page { overflow-x: clip; }

/* Live parts are hidden until the script runs; the static table is always shown. */
.ms-live { display: none; }
.ms-js .ms-live { display: block; }

.ms-hero .breadcrumb-content { margin-bottom: 0; }
.ms-hero .title { font-size: 28px; line-height: 1.25; }
.ms-hero-sub { margin: 8px auto 0; max-width: 560px; opacity: .9; }

/* ---------- Live clock ---------- */
.ms-js .ms-clock {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 12px;
    margin-top: 24px;
}
.ms-clock-main,
.ms-clock-utc {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(255, 255, 255, .12);
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 16px;
    color: #fff;
    padding: 12px 20px;
    min-width: 0;
}
.ms-clock-main { flex: 1 1 100%; }
.ms-clock-utc { flex: 1 1 100%; }
.ms-clock-label { font-size: 12px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; opacity: .85; }
.ms-clock-time { font-size: 40px; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; }
.ms-clock-time-sm { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.ms-clock-date { font-size: 13px; opacity: .9; text-align: center; }

/* ---------- Sections ---------- */
.ms-section { padding-top: 48px; padding-bottom: 48px; }
.ms-section-alt { background: var(--ms-soft); }
.ms-head { margin-bottom: 20px; }
.ms-h2 { font-size: 24px; line-height: 1.3; margin-top: 4px; }
.ms-h3 { font-size: 17px; line-height: 1.35; margin: 0; }
.ms-small { font-size: 13px; color: var(--ms-muted); }
.ms-label { display: block; font-weight: 700; font-size: 14px; margin-bottom: 6px; color: var(--ms-ink); }

/* ---------- Cards ---------- */
.ms-card {
    --ms-accent: var(--ms-red);
    background: #fff;
    border: 1px solid var(--ms-line);
    border-top: 4px solid var(--ms-accent);
    border-radius: 14px;
    padding: 16px;
    height: 100%;
    box-shadow: 0 6px 18px rgba(22, 30, 45, .05);
}
.ms-card.is-open { box-shadow: 0 8px 22px rgba(11, 122, 85, .14); }
.ms-card-top { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 10px; }
.ms-hours { font-weight: 700; color: var(--ms-ink); margin-bottom: 4px; font-variant-numeric: tabular-nums; }
.ms-countdown { font-size: 14px; color: var(--ms-ink); margin-bottom: 6px; font-variant-numeric: tabular-nums; min-height: 1.4em; }

.ms-badge {
    display: inline-block;
    flex-shrink: 0;
    border-radius: 999px;
    padding: 3px 10px;
    font-size: 12px;
    font-weight: 700;
    white-space: nowrap;
    border: 1px solid transparent;
}
.ms-badge-open { color: var(--ms-open); background: var(--ms-open-bg); border-color: #a8e0c9; }
.ms-badge-lunch { color: var(--ms-lunch); background: var(--ms-lunch-bg); border-color: #f0d38f; }
.ms-badge-closed { color: var(--ms-closed); background: var(--ms-closed-bg); border-color: #d6dade; }

.ms-overlap { --ms-accent: var(--ms-red); height: auto; }
.ms-overlap.is-open { background: #fff5f5; border-color: #f3c2c1; border-top-color: var(--ms-red); }

/* Forex week banner */
.ms-week {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-left: 5px solid var(--ms-closed);
    border-radius: 14px;
    padding: 14px 16px;
}
.ms-week.is-open { border-left-color: var(--ms-open); }
.ms-week-main { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; }
.ms-week-main strong { font-size: 16px; color: var(--ms-ink); }
.ms-week-main .ms-countdown { margin: 0; }
.ms-week-times { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 10px 0 4px; }
.ms-week-times dt { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ms-muted); }
.ms-week-times dd { margin: 0; font-weight: 700; color: var(--ms-ink); }
.ms-week-times small { font-weight: 400; color: var(--ms-muted); }

/* ---------- Timeline ---------- */
.ms-tl-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 14px;
    padding: 12px 12px 8px;
}
.ms-tl-scroll:focus-visible { outline: 2px solid var(--ms-red); outline-offset: 2px; }
.ms-tl { position: relative; min-width: 760px; --ms-tl-label: 150px; }
.ms-tl-row { display: flex; align-items: center; min-height: 30px; }
.ms-tl-split { margin-top: 10px; padding-top: 10px; border-top: 1px dashed var(--ms-line); }
.ms-tl-label {
    flex: 0 0 var(--ms-tl-label);
    font-size: 12px;
    font-weight: 700;
    color: var(--ms-ink);
    padding-right: 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.ms-tl-track {
    position: relative;
    flex: 1 1 auto;
    height: 18px;
    border-radius: 6px;
    background:
        repeating-linear-gradient(to right, transparent 0, transparent calc(100% / 24 - 1px), #eef0f2 calc(100% / 24 - 1px), #eef0f2 calc(100% / 24));
    background-color: #f8f9fb;
}
.ms-tl-axis .ms-tl-track { background: none; height: 20px; }
.ms-tl-tick {
    position: absolute;
    top: 0;
    transform: translateX(-50%);
    font-size: 11px;
    color: var(--ms-muted);
    font-variant-numeric: tabular-nums;
}
.ms-tl-tick:first-child { transform: none; }
.ms-tl-tick:last-child { transform: translateX(-100%); }
.ms-tl-bar { position: absolute; top: 2px; bottom: 2px; border-radius: 5px; opacity: .9; }
.ms-tl-nowwrap { position: absolute; top: 0; bottom: 0; left: var(--ms-tl-label); right: 0; pointer-events: none; }
.ms-tl-now { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--ms-red); }
.ms-tl-now-label {
    position: absolute;
    top: -2px;
    left: 4px;
    background: var(--ms-red);
    color: #fff;
    font-size: 10px;
    font-weight: 700;
    padding: 0 4px;
    border-radius: 4px;
    font-variant-numeric: tabular-nums;
}

/* ---------- Converter ---------- */
.ms-quick-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.ms-quick {
    border: 1px solid var(--ms-line);
    background: #fff;
    color: var(--ms-ink);
    border-radius: 999px;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    min-height: 36px;
}
.ms-quick:hover { border-color: var(--ms-red); color: var(--ms-red); }
.ms-quick[aria-pressed="true"] { background: var(--ms-red); border-color: var(--ms-red); color: #fff; }
.ms-quick:focus-visible,
.tt-remove:focus-visible,
.tt-link-card:focus-visible,
.ms-btn:focus-visible { outline: 2px solid var(--ms-ink); outline-offset: 2px; }
.ms-conv-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 14px; }
.ms-btn { padding: 10px 18px; min-height: 44px; }

.ms-daydiff {
    display: inline-block;
    border-radius: 999px;
    padding: 2px 8px;
    font-size: 12px;
    font-weight: 700;
    background: var(--ms-closed-bg);
    color: var(--ms-closed);
    white-space: nowrap;
}
.ms-daydiff:empty { display: none; }
.ms-daydiff.is-shift { background: #fde8e8; color: #9b1513; }

.tt-conv { height: auto; }
.tt-conv .form-control { min-height: 46px; border-radius: 10px; font-size: 15px; }

/* Searchable zone picker (combobox) */
.tt-picker { position: relative; }
.tt-listbox {
    position: absolute;
    z-index: 20;
    left: 0;
    right: 0;
    top: calc(100% + 4px);
    max-height: 300px;
    overflow-y: auto;
    margin: 0;
    padding: 4px;
    list-style: none;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-radius: 10px;
    box-shadow: 0 12px 28px rgba(22, 30, 45, .14);
}
.tt-option { display: flex; flex-direction: column; padding: 8px 10px; border-radius: 8px; cursor: pointer; }
.tt-option:hover { background: var(--ms-soft); }
.tt-option[aria-selected="true"] { background: var(--ms-ink); color: #fff; }
.tt-option-name { font-weight: 600; font-size: 14px; }
.tt-option-meta { font-size: 12px; color: var(--ms-muted); overflow-wrap: anywhere; }
.tt-option[aria-selected="true"] .tt-option-meta { color: #d6dade; }
.tt-option-none { padding: 8px 10px; color: var(--ms-muted); }

.tt-summary {
    margin: 18px 0 0;
    background: var(--ms-soft);
    border-radius: 12px;
    padding: 12px 16px;
    font-weight: 700;
    color: var(--ms-ink);
    font-variant-numeric: tabular-nums;
}
.tt-summary:empty { display: none; }

.tt-results { list-style: none; padding: 0; margin: 8px 0 0; }
.tt-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "name remove" "time day";
    gap: 4px 10px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--ms-line);
}
.tt-row > * { min-width: 0; }
.tt-row.is-home { background: #f6fcf9; margin: 0 -8px; padding: 10px 8px; border-radius: 8px; }
.tt-row-name { grid-area: name; }
.tt-row-time { grid-area: time; }
.tt-row .ms-daydiff { grid-area: day; justify-self: end; }
.tt-remove, .tt-remove-spacer { grid-area: remove; justify-self: end; }
.tt-row-name strong,
.tt-row-time strong { display: block; color: var(--ms-ink); overflow-wrap: anywhere; }
.tt-row-time strong { font-size: 22px; font-variant-numeric: tabular-nums; }
.tt-row-name small,
.tt-row-time small { color: var(--ms-muted); font-size: 12px; }
.tt-row.is-from .tt-row-name small { color: var(--ms-red); font-weight: 700; }
.tt-remove {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid var(--ms-line);
    background: #fff;
    color: var(--ms-muted);
    font-size: 20px;
    line-height: 1;
}
.tt-remove:hover { color: var(--ms-red); border-color: var(--ms-red); }
.tt-remove-spacer { width: 36px; height: 1px; }
.tt-add { margin-top: 16px; }

/* Link card between the two pages */
.tt-link-card {
    display: flex;
    flex-direction: column;
    gap: 4px;
    background: #fff;
    border: 1px solid var(--ms-line);
    border-left: 5px solid var(--ms-red);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 6px 18px rgba(22, 30, 45, .06);
}
.tt-link-card-title { font-weight: 700; font-size: 17px; color: var(--ms-red); }
.tt-link-card:hover .tt-link-card-title { text-decoration: underline; }

/* ---------- World clock ---------- */
.ms-wc-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ms-wc { text-align: center; padding: 14px 10px; }
.ms-wc.is-home { border-top-color: var(--ms-open); background: #f6fcf9; }
.ms-wc-time { font-size: 24px; font-weight: 800; color: var(--ms-ink); font-variant-numeric: tabular-nums; margin: 4px 0 2px; }
.ms-wc-date { font-size: 13px; font-weight: 600; color: var(--ms-ink); }

/* ---------- Static table ---------- */
.ms-table { background: #fff; border-radius: 12px; overflow: hidden; margin-bottom: 10px; font-size: 14px; }
.ms-table th,
.ms-table td { padding: 10px 12px; vertical-align: top; }
.ms-table thead th { background: var(--ms-ink); color: #fff; white-space: nowrap; }
.ms-table tbody th { color: var(--ms-ink); white-space: nowrap; }

/* ---------- Home "Markets open now" box ---------- */
.ms-now-box {
    background: #fff;
    border: 1px solid var(--ms-line);
    border-left: 5px solid var(--ms-red);
    border-radius: 14px;
    padding: 16px 18px;
    box-shadow: 0 6px 18px rgba(22, 30, 45, .06);
}
.ms-now-box h2 { font-size: 18px; margin: 0; }
.ms-now-head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 4px 12px; margin-bottom: 10px; }
.ms-now-box dl { display: grid; gap: 8px; margin: 0 0 12px; }
.ms-now-box dt { font-size: 12px; text-transform: uppercase; letter-spacing: .6px; color: var(--ms-muted); }
.ms-now-box dd { margin: 0; font-weight: 700; color: var(--ms-ink); }
.ms-now-link { font-weight: 700; color: var(--ms-red); }
.ms-now-link:hover { text-decoration: underline; }
.ms-js .tt-home-clocks { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tt-home-clocks dd { font-size: 22px; font-variant-numeric: tabular-nums; }
.tt-home-clocks .is-home dd { color: var(--ms-red); }
.tt-home-links { display: flex; flex-wrap: wrap; gap: 6px 20px; }

/* ---------- Larger screens ---------- */
@media (min-width: 576px) {
    .ms-clock-main { flex: 0 1 auto; min-width: 280px; }
    .ms-clock-utc { flex: 0 1 auto; min-width: 200px; justify-content: center; }
    .ms-wc-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .tt-row {
        grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) auto auto;
        grid-template-areas: "name time day remove";
    }
}

@media (min-width: 768px) {
    .ms-hero .title { font-size: 40px; }
    .ms-clock-time { font-size: 52px; }
    .ms-h2 { font-size: 30px; }
}

@media (min-width: 992px) {
    .ms-section { padding-top: 64px; padding-bottom: 64px; }
    .ms-wc-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
    .ms-tl { min-width: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .ms-page *, .ms-now-box * { transition: none !important; animation: none !important; }
}