/*
 * components.css — Reusable UI components.
 * Depends on: base.css, layout.css
 */

/* ── Buttons ────────────────────────────────────────────────────────────── */

.btn {
    display:          inline-flex;
    align-items:      center;
    justify-content:  center;
    gap:              var(--space-2);
    font-family:      var(--font-sans);
    font-size:        var(--text-sm);
    font-weight:      var(--font-semibold);
    line-height:      1;
    padding:          0.625rem var(--space-5);
    border-radius:    var(--radius-md);
    border:           1px solid transparent;
    cursor:           pointer;
    text-decoration:  none;
    white-space:      nowrap;
    transition:       background var(--transition-fast),
                      border-color var(--transition-fast),
                      color var(--transition-fast),
                      box-shadow var(--transition-fast);
}

.btn:focus-visible {
    outline:        2px solid var(--color-brand);
    outline-offset: 3px;
}

.btn--primary {
    background:  var(--color-brand);
    color:       #fff;
    border-color:var(--color-brand);
}

.btn--primary:hover {
    background:   var(--color-brand-hover);
    border-color: var(--color-brand-hover);
    box-shadow:   var(--shadow-brand);
    color:        #fff;
}

.btn--outline {
    background:  transparent;
    color:       var(--color-text-primary);
    border-color:var(--color-border-strong);
}

.btn--outline:hover {
    background:   var(--color-bg-elevated);
    border-color: var(--color-border-brand);
    color:        var(--color-text-primary);
}

.btn--ghost {
    background:  transparent;
    color:       var(--color-text-secondary);
    border-color:transparent;
}

.btn--ghost:hover {
    background: var(--color-bg-elevated);
    color:      var(--color-text-primary);
}

.btn--danger {
    background:  var(--color-danger);
    color:       #fff;
    border-color:var(--color-danger);
}

.btn--sm {
    font-size: var(--text-xs);
    padding:   0.4375rem var(--space-4);
}

.btn--lg {
    font-size: var(--text-base);
    padding:   0.875rem var(--space-8);
}

.btn--full {
    width: 100%;
}

.btn:disabled,
.btn[aria-disabled="true"] {
    opacity: 0.5;
    cursor:  not-allowed;
    pointer-events: none;
}

/* ── Cards ──────────────────────────────────────────────────────────────── */

.card {
    background:    var(--color-bg-card);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    transition:    border-color var(--transition-base), box-shadow var(--transition-base);
}

.card:hover {
    border-color: var(--color-border-mid);
    box-shadow:   var(--shadow-md);
}

.card--elevated {
    background: var(--color-bg-elevated);
}

.card--brand {
    border-color: var(--color-border-brand);
    background:   var(--color-bg-elevated);
}

.card--highlight {
    border-color: var(--color-brand);
    box-shadow:   var(--shadow-brand);
}

/* ── Feature card ───────────────────────────────────────────────────────── */

.feature-card {
    background:    var(--color-bg-card);
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    padding:       var(--space-6);
    display:       flex;
    flex-direction:column;
    gap:           var(--space-3);
    transition:    border-color var(--transition-base),
                   box-shadow   var(--transition-base),
                   transform    var(--transition-base);
}

.feature-card:hover {
    border-color: var(--color-border-brand);
    box-shadow:   0 4px 24px rgba(31, 143, 255, 0.10);
    transform:    translateY(-2px);
}

.feature-card__icon {
    width:            40px;
    height:           40px;
    display:          flex;
    align-items:      center;
    justify-content:  center;
    background:       var(--color-brand-dim);
    border-radius:    var(--radius-md);
    color:            var(--color-brand);
    font-size:        var(--text-lg);
    flex-shrink:      0;
}

.feature-card__heading {
    font-size:   var(--text-lg);
    font-weight: var(--font-semibold);
    color:       var(--color-text-primary);
    line-height: var(--leading-snug);
}

.feature-card__body {
    font-size:   var(--text-sm);
    color:       var(--color-text-secondary);
    line-height: var(--leading-relaxed);
    flex:        1;
}

.feature-card__link {
    display:         inline-flex;
    align-items:     center;
    gap:             var(--space-1);
    font-size:       var(--text-sm);
    font-weight:     var(--font-medium);
    color:           var(--color-brand);
    text-decoration: none;
    margin-top:      auto;
}

.feature-card__link:hover {
    color: var(--color-brand-hover);
    gap:   var(--space-2);
}

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

.badge {
    display:       inline-flex;
    align-items:   center;
    gap:           var(--space-1);
    font-size:     var(--text-xs);
    font-weight:   var(--font-semibold);
    padding:       0.25rem 0.625rem;
    border-radius: var(--radius-full);
    border:        1px solid currentColor;
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
}

.badge--brand   { color: var(--color-brand);   background: var(--color-brand-dim);   border-color: var(--color-border-brand); }
.badge--success { color: var(--color-success);  background: var(--color-success-dim); border-color: rgba(34, 197, 94, 0.25); }
.badge--warning { color: var(--color-warning);  background: var(--color-warning-dim); border-color: rgba(245, 158, 11, 0.25); }
.badge--danger  { color: var(--color-danger);   background: var(--color-danger-dim);  border-color: rgba(239, 68, 68, 0.25); }
.badge--muted   { color: var(--color-text-muted);background: var(--color-bg-elevated);border-color: var(--color-border); }

