/**
 * NivoSync — Generic theme, Ring Builder Settings Card styles.
 *
 * Self-declares the --ns-gen-* token layer (loop.css is not loaded on RB pages).
 * All rules are scoped under .ns-rbl--modern so nothing leaks into the host
 * theme. Metal-swatch colours are literal metal representations (like the
 * mockup), not theme brand colours, so they are intentionally not tokenised.
 *
 * @package NivoSync
 * @since   3.0.7
 */

/* =========================================================================
   DESIGN TOKENS — the admin overrides the *-user vars; these are the defaults.
   ========================================================================= */
.ns-theme-modern {
    --ns-gen-bg:        var(--ns-gen-bg-user, #ffffff);
    --ns-gen-surface:   var(--ns-gen-surface-user, #f4f4f3);
    --ns-gen-ink:       var(--ns-gen-ink-user, #1a1a1a);
    --ns-gen-ink-soft:  var(--ns-gen-ink-soft-user, #6b6b6b);
    --ns-gen-line:      var(--ns-gen-line-user, #e3e3e1);
    --ns-gen-accent:    var(--ns-gen-accent-user, #8a6d3b);
    --ns-gen-on-ink:    var(--ns-gen-on-ink-user, #ffffff);
    --ns-gen-track:     var(--ns-gen-track-user, #dcdcda);
    --ns-gen-active:    var(--ns-gen-active-user, #d3a441);
    --ns-gen-focus:     var(--ns-gen-focus-user, #2b6cb0);

    /* Button state tokens (configurable; sensible derived defaults). */
    --ns-gen-btn-solid-bg:       var(--ns-gen-btn-solid-bg-user, var(--ns-gen-ink));
    --ns-gen-btn-solid-text:     var(--ns-gen-btn-solid-text-user, var(--ns-gen-on-ink));
    --ns-gen-btn-solid-hover-bg: var(--ns-gen-btn-solid-hover-bg-user, var(--ns-gen-accent));
    --ns-gen-btn-ghost-bg:       var(--ns-gen-btn-ghost-bg-user, var(--ns-gen-bg));
    --ns-gen-btn-ghost-text:     var(--ns-gen-btn-ghost-text-user, var(--ns-gen-ink));
    --ns-gen-btn-ghost-hover-bg: var(--ns-gen-btn-ghost-hover-bg-user, var(--ns-gen-surface));
    --ns-gen-card-hover-border:  var(--ns-gen-card-hover-border-user, var(--ns-gen-line));

    /* Type. */
    --ns-gen-font-display: var(--ns-gen-font-display-user, Georgia, 'Times New Roman', serif);
    --ns-gen-font-body:    var(--ns-gen-font-body-user, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif);

    /* Geometry / motion. */
    --ns-gen-radius:    var(--ns-gen-radius-user, 4px);
    --ns-gen-radius-lg: var(--ns-gen-radius-lg-user, 8px);
    --ns-gen-gap:       16px;
    --ns-gen-maxw:      1280px;
    --ns-gen-card-min:  240px;
    --ns-gen-t:         160ms ease;
}

/* =========================================================================
   CARD
   ========================================================================= */
.ns-rbl--modern .ns-rbl-card { position: relative; border: 1px solid transparent; border-radius: var(--ns-gen-radius); transition: border-color var(--ns-gen-t); padding-bottom: 12px; }
.ns-rbl--modern .ns-rbl-card:hover { border-color: var(--ns-gen-card-hover-border); }
.ns-rbl--modern .ns-rbl-card__link { display: block; }

/* Media + image stack (JS crossfades .ns-rbl-card__img--0) */
.ns-rbl--modern .ns-rbl-card__media { position: relative; background: var(--ns-gen-surface); aspect-ratio: 1 / 1; border-radius: var(--ns-gen-radius) var(--ns-gen-radius) 0 0; overflow: hidden; }
.ns-rbl--modern .ns-rbl-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 8%; transition: opacity var(--ns-gen-t); }
.ns-rbl--modern .ns-rbl-card__img--0 { opacity: 1; z-index: 1; }
.ns-rbl--modern .ns-rbl-card__img--1,
.ns-rbl--modern .ns-rbl-card__img--2 { opacity: 0; z-index: 0; pointer-events: none; }
.ns-rbl--modern .ns-rbl-card__placeholder { position: absolute; inset: 0; display: grid; place-items: center; color: var(--ns-gen-line); }

/* Badge */
.ns-rbl--modern .ns-rbl-card__badge { position: absolute; top: 10px; left: 10px; z-index: 2; background: var(--ns-gen-ink); color: var(--ns-gen-on-ink); font-size: 10px; letter-spacing: .3px; text-transform: uppercase; padding: 3px 8px; border-radius: 99px; }

/* Metal dots */
.ns-rbl--modern .ns-rbl-card__metals { list-style: none; display: flex; gap: 8px; margin: 12px 0 0; padding: 0 12px; }
.ns-rbl--modern .ns-rbl-card__metal-dot { width: 22px; height: 22px; padding: 0; border-radius: 50%; border: 1px solid var(--ns-gen-line); background-size: cover; background-position: center; transition: outline-color var(--ns-gen-t); }
.ns-rbl--modern .ns-rbl-card__metal-dot.is-active { outline: 1.5px solid var(--ns-gen-ink); outline-offset: 2px; }

/* The .ns-metal--{preset} swatch colours (0,2,0) lose to Elementor's button rule
   (0,2,1) — including on hover, turning the dots the kit's accent. Re-pin the
   presets at (0,3,0) through the compound root so the metal colours survive. */
.ns-theme-modern.ns-rbl--modern .ns-metal--white-gold  { background: #e8e8e8; }
.ns-theme-modern.ns-rbl--modern .ns-metal--yellow-gold { background: #e6c66a; }
.ns-theme-modern.ns-rbl--modern .ns-metal--rose-gold   { background: #e3b9a6; }
.ns-theme-modern.ns-rbl--modern .ns-metal--platinum    { background: #cfd2d4; }
.ns-theme-modern.ns-rbl--modern .ns-metal--silver      { background: #d9d9d9; }

/* Metal preset swatches (literal metal colours) */
.ns-rbl--modern .ns-metal--white-gold  { background: #e8e8e8; }
.ns-rbl--modern .ns-metal--yellow-gold { background: #e6c66a; }
.ns-rbl--modern .ns-metal--rose-gold   { background: #e3b9a6; }
.ns-rbl--modern .ns-metal--platinum    { background: #cfd2d4; }
.ns-rbl--modern .ns-metal--silver      { background: #d9d9d9; }

/* Title + hover thumbnails */
.ns-rbl--modern .ns-rbl-card__title-wrap { position: relative; padding: 12px 12px 0; }
.ns-rbl--modern .ns-rbl-card__title { font-weight: 600; font-size: 15px; margin: 0; }
.ns-rbl--modern .ns-rbl-card__title a { color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-card__title a:hover { color: var(--ns-gen-accent); }
.ns-rbl--modern .ns-rbl-card__thumbs { display: none; gap: 6px; margin-top: 8px; }
.ns-rbl--modern .ns-rbl-card__title-wrap.is-thumbs-active .ns-rbl-card__thumbs { display: flex; }
.ns-rbl--modern .ns-rbl-card__thumb-btn { width: 40px; height: 40px; padding: 2px; border: 1px solid var(--ns-gen-line); border-radius: var(--ns-gen-radius); background: var(--ns-gen-bg); }
.ns-rbl--modern .ns-rbl-card__thumb-btn img { width: 100%; height: 100%; object-fit: contain; }

/* Description */
.ns-rbl--modern .ns-rbl-card__desc { padding: 6px 12px 0; font-size: 13px; color: var(--ns-gen-ink-soft); margin: 0; }

/* Price */
.ns-rbl--modern .ns-rbl-card__price { padding: 8px 12px 0; margin: 0; font-weight: 700; font-size: 15px; color: var(--ns-gen-ink); }
.ns-rbl--modern .ns-rbl-card__price-prefix { display: inline; font-weight: 400; font-size: 11px; letter-spacing: .3px; color: var(--ns-gen-ink-soft); margin-right: 4px; }
.ns-rbl--modern .ns-rbl-card__price-value { color: var(--ns-gen-ink); }

/* =========================================================================
   MODERN BRIDGE — feed the ported token layer from the Modern palette.
   This file was ported from the generic RB implementation; its rules read
   --ns-gen-* tokens. Here we define the -user layer of those tokens from
   Modern's own palette (respecting the Appearance › Styles overrides
   emitted as --ns-modern-*-user), so the whole RB flow wears the Modern
   look and follows the merchant's Modern Skin Colors. Declared last so it
   wins the same-specificity defaults block above.
   ========================================================================= */
.ns-theme-modern {
    --ns-gen-bg-user:        var(--ns-modern-surface-user, #ffffff);
    --ns-gen-surface-user:   var(--ns-modern-surface-alt-user, #f4f3f0);
    --ns-gen-ink-user:       var(--ns-modern-ink-user, #1a1a18);
    --ns-gen-ink-soft-user:  var(--ns-modern-text-secondary-user, #7a7a72);
    --ns-gen-line-user:      var(--ns-modern-border-user, #e8e6e1);
    --ns-gen-accent-user:    var(--ns-modern-primary-user, #2d4a3e);
    --ns-gen-on-ink-user:    #ffffff;
    --ns-gen-track-user:     #f0eeea;
    --ns-gen-active-user:    color-mix(in srgb, var(--ns-modern-primary-user, #2d4a3e) 75%, #ffffff);
    --ns-gen-focus-user:     var(--ns-modern-primary-user, #2d4a3e);
    --ns-gen-btn-solid-bg-user:       var(--ns-modern-primary-user, #2d4a3e);
    --ns-gen-btn-solid-hover-bg-user: color-mix(in srgb, var(--ns-modern-primary-user, #2d4a3e) 89%, #ffffff);
    --ns-gen-card-hover-border-user:  var(--ns-modern-primary-user, #2d4a3e);
    --ns-gen-font-display-user: 'Fraunces', Georgia, 'Times New Roman', serif;
    --ns-gen-font-body-user:    'Syne', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
    --ns-gen-radius-user:    8px;
    --ns-gen-radius-lg-user: 14px;
}

/* ── MODERN EDITORIAL LAYER (see settings-loop.css) ─────────────────────── */
.ns-theme-modern .ns-rbl--modern .ns-rbl-card { border-radius: 14px; overflow: hidden; transition: border-color 180ms ease, box-shadow 400ms cubic-bezier(0.16, 1, 0.3, 1); }
.ns-theme-modern .ns-rbl--modern .ns-rbl-card:hover { box-shadow: 0 12px 32px rgba(26, 26, 24, 0.08); }
.ns-theme-modern .ns-rbl--modern .ns-rbl-card__media { border-radius: 14px 14px 0 0; }
.ns-theme-modern .ns-rbl--modern .ns-rbl-card__img { transition: transform 700ms cubic-bezier(0.16, 1, 0.3, 1); }
.ns-theme-modern .ns-rbl--modern .ns-rbl-card:hover .ns-rbl-card__img { transform: scale(1.05); }
.ns-theme-modern .ns-rbl--modern .ns-rbl-card__title { font-family: 'Fraunces', Georgia, 'Times New Roman', serif; font-size: 19px; font-weight: 400; line-height: 1.15; }
.ns-theme-modern .ns-rbl--modern .ns-rbl-card__price { font-family: 'IBM Plex Mono', 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; color: var(--ns-gen-accent); }
.ns-theme-modern .ns-rbl--modern .ns-rbl-card__badge { font-family: 'Syne', system-ui, -apple-system, 'Segoe UI', sans-serif; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; border-radius: 4px; }