/* ============================================================
   HanfuWay Reviews Carousel — Native CSS  v1.2.0
   6 reviews · desktop 3-per-view · tablet 2 · mobile 1
   ============================================================ */

/* Force display on ALL devices — Elementor hides the original on mobile */
.hfw-reviews {
    display: block !important;
    width: 100%;
    padding: 60px 20px;
    box-sizing: border-box;
    background: #fff;
}

.hfw-reviews-inner {
    max-width: 1200px;
    margin: 0 auto;
}

/* ── Carousel shell ── */
.hfw-carousel {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}

.hfw-track-wrap {
    overflow: hidden;
    flex: 1;
    min-width: 0;
    cursor: grab;
    -webkit-user-select: none;
    user-select: none;
}

.hfw-track-wrap:active { cursor: grabbing; }

.hfw-track {
    display: flex;
    transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ── Slides ── */
/* JS sets width dynamically; CSS provides the fallback */
.hfw-slide {
    flex: 0 0 calc(100% / 3);
    min-width: calc(100% / 3);
    padding: 0 10px;
    box-sizing: border-box;
}

/* ── Cards ── */
.hfw-card {
    background: #fff;
    border: 1px solid #e8e8e8;
    border-radius: 8px;
    padding: 24px;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 14px;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.hfw-card:hover {
    box-shadow: 0 6px 24px rgba(0,0,0,0.09);
    transform: translateY(-3px);
}

.hfw-card-top {
    display: flex;
    align-items: center;
    gap: 14px;
}

/* Avatar */
.hfw-avatar {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    overflow: hidden;
    background: #f5ede0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.hfw-avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.hfw-avatar-initial {
    font-size: 22px;
    font-weight: 700;
    color: #8b6914;
    line-height: 1;
    font-family: Georgia, serif;
}

/* Meta */
.hfw-meta {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.hfw-name {
    font-size: 15px;
    font-weight: 700;
    color: #1a1a1a;
    line-height: 1.2;
    display: block;
}

/* Stars */
.hfw-stars {
    display: inline-flex;
    gap: 1px;
}
.hfw-star          { font-size: 16px; line-height: 1; }
.hfw-star--full    { color: #f0a500; }
.hfw-star--empty   { color: #ddd; }

/* Text */
.hfw-text {
    font-size: 14px;
    line-height: 1.7;
    color: #555;
    margin: 0;
    flex: 1;
}

/* ── Arrow buttons ── */
.hfw-arrow {
    flex-shrink: 0;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1.5px solid #d0d0d0;
    background: #fff;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #555;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    padding: 0;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.hfw-arrow:hover:not(:disabled) { background: #1a1a1a; color: #fff; border-color: #1a1a1a; }
.hfw-arrow:focus-visible         { outline: 2px solid #f0a500; outline-offset: 3px; }
.hfw-arrow:disabled              { opacity: 0.25; cursor: default; pointer-events: none; }
.hfw-arrow svg                   { width: 18px; height: 18px; display: block; }

/* ── Dots ── */
.hfw-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin-top: 26px;
}

.hfw-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    border: none;
    background: #ccc;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, transform 0.2s;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.hfw-dot--active   { background: #1a1a1a; transform: scale(1.3); }
.hfw-dot:focus-visible { outline: 2px solid #f0a500; outline-offset: 2px; }

/* ============================================================
   Tablet ≤ 1024px — 2 cards visible
   ============================================================ */
@media (max-width: 1024px) {
    .hfw-slide {
        flex: 0 0 50% !important;
        min-width: 50% !important;
    }
}

/* ============================================================
   Mobile ≤ 767px — 1 card, hide arrows, reduce padding
   Overrides Elementor's display:none on this breakpoint
   ============================================================ */
@media (max-width: 767px) {
    .hfw-reviews {
        padding: 36px 12px !important;
    }

    .hfw-slide {
        flex: 0 0 100% !important;
        min-width: 100% !important;
        padding: 0 4px !important;
    }

    .hfw-arrow {
        display: none !important;
    }

    .hfw-card {
        padding: 18px;
    }

    .hfw-text {
        font-size: 13.5px;
    }
}