/* ============================================================
   Mahapuran Panchang – Frontend CSS
   NotebookLM-inspired: Soft, Light, Beautiful
   v1.5.2-notebooklm
   ============================================================ */

/* ── Google Font ─────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Tiro+Devanagari+Sanskrit:ital@0;1&display=swap');

/* ── Root / CSS Variables ────────────────────────────────── */
:root {
    /* NotebookLM-style palette */
    --mp-bg-page:       #f8f7f4;
    --mp-bg-card:       #ffffff;
    --mp-bg-tinted:     #f3f0eb;
    --mp-bg-subtle:     #faf9f7;

    /* Accent - warm saffron softened */
    --mp-accent:        #c94a00;
    --mp-accent-light:  #fff3ec;
    --mp-accent-mid:    #ffddc8;
    --mp-gold:          #b08d44;
    --mp-gold-light:    #fdf5e0;

    /* Semantic */
    --mp-shubh-bg:      #edf7f0;
    --mp-shubh-text:    #1b6b38;
    --mp-ashubh-bg:     #fdf0f0;
    --mp-ashubh-text:   #b83232;
    --mp-ekadashi-color:#6941c6;
    --mp-festival-color:#c94a00;

    /* Neutrals */
    --mp-border:        #e8e3db;
    --mp-border-strong: #d4cdc2;
    --mp-text:          #1a1a18;
    --mp-text-mid:      #4a4640;
    --mp-text-light:    #7a7570;
    --mp-text-hint:     #a09b95;

    /* Shadow */
    --mp-shadow-xs:     0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --mp-shadow-sm:     0 2px 8px rgba(0,0,0,0.07), 0 1px 3px rgba(0,0,0,0.05);
    --mp-shadow-md:     0 4px 20px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05);
    --mp-shadow-lg:     0 12px 40px rgba(0,0,0,0.10), 0 4px 16px rgba(0,0,0,0.06);

    /* Radius */
    --mp-r-sm:          8px;
    --mp-r-md:          12px;
    --mp-r-lg:          16px;
    --mp-r-xl:          20px;

    /* Font */
    --mp-font:          'Plus Jakarta Sans', 'Mukta', sans-serif;
    --mp-font-hindi:    'Tiro Devanagari Sanskrit', 'Mukta', serif;

    /* Transitions */
    --mp-ease:          cubic-bezier(0.22, 1, 0.36, 1);
}

/* ── Wrapper ─────────────────────────────────────────────── */
.mp-panchang-wrap {
    font-family: var(--mp-font);
    max-width: 920px;
    margin: 0 auto;
    background: var(--mp-bg-page);
    border-radius: var(--mp-r-xl);
    border: 1px solid var(--mp-border);
    box-shadow: var(--mp-shadow-md);
    overflow: hidden;
    color: var(--mp-text);
}

/* ── Top Bar ─────────────────────────────────────────────── */
.mp-top-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: var(--mp-bg-card);
    border-bottom: 1px solid var(--mp-border);
    flex-wrap: wrap;
    gap: 8px;
    position: relative;
    z-index: 20;
}

.mp-location-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.mp-location-icon {
    font-size: 15px;
    opacity: 0.6;
}

.mp-city-select {
    font-family: var(--mp-font);
    padding: 7px 32px 7px 12px;
    border: 1px solid var(--mp-border-strong);
    border-radius: var(--mp-r-sm);
    background: var(--mp-bg-subtle);
    color: var(--mp-text);
    font-size: 13.5px;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s, box-shadow 0.2s;
    min-width: 180px;
    max-width: 100%;
    height: auto !important;
    min-height: 36px;
    appearance: auto !important;
    -webkit-appearance: menulist !important;
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
}
.mp-city-select:hover,
.mp-city-select:focus {
    border-color: var(--mp-accent);
    box-shadow: 0 0 0 3px rgba(201,74,0,0.08);
    outline: none;
}
.mp-city-select option {
    background: #ffffff !important;
    color: var(--mp-text) !important;
}

.mp-detect-btn,
.mp-today-btn {
    font-family: var(--mp-font);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    border-radius: var(--mp-r-sm);
    border: none;
    cursor: pointer;
    transition: all 0.18s var(--mp-ease);
    display: inline-flex !important;
    align-items: center;
    gap: 5px;
    white-space: nowrap;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}

.mp-detect-btn {
    background: var(--mp-bg-tinted);
    color: var(--mp-text-mid);
    border: 1px solid var(--mp-border);
}
.mp-detect-btn:hover {
    background: var(--mp-accent-light);
    border-color: var(--mp-accent-mid);
    color: var(--mp-accent);
}

.mp-today-btn {
    background: var(--mp-accent);
    color: #ffffff;
    box-shadow: var(--mp-shadow-xs);
}
.mp-today-btn:hover {
    background: #a83c00;
    box-shadow: var(--mp-shadow-sm);
    transform: translateY(-1px);
}

