/* ==========================================================


   PANCHANG RESULT


   Page Specific Styles


   Ek Rashtra - Ek Panchang


   ========================================================== */


/* ==========================================================


   PANCHANG SECTION


   ========================================================== */

background: linear-gradient(

    135deg,

    #F6C453,

    #E8B84A

);


.panchang-section {


    margin-bottom: 30px;


    /*


       Global .section में यदि बहुत अधिक top spacing है,


       तो Panchang result को थोड़ा compact रखें.


    */


    padding-top: 35px;


}


/* ==========================================================


   PANCHANG PAGE HEADER


   ========================================================== */


.panchang-header {


    text-align: center;


    margin: 0 auto 28px;


    max-width: 900px;


}


.panchang-header h1 {


    color: var(--primary);


    margin: 0 0 8px;


    font-size: 38px;


    line-height: 1.2;


}


.panchang-subtitle {


    text-align: center;


    color: #666;


    font-size: 17px;


    margin: 0;


    line-height: 1.6;


}


/* ==========================================================


   COMMON PANCHANG CARD


   ========================================================== */


.panchang-card {


    background: var(--card);


    border: 1px solid var(--border);


    border-radius: 14px;


    padding: 24px;


    margin-bottom: 20px;


    box-shadow:


        0 3px 12px rgba(0, 0, 0, 0.07);


}


/* ==========================================================


   CARD HEADINGS


   ========================================================== */


.panchang-card h2 {


    color: var(--primary);


    margin: 0 0 18px;


    font-size: 22px;


    line-height: 1.3;


}


.panchang-card h3 {


    color: var(--primary);


    margin: 0 0 18px;


    font-size: 20px;


    line-height: 1.3;


}


/* ==========================================================


   INPUT SUMMARY


   ========================================================== */


.panchang-summary {


    display: grid;


    grid-template-columns:


        repeat(auto-fit, minmax(190px, 1fr));


    gap: 14px;


}


.panchang-summary-item {


    background:


        linear-gradient(


            135deg,


            #FFF9F2,


            #FFF4E9


        );


    border: 1px solid var(--border);


    border-radius: 10px;


    padding: 14px 16px;


    min-height: 70px;


    display: flex;


    flex-direction: column;


    justify-content: center;


    box-sizing: border-box;


}


.panchang-summary-label {


    display: block;


    color: #777;


    font-size: 12px;


    font-weight: 500;


    margin-bottom: 5px;


}


.panchang-summary-value {


    display: block;


    color: var(--primary);


    font-size: 17px;


    font-weight: 700;


    line-height: 1.3;


    word-break: break-word;


}


/* ==========================================================


   AHARGANA


   ========================================================== */


.ahargana-box {


    text-align: center;


    padding: 24px 20px;


    background:


        linear-gradient(


            135deg,


            #FFF9F1,


            #FFF1E2


        );


    border: 1px solid var(--gold);


    border-radius: 14px;


}


.ahargana-label {


    color: #666;


    font-size: 15px;


    font-weight: 600;


    margin-bottom: 8px;


}


.ahargana-value {


    color: var(--primary);


    font-size: 32px;


    font-weight: 700;


    line-height: 1.2;


    letter-spacing: 0.5px;


}


/* ==========================================================


   LOCATION DETAILS


   ========================================================== */


.location-details {


    display: grid;


    grid-template-columns:


        repeat(2, minmax(0, 1fr));


    gap: 14px;


}


.location-detail {


    padding: 15px 17px;


    background:


        linear-gradient(


            135deg,


            #FFF9F2,


            #FFF5EC


        );


    border: 1px solid var(--border);


    border-radius: 10px;


}


.location-detail-label {


    display: block;


    color: #777;


    font-size: 12px;


    font-weight: 500;


    margin-bottom: 5px;


}


.location-detail-value {


    color: var(--primary);


    font-weight: 700;


    font-size: 17px;


}


/* ==========================================================


   CHANGE LOCATION


   ========================================================== */


.panchang-location-actions {


    text-align: center;


    margin: 20px 0 0;


}


.change-location-button {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    gap: 6px;


    padding: 10px 24px;


    background: var(--primary);


    color: white;


    text-decoration: none;


    border-radius: 8px;


    font-size: 15px;


    font-weight: 600;


    border: 1px solid var(--primary);


    transition:


        background 0.25s ease,


        color 0.25s ease,


        transform 0.2s ease;


}


.change-location-button:hover {


    background: var(--secondary);


    color: #000;


    transform: translateY(-1px);


}


/* ==========================================================


   TODAY HIGHLIGHT


   ========================================================== */


.today-panchang {


    display: flex;


    justify-content: center;


    align-items: center;


    margin: 4px 0 20px;


    padding: 0;


}


