/* Customer portal styles — small brand-free overlay on top of Bulma.
   Brand styling belongs in recipe skins (skins/<theme>/…), never here. */

/* Shared storefront hero (skins override with their own hero + styles). */
.hero-pricing {
    background: linear-gradient(135deg, #7957d5 0%, #4a2fb5 100%);
}

/* Softer, more product-like surfaces than stock Bulma. */
.box,
.card {
    border-radius: 12px;
    box-shadow: 0 1px 2px rgba(10, 10, 10, 0.06), 0 0 0 1px rgba(10, 10, 10, 0.06);
}

.button {
    border-radius: 8px;
    transition: background-color 0.15s ease, box-shadow 0.15s ease;
}

.pricing-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.pricing-card:hover {
    box-shadow: 0 0.5em 1.5em -0.2em rgba(10, 10, 10, 0.2);
    transform: translateY(-2px);
}
.pricing-card .card-content { flex-grow: 1; }
.pricing-card.is-popular {
    box-shadow: 0 0 0 2px #7957d5, 0 0.5em 1.5em -0.6em rgba(10, 10, 10, 0.25);
}
.pricing-card .card-footer { border-top: none; padding: 0 1.25rem 1.25rem; }
.pricing-card .card-footer-item { padding: 0; }

.pricing-price { font-size: 2.5rem; font-weight: 700; line-height: 1; }
.pricing-price .interval,
.interval { font-size: 1rem; font-weight: 400; color: #7a7a7a; }

.feature-list { list-style: none; margin-left: 0; }
.feature-list li { padding: 0.35rem 0; }
.feature-list li .icon { color: #48c774; margin-right: 0.4rem; }

/* Instance state badges reuse Bulma tag colors; this just fixes width. */
.state-badge { min-width: 8rem; justify-content: center; }

/* Credentials reveal box */
.creds-box code { user-select: all; }

/* htmx: fade newly-swapped progress content in gently */
.htmx-swapping { opacity: 0; transition: opacity 0.2s ease-out; }

/* --- Static-site deploy UI (tokens / releases / builds / github / env) --- */

/* Show-once secrets (deploy token, webhook secret): selectable + wrappable. */
.secret-once { display: flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; }
.secret-once code { user-select: all; overflow-wrap: anywhere; }

/* The CI one-liner hint and build logs: scroll inside their own box. */
pre.deploy-hint {
    padding: 0.75rem;
    font-size: 0.75rem;
    border-radius: 8px;
    overflow-x: auto;
}
pre.build-log {
    max-height: 20rem;
    overflow: auto;
    padding: 0.75rem;
    font-size: 0.72rem;
    border-radius: 8px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}
.build-log-row td { border-top: none; }

/* Release action buttons stay on one line per row on desktop, wrap on mobile. */
.release-actions { flex-wrap: nowrap; margin-bottom: 0 !important; }
.release-actions .button { margin-bottom: 0 !important; }
@media screen and (max-width: 768px) {
    .release-actions { flex-wrap: wrap; }
}

/* Neutral chrome: Bulma's default teal reads as another brand's color under
   any operator skin. Core stays brand-free by shipping neutral ink instead —
   skins add their own accent via their hero/style blocks. */
.navbar.is-primary { background-color: #111827; }
.navbar.is-primary .navbar-item,
.navbar.is-primary .navbar-link { color: #f9fafb; }
.navbar.is-primary .navbar-item:hover,
.navbar.is-primary .navbar-link:hover { background-color: #1f2937; color: #ffffff; }
.button.is-primary { background-color: #111827; border-color: transparent; }
.button.is-primary:hover, .button.is-primary.is-hovered { background-color: #1f2937; }
.button.is-primary:focus, .button.is-primary.is-focused { background-color: #1f2937; }
.button.is-primary[disabled] { background-color: #111827; }
.button.is-primary.is-loading::after { border-color: transparent transparent #fff #fff; }
.tag:not(body).is-primary { background-color: #111827; color: #f9fafb; }
.progress.is-primary::-webkit-progress-value { background-color: #111827; }
.progress.is-primary::-moz-progress-bar { background-color: #111827; }