/*
 * Hosting cards: compact feature list + one details toggle per panel.
 * Scoped to #hosting-panel-cms and #hosting-panel-static; list rules only
 * apply after hosting-plan-details JS marks lists with .ah-plan-details-ready.
 * Toggle styling follows .plan-switcher / .plan-switch-btn in
 * custom-pages-styles.css.
 */

/* Our display rules below would otherwise beat the UA [hidden] rule. */
#hosting-panel-cms .ah-plan-details-bar[hidden],
#hosting-panel-cms .ah-plan-details-toggle[hidden],
#hosting-panel-static .ah-plan-details-bar[hidden],
#hosting-panel-static .ah-plan-details-toggle[hidden] {
    display: none;
}

#hosting-panel-cms .ah-plan-details-bar,
#hosting-panel-static .ah-plan-details-bar {
    display: flex;
    justify-content: center;
    margin: 0 0 20px;
}

#hosting-panel-cms .ah-plan-details-toggle,
#hosting-panel-static .ah-plan-details-toggle {
    font-family: 'Readex Pro Medium', sans-serif;
    font-size: 0.9rem;
    letter-spacing: 0.5px;
    line-height: 1.3;
    color: #153B77;
    background: #eaf1fb;
    border: 1px solid rgba(12, 159, 237, 0.45);
    border-radius: 0;
    min-height: 44px;
    padding: 8px 22px;
    max-width: 100%;
    white-space: normal;
    cursor: pointer;
}

#hosting-panel-cms .ah-plan-details-toggle:hover,
#hosting-panel-static .ah-plan-details-toggle:hover {
    color: #0C9FED;
    border-color: #0C9FED;
}

#hosting-panel-cms .ah-plan-details-toggle:focus-visible,
#hosting-panel-static .ah-plan-details-toggle:focus-visible {
    outline: 2px solid #0C9FED;
    outline-offset: 2px;
}

/* .plan-features li is display:flex, which overrides the UA [hidden] rule. */
#hosting-panel-cms .plan-features.ah-plan-details-ready > li[hidden],
#hosting-panel-static .plan-features.ah-plan-details-ready > li[hidden] {
    display: none;
}

/* Resource summary (CMS only) keeps the regular row layout and the existing ✓
   marker (.plan-features li:not(:has(i))::before), like the rows it replaces. */
#hosting-panel-cms .plan-features.ah-plan-details-ready > li.ah-plan-resources {
    overflow-wrap: anywhere;
}

/* --- Dark mode (palette vars from html.ark-dark) --- */
html.ark-dark #hosting-panel-cms .ah-plan-details-toggle,
html.ark-dark #hosting-panel-static .ah-plan-details-toggle {
    color: var(--ark-text-muted, #c7d6e8);
    background: var(--ark-inset, #0b1a2e);
    border-color: var(--ark-border, rgba(98, 209, 222, 0.35));
}

html.ark-dark #hosting-panel-cms .ah-plan-details-toggle:hover,
html.ark-dark #hosting-panel-static .ah-plan-details-toggle:hover {
    color: var(--ark-teal, #62D1DE);
    border-color: var(--ark-teal, #62D1DE);
}

html.ark-dark #hosting-panel-cms .ah-plan-details-toggle:focus-visible,
html.ark-dark #hosting-panel-static .ah-plan-details-toggle:focus-visible {
    outline-color: var(--ark-primary, #0C9FED);
}