/* 
 * BFH Components (components.css)
 * Reusable UI primitives based on the design system.
 */

/* -------------------- Globals -------------------- */
.bfh-widget-wrapper {
    font-family: var(--bfh-font-sans);
    color: var(--bfh-text-primary);
    line-height: 1.5;
}

.bfh-widget-wrapper.bfh-theme-dark {
    background-color: transparent; /* Elementor sections handle background usually, but text/cards inherit */
}

/* -------------------- Cards -------------------- */
.bfh-card {
    background-color: var(--bfh-surface);
    border: var(--bfh-border-width) solid var(--bfh-border);
    border-radius: var(--bfh-radius-lg);
    padding: var(--bfh-space-5);
    box-shadow: var(--bfh-shadow-1);
    transition: transform var(--bfh-anim-normal), box-shadow var(--bfh-anim-normal), border-color var(--bfh-anim-normal);
    overflow: hidden;
    position: relative;
    color: var(--bfh-text-primary);
}

.bfh-card-glass {
    background-color: var(--bfh-surface-glass);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: var(--bfh-border-width) solid var(--bfh-border);
}

.bfh-card:hover {
    box-shadow: var(--bfh-shadow-2);
    border-color: var(--bfh-color-primary-transparent);
    transform: translateY(-2px);
}

/* -------------------- Buttons -------------------- */
/* .bfh-button is the page-template vocabulary, .bfh-btn the widget one. They
   share a definition so a control looks identical wherever it is rendered. */
.bfh-btn,
.bfh-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bfh-space-2);
    padding: var(--bfh-space-3) var(--bfh-space-5);
    border-radius: var(--bfh-radius-md);
    font-weight: var(--bfh-font-weight-medium);
    font-size: var(--bfh-text-sm);
    cursor: pointer;
    transition: all var(--bfh-anim-fast);
    border: none;
    text-decoration: none;
}

.bfh-btn-primary,
.bfh-button,
.bfh-button--primary {
    background-color: var(--bfh-color-primary);
    color: #fff;
}

.bfh-btn-primary:hover,
.bfh-button:hover,
.bfh-button--primary:hover {
    background-color: var(--bfh-color-primary-hover);
    box-shadow: var(--bfh-shadow-glow);
    transform: translateY(-1px);
}

.bfh-btn-outline,
.bfh-button--ghost {
    background-color: transparent;
    border: var(--bfh-border-width) solid var(--bfh-border);
    color: var(--bfh-text-primary);
}

.bfh-btn-outline:hover,
.bfh-button--ghost:hover {
    border-color: var(--bfh-color-primary);
    color: var(--bfh-color-primary);
    background-color: var(--bfh-color-primary-transparent);
}

.bfh-btn:disabled,
.bfh-btn.bfh-disabled,
.bfh-button:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    pointer-events: none;
}

/* -------------------- Badges / Chips -------------------- */
.bfh-badge {
    display: inline-flex;
    align-items: center;
    padding: 4px var(--bfh-space-3);
    border-radius: var(--bfh-radius-pill);
    font-size: var(--bfh-text-xs);
    font-weight: var(--bfh-font-weight-medium);
    background-color: var(--bfh-border);
    color: var(--bfh-text-primary);
    transition: all var(--bfh-anim-fast);
}

.bfh-badge-trending, .bfh-badge-bestseller { 
    background-color: var(--bfh-color-primary); 
    color: #fff; 
}

/* Accord Chips */
.bfh-chip-accord {
    color: #fff;
    border: none;
}
/* Neutral first so an accord slug with no colour of its own still paints;
   the specific rules below override it. */
