/* Forever Jewels Diamond Filter — front-end styles */
.fjdf-wrap {
    --fj-purple: #00674f;
    --fj-purple-light: #e6f1ed;
    --fj-border: #e3e3e8;
    --fj-text: #222;
    --fj-muted: #777;
    --fj-panel-bg: #fff;
    --fj-card-bg: #fff;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: var(--fj-text);
    font-size: 14px;
    line-height: 1.4;
    width: 100%;
    box-sizing: border-box;
}
.fjdf-wrap *, .fjdf-wrap *::before, .fjdf-wrap *::after { box-sizing: border-box; }

.fjdf-breadcrumb { font-size: 13px; color: var(--fj-muted); text-align: right; margin-bottom: 4px; }
.fjdf-breadcrumb span { color: var(--fj-text); }

.fjdf-title-row { display: flex; align-items: center; gap: 16px; padding: 8px 0 16px; flex-wrap: wrap; }
.fjdf-title { font-size: 22px; font-weight: 600; margin: 0; flex: 0 0 auto; }

.fjdf-tabs { display: flex; gap: 4px; flex: 1 1 auto; justify-content: center; flex-wrap: wrap; }
.fjdf-tab { background: transparent; border: 1px solid transparent; padding: 8px 18px; border-radius: 6px; cursor: pointer; font-size: 14px; color: var(--fj-text); }
.fjdf-tab:hover { background: var(--fj-purple-light); }
.fjdf-tab.is-active { background: var(--fj-purple); color: #fff; }

.fjdf-hide-btn { background: #fff; border: 1px solid var(--fj-border); padding: 8px 14px; border-radius: 6px; cursor: pointer; }

.fjdf-filters { border: 1px solid var(--fj-border); border-radius: 10px; padding: 18px 22px; background: var(--fj-panel-bg); }
.fjdf-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; }
@media (max-width: 900px) { .fjdf-row { grid-template-columns: 1fr; } }

/* Each pair is its own grid row so the two fields inside ALWAYS align horizontally,
   regardless of differing content heights elsewhere (e.g. shape icons vs price slider). */
.fjdf-wrap .fjdf-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 36px; margin-bottom: 4px; }
.fjdf-wrap .fjdf-pair-single { grid-template-columns: 1fr; }
@media (max-width: 900px) { .fjdf-wrap .fjdf-pair { grid-template-columns: 1fr; } }

.fjdf-field { margin-bottom: 18px; }
.fjdf-field > label { display: block; font-size: 13px; color: var(--fj-muted); margin-bottom: 8px; font-weight: 500; }
.fjdf-info { color: #bbb; font-size: 11px; }

/* Shape icon row — icons spread across the full column width so the row's
   left and right edges line up with the Carat / Cut sliders directly below. */
.fjdf-shapes { display: flex; gap: 8px 4px; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }
.fjdf-shape {
    flex: 0 0 auto;
    min-width: 56px;
    border: 1px solid transparent;
    border-radius: 6px;
    background: transparent;
    cursor: pointer;
    padding: 4px 2px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    transition: border-color .15s, background .15s;
}
.fjdf-shape .fjdf-shape-icon {
    width: 38px;
    height: 38px;
    border: 1px solid var(--fj-border);
    border-radius: 6px;
    background: #fff;
    padding: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.fjdf-shape:hover .fjdf-shape-icon { border-color: var(--fj-purple); }
.fjdf-shape.is-active .fjdf-shape-icon { background: var(--fj-purple-light); border-color: var(--fj-purple); }
.fjdf-shape img { width: 100%; height: 100%; object-fit: contain; }
.fjdf-shape-name {
    font-size: 11px;
    line-height: 1.2;
    color: var(--fj-muted);
    text-align: center;
    user-select: none;
}
.fjdf-shape.is-active .fjdf-shape-name { color: var(--fj-purple); font-weight: 600; }

/* Range sliders — dual-handle stacked */
.fjdf-range { position: relative; padding: 14px 4px 24px; }
.fjdf-range input[type=range] {
    position: absolute; top: 14px; left: 0; right: 0; width: 100%;
    pointer-events: none; -webkit-appearance: none; appearance: none; background: transparent; height: 4px;
}
.fjdf-range input[type=range]::-webkit-slider-runnable-track { height: 4px; background: var(--fj-border); border-radius: 2px; }
.fjdf-range input[type=range]::-moz-range-track            { height: 4px; background: var(--fj-border); border-radius: 2px; }
.fjdf-range input[type=range]::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; pointer-events: auto;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    border: 3px solid var(--fj-purple); cursor: pointer; margin-top: -6px;
    box-shadow: 0 1px 3px rgba(0,0,0,.2);
}
.fjdf-range input[type=range]::-moz-range-thumb {
    pointer-events: auto;
    width: 16px; height: 16px; border-radius: 50%; background: #fff;
    border: 3px solid var(--fj-purple); cursor: pointer;
}

.fjdf-range-inputs { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; }
.fjdf-range-inputs input { width: 120px; padding: 6px 8px; border: 1px solid var(--fj-border); border-radius: 4px; font-size: 13px; }

/* Discrete scale */
.fjdf-discrete .fjdf-scale-labels {
    display: grid; margin-top: 12px; font-size: 12px; color: var(--fj-muted); text-align: center;
}
.fjdf-discrete .fjdf-scale-labels span { padding-top: 4px; }

/* Checkbox rows */
.fjdf-checkbox-row { display: flex; align-items: center; flex-wrap: wrap; gap: 18px; }
.fjdf-checkbox-row > label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--fj-text); margin: 0; }
.fjdf-checkbox-row .fjdf-spacer { margin-left: 24px; color: var(--fj-muted); }

