/* ================================================================
   Myanmar Christian Songs Manager Pro — Frontend v3
   ================================================================ */

/* ── Myanmar font ── */
.mcsmp-app,.mcsmp-detail,.mcsmp-single-view {
    font-family:"Noto Sans Myanmar","Pyidaungsu","Myanmar3",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
}

/* ── Custom properties ── */
.mcsmp-app {
    --p:      #1d4ed8;
    --ph:     #1e40af;
    --card:   #fff;
    --border: #e2e8f0;
    --text:   #1e293b;
    --muted:  #64748b;
    --tag-bg: #eff6ff;
    --tag-c:  #2563eb;
    --r:      10px;
    --shad:   0 1px 3px rgba(0,0,0,.07),0 0 0 1px rgba(0,0,0,.04);
    max-width:1120px; margin:0 auto; color:var(--text);
}

/* ── Back button ── */
.mcsmp-back-btn {
    display:inline-flex; align-items:center; gap:6px;
    padding:8px 16px; margin-bottom:20px;
    border:1.5px solid var(--border); border-radius:8px;
    background:#fff; color:var(--muted);
    font:500 14px/1 inherit; cursor:pointer;
    transition:all .15s;
}
.mcsmp-back-btn:hover { border-color:var(--p); color:var(--p); }

/* ══════════════════════════════════════════════
   SONG DETAIL (single page)
   ══════════════════════════════════════════════ */

.mcsmp-detail { max-width:780px; margin:0 auto; }