/* ── Calendar Header ─────────────────────────────────────── */
.mp-cal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 18px 24px;
    background: var(--mp-bg-card);
    border-bottom: 1px solid var(--mp-border);
    position: relative;
    z-index: 20;
}

.mp-cal-title {
    text-align: center;
}
.mp-cal-title h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--mp-header-bg, var(--mp-text));
    letter-spacing: -0.3px;
}

.mp-samvat {
    font-size: 12px;
    color: var(--mp-text-light);
    display: block;
    margin-top: 3px;
    font-weight: 500;
}

.mp-nav-btn {
    background: var(--mp-bg-tinted);
    border: 1px solid var(--mp-border);
    color: var(--mp-text-mid);
    width: 38px;
    height: 38px;
    min-width: 38px;
    border-radius: 50%;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.18s var(--mp-ease);
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
}
.mp-nav-btn:hover {
    background: var(--mp-accent-light);
    border-color: var(--mp-accent-mid);
    color: var(--mp-accent);
    transform: scale(1.05);
}

/* ── Day Headers ─────────────────────────────────────────── */
.mp-day-headers {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--mp-bg-tinted);
    border-bottom: 1px solid var(--mp-border);
}

.mp-day-header {
    text-align: center;
    padding: 9px 4px;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--mp-text-light);
    letter-spacing: 0.4px;
    text-transform: uppercase;
    border-right: 1px solid var(--mp-border);
    font-family: var(--mp-font-hindi);
}
.mp-day-header:last-child { border-right: none; }
.mp-day-headers .mp-day-header:first-child { color: #c94a00; }

/* ── Calendar Grid ───────────────────────────────────────── */
.mp-calendar-grid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background: var(--mp-border);
    gap: 1px;
}

.mp-cal-cell {
    background: var(--mp-bg-card);
    padding: 6px 6px 5px;
    min-height: 80px;
    cursor: pointer;
    transition: background 0.15s var(--mp-ease);
    position: relative;
    font-family: var(--mp-font);
}

.mp-cal-cell:hover {
    background: var(--mp-accent-light);
    z-index: 1;
}

.mp-cal-cell.mp-empty {
    background: var(--mp-bg-subtle);
    cursor: default;
}

.mp-cal-cell.mp-today {
    background: var(--mp-gold-light);
    box-shadow: inset 0 0 0 2px var(--mp-today, var(--mp-gold));
}

