/* ============================================================
   RasiPalanStyles.css — Mobile overrides
   Loaded via @section Styles → BEFORE Inspinia4 / Bootstrap.
   Uses ID-level specificity to beat inline .g-* / .btn-* rules.
   ============================================================ */

/* RasiPalan public corporate color layer. Keep status colors and layout semantics intact. */
.rasi-palan-page {
    --vs-navy-deep: #0E2A47;
    --vs-navy-royal: #123B68;
    --vs-gold: #C89A3D;
    --vs-gold-dark: #A87F2E;
    --vs-gold-surface: #F5EDD8;
    --vs-bg-blue-grey: #E8EEF6;
    --vs-text-navy-dark: #0A1F38;
    --vs-text-muted: #555770;
    --vs-border: #D4D8E2;
    background-color: #F6F8FB;
}

.rasi-palan-page .cta-banner {
    background: var(--vs-navy-deep) !important;
}

.rasi-palan-page .vibe-header {
    border-left-color: var(--vs-gold) !important;
}

.rasi-palan-page .zodiac-card {
    border-color: var(--vs-border) !important;
}

.rasi-palan-page .border-primary {
    border-top-color: var(--vs-navy-royal) !important;
}

.rasi-palan-page .bg-career,
.rasi-palan-page .bg-general {
    background-color: var(--vs-navy-royal) !important;
}

.rasi-palan-page .stat-box-detailed,
.rasi-palan-page .highlight-card {
    background-color: #FFFFFF;
    border-color: var(--vs-border);
}

.rasi-palan-page .badge-lord {
    background-color: var(--vs-bg-blue-grey) !important;
    color: var(--vs-navy-royal) !important;
    border-color: var(--vs-border) !important;
}

.rasi-palan-page .badge-sav {
    background-color: var(--vs-gold-surface) !important;
    color: var(--vs-text-navy-dark) !important;
    border-color: var(--vs-gold-dark) !important;
}

.rasi-palan-page .date-display {
    color: var(--vs-navy-deep);
}

.rasi-palan-page .btn-date-nav {
    border-color: var(--vs-border);
    color: var(--vs-navy-royal);
}

.rasi-palan-page .btn-date-nav:hover,
.rasi-palan-page .btn-date-nav:focus-visible {
    background: var(--vs-navy-royal);
    border-color: var(--vs-gold);
    color: #FFFFFF;
}

.rasi-palan-page .loader-box p {
    color: var(--vs-navy-royal);
}

.rasi-palan-page .rasi-lang-item:hover,
.rasi-palan-page .rasi-lang-item.active {
    background: var(--vs-gold-surface);
    color: var(--vs-navy-royal);
}

.rasi-palan-page .rasi-lang-item .text-primary {
    color: var(--vs-navy-royal) !important;
}

.rasi-palan-page .share-container .d-flex {
    column-gap: 10px;
    row-gap: 10px;
}

.rasi-palan-page .share-container .btn-share {
    margin: 0;
}

.rasi-palan-page .share-container .d-flex > .btn-success,
.rasi-palan-page .share-container .d-flex > .btn-outline-success {
    margin: 0 !important;
    border-radius: 50px;
    font-weight: 600;
}

.rasi-palan-page .share-container .d-flex > .btn-success {
    background: var(--vs-navy-royal);
    border: 1px solid var(--vs-navy-royal);
    color: #FFFFFF;
}

.rasi-palan-page .share-container .d-flex > .btn-outline-success {
    background: #FFFFFF;
    border: 1px solid var(--vs-navy-royal);
    color: var(--vs-navy-royal);
}

.rasi-palan-page .share-container .d-flex > .btn-success:hover,
.rasi-palan-page .share-container .d-flex > .btn-success:focus-visible,
.rasi-palan-page .share-container .d-flex > .btn-outline-success:hover,
.rasi-palan-page .share-container .d-flex > .btn-outline-success:focus-visible {
    background: var(--vs-navy-deep);
    border-color: var(--vs-gold);
    color: #FFFFFF;
}

.rasi-palan-page .share-container .d-flex > .btn-success:focus-visible,
.rasi-palan-page .share-container .d-flex > .btn-outline-success:focus-visible {
    box-shadow: 0 0 0 0.2rem rgba(200, 154, 61, 0.35);
}

