/* depositominimo.com — components.css
   Bottoni, cartellini prezzo, schede a fasce, tabelle, callout, FAQ ecc. */

/* chunky buttons with hard offset shadow */
.btn {
  display: inline-block; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-weight: 700; line-height: 1.2; color: var(--blue);
  background: var(--yellow); border: var(--line) solid var(--blue); border-radius: 1rem;
  padding: .8rem 1.3rem; box-shadow: var(--shadow);
  transition: transform .12s ease, box-shadow .12s ease;
}
.btn:hover { transform: translate(-.1rem, -.1rem); box-shadow: .4rem .4rem 0 var(--blue); }
.btn:active { transform: translate(.2rem, .2rem); box-shadow: .1rem .1rem 0 var(--blue); }
.btn.alt { background: var(--white); }
.btn.big { font-size: 1.1rem; padding: 1rem 1.6rem; }

/* placeholder operator logo */
.logo-tile {
  flex: none; display: grid; place-items: center; width: 3.25rem; height: 3.25rem;
  background: var(--blue); color: var(--yellow); font-weight: 800; font-size: 1.05rem; letter-spacing: -.02em;
  border-radius: .8rem; border: var(--line) solid var(--blue); box-shadow: inset 0 0 0 .15rem var(--white);
}

/* rating as coins */
.coins { display: inline-flex; gap: .2rem; vertical-align: middle; }
.coins i {
  width: .85rem; height: .85rem; border-radius: 50%;
  background: var(--yellow); border: .125rem solid var(--blue); box-shadow: inset -.12rem -.12rem 0 var(--yellow-deep);
}
.coins i.off { background: var(--white); box-shadow: none; }

/* text chips */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: .35rem; margin: 0; padding: 0; }
.chips li {
  margin: 0; font-size: .76rem; font-weight: 600; line-height: 1.2; padding: .3rem .6rem;
  background: var(--cream); border: .09rem solid var(--blue); border-radius: 2em;
}

/* transparency / disclosure strip */
#disclosure { background: var(--white); border-bottom: var(--line) solid var(--blue); font-size: .84rem; }
#disclosure .wrap { display: flex; flex-direction: column; gap: .6rem; padding-top: .9rem; padding-bottom: .9rem; }
#disclosure .label {
  align-self: flex-start; margin: 0; background: var(--tomato-deep); color: var(--white);
  font-weight: 700; font-size: .72rem; text-transform: uppercase; letter-spacing: .06em;
  padding: .3rem .7rem .3rem 1.2rem; clip-path: polygon(.6rem 0, 100% 0, 100% 100%, .6rem 100%, 0 50%);
}
#disclosure .text p { margin: 0 0 .3rem; }
#disclosure .text p:last-child { margin: 0; }
@media (min-width: 48em) {
  #disclosure .wrap { flex-direction: row; align-items: flex-start; gap: 1.25rem; }
  #disclosure .label { margin-top: .15rem; white-space: nowrap; }
}

/* ---------- tier tabs + price-tag cards ---------- */
#tiers { background: var(--cream); }
#tiers .tabs { list-style: none; display: flex; gap: .5rem; margin: 1.5rem 0 1.75rem; padding: 0; }
#tiers .tabs li { flex: 1; margin: 0; max-width: 9rem; }
#tiers .tabs a {
  display: block; text-align: center; text-decoration: none; white-space: nowrap;
  font-weight: 800; font-size: 1.15rem; line-height: 1.1; padding: .7rem .25rem;
  background: var(--white); border: var(--line) solid var(--blue); border-radius: .9rem;
  box-shadow: .22rem .22rem 0 var(--blue); transition: transform .12s ease, box-shadow .12s ease;
}
#tiers .tabs a:hover { background: var(--cream); transform: translate(-.08rem, -.08rem); }
#tiers .tabs a[aria-selected="true"] {
  background: var(--yellow); transform: translate(.16rem, .16rem); box-shadow: .06rem .06rem 0 var(--blue);
}
#tiers .panel { margin-bottom: 2.75rem; }
#tiers .panel:last-of-type, #tiers .panel[role="tabpanel"] { margin-bottom: 0; }
#tiers .panel:focus-visible { outline-offset: .5rem; }
#tiers .panel > h3 { font-size: 1.35rem; font-weight: 800; margin-bottom: .3em; }
#tiers .panel > p { max-width: 44rem; margin-bottom: 1.4rem; }
#tiers .grid { display: grid; gap: 1.5rem; padding-right: .3rem; }
@media (min-width: 48em) {
  #tiers .grid { grid-template-columns: 1fr 1fr; gap: 1.75rem; }
  #tiers .tabs a { font-size: 1.35rem; }
}