/* Date number */
.mp-date-num {
    font-size: 17px;
    font-weight: 700;
    color: var(--mp-text);
    line-height: 1;
    margin-bottom: 3px;
}
.mp-cal-cell:nth-child(7n+1) .mp-date-num { color: #c94a00; }

.mp-today-tag {
    font-size: 9px;
    background: var(--mp-today, var(--mp-gold));
    color: white;
    padding: 1px 4px;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 3px;
}

/* Sunrise in cell */
.mp-sunrise-small {
    font-size: 10px;
    color: var(--mp-sunrise, #d97706);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Tithi in cell */
.mp-tithi-small {
    font-size: 11px;
    color: var(--mp-text-light);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-tithi-link { color: inherit; text-decoration: none; }
.mp-tithi-link:hover { color: var(--mp-accent); text-decoration: underline; }

/* Festival tag in cell */
.mp-festival-tag {
    display: block;
    font-size: 10px;
    font-weight: 600;
    color: var(--mp-festival, var(--mp-accent));
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}
.mp-festival-tag:hover { text-decoration: underline; }

/* Colored dot */
.mp-fest-dot {
    display: block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    position: absolute;
    top: 5px;
    right: 5px;
}

/* Loading */
.mp-loading {
    grid-column: 1/-1;
    text-align: center;
    padding: 48px;
    color: var(--mp-text-hint);
    font-size: 15px;
    font-weight: 500;
}

/* ── Modal Overlay ───────────────────────────────────────── */
.mp-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(26,26,24,0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 9999;
    align-items: center;
    justify-content: center;
    padding: 16px;
}
.mp-modal-overlay.active { display: flex; }

.mp-modal {
    background: var(--mp-bg-card);
    border-radius: var(--mp-r-xl);
    width: 100%;
    max-width: 560px;
    max-height: 92vh;
    overflow-y: auto;
    padding: 0;
    position: relative;
    border: 1px solid var(--mp-border);
    box-shadow: var(--mp-shadow-lg);
    font-family: var(--mp-font);
}

.mp-modal-close {
    position: absolute;
    top: 14px;
    right: 16px;
    background: var(--mp-bg-tinted);
    border: 1px solid var(--mp-border);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    color: var(--mp-text-mid);
    line-height: 1;
    transition: all 0.15s;
    z-index: 10;
}
.mp-modal-close:hover {
    background: var(--mp-ashubh-bg);
    color: var(--mp-ashubh-text);
    border-color: var(--mp-ashubh-text);
}

.mp-modal-date {
    font-size: 16px;
    font-weight: 700;
    color: var(--mp-header-bg, var(--mp-accent));
    border-bottom: 1px solid var(--mp-border);
    padding: 20px 24px 16px;
    margin: 0;
}

#mp-modal-content {
    padding: 16px 24px 24px;
    max-height: none;
}

/* Detail grid */
.mp-panchang-detail-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 16px;
}
@media (max-width: 480px) {
    .mp-panchang-detail-grid { grid-template-columns: 1fr; }
}

.mp-detail-row {
    display: flex;
    flex-direction: column;
    background: var(--mp-bg-subtle);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-r-sm);
    padding: 10px 14px;
    transition: background 0.15s;
}
.mp-detail-row:hover { background: var(--mp-accent-light); }

.mp-detail-label {
    font-size: 10.5px;
    color: var(--mp-text-hint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.mp-detail-value {
    font-size: 14.5px;
    font-weight: 600;
    color: var(--mp-text);
    margin-top: 3px;
}
.mp-detail-value a { color: var(--mp-accent); text-decoration: none; }
.mp-detail-value a:hover { text-decoration: underline; }

.mp-sun { font-weight: 700; }
.mp-sun.sunrise { color: #d97706; }
.mp-sun.sunset  { color: #e85d8a; }

/* Timings section */
.mp-timings-section { margin-bottom: 14px; }
.mp-timings-section h4 {
    font-size: 13px;
    margin: 0 0 8px;
    color: var(--mp-text-mid);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-timing {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    border-radius: var(--mp-r-sm);
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 5px;
}
.mp-timing.shubh  {
    background: var(--mp-shubh-bg);
    color: var(--mp-shubh-text);
    border: 1px solid #c3e6d0;
}
.mp-timing.ashubh {
    background: var(--mp-ashubh-bg);
    color: var(--mp-ashubh-text);
    border: 1px solid #f5c6c6;
}

/* Festival banner in modal */
.mp-modal-festival {
    background: var(--mp-gold-light);
    border: 1px solid #e8d9a0;
    border-radius: var(--mp-r-md);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.mp-modal-festival h3 {
    margin: 0 0 5px;
    font-size: 16px;
    color: var(--mp-header-bg, var(--mp-accent));
}
.mp-modal-festival h3 a { color: inherit; text-decoration: none; }
.mp-modal-festival h3 a:hover { text-decoration: underline; }
.mp-modal-festival p { margin: 4px 0 10px; font-size: 13px; color: var(--mp-text-mid); }

.mp-gcal-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: #1a73e8;
    color: white !important;
    padding: 7px 14px;
    border-radius: var(--mp-r-sm);
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    margin-right: 8px;
    transition: background 0.18s;
}
.mp-gcal-btn:hover { background: #1558b0; }

.mp-reminder-btn {
    background: var(--mp-accent-light);
    color: var(--mp-accent);
    border: 1px solid var(--mp-accent-mid);
    padding: 7px 14px;
    border-radius: var(--mp-r-sm);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
}
.mp-reminder-btn:hover {
    background: var(--mp-accent);
    color: white;
}

/* Reminder form */
.mp-reminder-form {
    background: var(--mp-bg-subtle);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-r-md);
    padding: 16px;
    margin-top: 10px;
}
.mp-input {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--mp-border-strong);
    border-radius: var(--mp-r-sm);
    font-size: 14px;
    margin-bottom: 8px;
    box-sizing: border-box;
    font-family: var(--mp-font);
    color: var(--mp-text);
    background: white;
    transition: border-color 0.18s, box-shadow 0.18s;
}
.mp-input:focus {
    border-color: var(--mp-accent);
    box-shadow: 0 0 0 3px rgba(201,74,0,0.08);
    outline: none;
}
.mp-reminder-form select {
    width: 100%;
    padding: 9px 12px;
    border: 1px solid var(--mp-border-strong);
    border-radius: var(--mp-r-sm);
    font-size: 14px;
    margin-bottom: 10px;
    font-family: var(--mp-font);
    color: var(--mp-text);
    background: white;
}

.mp-btn-primary {
    background: var(--mp-accent);
    color: white;
    border: none;
    padding: 9px 20px;
    border-radius: var(--mp-r-sm);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    font-family: var(--mp-font);
    transition: background 0.18s, transform 0.15s;
}
.mp-btn-primary:hover {
    background: #a83c00;
    transform: translateY(-1px);
}

.mp-modal-seo-link {
    text-align: center;
    margin-top: 14px;
    font-size: 13px;
}
.mp-modal-seo-link a { color: var(--mp-accent); font-weight: 600; }

/* ── Today Widget ────────────────────────────────────────── */
.mp-today-widget {
    background: var(--mp-bg-card);
    border-radius: var(--mp-r-xl);
    border: 1px solid var(--mp-border);
    overflow: hidden;
    font-family: var(--mp-font);
    box-shadow: var(--mp-shadow-sm);
}

.mp-today-header {
    padding: 20px 24px;
    text-align: center;
    background: var(--mp-header-bg, linear-gradient(135deg, #c94a00, #a83c00));
    color: var(--mp-header-text, #fff8ee);
}
.mp-today-header h3 {
    margin: 0 0 4px;
    font-size: 18px;
    font-weight: 700;
    font-family: var(--mp-font-hindi);
    letter-spacing: 0.5px;
}
.mp-today-header p {
    margin: 0;
    font-size: 13.5px;
    opacity: 0.85;
    font-weight: 500;
}

.mp-today-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    background: var(--mp-border);
    gap: 1px;
    border-top: 1px solid var(--mp-border);
}
@media (max-width: 600px) {
    .mp-today-grid { grid-template-columns: repeat(2, 1fr); }
}

.mp-info-card {
    background: var(--mp-bg-card);
    padding: 16px 12px;
    text-align: center;
    transition: background 0.15s var(--mp-ease);
}
.mp-info-card:hover { background: var(--mp-accent-light); }

.mp-info-icon { font-size: 20px; line-height: 1; }
.mp-info-label {
    font-size: 10.5px;
    color: var(--mp-text-hint);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin: 6px 0 3px;
    font-weight: 700;
}
.mp-info-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--mp-text);
    line-height: 1.3;
}
.mp-info-value a { color: var(--mp-accent); text-decoration: none; }
.mp-info-value a:hover { text-decoration: underline; }

.mp-timings-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px 16px;
    background: var(--mp-bg-subtle);
    border-top: 1px solid var(--mp-border);
}

.mp-timing-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    border: 1px solid transparent;
}
.mp-timing-item.shubh  {
    background: var(--mp-shubh-bg);
    color: var(--mp-shubh-text);
    border-color: #c3e6d0;
}
.mp-timing-item.ashubh {
    background: var(--mp-ashubh-bg);
    color: var(--mp-ashubh-text);
    border-color: #f5c6c6;
}

.mp-festival-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 18px;
    background: var(--mp-gold-light);
    border-top: 1px solid #e8d9a0;
}
.mp-festival-icon { font-size: 22px; flex-shrink: 0; }
.mp-festival-banner strong a {
    color: var(--mp-header-bg, var(--mp-accent));
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
}
.mp-festival-banner p {
    margin: 3px 0 0;
    font-size: 12.5px;
    color: var(--mp-text-mid);
}

.mp-gcal-small {
    margin-left: auto;
    background: #1a73e8;
    color: white !important;
    padding: 6px 12px;
    border-radius: var(--mp-r-sm);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background 0.18s;
}
.mp-gcal-small:hover { background: #1558b0; }

/* ── Compact Widget ──────────────────────────────────────── */
.mp-compact-widget {
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-r-lg);
    overflow: hidden;
    font-family: var(--mp-font);
    box-shadow: var(--mp-shadow-xs);
}

.mp-compact-header {
    background: var(--mp-header-bg, var(--mp-accent));
    color: var(--mp-header-text, #fff8ee);
    padding: 12px 16px;
    font-size: 14px;
    font-weight: 700;
    text-align: center;
    font-family: var(--mp-font-hindi);
    letter-spacing: 0.5px;
}

.mp-compact-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 16px;
    border-bottom: 1px solid var(--mp-border);
    font-size: 13.5px;
    transition: background 0.12s;
}
.mp-compact-row:last-child { border-bottom: none; }
.mp-compact-row:hover { background: var(--mp-accent-light); }

.mp-compact-label {
    color: var(--mp-text-light);
    font-weight: 600;
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}
.mp-compact-value {
    color: var(--mp-text);
    font-weight: 600;
}

/* ── Festivals List ──────────────────────────────────────── */
.mp-festivals-list {
    font-family: var(--mp-font);
}

.mp-festivals-list h2 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: var(--mp-header-bg, var(--mp-accent));
}

.mp-festival-card {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-r-md);
    padding: 16px 18px;
    margin-bottom: 12px;
    transition: all 0.18s var(--mp-ease);
    box-shadow: var(--mp-shadow-xs);
}
.mp-festival-card:hover {
    box-shadow: var(--mp-shadow-sm);
    transform: translateY(-1px);
    border-color: var(--mp-accent-mid);
}

