/*
Theme Name:   QR4YOU
Theme URI:    https://www.qr4you.net
Author:       PSH — Panzera Software House
Author URI:   https://panzerasoftwarehouse.it
Description:  Tema custom per QR4YOU — bigliettini digitali interattivi con QR code.
Version:      1.0.0
License:      Proprietary
Text Domain:  qr4you
*/

/* ==================================================================
   DESIGN TOKENS — cambia i colori del brand da QUI
   ================================================================== */
:root {
  /* Brand */
  --q-primary:        #ff2e7e;   /* rosa acceso vibrante */
  --q-primary-dark:   #d61b64;
  --q-accent:         #7c3aed;   /* viola */
  --q-ink:            #14060d;   /* quasi nero, caldo */
  --q-paper:          #ffffff;
  --q-soft:           #fff3f8;   /* rosa pallidissimo per sfondi */
  --q-muted:          #8a7580;

  --q-gradient:       linear-gradient(135deg, var(--q-primary) 0%, var(--q-accent) 100%);

  /* Tipografia */
  --q-font-display:   "Fraunces", Georgia, serif;
  --q-font-body:      "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;

  /* Spaziatura e forme */
  --q-radius:         18px;
  --q-radius-sm:      10px;
  --q-shadow:         0 10px 40px rgba(20, 6, 13, .12);
  --q-shadow-lg:      0 24px 80px rgba(20, 6, 13, .18);
  --q-maxw:           1120px;
}

/* ==================================================================
   RESET / BASE
   ================================================================== */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: var(--q-font-body);
  color: var(--q-ink);
  background: var(--q-paper);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--q-primary); }
h1, h2, h3, h4 { font-family: var(--q-font-display); line-height: 1.15; margin: 0 0 .5em; }

.q-container { max-width: var(--q-maxw); margin: 0 auto; padding: 0 24px; }

/* ==================================================================
   BOTTONI
   ================================================================== */
