/* One white card for Elements + House Cusps; table is inner lines only.
   Desktop: side by side. Mobile: stacked, keeps phone cell sizes.
   REVERT: delete this file and its <link> in templates/composite.html. */

.chart-container #result .natal-elements-modality-table {
    border: none !important;
    background: transparent !important;
    border-collapse: collapse;
}

.chart-container #result .natal-elements-modality-table thead tr,
.chart-container #result .natal-elements-modality-table th,
.chart-container #result .natal-elements-modality-table td {
    background: transparent !important;
    background-color: transparent !important;
    border: none !important;
}

.chart-container #result .natal-elements-modality-table th:not(:last-child),
.chart-container #result .natal-elements-modality-table td:not(:last-child) {
    border-right: 1px solid #ddd !important;
}

.chart-container #result .natal-elements-modality-table thead th,
.chart-container #result .natal-elements-modality-table thead td,
.chart-container #result .natal-elements-modality-table tbody tr:not(:last-child) td {
    border-bottom: 1px solid #ddd !important;
}

.chart-container #result .natal-elements-modality-table tbody tr:last-child td {
    border-bottom: none !important;
    background-color: transparent !important;
    background-image: linear-gradient(#ddd, #ddd) !important;
    background-size: 100% 1px !important;
    background-position: left bottom 10px !important;
    background-repeat: no-repeat !important;
}

.chart-container #result .natal-elements-modality-table thead th,
.chart-container #result .natal-elements-modality-table tbody td:first-child {
    font-weight: 400 !important;
}

@media (min-width: 769px) {
    .chart-container #result .natal-elements-cusps-row {
        background: #fff;
        border: none;
        box-shadow: none;
        outline: none;
        padding: 20px 22px;
        box-sizing: border-box;
    }

    .chart-container #result .natal-elements-cusps-row .natal-elements-section,
    .chart-container #result .natal-elements-cusps-row .natal-house-cusps-plain {
        background: transparent;
        border: none;
        box-shadow: none;
        outline: none;
        padding: 0;
    }

    .chart-container #result .natal-elements-modality-table tbody tr:last-child td {
        padding-top: 11px !important;
        padding-bottom: 21px !important;
    }
}

@media (max-width: 768px) {
    .chart-container #result .natal-elements-cusps-row {
        display: block;
        background: #fff;
        border: none;
        box-shadow: none;
        outline: none;
        padding: 16px 14px;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
    }

    .chart-container #result .natal-elements-cusps-row .natal-elements-section,
    .chart-container #result .natal-elements-cusps-row .natal-house-cusps-plain {
        background: transparent;
        border: none;
        box-shadow: none;
        outline: none;
        padding: 0;
        width: 100%;
        max-width: 100%;
    }

    /* Match Elements & Modalities label; keep gap so stubs do not meet the title. */
    .chart-container #result .natal-elements-cusps-row .natal-house-cusps-plain > .syn-section-title,
    .chart-container #result .natal-elements-cusps-row .natal-house-cusps-plain > h3.syn-section-title {
        margin-top: 32px;
        margin-bottom: 30px;
        font-size: 14px;
        font-weight: 700;
        font-family: 'Montserrat', sans-serif;
        color: #2d2d2d;
        line-height: 1.3;
    }

    .chart-container #result .natal-elements-modality-table tbody tr:last-child td {
        padding-top: 5px !important;
        padding-bottom: 15px !important;
    }
}