/* === INSPIRATOR KOSMETYCZNY - Global Styles === */

*, html { scroll-behavior: smooth; }
body { font-family: 'Montserrat', sans-serif; background-color: #0f0f0f; color: #d1d5db; }
h1, h2, h3, .playfair { font-family: 'Playfair Display', serif; }

/* === Colors === */
.gold { color: #d4af37; }
.gold-gradient {
    background: linear-gradient(to right, #d4af37, #f1d592, #d4af37);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.section-divider { width: 56px; height: 1px; background: linear-gradient(to right, transparent, #d4af37, transparent); margin: 0 auto; }

/* === Cards === */
.card { background: #1a1a1a; border: 1px solid rgba(212,175,55,.15); transition: border-color .3s, background .3s; }
.card:hover { border-color: rgba(212,175,55,.4); background: #1e1e1e; }
.card-highlight { background: #161008; border: 1px solid rgba(212,175,55,.35); }
.card-highlight:hover { border-color: rgba(212,175,55,.6); }

/* === Buttons === */
.btn-gold { background: linear-gradient(135deg,#c9a227,#f1d592,#c9a227); color: #0f0f0f; font-weight: 600; letter-spacing: .05em; transition: opacity .2s, transform .2s, box-shadow .2s; display: inline-block; text-align: center; }
.btn-gold:hover { opacity: .92; transform: translateY(-1px); box-shadow: 0 8px 28px rgba(212,175,55,.25); }
.btn-outline { border: 1px solid rgba(212,175,55,.3); transition: border-color .2s, color .2s; display: inline-block; text-align: center; }
.btn-outline:hover { border-color: rgba(212,175,55,.7); color: #fff; }

/* === Nav === */
nav { backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
.nav-link { transition: color .2s; color: #9ca3af; }
.nav-link:hover, .nav-link.active { color: #d4af37; }

/* === Accordion === */
.acc-content { max-height: 0; overflow: hidden; transition: max-height .45s ease; }
.acc-content.open { max-height: 5000px; }
.acc-icon { transition: transform .3s; display: inline-block; }
.acc-icon.open { transform: rotate(45deg); }

/* === Price rows === */
.pr { display: flex; justify-content: space-between; align-items: baseline; font-size: .8rem; color: #9ca3af; padding: .4rem 0; border-bottom: 1px solid rgba(212,175,55,.06); }
.pr:last-child { border-bottom: none; }
.pr .price { color: #d4af37; white-space: nowrap; margin-left: 1rem; font-size: .85rem; }
.pr-section { font-size: .65rem; text-transform: uppercase; letter-spacing: .15em; color: #d4af37; margin-top: 1.2rem; margin-bottom: .5rem; }

/* === Decorative === */
.logo-img { filter: drop-shadow(0 0 14px rgba(212,175,55,.3)); }
.tag { border: 1px solid rgba(212,175,55,.25); border-radius: 9999px; padding: .25rem .85rem; font-size: .7rem; color: #9ca3af; }
.rating-badge { background: rgba(212,175,55,.1); border: 1px solid rgba(212,175,55,.3); border-radius: 9999px; padding: .3rem 1rem; font-size: .75rem; display: inline-flex; align-items: center; gap: .4rem; }
.apollo-bg { background: radial-gradient(ellipse at center, rgba(212,175,55,.04) 0%, transparent 70%); }
.map-wrap iframe { filter: grayscale(90%) brightness(.7) sepia(20%); }

/* === Animations === */
@keyframes bounce { 0%,100%{transform:translateY(0)}50%{transform:translateY(6px)} }
.bounce { animation: bounce 2s infinite; }

/* === Breadcrumb === */
.breadcrumb { display: flex; align-items: center; gap: .5rem; font-size: .72rem; color: #6b7280; flex-wrap: wrap; }
.breadcrumb a { color: #6b7280; transition: color .2s; }
.breadcrumb a:hover { color: #d4af37; }
.breadcrumb span { color: #d4af37; }

/* === Article Prose === */
.prose { max-width: 720px; margin: 0 auto; }
.prose h2 { font-family: 'Playfair Display', serif; font-size: 1.5rem; color: #fff; margin-top: 2.5rem; margin-bottom: 1rem; padding-bottom: .5rem; border-bottom: 1px solid rgba(212,175,55,.15); }
.prose h3 { font-family: 'Playfair Display', serif; font-size: 1.1rem; color: #d4af37; margin-top: 1.5rem; margin-bottom: .6rem; }
.prose p { line-height: 1.85; margin-bottom: 1.1rem; color: #9ca3af; font-size: .9rem; }
.prose strong { color: #e5e7eb; font-weight: 600; }
.prose ul { list-style: none; padding: 0; margin-bottom: 1.2rem; }
.prose ul li { padding: .35rem 0 .35rem 1.4rem; position: relative; font-size: .88rem; color: #9ca3af; line-height: 1.7; border-bottom: 1px solid rgba(212,175,55,.05); }
.prose ul li:before { content: '·'; color: #d4af37; position: absolute; left: 0; font-size: 1.4rem; line-height: 1.2; }
.prose ol { counter-reset: ol-counter; list-style: none; padding: 0; margin-bottom: 1.2rem; }
.prose ol li { counter-increment: ol-counter; padding: .5rem 0 .5rem 2rem; position: relative; font-size: .88rem; color: #9ca3af; line-height: 1.7; }
.prose ol li:before { content: counter(ol-counter); color: #0f0f0f; background: #d4af37; width: 1.3rem; height: 1.3rem; border-radius: 50%; position: absolute; left: 0; top: .55rem; display: flex; align-items: center; justify-content: center; font-size: .65rem; font-weight: 700; }
.prose .intro-lead { font-size: 1.05rem; color: #c4c4c4; line-height: 1.9; }
.prose .highlight-box { background: #161008; border: 1px solid rgba(212,175,55,.25); border-radius: 1rem; padding: 1.5rem; margin: 2rem 0; }
.prose .highlight-box p { margin-bottom: 0; }

/* === FAQ === */
.faq-item { border-bottom: 1px solid rgba(212,175,55,.1); }
.faq-q { font-size: .9rem; font-weight: 600; color: #e5e7eb; cursor: pointer; padding: 1.1rem 0; display: flex; justify-content: space-between; align-items: center; gap: 1rem; }
.faq-q:hover { color: #d4af37; }
.faq-icon { color: #d4af37; font-size: 1.4rem; font-weight: 300; flex-shrink: 0; transition: transform .3s; }
.faq-icon.open { transform: rotate(45deg); }
.faq-a { max-height: 0; overflow: hidden; transition: max-height .4s ease; }
.faq-a.open { max-height: 500px; }
.faq-a p { padding-bottom: 1rem; font-size: .85rem; color: #9ca3af; line-height: 1.8; margin: 0; }

/* === Blog card === */
.blog-card { background: #1a1a1a; border: 1px solid rgba(212,175,55,.12); border-radius: 1rem; overflow: hidden; transition: border-color .3s; }
.blog-card:hover { border-color: rgba(212,175,55,.4); }
.blog-tag { font-size: .65rem; text-transform: uppercase; letter-spacing: .15em; color: #d4af37; }

/* === Article header === */
.article-hero { padding: 7rem 1.5rem 4rem; text-align: center; border-bottom: 1px solid rgba(212,175,55,.1); }
.article-meta { font-size: .75rem; color: #6b7280; display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; }

/* === Service page hero === */
.service-hero { min-height: 60vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 6rem 1.5rem 4rem; text-align: center; }

/* === Light mode toggle button === */
#theme-toggle { background: none; border: 1px solid rgba(212,175,55,.35); border-radius: 9999px; padding: .28rem .7rem; font-size: .75rem; cursor: pointer; color: #9ca3af; transition: border-color .2s, color .2s; line-height: 1; }
#theme-toggle:hover { border-color: rgba(212,175,55,.7); color: #d4af37; }

/* === LIGHT MODE === */
body.light { background-color: #faf9f7; color: #2d2d2d; }
body.light h1, body.light h2, body.light h3 { color: #1a1a1a; }

/* Nav */
body.light nav { background: rgba(255,253,248,.92) !important; border-color: rgba(180,145,30,.2) !important; }
body.light .nav-link { color: #555; }
body.light .nav-link:hover, body.light .nav-link.active { color: #b8942a; }

/* Cards */
body.light .card { background: #fff; border-color: rgba(180,145,30,.2); }
body.light .card:hover { background: #fffdf5; border-color: rgba(180,145,30,.45); }
body.light .card-highlight { background: #fffbef; border-color: rgba(180,145,30,.4); }
body.light .card-highlight:hover { border-color: rgba(180,145,30,.65); }

/* Blog cards */
body.light .blog-card { background: #fff; border-color: rgba(180,145,30,.18); }
body.light .blog-card:hover { border-color: rgba(180,145,30,.45); }

/* Text colors */
body.light .text-gray-400 { color: #666 !important; }
body.light .text-gray-300 { color: #444 !important; }
body.light .text-gray-500 { color: #777 !important; }
body.light .text-white { color: #1a1a1a !important; }

/* Backgrounds */
body.light .bg-\[#0f0f0f\] { background-color: #faf9f7 !important; }
body.light .bg-\[#0a0a0a\] { background-color: #faf9f7 !important; }
body.light .bg-\[#111111\] { background-color: #f5f4f0 !important; }
body.light .bg-\[#1a1a1a\] { background-color: #fff !important; }
body.light .bg-\[#161008\] { background-color: #fffbef !important; }
body.light [class*="bg-black"] { background-color: #f0efe9 !important; }
body.light [class*="bg-\[#0"] { background-color: #f5f4f0 !important; }

/* Borders */
body.light [class*="border-\[#d4af37\]"] { border-color: rgba(180,145,30,.25) !important; }

/* Price rows */
body.light .pr { color: #555; border-color: rgba(180,145,30,.12); }
body.light .pr-section { color: #b8942a; }
body.light .tag { border-color: rgba(180,145,30,.3); color: #666; }
body.light .rating-badge { background: rgba(180,145,30,.1); border-color: rgba(180,145,30,.3); }

/* Apollo background glow */
body.light .apollo-bg { background: radial-gradient(ellipse at center, rgba(212,175,55,.07) 0%, transparent 70%); }

/* Map */
body.light .map-wrap iframe { filter: grayscale(20%) brightness(1) sepia(5%); }

/* Breadcrumb */
body.light .breadcrumb, body.light .breadcrumb a { color: #888; }
body.light .breadcrumb span { color: #b8942a; }

/* Prose */
body.light .prose h2 { color: #1a1a1a; border-color: rgba(180,145,30,.2); }
body.light .prose h3 { color: #b8942a; }
body.light .prose p, body.light .prose ul li, body.light .prose ol li { color: #444; }
body.light .prose strong { color: #1a1a1a; }
body.light .prose .intro-lead { color: #333; }
body.light .prose .highlight-box { background: #fffbef; border-color: rgba(180,145,30,.3); }
body.light .prose .highlight-box p { color: #444; }

/* FAQ */
body.light .faq-item { border-color: rgba(180,145,30,.15); }
body.light .faq-q { color: #1a1a1a; }
body.light .faq-q:hover { color: #b8942a; }
body.light .faq-a p { color: #555; }

/* Article */
body.light .article-meta { color: #888; }
body.light .article-hero { border-color: rgba(180,145,30,.15); }

/* Section divider */
body.light .section-divider { background: linear-gradient(to right, transparent, #b8942a, transparent); }

/* Toggle button in light mode */
body.light #theme-toggle { border-color: rgba(180,145,30,.4); color: #666; }
body.light #theme-toggle:hover { border-color: #b8942a; color: #b8942a; }