/* ============================================================
   MOBILE REDESIGN v21 — High specificity overrides
   ============================================================ */

/* Global: hide on desktop */
.mobile-floating-search, .mobile-fav-fab, .mobile-header-left { display: none; }

@media (max-width: 768px) {

/* — BACKGROUND — */
body .scenic-bg { background: none !important; filter: none !important; }
body .scenic-bg::after {
    background: linear-gradient(180deg,
        #3a1570 0%, #5c2da0 12%, #7b4cc0 25%,
        #a77de0 40%, #c9aef0 55%, #ddc8f5 65%,
        #ebe0fa 75%, #f3edfb 85%, #f8f4fd 100%
    ) !important;
}
body::after {
    content: '';
    position: fixed;
    bottom: 60px; left: 0; right: 0;
    height: 42vh;
    background: url('../img/church-bg.png') center bottom / cover no-repeat;
    opacity: 0.28;
    z-index: 0;
    pointer-events: none;
    mask-image: linear-gradient(to bottom, transparent 0%, black 35%);
    -webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 35%);
}

/* — HIDE DESKTOP ELEMENTS — */
body .super-hero,
body .fav-btn-float,
body .announce-bar,
body .dashboard-alpha-bar,
body .search-bar-row,
body .filter-tabs,
body .song-list-header,
body .song-list,
body .dashboard-week-title,
body .quick-stats-row,
body .header-brand,
body .header-jesus-wrap,
body .header-nav,
body #header-analytics-badge
{ display: none !important; }

