/*!
 * Copyright (c) 2026 Daki.cc — Niclas Specht. All rights reserved.
 * Proprietary and confidential.
 */

/* Free bot hosting page: the plan card from pricing.css next to a "how it
   works" panel, then fit check, comparison table and FAQ in the same card
   language as the other product pages. */

/* ── Hero: paid link and live slot status ──────────────────────── */
.fh-hero-link { color: #e29bf0; font-weight: 600; text-decoration: none; }
.fh-hero-link:hover { color: #fff; text-decoration: underline; }

.fh-slots { display: flex; align-items: center; gap: 10px; width: fit-content; max-width: 100%; margin: 24px auto 0; padding: 8px 16px; border: 1px solid #3a3140; border-radius: 999px; background: rgba(24, 18, 28, 0.72); color: #d8cadd; font-size: 14px; line-height: 1.35; }
.fh-slots[hidden] { display: none; }
.fh-slots-dot { width: 8px; height: 8px; flex-shrink: 0; border-radius: 50%; background: #8a7f90; }
.fh-slots[data-state="loading"] .fh-slots-dot { animation: fh-pulse 1.2s ease-in-out infinite; }
.fh-slots[data-state="available"] { border-color: #2f6b43; color: #c9f2d5; }
.fh-slots[data-state="available"] .fh-slots-dot { background: #8ee6a8; box-shadow: 0 0 8px rgba(142, 230, 168, 0.7); }
.fh-slots[data-state="full"], .fh-slots[data-state="paused"] { border-color: #6b5a2f; color: #f5e2b0; }
.fh-slots[data-state="full"] .fh-slots-dot, .fh-slots[data-state="paused"] .fh-slots-dot { background: #f2c66d; box-shadow: 0 0 8px rgba(242, 198, 109, 0.6); }
@keyframes fh-pulse { 50% { opacity: .35; } }

/* ── No free slots notice ──────────────────────────────────────── */
.fh-full { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 18px; max-width: 1120px; margin: 14px auto 20px; padding: 22px 24px; border: 1px solid #6b5a2f; border-left: 3px solid #f2c66d; border-radius: 16px; background: radial-gradient(ellipse at 0% 0%, rgba(242, 198, 109, .08), transparent 70%), var(--sp-surface); }
.fh-full[hidden] { display: none; }
.fh-full > div:first-child { flex: 1 1 420px; }
.fh-full p { margin: 0 0 6px; color: var(--sp-text); font-size: 15px; line-height: 1.6; }
.fh-full p:last-child { margin-bottom: 0; }

/* ── Plan + how it works ───────────────────────────────────────── */
.fh-top { display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 20px; max-width: 1120px; margin: 14px auto 0; align-items: stretch; }
.fh-top .plan-icon .pl-ico { width: 20px; height: 20px; }

.fh-panel,
.fh-section {
    padding: 24px;
    border: 1px solid var(--sp-border);
    border-radius: 16px;
    background: radial-gradient(ellipse at 100% 0%, rgba(118, 9, 145, .08), transparent 70%), var(--sp-surface);
}
.fh-section { max-width: 1120px; margin: 20px auto 0; }
.fh-section + .row { max-width: 1120px; margin-left: auto; margin-right: auto; }

.fh-title { margin: 0 0 6px; color: #fff; font: 600 1.35rem/1.25 'Poppins', sans-serif; letter-spacing: -.02em; }
.fh-panel .fh-title { margin-bottom: 18px; }
.fh-lead { margin: 0 0 18px; color: var(--sp-muted); font-size: 15px; line-height: 1.6; }
.fh-panel a, .fh-section a { color: var(--sp-link); text-decoration: none; font-weight: 600; }
.fh-panel a:hover, .fh-section a:hover { text-decoration: underline; }
.fh-panel code { padding: 1px 5px; border-radius: 5px; background: #241e29; color: #f2edf5; font-size: .88em; }

.fh-steps { margin: 0; padding: 0; list-style: none; counter-reset: fh-step; }
.fh-steps li { position: relative; padding: 0 0 20px 48px; counter-increment: fh-step; }
.fh-steps li:last-child { padding-bottom: 0; }
.fh-steps li::before {
    content: counter(fh-step);
    position: absolute;
    top: -2px;
    left: 0;
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 1px solid rgba(192, 38, 211, 0.3);
    border-radius: 10px;
    background: rgba(192, 38, 211, 0.14);
    color: #e29bf0;
    font: 600 14px/1 'Poppins', sans-serif;
}
.fh-steps li:not(:last-child)::after { content: ''; position: absolute; top: 36px; bottom: 4px; left: 16px; width: 1px; background: #3a3140; }
.fh-steps b { display: block; margin-bottom: 3px; color: #fff; font-weight: 600; }
.fh-steps span { display: block; color: var(--sp-text); font-size: 15px; line-height: 1.6; }

/* ── Fit check ─────────────────────────────────────────────────── */
.fh-fit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.fh-fit-col { padding: 18px 20px; border: 1px solid #3a3140; border-radius: 12px; background: #1b171f; }
.fh-fit-col h3 { margin: 0 0 12px; color: #f2edf5; font: 600 1rem/1.3 'Poppins', sans-serif; }
.fh-fit-col ul { margin: 0; padding: 0; list-style: none; }
.fh-fit-col li { display: flex; gap: 10px; padding: 6px 0; color: var(--sp-text); font-size: 15px; line-height: 1.5; }
.fh-fit-col .pl-ico { margin-top: 2px; }
.fh-fit-col.is-yes .pl-ico { color: #8ee6a8; }
.fh-fit-col.is-no .pl-ico { color: #ff8fa3; }

.fh-notes { margin: 16px 0 0; padding: 0; list-style: none; }
.fh-notes li { display: flex; gap: 10px; padding: 6px 0; color: var(--sp-muted); font-size: 14px; line-height: 1.55; }
.fh-notes b { color: #e8deed; font-weight: 600; }
.fh-notes .pl-ico { width: 16px; height: 16px; margin-top: 2px; color: #d796ec; }

/* ── Comparison table ──────────────────────────────────────────── */
.fh-table-wrap { overflow-x: auto; border: 1px solid #3a3140; border-radius: 12px; }
.fh-table { width: 100%; border-collapse: collapse; font-size: 15px; }
.fh-table th, .fh-table td { padding: 11px 16px; border-bottom: 1px solid #2c2731; text-align: left; vertical-align: top; }
.fh-table tbody tr:last-child th, .fh-table tbody tr:last-child td { border-bottom: 0; }
.fh-table thead th { background: #1b171f; color: #fff; font: 600 14px/1.3 'Poppins', sans-serif; }
.fh-table tbody th { width: 22%; color: var(--sp-muted); font-weight: 500; white-space: nowrap; }
.fh-table td { color: var(--sp-text); }
.fh-table .is-paid { background: rgba(192, 38, 211, 0.07); color: #f2edf5; }
.fh-table thead .is-paid { background: rgba(192, 38, 211, 0.16); color: #fff; }
.fh-table tfoot th, .fh-table tfoot td { border-top: 1px solid #2c2731; border-bottom: 0; vertical-align: middle; }
.fh-table tfoot .plan-cta { display: inline-flex; padding: 9px 16px; font-size: 14px; }
.fh-table tfoot .plan-cta--primary { border-color: transparent; background: linear-gradient(135deg, #8c10ae 0%, #c026d3 100%); color: #fff !important; text-decoration: none !important; }
.fh-table .fh-table-link { color: var(--sp-muted); font-size: 14px; font-weight: 500; }

/* ── FAQ ───────────────────────────────────────────────────────── */
.fh-faq details { border-bottom: 1px solid #2c2731; }
.fh-faq details:first-child { border-top: 1px solid #2c2731; }
.fh-faq summary {
    position: relative;
    padding: 15px 36px 15px 0;
    color: #f2edf5;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.fh-faq summary::-webkit-details-marker { display: none; }
.fh-faq summary::after {
    content: '';
    position: absolute;
    top: 50%;
    right: 6px;
    width: 9px;
    height: 9px;
    border-right: 2px solid #d796ec;
    border-bottom: 2px solid #d796ec;
    transform: translateY(-70%) rotate(45deg);
    transition: transform .2s ease;
}
.fh-faq details[open] summary::after { transform: translateY(-30%) rotate(-135deg); }
.fh-faq summary:hover { color: #fff; }
.fh-faq summary:focus-visible { outline: 2px solid #c026d3; outline-offset: 2px; border-radius: 4px; }
.fh-faq p { margin: 0 0 16px; color: var(--sp-text); font-size: 15px; line-height: 1.65; }
.fh-more { margin: 16px 0 0; color: var(--sp-muted); font-size: 14px; }

.custom-plans-box .fh-box-title { margin: 0 0 4px; color: #fff; font: 600 1.2rem/1.3 'Poppins', sans-serif; letter-spacing: -.02em; }

@media (max-width: 991.98px) {
    .fh-top { grid-template-columns: minmax(0, 1fr); }
    .fh-top .plan { max-width: 520px; width: 100%; margin: 0 auto; }
}
@media (max-width: 767.98px) {
    .fh-fit { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 575.98px) {
    .fh-panel, .fh-section { padding: 20px 16px; }
    .fh-table th, .fh-table td { padding: 10px 12px; font-size: 14px; }
    .fh-table tbody th { white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
    .fh-faq summary::after { transition: none; }
    .fh-slots[data-state="loading"] .fh-slots-dot { animation: none; }
}