.q-btn {
  display: inline-block;
  padding: 14px 32px;
  border-radius: 999px;
  border: 0;
  font-family: var(--q-font-body);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.q-btn-primary {
  background: var(--q-gradient);
  color: #fff !important;
  box-shadow: 0 8px 24px rgba(255, 46, 126, .35);
}
.q-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(255, 46, 126, .45); }
.q-btn-ghost {
  background: transparent;
  color: var(--q-ink) !important;
  border: 2px solid var(--q-ink);
}
.q-btn-ghost:hover { background: var(--q-ink); color: #fff !important; }
.q-btn-white { background: #fff; color: var(--q-primary) !important; }
.q-btn[disabled] { opacity: .5; cursor: not-allowed; transform: none !important; }

/* ==================================================================
   HEADER SITO
   ================================================================== */
.q-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(255,255,255,.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(20,6,13,.06);
}
.q-header-in {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 24px; max-width: var(--q-maxw); margin: 0 auto;
}
.q-logo {
  font-family: var(--q-font-display);
  font-weight: 800; font-size: 1.5rem; text-decoration: none;
  color: var(--q-ink);
}
.q-logo span { background: var(--q-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; }
.q-nav { display: flex; gap: 18px; align-items: center; }
.q-nav a { text-decoration: none; color: var(--q-ink); font-weight: 600; font-size: .95rem; }
.q-nav a:hover { color: var(--q-primary); }

/* ==================================================================
   LANDING
   ================================================================== */
.q-hero {
  position: relative;
  padding: 90px 24px 110px;
  text-align: center;
  background:
    radial-gradient(1200px 600px at 80% -10%, rgba(124,58,237,.14), transparent 60%),
    radial-gradient(900px 500px at 10% 10%, rgba(255,46,126,.14), transparent 60%),
    var(--q-soft);
  overflow: hidden;
}
.q-hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  font-weight: 800;
  max-width: 800px; margin: 0 auto 20px;
}
.q-hero h1 em {
  font-style: normal;
  background: var(--q-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.q-hero p.q-sub {
  font-size: clamp(1.05rem, 2vw, 1.3rem);
  color: var(--q-muted);
  max-width: 620px; margin: 0 auto 36px;
}
.q-hero .q-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.q-steps { padding: 80px 0; }
.q-steps h2, .q-cats h2, .q-pricing h2 { text-align: center; font-size: clamp(1.8rem, 4vw, 2.6rem); margin-bottom: 48px; }
.q-steps-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 24px; }
.q-step {
  background: #fff; border: 1px solid rgba(20,6,13,.07);
  border-radius: var(--q-radius); padding: 32px 26px;
  box-shadow: var(--q-shadow); text-align: center;
}
.q-step .n {
  width: 46px; height: 46px; margin: 0 auto 16px;
  display: grid; place-items: center;
  border-radius: 50%; background: var(--q-gradient);
  color: #fff; font-weight: 800; font-size: 1.2rem;
}
.q-step h3 { font-size: 1.15rem; }
.q-step p { color: var(--q-muted); font-size: .95rem; margin: 0; }

.q-cats { padding: 40px 0 80px; }
.q-cats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; }
.q-cat {
  border-radius: var(--q-radius); padding: 36px 24px; text-align: center;
  color: #fff; text-decoration: none; box-shadow: var(--q-shadow);
  transition: transform .15s ease;
}
.q-cat:hover { transform: translateY(-4px); }
.q-cat .e { font-size: 2.4rem; display: block; margin-bottom: 10px; }
.q-cat strong { font-family: var(--q-font-display); font-size: 1.3rem; }
.q-cat-amore      { background: linear-gradient(135deg,#8e0e3d,#ff2e7e); }
.q-cat-amicizia   { background: linear-gradient(135deg,#0077ff,#00c2a8); }
.q-cat-laurea     { background: linear-gradient(135deg,#7f1d1d,#f59e0b); }
.q-cat-matrimonio { background: linear-gradient(135deg,#44403c,#a67c52); }

.q-pricing { padding: 40px 0 90px; }
.q-price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 24px; max-width: 900px; margin: 0 auto; }
.q-price {
  background: #fff; border: 1px solid rgba(20,6,13,.08);
  border-radius: var(--q-radius); padding: 34px 28px; text-align: center;
  box-shadow: var(--q-shadow);
}
.q-price.pop { border: 2px solid var(--q-primary); position: relative; }
.q-price.pop::before {
  content: "Più scelto"; position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--q-gradient); color: #fff; font-size: .75rem; font-weight: 700;
  padding: 4px 14px; border-radius: 999px;
}
.q-price .amount { font-family: var(--q-font-display); font-size: 2.6rem; font-weight: 800; }
.q-price .amount small { font-size: 1.1rem; color: var(--q-muted); font-weight: 400; }
.q-price ul { list-style: none; padding: 0; margin: 18px 0 24px; color: var(--q-muted); font-size: .95rem; }
.q-price li { padding: 5px 0; }

.q-final-cta {
  background: var(--q-gradient); color: #fff; text-align: center;
  padding: 80px 24px; border-radius: 0;
}
.q-final-cta h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: #fff; }
.q-final-cta p { opacity: .9; margin-bottom: 30px; }

/* ==================================================================
   FOOTER
   ================================================================== */
.q-footer {
  padding: 36px 24px; text-align: center;
  color: var(--q-muted); font-size: .85rem;
  border-top: 1px solid rgba(20,6,13,.06);
}

/* ==================================================================
   PAGINE INTERNE GENERICHE
   ================================================================== */
.q-page { padding: 60px 0 90px; }
.q-page h1 { font-size: clamp(1.9rem, 4vw, 2.8rem); }

/* ==================================================================
   BUILDER (mount React)
   ================================================================== */
#QR4YOU-builder { min-height: 70vh; }
.q-builder-loading { text-align: center; padding: 100px 20px; color: var(--q-muted); }

/* ==================================================================
   DASHBOARD
   ================================================================== */
.q-cards-list { display: grid; gap: 18px; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
.q-card-item {
  background: #fff; border: 1px solid rgba(20,6,13,.08);
  border-radius: var(--q-radius); padding: 24px; box-shadow: var(--q-shadow);
}
.q-card-item h3 { margin-bottom: 6px; }
.q-badge {
  display: inline-block; font-size: .72rem; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; padding: 3px 10px; border-radius: 999px;
}
.q-badge-published { background: #dcfce7; color: #166534; }
.q-badge-draft     { background: #fef3c7; color: #92400e; }
.q-badge-paid      { background: #dbeafe; color: #1e40af; }
.q-card-item .meta { color: var(--q-muted); font-size: .85rem; margin: 8px 0 14px; }
.q-card-item .actions { display: flex; gap: 10px; flex-wrap: wrap; }
.q-card-item .actions a { font-size: .88rem; font-weight: 600; }

/* --- Account: testata profilo --- */
.q-account-head {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  background: var(--q-soft);
  border-radius: var(--q-radius);
  padding: 26px 28px;
}
.q-avatar {
  width: 64px; height: 64px; border-radius: 50%;
  background: var(--q-gradient); color: #fff;
  display: grid; place-items: center;
  font-family: var(--q-font-display); font-size: 1.7rem; font-weight: 800;
  flex-shrink: 0;
}
.q-account-info { flex: 1; min-width: 220px; }
.q-account-info h1 { font-size: 1.5rem; margin: 0 0 4px; }
.q-account-info p { margin: 0; color: var(--q-muted); }

/* --- Griglia bigliettini --- */
.q-grid-cards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  margin-top: 20px;
}
.q-grid-card {
  display: block; text-decoration: none; color: inherit;
  border-radius: var(--q-radius); overflow: hidden;
  border: 1px solid rgba(20,6,13,.08);
  box-shadow: var(--q-shadow);
  background: #fff;
  transition: transform .15s ease, box-shadow .15s ease;
}
.q-grid-card:hover { transform: translateY(-4px); box-shadow: var(--q-shadow-lg); }
.q-grid-card-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px;
}
.q-grid-stats { font-size: .82rem; color: var(--q-muted); }

/* --- Mini anteprima bigliettino --- */
.q-mini {
  background: linear-gradient(160deg, var(--mp-from), var(--mp-to));
  color: var(--mp-text);
  padding: 26px 20px;
  text-align: center;
}
.q-mini-sm { padding: 22px 16px; min-height: 170px; }
.q-mini-emoji { font-size: 1.9rem; }
.q-mini-title { font-size: 1.2rem; font-weight: 800; line-height: 1.2; margin: 6px 0 8px; }
.q-mini-sm .q-mini-title { font-size: 1.05rem; }
.q-mini-divider { width: 44px; height: 3px; border-radius: 3px; background: var(--mp-accent); margin: 0 auto 10px; }
.q-mini-msg { font-size: .85rem; opacity: .85; line-height: 1.5; }
.q-mini-badges { margin-top: 12px; display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.q-mini-badges span {
  font-size: .68rem; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
  background: rgba(0,0,0,.22);
}

/* --- Dettaglio bigliettino --- */
.q-detail {
  display: grid; gap: 36px;
  grid-template-columns: minmax(0, 340px) minmax(0, 1fr);
  align-items: start;
  margin-top: 10px;
}
.q-detail-preview .q-mini { border-radius: var(--q-radius); box-shadow: var(--q-shadow-lg); }
.q-detail-info h3 { margin: 28px 0 10px; font-size: 1.05rem; }
.q-copy-row { display: flex; gap: 10px; }
.q-copy-row input {
  flex: 1; min-width: 0;
  padding: 11px 14px;
  border: 2px solid rgba(20,6,13,.12); border-radius: var(--q-radius-sm);
  font-family: monospace; font-size: .85rem;
}
.q-detail-qr {
  display: flex; gap: 22px; align-items: center; flex-wrap: wrap;
}
.q-detail-qr img {
  border: 1px solid rgba(20,6,13,.1); border-radius: 12px; padding: 8px; background: #fff;
}
.q-detail-qr-btns { display: flex; flex-direction: column; gap: 10px; }
@media (max-width: 760px) {
  .q-detail { grid-template-columns: 1fr; }
  .q-account-head { padding: 20px; }
}

/* --- Statistiche card in dashboard --- */
.q-stats-row {
  display: flex; gap: 16px; flex-wrap: wrap;
  font-size: .88rem; color: var(--q-muted);
  margin: 4px 0 12px;
}
.q-stats-row strong { color: var(--q-ink); }
.q-stats-details {
  border: 1px solid rgba(20,6,13,.08);
  border-radius: var(--q-radius-sm);
  padding: 10px 14px;
  margin-bottom: 10px;
  font-size: .88rem;
}
.q-stats-details summary { cursor: pointer; font-weight: 600; }
.q-chart {
  display: flex; align-items: flex-end; gap: 2px;
  height: 90px; margin-top: 12px;
  padding: 6px 2px 0;
  border-bottom: 2px solid rgba(20,6,13,.1);
}
.q-bar {
  flex: 1; min-width: 3px;
  background: rgba(20,6,13,.08);
  border-radius: 3px 3px 0 0;
  transition: background .12s;
}
.q-bar.has { background: var(--q-gradient); }
.q-bar:hover { opacity: .75; }
.q-chart-labels {
  display: flex; justify-content: space-between;
  font-size: .72rem; color: var(--q-muted); margin-top: 4px;
}
.q-responses { list-style: none; padding: 0; margin: 10px 0 0; max-height: 220px; overflow-y: auto; }
.q-responses li {
  display: flex; justify-content: space-between; gap: 12px;
  padding: 7px 4px; border-bottom: 1px dashed rgba(20,6,13,.08);
}
.q-responses time { color: var(--q-muted); font-size: .8rem; white-space: nowrap; }

/* ==================================================================
   PAGINA CONFERMA
   ================================================================== */
.q-confirm { text-align: center; max-width: 640px; margin: 0 auto; }
.q-confirm .qr-box {
  background: #fff; border-radius: var(--q-radius);
  box-shadow: var(--q-shadow-lg); padding: 30px; display: inline-block; margin: 26px 0;
}
.q-confirm .qr-box img { width: 260px; height: 260px; }
.q-confirm .link-box {
  background: var(--q-soft); border-radius: var(--q-radius-sm);
  padding: 14px 18px; font-family: monospace; font-size: .9rem;
  word-break: break-all; margin: 18px 0;
}

/* ==================================================================
   FORM ELEMENTI (login ecc.)
   ================================================================== */
.q-form { max-width: 420px; margin: 0 auto; }
.q-form label { display: block; font-weight: 600; margin: 14px 0 6px; font-size: .92rem; }
.q-form input[type="text"], .q-form input[type="email"], .q-form input[type="password"], .q-form input[type="url"], .q-form textarea {
  width: 100%; padding: 12px 14px; border: 2px solid rgba(20,6,13,.12);
  border-radius: var(--q-radius-sm); font-size: 1rem; font-family: inherit;
  transition: border-color .15s;
}
.q-form input:focus, .q-form textarea:focus { outline: none; border-color: var(--q-primary); }

/* ==================================================================
   PROMO BAR (modalità gratuita)
   ================================================================== */
.q-promo-bar {
  background: var(--q-gradient);
  color: #fff;
  text-align: center;
  padding: 10px 18px;
  font-size: .95rem;
}
.q-promo-bar a { color: #fff; font-weight: 700; text-underline-offset: 3px; }

/* ==================================================================
   HERO VISUAL (mockup bigliettino + QR)
   ================================================================== */
.q-hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: 40px;
  align-items: center;
  max-width: var(--q-maxw);
  margin: 0 auto;
  text-align: left;
}
.q-hero-copy .q-cta-row { justify-content: flex-start; }

.q-hero-visual { position: relative; display: flex; justify-content: center; }

/* Palco del carosello: le card sono impilate e ruotano col crossfade */
.q-mock-stage {
  position: relative;
  width: min(300px, 80%);
  animation: q-float 5s ease-in-out infinite;
}
@keyframes q-float {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(-3deg) translateY(-10px); }
}
.q-mock-card {
  background: linear-gradient(160deg, var(--mc-from, #3d0518), var(--mc-to, #8e0e3d));
  color: var(--mc-text, #fff);
  border-radius: 24px;
  padding: 26px 22px 22px;
  box-shadow: var(--q-shadow-lg);
}
/* card non attive: impilate sotto, invisibili */
.q-mock-card:not(:first-child) { position: absolute; inset: 0; }
.q-mock-card {
  opacity: 0;
  transform: scale(.94) translateY(10px);
  transition: opacity .7s ease, transform .7s ease;
  pointer-events: none;
}
.q-mock-card.is-active {
  opacity: 1;
  transform: scale(1) translateY(0);
}
.q-mock-dots {
  position: absolute; left: 50%; bottom: -24px; transform: translateX(-50%);
  display: flex; gap: 7px;
}
.q-mock-dots span {
  width: 8px; height: 8px; border-radius: 50%;
  background: rgba(20,6,13,.18);
  transition: background .3s, transform .3s;
}
.q-mock-dots span.is-active { background: var(--q-primary); transform: scale(1.25); }

.q-mock-emoji { text-align: center; font-size: 2rem; }
.q-mock-title {
  font-family: var(--q-font-display);
  text-align: center; font-size: 1.25rem; font-weight: 800; margin: 8px 0 10px;
}
.q-mock-divider { width: 50px; height: 3px; border-radius: 3px; background: var(--mc-accent, var(--q-primary)); margin: 0 auto 14px; }
.q-mock-line {
  height: 8px; border-radius: 4px; background: var(--mc-line, rgba(255,255,255,.28)); margin: 8px 14px;
}
.q-mock-line.short { width: 55%; margin-inline: auto; }
.q-mock-video {
  aspect-ratio: 16/9; border-radius: 12px; margin: 14px 4px 10px;
  background: rgba(0,0,0,.35);
  display: grid; place-items: center; font-size: 1.4rem; opacity: .9;
}
.q-mock-gallery { display: flex; gap: 8px; padding: 0 4px; }
.q-mock-gallery span {
  flex: 1; aspect-ratio: 1; border-radius: 8px;
  background: linear-gradient(135deg, var(--mc-line, rgba(255,255,255,.35)), rgba(255,255,255,.12));
}
.q-mock-qr {
  position: absolute; right: 4%; bottom: -26px;
  background: #fff; border-radius: 16px; padding: 12px 14px 10px;
  box-shadow: var(--q-shadow-lg);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  transform: rotate(4deg);
  animation: q-float2 5s ease-in-out .6s infinite;
}
@keyframes q-float2 {
  0%, 100% { transform: rotate(4deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(-8px); }
}
.q-mock-qr span { font-size: .72rem; font-weight: 700; color: var(--q-ink); }

/* ==================================================================
   PREZZI IN MODALITÀ GRATUITA
   ================================================================== */
.q-free-note { text-align: center; margin: -28px 0 34px; font-size: 1.05rem; }
.q-price .free-label { display: none; }
.q-price-grid.is-free .strike-when-free {
  text-decoration: line-through;
  opacity: .35;
  font-size: 1.4rem;
  vertical-align: middle;
  margin-right: 8px;
}
.q-price-grid.is-free .free-label {
  display: inline;
  background: var(--q-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.q-price .always-free {
  background: var(--q-gradient);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ==================================================================
   MICRO-DETTAGLI: focus, selezione, spinner, scrollbar
   ================================================================== */
::selection { background: var(--q-primary); color: #fff; }

.q-btn:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
button:focus-visible {
  outline: 3px solid color-mix(in srgb, var(--q-accent) 55%, transparent);
  outline-offset: 2px;
}

.q-builder-loading {
  display: flex; flex-direction: column; align-items: center; gap: 18px;
}
.q-builder-loading::before {
  content: "";
  width: 46px; height: 46px;
  border-radius: 50%;
  border: 4px solid rgba(255, 46, 126, .18);
  border-top-color: var(--q-primary);
  animation: q-spin .8s linear infinite;
}
@keyframes q-spin { to { transform: rotate(360deg); } }

/* ==================================================================
   RESPONSIVE
   ================================================================== */
@media (max-width: 900px) {
  .q-hero-grid { grid-template-columns: 1fr; text-align: center; }
  .q-hero-copy .q-cta-row { justify-content: center; }
  .q-hero-visual { margin-top: 34px; }
  .q-mock-qr { bottom: -18px; }
}
@media (max-width: 640px) {
  .q-hero { padding: 60px 20px 90px; }
  .q-nav a.q-nav-sec { display: none; }
}