.mp-festival-date {
    min-width: 52px;
    text-align: center;
    background: var(--mp-accent-light);
    border: 1px solid var(--mp-accent-mid);
    border-radius: var(--mp-r-sm);
    padding: 8px 6px;
    flex-shrink: 0;
}
.mp-festival-date-day {
    font-size: 22px;
    font-weight: 800;
    color: var(--mp-accent);
    line-height: 1;
    display: block;
}
.mp-festival-date-mon {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mp-text-light);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: block;
    margin-top: 2px;
}

.mp-festival-info { flex: 1; min-width: 0; }
.mp-festival-info strong {
    display: block;
    font-size: 15px;
    font-weight: 700;
    color: var(--mp-text);
}
.mp-festival-info small {
    display: block;
    font-size: 12.5px;
    color: var(--mp-text-light);
    margin-top: 4px;
}

.mp-fest-type-badge {
    display: inline-flex;
    align-items: center;
    padding: 3px 10px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    margin-top: 7px;
    text-transform: capitalize;
}

/* ── Ekadashi List ───────────────────────────────────────── */
.mp-ekadashi-list { font-family: var(--mp-font); }
.mp-ekadashi-list h2 {
    margin: 0 0 20px;
    font-size: 22px;
    font-weight: 700;
    color: var(--mp-ekadashi, #6941c6);
}

.mp-ekadashi-card {
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-left: 4px solid var(--mp-ekadashi, #6941c6);
    border-radius: var(--mp-r-md);
    padding: 14px 16px;
    margin-bottom: 10px;
    transition: all 0.15s var(--mp-ease);
    box-shadow: var(--mp-shadow-xs);
}
.mp-ekadashi-card:hover {
    box-shadow: var(--mp-shadow-sm);
    transform: translateY(-1px);
}

.mp-ekadashi-name {
    font-size: 16px;
    font-weight: 700;
    color: var(--mp-text);
}
.mp-ekadashi-date {
    font-size: 13px;
    color: var(--mp-text-light);
    margin-top: 4px;
    font-weight: 500;
}

/* ── Pro/Full Day View Sections ──────────────────────────── */
.mp-day-card-full { font-family: var(--mp-font); }

.mp-pro-section,
.mp-full-section {
    padding: 18px 24px;
    border-bottom: 1px solid var(--mp-border);
}

.mp-pro-section h3,
.mp-full-section h3 {
    margin: 0 0 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--mp-header-bg, var(--mp-accent)) !important;
    opacity: 1 !important;
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.mp-pro-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 8px 0;
    border-bottom: 1px solid var(--mp-border);
    font-size: 14px;
    gap: 12px;
}
.mp-pro-row:last-child { border-bottom: none; }

.mp-pro-row span:first-child {
    color: var(--mp-text-light);
    font-weight: 500;
    flex-shrink: 0;
    min-width: 100px;
}
.mp-pro-row span:last-child,
.mp-pro-row strong {
    color: var(--mp-text);
    font-weight: 600;
    text-align: right;
}
.mp-pro-row a {
    color: var(--mp-header-bg, var(--mp-accent)) !important;
    font-weight: 700;
    text-decoration: none;
}
.mp-pro-row a:hover { text-decoration: underline; }

/* Full today grid (2 columns) */
.mp-full-today-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}
.mp-full-today-grid .mp-pro-section:first-child {
    border-right: 1px solid var(--mp-border);
}

