/* FeatureCardsEnhanced
   The process cards beside the receipt. Every rule is scoped to .feat--enh, which js/main.js
   adds when featureCardVariant is "enhanced". Size, position, slide-in and flip still come
   from the shared .feat rules in css/styles.css */

/* Support tones: tint (card wash + chip), ink (chip text, art, connector), soft (art fill), halo */
.feat--enh[data-feat-tone="sage"]  { --ft-bg: #E9EDE2; --ft-ink: #2F5A44; --ft-soft: #D6E3D2; --ft-halo: #DCE8D4; }
.feat--enh[data-feat-tone="peach"] { --ft-bg: #FBE3D4; --ft-ink: #A9482A; --ft-soft: #F7D2BD; --ft-halo: #FAD9C6; }
.feat--enh[data-feat-tone="sky"]   { --ft-bg: #DCEAF6; --ft-ink: #2B6494; --ft-soft: #CFE4F2; --ft-halo: #D3E6F5; }
.feat--enh[data-feat-tone="mint"]  { --ft-bg: #DCF0E4; --ft-ink: #1C6E46; --ft-soft: #CFEBDC; --ft-halo: #D2EEDD; }
.feat--enh[data-feat-tone="lime"]  { --ft-bg: #EEF7CF; --ft-ink: #4A640A; --ft-soft: #E2F2A8; --ft-halo: #E8F5C0; }
.feat--enh[data-feat-tone="sun"]   { --ft-bg: #FBF0CC; --ft-ink: #7E5B06; --ft-soft: #F6E3A1; --ft-halo: #F8EBB8; }
.feat--enh[data-feat-tone="teal"]  { --ft-bg: #D8EEEC; --ft-ink: #1C625D; --ft-soft: #CBE6E3; --ft-halo: #D0EAE7; }

[data-theme="dark"] .feat--enh[data-feat-tone="sage"]  { --ft-bg: #1A2620; --ft-ink: #A9D2B4; --ft-soft: #23342A; --ft-halo: #16241C; }
[data-theme="dark"] .feat--enh[data-feat-tone="peach"] { --ft-bg: #2E2019; --ft-ink: #F1B897; --ft-soft: #3A2619; --ft-halo: #2A1C14; }
[data-theme="dark"] .feat--enh[data-feat-tone="sky"]   { --ft-bg: #172433; --ft-ink: #9CCBEA; --ft-soft: #1E3247; --ft-halo: #142131; }
[data-theme="dark"] .feat--enh[data-feat-tone="mint"]  { --ft-bg: #13291E; --ft-ink: #8FDDB3; --ft-soft: #1A3828; --ft-halo: #11261B; }
[data-theme="dark"] .feat--enh[data-feat-tone="lime"]  { --ft-bg: #1F2612; --ft-ink: #D8FA56; --ft-soft: #2A3517; --ft-halo: #1B2210; }
[data-theme="dark"] .feat--enh[data-feat-tone="sun"]   { --ft-bg: #2B2512; --ft-ink: #EBCB6B; --ft-soft: #3A3113; --ft-halo: #262010; }
[data-theme="dark"] .feat--enh[data-feat-tone="teal"]  { --ft-bg: #12292A; --ft-ink: #7FCFC6; --ft-soft: #193838; --ft-halo: #102526; }

.feat--enh { isolation: isolate; }

/* Soft halo behind the card */
.feat--enh .fa-halo {
  position: absolute; inset: -64px -56px; z-index: -1; pointer-events: none; border-radius: 50%;
  background: radial-gradient(closest-side, var(--ft-halo) 0%, var(--ft-halo) 45%, transparent 100%);
}

/* Card face */
.feat--enh .front {
  background: var(--surface);
  background: color-mix(in srgb, var(--surface) 80%, var(--ft-bg));
  border: 1px solid color-mix(in srgb, var(--ft-ink) 16%, var(--line));
  border-radius: 22px;
  box-shadow: 0 1px 0 #FFFFFF0F inset, 0 24px 44px -30px var(--shadow);
}
.feat--enh .back { border-radius: 22px; }
.feat--enh .back .k { color: var(--ft-ink); }
[data-theme="dark"] .feat--enh .back .k { color: var(--paper-accent); }

.feat--enh .fa-text {
  position: absolute; left: 24px; top: 22px; bottom: 22px; width: 54%;
  display: flex; flex-direction: column; align-items: flex-start; gap: 8px; color: var(--ink);
}
.feat--enh .fa-num {
  padding: 5px 11px; border-radius: 10px; background: var(--ft-bg); color: var(--ft-ink);
  font-family: var(--font-display); font-weight: var(--w-strong); font-size: 15px; font-variant-numeric: tabular-nums;
}
.feat--enh .fa-title { font-family: var(--font-display); font-weight: var(--w-head); font-size: 24px; line-height: 1.08; letter-spacing: -0.025em; }
.feat--enh .fa-line-text { font-family: var(--font-text); font-size: 14px; line-height: 1.45; color: var(--muted); }
.feat--enh .fa-more { position: absolute; right: 14px; bottom: 12px; width: 15px; height: 15px; color: var(--muted); opacity: 0.6; }
.feat--enh .fa-more svg { width: 100%; height: 100%; display: block; }

/* Illustration */
.feat--enh .fa-art { position: absolute; right: 16px; top: 50%; width: 120px; height: 132px; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; }
.feat--enh .fa-art > svg { width: 124px; height: 124px; overflow: visible; }
.feat--enh .fa-soft { fill: var(--ft-soft); }
.feat--enh .fa-fill { fill: var(--ft-ink); opacity: 0.85; }
.feat--enh .fa-dot { fill: var(--surface); }
.feat--enh .fa-ring { fill: var(--surface); stroke: var(--ft-ink); stroke-width: 3; }
.feat--enh .fa-line { fill: none; stroke: var(--ft-ink); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.feat--enh .fa-shield { fill: var(--ft-ink); }
.feat--enh .fa-check { fill: none; stroke: var(--surface); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; }
.feat--enh .fa-glyph { fill: var(--ft-ink); font-family: var(--font-display); font-weight: var(--w-head); font-size: 32px; }
.feat--enh .fa-glyph-sm { font-size: 24px; }

/* Photo-led art: stacked applicants, verified creator */
.feat--enh .fa-stack { position: relative; width: 120px; height: 132px; }
.feat--enh .front .fa-photo {
  position: absolute; right: 0; top: 8px; width: 80px; height: 104px; object-fit: cover; border-radius: 12px;
  border: 3px solid var(--surface); box-shadow: 0 12px 24px -12px var(--shadow); transform: rotate(6deg);
}
.feat--enh .front .fa-photo-solo { right: 6px; width: 92px; height: 118px; top: 4px; transform: rotate(5deg); }
.feat--enh .fa-ghost {
  position: absolute; width: 58px; height: 74px; border-radius: 10px; background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--ft-ink) 18%, var(--line));
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding-top: 10px; box-sizing: border-box;
}
.feat--enh .fa-ghost i { width: 18px; height: 18px; border-radius: 99px; background: var(--ft-soft); }
.feat--enh .fa-ghost b { width: 30px; height: 4px; border-radius: 4px; background: var(--ft-soft); }
.feat--enh .fa-g1 { left: 0; top: 16px; transform: rotate(-10deg); }
.feat--enh .fa-g2 { left: 14px; top: 34px; transform: rotate(-4deg); }
.feat--enh .fa-badge {
  position: absolute; left: 14px; top: 92px; width: 34px; height: 34px; border-radius: 99px;
  background: var(--ft-ink); color: var(--surface); display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 4px var(--ft-bg);
}
.feat--enh .fa-badge svg { width: 20px; height: 20px; }

/* Thin connector to the receipt (desktop only) */
.feat--enh .fa-connector { display: none; }
@media (min-width: 1101px) {
  .feat--enh .fa-connector {
    display: block; position: absolute; top: 50%; width: 56px; height: 64px; margin-top: -32px; overflow: visible; pointer-events: none;
    fill: none; stroke: var(--ft-ink); stroke-width: 1.6; opacity: 0.6;
  }
  .feat--enh .fa-connector circle { fill: var(--ft-ink); stroke: none; }
  .feat--enh.left .fa-connector { right: -52px; }
  .feat--enh.right .fa-connector { left: -52px; transform: scaleX(-1); }
}

@media (max-width: 1100px) {
  .feat--enh .fa-halo { inset: -18px -10px; }
}
@media (max-width: 720px) {
  .feat--enh .fa-title { font-size: 21px; }
  .feat--enh .fa-line-text { font-size: 13px; }
  .feat--enh .fa-art { right: 10px; transform: translateY(-50%) scale(0.88); }
}