/* ============================================================
   Freebie Library — Front-End Styles
   Buttons use .wp-element-button to inherit theme styles.
   Colors/layout overrideable via Customizer.
   ============================================================ */

/* Design tokens stay local to the plugin so customer themes remain untouched. */
.fl-library-wrap,
.fl-signup-wrap,
.fl-gate-wrap {
    --fl-accent: var(--global-palette-btn-bg, #7c5cfc);
    --fl-accent-ink: var(--global-palette-btn, #ffffff);
    --fl-ink: var(--global-palette3, #25232b);
    --fl-muted: var(--global-palette4, #68646f);
    --fl-surface: var(--global-palette9, #ffffff);
    --fl-soft: color-mix(in srgb, var(--fl-accent) 7%, var(--fl-surface));
    --fl-line: color-mix(in srgb, var(--fl-ink) 11%, transparent);
    --fl-shadow: 0 12px 36px rgba(37, 35, 43, .09);
    --fl-shadow-hover: 0 20px 48px rgba(37, 35, 43, .15);
    color: var(--fl-ink);
}

/* ── Base button (inherits from theme via wp-element-button) ── */
.fl-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45em;
    cursor: pointer;
    text-decoration: none;
    transition: opacity .18s ease;
}
.fl-btn:hover  { opacity: .94; }
.fl-btn:focus-visible,
.fl-filter-btn:focus-visible,
.fl-cat-dropdown:focus-visible,
.fl-form input:focus-visible {
    outline: 3px solid color-mix(in srgb, var(--fl-accent, #7c5cfc) 28%, transparent);
    outline-offset: 3px;
}

/* wp-element-button is the WP standard class that all themes (inc. Kadence)
   style for their global button settings. We add it alongside fl-btn.
   This means font, size, colors, border-radius all come from the theme.     */

/* Kadence styles native buttons globally. Keep the download label on one line
   without overriding the theme's padding, type, border, or corner radius. */
.fl-dl-btn.wp-element-button { white-space: nowrap; }

.fl-btn:disabled,
.fl-btn[disabled] {
    opacity: .6;
    cursor: not-allowed;
    transform: none;
}

/* ── Messages ────────────────────────────────────────────── */
.fl-message {
    padding: 12px 16px;
    border-radius: 8px;
    margin-bottom: 16px;
    font-size: .95em;
}
.fl-message.fl-error {
    background: #fff0f0;
    border: 1px solid #f5c6c6;
    color: #c0392b;
}
.fl-message.fl-success {
    background: #f0fff4;
    border: 1px solid #b2dfdb;
    color: #2d6a4f;
}

/* ── Signup page ─────────────────────────────────────────── */
.fl-signup-wrap {
    max-width: 600px;
    margin: clamp(32px, 7vw, 80px) auto;
    font-family: inherit;
}

.fl-signup-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--fl-surface, #fff);
    border-radius: 16px; /* default; overridden by Customizer */
    padding: clamp(32px, 7vw, 64px);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1) !important;
    text-align: center;
    border: 1px solid var(--fl-line);
}

.fl-signup-box::before,
.fl-gate-box::before {
    content: "";
    position: absolute;
    z-index: -1;
    width: 240px;
    height: 240px;
    top: -155px;
    right: -115px;
    border-radius: 50%;
    background: color-mix(in srgb, var(--fl-accent) 13%, transparent);
}

.fl-access-art { display:block; height:auto; margin-left:auto; margin-right:auto; }
.fl-hearts-art { width:clamp(150px, 42%, 220px); margin-bottom:22px; }
.fl-leaves-art { width:clamp(76px, 24%, 112px); margin-bottom:20px; }

.fl-signup-heading {
    font-size: clamp(1.85rem, 5vw, 2.45rem);
    line-height: 1.12;
    letter-spacing: -.025em;
    margin: 0 0 14px;
    color: var(--fl-ink);
}

.fl-signup-sub {
    color: var(--fl-muted);
    max-width: 46ch;
    margin: 0 auto 32px;
    line-height: 1.65;
}

.fl-form { text-align: left; }

.fl-form-row { margin-bottom: 16px; }

.fl-form-row label {
    display: block;
    font-size: .9em;
    font-weight: 600;
    color: var(--fl-ink);
    margin-bottom: 8px;
}

.fl-form input[type="email"],
.fl-form input[type="password"],
.fl-form input[type="text"],
.fl-form-row input {
    width: 100%;
    box-sizing: border-box;
    min-height: 50px;
    padding: 12px 15px;
    border: 1px solid var(--fl-line);
    border-radius: 10px;
    font-size: 1em;
    background: var(--fl-surface, #fff);
    color: var(--fl-ink);
    transition: border-color .2s, box-shadow .2s;
    outline: none;
    font-family: inherit;
}
.fl-form input:focus { border-color: var(--fl-accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--fl-accent) 10%, transparent); }

.fl-form .fl-btn { width: 100%; margin-top: 8px; text-align: center; }

.fl-privacy {
    text-align: center;
    color: #999;
    font-size: .82em;
    margin-top: 12px;
}

.fl-success-text {
    font-size: 1.1em;
    color: #2d6a4f;
    margin-bottom: 20px;
}

/* ── Password gate ───────────────────────────────────────── */
.fl-gate-wrap {
    width: 100%;
    max-width: 600px !important;
    margin: clamp(32px, 7vw, 80px) auto;
}

.fl-gate-box {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    background: var(--fl-surface, #fff);
    border-radius: 16px; /* default; overridden by Customizer */
    padding: clamp(32px, 7vw, 64px);
    box-shadow: 0 0 10px 0 rgba(0,0,0,.1) !important;
    text-align: center;
    border: 1px solid var(--fl-line);
}


.fl-gate-box h2 {
    font-size: clamp(1.8rem, 5vw, 2.35rem);
    font-weight: 700;
    margin: 0 0 12px;
    color: var(--fl-ink);
}

.fl-gate-box p { color: var(--fl-muted); margin-bottom: 12px; }

.fl-gate-box .fl-form { margin-top: 20px; text-align: left; }
.fl-gate-box .fl-btn  { width: 100%; margin-top: 12px; }

/* ── Category filter bar ─────────────────────────────────── */
.fl-filter-wrap {
    margin-bottom: 36px;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

/* Pills style */
.fl-filter-pills .fl-filter-btn {
    background: var(--fl-surface, #fff);
	color: var(--fl-ink);
    border-radius: 999px;
    border: 1px solid var(--fl-line); 
    padding: 9px 18px;
    font-size: .84em;
    font-weight: 600;
    cursor: pointer;
    transition: color .18s, background .18s, border-color .18s;
    font-family: inherit;
}
.fl-filter-pills .fl-filter-btn:hover {
    background: var(--fl-soft);
    color: var(--fl-ink);
}
.fl-filter-pills .fl-filter-btn.active {
    background: var(--fl-accent);
    border-color: var(--fl-accent);
    color: var(--fl-accent-ink);
    box-shadow: 0 6px 16px color-mix(in srgb, var(--fl-accent) 22%, transparent);
}
.fl-filter-pills .fl-filter-child {
    font-size: .82em;
    padding: 5px 14px;
    opacity: .85;
}

/* Tabs style */
.fl-filter-tabs .fl-filter-btn {
    background: transparent;
    color: color-mix(in srgb, var(--global-palette-btn-bg, #333333) 50%, white);
    border: none;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    padding: 8px 14px;
    font-size: .95em;
    font-weight: 600;
    cursor: pointer;
    transition: color .15s, border-color .15s;
    font-family: inherit;
}
.fl-filter-tabs .fl-filter-btn:hover  { color: var(--global-palette-btn-bg); box-shadow: none;}
.fl-filter-tabs .fl-filter-btn.active { color: var(--global-palette-btn-bg); border-bottom-color: var(--global-palette-btn-bg); box-shadow: none;}
.fl-filter-tabs .fl-filter-child      { font-size: .85em; padding-left: 20px; }

/* Dropdown style */
.fl-filter-dropdown { display: block; }
.fl-cat-dropdown {
    padding: 10px 14px;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    font-size: 1em;
    font-family: inherit;
    cursor: pointer;
    min-width: 220px;
    outline: none;
    transition: border-color .2s;
}
.fl-cat-dropdown:focus { border-color: #eee; }

/* No results */
.fl-no-results {
    padding: 24px;
    text-align: center;
    color: #888;
    background: #fafafa;
    border-radius: 12px;
    margin-bottom: 16px;
}

/* ── Library grid (base — Customizer CSS overrides these) ─── */
.fl-library-wrap {
    width: 100%;
    max-width: none;
    box-sizing: border-box;
    margin: 0 auto;
    padding: clamp(24px, 5vw, 64px) 0;
}

.fl-library-heading {
    font-size: clamp(2rem, 5vw, 3.25rem);
    line-height: 1.08;
    letter-spacing: -.035em;
    margin: 0 0 10px;
    color: var(--fl-ink);
}

.fl-library-sub {
    margin: 0 0 34px;
    color: var(--fl-muted);
    font-size: 1.05em;
}

.fl-library-tools { display:grid; grid-template-columns:minmax(210px,1.35fr) repeat(3,minmax(145px,1fr)) auto; gap:10px; align-items:end; margin:0 0 28px; }
.fl-library-search, .fl-axis-filter, .fl-clear-control { display:flex; min-width:0; flex-direction:column; justify-content:flex-end; }
.fl-library-search > span, .fl-axis-filter > span, .fl-clear-control > span { display:block; min-height:1.2em; margin:0 0 7px; color:var(--fl-ink); font-size:.76em; line-height:1.2; font-weight:700; text-transform:uppercase; letter-spacing:.04em; }
.fl-library-search input, .fl-axis-filter select, .fl-clear-filters { box-sizing:border-box; width:100%; height:56px !important; min-height:56px !important; margin:0; border:1px solid var(--fl-line); border-radius:9px; padding:10px 14px; background-color:var(--fl-surface); color:var(--fl-ink); font:inherit; line-height:1.2; }
.fl-axis-filter select { appearance:none !important; -webkit-appearance:none !important; padding-right:44px; cursor:pointer; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%234a3528' stroke-width='2.25' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; background-size:18px 18px; }
.fl-clear-filters { width:auto; padding:10px 18px; cursor:pointer; white-space:nowrap; }

.fl-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* overridden by Customizer */
    gap: 24px;                              /* overridden by Customizer */
}

/* ── Card ────────────────────────────────────────────────── */
.fl-card-item {
    background: var(--fl-surface, #fff);
    border-radius: 12px; /* default; overridden by Customizer */
    box-shadow: var(--fl-shadow); /* default; overridden by Customizer */
    overflow: hidden;
    border: 1px solid var(--fl-line);
    display: flex;
    flex-direction: column;
}

.fl-item-thumb {
    width: 100%;
    height: 180px; /* overridden by Customizer */
    overflow: hidden;
    background: linear-gradient(145deg, var(--fl-soft), color-mix(in srgb, var(--fl-accent) 16%, var(--fl-surface)));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.fl-item-thumb img.fl-thumb,
.fl-item-thumb picture.fl-thumb img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100% !important;
    object-fit: cover;
}

.fl-thumb-placeholder {
    font-size: 3.5em;
    opacity: .6;
}

.fl-item-body {
    padding: 22px;
    display: flex;
    flex-direction: column;
    flex: 1;
}

/* Category badges on each card */
.fl-item-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 8px;
}
.fl-item-cat-badge {
    background: #f3f0ff;
    color: #6d28d9;
    font-size: .73em;
    font-weight: 600;
    padding: 2px 10px;
    border-radius: 999px;
    text-transform: uppercase;
    letter-spacing: .04em;
}

.fl-item-title {
    font-size: 1.15em;
    font-weight: 700;
    margin: 0 0 8px;
    color: var(--fl-ink);
    line-height: 1.35;
}

.fl-item-desc {
    color: var(--fl-muted);
    font-size: .92em;
    line-height: 1.6;
    margin: 0 0 20px;
    flex: 1;
}
.fl-tutorial-link, .fl-tutorial-link:visited { display:inline-flex; align-items:center; gap:.35em; align-self:center; margin:0 0 0 auto; padding:0; border:0; border-radius:0; background:transparent !important; color:var(--global-palette1, var(--fl-accent)) !important; font-size:.92em; font-weight:700; text-decoration:none; white-space:nowrap; }
.fl-tutorial-link:hover, .fl-tutorial-link:focus { background:transparent !important; color:var(--global-palette2, var(--global-palette1, var(--fl-accent))) !important; text-decoration:underline; text-underline-offset:3px; }

.fl-item-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: auto !important;
    gap: 12px;
    padding-top: 16px;
    border-top: 1px solid var(--fl-line);
}

.fl-file-list { margin:14px 0 0; padding:8px; border:1px solid var(--fl-line); border-radius:10px; background:var(--fl-soft); max-height:260px; overflow:auto; }
.fl-file-list[hidden] { display:none; }
.fl-files-toggle.wp-element-button,
.fl-dl-btn.wp-element-button:not(.fl-file-link) { min-height:42px; padding:9px 15px !important; border:1px solid var(--fl-ink) !important; border-radius:8px; background:var(--fl-ink) !important; color:var(--fl-surface) !important; box-shadow:none; font-weight:700; line-height:1.1; }
.fl-files-toggle.wp-element-button:hover, .fl-files-toggle.wp-element-button:focus,
.fl-dl-btn.wp-element-button:not(.fl-file-link):hover, .fl-dl-btn.wp-element-button:not(.fl-file-link):focus { opacity:.88; color:var(--fl-surface) !important; }
.fl-file-link { appearance:none; display:flex; width:100%; justify-content:space-between; gap:12px; padding:9px 10px; border:0; border-bottom:1px solid var(--fl-line); background:transparent; color:var(--fl-ink); text-align:left; font:inherit; cursor:pointer; }
.fl-file-link:last-child { border-bottom:0; }
.fl-file-link:hover { color:var(--fl-accent); }

/* ── Responsive (base breakpoints — Customizer adds its own) ─ */
@media (max-width: 900px) {
    .fl-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
    .fl-signup-box,
    .fl-gate-box    { padding: 32px 20px; }
    .fl-grid        { grid-template-columns: 1fr; }
    .fl-filter-wrap { gap: 6px; }
    .fl-filter-pills .fl-filter-btn { padding: 6px 12px; font-size: .82em; }
    .fl-library-heading,
    .fl-library-sub { text-align: center; }
    .fl-filter-wrap { justify-content: center; }
    .fl-item-footer { align-items: stretch; flex-direction: column; }
    .fl-dl-btn.wp-element-button { width: 100%; }
    .fl-library-tools { grid-template-columns:1fr; }
}
@media (min-width:601px) and (max-width:900px) { .fl-library-tools { grid-template-columns:1fr 1fr; } }

/* ── Sidebar layout ────────────────────────────────────────────────────────── */
/* Default sidebar grid — overridden by Customizer for width/gap */
.fl-library-with-sidebar {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 24px;
    align-items: start;
}

/* Make the sidebar sticky so it stays visible while scrolling */
.fl-sidebar-filter {
    position: sticky;
    top: 20px;
}

.fl-library-with-sidebar > .fl-sidebar-filter {
    padding: 18px;
    border: 1px solid var(--fl-line);
    border-radius: 14px;
    background: var(--fl-soft);
}

.fl-library-with-sidebar > .fl-sidebar-filter > .fl-filter-wrap {
    margin-bottom: 0;
}

/* Sidebar filter buttons stack vertically */
.fl-sidebar-filter .fl-filter-btn {
    display: block;
    width: 100%;
    text-align: left;
    margin-bottom: 4px;
    margin-right: 0;
}

/* Sidebar pills */
.fl-sidebar-filter.fl-filter-pills .fl-filter-btn {
    border-radius: 999px;
}

/* Sidebar tabs — vertical left-border style instead of underline */
.fl-sidebar-filter.fl-filter-tabs .fl-filter-btn {
    border-bottom: none;
    border-left: 3px solid transparent;
    border-radius: 0;
    padding-left: 12px;
}
.fl-sidebar-filter.fl-filter-tabs .fl-filter-btn.active {
    border-left-color: currentColor;
    border-bottom: none;
    background: transparent;
}

/* Sidebar dropdown fills the column */
.fl-sidebar-filter.fl-filter-dropdown .fl-cat-dropdown {
    width: 100%;
}

/* Child category indent in sidebar */
.fl-sidebar-filter .fl-filter-child {
    padding-left: 28px;
    font-size: 0.9em;
    opacity: 0.85;
}

/* Collapse to top layout on small screens */
@media (max-width: 700px) {
    .fl-library-with-sidebar {
        grid-template-columns: 1fr;
    }
    .fl-sidebar-filter {
        position: static;
    }
    .fl-sidebar-filter .fl-filter-btn {
        display: inline-block;
        width: auto;
        margin-right: 6px;
        margin-bottom: 6px;
    }
    .fl-sidebar-filter.fl-filter-tabs .fl-filter-btn {
        border-left: none;
        border-bottom: 2px solid transparent;
        padding-left: 0;
    }
    .fl-sidebar-filter.fl-filter-tabs .fl-filter-btn.active {
        border-bottom-color: currentColor;
        border-left: none;
    }
}

/* ── Category badges — top-left image overlay ──────────────────────────────── */
.fl-item-thumb {
    position: relative; /* ensure overlay works for fixed-height mode too */
}
.fl-item-cats {
    position: absolute;
    top: 10px;
    left: 10px;
    z-index: 2;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    max-width: calc(100% - 20px);
}
.fl-item-cat-badge {
    display: inline-block;
    font-size: 0.7em;
    font-weight: 600;
    letter-spacing: .03em;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(28, 26, 32, .72);
    color: #fff;
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    white-space: nowrap;
    box-shadow: 0 3px 10px rgba(0,0,0,.16);
}

/* ── Unboxed card style ─────────────────────────────────────────────────────── */
.fl-content-style-unboxed .fl-card-item {
    background: transparent;
    box-shadow: none;
    border: none;
}
.fl-content-style-unboxed .fl-item-body {
    padding: 12px 0;
}

/* ── Downloaded button state ────────────────────────────────────────────────── */
.fl-dl-btn--done {
    opacity: 0.75;
    cursor: default;
}
.fl-dl-btn--done:hover {
    opacity: 0.75;
}

@media (prefers-reduced-motion: reduce) {
    .fl-btn,
    .fl-filter-btn,
    .fl-card-item,
    .fl-item-thumb img.fl-thumb,
    .fl-item-thumb picture.fl-thumb img { transition: none; }
}