/* ================================================================
   Moon Times – Stylesheet  v1.1.0
   ================================================================ */

/* ── Variables ─────────────────────────────────────────────── */
:root {
    --mt-bg:       #0d0d1a;
    --mt-surface:  #151528;
    --mt-surface2: #1e1e38;
    --mt-border:   #2a2a4a;
    --mt-gold:     #f5c842;
    --mt-indigo:   #6c7aff;
    --mt-text:     #e8e8f4;
    --mt-muted:    #888aaa;
    --mt-radius:   12px;
    --mt-rsm:      8px;
    --mt-ease:     .22s cubic-bezier(.4,0,.2,1);
    --mt-font:     -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* ── Base ──────────────────────────────────────────────────── */
.mt-wrap {
    font-family: var(--mt-font);
    font-size: 14px;
    color: var(--mt-text);
    background: var(--mt-bg);
    border-radius: var(--mt-radius);
    padding: 24px;
    max-width: 960px;
    margin: 0 auto;
    box-sizing: border-box;
}
.mt-wrap *, .mt-wrap *::before, .mt-wrap *::after,
.mt-faq  *, .mt-faq *::before,  .mt-faq *::after  { box-sizing: border-box; }

/* Utility: hide via class (used by JS filter – avoids :visible conflicts) */
.mt-gone { display: none !important; }

/* ── Next-phase banner ─────────────────────────────────────── */
.mt-next-banner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px 16px;
    background: var(--mt-surface2);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    padding: 14px 20px;
    margin-bottom: 20px;
}
.mt-next-icon      { font-size: 24px; }
.mt-next-label     { font-size: 12px; color: var(--mt-muted); text-transform: uppercase; letter-spacing: .06em; }
.mt-next-names     { display: flex; flex-direction: column; }
.mt-next-name      { font-size: 15px; font-weight: 700; }
.mt-next-name-en   { font-size: 12px; color: var(--mt-muted); }
.mt-next-date      { font-size: 14px; }
.mt-next-time      { display: flex; align-items: center; gap: 5px; font-size: 13px; color: var(--mt-muted); }
.mt-next-countdown { margin-left: auto; font-size: 13px; color: var(--mt-muted); }
.mt-next-countdown strong { color: var(--mt-gold); }
.mt-next-today     { color: var(--mt-gold); font-weight: 700; }

/* ── Controls ──────────────────────────────────────────────── */
.mt-controls {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 20px;
}
.mt-city-field {
    display: flex;
    align-items: center;
    gap: 6px;
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-rsm);
    padding: 7px 14px;
    font-size: 14px;
    font-weight: 600;
}
.mt-filter-group,
.mt-year-tabs {
    display: flex;
    gap: 4px;
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-rsm);
    padding: 4px;
}
.mt-filter-btn,
.mt-year-btn {
    background: transparent;
    border: none;
    color: var(--mt-muted);
    border-radius: 6px;
    padding: 5px 13px;
    font-size: 13px;
    font-family: var(--mt-font);
    cursor: pointer;
    transition: background var(--mt-ease), color var(--mt-ease);
}
.mt-filter-btn:hover, .mt-year-btn:hover  { background: var(--mt-surface2); color: var(--mt-text); }
.mt-filter-btn.active, .mt-year-btn.active {
    background: var(--mt-surface2);
    color: var(--mt-text);
    font-weight: 600;
}

/* ── Loading ───────────────────────────────────────────────── */
.mt-loading { display: none; align-items: center; gap: 10px; padding: 24px; justify-content: center; }
.mt-loading.is-visible { display: flex; }
.mt-spinner {
    width: 22px; height: 22px;
    border: 3px solid var(--mt-border);
    border-top-color: var(--mt-gold);
    border-radius: 50%;
    animation: mt-spin .7s linear infinite;
}
@keyframes mt-spin { to { transform: rotate(360deg); } }