/* ── Form elements ──────────────────────────────────────────────────────── */

.form-group {
    display:       flex;
    flex-direction:column;
    gap:           var(--space-2);
}

.label {
    font-size:   var(--text-sm);
    font-weight: var(--font-medium);
    color:       var(--color-text-primary);
}

.label--required::after {
    content: ' *';
    color:   var(--color-danger);
}

.input {
    width:         100%;
    font-family:   var(--font-sans);
    font-size:     var(--text-sm);
    color:         var(--color-text-primary);
    background:    var(--color-bg-elevated);
    border:        1px solid var(--color-border-mid);
    border-radius: var(--radius-md);
    padding:       0.625rem var(--space-4);
    transition:    border-color var(--transition-fast),
                   box-shadow   var(--transition-fast);
    -webkit-appearance: none;
}

.input::placeholder { color: var(--color-text-muted); }

.input:focus {
    outline:      none;
    border-color: var(--color-brand);
    box-shadow:   0 0 0 3px rgba(31, 143, 255, 0.15);
}

.input:invalid:not(:placeholder-shown) {
    border-color: var(--color-danger);
}

.input--error  { border-color: var(--color-danger); }
.input--success{ border-color: var(--color-success); }

textarea.input {
    resize:     vertical;
    min-height: 120px;
    line-height:var(--leading-relaxed);
}

select.input {
    background-image:    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2364748b' d='M2 4l4 4 4-4z'/%3E%3C/svg%3E");
    background-repeat:   no-repeat;
    background-position: right var(--space-4) center;
    padding-right:       var(--space-10);
    cursor:              pointer;
}

.form-hint {
    font-size: var(--text-xs);
    color:     var(--color-text-muted);
}

.form-error {
    font-size: var(--text-xs);
    color:     var(--color-danger);
    display:   flex;
    gap:       var(--space-1);
    align-items: flex-start;
}

/* ── CTA block (from components/cta.php) ───────────────────────────────── */

.cta-block {
    padding-block:  var(--section-gap);
    text-align:     center;
}

.cta-block--dark {
    background: var(--color-bg-surface);
    border-top: 1px solid var(--color-border);
}

.cta-block--tinted {
    background: linear-gradient(135deg,
        rgba(31, 143, 255, 0.08) 0%,
        rgba(45, 212, 191, 0.05) 100%);
    border-top: 1px solid var(--color-border-brand);
}

.cta-block__inner {
    max-width: 640px;
    margin-inline: auto;
}

.cta-block__heading {
    font-size:    var(--text-4xl);
    font-weight:  var(--font-extrabold);
    margin-bottom:var(--space-4);
    color:        var(--color-text-primary);
}

.cta-block__sub {
    font-size:    var(--text-lg);
    color:        var(--color-text-secondary);
    margin-bottom:var(--space-8);
    line-height:  var(--leading-relaxed);
}

.cta-block__actions {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             var(--space-4);
    flex-wrap:       wrap;
}

.cta-block__note {
    font-size:  var(--text-sm);
    color:      var(--color-text-muted);
    margin-top: var(--space-4);
}

/* ── Trust badge strip ──────────────────────────────────────────────────── */

.trust-strip {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex-wrap:       wrap;
    gap:             var(--space-6);
    padding-block:   var(--space-4);
}

.trust-strip__item {
    display:     flex;
    align-items: center;
    gap:         var(--space-2);
    font-size:   var(--text-sm);
    font-weight: var(--font-medium);
    color:       var(--color-text-secondary);
}

.trust-strip__item i {
    color: var(--color-brand);
}

/* ── Stat block ─────────────────────────────────────────────────────────── */

.stat-block {
    text-align: center;
    padding:    var(--space-6);
}

.stat-block__value {
    font-size:    var(--text-5xl);
    font-weight:  var(--font-extrabold);
    color:        var(--color-text-primary);
    line-height:  1;
    margin-bottom:var(--space-2);
}

.stat-block__label {
    font-size:   var(--text-sm);
    color:       var(--color-text-secondary);
    font-weight: var(--font-medium);
}

/* ── Step / How it works ────────────────────────────────────────────────── */

.step-list {
    display:       flex;
    flex-direction:column;
    gap:           var(--space-8);
    counter-reset: step;
}

.step-item {
    display:     flex;
    gap:         var(--space-6);
    align-items: flex-start;
}

.step-item__number {
    flex-shrink:    0;
    width:          40px;
    height:         40px;
    border-radius:  var(--radius-full);
    background:     var(--color-brand-dim);
    border:         1px solid var(--color-border-brand);
    display:        flex;
    align-items:    center;
    justify-content:center;
    font-weight:    var(--font-bold);
    font-size:      var(--text-sm);
    color:          var(--color-brand);
    counter-increment: step;
}