#tiers .tag { display: flex; min-width: 0; filter: drop-shadow(.3rem .3rem 0 var(--blue)); }
#tiers .tag .face {
  --cut: 2rem; --band: 6.5rem;
  position: relative; isolation: isolate; flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: .95rem;
  padding: 0 1.15rem 1.3rem; background: var(--blue);
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
}
#tiers .tag .face::before {            /* inner face: yellow band + white body */
  content: ""; position: absolute; inset: .15rem; z-index: -1;
  clip-path: polygon(var(--cut) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut));
  background: linear-gradient(var(--yellow) 0, var(--yellow) calc(var(--band) - .3rem), var(--blue) calc(var(--band) - .3rem), var(--blue) calc(var(--band) - .15rem), var(--white) calc(var(--band) - .15rem));
}
#tiers .tag .face::after {             /* punched hole */
  content: ""; position: absolute; left: 1.55rem; top: 1.55rem; width: .95rem; height: .95rem;
  border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 .15rem var(--blue);
}
#tiers .tag .top {
  height: var(--band); display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding-left: 2.35rem;
}
#tiers .tag .amount { margin: 0; display: flex; flex-direction: column; line-height: 1; }
#tiers .tag .amount .num { font-size: 3.4rem; font-weight: 800; letter-spacing: -.04em; white-space: nowrap; }
#tiers .tag .amount .lbl { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; margin-top: .2rem; }
#tiers .tag .flag {
  flex: none; align-self: flex-start; margin-top: .9rem; transform: rotate(4deg);
  background: var(--tomato-deep); color: var(--white); font-size: .68rem; font-weight: 700; line-height: 1.15;
  text-transform: uppercase; letter-spacing: .05em; text-align: center; padding: .35rem .55rem; border-radius: .5rem;
  border: .125rem solid var(--blue); max-width: 5.5rem;
}
#tiers .tag .who { display: flex; align-items: center; gap: .8rem; margin-top: .2rem; }
#tiers .tag .who h3, #tiers .tag .who h4 { margin: 0 0 .15rem; font-size: 1.15rem; font-weight: 700; }
#tiers .tag .rating { margin: 0; font-size: .85rem; font-weight: 600; display: flex; align-items: center; flex-wrap: wrap; gap: .25rem .5rem; }
#tiers .tag .rating small { font-weight: 400; color: var(--blue-soft); }
#tiers .tag .bonus { margin: 0; font-weight: 700; font-size: 1.05rem; line-height: 1.35; padding: .7rem .85rem; background: var(--cream); border-radius: .8rem; border: .09rem dashed var(--blue); }
#tiers .tag .bonus span { display: block; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--tomato-deep); margin-bottom: .15rem; }
#tiers .tag .facts { margin: 0; display: grid; gap: .65rem; font-size: .9rem; }
#tiers .tag .facts dt { font-size: .72rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--blue-soft); margin-bottom: .2rem; }
#tiers .tag .facts dd { margin: 0; font-weight: 600; }
#tiers .tag .actions { margin: auto 0 0; padding-top: .3rem; display: flex; flex-wrap: wrap; align-items: center; gap: .8rem 1.1rem; padding-right: .3rem; }
#tiers .tag .actions .btn { flex: 1 1 9rem; }
#tiers .tag .actions .more { font-size: .88rem; }
#tiers .tag .terms { margin: 0; font-size: .72rem; color: var(--blue-soft); }
#tiers .other { margin: 2rem 0 0; font-size: .95rem; }