/* Additional Filters — toggled section with smooth slide-down + fade animation.
   ALL six properties share the same duration + easing so the outer rectangle
   (padding/margin/border) collapses in perfect lockstep with the content height. */
.fjdf-additional {
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: 0 solid var(--fj-border);
    transform: translateY(-4px);
    transition:
        max-height       0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        opacity          0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        transform        0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        padding-top      0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        margin-top       0.4s cubic-bezier(0.25, 0.8, 0.25, 1),
        border-top-width 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
}
.fjdf-additional.is-open {
    /* max-height is set inline by JS to scrollHeight so collapse animates from the
       real height, not from an arbitrary upper bound. After the open transition
       finishes JS sets it to "none" so the panel can re-flow if content changes. */
    opacity: 1;
    transform: translateY(0);
    margin-top: 14px;
    padding-top: 18px;
    border-top-width: 1px;
}
.fjdf-additional .fjdf-checkbox-row { gap: 14px 22px; }
/* Fixed-width labels so the first checkbox of every row (Good, IGI, None…)
   starts at the same X coordinate — perfect vertical alignment. */
.fjdf-additional .fjdf-field-label {
    font-weight: 600;
    color: var(--fj-text);
    display: inline-block;
    min-width: 110px;
    margin-right: 8px;
}

/* Chevron in the button rotates in sync with the panel */
.fjdf-show-more .fjdf-chev { display: inline-block; transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1); margin-left: 4px; }
.fjdf-show-more[aria-expanded="true"] .fjdf-chev { transform: rotate(180deg); }