/* — HEADER — */
body .top-header {
    background: linear-gradient(135deg, #2d0f60, #4a1f8a, #3a1570) !important;
    min-height: auto !important; padding: 0 !important;
    border-bottom: none !important;
    box-shadow: 0 4px 30px rgba(20,0,60,0.5) !important;
    position: relative; z-index: 100;
}
body .top-header::before { display: none !important; }
body .header-nav-row {
    padding: 12px 14px !important;
    display: flex !important;
    grid-template-columns: none !important;
    align-items: center !important;
    gap: 10px !important; min-height: 60px;
}
body .mobile-header-left {
    display: flex !important; align-items: center; gap: 6px; flex-shrink: 0;
}
body .mobile-header-home-btn,
body .mobile-menu-btn,
body .header-icon-btn {
    width: 40px !important; height: 40px !important;
    border-radius: 12px !important;
    background: rgba(255,255,255,0.1) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    color: rgba(255,255,255,0.85) !important;
    font-size: 1.1rem !important;
    cursor: pointer; display: flex !important;
    align-items: center !important; justify-content: center !important;
    flex-shrink: 0;
}
body .header-auth {
    margin-left: auto !important; gap: 8px !important;
    flex-wrap: nowrap !important; align-items: center !important;
}
body #auth-toolbar { display: flex !important; gap: 8px !important; align-items: center !important; }
body .header-btn-outline {
    height: 42px !important; padding: 0 18px !important;
    font-size: 0.84rem !important; border-radius: 999px !important;
    border: 1.5px solid rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.08) !important;
    color: #fff !important; font-weight: 600 !important;
    white-space: nowrap !important; min-width: 0 !important;
    flex: 0 0 auto !important; width: auto !important;
}
body .header-btn-filled {
    height: 42px !important; padding: 0 20px !important;
    font-size: 0.84rem !important; border-radius: 999px !important;
    background: linear-gradient(135deg, #f5b731, #d4963c) !important;
    color: #1a0a2e !important; font-weight: 700 !important;
    border: none !important;
    box-shadow: 0 4px 16px rgba(200,150,60,0.45) !important;
    white-space: nowrap !important; min-width: 0 !important;
    flex: 0 0 auto !important; width: auto !important;
}

/* — MAIN LAYOUT — */
body .main-content {
    background: transparent !important; padding-bottom: 160px !important;
    border-right: none !important; position: relative; z-index: 1;
}
body .content-row { border: none !important; }
body .main-wrapper { margin-left: 0 !important; }
body .page { padding: 14px 14px 0 !important; background: transparent !important; }
body .sidebar { display: none !important; }
body .site-footer { display: none !important; }
body #dashboard-content { position: relative !important; z-index: 2; }

/* — LITURGICAL WIDGET — */
body .liturgical-today-widget {
    background: rgba(255,255,255,0.96) !important;
    backdrop-filter: blur(24px) !important;
    border: none !important; border-left: none !important;
    border-radius: 22px !important;
    padding: 22px 20px 20px !important;
    margin-bottom: 18px !important; gap: 16px !important;
    box-shadow: 0 8px 40px rgba(60,20,120,0.13) !important;
    align-items: flex-start !important; overflow: visible !important;
}
/* Golden cross box */
body .liturgical-today-widget > div:first-child {
    width: 62px !important; height: 80px !important;
    min-width: 62px !important;
    background: linear-gradient(180deg, #ffd700, #daa520, #b8860b) !important;
    border-radius: 6px !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    font-size: 0 !important; color: transparent !important;
    box-shadow: 0 6px 24px rgba(218,165,32,0.5), 0 0 48px rgba(255,215,0,0.2) !important;
    flex-shrink: 0 !important;
    border: 2px solid rgba(255,215,0,0.6) !important;
    position: relative !important; overflow: hidden !important;
}
body .liturgical-today-widget > div:first-child::before {
    content: '' !important;
    position: absolute !important;
    top: 12% !important; bottom: 8% !important;
    left: 50% !important; width: 10px !important; margin-left: -5px !important;
    background: rgba(255,255,255,0.9) !important;
    display: block !important; opacity: 1 !important;
    border-radius: 3px !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
}
body .liturgical-today-widget > div:first-child::after {
    content: '' !important; position: absolute !important;
    top: 30% !important; left: 15% !important; right: 15% !important;
    height: 10px !important;
    background: rgba(255,255,255,0.9) !important;
    border-radius: 3px !important;
    box-shadow: 0 0 10px rgba(255,255,255,0.5) !important;
}
body .liturgical-today-widget > div:nth-child(2) > div:first-child {
    font-size: 0.74rem !important; font-weight: 700 !important; margin-bottom: 4px !important;
}
body .liturgical-today-widget > div:nth-child(2) > div:nth-child(2) {
    font-size: 1.18rem !important; font-weight: 900 !important;
    color: #1a0a2e !important; margin-bottom: 8px !important;
    line-height: 1.2 !important; font-family: var(--font-display) !important;
}
body .liturgical-today-widget > div:last-child {
    width: 100% !important; padding-left: 78px !important;
}
body .liturgical-today-widget > div:last-child > button:first-child {
    border-radius: 999px !important; font-size: 0.86rem !important;
    font-weight: 700 !important; padding: 10px 24px !important;
    min-height: 42px !important;
    background: linear-gradient(135deg, #f5b731, #d4963c) !important;
    color: #1a0a2e !important; border: none !important;
    box-shadow: 0 4px 16px rgba(200,150,60,0.35) !important;
}
body .liturgical-today-widget > div:last-child > button:nth-child(2) { display: none !important; }

/* — CATEGORY ICONS — FORCE LARGE EMOJI — */
body .category-icons-grid,
body .dashboard-category-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 14px 10px !important;
    margin-bottom: 20px !important; padding: 4px !important;
}
body .cat-icon-btn {
    min-width: 0 !important; gap: 8px !important; padding: 0 !important;
    display: flex !important; flex-direction: column !important;
    align-items: center !important; cursor: pointer;
}
/* The div with class cat-icon-inner AND cat-nhap-le etc */
body .cat-icon-btn div:first-child,
body div.cat-icon-inner {
    width: 100% !important; height: auto !important;
    aspect-ratio: 1 / 1 !important; padding-bottom: 0 !important;
    border-radius: 22px !important;
    font-size: 2.6rem !important; line-height: 1 !important;
    box-shadow: 0 4px 20px rgba(60,20,120,0.08) !important;
    border: 1px solid rgba(255,255,255,0.9) !important;
    background: rgba(255,255,255,0.94) !important;
    display: flex !important; align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(12px) !important;
    transition: transform 0.2s !important;
    overflow: hidden !important;
}
body .cat-icon-btn div:first-child::before,
body .cat-icon-btn div:first-child::after,
body div.cat-icon-inner::before,
body div.cat-icon-inner::after { display: none !important; }

body .cat-icon-btn:active div:first-child,
body .cat-icon-btn:active div.cat-icon-inner {
    transform: scale(0.9) !important;
}
body .cat-icon-btn span,
body span.cat-icon-label {
    font-size: 0.72rem !important; font-weight: 700 !important;
    color: #3a2060 !important; line-height: 1.2 !important;
    text-align: center !important;
}

/* — FLOATING SEARCH — */
body .mobile-floating-search {
    display: flex !important; position: fixed;
    bottom: 76px; left: 14px; right: 14px; z-index: 990;
    align-items: center;
    background: rgba(255,255,255,0.97);
    backdrop-filter: blur(24px);
    border-radius: 999px;
    border: 1px solid rgba(200,180,240,0.3);
    box-shadow: 0 8px 32px rgba(60,20,120,0.12);
    padding: 0 18px; height: 54px;
}
body .mobile-floating-search .search-icon-float {
    font-size: 1.05rem; color: rgba(80,40,160,0.4);
    flex-shrink: 0; margin-right: 12px;
}
body .mobile-floating-search input {
    flex: 1; border: none; outline: none; background: transparent;
    font-size: 0.95rem; font-family: var(--font-primary);
    color: var(--text-primary); padding: 0;
}
body .mobile-floating-search input::placeholder { color: rgba(80,40,160,0.3); }

/* — HEART FAB — */
body .mobile-fav-fab {
    display: flex !important; position: fixed;
    bottom: 140px; right: 16px; z-index: 991;
    width: 58px; height: 58px; border-radius: 50%;
    background: linear-gradient(135deg, #f472b6, #db2777);
    border: 3px solid rgba(255,255,255,0.5);
    box-shadow: 0 6px 28px rgba(219,39,119,0.5), 0 0 50px rgba(219,39,119,0.2);
    cursor: pointer; align-items: center; justify-content: center;
    animation: fabGlow 3s ease-in-out infinite;
}
@keyframes fabGlow {
    0%, 100% { box-shadow: 0 6px 28px rgba(219,39,119,0.5), 0 0 30px rgba(219,39,119,0.15); }
    50% { box-shadow: 0 6px 28px rgba(219,39,119,0.5), 0 0 60px rgba(219,39,119,0.3); }
}
body .mobile-fav-fab:active { transform: scale(0.85); }
body .mobile-fav-fab .fav-heart { font-size: 1.6rem; color: #fff; }
body .mobile-fav-fab .fav-count {
    position: absolute; top: -5px; right: -5px;
    min-width: 22px; height: 22px;
    background: #fff; color: #db2777;
    font-size: 0.72rem; font-weight: 800;
    border-radius: 999px; display: flex; align-items: center;
    justify-content: center; padding: 0 5px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}

/* — BOTTOM NAV — */
body .mobile-bottom-nav {
    height: 68px !important;
    background: rgba(255,255,255,0.98) !important;
    border-top: 1px solid rgba(180,150,220,0.12) !important;
    box-shadow: 0 -4px 24px rgba(60,20,120,0.08) !important;
    backdrop-filter: blur(24px) !important;
    padding: 0 6px !important; z-index: 1000 !important;
}
body .mobile-bottom-nav-inner { max-width: 100% !important; }
body .mobile-nav-item {
    color: rgba(80,50,140,0.4) !important; gap: 2px !important;
    padding: 8px 2px 6px !important; transition: all 0.25s ease !important;
    flex: 1 !important; max-width: none !important; position: relative !important;
}
body .mobile-nav-item::before {
    content: '' !important; position: absolute !important;
    top: 0 !important; left: 20% !important; right: 20% !important;
    height: 0 !important; background: transparent !important;
    border-radius: 0 0 4px 4px !important; transition: all 0.25s ease !important;
}
body .mobile-nav-item.active { color: #5a2ca0 !important; }
body .mobile-nav-item.active::before {
    left: 22% !important; right: 22% !important;
    height: 3px !important;
    background: linear-gradient(90deg, #7c3aed, #a855f7) !important;
}
body .mobile-nav-item.active .mobile-nav-icon {
    transform: translateY(-2px) scale(1.18) !important;
    filter: drop-shadow(0 3px 8px rgba(90,44,160,0.4)) !important;
}
body .mobile-nav-icon { font-size: 1.4rem !important; line-height: 1 !important; }
body .mobile-nav-label { font-size: 0.6rem !important; font-weight: 700 !important; }

/* — MISC — */
body .wkd-grid { grid-template-columns: 1fr !important; }
body .modal { background: rgba(255,255,255,0.99) !important; }
body .toast { bottom: 140px !important; right: 14px !important; left: 14px !important; }

} /* end media */

@media (max-width: 768px) {
body .mobile-floating-search {
    display: none !important;
}

body .header-nav-row {
    padding: 10px 12px 14px !important;
    gap: 10px !important;
    align-items: center !important;
}

body .mobile-header-left {
    gap: 4px !important;
    padding: 4px !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.08) !important;
    border: 1px solid rgba(255,255,255,0.14) !important;
}

body .mobile-header-home-btn,
body .mobile-menu-btn,
body .header-icon-btn {
    width: 34px !important;
    height: 34px !important;
    border-radius: 10px !important;
    font-size: 0.98rem !important;
}

body .header-btn-outline,
body .header-btn-filled {
    height: 40px !important;
    padding: 0 16px !important;
    font-size: 0.8rem !important;
}

body .liturgical-today-widget {
    padding: 16px 16px 18px !important;
    gap: 12px !important;
    border-radius: 28px !important;
}

body .liturgical-today-widget > div:first-child {
    width: 54px !important;
    height: 72px !important;
    min-width: 54px !important;
    border-radius: 14px !important;
}

body .liturgical-today-widget > div:nth-child(2) > div:nth-child(2) {
    font-size: 1.04rem !important;
    line-height: 1.12 !important;
}

body .liturgical-today-widget > div:last-child {
    padding-left: 0 !important;
}

body .liturgical-today-widget > div:last-child > button:first-child {
    min-height: 42px !important;
    padding: 0 18px !important;
    font-size: 0.82rem !important;
}

body .search-bar-row {
    display: flex !important;
}

body .song-list {
    display: grid !important;
}

body .song-list-header,
body .dashboard-alpha-bar,
body .filter-tabs {
    display: none !important;
}

body[data-page="dashboard"] #dashboard-content {
    display: flex !important;
    flex-direction: column !important;
    gap: 14px !important;
}

body[data-page="dashboard"] #dashboard-content > .liturgical-today-widget { order: 1 !important; }
body[data-page="dashboard"] #dashboard-content > .dashboard-category-grid { order: 2 !important; }
body[data-page="dashboard"] #dashboard-content > .dashboard-search-row { order: 3 !important; }
body[data-page="dashboard"] #dashboard-content > .song-list-header { order: 4 !important; }
body[data-page="dashboard"] #dashboard-content > .song-list { order: 5 !important; }

body[data-page="dashboard"] .dashboard-search-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
}

body[data-page="dashboard"] .dashboard-search-row .search-input-wrap {
    width: 100% !important;
}

body[data-page="dashboard"] .dashboard-search-row .search-tool-btns {
    display: none !important;
}

body[data-page="dashboard"] .dashboard-search-row .search-input {
    min-height: 54px !important;
    border-radius: 22px !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(255,255,255,0.84) !important;
    box-shadow: 0 12px 24px rgba(77,40,118,0.08) !important;
}

body[data-page="dashboard"] .dashboard-category-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 10px 8px !important;
    margin: 0 !important;
    padding: 0 !important;
}

body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn {
    min-height: 92px !important;
    padding: 10px 6px 9px !important;
    gap: 7px !important;
    border-radius: 20px !important;
    background: linear-gradient(180deg, rgba(255,255,255,0.82), rgba(255,255,255,0.66)) !important;
    border: 1px solid rgba(255,255,255,0.8) !important;
    box-shadow: 0 10px 22px rgba(77,40,118,0.08) !important;
}

body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="duc-me"] {
    display: none !important;
}

body[data-page="dashboard"] .dashboard-category-grid .cat-icon-inner {
    width: 44px !important;
    height: 44px !important;
    aspect-ratio: auto !important;
    margin: 0 auto !important;
    border-radius: 14px !important;
    background: rgba(255,255,255,0.92) !important;
    border: 1px solid rgba(186,160,228,0.34) !important;
    box-shadow: none !important;
    font-size: 0 !important;
    color: transparent !important;
}

body[data-page="dashboard"] .dashboard-category-grid .cat-icon-inner::before {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    height: 100% !important;
    font-size: 0.76rem !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #5a2f88 !important;
    text-transform: uppercase !important;
}

body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="nhap-le"] .cat-icon-inner::before { content: 'NL' !important; }
body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="dap-ca"] .cat-icon-inner::before { content: 'TV' !important; }
body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="alleluia"] .cat-icon-inner::before { content: 'AL' !important; }
body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="dang-le"] .cat-icon-inner::before { content: 'DL' !important; }
body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="hiep-le"] .cat-icon-inner::before { content: 'HL' !important; }
body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="ket-le"] .cat-icon-inner::before { content: 'KL' !important; }
body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="ca-tiep-lien"] .cat-icon-inner::before { content: 'CTL' !important; font-size: 0.62rem !important; }
body[data-page="dashboard"] .dashboard-category-grid .cat-icon-btn[data-cat="dang-le-vat"] .cat-icon-inner::before { content: 'DLV' !important; font-size: 0.6rem !important; }

body[data-page="dashboard"] .dashboard-category-grid .cat-icon-label {
    font-size: 0.66rem !important;
    line-height: 1.16 !important;
    color: #4b2b74 !important;
}

body[data-page="dashboard"] .song-list {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
    padding: 0 !important;
    margin: 0 0 24px !important;
}

body[data-page="dashboard"] .song-row {
    padding: 14px 15px !important;
    border-radius: 20px !important;
    border: 1px solid rgba(255,255,255,0.82) !important;
    background: rgba(255,255,255,0.88) !important;
    box-shadow: 0 12px 26px rgba(77,40,118,0.08) !important;
}

body .mobile-fav-fab {
    bottom: 92px !important;
    right: 12px !important;
    width: 52px !important;
    height: 52px !important;
    box-shadow: 0 6px 22px rgba(219,39,119,0.34) !important;
}

body .mobile-fav-fab .fav-heart {
    font-size: 1.35rem !important;
}

body .mobile-fav-fab .fav-count {
    min-width: 20px !important;
    height: 20px !important;
    font-size: 0.68rem !important;
}
}