/* ---------- tables ---------- */
main .table-scroll {
  overflow-x: auto; margin: 0 .3rem 1.6rem 0; background: var(--white);
  border: var(--line) solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow);
}
main table { width: 100%; min-width: 40rem; border-collapse: collapse; margin: 0; font-size: .92rem; }
main caption { caption-side: bottom; text-align: left; padding: .7rem 1rem; font-size: .78rem; color: var(--blue-soft); border-top: .09rem dashed var(--blue); }
main th, main td { padding: .75rem 1rem; text-align: left; vertical-align: top; }
main thead th { background: var(--blue); color: var(--white); font-weight: 600; font-size: .8rem; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
main tbody tr + tr > * { border-top: .0625rem solid rgba(19, 49, 92, .18); }
main tbody th { font-weight: 700; white-space: nowrap; }
main tbody tr:nth-child(even) > * { background: #fffcf0; }
main table .euro {
  display: inline-block; background: var(--yellow); border: .125rem solid var(--blue); border-radius: .6rem;
  padding: .1rem .6rem; font-weight: 800; font-size: 1.1rem; box-shadow: .12rem .12rem 0 var(--blue);
}
main table.facts-table { min-width: 0; }
main table.facts-table th { width: 42%; white-space: normal; background: var(--cream); }

/* ---------- callouts (coupon look) ---------- */
main .callout {
  position: relative; margin: 1.75rem 0; padding: 1.2rem 1.25rem 1.2rem 4.4rem; max-width: 46rem;
  background: var(--white); border: .14rem dashed var(--blue); border-radius: var(--radius);
}
main .callout::before {
  content: "i"; position: absolute; left: 1.1rem; top: 1.15rem; width: 2.3rem; height: 2.3rem;
  display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 1.1rem;
  background: var(--yellow); border: var(--line) solid var(--blue); box-shadow: .15rem .15rem 0 var(--blue);
}
main .callout .title { font-weight: 700; font-size: 1.05rem; margin-bottom: .3rem; }
main .callout p:last-child { margin-bottom: 0; }
main .callout.budget { background: var(--yellow); }
main .callout.budget::before { content: "€"; background: var(--white); }
main .callout.warn { border-color: var(--tomato-deep); }
main .callout.warn::before { content: "!"; background: var(--tomato-deep); color: var(--white); }
main section:nth-of-type(even) .callout:not(.budget) { background: var(--cream); }

/* ---------- step list as numbered coins ---------- */
main .coin-steps { list-style: none; counter-reset: coin; margin: 1.5rem 0; padding: 0; max-width: 46rem; }
main .coin-steps li { counter-increment: coin; position: relative; margin: 0; padding: 0 0 1.6rem 4.4rem; min-height: 3.4rem; }
main .coin-steps li::before {
  content: counter(coin); position: absolute; left: 0; top: 0; width: 3.1rem; height: 3.1rem;
  display: grid; place-items: center; border-radius: 50%; font-weight: 800; font-size: 1.3rem;
  background: var(--yellow); border: var(--line) solid var(--blue);
  box-shadow: inset 0 0 0 .2rem var(--yellow), inset 0 0 0 .3rem var(--yellow-deep), .2rem .25rem 0 var(--blue);
}
main .coin-steps li::after {
  content: ""; position: absolute; left: 1.5rem; top: 3.6rem; bottom: .2rem; border-left: .15rem dashed var(--blue); opacity: .45;
}
main .coin-steps li:last-child { padding-bottom: 0; }
main .coin-steps li:last-child::after { display: none; }
main .coin-steps h3, main .coin-steps h4 { margin: 0 0 .25rem; padding-top: .35rem; font-size: 1.1rem; }
main .coin-steps p { margin: 0; }

/* ---------- pros / cons ---------- */
main .pros-cons { display: grid; gap: 1.5rem; margin: 1.5rem .3rem 1.5rem 0; }
main .pros-cons > div { background: var(--white); border: var(--line) solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
main .pros-cons h3 { margin: 0; padding: .7rem 1.1rem; font-size: 1.05rem; border-bottom: var(--line) solid var(--blue); }
main .pros-cons .pros h3 { background: var(--yellow); }
main .pros-cons .cons h3 { background: var(--tomato-deep); color: var(--white); }
main .pros-cons ul { list-style: none; margin: 0; padding: 1rem 1.1rem; }
main .pros-cons li { position: relative; padding-left: 2rem; margin-bottom: .7rem; }
main .pros-cons li:last-child { margin-bottom: 0; }
main .pros-cons li::before {
  position: absolute; left: 0; top: .1rem; width: 1.35rem; height: 1.35rem; display: grid; place-items: center;
  border-radius: 50%; font-weight: 800; font-size: .95rem; line-height: 1; border: .125rem solid var(--blue);
}
main .pros-cons .pros li::before { content: "+"; background: var(--yellow); }
main .pros-cons .cons li::before { content: "−"; background: var(--white); color: var(--tomato-deep); border-color: var(--tomato-deep); }
@media (min-width: 48em) { main .pros-cons { grid-template-columns: 1fr 1fr; } }

/* ---------- criteria / info cards ---------- */
main .cards { list-style: none; display: grid; gap: 1.1rem; margin: 1.5rem .3rem 0 0; padding: 0; }
main .cards > li, main .cards > div {
  margin: 0; padding: 1.15rem 1.2rem; background: var(--white);
  border: var(--line) solid var(--blue); border-radius: var(--radius); box-shadow: .22rem .22rem 0 var(--blue);
}
main .cards h3 { font-size: 1.05rem; margin-bottom: .35rem; }
main .cards p { margin: 0; font-size: .93rem; }
main .cards .weight {
  display: inline-block; margin-bottom: .6rem; background: var(--yellow); border: .125rem solid var(--blue);
  border-radius: .5rem; font-weight: 800; font-size: .85rem; padding: .05rem .5rem;
}
@media (min-width: 40em) { main .cards { grid-template-columns: 1fr 1fr; } }
@media (min-width: 62em) { main .cards.three { grid-template-columns: repeat(3, 1fr); } main .cards.four { grid-template-columns: repeat(4, 1fr); } }

/* ---------- FAQ accordion ---------- */
#faq .list { max-width: 48rem; margin-top: 1.5rem; }
#faq .faq-item { background: var(--white); border: var(--line) solid var(--blue); border-radius: var(--radius); margin: 0 .3rem .9rem 0; box-shadow: .22rem .22rem 0 var(--blue); overflow: hidden; }
#faq .faq-item h3 { margin: 0; font-size: 1rem; }
#faq .faq-item button {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 1rem;
  font: inherit; font-weight: 700; color: var(--blue); text-align: left; cursor: pointer;
  background: none; border: 0; padding: 1rem 1.1rem;
}
#faq .faq-item button:focus-visible { outline-offset: -.3rem; }
#faq .faq-item button::after {
  content: "+"; flex: none; width: 1.7rem; height: 1.7rem; display: grid; place-items: center;
  border-radius: 50%; background: var(--yellow); border: .125rem solid var(--blue); font-weight: 800; line-height: 1;
}
#faq .faq-item button[aria-expanded="true"] { background: var(--cream); }
#faq .faq-item button[aria-expanded="true"]::after { content: "−"; }
#faq .faq-item .answer { padding: .9rem 1.1rem 1rem; border-top: .09rem dashed var(--blue); }
#faq .faq-item .answer p:last-child { margin: 0; }

/* ---------- author box ---------- */
#author .box {
  display: flex; flex-direction: column; gap: 1rem; max-width: 48rem; padding: 1.4rem;
  background: var(--white); border: var(--line) solid var(--blue); border-radius: var(--radius); box-shadow: var(--shadow);
}
#author .avatar {
  flex: none; width: 4.5rem; height: 4.5rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--yellow); border: var(--line) solid var(--blue); font-weight: 800; font-size: 1.4rem;
  box-shadow: inset 0 0 0 .25rem var(--yellow), inset 0 0 0 .37rem var(--yellow-deep);
}
#author h2 { font-size: 1.25rem; margin-bottom: .15rem; }
#author h2::before { display: none; }
#author .role { font-size: .85rem; font-weight: 600; color: var(--tomato-deep); margin-bottom: .5rem; }
#author .box p:last-child { margin: 0; }
#author .updated { font-size: .85rem; color: var(--blue-soft); }
@media (min-width: 40em) { #author .box { flex-direction: row; align-items: flex-start; gap: 1.4rem; } }

/* ---------- coupon CTA (inline) ---------- */
main .coupon {
  display: flex; flex-direction: column; gap: 1rem; align-items: flex-start; margin: 2rem .3rem 2rem 0; padding: 1.4rem;
  background: var(--yellow); border: .16rem dashed var(--blue); border-radius: var(--radius); max-width: 46rem;
}
main .coupon .title { font-size: 1.2rem; font-weight: 800; margin: 0 0 .2rem; line-height: 1.25; }
main .coupon p { margin: 0; }
main .coupon .btn { background: var(--white); flex: none; }
main .coupon small { display: block; margin-top: .4rem; font-size: .75rem; }
@media (min-width: 40em) { main .coupon { flex-direction: row; align-items: center; justify-content: space-between; } }

/* ---------- forms ---------- */
main form .field { margin-bottom: 1.1rem; }
main form label { display: block; font-weight: 600; margin-bottom: .3rem; font-size: .92rem; }
main form input[type="text"], main form input[type="email"], main form select, main form textarea {
  width: 100%; font: inherit; color: var(--blue); background: var(--white);
  border: var(--line) solid var(--blue); border-radius: .8rem; padding: .7rem .9rem;
}
main form textarea { min-height: 9rem; resize: vertical; }
main form input:focus-visible, main form select:focus-visible, main form textarea:focus-visible { outline-offset: 0; box-shadow: .2rem .2rem 0 var(--yellow); }
main form .check { display: flex; gap: .7rem; align-items: flex-start; font-size: .88rem; }
main form .check input { flex: none; width: 1.25rem; height: 1.25rem; margin-top: .15rem; accent-color: var(--blue); }
main form .check label { font-weight: 400; margin: 0; }
main form .hint { font-size: .8rem; color: var(--blue-soft); margin: .3rem 0 0; }

/* ---------- phase 2: toplist "rows" variant (bookmaker page) ---------- */
@media (min-width: 62em) {
  #tiers.rows .grid { grid-template-columns: 1fr; gap: 1.4rem; }
  #tiers.rows .tag .face {
    --band: 11rem;
    display: grid; grid-template-columns: var(--band) 1.25fr 1fr 13rem; column-gap: 1.4rem; row-gap: .7rem;
    grid-template-areas: "top who facts actions" "top bonus facts terms";
    align-items: start; padding: 1.3rem 1.4rem 1.3rem 0;
  }
  #tiers.rows .tag .face::before {
    background: linear-gradient(to right, var(--yellow) 0, var(--yellow) calc(var(--band) - .3rem), var(--blue) calc(var(--band) - .3rem), var(--blue) calc(var(--band) - .15rem), var(--white) calc(var(--band) - .15rem));
  }
  #tiers.rows .tag .top { grid-area: top; height: auto; align-self: stretch; flex-direction: column; align-items: flex-start; justify-content: center; padding-left: 3rem; gap: .2rem; }
  #tiers.rows .tag .flag { margin-top: .5rem; }
  #tiers.rows .tag .who { grid-area: who; margin: 0; }
  #tiers.rows .tag .bonus { grid-area: bonus; }
  #tiers.rows .tag .facts { grid-area: facts; }
  #tiers.rows .tag .actions { grid-area: actions; flex-direction: column; align-items: stretch; margin: 0; padding-top: 0; text-align: center; }
  #tiers.rows .tag .actions .btn { flex: none; }
  #tiers.rows .tag .terms { grid-area: terms; text-align: center; }
}