.fjdf-actions { display: flex; justify-content: center; align-items: center; gap: 16px; margin-top: 14px; position: relative; }
.fjdf-clear { background: transparent; border: 0; color: var(--fj-purple); text-decoration: underline; cursor: pointer; position: absolute; left: 0; }
.fjdf-show-more { background: var(--fj-purple); color: #fff; border: 0; padding: 10px 24px; border-radius: 6px; cursor: pointer; font-size: 14px; }

/* Results bar */
.fjdf-results-bar { display: flex; justify-content: space-between; align-items: center; padding: 18px 4px 12px; border-bottom: 1px solid var(--fj-border); flex-wrap: wrap; gap: 12px; }
.fjdf-result-tabs { display: flex; gap: 24px; }
.fjdf-rt { color: var(--fj-muted); font-size: 14px; }
.fjdf-rt-active { color: var(--fj-purple); border-bottom: 2px solid var(--fj-purple); padding-bottom: 6px; font-weight: 600; }
.fjdf-result-controls { display: flex; gap: 24px; align-items: center; font-size: 13px; color: var(--fj-muted); }
.fjdf-result-controls select { border: 0; background: transparent; font-weight: 600; color: var(--fj-text); cursor: pointer; padding: 4px; }

/* Results grid */
.fjdf-results { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 18px; padding: 18px 0; }
.fjdf-card { border: 1px solid var(--fj-border); border-radius: 10px; padding: 12px; background: var(--fj-card-bg); transition: box-shadow .15s, transform .15s; cursor: pointer; }
.fjdf-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.08); transform: translateY(-2px); }
.fjdf-card:focus { outline: 2px solid var(--fj-purple); outline-offset: 2px; }
.fjdf-card-media { aspect-ratio: 1/1; background: #fafafa; border-radius: 8px; display: flex; align-items: center; justify-content: center; overflow: hidden; margin-bottom: 10px; position: relative; }
.fjdf-card-media img { width: 100%; height: 100%; object-fit: contain; }
.fjdf-card-media .fjdf-video-badge { position: absolute; top: 6px; right: 6px; background: rgba(0,0,0,.6); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 3px; }
.fjdf-card-title { font-weight: 600; font-size: 14px; margin: 0 0 6px; }
.fjdf-card-attrs { font-size: 12px; color: var(--fj-muted); display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.fjdf-card-attrs span { background: #f6f6f8; padding: 2px 6px; border-radius: 3px; }
.fjdf-card-price { font-size: 16px; font-weight: 700; color: var(--fj-purple); }
.fjdf-card-actions { display: flex; gap: 6px; margin-top: 10px; }
.fjdf-card-actions a, .fjdf-card-actions button { flex: 1; text-align: center; padding: 6px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; text-decoration: none; }
.fjdf-card-actions .fjdf-view { background: var(--fj-purple); color: #fff; border: 0; }
.fjdf-card-actions .fjdf-cert-link { background: #fff; color: var(--fj-purple); border: 1px solid var(--fj-purple); }

.fjdf-empty { text-align: center; padding: 60px 20px; color: var(--fj-muted); grid-column: 1/-1; }

.fjdf-pagination { display: flex; justify-content: center; align-items: center; gap: 16px; padding: 20px 0; }
.fjdf-pagination button { background: #fff; border: 1px solid var(--fj-border); padding: 8px 14px; border-radius: 4px; cursor: pointer; }
.fjdf-pagination button:disabled { opacity: .5; cursor: not-allowed; }
.fjdf-pagination button:hover:not(:disabled) { border-color: var(--fj-purple); color: var(--fj-purple); }

.fjdf-loading { padding: 40px; text-align: center; color: var(--fj-muted); grid-column: 1/-1; }

/* =========================================================================
   MOBILE LAYOUT — narrow screens (phones, small tablets)
   ========================================================================= */
@media (max-width: 760px) {

    /* Shape row: the 10 icons + names wrap onto 2-3 rows on narrow widths.
       Give each row generous vertical breathing room so a name from row 1
       never visually collides with an icon in row 2. */
    .fjdf-shapes {
        gap: 20px 8px;
        justify-content: space-between;
    }
    .fjdf-shape {
        min-width: 56px;
        flex: 0 0 calc(20% - 8px); /* 5 per row on phone — keeps balanced grid */
    }
    .fjdf-shape-name {
        font-size: 11px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 100%;
    }

    /* Actions row: the "Show Additional Filters" button was overlapping
       Clear Filters because Clear was absolute-positioned. Stack them
       vertically on phones for clear separation. */
    .fjdf-actions {
        flex-direction: column;
        align-items: center;
        gap: 12px;
    }
    .fjdf-clear {
        position: static;
        order: 2;          /* Clear below Show More */
        text-align: center;
    }
    .fjdf-show-more {
        width: 100%;
        max-width: 360px;
        order: 1;
        padding: 12px 18px;
    }

    /* Title row may also need to wrap nicely on phones */
    .fjdf-title-row { flex-direction: column; align-items: stretch; gap: 12px; }
    .fjdf-tabs      { justify-content: center; }
    .fjdf-hide-btn  { align-self: center; }

    /* Make the results-bar (Result / Sort By / Per Page) wrap cleanly */
    .fjdf-results-bar { gap: 12px; padding-top: 12px; }
    .fjdf-result-controls { width: 100%; justify-content: space-between; gap: 12px; }
}

/* Very narrow phones */
@media (max-width: 420px) {
    .fjdf-shape {
        flex: 0 0 calc(25% - 8px); /* 4 per row */
    }
    .fjdf-shape-name {
        font-size: 10px;
    }
    .fjdf-filters { padding: 14px; }
    .fjdf-title { font-size: 18px; }
}

/* =========================================================================
   WC FILTER MODE — when the filter is wired to the WooCommerce product loop
   already on the page (instead of rendering its own card list). The plugin's
   own results UI is suppressed server-side; these rules cover the small bits
   of UI that ARE still rendered (status line + loading state for the WC grid).
   ========================================================================= */

/* Defensive: if the plugin's own results/pagination ever leak through in
   wc_filter mode, hide them. The template usually doesn't even render these,
   but rules here cover any future change that re-emits them. */
.fjdf-mode-wc .fjdf-results,
.fjdf-mode-wc .fjdf-results-bar,
.fjdf-mode-wc .fjdf-pagination { display: none !important; }

/* Slim status line ("Updating results…") sits just below the filter panel. */
.fjdf-wc-status {
    min-height: 18px;
    padding: 8px 4px 0;
    font-size: 13px;
    color: var(--fj-muted);
    text-align: right;
}
.fjdf-wc-status:empty { padding: 0; min-height: 0; }

/* WC product grid loading state — dim and disable pointer events while a
   request is in flight, so users get clear feedback that the grid is updating
   and don't double-fire clicks on a product card that's about to be replaced. */
.fjdf-grid-loading {
    opacity: .45;
    pointer-events: none;
    transition: opacity .2s ease;
}

/* No-match placeholder that replaces the WC grid when zero products match. */
.fjdf-wc-empty {
    text-align: center;
    padding: 60px 20px;
    color: var(--fj-muted);
    border: 1px dashed var(--fj-border);
    border-radius: 10px;
    margin: 18px 0;
}