/* ═══════════════════════════════════════════════════════════════════════════
   Fitness & Health Calculators — Frontend Styles
   Design system inspired by clean card UI with green-accent aesthetic
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── CSS Variables ───────────────────────────────────────────────────────── */

:root {
    --fhc-primary:        #16a34a;
    --fhc-primary-dark:   #15803d;
    --fhc-primary-light:  rgba(22,163,74,.12);
    --fhc-primary-glow:   rgba(22,163,74,.7);
    --fhc-button:         #16a34a;
    --fhc-radius:         12px;
    --fhc-radius-lg:      20px;
    --fhc-radius-sm:      8px;
    --fhc-font-size:      15px;
    --fhc-text:           #0f172a;
    --fhc-text-muted:     #64748b;
    --fhc-border:         #e2e8f0;
    --fhc-bg:             #f8fafc;
    --fhc-soft:           #f0fdf4;
    --fhc-white:          #ffffff;
    --fhc-success:        #10b981;
    --fhc-warning:        #f59e0b;
    --fhc-danger:         #ef4444;
    --fhc-info:           #3b82f6;
    --fhc-shadow:         0 4px 24px -8px rgba(22,163,74,.15), 0 2px 8px rgba(0,0,0,.04);
    --fhc-shadow-hover:   0 12px 40px -10px rgba(22,163,74,.25), 0 4px 16px rgba(0,0,0,.06);
    --fhc-shadow-sm:      0 1px 4px rgba(0,0,0,.08);
}

/* ── Reset ───────────────────────────────────────────────────────────────── */

.fhc-page *,
.fhc-shortcode-wrapper * {
    box-sizing: border-box;
}

/* ── Base Page ───────────────────────────────────────────────────────────── */

.fhc-page {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    font-size:   var(--fhc-font-size);
    color:       var(--fhc-text);
    line-height: 1.6;
}

.fhc-container {
    max-width: 1100px;
    margin:    0 auto;
    padding:   40px 20px;
}

.fhc-calculator-container {
    max-width: 780px;
}

/* ── Page Header ─────────────────────────────────────────────────────────── */

.fhc-page-header {
    text-align:    center;
    margin-bottom: 52px;
}

.fhc-page-header h1 {
    font-size:      2.2rem;
    font-weight:    800;
    margin:         0 0 12px;
    color:          var(--fhc-text);
    letter-spacing: -.02em;
}

.fhc-subtitle {
    color:     var(--fhc-text-muted);
    font-size: 1.05rem;
    margin:    0;
}

/* ── Group Section ───────────────────────────────────────────────────────── */

.fhc-group {
    margin-bottom: 44px;
}

.fhc-group-title {
    font-size:      1.15rem;
    font-weight:    700;
    margin:         0 0 18px;
    padding-bottom: 12px;
    border-bottom:  2px solid var(--fhc-primary);
    color:          var(--fhc-text);
    letter-spacing: -.01em;
}

/* ── Calculator Grid (Index) ─────────────────────────────────────────────── */

.fhc-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
    gap:                   16px;
}

.fhc-card {
    display:         flex;
    flex-direction:  column;
    gap:             8px;
    padding:         20px;
    background:      var(--fhc-white);
    border:          1px solid var(--fhc-border);
    border-radius:   var(--fhc-radius);
    text-decoration: none;
    color:           var(--fhc-text);
    transition:      box-shadow .2s ease, transform .2s ease, border-color .2s ease;
    box-shadow:      var(--fhc-shadow-sm);
}

.fhc-card:hover {
    box-shadow:      var(--fhc-shadow);
    transform:       translateY(-3px);
    border-color:    var(--fhc-primary);
    text-decoration: none;
    color:           var(--fhc-text);
}

.fhc-card-icon {
    font-size: 1.9rem;
}

.fhc-card-title {
    font-size:   .95rem;
    font-weight: 700;
    margin:      0;
    color:       var(--fhc-text);
}

.fhc-card-desc {
    font-size: .82rem;
    color:     var(--fhc-text-muted);
    margin:    0;
    flex:      1;
}

.fhc-card-rating {
    display:     flex;
    align-items: center;
    gap:         4px;
    font-size:   .8rem;
    color:       var(--fhc-text-muted);
    margin-top:  4px;
}

/* ── Breadcrumb ──────────────────────────────────────────────────────────── */