.today-badge {


    display: inline-flex;


    align-items: center;


    justify-content: center;


    padding: 7px 18px;


    background:


        linear-gradient(


            135deg,


            var(--gold),


            #E4C35A


        );


    color: #3b2b00;


    border: 1px solid #C49D22;


    border-radius: 30px;


    font-size: 13px;


    font-weight: 700;


    box-shadow:


        0 2px 7px rgba(0, 0, 0, 0.08);


}


/* ==========================================================


   DAILY PANCHANG CARD


   ========================================================== */


.daily-panchang-card {
    background: linear-gradient(
        135deg,
        #F6C453,
        #E8B84A
    );

    border: 1px solid #D4A94A;
    border-radius: 14px;
    padding: 24px;
    box-shadow:
        0 3px 12px rgba(0, 0, 0, 0.08);
}


/* ==========================================================


   DAILY PANCHANG TITLE


   ========================================================== */


.daily-panchang-title {


    display: flex;


    align-items: center;


    gap: 10px;


    color: var(--primary);


    margin: 0 0 18px;


    font-size: 22px;


}


/* ==========================================================

   PANCHANG TABLE

   ========================================================== */


.panchang-table-wrapper {

    width: 100%;

    overflow-x: auto;

    overflow-y: hidden;

    -webkit-overflow-scrolling: touch;

    border: 1px solid var(--border);

    border-radius: 10px;

    background: var(--card);

}


.panchang-table {

    width: auto;

    min-width: 1200px;

    border-collapse: collapse;

    border-spacing: 0;

    table-layout: fixed;

    background: var(--card);

    border: 1px solid #000;

}


.panchang-table th,

.panchang-table td {

    border: 1px solid #000;

    padding: 10px 12px;

    text-align: center;

    vertical-align: middle;

    font-size: 13px;

    box-sizing: border-box;

}


/* Sunrise / Sunset table: 4 equal columns */

.panchang-table-wrapper > .panchang-table:first-of-type th,

.panchang-table-wrapper > .panchang-table:first-of-type td {

    width: 25%;

}


/* Main Panchang table: label 25%, value 75% */

.panchang-table-wrapper > .panchang-table:nth-of-type(2) th {

    width: 25%;

}


.panchang-table-wrapper > .panchang-table:nth-of-type(2) td {

    width: 75%;

}


/* Table header */

.panchang-table th {

    background: var(--primary);

    color: #fff;

    font-weight: 600;

    white-space: nowrap;

}


/* Table data */

.panchang-table td {

    color: var(--text);

    white-space: nowrap;

}


/* Alternate rows */

.panchang-table tbody tr:nth-child(even),

.panchang-table > tr:nth-child(even) {

    background: #FFF8F0;

}


/* Hover */

.panchang-table tbody tr:hover,

.panchang-table > tr:hover {

    background: #FFEBD8;

}


/* ==========================================================


   PANCHANG VALUE CELLS


   ========================================================== */


.panchang-main-value {


    font-weight: 700;


    color: var(--primary);


}


.panchang-time {


    font-weight: 600;


    color: #444;


}


.panchang-special {


    font-weight: 600;


    color: var(--primary);


}


/* ==========================================================


   GRAHA STHITI


   ========================================================== */


.graha-card {


    margin-top: 20px;


}


.graha-title {


    display: flex;


    align-items: center;


    gap: 8px;


    color: var(--primary);


    margin: 0 0 18px;


}


.planet-name {


    color: var(--primary);


    font-weight: 700;


    font-size: 20px;


}


/* ==========================================================


   LAGNA SECTION


   ========================================================== */


.lagna-card {


    margin-top: 20px;


}


.lagna-title {


    color: var(--primary);


    margin: 0 0 18px;


    font-size: 20px;


}


/* ==========================================================


   EMPTY VALUE


   ========================================================== */


.panchang-empty {


    color: #999;


}


/* ==========================================================


   SECTION SPACING


   ========================================================== */


.panchang-section {


    margin-bottom: 30px;


}


/* ==========================================================


   DESKTOP IMPROVEMENT


   ========================================================== */


@media (min-width: 1000px) {


    .panchang-section {


        max-width: 1400px;


        margin-left: auto;


        margin-right: auto;


    }


    .panchang-summary {


        grid-template-columns:


            repeat(3, minmax(0, 1fr));


    }


}


/* ==========================================================


   TABLET


   ========================================================== */


@media (max-width: 900px) {


    .panchang-section {


        padding-top: 25px;


    }


    .panchang-header {


        margin-bottom: 24px;


    }


    .panchang-header h1 {


        font-size: 32px;


    }


    .panchang-subtitle {


        font-size: 16px;


    }


    .panchang-card {


        padding: 18px;


        border-radius: 12px;


    }


    .panchang-summary {


        grid-template-columns:


            repeat(2, minmax(0, 1fr));


    }


    .panchang-table {


        min-width: 1100px;


    }


    .panchang-table th,


    .panchang-table td {


        padding: 8px 10px;


        font-size: 12px;


    }


}


/* ==========================================================


   MOBILE


   ========================================================== */