/* Hero */
.mcsmp-detail-hero {
    display:flex; gap:20px; align-items:flex-start;
    padding:28px; border-radius:14px; margin-bottom:20px;
    background:var(--mcsmp-bg, #f8fafc);
}

.mcsmp-detail-cover { flex-shrink:0; width:140px; }
.mcsmp-detail-cover img { width:100%; border-radius:10px; box-shadow:0 4px 16px rgba(0,0,0,.15); display:block; }

.mcsmp-detail-heading { flex:1; min-width:0; }
.mcsmp-detail-no {
    display:inline-flex; align-items:center; justify-content:center;
    min-width:40px; height:40px; border-radius:8px;
    background:rgba(37,99,235,.12); color:var(--p);
    font-size:16px; font-weight:700; margin-bottom:10px;
}

.mcsmp-detail-title-en { margin:0 0 5px; font-size:26px; font-weight:800; line-height:1.25; color:#0f172a; }
.mcsmp-detail-title-mm {
    margin:0 0 12px; font-size:16px; color:var(--muted);
    font-weight:400;
}
h1.mcsmp-detail-title-mm { font-size:24px; font-weight:800; color:#0f172a; margin-bottom:12px; }

.mcsmp-detail-meta { display:flex; flex-wrap:wrap; gap:8px; }
.mcsmp-dm {
    padding:4px 12px; border-radius:20px;
    background:rgba(255,255,255,.7); backdrop-filter:blur(4px);
    font-size:12px; font-weight:500; color:#475569;
    border:1px solid rgba(255,255,255,.5);
}
.mcsmp-dm.cat  { background:rgba(37,99,235,.1); color:var(--p); border-color:rgba(37,99,235,.2); }
.mcsmp-dm.key  { background:rgba(234,179,8,.15); color:#854d0e; border-color:rgba(234,179,8,.3); font-weight:700; }

/* Description area (AdSense / SEO) */
.mcsmp-detail-desc {
    padding:16px 20px; background:#f8fafc;
    border-left:3px solid #cbd5e1; border-radius:0 8px 8px 0;
    margin-bottom:20px; font-size:14px; line-height:1.8; color:#334155;
}

/* Section wrapper */
.mcsmp-detail-section { margin-bottom:20px; }

/* Audio player */
.mcsmp-audio-player { width:100%; border-radius:8px; }

/* YouTube embed */
.mcsmp-yt-embed { position:relative; padding-bottom:56.25%; height:0; border-radius:12px; overflow:hidden; }
.mcsmp-yt-embed iframe { position:absolute; inset:0; width:100%; height:100%; }

/* ══════════════════════════════════════════════
   LYRICS SECTION
   ══════════════════════════════════════════════ */

.mcsmp-lyrics-section {
    border:1.5px solid var(--border); border-radius:12px; overflow:hidden;
    background:#fff;
}

/* Toolbar */
.mcsmp-lyrics-toolbar {
    display:flex; align-items:center; justify-content:space-between;
    padding:10px 14px; background:#f8fafc;
    border-bottom:1.5px solid var(--border); flex-wrap:wrap; gap:8px;
}

/* Language tabs */
.mcsmp-lang-tabs { display:flex; gap:5px; }
.mcsmp-ltab {
    padding:5px 14px; border:1.5px solid var(--border); border-radius:20px;
    font-size:13px; font-weight:500; background:#fff; cursor:pointer;
    font-family:inherit; color:var(--muted); transition:all .15s;
}
.mcsmp-ltab.active { background:var(--p); border-color:var(--p); color:#fff; }
.mcsmp-ltab:hover:not(.active) { border-color:var(--p); color:var(--p); }

/* Actions */
.mcsmp-lyrics-actions { display:flex; align-items:center; gap:8px; flex-wrap:wrap; }

/* Transpose */
.mcsmp-transpose { display:flex; align-items:center; gap:5px; }
.mcsmp-trans-lbl { font-size:12px; color:var(--muted); font-weight:500; }
.mcsmp-tbtn {
    width:28px; height:28px; border:1.5px solid var(--border); border-radius:6px;
    background:#fff; cursor:pointer; font-size:15px; font-weight:700;
    color:var(--text); display:flex; align-items:center; justify-content:center;
    transition:all .15s; font-family:inherit;
}
.mcsmp-tbtn:hover { background:var(--p); border-color:var(--p); color:#fff; }
.mcsmp-tbtn-r { font-size:13px; }
.mcsmp-trans-cur {
    min-width:36px; text-align:center; font-weight:700; font-size:14px;
    color:var(--p); background:var(--tag-bg); border-radius:5px; padding:3px 6px;
}

/* Copy button */
.mcsmp-copy-btn {
    display:flex; align-items:center; gap:5px; padding:5px 12px;
    border:1.5px solid var(--border); border-radius:8px; background:#fff;
    color:var(--muted); font:500 12px/1 inherit; cursor:pointer; transition:all .15s;
}
.mcsmp-copy-btn:hover { border-color:var(--p); color:var(--p); background:var(--tag-bg); }
.mcsmp-copy-btn.ok { border-color:#16a34a; color:#16a34a; background:#f0fdf4; }

/* ── Chord sheet output ── */
.mcsmp-lyrics-output { padding:20px 22px; min-height:60px; }

.mcsmp-chord-sheet { font-family:"Noto Sans Myanmar","Pyidaungsu","Courier New",monospace; }

.mcsmp-line { margin-bottom:4px; }

/* Chord row */
.mcsmp-chords {
    font-size:12.5px; font-weight:700; color:#2563eb;
    white-space:pre; line-height:1.4; letter-spacing:.02em;
    min-height:1.4em;
}

/* Lyric row */
.mcsmp-lyric {
    font-size:16px; line-height:1.9; white-space:pre-wrap;
    color:#0f172a;
}

/* Verse break (empty line) */
.mcsmp-verse-break { height:20px; }

.mcsmp-no-lyrics { color:#94a3b8; font-style:italic; font-size:14px; }

/* Tags */
.mcsmp-detail-tags { display:flex; flex-wrap:wrap; gap:6px; }

/* ══════════════════════════════════════════════
   SONG LIST / CARDS
   ══════════════════════════════════════════════ */

.mcsmp-topbar { display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; }
.mcsmp-count  { font-size:14px; color:var(--muted); font-weight:500; }

.mcsmp-layout-toggle { display:flex; gap:3px; background:var(--border); border-radius:7px; padding:3px; }
.mcsmp-lb { background:transparent; border:none; border-radius:5px; padding:5px 8px; cursor:pointer; color:var(--muted); display:flex; align-items:center; transition:all .15s; }
.mcsmp-lb.active,.mcsmp-lb:hover { background:#fff; color:var(--p); box-shadow:0 1px 3px rgba(0,0,0,.1); }

/* Search */
.mcsmp-search-wrap { position:relative; margin-bottom:12px; }
.mcsmp-search {
    width:100%; max-width:440px; padding:10px 36px 10px 40px;
    border:1.5px solid var(--border); border-radius:var(--r);
    font:15px/1 inherit; background:#fff; outline:none;
    transition:border .2s,box-shadow .2s; box-sizing:border-box;
}
.mcsmp-search:focus { border-color:var(--p); box-shadow:0 0 0 3px rgba(37,99,235,.1); }
.mcsmp-search-ico { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:var(--muted); pointer-events:none; }
.mcsmp-search-clear { position:absolute; right:12px; top:50%; transform:translateY(-50%); background:none; border:none; cursor:pointer; color:var(--muted); font-size:13px; }

/* Category pills */
.mcsmp-cats { display:flex; flex-wrap:wrap; gap:7px; margin-bottom:12px; }
.mcsmp-pill { padding:6px 15px; border-radius:20px; font-size:13px; font-weight:500; border:1.5px solid var(--border); background:#fff; color:var(--muted); cursor:pointer; font-family:inherit; transition:all .15s; }
.mcsmp-pill:hover { border-color:var(--p); color:var(--p); }
.mcsmp-pill.active { background:var(--p); border-color:var(--p); color:#fff; }

/* A-Z index */
.mcsmp-az-wrap { background:#fff; border:1.5px solid var(--border); border-radius:var(--r); padding:12px 14px; margin-bottom:18px; }
.mcsmp-az-tabs { display:flex; gap:6px; margin-bottom:10px; align-items:center; flex-wrap:wrap; }
.mcsmp-azt { padding:4px 13px; border:1.5px solid var(--border); border-radius:20px; font-size:12px; font-weight:600; background:#f8fafc; cursor:pointer; font-family:inherit; color:var(--muted); transition:all .15s; }
.mcsmp-azt.active { background:var(--p); border-color:var(--p); color:#fff; }
.mcsmp-azt-all { margin-left:auto; }
.mcsmp-azt-all.active-all { background:#f1f5f9; color:var(--p); border-color:var(--p); }
.mcsmp-lg { display:flex; flex-wrap:wrap; gap:4px; }
.mcsmp-ltr { min-width:30px; height:30px; padding:0 5px; border:1.5px solid var(--border); border-radius:5px; font-size:13px; font-weight:600; background:#fff; cursor:pointer; font-family:inherit; color:var(--text); transition:all .15s; }
.mcsmp-ltr:hover:not(:disabled) { background:var(--p); border-color:var(--p); color:#fff; }
.mcsmp-ltr.active { background:var(--p); border-color:var(--p); color:#fff; }
.mcsmp-ltr-off { opacity:.28; cursor:not-allowed !important; }

/* Songs grid/list */
.mcsmp-layout-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:15px; }
.mcsmp-layout-list { display:flex; flex-direction:column; gap:10px; }

/* Card */
.mcsmp-card { background:var(--card); border:1.5px solid var(--border); border-radius:var(--r); box-shadow:var(--shad); transition:transform .15s,box-shadow .15s,border-color .15s; overflow:hidden; }
.mcsmp-card:hover { transform:translateY(-2px); box-shadow:0 8px 24px rgba(0,0,0,.1); border-color:#bfdbfe; }

.mcsmp-card-inner { padding:14px; display:flex; flex-direction:column; position:relative; }
.mcsmp-layout-list .mcsmp-card-inner { flex-direction:row; align-items:flex-start; gap:12px; }

/* Cover thumbnail */
.mcsmp-card-cover { flex-shrink:0; width:64px; height:64px; border-radius:7px; overflow:hidden; margin-bottom:8px; }
.mcsmp-layout-list .mcsmp-card-cover { margin-bottom:0; width:54px; height:54px; }
.mcsmp-card-cover img { width:100%; height:100%; object-fit:cover; display:block; }

.mcsmp-card-no { display:inline-flex; align-items:center; justify-content:center; min-width:32px; height:32px; background:var(--tag-bg); color:var(--p); border-radius:6px; font-size:13px; font-weight:700; margin-bottom:8px; flex-shrink:0; }
.mcsmp-layout-list .mcsmp-card-no { margin-bottom:0; align-self:center; }

.mcsmp-card-body { flex:1; min-width:0; }

.mcsmp-title-en { margin:0 0 3px; font-size:15px; font-weight:700; line-height:1.35; }
.mcsmp-title-en a.mcsmp-open { color:var(--text); text-decoration:none; transition:color .15s; }
.mcsmp-title-en a.mcsmp-open:hover { color:var(--p); }
.mcsmp-title-mm { font-size:13px; color:var(--muted); margin:0 0 6px; }
.mcsmp-title-mm--solo { font-size:15px; font-weight:700; color:var(--text); }
.mcsmp-title-mm--solo a.mcsmp-open { color:var(--text); text-decoration:none; }
.mcsmp-title-mm--solo a.mcsmp-open:hover { color:var(--p); }

.mcsmp-card-meta { display:flex; flex-wrap:wrap; align-items:center; gap:5px; font-size:12px; color:var(--muted); margin-bottom:6px; }
.mcsmp-mc { display:inline-flex; }
.mcsmp-mc-cat { color:var(--p); font-weight:500; }
.mcsmp-mc-key { background:var(--tag-bg); color:var(--p); border-radius:4px; padding:0 5px; font-weight:600; font-size:11px; }
.mcsmp-mc + .mcsmp-mc::before { content:"·"; color:#cbd5e1; margin-right:5px; }

.mcsmp-card-desc { font-size:12px; color:var(--muted); margin:0 0 6px; line-height:1.55; }

.mcsmp-card-badges,.mcsmp-detail-tags { display:flex; flex-wrap:wrap; gap:4px; margin-top:4px; }
.mcsmp-badge-lang { padding:1px 7px; border-radius:10px; font-size:10px; font-weight:700; background:#f1f5f9; color:#475569; }
.mcsmp-badge-en  { background:#dbeafe; color:#1d4ed8; }
.mcsmp-badge-mp3 { background:#fef3c7; color:#92400e; }
.mcsmp-badge-yt  { background:#fee2e2; color:#991b1b; }

.mcsmp-card-tags { padding:8px 14px; border-top:1px solid #f1f5f9; display:flex; flex-wrap:wrap; gap:4px; }
.mcsmp-tag { padding:2px 8px; border-radius:12px; background:var(--tag-bg); color:var(--tag-c); font-size:11px; font-weight:500; }

.mcsmp-card-btn { display:flex; align-items:center; justify-content:center; width:32px; height:32px; border:1.5px solid var(--border); border-radius:7px; color:var(--muted); cursor:pointer; flex-shrink:0; transition:all .15s; text-decoration:none; align-self:center; margin-left:auto; }
.mcsmp-card-btn:hover { background:var(--p); border-color:var(--p); color:#fff; }
.mcsmp-layout-list .mcsmp-card-btn { align-self:center; }

/* Spinner */
.mcsmp-spinner { display:flex; justify-content:center; padding:28px; }
.mcsmp-spin-ring { width:32px; height:32px; border:3px solid var(--border); border-top-color:var(--p); border-radius:50%; animation:mcsmp-spin .7s linear infinite; }
@keyframes mcsmp-spin { to { transform:rotate(360deg); } }

/* Load more */
.mcsmp-pager { text-align:center; margin-top:20px; }
.mcsmp-load-more { display:inline-flex; align-items:center; gap:7px; padding:9px 26px; background:#fff; border:1.5px solid var(--p); border-radius:var(--r); color:var(--p); font:500 14px/1 inherit; cursor:pointer; transition:all .15s; }
.mcsmp-load-more:hover { background:var(--p); color:#fff; }
.mcsmp-rem { font-size:12px; opacity:.7; }
.mcsmp-no-results { padding:36px; text-align:center; color:var(--muted); font-size:15px; }

/* ── Responsive ── */
@media (max-width:640px) {
    .mcsmp-detail-hero { flex-direction:column; }
    .mcsmp-detail-cover { width:100%; max-width:200px; }
    .mcsmp-detail-title-en { font-size:20px; }
    .mcsmp-lyrics-toolbar { flex-direction:column; align-items:flex-start; }
    .mcsmp-layout-grid { grid-template-columns:1fr; }
    .mcsmp-search { max-width:100%; }
    .mcsmp-lyric { font-size:14px; }
}