/* =========================================================
   TER PREMIUM CUSTOM PENALTIES
   ========================================================= */

.custom-penalties-panel {
    overflow: visible;
}

.penalty-section-note {
    margin: 16px 18px 0;
    padding: 12px 14px;

    border: 1px solid #343434;
    border-left: 3px solid var(--red);

    background: #0b0b0b;
    color: #888;

    font-size: 10px;
    line-height: 1.55;
}

.penalty-tab-list {
    display: flex;
    align-items: flex-end;
    gap: 3px;

    padding: 14px 18px 0;

    background: #0b0b0b;
}

.penalty-tab {
    position: relative;
    z-index: 1;

    min-width: 112px;
    padding: 11px 15px 10px;

    border: 1px solid #343434;
    border-bottom-color: #343434;

    background: #0d0d0d;
    color: #777;

    font-family:
        "Bahnschrift Condensed",
        "Arial Narrow",
        sans-serif;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: .7px;

    cursor: pointer;
}

.penalty-tab:hover {
    border-color: #666;
    color: #eee;
}

.penalty-tab.is-enabled:not(.is-active) {
    color: #ddd;
    border-top-color: #7b1117;
}

.penalty-tab.is-active {
    z-index: 3;
    margin-bottom: -1px;

    border-top-color: var(--red);
    border-right-color: var(--red);
    border-bottom-color: #101010;
    border-left-color: var(--red);

    background: #101010;
    color: #fff;
}

.penalty-tab.is-active:not(.is-enabled) {
    border-top-color: #686868;
    border-right-color: #686868;
    border-left-color: #686868;
    color: #aaa;
}

.penalty-tab:focus-visible {
    outline: 2px solid var(--red);
    outline-offset: 2px;
}

.penalty-tab-content {
    border-top: 1px solid #343434;
    background: #101010;
}

.penalty-tab-pane {
    display: none;
    padding: 0 18px 18px;
}

.penalty-tab-pane.is-active {
    display: block;
}

.penalty-pane-details {
    display: none;
}

.penalty-tab-pane.is-enabled .penalty-pane-details {
    display: block;
}

.penalty-common-footer {
    padding: 0 18px 18px;
    border-top: 1px solid #2d2d2d;
    background: #101010;
}

.penalty-common-note {
    margin: 12px 0 0;
    color: #666;
    font-size: 9px;
    line-height: 1.5;
}

.penalty-hidden-row {
    display: none !important;
}

.penalty-tab-pane .premium-option-row,
.penalty-tab-pane .premium-toggle-row,
.penalty-common-footer .premium-option-row {
    grid-template-columns: 215px minmax(0, 1fr);
}

.penalty-tab-pane .premium-option-label,
.penalty-common-footer .premium-option-label {
    font-size: 10px;
}

.penalty-tab-pane input[type="number"],
.penalty-tab-pane select,
.penalty-common-footer input[type="number"] {
    width: 100%;
    min-height: 42px;

    padding: 0 11px;

    border: 1px solid #383838;
    outline: none;

    background: #090909;
    color: #eee;
}

.penalty-tab-pane input[type="number"]:focus,
.penalty-tab-pane select:focus,
.penalty-common-footer input[type="number"]:focus {
    border-color: var(--red);
}

/* =========================================================
   RACE DETAILS — CUSTOM PENALTIES
   ========================================================= */

.penalty-details-groups {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
}

.penalty-details-group {
    min-width: 0;
    padding: 14px 16px;

    border-right: 1px solid #303030;
    border-bottom: 1px solid #303030;
}

.penalty-details-group:nth-child(2n) {
    border-right: 0;
}

.penalty-details-group:last-child:nth-child(odd) {
    grid-column: 1 / -1;
    border-right: 0;
}

.penalty-details-group h3 {
    margin: 0 0 12px;

    color: #ddd;

    font-size: 11px;
    letter-spacing: .8px;
}

.penalty-details-status {
    margin-left: 7px;
    color: #777;
    font-size: 9px;
}

.penalty-details-status.is-enabled {
    color: var(--red);
}

.penalty-details-grid {
    display: grid;
    grid-template-columns:
        repeat(2, minmax(0, 1fr));
    gap: 10px 18px;
}

.penalty-details-grid div {
    min-width: 0;
}

.penalty-details-grid small,
.penalty-details-common small {
    display: block;
    margin-bottom: 3px;
    color: #666;
    font-size: 8px;
    letter-spacing: .8px;
}

.penalty-details-grid strong,
.penalty-details-common strong {
    display: block;
    overflow-wrap: anywhere;
    color: #ddd;
    font-size: 10px;
}

.penalty-details-common {
    padding: 14px 16px;
}

@media (max-width: 820px) {
    .penalty-tab-list {
        overflow-x: auto;
        align-items: stretch;
    }

    .penalty-tab {
        flex: 0 0 auto;
        min-width: 104px;
    }

    .penalty-tab-pane .premium-option-row,
    .penalty-tab-pane .premium-toggle-row,
    .penalty-common-footer .premium-option-row {
        grid-template-columns: 1fr;
    }

    .penalty-details-groups,
    .penalty-details-grid {
        grid-template-columns: 1fr;
    }

    .penalty-details-group,
    .penalty-details-group:nth-child(2n),
    .penalty-details-group:last-child:nth-child(odd) {
        grid-column: auto;
        border-right: 0;
    }
}