.fhc-breadcrumb {
    font-size:     .85rem;
    color:         var(--fhc-text-muted);
    margin-bottom: 22px;
}

.fhc-breadcrumb a {
    color:           var(--fhc-primary);
    text-decoration: none;
    font-weight:     500;
}

.fhc-breadcrumb a:hover {
    text-decoration: underline;
}

.fhc-breadcrumb-sep {
    margin: 0 6px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CALCULATOR WRAPPER — main card container
   ═══════════════════════════════════════════════════════════════════════════ */

.fhc-calculator-wrapper {
    background:    var(--fhc-white);
    border:        1px solid var(--fhc-border);
    border-radius: var(--fhc-radius-lg);
    box-shadow:    var(--fhc-shadow);
    overflow:      hidden;
    margin-bottom: 32px;
}

/* ── Calculator Header ───────────────────────────────────────────────────── */

.fhc-calc-header {
    display:      flex;
    align-items:  center;
    gap:          18px;
    padding:      26px 30px;
    background:   var(--fhc-white);
    border-bottom: 1px solid var(--fhc-border);
}

/* Icon box — gradient pill matching uploaded design */
.fhc-calc-icon {
    width:          52px;
    height:         52px;
    border-radius:  14px;
    background:     linear-gradient(135deg, var(--fhc-primary), #22c55e);
    color:          #fff;
    display:        flex;
    align-items:    center;
    justify-content: center;
    font-size:      1.6rem;
    flex-shrink:    0;
    box-shadow:     0 8px 20px -8px var(--fhc-primary-glow);
}

.fhc-calc-title-wrap h1,
.fhc-calc-title-wrap h2 {
    margin:         0 0 4px;
    font-size:      1.4rem;
    font-weight:    800;
    color:          var(--fhc-text);
    letter-spacing: -.02em;
}

.fhc-calc-title-wrap p {
    margin:    0;
    font-size: .82rem;
    color:     var(--fhc-text-muted);
}

.fhc-header-rating {
    display:     flex;
    align-items: center;
    gap:         6px;
    font-size:   .83rem;
    color:       var(--fhc-text-muted);
    margin-top:  4px;
}

.fhc-rating-count { opacity: .75; }

/* ── Calculator Body ─────────────────────────────────────────────────────── */

.fhc-calc-body {
    padding: 28px 30px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   UNIT TOGGLE — pill tabs matching uploaded design
   ═══════════════════════════════════════════════════════════════════════════ */

.fhc-unit-toggle {
    display:       flex;
    background:    #f1f5f9;
    padding:       4px;
    border-radius: var(--fhc-radius);
    margin-bottom: 22px;
    gap:           0;
}

.fhc-unit-btn {
    flex:          1;
    padding:       10px 14px;
    border:        none;
    background:    transparent;
    cursor:        pointer;
    font-size:     .85rem;
    font-weight:   600;
    color:         var(--fhc-text-muted);
    border-radius: 9px;
    transition:    background .2s, color .2s, box-shadow .2s;
    line-height:   1;
}

.fhc-unit-btn.active,
.fhc-unit-btn:hover {
    background: var(--fhc-white);
    color:      var(--fhc-text);
    box-shadow: var(--fhc-shadow-sm);
}

.fhc-unit-btn.active {
    color: var(--fhc-primary-dark);
}

/* ═══════════════════════════════════════════════════════════════════════════
   FORM FIELDS
   ═══════════════════════════════════════════════════════════════════════════ */

.fhc-form-grid {
    display:               grid;
    grid-template-columns: 1fr 1fr;
    gap:                   16px;
    margin-bottom:         22px;
}

@media (max-width: 520px) {
    .fhc-form-grid { grid-template-columns: 1fr; }
}

.fhc-field {
    display:        flex;
    flex-direction: column;
    gap:            6px;
}

.fhc-field.fhc-full { grid-column: 1 / -1; }

.fhc-label {
    font-size:   .82rem;
    font-weight: 700;
    color:       var(--fhc-text);
    letter-spacing: .01em;
}

/* Inputs & Selects */

.fhc-input,
.fhc-select {
    width:         100%;
    padding:       11px 46px 11px 14px;
    border:        1.5px solid var(--fhc-border);
    border-radius: var(--fhc-radius-sm);
    font-size:     var(--fhc-font-size);
    color:         var(--fhc-text);
    background:    var(--fhc-white);
    transition:    border-color .15s, box-shadow .15s;
    outline:       none;
    appearance:    none;
    -webkit-appearance: none;
}

.fhc-select {
    padding-right: 36px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%2364748b' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right 12px center;
    cursor: pointer;
}

.fhc-input:focus,
.fhc-select:focus {
    border-color: var(--fhc-primary);
    box-shadow:   0 0 0 3px rgba(22,163,74,.15);
}

/* Input group — suffix badge matching uploaded design */

.fhc-input-group {
    display:  flex;
    position: relative;
    align-items: center;
}

.fhc-input-group .fhc-input {
    padding-right: 52px;
    border-radius: var(--fhc-radius-sm);
    flex:          1;
}

.fhc-input-suffix {
    position:    absolute;
    right:       10px;
    font-size:   .75rem;
    font-weight: 700;
    color:       var(--fhc-text-muted);
    background:  #f1f5f9;
    padding:     3px 8px;
    border-radius: 6px;
    pointer-events: none;
    white-space: nowrap;
}

/* Textarea */

.fhc-input[type="date"],
textarea.fhc-input {
    padding-right: 14px;
}

/* ── Radio Group ─────────────────────────────────────────────────────────── */

.fhc-radio-group {
    display:   flex;
    gap:       10px;
    flex-wrap: wrap;
}

.fhc-radio-label {
    display:       flex;
    align-items:   center;
    gap:           6px;
    cursor:        pointer;
    font-size:     .88rem;
    font-weight:   600;
    padding:       9px 16px;
    border:        1.5px solid var(--fhc-border);
    border-radius: var(--fhc-radius-sm);
    transition:    border-color .15s, background .15s, color .15s;
    user-select:   none;
    background:    var(--fhc-white);
    color:         var(--fhc-text-muted);
}

.fhc-radio-label:has(input:checked),
.fhc-radio-label.selected {
    border-color: var(--fhc-primary);
    background:   var(--fhc-soft);
    color:        var(--fhc-primary-dark);
}

.fhc-radio-label input { display: none; }

.fhc-radio-label:hover {
    border-color: var(--fhc-primary);
    background:   var(--fhc-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════════════ */

.fhc-btn {
    display:         inline-flex;
    align-items:     center;
    justify-content: center;
    gap:             8px;
    padding:         13px 22px;
    border:          1.5px solid transparent;
    border-radius:   var(--fhc-radius-sm);
    font-size:       .95rem;
    font-weight:     700;
    cursor:          pointer;
    transition:      transform .15s, box-shadow .15s, background .15s, border-color .15s;
    text-decoration: none;
    line-height:     1;
}

.fhc-btn:active { transform: translateY(1px); }

.fhc-btn-primary {
    background:  linear-gradient(135deg, var(--fhc-primary), #22c55e);
    color:       #fff;
    box-shadow:  0 8px 20px -10px var(--fhc-primary-glow);
    width:       100%;
    margin-top:  6px;
    border:      none;
}

.fhc-btn-primary:hover {
    box-shadow: 0 12px 28px -10px var(--fhc-primary-glow);
    transform:  translateY(-1px);
}

.fhc-btn-outline {
    background:   transparent;
    color:        var(--fhc-primary);
    border-color: var(--fhc-primary);
    padding:      9px 18px;
    font-size:    .88rem;
}

.fhc-btn-outline:hover {
    background: var(--fhc-soft);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESULT BOX — animation + gradient matching uploaded design
   ═══════════════════════════════════════════════════════════════════════════ */

.fhc-result {
    margin-top:    24px;
    padding:       22px;
    border-radius: var(--fhc-radius);
    background:    linear-gradient(135deg, var(--fhc-soft), #ecfeff);
    border:        1px solid #d1fae5;
    display:       none;
    animation:     fhcFadeUp .3s ease;
}

.fhc-result.visible { display: block; }

@keyframes fhcFadeUp {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: none; }
}

.fhc-result-primary {
    font-size:      2.2rem;
    font-weight:    800;
    color:          var(--fhc-primary-dark);
    line-height:    1.1;
    letter-spacing: -.02em;
}

.fhc-result-label {
    font-size:   .82rem;
    font-weight: 600;
    color:       var(--fhc-text-muted);
    margin-top:  4px;
}

/* Result grid — secondary stats */

.fhc-result-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    gap:                   12px;
    margin-top:            18px;
}

.fhc-result-item {
    padding:        14px;
    background:     rgba(255,255,255,.8);
    border:         1px solid rgba(209,250,229,.8);
    border-radius:  var(--fhc-radius-sm);
    text-align:     center;
    backdrop-filter: blur(4px);
}

.fhc-result-item-value {
    font-size:      1.3rem;
    font-weight:    800;
    color:          var(--fhc-primary-dark);
    letter-spacing: -.01em;
    line-height:    1.2;
}

.fhc-result-item-label {
    font-size:  .74rem;
    font-weight: 600;
    color:       var(--fhc-text-muted);
    margin-top:  3px;
    line-height: 1.3;
}

/* ── Status Badges ───────────────────────────────────────────────────────── */

.fhc-status-badge {
    display:       inline-flex;
    align-items:   center;
    gap:           6px;
    padding:       7px 16px;
    border-radius: 999px;
    font-size:     .82rem;
    font-weight:   700;
    margin-top:    12px;
}

.fhc-status-normal      { background: rgba(16,185,129,.12); color: #047857; }
.fhc-status-warning     { background: rgba(245,158,11,.12); color: #b45309; }
.fhc-status-danger      { background: rgba(239,68,68,.12);  color: #b91c1c; }
.fhc-status-underweight { background: rgba(59,130,246,.12); color: #1d4ed8; }

/* ── Result Actions ──────────────────────────────────────────────────────── */

.fhc-result-actions {
    display:    flex;
    gap:        12px;
    padding:    16px 30px;
    border-top: 1px solid var(--fhc-border);
    flex-wrap:  wrap;
    background: var(--fhc-bg);
}

/* ── Rating Widget ───────────────────────────────────────────────────────── */

.fhc-rating-widget {
    padding:    20px 30px;
    border-top: 1px solid var(--fhc-border);
    text-align: center;
    background: var(--fhc-bg);
}

.fhc-rating-widget p {
    font-size:   .88rem;
    color:       var(--fhc-text-muted);
    margin:      0 0 10px;
    font-weight: 500;
}

.fhc-star-input {
    display:     inline-flex;
    gap:         4px;
    cursor:      pointer;
    font-size:   2rem;
}

.fhc-star-input .fhc-star {
    color:      #e2e8f0;
    transition: color .15s, transform .15s;
    line-height: 1;
}

.fhc-star-input .fhc-star:hover,
.fhc-star-input .fhc-star.hovered,
.fhc-star-input .fhc-star.selected {
    color:     #f59e0b;
    transform: scale(1.2);
}

.fhc-rating-thanks {
    margin-top:  10px;
    color:       var(--fhc-success);
    font-weight: 700;
    font-size:   .9rem;
}

/* ── Display Stars (read-only) ───────────────────────────────────────────── */

.fhc-stars       { display: inline-flex; gap: 1px; }
.fhc-star-full,
.fhc-star-half   { color: #f59e0b; }
.fhc-star-empty  { color: #e2e8f0; }

/* ── Related Calculators ─────────────────────────────────────────────────── */

.fhc-related {
    margin-top: 32px;
}

.fhc-related h2 {
    font-size:      1.1rem;
    font-weight:    700;
    margin:         0 0 16px;
    letter-spacing: -.01em;
}

.fhc-related-grid {
    display:               grid;
    grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
    gap:                   12px;
}

.fhc-related-card {
    display:         flex;
    align-items:     center;
    gap:             10px;
    padding:         14px 16px;
    background:      var(--fhc-white);
    border:          1px solid var(--fhc-border);
    border-radius:   var(--fhc-radius-sm);
    text-decoration: none;
    color:           var(--fhc-text);
    font-size:       .88rem;
    font-weight:     500;
    transition:      border-color .15s, background .15s, color .15s;
}

.fhc-related-card:hover {
    border-color:    var(--fhc-primary);
    background:      var(--fhc-soft);
    color:           var(--fhc-primary-dark);
    text-decoration: none;
}

/* ── Shortcode Wrapper ───────────────────────────────────────────────────── */

.fhc-shortcode-wrapper {
    max-width: 700px;
    margin:    0 auto;
}

.fhc-shortcode-wrapper .fhc-calc-header {
    border-radius: var(--fhc-radius-lg) var(--fhc-radius-lg) 0 0;
}

.fhc-shortcode-wrapper .fhc-calculator-wrapper {
    margin: 0;
}

/* ── Misc Utilities ──────────────────────────────────────────────────────── */

.fhc-notice {
    padding:       18px;
    background:    var(--fhc-bg);
    border-radius: var(--fhc-radius-sm);
    color:         var(--fhc-text-muted);
    text-align:    center;
    border:        1px solid var(--fhc-border);
}

.fhc-error {
    color:      var(--fhc-danger);
    font-style: italic;
    font-size:  .88rem;
}

.fhc-tooltip {
    position: relative;
    cursor:   help;
    color:    var(--fhc-text-muted);
    font-size: .8rem;
}

/* ── Disclaimer ──────────────────────────────────────────────────────────── */

.fhc-disclaimer {
    margin-top:  18px;
    font-size:   .78rem;
    color:       var(--fhc-text-muted);
    line-height: 1.6;
    text-align:  center;
    padding:     14px 18px;
    background:  var(--fhc-bg);
    border-radius: var(--fhc-radius-sm);
    border:      1px solid var(--fhc-border);
}

/* ── Result Disclaimer (injected by JS into every result box) ────────────── */

.fhc-result-disclaimer {
    display:       flex;
    align-items:   flex-start;
    gap:           12px;
    margin-top:    20px;
    padding:       14px 16px;
    background:    #fefce8;
    border:        1px solid #fde68a;
    border-left:   4px solid #f59e0b;
    border-radius: var(--fhc-radius-sm, 8px);
    font-size:     .8rem;
    line-height:   1.65;
    color:         #78350f;
}

.fhc-result-disclaimer-icon {
    font-size:   1.4rem;
    flex-shrink: 0;
    line-height: 1.3;
    margin-top:  1px;
}

.fhc-result-disclaimer-body {
    flex: 1;
    min-width: 0;
}

.fhc-result-disclaimer-body strong {
    color: #92400e;
}

.fhc-result-disclaimer-body em {
    font-style: italic;
}

@media (max-width: 480px) {
    .fhc-result-disclaimer {
        flex-direction: column;
        gap: 8px;
    }
    .fhc-result-disclaimer-icon { font-size: 1.1rem; }
}

/* ── Print: show disclaimer prominently ──────────────────────────────────── */

@media print {
    .fhc-result-disclaimer {
        background:  #fff !important;
        border:      2px solid #999 !important;
        color:       #333 !important;
        font-size:   .75rem !important;
        page-break-inside: avoid;
    }
    .fhc-result-disclaimer-body strong { color: #000 !important; }
}

/* ── Print ───────────────────────────────────────────────────────────────── */

@media print {
    .fhc-result-actions,
    .fhc-rating-widget,
    .fhc-related,
    .fhc-breadcrumb,
    .fhc-unit-toggle { display: none !important; }

    .fhc-calculator-wrapper {
        box-shadow: none;
        border:     1px solid #ccc;
    }
}

/* ── Responsive ──────────────────────────────────────────────────────────── */

@media (max-width: 640px) {
    .fhc-calc-header    { padding: 20px 22px; }
    .fhc-calc-body      { padding: 22px; }
    .fhc-result-actions { padding: 14px 22px; }
    .fhc-rating-widget  { padding: 16px 22px; }
    .fhc-page-header h1 { font-size: 1.7rem; }
    .fhc-grid           { grid-template-columns: 1fr 1fr; }
    .fhc-result-primary { font-size: 1.8rem; }
    .fhc-calc-icon      { width: 44px; height: 44px; font-size: 1.3rem; }
    .fhc-calc-title-wrap h1,
    .fhc-calc-title-wrap h2 { font-size: 1.2rem; }
}

@media (max-width: 420px) {
    .fhc-grid           { grid-template-columns: 1fr; }
    .fhc-result-grid    { grid-template-columns: 1fr 1fr; }
    .fhc-calc-body      { padding: 18px; }
    .fhc-calc-header    { padding: 18px; gap: 14px; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   PAGE H1 — standalone heading above the calculator card
   ═══════════════════════════════════════════════════════════════════════════ */

.fhc-page-h1 {
    font-size:      2rem;
    font-weight:    800;
    color:          var(--fhc-text, #0f172a);
    letter-spacing: -.02em;
    margin:         0 0 20px;
    line-height:    1.2;
}

@media (max-width: 640px) {
    .fhc-page-h1 { font-size: 1.55rem; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   CONTENT BEFORE / AFTER — editorial rich text areas
   ═══════════════════════════════════════════════════════════════════════════ */

.fhc-content {
    max-width:   720px;
    line-height: 1.75;
    color:       var(--fhc-text, #0f172a);
    font-size:   .97rem;
}

.fhc-content-before { margin-bottom: 28px; }
.fhc-content-after  { margin-top:    32px; }

.fhc-content h2 { font-size: 1.3rem; font-weight: 700; margin: 1.4em 0 .5em; }
.fhc-content h3 { font-size: 1.1rem; font-weight: 700; margin: 1.2em 0 .4em; }
.fhc-content p  { margin: 0 0 1em; }
.fhc-content ul,
.fhc-content ol { margin: 0 0 1em 1.4em; }
.fhc-content li { margin-bottom: .35em; }

.fhc-content a {
    color:           var(--fhc-primary, #16a34a);
    text-decoration: underline;
}

.fhc-content blockquote {
    border-left:   4px solid var(--fhc-primary, #16a34a);
    margin:        1em 0;
    padding:       .6em 1.2em;
    background:    var(--fhc-soft, #f0fdf4);
    border-radius: 0 8px 8px 0;
    font-style:    italic;
    color:         var(--fhc-text-muted, #64748b);
}

.fhc-content table {
    width:           100%;
    border-collapse: collapse;
    margin-bottom:   1em;
    font-size:       .9rem;
}
.fhc-content table th,
.fhc-content table td {
    border:  1px solid var(--fhc-border, #e2e8f0);
    padding: 8px 12px;
    text-align: left;
}
.fhc-content table th {
    background:  var(--fhc-soft, #f0fdf4);
    font-weight: 700;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FAQs — accordion with smooth animation
   ═══════════════════════════════════════════════════════════════════════════ */

.fhc-faqs {
    margin-top: 40px;
}

.fhc-faqs-title {
    font-size:      1.3rem;
    font-weight:    800;
    margin:         0 0 20px;
    color:          var(--fhc-text, #0f172a);
    letter-spacing: -.01em;
}

.fhc-faq-list {
    display:        flex;
    flex-direction: column;
    gap:            10px;
    max-width:      720px;
}

.fhc-faq-item {
    background:    var(--fhc-white, #fff);
    border:        1px solid var(--fhc-border, #e2e8f0);
    border-radius: var(--fhc-radius-sm, 8px);
    overflow:      hidden;
    transition:    border-color .2s, box-shadow .2s;
}

.fhc-faq-item:has(.fhc-faq-question[aria-expanded="true"]),
.fhc-faq-item.fhc-faq-open {
    border-color: var(--fhc-primary, #16a34a);
    box-shadow:   0 2px 12px rgba(22,163,74,.1);
}

.fhc-faq-question {
    display:         flex;
    justify-content: space-between;
    align-items:     center;
    width:           100%;
    padding:         16px 20px;
    background:      transparent;
    border:          none;
    text-align:      left;
    font-size:       .97rem;
    font-weight:     600;
    color:           var(--fhc-text, #0f172a);
    cursor:          pointer;
    gap:             12px;
    transition:      background .15s, color .15s;
}

.fhc-faq-question:hover {
    background: var(--fhc-soft, #f0fdf4);
    color:      var(--fhc-primary, #16a34a);
}

.fhc-faq-question[aria-expanded="true"] {
    color:           var(--fhc-primary, #16a34a);
    border-bottom:   1px solid var(--fhc-border, #e2e8f0);
    background:      var(--fhc-soft, #f0fdf4);
}

.fhc-faq-icon {
    font-size:   1.4rem;
    font-weight: 300;
    color:       var(--fhc-primary, #16a34a);
    flex-shrink: 0;
    transition:  transform .25s ease;
    line-height: 1;
}

.fhc-faq-question[aria-expanded="true"] .fhc-faq-icon {
    transform: rotate(45deg);
}

.fhc-faq-answer {
    padding:     0 20px;
    max-height:  0;
    overflow:    hidden;
    font-size:   .92rem;
    line-height: 1.7;
    color:       var(--fhc-text-muted, #475569);
    transition:  max-height .3s ease, padding .3s ease;
}

.fhc-faq-answer:not([hidden]) {
    padding:    14px 20px 18px;
    max-height: 600px;
}

.fhc-faq-answer p:last-child { margin-bottom: 0; }