[class*="bfh-accord-"] { background-color: var(--bfh-border-hover); }
.bfh-accord-fresh { background-color: var(--bfh-accord-fresh); }
.bfh-accord-citrus { background-color: var(--bfh-accord-citrus); }
.bfh-accord-woody { background-color: var(--bfh-accord-woody); }
.bfh-accord-amber { background-color: var(--bfh-accord-amber); }
.bfh-accord-aromatic { background-color: var(--bfh-accord-aromatic); }
.bfh-accord-musky { background-color: var(--bfh-accord-musky); }
.bfh-accord-floral { background-color: var(--bfh-accord-floral); }
.bfh-accord-spicy { background-color: var(--bfh-accord-spicy); }
.bfh-accord-sweet { background-color: var(--bfh-accord-sweet); }

/* -------------------- Rating Stars -------------------- */
.bfh-stars {
    display: inline-flex;
    gap: 2px;
    color: var(--bfh-rating-empty);
    font-size: var(--bfh-text-sm);
}

.bfh-stars .bfh-star-filled {
    color: var(--bfh-rating-filled);
}

/* -------------------- Form Controls -------------------- */
.bfh-input {
    width: 100%;
    padding: var(--bfh-space-3) var(--bfh-space-4);
    background-color: var(--bfh-surface);
    border: var(--bfh-border-width) solid var(--bfh-border);
    border-radius: var(--bfh-radius-md);
    color: var(--bfh-text-primary);
    font-family: inherit;
    font-size: var(--bfh-text-sm);
    transition: all var(--bfh-anim-fast);
}

.bfh-input:focus {
    outline: none;
    border-color: var(--bfh-color-primary);
    box-shadow: 0 0 0 3px var(--bfh-color-primary-transparent);
}

/* Native select styled to match .bfh-input, with the OS arrow replaced so the
   control reads the same on every platform. */
.bfh-select {
    padding: var(--bfh-space-3) var(--bfh-space-8) var(--bfh-space-3) var(--bfh-space-4);
    background-color: var(--bfh-surface);
    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
        linear-gradient(135deg, currentColor 50%, transparent 50%);
    background-position: right var(--bfh-space-4) center, calc(100% - var(--bfh-space-4) + 5px) center;
    background-size: 5px 5px, 5px 5px;
    background-repeat: no-repeat;
    border: var(--bfh-border-width) solid var(--bfh-border);
    border-radius: var(--bfh-radius-md);
    color: var(--bfh-text-primary);
    font-family: inherit;
    font-size: var(--bfh-text-sm);
    cursor: pointer;
    appearance: none;
    transition: border-color var(--bfh-anim-fast);
}

.bfh-select:hover {
    border-color: var(--bfh-border-hover);
}

.bfh-select:focus-visible {
    outline: none;
    border-color: var(--bfh-color-primary);
    box-shadow: 0 0 0 3px var(--bfh-color-primary-transparent);
}

/* -------------------- Favorite toggle -------------------- */
/* Base for every heart button; the card overrides position and size in
   cards.css, which loads later. */
.bfh-favorite-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--bfh-space-2);
    padding: var(--bfh-space-2);
    background-color: transparent;
    border: var(--bfh-border-width) solid var(--bfh-border);
    border-radius: var(--bfh-radius-round);
    color: var(--bfh-text-secondary);
    font-family: inherit;
    font-size: var(--bfh-text-base);
    line-height: 1;
    cursor: pointer;
    transition: all var(--bfh-anim-fast);
}

.bfh-favorite-toggle:hover {
    border-color: var(--bfh-danger);
    color: var(--bfh-danger);
}

.bfh-favorite-toggle[aria-pressed="true"] {
    border-color: var(--bfh-danger);
    background-color: var(--bfh-danger);
    color: #fff;
}

/* Signals the request is in flight without collapsing the button's box. */
.bfh-favorite-toggle[aria-busy="true"] {
    opacity: 0.6;
    pointer-events: none;
}

/* -------------------- Layout -------------------- */
.bfh-container {
    width: 100%;
    max-width: 1320px;
    margin-inline: auto;
    padding-inline: var(--bfh-space-5);
}

