@import url('/shared/variables.css');
@import url('/shared/utilities.css');
@import url('/shared/links.css');
@import url('/shared/buttons.css');

a:focus-visible,
	button:focus-visible,
	[role="menuitem"]:focus-visible {
	  outline: 2px solid var(--gold);
	  outline-offset: 2px;
	  border-radius: 6px;
	}
  
	  /* dostępny dla czytników ekranu, niewidoczny wizualnie */
	.sr-only{
	  position:absolute!important; width:1px; height:1px; padding:0; margin:-1px;
	  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
	}
	/* logo SVG responsywne i wyśrodkowane */
	.hero-logo{
	  display:block; margin:0 auto 8px auto;
	  max-width:min(100%, 900px); height:auto;
	}

    :root{
      --bg:#000; --text:#fff; --muted:#e0e0e0;
      --gold:#ffcc00; --gold-hover:#ffdb4d; --radius:10px;
    }
    html{box-sizing:border-box}
    *,*::before,*::after{box-sizing:inherit}
    body{
      margin:0;
      background:radial-gradient(60% 40% at 50% -10%, #1d1131 0%, #000 60%);
      color:var(--text);
      font-family:Arial,system-ui,-apple-system,Segoe UI,Roboto,"Helvetica Neue",Helvetica,sans-serif;
      line-height:1.6;
	  animation: aura 20s ease-in-out infinite alternate;
	  padding-bottom: 100px;
    }

    /* Jednolita złota ramka z ornamentami */
    .mystic-ornate{
      position:relative;
      margin:20px auto;
      max-width:1100px;
      padding:40px 10px;
      background:rgba(15,10,25,0.9);
      border:3px solid var(--gold);
      border-radius:18px;
      box-shadow:
        0 0 22px rgba(255, 215, 0, .10) inset,
        0 0 18px rgba(0,0,0,.35);
      overflow:hidden;
    }

    .mystic-ornate .orn{
      position:absolute;
      width:clamp(90px, 16vw, 200px);
      height:clamp(90px, 16vw, 200px);
      color:var(--gold);
      opacity:.95;
      filter:drop-shadow(0 0 6px rgba(255,230,128,.35));
      pointer-events:none;
    }
    .mystic-ornate .tl{ top:4px; left:4px; }
    .mystic-ornate .tr{ top:4px; right:4px; transform:scaleX(-1); transform-origin:50% 50%; }
    .mystic-ornate .bl{ bottom:4px; left:4px; transform:scaleY(-1); transform-origin:50% 50%; }
    .mystic-ornate .br{ bottom:4px; right:4px; transform:scale(-1,-1); transform-origin:50% 50%; }

    /* Ornament SVG – definicja symbolu */
    svg#defs {position:absolute; left:-9999px; top:-9999px; width:0; height:0;}

    .skip-link{position:absolute;left:-9999px}
    .skip-link:focus{position:fixed;left:16px;top:16px;padding:8px 12px;background:var(--gold);color:#000;border-radius:6px;z-index:9999}

    .container{max-width:900px;margin:0 auto;padding:0 5px}
    .hero-block{display:flex;align-items:center;justify-content:center;flex-direction:column;min-height:30vh;padding:24px 16px;text-align:center}
    .hero{margin:0 0 8px 0;color:var(--gold);font-size:clamp(38px,8vw,52px);line-height:1.15}
    .hero1{margin:0 0 8px 0;color:var(--gold);font-size:clamp(28px,6vw,40px);line-height:1.2}
    .tagline{margin:0;color:var(--muted);font-size:18px}

    .link-list{list-style:none;padding:0;margin:0}
    .link-list li{margin:2px 0}
    .link-btn{display:inline-block;padding:6px 12px;border-radius:var(--radius);background:rgba(255,255,255,.04);color:var(--gold);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px}
    .link-btn:hover{background:rgba(255,255,255,.08);font-weight:bold}

    .content{max-width:98ch;margin:0 auto}
    .content h2{color:var(--gold);margin-top:1.2em; text-align: center;}
    .content p{margin:0 0 0.9em}
    .content ul{margin:0.8em 0 1em 1.4em}
    .content li{margin:0.3em 0}
    .content a{color:var(--gold);text-decoration:underline;text-underline-offset:2px;text-decoration-thickness:2px}
    .content a:hover{color:var(--gold-hover);font-weight:bold}

    details{transition: max-height 0.3s ease; margin:0.6em 0;padding:0.4em 0.6em;background:rgba(255,255,255,.04);border-radius:var(--radius)}
    summary{cursor:pointer;font-weight:bold}

    .cta-menu {
      position: fixed;
      bottom: 20px;
      right: 20px;
      background: var(--gold);
      color: #000;
      font-weight: bold;
      border-radius: 50px;
      padding: 10px 18px;
      font-size: 16px;
      cursor: pointer;
      z-index: 9999;
      box-shadow: 0 0 10px rgba(255,204,0,0.5);
      animation: pulse 2.2s infinite;
      transition: background 0.3s ease, transform 0.2s ease;
    }
    .cta-menu:hover { background: var(--gold-hover); transform: scale(1.05); }

    .cta-options {
      /* display: none; */
      position: fixed;
      bottom: 70px;
      right: 20px;
      background: rgba(0,0,0,0.9);
      border: 1px solid var(--gold);
      border-radius: var(--radius);
      padding: 10px;
      text-align: center;
      z-index: 9999;
    }
    .cta-options a {
      display: block;
      color: var(--gold);
      text-decoration: none;
      margin: 6px 0;
      font-weight: 600;
    }
    /* cta-options a:hover { color: var(--gold-hover); }  */
	.cta-options[hidden]{display:none;}

	details[open]{
	background: rgba(255,215,0,.06);	
	border: 1px solid rgba(255,215,0,.15);
	box-shadow: 0 0 8px rgba(255,215,0,.2);
	}
	
	details[open] summary{ color: var(--gold-hover); }

	
    
      70% { box-shadow: 0 0 0 10px rgba(255,204,0,0); }
      100% { box-shadow: 0 0 0 0 rgba(255,204,0,0); }
    }
	
	@keyframes aura {
	  0% { background: radial-gradient(60% 40% at 50% -10%, #1d1131 0%, #000 60%); }
	  100% { background: radial-gradient(60% 40% at 50% -10%, #251442 0%, #000 70%); }
	}

	@media (prefers-reduced-motion: reduce){
	  .cta-menu { animation: none !important; transition: none !important; }
	  body { animation: none !important; } /* wyłącz także aurę */
	}

	@media (max-width: 380px){
	  body { padding-bottom: 120px; }
	}
	
	/* przycisk ustawień cookies – jak Koszyk */
	.cookie-btn{
	  background: var(--gold);;
	  color: #000;
	  border: 0;
	  border-radius: 10px;
	  padding: 2px 12px;
	  cursor: pointer;
	  font-weight: 700;
	  box-shadow: 0 4px 12px rgba(212,175,55,.35);
	}
	.cookie-btn:hover{ background: var(--accent-light); }
	.cookie-btn:active{ filter: brightness(1.06); }
	
	
	.shop-btn {
	  position: fixed;
	  top: 20px;
	  right: 20px;
	  background: var(--gold);
	  color: 000 !important;
	  font-weight: 700;
	  padding: 10px 18px;
	  border-radius: 50px;
	  font-size: 16px;
	  text-decoration: none;
	  box-shadow: 0 0 10px rgba(255,204,0,0.5);
	  z-index: 9999;
	  transition: background 0.3s ease, transform 0.2s ease;
	}
	.shop-btn:hover {
	  background: var(--gold-hover);
	  transform: scale(1.05);
	}
	@media (max-width:480px){
	  .shop-btn{font-size:14px;padding:8px 14px;}
	}

/* === STOPKA RODO === */
    footer.site {
      margin-top: 24px;
      padding: 16px;
      background: #0e0d16;
      border-top: 1px solid var(--border);
      color: var(--muted);
      font-size: 12px;
    }
    footer.site a { color: var(--accent); text-decoration: none; }
    footer.site a:hover { text-decoration: underline; }
	
	/* Globalne linki w stylu Magicznej Chaty */
a,
a:link,
a:visited,
a:active {
  color: #d4af37 !important;
  text-decoration: none !important;
  transition: color 0.25s ease;
}

a:hover,
a:focus {
  color: #f6d14a !important;
  text-decoration: none !important;
}

a:focus-visible {
  outline: 2px solid #f6d14a !important;
  outline-offset: 2px;
  border-radius: 4px;
}

/* === GŁÓWNY PRZYCISK (Sklep / Umów się) === */
a.magic-btn,
button.magic-btn {
  -webkit-appearance: none;
  appearance: none;
  position: fixed;
  right: 20px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  line-height: 1;

  background: var(--gold);
  color: #000 !important;
  font: 700 16px/1 inherit;
  padding: 10px 18px;
  border: 0;
  border-radius: 50px;
  text-decoration: none !important;
  cursor: pointer;
  box-shadow: 0 0 10px rgba(255,204,0,0.5);
  transition: background .3s ease, transform .2s ease, box-shadow .3s ease;
  z-index: 9999;
  animation: pulse 2.2s infinite;
}

/* Pozycje */
.magic-btn.top { top: 20px; }
.magic-btn.bottom { bottom: 20px; }

/* Hover i klik */
a.magic-btn:hover, a.magic-btn:focus,
button.magic-btn:hover, button.magic-btn:focus {
  background: var(--gold-hover);
  color: #000 !important;
  transform: scale(1.05);
}
a.magic-btn:active, button.magic-btn:active {
  transform: scale(0.97);
  filter: brightness(1.05);
}

/* Animacja pulsowania */

  70% { box-shadow: 0 0 0 10px rgba(255,204,0,0); }
  100% { box-shadow: 0 0 0 0 rgba(255,204,0,0); }
}

/* === CTA-OPTIONS (MENU KONTAKTOWE) === */
.cta-options {
  position: fixed;
  bottom: 70px;       /* tuż nad przyciskiem */
  right: 20px;
  background: rgba(0,0,0,0.9);
  border: 1px solid var(--gold);
  border-radius: var(--radius);
  padding: 10px;
  text-align: center;
  z-index: 9998;
  box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}

.cta-options[hidden] { display: none; }

.cta-options a {
  display: block;
  color: var(--gold) !important;
  text-decoration: none;
  margin: 6px 0;
  font-weight: 600;
  transition: color .2s ease, transform .12s ease;
}

.cta-options a:hover,
.cta-options a:focus {
  color: var(--gold-hover) !important;
  transform: translateY(-1px);
}

/* Responsywność */
@media (max-width:480px){
  a.magic-btn, button.magic-btn {
    font-size:14px;
    padding:8px 14px;
  }
}

.seo-keywords {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden
}