/**
 * olex-frontend.css – Style frontendu: PDP + listing chips + kolory
 * Version: 1.4.0 – modern UI trends: glassmorphism, gradients, hover effects, circular icons
 */

:root {
    --olex-acc:    #D76136;
    --olex-acc-bg: rgba(215,97,54,.08);
    --olex-card:   #fff;
    --olex-border: #f0ece8;
    --olex-text:   #3a3a3a;
    --olex-muted:  #888;
    --olex-r:      10px;
    --olex-icon:   22px;
}

/* ── UKRYJ LEGACY SHORT-DESCRIPTION NA PDP ───────────────────── */
/*
 * post_excerpt w bazie może zawierać stary HTML (klasy v2.0.0).
 * PHP hooki render_logistics() i render_specs() renderują to samo
 * ze świeżymi klasami BEM. Excerpt jest ukryty wizualnie na PDP,
 * ale zostaje w bazie dla SEO (meta description, schema).
 */
.single-product .woocommerce-product-details__short-description {
    display: none !important;
}

/* ── BADGE (nad obrazkiem, PDP + listing) ────────────────────── */
.olex-badge {
    display: inline-block; padding: 4px 12px;
    font-size: 11px; font-weight: 700; letter-spacing: 1px;
    text-transform: uppercase; border-radius: 4px;
    margin-bottom: 10px; line-height: 1.4;
}
.olex-badge--brutalist-season  { background:rgba(245,185,171,.40); border:2px solid #e8a898; color:#D76136; }
.olex-badge--brutalist-special { background:rgba(78,125,138,.15);  border:2px solid #4e7d8a; color:#4e7d8a; }
.olex-badge--pastel-lavender   { background:rgba(196,181,253,.30); border:2px solid #a78bfa; color:#6d28d9; }
.olex-badge--pastel-mint       { background:rgba(167,243,208,.30); border:2px solid #6ee7b7; color:#059669; }
.olex-badge--pastel-sun        { background:rgba(253,230,138,.30); border:2px solid #fcd34d; color:#d97706; }
.olex-badge--pastel-sky        { background:rgba(147,210,255,.30); border:2px solid #7dd3fc; color:#0369a1; }

/* ── CHIPS (listing – po tytule) ─────────────────────────────── */
.olex-chips { display:flex; flex-wrap:wrap; gap:6px; padding:10px 0 6px; }

.olex-chip {
    display:inline-flex; align-items:center; gap:5px;
    padding:4px 11px 4px 8px;
    background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(248,245,242,.9) 100%);
    border:1px solid #e8e4e0;
    border-radius:24px;
    font-size:11.5px; font-weight:600; color:#4a4640;
    line-height:1.35; white-space:nowrap;
    box-shadow:0 1px 3px rgba(0,0,0,.05), 0 0 0 1px rgba(255,255,255,.5);
    backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
    transition:all .25s cubic-bezier(.4,0,.2,1);
}
.olex-chip:hover {
    transform:translateY(-1px);
    background:linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(252,249,246,.95) 100%);
    border-color:#d4cfc9;
    box-shadow:0 3px 10px rgba(0,0,0,.08);
}

.olex-chip__icon { display:flex; align-items:center; flex-shrink:0; }
.olex-chip__icon svg {
    width:13px; height:13px;
    stroke:currentColor; opacity:.7;
    transition:transform .25s ease;
}
.olex-chip:hover .olex-chip__icon svg { transform:scale(1.1); opacity:.9; }
.olex-chip__value { line-height:1; }

.olex-chip--badge           { font-size:10.5px; letter-spacing:.4px; text-transform:uppercase; font-weight:700; }
.olex-chip--brutalist-season  { background:linear-gradient(135deg, rgba(245,185,171,.45) 0%, rgba(245,185,171,.3) 100%); border-color:#e8a898; color:#C05030; }
.olex-chip--brutalist-special { background:linear-gradient(135deg, rgba(78,125,138,.18) 0%, rgba(78,125,138,.1) 100%);  border-color:#4e7d8a; color:#3d6370; }
.olex-chip--pastel-lavender   { background:linear-gradient(135deg, rgba(196,181,253,.35) 0%, rgba(196,181,253,.22) 100%); border-color:#a78bfa; color:#5b21b6; }
.olex-chip--pastel-mint       { background:linear-gradient(135deg, rgba(167,243,208,.35) 0%, rgba(167,243,208,.22) 100%); border-color:#6ee7b7; color:#047857; }
.olex-chip--pastel-sun        { background:linear-gradient(135deg, rgba(253,230,138,.35) 0%, rgba(253,230,138,.22) 100%); border-color:#fcd34d; color:#b45309; }
.olex-chip--pastel-sky        { background:linear-gradient(135deg, rgba(147,210,255,.35) 0%, rgba(147,210,255,.22) 100%); border-color:#7dd3fc; color:#0369a1; }

/* ── PALLET – logistyka ──────────────────────────────────────── */
.olex-pallet { margin:16px 0; }
.olex-pallet__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; }
.olex-pallet__item {
    display:flex; align-items:center; gap:14px;
    background:linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(248,245,242,.9) 100%);
    border:1px solid var(--olex-border);
    border-left:3px solid var(--olex-acc);
    border-radius:12px; padding:14px 20px;
    box-shadow:0 2px 8px rgba(0,0,0,.05), 0 0 0 1px rgba(215,97,54,.02);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    transition:all .25s cubic-bezier(.4,0,.2,1);
}
.olex-pallet__item:hover {
    transform:translateX(4px);
    box-shadow:0 4px 16px rgba(215,97,54,.08), 0 0 0 1px rgba(215,97,54,.06);
    border-left-color:#D76136;
}
.olex-pallet__item img,
.olex-pallet__item svg {
    width:24px; height:24px; flex-shrink:0;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.1));
    transition:transform .25s ease;
}
.olex-pallet__item:hover svg { transform:scale(1.1); }
.olex-pallet__number {
    font-size:20px; font-weight:800; color:var(--olex-acc);
    min-width:32px; line-height:1;
    text-shadow:0 1px 2px rgba(215,97,54,.1);
}
.olex-pallet__label {
    font-size:12.5px; font-weight:600; color:var(--olex-muted);
    letter-spacing:.6px; text-transform:uppercase; line-height:1.1;
}

/* ── SPECS – dane techniczne ─────────────────────────────────── */
.olex-specs {
    margin:16px 0;
    background:linear-gradient(135deg, rgba(255,255,255,.92) 0%, rgba(249,246,244,.88) 100%);
    border:1px solid var(--olex-border);
    border-radius:16px;
    padding:20px 22px;
    box-shadow:0 2px 12px rgba(0,0,0,.06), 0 0 0 1px rgba(215,97,54,.03);
    backdrop-filter:blur(10px); -webkit-backdrop-filter:blur(10px);
}
.olex-specs__title {
    font-size:13px; font-weight:800; color:var(--olex-acc);
    text-transform:uppercase; letter-spacing:.9px;
    margin:0 0 16px; padding-bottom:12px;
    border-bottom:2px solid linear-gradient(90deg, var(--olex-acc) 0%, transparent 100%);
    position:relative;
}
.olex-specs__title::after {
    content:''; position:absolute; bottom:-2px; left:0;
    width:40px; height:2px; background:var(--olex-acc);
    border-radius:2px;
}
.olex-specs__list { list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:12px; }
.olex-specs__item {
    display:flex; align-items:center; gap:14px;
    padding:8px 10px; border-radius:10px;
    transition:background .2s ease;
}
.olex-specs__item:hover {
    background:rgba(215,97,54,.04);
}
.olex-specs__icon {
    display:flex; align-items:center; justify-content:center;
    width:44px; height:44px;
    background:linear-gradient(135deg, var(--olex-acc-bg) 0%, rgba(215,97,54,.12) 100%);
    border:2px solid rgba(215,97,54,.15);
    border-radius:50%; flex-shrink:0;
    box-shadow:0 2px 8px rgba(215,97,54,.1), inset 0 1px 1px rgba(255,255,255,.5);
    transition:all .25s cubic-bezier(.4,0,.2,1);
    position:relative; overflow:hidden;
}
.olex-specs__item:hover .olex-specs__icon {
    transform:scale(1.08) rotate(3deg);
    border-color:rgba(215,97,54,.25);
    box-shadow:0 4px 16px rgba(215,97,54,.18), inset 0 1px 2px rgba(255,255,255,.7);
}
.olex-specs__icon::before {
    content:''; position:absolute; top:-50%; left:-50%;
    width:200%; height:200%;
    background:linear-gradient(45deg, transparent 40%, rgba(255,255,255,.3) 50%, transparent 60%);
    animation:olex-icon-shine 3s ease-in-out infinite;
    opacity:0; transition:opacity .3s;
}
.olex-specs__item:hover .olex-specs__icon::before { opacity:1; }
@keyframes olex-icon-shine {
    0% { transform:translateX(-100%) translateY(-100%) rotate(45deg); }
    100% { transform:translateX(100%) translateY(100%) rotate(45deg); }
}
.olex-specs__icon img,
.olex-specs__icon svg {
    width:22px; height:22px;
    stroke:var(--olex-acc);
    stroke-width:2;
    filter:drop-shadow(0 1px 2px rgba(215,97,54,.2));
}
.olex-specs__label {
    flex:1; font-size:14px; color:var(--olex-text);
    font-weight:600; letter-spacing:.1px;
}
.olex-specs__value {
    font-size:16px; font-weight:800; color:var(--olex-acc);
    text-shadow:0 1px 2px rgba(215,97,54,.15);
}

/* ── COLORS – koła kolorów ───────────────────────────────────── */
.olex-colors { margin:16px 0; }
.olex-colors__list { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:12px; }
.olex-colors__item { position:relative; }
.olex-colors__dot {
    display:block; width:38px; height:38px; border-radius:50%;
    border:3px solid rgba(255,255,255,.9);
    cursor:help;
    box-shadow:0 3px 10px rgba(0,0,0,.12), inset 0 2px 4px rgba(255,255,255,.4);
    transition:all .3s cubic-bezier(.4,0,.2,1);
    position:relative;
    z-index:1;
}
.olex-colors__dot::before {
    content:''; position:absolute; inset:-3px;
    border-radius:50%;
    background:linear-gradient(135deg, var(--olex-acc), #ff8c69);
    z-index:-1; opacity:0; transition:opacity .3s;
}
.olex-colors__dot:hover {
    transform:scale(1.15) rotate(5deg);
    box-shadow:0 6px 20px rgba(215,97,54,.2), 0 0 0 4px rgba(215,97,54,.1);
}
.olex-colors__dot:hover::before { opacity:1; }

/* ── RESPONSIVE ──────────────────────────────────────────────── */
@media (max-width:600px) {
    .olex-pallet__item { flex-wrap:wrap; }
    .olex-specs        { padding:14px; }
    .olex-chips        { gap:4px; }
    .olex-chip         { font-size:11px; padding:3px 7px 3px 6px; }
}

@media (prefers-reduced-motion:reduce) {
    .olex-colors__dot { transition:none; }
    .olex-colors__dot:hover { transform:none; }
}