@media (max-width: 760px) {
    .mp-full-today-grid { grid-template-columns: 1fr; }
    .mp-full-today-grid .mp-pro-section:first-child {
        border-right: none;
        border-bottom: 1px solid var(--mp-border);
    }
    .mp-samvat-list div { grid-template-columns: 105px 1fr; }
}

.mp-timing-grid {
    display: grid;
    gap: 6px;
}
.mp-timing-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 9px 12px;
    border-radius: var(--mp-r-sm);
    font-size: 13.5px;
    font-weight: 500;
    border: 1px solid transparent;
}
.mp-timing-row.shubh  {
    background: var(--mp-shubh-bg);
    color: var(--mp-shubh-text);
    border-color: #c3e6d0;
}
.mp-timing-row.ashubh {
    background: var(--mp-ashubh-bg);
    color: var(--mp-ashubh-text);
    border-color: #f5c6c6;
}

/* ── Festival Full Card ──────────────────────────────────── */
.mp-festival-card-full {
    background: var(--mp-bg-subtle);
    border: 1px solid var(--mp-border);
    border-left: 4px solid var(--mp-festival, var(--mp-accent));
    border-radius: var(--mp-r-md);
    padding: 14px 16px;
    margin-bottom: 10px;
}
.mp-festival-card-full strong {
    display: block;
    font-size: 16px;
    line-height: 1.3;
    color: var(--mp-header-bg, var(--mp-accent));
    font-weight: 700;
}
.mp-festival-card-full small {
    display: block;
    margin-top: 4px;
    color: var(--mp-text-light);
    font-weight: 500;
}
.mp-festival-card-full p {
    margin: 8px 0 0;
    font-size: 13px;
    color: var(--mp-text-mid);
}
.mp-festival-card-full.empty {
    border-left-color: var(--mp-border-strong);
    background: var(--mp-bg-subtle);
}

