/* IRT Time Zone Converter - matches the site's ir-tokens.css palette,
   with its own --irt-tz-accent custom property (default saffron #FF9933,
   admin-configurable) rather than reusing the sitewide --brand, since the
   plugin spec calls for an independently themeable accent. */

:root {
    --irt-tz-accent: #FF9933;
}

.irt-tz-widget, .irt-tz-overlap, .irt-tz-table-wrap, .irt-tz-faq {
    max-width: 720px;
}

/* Hero: "IST time now" digital + analog clock on the /time/ index page */
.irt-tz-hero {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var( --sp-8, 32px );
    flex-wrap: wrap;
    background: var( --surface, #FFFFFF );
    border: 1px solid var( --border, #DDDDDD );
    border-radius: var( --radius-l, 20px );
    padding: var( --sp-8, 32px );
    margin-bottom: var( --sp-6, 24px );
}
.irt-tz-hero-digital { text-align: center; }
.irt-tz-hero-time {
    font-family: var( --font-mono, monospace );
    font-variant-numeric: tabular-nums;
    font-size: clamp( 32px, 8vw, 48px );
    font-weight: 700;
    color: var( --irt-tz-accent );
    line-height: 1.15;
}
.irt-tz-hero-date {
    font-size: var( --fs-h3, 15px );
    color: var( --ink, #000000 );
    margin-top: var( --sp-1, 4px );
}
.irt-tz-hero-tz {
    font-size: var( --fs-body-sm, 13px );
    color: var( --ink-secondary, #555555 );
    margin-top: var( --sp-1, 4px );
}

.irt-tz-round-clock {
    width: 160px;
    height: 160px;
    flex: 0 0 auto;
}
.irt-tz-round-face {
    position: relative;
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: var( --canvas, #FFFFFF );
    border: 3px solid var( --irt-tz-accent );
    box-shadow: var( --shadow-1, 0 1px 4px rgba(26,28,34,.06) );
}
.irt-tz-tick {
    position: absolute;
    top: 6px; left: 50%;
    width: 2px; height: 10px;
    margin-left: -1px;
    background: var( --ink-muted, #8C8C8C );
    transform-origin: 50% 73px; /* rotates around the face center: 80px radius - 6px top offset - 1px half-height */
}
.irt-tz-hand {
    position: absolute;
    top: 50%; left: 50%;
    transform-origin: 50% 100%;
    border-radius: 2px;
}
.irt-tz-hand-hour {
    width: 4px; height: 42px;
    background: var( --ink, #000000 );
}
.irt-tz-hand-min {
    width: 3px; height: 58px;
    background: var( --ink, #000000 );
}
.irt-tz-hand-sec {
    width: 2px; height: 66px;
    background: var( --irt-tz-accent );
}
.irt-tz-round-center {
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 10px;
    border-radius: 50%;
    background: var( --irt-tz-accent );
    transform: translate( -50%, -50% );
}

.irt-tz-hero-sentence {
    text-align: center;
    max-width: 720px;
    margin: 0 auto var( --sp-6, 24px );
    color: var( --ink-secondary, #555555 );
}
.irt-tz-hero-sentence strong { color: var( --ink, #000000 ); }

@media ( max-width: 560px ) {
    .irt-tz-hero { padding: var( --sp-5, 20px ); gap: var( --sp-5, 20px ); }
    .irt-tz-round-clock { width: 120px; height: 120px; }
    .irt-tz-tick { transform-origin: 50% 53px; }
    .irt-tz-hand-hour { height: 32px; }
    .irt-tz-hand-min { height: 44px; }
    .irt-tz-hand-sec { height: 50px; }
}

/* Dual clocks */
.irt-tz-clocks {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var( --sp-4, 16px );
    margin-bottom: var( --sp-5, 20px );
}
.irt-tz-clock {
    background: var( --surface, #FFFFFF );
    border: 1px solid var( --border, #DDDDDD );
    border-radius: var( --radius-m, 12px );
    padding: var( --sp-5, 20px );
    text-align: center;
}
.irt-tz-clock-label {
    font-size: var( --fs-body-sm, 13px );
    color: var( --ink-secondary, #555555 );
    margin-bottom: var( --sp-2, 8px );
    font-weight: 600;
}
.irt-tz-clock-time {
    font-family: var( --font-mono, monospace );
    font-variant-numeric: tabular-nums;
    font-size: clamp( 24px, 6vw, 36px );
    font-weight: 700;
    color: var( --irt-tz-accent );
    line-height: 1.2;
}
.irt-tz-clock-date {
    font-size: var( --fs-body-sm, 13px );
    color: var( --ink-muted, #8C8C8C );
    margin-top: var( --sp-1, 4px );
}

.irt-tz-diff {
    font-size: var( --fs-h3, 15px );
    font-weight: 600;
    text-align: center;
    padding: var( --sp-3, 12px );
    background: var( --surface-2, #F5F5F5 );
    border-radius: var( --radius-s, 8px );
}

/* Converter */
.irt-tz-convert-row {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    flex-wrap: wrap;
    gap: var( --sp-4, 16px );
    margin: var( --sp-4, 16px ) 0;
}
.irt-tz-convert-row label {
    display: flex;
    flex-direction: column;
    gap: var( --sp-1, 4px );
    font-size: var( --fs-body-sm, 13px );
    color: var( --ink-secondary, #555555 );
    font-weight: 600;
}
.irt-tz-input {
    font-family: var( --font-mono, monospace );
    font-variant-numeric: tabular-nums;
    font-size: var( --fs-data-md, 16px );
    padding: var( --sp-2, 8px ) var( --sp-3, 12px );
    border: 1px solid var( --border-strong, #C4C4C4 );
    border-radius: var( --radius-s, 8px );
    background: var( --surface, #FFFFFF );
    color: var( --ink, #000000 );
}
.irt-tz-convert-arrow {
    font-size: 20px;
    color: var( --irt-tz-accent );
    padding-bottom: var( --sp-2, 8px );
}
.irt-tz-day-note {
    display: block;
    font-size: var( --fs-caption, 12px );
    color: var( --ink-muted, #8C8C8C );
    min-height: 1.4em;
}

/* Working-hours overlap bar */
.irt-tz-overlap-row {
    display: flex;
    align-items: center;
    gap: var( --sp-3, 12px );
    margin-bottom: var( --sp-2, 8px );
}
.irt-tz-overlap-label {
    flex: 0 0 110px;
    font-size: var( --fs-body-sm, 13px );
    font-weight: 600;
    color: var( --ink-secondary, #555555 );
}
.irt-tz-overlap-track {
    position: relative;
    flex: 1 1 auto;
    height: 20px;
    background: var( --surface-2, #F5F5F5 );
    border-radius: var( --radius-pill, 999px );
    overflow: hidden;
}
.irt-tz-overlap-seg {
    position: absolute;
    top: 0; bottom: 0;
    background: var( --irt-tz-accent );
    opacity: .55;
}
.irt-tz-overlap-track-highlight {
    background: var( --surface, #FFFFFF );
    border: 1px dashed var( --border-strong, #C4C4C4 );
}
.irt-tz-overlap-seg-hl {
    opacity: 1;
    background: var( --status-live, #1E7E4C );
}
.irt-tz-overlap-axis {
    display: flex;
    justify-content: space-between;
    font-size: var( --fs-caption, 12px );
    color: var( --ink-muted, #8C8C8C );
    margin-left: 122px;
    margin-top: var( --sp-1, 4px );
}
.irt-tz-overlap-sentence {
    text-align: center;
    color: var( --status-live, #1E7E4C );
    margin-top: var( --sp-3, 12px );
}

/* Quick-reference table */
.irt-tz-table-wrap { overflow-x: auto; }
.irt-tz-table {
    width: 100%;
    border-collapse: collapse;
    font-variant-numeric: tabular-nums;
}
.irt-tz-table th, .irt-tz-table td {
    padding: var( --sp-2, 8px ) var( --sp-3, 12px );
    text-align: left;
    border-bottom: 1px solid var( --border, #DDDDDD );
    font-size: var( --fs-data-sm, 13px );
}
.irt-tz-table th {
    background: var( --surface-2, #F5F5F5 );
    font-weight: 600;
}
.irt-tz-table tr:hover td { background: var( --brand-tint-50, #FFF3EA ); }
.irt-tz-day-tag {
    font-size: var( --fs-caption, 12px );
    color: var( --ink-muted, #8C8C8C );
    margin-left: var( --sp-1, 4px );
}

/* FAQ */
.irt-tz-faq-item {
    border: 1px solid var( --border, #DDDDDD );
    border-radius: var( --radius-s, 8px );
    padding: var( --sp-3, 12px ) var( --sp-4, 16px );
    margin-bottom: var( --sp-2, 8px );
    background: var( --surface, #FFFFFF );
}
.irt-tz-faq-item summary {
    cursor: pointer;
    font-weight: 600;
}
.irt-tz-faq-item p { margin: var( --sp-2, 8px ) 0 0; color: var( --ink-secondary, #555555 ); }

/* Embed widget */
.irt-tz-embed-body {
    background: #FDFBF7;
    font-family: var( --font-ui, system-ui, sans-serif );
}
.irt-tz-embed {
    background: #FDFBF7;
    border: 1px solid var( --border, #DDDDDD );
    border-radius: var( --radius-m, 12px );
    padding: var( --sp-4, 16px );
}
.irt-tz-powered {
    text-align: center;
    font-size: var( --fs-caption, 12px );
    margin: var( --sp-3, 12px ) 0 0;
}
.irt-tz-powered a { color: var( --brand-text, #B84400 ); }

@media ( max-width: 560px ) {
    .irt-tz-clocks { grid-template-columns: 1fr; }
    .irt-tz-convert-row { flex-direction: column; align-items: stretch; }
    .irt-tz-convert-arrow { align-self: center; transform: rotate(90deg); }
    .irt-tz-overlap-label { flex-basis: 80px; font-size: 11px; }
    .irt-tz-overlap-axis { margin-left: 92px; }
}