/* Checkboxes */
.bfh-checkbox-label {
    display: flex;
    align-items: center;
    gap: var(--bfh-space-2);
    cursor: pointer;
    font-size: var(--bfh-text-sm);
    color: var(--bfh-text-secondary);
    transition: color var(--bfh-anim-fast);
}
.bfh-checkbox-label:hover {
    color: var(--bfh-text-primary);
}
.bfh-checkbox-label input[type="checkbox"] {
    accent-color: var(--bfh-color-primary);
    width: 16px;
    height: 16px;
}

/* -------------------- Progress Bar (Polls) -------------------- */
.bfh-progress {
    width: 100%;
    height: 8px;
    background-color: var(--bfh-border);
    border-radius: var(--bfh-radius-pill);
    overflow: hidden;
    position: relative;
    margin-top: var(--bfh-space-2);
}

.bfh-progress-bar {
    height: 100%;
    background-color: var(--bfh-border-hover);
    border-radius: var(--bfh-radius-pill);
    transition: width var(--bfh-anim-slow), background-color var(--bfh-anim-fast);
    width: 0%;
}
.bfh-progress-bar.is-winning {
    background-color: var(--bfh-color-primary);
}

/* -------------------- Circular Progress (Ring) -------------------- */
.bfh-circular-progress {
    position: relative;
    width: 120px;
    height: 120px;
}
.bfh-circular-progress svg {
    transform: rotate(-90deg);
    width: 100%;
    height: 100%;
}
.bfh-circular-progress-bg {
    fill: none;
    stroke: var(--bfh-border);
    stroke-width: 8;
}
.bfh-circular-progress-value {
    fill: none;
    stroke: var(--bfh-color-primary);
    stroke-width: 8;
    stroke-linecap: round;
    transition: stroke-dashoffset 1s ease-out;
}
.bfh-circular-progress-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

/* -------------------- Avatars & Lists -------------------- */
.bfh-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--bfh-radius-round);
    object-fit: cover;
    background-color: var(--bfh-border);
}

/* -------------------- Empty & Loading States -------------------- */
.bfh-empty-state {
    padding: var(--bfh-space-8) var(--bfh-space-4);
    text-align: center;
    color: var(--bfh-text-muted);
}

.bfh-empty-state__title {
    margin: 0 0 var(--bfh-space-2);
    font-family: var(--bfh-font-serif);
    font-size: var(--bfh-text-xl);
    color: var(--bfh-text-primary);
}

.bfh-empty-state__text {
    margin: 0;
    font-size: var(--bfh-text-sm);
}
.bfh-skeleton {
    background: linear-gradient(90deg, var(--bfh-border) 25%, var(--bfh-border-hover) 50%, var(--bfh-border) 75%);
    background-size: 200% 100%;
    animation: bfh-skeleton-loading 1.5s infinite;
    border-radius: var(--bfh-radius-sm);
}
@keyframes bfh-skeleton-loading {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* -------------------- Toasts -------------------- */
.bfh-toast-container {
    position: fixed;
    bottom: var(--bfh-space-6);
    right: var(--bfh-space-6);
    display: flex;
    flex-direction: column;
    gap: var(--bfh-space-3);
    z-index: var(--bfh-z-toast);
}

.bfh-toast {
    background-color: var(--bfh-surface);
    border: var(--bfh-border-width) solid var(--bfh-border);
    color: var(--bfh-text-primary);
    padding: var(--bfh-space-3) var(--bfh-space-4);
    border-radius: var(--bfh-radius-md);
    box-shadow: var(--bfh-shadow-2);
    font-size: var(--bfh-text-sm);
    display: flex;
    align-items: center;
    gap: var(--bfh-space-3);
    transition: opacity var(--bfh-anim-fast), transform var(--bfh-anim-fast);
}

.bfh-toast-success { border-left: 4px solid var(--bfh-success); }
.bfh-toast-error { border-left: 4px solid var(--bfh-danger); }
/* The neutral default callers fall back to; without it those toasts rendered
   with no accent edge at all while success and error had one. */
.bfh-toast-info { border-left: 4px solid var(--bfh-info); }
.bfh-toast-warning { border-left: 4px solid var(--bfh-warning); }