/* ── Year groups ───────────────────────────────────────────── */
.mt-year-group  { margin-bottom: 28px; }
.mt-year-label  {
    display: flex; align-items: center; gap: 12px;
    font-size: 18px; font-weight: 700;
    margin-bottom: 14px; padding-bottom: 8px;
    border-bottom: 1px solid var(--mt-border);
}
.mt-year-meta   { display: flex; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.mt-year-pill   { font-size: 12px; border-radius: 20px; padding: 3px 10px; font-weight: 500; }
.mt-pill-full   { background: rgba(245,200,66,.15); color: var(--mt-gold);   border: 1px solid rgba(245,200,66,.3); }
.mt-pill-new    { background: rgba(108,122,255,.15); color: var(--mt-indigo); border: 1px solid rgba(108,122,255,.3); }

/* ── Month grid ────────────────────────────────────────────── */
.mt-months-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 12px;
}
.mt-month-card {
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-radius);
    padding: 14px;
    transition: border-color var(--mt-ease);
}
.mt-month-card:hover            { border-color: rgba(245,200,66,.35); }
.mt-month-card.is-current-month { border-color: rgba(245,200,66,.5); }
.mt-month-name {
    font-size: 13px; font-weight: 600; color: var(--mt-muted);
    text-transform: uppercase; letter-spacing: .07em; margin-bottom: 10px;
}
.mt-month-card.is-current-month .mt-month-name { color: var(--mt-gold); }

/* ── Phase list ────────────────────────────────────────────── */
.mt-phase-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.mt-phase-item {
    display: grid;
    grid-template-columns: 24px 40px 1fr auto;
    align-items: start; gap: 8px; padding: 10px;
    border-radius: var(--mt-rsm);
    border: 1px solid transparent;
    transition: background var(--mt-ease);
}
.mt-phase-item:hover    { background: var(--mt-surface2); }
.mt-phase-full          { border-left: 3px solid var(--mt-gold); }
.mt-phase-new           { border-left: 3px solid var(--mt-indigo); }
.mt-phase-item.is-past  { opacity: .45; }
.mt-phase-item.is-today { background: var(--mt-surface2); border-color: var(--mt-gold); }
.mt-phase-emoji { font-size: 18px; line-height: 1; margin-top: 2px; }
.mt-phase-day   { display: flex; flex-direction: column; align-items: center; }
.mt-day-num     { font-size: 18px; font-weight: 700; line-height: 1.1; }
.mt-day-name    { font-size: 10px; color: var(--mt-muted); text-transform: uppercase; }
.mt-phase-info  { display: flex; flex-direction: column; gap: 2px; }
.mt-phase-label    { font-size: 13px; font-weight: 600; }
.mt-phase-label-en { font-size: 11px; color: var(--mt-muted); }
.mt-phase-time  { display: flex; align-items: center; gap: 4px; font-size: 12px; color: var(--mt-muted); margin-top: 2px; }
.mt-phase-full .mt-phase-time { color: rgba(245,200,66,.8); }
.mt-phase-new  .mt-phase-time { color: rgba(108,122,255,.8); }
.mt-tz          { font-size: 10px; opacity: .7; }
.mt-badge       { display: inline-block; font-size: 10px; padding: 2px 8px; border-radius: 20px; margin-top: 3px; font-weight: 600; text-transform: uppercase; }
.mt-badge-today { background: rgba(245,200,66,.2); color: var(--mt-gold); border: 1px solid rgba(245,200,66,.4); }