.mp-fest-cat {
    display: inline-flex;
    align-items: center;
    margin-top: 8px;
    padding: 3px 10px;
    border-radius: 999px;
    background: var(--mp-festival, var(--mp-accent));
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    text-transform: capitalize;
    letter-spacing: 0.3px;
}

.mp-samvat-list { display: grid; gap: 8px; }
.mp-samvat-list div {
    display: grid;
    grid-template-columns: 120px 1fr;
    gap: 8px;
    align-items: baseline;
    font-size: 14px;
    padding: 6px 0;
    border-bottom: 1px solid var(--mp-border);
}
.mp-samvat-list div:last-child { border-bottom: none; }
.mp-samvat-list strong { color: var(--mp-header-bg, var(--mp-accent)); font-weight: 700; }
.mp-samvat-list span { color: var(--mp-text); font-weight: 600; }

.mp-accuracy-note { background: var(--mp-bg-subtle); }
.mp-accuracy-note p { margin: 0; font-size: 13px; color: var(--mp-text-mid); }


/* ===== Hindu style calendar cells (v1.4.2) ===== */
.mp-cal-cell.mp-hindu-style.mp-reworked-cell {
    min-height: 136px;
    padding: 5px 6px 4px;
}

.mp-reworked-cell .mp-cell-top,
.mp-reworked-cell .mp-cell-mid,
.mp-reworked-cell .mp-cell-bottom { display: none !important; }

.mp-cell-info-grid {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 6px;
    row-gap: 1px;
    min-height: 32px;
}