/* ---------- small price tag (generic) ---------- */
main .pricetag { margin: 0; justify-self: start; filter: drop-shadow(.22rem .22rem 0 var(--blue)); }
main .pricetag span {
  position: relative; display: block; background: var(--yellow); font-weight: 800; font-size: 2.1rem; line-height: 1;
  letter-spacing: -.04em; padding: .7rem 1rem .7rem 2.3rem; white-space: nowrap;
  clip-path: polygon(1.1rem 0, 100% 0, 100% 100%, 1.1rem 100%, 0 50%);
}
main .pricetag span::before {
  content: ""; position: absolute; left: 1rem; top: 50%; width: .65rem; height: .65rem; margin-top: -.325rem;
  border-radius: 50%; background: var(--white); box-shadow: inset 0 0 0 .12rem var(--blue);
}
main .pricetag small { display: block; font-size: .6rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; margin-top: .3rem; }

/* ---------- LinkedIn button ---------- */
.in-btn {
  display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; font-weight: 700; font-size: .85rem;
  color: var(--blue); background: var(--white); border: var(--line) solid var(--blue); border-radius: .8rem;
  padding: .35rem .8rem .35rem .4rem; box-shadow: .2rem .2rem 0 var(--blue); transition: transform .12s ease, box-shadow .12s ease;
}
.in-btn:hover { background: var(--yellow); transform: translate(-.08rem, -.08rem); box-shadow: .28rem .28rem 0 var(--blue); }
.in-btn svg { width: 1.5rem; height: 1.5rem; flex: none; }
#author .in-btn { margin-top: .9rem; }

/* ---------- "Come abbiamo testato" receipt ---------- */
main .receipt {
  max-width: 36rem; background: var(--white); border: var(--line) solid var(--blue); border-radius: .5rem;
  box-shadow: var(--shadow); padding: 1.3rem 1.3rem 1rem; margin: 1.5rem .3rem 0 0;
}
main .receipt .title { font-weight: 800; text-transform: uppercase; letter-spacing: .08em; font-size: .85rem; text-align: center; margin: 0 0 .3rem; padding-bottom: .8rem; border-bottom: .14rem dashed var(--blue); }
main .receipt dl { margin: 0; }
main .receipt dl div { display: flex; justify-content: space-between; gap: 1rem; padding: .55rem 0; border-bottom: .0625rem dashed rgba(19, 49, 92, .35); font-size: .92rem; }
main .receipt dt { color: var(--blue-soft); }
main .receipt dd { margin: 0; font-weight: 700; text-align: right; }
main .receipt .note { font-size: .76rem; color: var(--blue-soft); margin: .8rem 0 0; text-align: center; }

/* ---------- Fonti ---------- */
#fonti h2 { font-size: 1.25rem; }
#fonti ul { max-width: 46rem; font-size: .9rem; margin-bottom: 0; }