/* ── Calendar export buttons ───────────────────────────────── */
.mt-cal-btns { display: flex; flex-direction: column; gap: 4px; }
.mt-cal-btn  {
    background: var(--mt-surface2); border: 1px solid var(--mt-border);
    border-radius: 6px; height: 26px; padding: 0 8px;
    display: flex; align-items: center; justify-content: center;
    cursor: pointer; font-size: 11px; font-weight: 700;
    font-family: var(--mt-font); color: var(--mt-muted);
    transition: background var(--mt-ease), border-color var(--mt-ease), color var(--mt-ease);
    white-space: nowrap;
}
.mt-cal-btn:hover    { background: var(--mt-border); color: var(--mt-text); }
.mt-cal-google       { color: #4285F4; border-color: rgba(66,133,244,.3); }
.mt-cal-google:hover { background: rgba(66,133,244,.1); border-color: #4285F4; }

/* ── Source ────────────────────────────────────────────────── */
.mt-source {
    font-size: 12px; color: var(--mt-muted); text-align: center;
    margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--mt-border);
}

/* ================================================================
   FAQ – rendered as sibling of .mt-wrap, shares same design tokens
   ================================================================ */
.mt-faq {
    font-family: var(--mt-font);
    font-size: 14px;
    color: var(--mt-text);
    background: var(--mt-bg);
    border-radius: var(--mt-radius);
    padding: 24px;
    max-width: 960px;
    margin: 8px auto 0;
}

/* Heading */
.mt-faq-heading {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--mt-border);
}
.mt-faq-heading-icon { font-size: 18px; }
.mt-faq-heading-text {
    font-size: 13px; font-weight: 700; color: var(--mt-muted);
    text-transform: uppercase; letter-spacing: .09em;
}

/* List */
.mt-faq-list { display: flex; flex-direction: column; gap: 6px; }

/* Item */
.mt-faq-item {
    background: var(--mt-surface);
    border: 1px solid var(--mt-border);
    border-radius: var(--mt-rsm);
    overflow: hidden;
    transition: border-color var(--mt-ease);
}
.mt-faq-item:hover   { border-color: rgba(245,200,66,.3); }
.mt-faq-item.is-open { border-color: var(--mt-gold); }

/* Button */
.mt-faq-btn {
    width: 100%; background: transparent; border: none;
    padding: 14px 16px;
    display: flex; align-items: center; gap: 12px;
    cursor: pointer; text-align: left;
    font-family: var(--mt-font); color: var(--mt-text);
    transition: background var(--mt-ease);
}
.mt-faq-btn:hover { background: var(--mt-surface2); }
.mt-faq-btn:focus-visible { outline: 2px solid var(--mt-gold); outline-offset: -2px; }

/* Number badge */
.mt-faq-num {
    flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%;
    border: 1px solid var(--mt-border); color: var(--mt-muted);
    font-size: 11px; font-weight: 700; font-family: var(--mt-font);
    display: flex; align-items: center; justify-content: center;
    transition: background var(--mt-ease), color var(--mt-ease), border-color var(--mt-ease);
}
.mt-faq-item.is-open .mt-faq-num { background: var(--mt-gold); color: #0d0d1a; border-color: var(--mt-gold); }

/* Question text */
.mt-faq-q {
    flex: 1; font-size: 13px; font-weight: 600; line-height: 1.45;
    color: var(--mt-text); transition: color var(--mt-ease);
}
.mt-faq-item.is-open .mt-faq-q { color: var(--mt-gold); }

/* Arrow */
.mt-faq-arrow {
    flex-shrink: 0; font-size: 20px; line-height: 1;
    color: var(--mt-muted); font-weight: 300;
    transition: transform var(--mt-ease), color var(--mt-ease);
    display: flex; align-items: center;
}
.mt-faq-item.is-open .mt-faq-arrow { transform: rotate(45deg); color: var(--mt-gold); }

/* Panel – CSS max-height accordion (no jQuery slideDown needed) */
.mt-faq-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height .28s cubic-bezier(.4,0,.2,1);
    border-top: 0px solid var(--mt-border);
}
.mt-faq-item.is-open .mt-faq-panel {
    max-height: 400px;
    border-top-width: 1px;
}
.mt-faq-a {
    margin: 0; padding: 14px 16px 16px 52px;
    font-size: 13px; line-height: 1.75; color: var(--mt-muted);
}

/* ── Responsive ────────────────────────────────────────────── */
@media (max-width: 520px) {
    .mt-wrap, .mt-faq { padding: 14px; }
    .mt-months-grid   { grid-template-columns: 1fr; }
    .mt-controls      { flex-direction: column; align-items: flex-start; }
    .mt-year-meta     { display: none; }
    .mt-next-banner   { flex-direction: column; align-items: flex-start; }
    .mt-faq-a         { padding-left: 16px; }
}