@media (max-width: 600px) {


    .panchang-section {


        padding-top: 18px;


    }


    .panchang-header {


        margin-bottom: 20px;


    }


    .panchang-header h1 {


        font-size: 28px;


        line-height: 1.25;


    }


    .panchang-subtitle {


        font-size: 14px;


        line-height: 1.5;


    }


    .panchang-card {


        padding: 15px;


        margin-bottom: 15px;


        border-radius: 10px;


    }


    .panchang-card h2 {


        font-size: 20px;


        margin-bottom: 15px;


    }


    .panchang-card h3 {


        font-size: 18px;


    }


    .panchang-summary {


        grid-template-columns: 1fr;


        gap: 10px;


    }


    .panchang-summary-item {


        min-height: 62px;


        padding: 12px 14px;


    }


    .panchang-summary-value {


        font-size: 16px;


    }


    .ahargana-box {


        padding: 20px 15px;


    }


    .ahargana-value {


        font-size: 27px;


        word-break: break-all;


    }


    .location-details {


        grid-template-columns: 1fr;


        gap: 10px;


    }


    .location-detail {


        padding: 12px 14px;


    }


    .change-location-button {


        width: 100%;


        box-sizing: border-box;


    }


    .today-panchang {


        margin: 2px 0 15px;


    }


    .today-badge {


        padding: 6px 16px;


        font-size: 12px;


    }


    .panchang-table {


        min-width: 1050px;


    }


    .panchang-table th,


    .panchang-table td {


        padding: 8px;


        font-size: 11px;


    }


    .planet-name {


        font-size: 18px;


    }


}


/* ==========================================================


   VERY SMALL MOBILE


   ========================================================== */


@media (max-width: 400px) {


    .panchang-header h1 {


        font-size: 25px;


    }


    .panchang-subtitle {


        font-size: 13px;


    }


    .ahargana-value {


        font-size: 24px;


    }


}


/* ==========================================================


   DAILY PANCHANG HEADER


   ========================================================== */


.daily-panchang-header {
    background: transparent;
    border: none;
    box-shadow: none;
}


/* ==========================================================


   LEFT CONTENT


   ========================================================== */


.daily-panchang-left {


    display: flex;


    align-items: center;


    gap: 15px;


}


.moon-icon {


    width: 62px;


    height: 62px;


    display: flex;


    align-items: center;


    justify-content: center;


    flex-shrink: 0;


    border-radius: 50%;


    background: rgba(255,255,255,0.18);


    border: 1px solid rgba(255,255,255,0.45);


    font-size: 42px;


}


.daily-panchang-info {


    min-width: 0;


}


.daily-panchang-tithi {


    font-size: 24px;


    font-weight: 700;


    line-height: 1.25;


    color: var(--primary);


}


.daily-panchang-subtitle {


    font-size: 17px;


    font-weight: 600;


    line-height: 1.45;


    color: var(--primary);


}


.daily-panchang-location {


    margin-top: 2px;


    font-size: 15px;


    color: var(--primary);


}


/* ==========================================================


   RIGHT DATE


   ========================================================== */


.daily-panchang-date {
    min-width: 180px;
    text-align: right;
    padding-left: 20px;
    border-left: 1px solid rgba(255,255,255,0.35);

    display: flex;
    flex-direction: column;
    align-items: right;
    justify-content: right;
}

.ahargana-label {
    margin: 0 0 5px;
    color: var(--primary);
    font-size: 18px;
    font-weight: 600;
}

.daily-date-number {
    font-size: 28px;
    line-height: 1;
    font-weight: 700;
    color: var(--primary);
}

.daily-date-label {


    margin-top: 5px;


    font-size: 14px;


    font-weight: 600;


    color: var(--primary);


}


/* ==========================================================


   BOTTOM DETAILS


   ========================================================== */


.daily-panchang-details {


    grid-column: 1 / -1;


    display: flex;


    justify-content: center;


    align-items: center;


    flex-wrap: wrap;


    gap: 8px;


    padding-top: 7px;


    border-top: 1px solid rgba(255,255,255,0.25);


    font-size: 13px;


    color: var(--primary);


}


/* ==========================================================


   MOBILE


   ========================================================== */


@media (max-width: 700px) {


    .daily-panchang-header {


        grid-template-columns: 1fr;


        padding: 16px;


        gap: 12px;


    }


    .daily-panchang-left {


        justify-content: center;


    }


    .daily-panchang-date {


        border-left: none;


        border-top: 1px solid rgba(255,255,255,0.3);


        padding: 12px 0 0;


    }


    .daily-panchang-details {


        font-size: 12px;


    }


}


/* =========================================================


   TITHI MOON IMAGE


   ========================================================= */


.tithi-cell {


    display: flex;


    flex-direction: column;


    align-items: center;


    gap: 8px;


}


.moon-tithi-image {


    width: 70px;


    height: 70px;


    max-width: 70px;


    max-height: 70px;


    object-fit: cover;


    display: block;


    border-radius: 50%;


}