/* [af_credit_packages] — "dizajnios", same tokens as afc-frontend.css.
   Spec: iOS/Apple style, white rounded cards, mono numbers, red only for
   the button — deliberately NOT the default WooCommerce shop grid.
   Round 2 (Sergio, 2026-08-31): "10x better", more iOS/glass/glow/shadow,
   and mobile-first — 99% of visitors are on a phone, so the base (no
   media query) rules below ARE the phone design; the grid layout is the
   enhancement added back in at wider widths, not the other way around. */

/* Colors point at autofliper-dark's shared --af-* tokens (Sloj 1,
   2026-09-20) — see afc-frontend.css's :root block for the full
   rationale. Same exceptions here: --afc-gold-1/2 stay fixed. */
#afc-packages {
    --afc-accent: var(--af-accent) !important;
    --afc-accent-hover: color-mix(in srgb, var(--af-accent) 82%, black) !important;
    --afc-ink: var(--af-ink) !important;
    --afc-ink2: var(--af-ink-2) !important;
    --afc-bg: var(--af-surface-2) !important;
    --afc-white: var(--af-surface) !important;
    --afc-line: var(--af-line) !important;
    --afc-red-bg: color-mix(in srgb, var(--af-danger) 12%, var(--af-surface)) !important;
    --afc-gold-1: #f0dba8 !important;
    --afc-gold-2: #c79a4f !important;
    --afc-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace !important;
    --afc-display: 'Sora', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
    --afc-font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
    --afc-sh: 0 1px 3px rgba(20,16,18,.05), 0 8px 24px rgba(20,16,18,.06) !important;
    font-family: var(--afc-font) !important;
    max-width: 900px !important; margin: 0 auto !important;
    padding: 16px 16px max(24px, env(safe-area-inset-bottom)) !important; box-sizing: border-box !important;
    background:
        radial-gradient(600px 300px at 50% -80px, color-mix(in srgb, var(--afc-accent) 6%, transparent), transparent) !important;
}
#afc-packages * { box-sizing: border-box !important; }
html.af-dark #afc-packages {
    --afc-sh: 0 1px 3px rgba(0,0,0,.25), 0 8px 24px rgba(0,0,0,.35) !important;
}
@media (prefers-reduced-motion: reduce) { #afc-packages * { animation: none !important; transition: none !important; } }

/* ─── hero ─── */
.afc-pk-hero { text-align: center !important; padding: 8px 8px 22px !important; }
.afc-pk-title { font-family: var(--afc-display) !important; font-size: 24px !important; font-weight: 800 !important; color: var(--afc-ink) !important; margin: 0 0 6px !important; }
.afc-pk-subtitle { font-size: 13px !important; color: var(--afc-ink2) !important; margin: 0 0 14px !important; line-height: 1.5 !important; }
.afc-pk-balance {
    display: inline-flex !important; align-items: center !important; gap: 7px !important;
    background: color-mix(in srgb, var(--afc-white) 75%, transparent) !important;
    backdrop-filter: saturate(180%) blur(16px) !important; -webkit-backdrop-filter: saturate(180%) blur(16px) !important;
    border: 1px solid var(--afc-line) !important; border-radius: 999px !important;
    padding: 8px 16px !important; font-size: 12.5px !important; color: var(--afc-ink2) !important;
    box-shadow: 0 1px 2px rgba(20,16,18,.04), 0 6px 16px rgba(20,16,18,.05) !important;
}
.afc-pk-balance strong { color: var(--afc-accent) !important; font-family: var(--afc-mono) !important; font-size: 14px !important; font-weight: 700 !important; }

.afc-pk-msg { padding: 12px 16px !important; border-radius: 12px !important; font-size: 13px !important; font-weight: 600 !important; margin-bottom: 16px !important; }
.afc-pk-msg-err { background: var(--afc-red-bg) !important; color: var(--afc-accent) !important; }

/* ─── cards: mobile default = horizontal rows (thumb-friendly, scannable
   in one pass down the screen) ─── */
.afc-pk-grid { display: flex !important; flex-direction: column !important; gap: 12px !important; }
.afc-pk-card {
    position: relative !important; overflow: hidden !important;
    background: var(--afc-white) !important; border: 1px solid var(--afc-line) !important; border-radius: 20px !important;
    padding: 16px 18px !important;
    box-shadow: 0 1px 2px rgba(20,16,18,.04), 0 10px 24px rgba(20,16,18,.07) !important;
    display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: space-between !important; gap: 14px !important;
    transition: transform .35s cubic-bezier(.22,1,.36,1), box-shadow .35s cubic-bezier(.22,1,.36,1), border-color .35s ease !important;
}
/* Glossy top sheen — same "physical card" light-catch language as the
   credits balance card. */
.afc-pk-card::before {
    content: "" !important; position: absolute !important; inset: 0 !important; pointer-events: none !important;
    background: linear-gradient(165deg, rgba(255,255,255,.9) 0%, rgba(255,255,255,0) 40%) !important;
    opacity: .6 !important;
}
.afc-pk-card:hover {
    transform: translateY(-3px) !important; border-color: color-mix(in srgb, var(--afc-accent) 30%, var(--afc-line)) !important;
    box-shadow: 0 2px 8px rgba(0,0,0,.05), 0 16px 36px rgba(0,0,0,.09), 0 0 0 1px color-mix(in srgb, var(--afc-accent) 8%, transparent), 0 0 28px color-mix(in srgb, var(--afc-accent) 16%, transparent) !important;
}
.afc-pk-card:active { transform: translateY(0) scale(.985) !important; }

/* Featured tier: gold-edged, same "medallion" language as the credits
   page's featured-listing rows — makes the recommended pick obvious at a
   glance without needing to compare every card. */
.afc-pk-card.afc-pk-featured {
    border-color: var(--afc-gold-2) !important; border-width: 1.5px !important;
    box-shadow: 0 1px 3px rgba(20,16,18,.06), 0 10px 26px rgba(199,154,79,.22), 0 0 0 1px color-mix(in srgb, var(--afc-gold-2) 25%, transparent) !important;
}
/* Mobile (row cards, not much vertical room): a plain pill top-right —
   the diagonal ribbon below is a tablet+-only enhancement once cards are
   tall enough for it to actually fit without clipping mid-word. */
.afc-pk-badge {
    position: absolute !important; top: 10px !important; right: 12px !important; z-index: 2 !important;
    background: linear-gradient(155deg, var(--afc-gold-1), var(--afc-gold-2)) !important; color: #3d2a0a !important;
    font-family: var(--afc-display) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .04em !important;
    text-transform: uppercase !important; padding: 4px 9px !important; border-radius: 999px !important;
    box-shadow: 0 2px 6px rgba(180,140,60,.35) !important; white-space: nowrap !important;
}
.afc-pk-card.afc-pk-featured { padding-top: 30px !important; }

.afc-pk-info { display: flex !important; align-items: baseline !important; gap: 12px !important; position: relative !important; z-index: 1 !important; min-width: 0 !important; }
.afc-pk-credits { font-family: var(--afc-mono) !important; font-size: 26px !important; font-weight: 700 !important; color: var(--afc-ink) !important; line-height: 1 !important; font-variant-numeric: tabular-nums !important; flex-shrink: 0 !important; }
.afc-pk-credits span { display: block !important; font-family: var(--afc-display) !important; font-size: 9.5px !important; font-weight: 600 !important; color: var(--afc-ink2) !important; text-transform: uppercase !important; letter-spacing: .07em !important; margin-top: 2px !important; }
.afc-pk-prices { border-left: 1px solid var(--afc-line) !important; padding-left: 12px !important; }
.afc-pk-price-eur { font-family: var(--afc-mono) !important; font-size: 16px !important; font-weight: 700 !important; color: var(--afc-accent) !important; line-height: 1.2 !important; }
.afc-pk-price-rsd { font-family: var(--afc-mono) !important; font-size: 10.5px !important; font-weight: 500 !important; color: var(--afc-ink2) !important; }

.afc-pk-card form { flex-shrink: 0 !important; margin: 0 !important; position: relative !important; z-index: 1 !important; }
/* Glow is a REST-state property, not just a :hover flourish — a screenshot
   never shows :hover, and this button has to read as "glowing" the instant
   the page paints, on a phone with no cursor at all. Two-layer shadow:
   a tight bright core + a wide soft bloom, like a real light source. */
.afc-pk-btn {
    position: relative !important; z-index: 1 !important; display: flex !important; align-items: center !important; justify-content: center !important;
    min-width: 76px !important; min-height: 46px !important; border: none !important; border-radius: 13px !important;
    background: linear-gradient(155deg, #d64444, var(--afc-accent) 60%) !important; color: var(--af-accent-ink) !important;
    font-family: var(--afc-display) !important; font-size: 13px !important;
    font-weight: 700 !important; cursor: pointer !important; text-decoration: none !important; text-align: center !important; padding: 0 18px !important;
    box-shadow:
        0 1px 2px rgba(0,0,0,.12),
        0 3px 8px color-mix(in srgb, var(--afc-accent) 45%, transparent),
        0 0 22px color-mix(in srgb, var(--afc-accent) 40%, transparent) !important;
    transition: background .2s ease, transform .12s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease !important;
    white-space: nowrap !important;
}
.afc-pk-btn:hover {
    background: linear-gradient(155deg, #e05252, var(--afc-accent-hover) 60%) !important; color: var(--af-accent-ink) !important;
    box-shadow:
        0 2px 4px rgba(0,0,0,.14),
        0 6px 16px color-mix(in srgb, var(--afc-accent) 55%, transparent),
        0 0 34px color-mix(in srgb, var(--afc-accent) 55%, transparent) !important;
    transform: translateY(-1px) !important;
}
.afc-pk-btn:active { transform: scale(.94) !important; box-shadow: 0 1px 4px color-mix(in srgb, var(--afc-accent) 30%, transparent) !important; }

/* Staggered entrance — base state is fully visible (see the credits page's
   own opacity bug fix, 2026-08-30: never gate real content behind an
   animation that might not run); `backwards` fill only pulls in the "from"
   state during the delay, so a skipped/throttled animation just leaves the
   card at its real, visible style instead of stuck hidden. */
.afc-pk-card { opacity: 1; animation: afcPkIn .5s cubic-bezier(.22,1,.36,1) backwards; }
.afc-pk-grid .afc-pk-card:nth-child(1) { animation-delay: .02s; }
.afc-pk-grid .afc-pk-card:nth-child(2) { animation-delay: .05s; }
.afc-pk-grid .afc-pk-card:nth-child(3) { animation-delay: .08s; }
.afc-pk-grid .afc-pk-card:nth-child(4) { animation-delay: .11s; }
.afc-pk-grid .afc-pk-card:nth-child(5) { animation-delay: .14s; }
.afc-pk-grid .afc-pk-card:nth-child(6) { animation-delay: .17s; }
.afc-pk-grid .afc-pk-card:nth-child(7) { animation-delay: .20s; }
.afc-pk-grid .afc-pk-card:nth-child(8) { animation-delay: .23s; }
@keyframes afcPkIn { from { opacity: 0; transform: translateX(-10px) scale(.97); } to { opacity: 1; transform: translateX(0) scale(1); } }

/* ─── tablet+: switch to a grid of vertical cards — more surface per card
   once there's room, still the same visual language ─── */
@media (min-width: 641px) {
    .afc-pk-title { font-size: 28px !important; }
    .afc-pk-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
    .afc-pk-card { flex-direction: column !important; text-align: center !important; padding: 24px 18px !important; gap: 12px !important; }
    .afc-pk-info { flex-direction: column !important; align-items: center !important; justify-content: center !important; gap: 6px !important; }
    .afc-pk-credits, .afc-pk-prices { text-align: center !important; }
    .afc-pk-prices { border-left: none !important; padding-left: 0 !important; }
    .afc-pk-price-eur { font-size: 18px !important; }
    .afc-pk-card form { width: 100% !important; }
    .afc-pk-btn { width: 100% !important; }
    .afc-pk-card.afc-pk-featured { padding-top: 24px !important; }
    .afc-pk-badge {
        top: 14px !important; right: -34px !important; left: auto !important; width: 150px !important;
        transform: rotate(35deg) !important; text-align: center !important; border-radius: 0 !important;
        font-size: 10px !important; padding: 4px 0 !important;
    }
}