.mp-info-title {
    font-size: 9px;
    line-height: 1.05;
    color: #0f79d0;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-info-title.right,
.mp-info-value.right { text-align: right; }

.mp-info-value {
    font-size: 10px;
    line-height: 1.1;
    color: var(--mp-text);
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mp-info-value.important { color: #c94a00 !important; }

.mp-reworked-cell .mp-big-date-wrap {
    min-height: 54px;
    margin-top: 0;
}
.mp-reworked-cell .mp-big-date { font-size: 56px; }
.mp-reworked-cell .mp-big-date.holiday { color: #c94a00 !important; }

.mp-cell-festival-line {
    position: relative;
    z-index: 1;
    min-height: 14px;
    margin-top: -2px;
    font-size: 10px;
    line-height: 1.1;
    font-weight: 800;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: center;
    margin-top: 0;
}

.mp-cell-footer-grid {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 3px;
    border-top: 1px solid var(--mp-border);
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 5px;
}
.mp-cell-footer-grid div { min-width: 0; }
.mp-cell-footer-grid div.right { text-align: right; }
.mp-cell-footer-grid span {
    display: block;
    font-size: 8px;
    line-height: 1.05;
    color: #0f79d0;
    font-weight: 700;
}
.mp-cell-footer-grid strong {
    display: block;
    font-size: 9px;
    line-height: 1.1;
    color: var(--mp-text);
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* Ekadashi day overrides */
.mp-cal-cell.mp-hindu-style.mp-ekadashi-day .mp-cell-top-left,
.mp-cal-cell.mp-hindu-style.mp-ekadashi-day .mp-cell-top-right,
.mp-cal-cell.mp-hindu-style.mp-ekadashi-day .mp-mid-line,
.mp-cal-cell.mp-hindu-style.mp-ekadashi-day .mp-mid-festival,
.mp-cal-cell.mp-hindu-style.mp-ekadashi-day .mp-cell-tithi {
    color: #c94a00 !important;
}
.mp-cal-cell.mp-hindu-style.mp-ekadashi-day {
    background: #fff9f5;
    border-left: 2px solid #c94a00 !important;
}
.mp-cal-cell.mp-hindu-style.mp-ekadashi-day .mp-big-date { color: #1a73e8; }
.mp-cal-cell.mp-hindu-style.mp-ekadashi-day .mp-cell-bottom {
    color: #c94a00;
    border-top-color: rgba(201,74,0,0.18);
}
.mp-ekadashi-day .mp-info-value,
.mp-ekadashi-day .mp-cell-footer-grid strong { color: #c94a00 !important; }

/* Popup quick grid */
.mp-popup-quick-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-bottom: 1px solid var(--mp-border);
    background: var(--mp-bg-subtle);
}
.mp-popup-quick-grid > div {
    padding: 14px 18px;
    border-right: 1px solid var(--mp-border);
}
.mp-popup-quick-grid > div:last-child { border-right: none; }
.mp-popup-quick-grid span {
    display: block;
    font-size: 11px;
    color: var(--mp-header-bg, var(--mp-accent));
    font-weight: 700;
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-popup-quick-grid strong {
    display: block;
    font-size: 15px;
    color: var(--mp-text);
    line-height: 1.25;
    font-weight: 600;
}
.mp-popup-quick-grid small {
    display: block;
    color: var(--mp-text-light);
    margin-top: 3px;
    font-size: 12px;
}


/* ===== Reminder UI (v1.4.3) ===== */
.mp-reminder-toggle {
    margin-top: 10px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    border: 1px solid var(--mp-accent-mid);
    border-radius: 999px;
    padding: 8px 16px;
    background: var(--mp-accent-light);
    color: var(--mp-accent);
    font-weight: 700;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.18s;
}
.mp-reminder-toggle:hover {
    background: var(--mp-accent);
    color: white;
    border-color: var(--mp-accent);
}

.mp-reminder-form {
    margin-top: 10px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    gap: 8px;
    align-items: center;
}
.mp-reminder-form[hidden] { display: none !important; }

.mp-reminder-form input,
.mp-reminder-form select {
    min-height: 38px;
    border: 1px solid var(--mp-border-strong);
    border-radius: var(--mp-r-sm);
    padding: 7px 10px;
    font-size: 13px;
    background: white;
    color: var(--mp-text);
    transition: border-color 0.18s;
}
.mp-reminder-form input:focus,
.mp-reminder-form select:focus {
    border-color: var(--mp-accent);
    outline: none;
}

.mp-submit-reminder {
    min-height: 38px;
    border: none;
    border-radius: var(--mp-r-sm);
    padding: 7px 14px;
    background: var(--mp-accent);
    color: white;
    font-weight: 700;
    cursor: pointer;
    font-size: 13px;
    transition: background 0.18s;
}
.mp-submit-reminder:hover { background: #a83c00; }

.mp-reminder-msg {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 600;
    min-height: 18px;
}
.mp-reminder-msg.success { color: var(--mp-shubh-text); }
.mp-reminder-msg.error   { color: var(--mp-ashubh-text); }

@media (max-width: 640px) {
    .mp-reminder-form { grid-template-columns: 1fr; }
}

/* ===== Single Day Route Page (v1.4.7) ===== */
.mp-single-day-wrap {
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-r-xl);
    overflow: hidden;
    box-shadow: var(--mp-shadow-sm);
    color: #222 !important;
}
.mp-single-day-wrap,
.mp-single-day-wrap * { text-shadow: none !important; }

.mp-single-hero {
    background: var(--mp-header-bg, var(--mp-accent));
    color: var(--mp-header-text, #fff8ee);
    text-align: center;
    padding: 30px 20px;
}
.mp-single-hero h1 {
    margin: 0;
    color: inherit;
    font-size: clamp(22px, 4vw, 34px);
    font-weight: 800;
    letter-spacing: -0.5px;
}
.mp-single-hero p {
    margin: 8px 0 0;
    color: inherit;
    opacity: 0.9;
    font-weight: 500;
}

.mp-single-strip {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    background: var(--mp-bg-tinted);
    border-bottom: 1px solid var(--mp-border);
}
.mp-single-strip div {
    padding: 14px;
    text-align: center;
    border-right: 1px solid var(--mp-border);
}
.mp-single-strip div:last-child { border-right: none; }
.mp-single-strip span {
    display: block;
    font-size: 11px;
    color: var(--mp-text-hint);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.mp-single-strip strong {
    display: block;
    margin-top: 5px;
    font-size: 17px;
    color: var(--mp-text);
    font-weight: 700;
}

.mp-single-card {
    padding: 20px 24px;
    border-bottom: 1px solid var(--mp-border);
    background: var(--mp-bg-card);
    color: #222 !important;
}
.mp-single-card h2 {
    margin: 0 0 14px;
    color: var(--mp-header-bg, var(--mp-accent)) !important;
    font-size: 20px;
    font-weight: 700;
    opacity: 1 !important;
    visibility: visible !important;
}
.mp-single-card h3 {
    color: var(--mp-header-bg, var(--mp-accent)) !important;
    opacity: 1 !important;
    visibility: visible !important;
}
.mp-single-card p,
.mp-single-card div,
.mp-single-card span,
.mp-single-card strong {
    color: #222 !important;
    opacity: 1 !important;
}

.mp-single-festival {
    border-left: 4px solid var(--mp-festival, var(--mp-accent));
    background: var(--mp-gold-light);
    border-radius: var(--mp-r-md);
    padding: 14px 16px;
}
.mp-single-festival.auto { border-left-color: var(--mp-ekadashi, #6941c6); }
.mp-single-festival strong {
    display: block;
    font-size: 18px;
    color: var(--mp-header-bg, var(--mp-accent)) !important;
    font-weight: 700;
}
.mp-single-festival small {
    display: block;
    margin-top: 4px;
    color: var(--mp-text-mid) !important;
}
.mp-single-festival p { margin: 8px 0 0; color: #222 !important; }

.mp-single-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
    padding: 20px 24px;
    background: var(--mp-bg-subtle);
    border-bottom: 1px solid var(--mp-border);
    color: #222 !important;
}
.mp-single-grid h2,
.mp-single-grid h3 {
    color: var(--mp-header-bg, var(--mp-accent)) !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.mp-single-row {
    background: var(--mp-bg-card);
    border: 1px solid var(--mp-border);
    border-radius: var(--mp-r-md);
    padding: 14px 16px;
    transition: all 0.15s;
}
.mp-single-row:hover {
    box-shadow: var(--mp-shadow-xs);
    border-color: var(--mp-accent-mid);
}
.mp-single-row span {
    display: block;
    color: var(--mp-text-hint) !important;
    font-size: 11px;
    margin-bottom: 6px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 1 !important;
}
.mp-single-row strong {
    display: block;
    color: var(--mp-text) !important;
    font-size: 15.5px;
    font-weight: 600;
}
.mp-single-row strong a {
    color: var(--mp-header-bg, var(--mp-accent)) !important;
    text-decoration: none;
}

.mp-single-timing {
    padding: 10px 14px;
    border-radius: var(--mp-r-sm);
    margin: 6px 0;
    background: var(--mp-bg-subtle) !important;
    border-left: 4px solid var(--mp-border);
    color: #222 !important;
    font-weight: 600;
    opacity: 1 !important;
}
.mp-single-timing.shubh {
    background: var(--mp-shubh-bg) !important;
    border-left-color: var(--mp-shubh, #4caf50) !important;
    color: var(--mp-shubh-text) !important;
}
.mp-single-timing.ashubh {
    background: var(--mp-ashubh-bg) !important;
    border-left-color: var(--mp-ashubh, #f44336) !important;
    color: var(--mp-ashubh-text) !important;
}

.mp-single-back {
    padding: 18px 24px 24px;
    background: var(--mp-bg-card);
    color: #222 !important;
}
.mp-single-back a {
    font-weight: 700;
    color: var(--mp-header-bg, var(--mp-accent)) !important;
    opacity: 1 !important;
}

@media (max-width: 700px) {
    .mp-single-strip,
    .mp-single-grid { grid-template-columns: 1fr; }
    .mp-single-strip div { border-right: none; border-bottom: 1px solid var(--mp-border); }
}

/* ===== Cell center tag (v1.5.0) ===== */
.mp-cell-center-tag {
    position: relative;
    z-index: 1;
    text-align: center;
    color: #c94a00;
    font-weight: 900;
    font-size: 11px;
    line-height: 1.05;
    margin-top: -5px;
    margin-bottom: 2px;
    letter-spacing: 0.2px;
}
.mp-reworked-cell.mp-ekadashi-day .mp-cell-center-tag,
.mp-reworked-cell.mp-festival-day .mp-cell-center-tag { color: #c94a00 !important; }

/* ===== Auto vrat (v1.4.0) ===== */
.mp-auto-vrat-note { display: none !important; }
.mp-festival-card-full.auto {
    border-left-color: var(--mp-ekadashi, #6941c6);
}
.mp-festival-card-full.auto .mp-fest-cat { background: var(--mp-ekadashi, #6941c6); }

/* ===== Mobile overrides ===== */
@media (max-width: 640px) {
    .mp-panchang-wrap .mp-top-bar { align-items: stretch; }
    .mp-panchang-wrap .mp-location-bar,
    .mp-panchang-wrap .mp-city-select,
    .mp-panchang-wrap .mp-detect-btn,
    .mp-panchang-wrap .mp-today-btn { width: 100%; }
    .mp-panchang-wrap .mp-cal-header { padding: 12px 10px; }

    .mp-cal-cell.mp-hindu-style.mp-reworked-cell {
        min-height: 96px;
        padding: 3px 3px 2px;
    }
    .mp-cell-info-grid { min-height: 26px; column-gap: 3px; }
    .mp-info-title { font-size: 7px; }
    .mp-info-value  { font-size: 8px; }
    .mp-reworked-cell .mp-big-date-wrap { min-height: 38px; }
    .mp-reworked-cell .mp-big-date      { font-size: 34px; }
    .mp-cell-festival-line { font-size: 8px; min-height: 10px; }
    .mp-cell-footer-grid span,
    .mp-cell-footer-grid strong { font-size: 7px; }
    .mp-cell-center-tag { font-size: 8px; margin-top: -3px; margin-bottom: 1px; }

    .mp-popup-quick-grid { grid-template-columns: 1fr; }
    .mp-popup-quick-grid > div { border-right: none; border-bottom: 1px solid var(--mp-border); }

    .mp-full-today-grid { grid-template-columns: 1fr; }
    .mp-full-today-grid .mp-pro-section:first-child {
        border-right: none;
        border-bottom: 1px solid var(--mp-border);
    }
    .mp-samvat-list div { grid-template-columns: 105px 1fr; }

    .mp-reminder-form { grid-template-columns: 1fr; }
}