.step-item__body h3 {
    font-size:    var(--text-xl);
    margin-bottom:var(--space-2);
}

/* ── Accordion / Details ────────────────────────────────────────────────── */

.accordion-item {
    border:        1px solid var(--color-border);
    border-radius: var(--radius-lg);
    overflow:      hidden;
}

.accordion-item + .accordion-item {
    margin-top: var(--space-3);
}

.accordion-item summary {
    list-style:    none;
    padding:       var(--space-5) var(--space-6);
    cursor:        pointer;
    font-weight:   var(--font-semibold);
    color:         var(--color-text-primary);
    display:       flex;
    align-items:   center;
    justify-content:space-between;
    transition:    background var(--transition-fast);
}

.accordion-item summary::-webkit-details-marker { display: none; }

.accordion-item summary::after {
    content:    '›';
    font-size:  1.25em;
    color:      var(--color-text-muted);
    transform:  rotate(90deg);
    transition: transform var(--transition-base);
    flex-shrink:0;
}

.accordion-item[open] summary::after {
    transform: rotate(-90deg);
}

.accordion-item summary:hover {
    background: var(--color-bg-elevated);
}

.accordion-item__body {
    padding:    0 var(--space-6) var(--space-5);
    color:      var(--color-text-secondary);
    line-height:var(--leading-relaxed);
    font-size:  var(--text-sm);
}

/* ── Table ──────────────────────────────────────────────────────────────── */

.table-wrap {
    overflow-x: auto;
    border:     1px solid var(--color-border);
    border-radius: var(--radius-lg);
}

.table {
    width:           100%;
    border-collapse: collapse;
    font-size:       var(--text-sm);
}

.table th {
    padding:      var(--space-3) var(--space-5);
    text-align:   left;
    font-weight:  var(--font-semibold);
    font-size:    var(--text-xs);
    letter-spacing:var(--tracking-wide);
    text-transform:uppercase;
    color:        var(--color-text-muted);
    background:   var(--color-bg-elevated);
    border-bottom:1px solid var(--color-border);
    white-space:  nowrap;
}

.table td {
    padding:      var(--space-4) var(--space-5);
    color:        var(--color-text-secondary);
    border-bottom:1px solid var(--color-border);
}

.table tbody tr:last-child td {
    border-bottom: none;
}

.table tbody tr:hover td {
    background: var(--color-bg-elevated);
}

/* ── Inline code tag ────────────────────────────────────────────────────── */

.tag {
    display:       inline-block;
    font-family:   var(--font-mono);
    font-size:     var(--text-xs);
    padding:       0.1em 0.5em;
    border-radius: var(--radius-sm);
    background:    var(--color-bg-elevated);
    border:        1px solid var(--color-border);
    color:         var(--color-text-secondary);
}

/* ── Alert / notice boxes ───────────────────────────────────────────────── */

.alert {
    display:       flex;
    gap:           var(--space-3);
    padding:       var(--space-4) var(--space-5);
    border-radius: var(--radius-md);
    border:        1px solid;
    font-size:     var(--text-sm);
    line-height:   var(--leading-relaxed);
}

.alert--info    { background: var(--color-brand-dim);   border-color: var(--color-border-brand); color: var(--color-text-primary); }
.alert--success { background: var(--color-success-dim); border-color: rgba(34, 197, 94, 0.25);   color: var(--color-text-primary); }
.alert--warning { background: var(--color-warning-dim); border-color: rgba(245, 158, 11, 0.25);  color: var(--color-text-primary); }
.alert--danger  { background: var(--color-danger-dim);  border-color: rgba(239, 68, 68, 0.25);   color: var(--color-text-primary); }

/* ── Cookie consent banner ──────────────────────────────────────────────── */

.cookie-banner {
    position:       fixed;
    bottom:         var(--space-4);
    left:           50%;
    transform:      translateX(-50%);
    width:          min(600px, calc(100vw - var(--space-8)));
    background:     var(--color-bg-elevated);
    border:         1px solid var(--color-border-mid);
    border-radius:  var(--radius-xl);
    padding:        var(--space-4) var(--space-6);
    display:        flex;
    align-items:    center;
    gap:            var(--space-4);
    flex-wrap:      wrap;
    z-index:        var(--z-toast);
    box-shadow:     var(--shadow-xl);
}

.cookie-banner[hidden] { display: none; }

.cookie-banner__text {
    flex:      1;
    min-width: 200px;
    font-size: var(--text-sm);
    color:     var(--color-text-secondary);
    margin:    0;
}

.cookie-banner__actions {
    display: flex;
    gap:     var(--space-3);
    flex-shrink: 0;
}

/* ── Loading skeleton ───────────────────────────────────────────────────── */

@keyframes skeleton-pulse {
    0%, 100% { opacity: 1;   }
    50%       { opacity: 0.4; }
}

.skeleton {
    background:    var(--color-bg-elevated);
    border-radius: var(--radius-md);
    animation:     skeleton-pulse 1.5s ease-in-out infinite;
}