@media (max-width: 767.98px) {

    /* ----------------------------------------------------------
       1. Full-width — ID selector beats .content-page class
          #palan-content-area (1,0,0) > .content-page (0,1,0)
          Negative margin breaks out of .content-page padding
       ---------------------------------------------------------- */
    #palan-content-area {
        margin-left: -10px !important;
        margin-right: -10px !important;
        padding-left: 8px !important;
        padding-right: 8px !important;
        min-height: auto !important;
    }

    /* Loader overlay — extend beyond parent padding (10px content-page + 15px container-fluid) */
    #palan-loader-overlay {
        left: -25px !important;
        right: -25px !important;
    }

    /* ----------------------------------------------------------
       2. Date navigation — prevent squeeze
       ---------------------------------------------------------- */
    .date-nav-container {
        gap: 10px !important;
        margin-bottom: 8px !important;
    }

    .date-display {
        font-size: 1.1rem !important;
        min-width: 0 !important;
        flex: 1 1 auto !important;
    }

    .btn-date-nav {
        width: 34px !important;
        height: 34px !important;
        flex-shrink: 0 !important;
    }

    /* ----------------------------------------------------------
       3. Highlight cards — stack vertically with visible card feel
       ---------------------------------------------------------- */
    .highlight-card {
        display: flex !important;
        width: 100% !important;
        margin-right: 0 !important;
        margin-bottom: 4px !important;
        padding: 7px 12px !important;
        border-radius: 10px !important;
        box-shadow: 0 2px 6px rgba(0, 0, 0, 0.06) !important;
        font-size: 0.85rem !important;
    }

    .highlight-card:last-child {
        margin-bottom: 0 !important;
    }

    /* ----------------------------------------------------------
       4. Global vibe quote — tighten
       ---------------------------------------------------------- */
    .vibe-header {
        padding: 10px !important;
        margin-bottom: 10px !important;
        font-size: 0.88rem !important;
    }

    /* ----------------------------------------------------------
       5. Share section — social trio on one row
       ---------------------------------------------------------- */
    .share-container {
        margin: 12px 0 !important;
        width: 100% !important;
    }

    .share-label {
        font-size: 0.72rem !important;
        margin-bottom: 6px !important;
    }

    /* Row 1: Facebook + Twitter + WhatsApp — exactly 3 per row */
    .btn-share {
        flex: 1 1 calc(33.333% - 8px) !important;
        min-width: 0 !important;
        justify-content: center !important;
        padding: 8px 4px !important;
        margin: 3px !important;
        font-size: 0.75rem !important;
        text-align: center !important;
    }

    /* Row 2: Poster buttons — exactly 2 per row */
    .share-container .d-flex .btn-success,
    .share-container .d-flex .btn-outline-success {
        flex: 1 1 calc(50% - 8px) !important;
        margin: 3px !important;
        margin-left: 3px !important;
        font-size: 0.75rem !important;
        padding: 6px 4px !important;
        white-space: nowrap !important;
        text-align: center !important;
    }

    /* ----------------------------------------------------------
       7. Zodiac card grid — tighter vertical rhythm
       ---------------------------------------------------------- */
    #palan-content-area .zodiac-card {
        border-radius: 12px !important;
        margin-bottom: 4px !important;
    }

    #palan-content-area .col-md-6.mb-4 {
        margin-bottom: 6px !important;
    }

    .zodiac-card .h5 {
        font-size: 0.92rem !important;
    }

    .zodiac-card .progress {
        height: 6px !important;
        margin-bottom: 4px !important;
    }

    .zodiac-card .metric-label {
        font-size: 0.68rem !important;
    }

    /* ----------------------------------------------------------
       8. Detailed section — compact layout
       ---------------------------------------------------------- */
    #palan-content-area .rasi-detail-block {
        padding-top: 10px !important;
        padding-bottom: 10px !important;
    }

    #palan-content-area .detailed-section {
        margin-top: 12px !important;
    }

    .rasi-detail-block .lead {
        font-size: 0.92rem !important;
        line-height: 1.7 !important;
    }

    /* Beat .p-4 { padding: 1.5rem !important } from app.min.css */
    #palan-content-area .stat-box-detailed {
        padding: 8px 10px !important;
        margin-top: 4px !important;
    }

    .stat-box-detailed .progress {
        height: 6px !important;
        margin-bottom: 8px !important;
    }

    .stat-box-detailed .metric-label {
        font-size: 0.7rem !important;
        margin-bottom: 2px !important;
    }

    .stat-box-detailed .h6 {
        font-size: 0.7rem !important;
        margin-bottom: 8px !important;
    }

    /* ----------------------------------------------------------
       9. CTA banner — mobile-friendly
       ---------------------------------------------------------- */
    .cta-banner {
        padding: 14px 12px !important;
        margin: 16px 0 !important;
        border-radius: 12px !important;
        text-align: center !important;
    }

    .cta-banner .h3 {
        font-size: 1rem !important;
        line-height: 1.3 !important;
        margin-bottom: 6px !important;
    }

    .cta-banner p {
        font-size: 0.82rem !important;
        line-height: 1.4 !important;
        margin-bottom: 10px !important;
    }

    .cta-banner .btn {
        display: block !important;
        width: 100% !important;
        padding: 10px 14px !important;
        font-size: 0.85rem !important;
        white-space: normal !important;
        word-wrap: break-word !important;
    }

    /* ----------------------------------------------------------
       10. Badge & label tweaks
       ---------------------------------------------------------- */
    .badge-custom {
        font-size: 0.75rem !important;
        padding: 4px 8px !important;
        margin-bottom: 3px !important;
        display: inline-block !important;
    }

    .rasi-detail-block .mb-3 .badge-custom {
        display: block !important;
        margin-bottom: 3px !important;
        margin-left: 0 !important;
    }

    .rasi-detail-block h2.h3 {
        font-size: 1rem !important;
        margin-bottom: 10px !important;
    }
}