/* ============================================================
   PulseWave — TikTok Diamond Calculator & LIVE Gift Database
   Built on the same tokens and card language as tools.css, so
   these public tools read as part of the same site.
   ============================================================ */

/* ---------- calculator panel ---------- */
.tt-panel{
  position:relative;overflow:hidden;margin-top:2.2rem;padding:1.8rem 1.6rem;
  border:1px solid rgba(120,200,255,.26);border-radius:18px;
  background:linear-gradient(150deg,rgba(17,38,64,.95),rgba(7,14,28,.98));
  box-shadow:0 12px 30px rgba(0,0,0,.32)
}
.tt-panel::before{
  content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:linear-gradient(135deg,rgba(53,199,255,.12),transparent 42%)
}
.tt-panel>*{position:relative;z-index:1}

.tt-label{display:block;font:800 .78rem/1.4 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-soft);margin-bottom:.6rem}
.tt-input{
  width:100%;box-sizing:border-box;padding:.95rem 1.1rem;font:800 1.5rem/1.2 var(--head);
  color:var(--ink);background:rgba(4,10,22,.75);border:1px solid rgba(120,200,255,.3);
  border-radius:12px;transition:border-color .2s ease,box-shadow .2s ease
}
.tt-input:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,199,255,.25)}
.tt-input::placeholder{color:rgba(147,169,189,.45)}
.tt-hint{color:var(--muted);font-size:.85rem;margin:.55rem 0 0}

.tt-quick{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0;list-style:none}
.tt-quick button{
  font:800 .82rem/1 var(--body);color:#7fe3ff;cursor:pointer;
  border:1px solid rgba(120,200,255,.28);border-radius:999px;padding:.55rem .95rem;
  background:rgba(53,199,255,.06);transition:background .18s ease,border-color .18s ease
}
.tt-quick button:hover{background:rgba(53,199,255,.16);border-color:var(--cyan)}
.tt-quick button[aria-pressed="true"]{background:var(--cyan);color:var(--on-cyan);border-color:var(--cyan)}

.tt-result{margin-top:1.6rem;padding:1.3rem 1.4rem;border-radius:14px;background:rgba(53,199,255,.07);border:1px solid rgba(53,199,255,.22)}
.tt-result__diamonds{font:700 .95rem/1.4 var(--body);color:var(--muted);margin:0}
.tt-result__label{font:800 .72rem/1 var(--body);letter-spacing:.18em;text-transform:uppercase;color:var(--cyan-soft);margin:.8rem 0 .3rem}
.tt-result__value{font:900 2.6rem/1.05 var(--head);color:#fff;margin:0;text-shadow:0 2px 18px rgba(53,199,255,.35)}
/* The headline quotes two currencies ("£37.30 / $47.37"), so it needs to shrink
   and be allowed to wrap rather than overflow the card on a narrow screen. */
.tt-result__value{font-size:clamp(1.5rem,6vw,2.2rem);overflow-wrap:break-word}
@media (min-width:48rem){.tt-result__value{font-size:2.1rem}}
.tt-result__sub{color:var(--muted);font-size:.85rem;margin:.5rem 0 0}
.tt-actions{display:flex;gap:.7rem;margin-top:1.2rem;flex-wrap:wrap}
.tt-ghost{
  font:800 .85rem/1 var(--body);color:var(--cyan-soft);cursor:pointer;background:transparent;
  border:1px solid rgba(120,200,255,.35);border-radius:999px;padding:.6rem 1.2rem
}
.tt-ghost:hover{border-color:var(--cyan);background:rgba(53,199,255,.08)}
.tt-disclaimer{color:var(--muted);font-size:.78rem;line-height:1.55;margin:1.1rem 0 0}

/* ---------- gift database controls ---------- */
.tt-controls{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:.8rem;margin-top:2.2rem;align-items:end}
.tt-controls .tt-input{font-size:1.05rem;font-weight:700}
.tt-field{display:flex;flex-direction:column;gap:.45rem}
.tt-select{
  padding:.8rem 2.2rem .8rem .9rem;font:700 .9rem/1.2 var(--body);color:var(--ink);
  background:rgba(4,10,22,.75) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237fe3ff' stroke-width='2.4' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") no-repeat right .7rem center/14px;
  border:1px solid rgba(120,200,255,.3);border-radius:12px;appearance:none;cursor:pointer
}
.tt-select:focus{outline:none;border-color:var(--cyan);box-shadow:0 0 0 3px rgba(53,199,255,.25)}
.tt-filters{display:flex;flex-wrap:wrap;gap:.45rem;margin:1rem 0 0;padding:0;list-style:none}
/* ---------- FAQ: the homepage accordion, reused verbatim ---------- */
/* The homepage scopes its accordion to .faq, so the same look is restated
   here for the tool pages rather than reaching across into that section. */
.tt-faq{max-width:44rem;margin:1.4rem 0 0}
.tt-faq details{border:1px solid var(--line-soft);border-radius:14px;margin:0 0 .75rem;background:rgba(255,255,255,.02);overflow:hidden}
.tt-faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.3rem;font:700 1rem/1.4 var(--body);color:#e8f2fb}
.tt-faq summary::-webkit-details-marker{display:none}
.tt-faq summary::after{content:"+";float:right;font-weight:900;color:var(--cyan);font-size:1.25rem;line-height:1}
.tt-faq details[open] summary::after{content:"–"}
.tt-faq details[open]{border-color:rgba(53,199,255,.4)}
.tt-faq details p{padding:0 1.3rem 1.15rem;margin:0;color:#b6c6d6;font-size:.92rem;line-height:1.65}
.tt-status{color:var(--muted);font-size:.88rem;margin:1.2rem 0 0}
.tt-status strong{color:var(--cyan-soft)}
@media (max-width:620px){.tt-controls{grid-template-columns:1fr}}

/* ---------- gift cards: mirrors .tool-card language ---------- */
.gift-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:1rem;margin-top:1.4rem}
@media (max-width:1100px){.gift-grid{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (max-width:880px){.gift-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media (max-width:620px){.gift-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.7rem}}
@media (max-width:360px){.gift-grid{grid-template-columns:1fr}}

.gift-card{
  position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;
  padding:1.1rem .8rem 1rem;border:1px solid rgba(120,200,255,.22);border-radius:16px;
  background:linear-gradient(150deg,rgba(17,38,64,.92),rgba(7,14,28,.97));
  box-shadow:0 10px 24px rgba(0,0,0,.3);
  transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease
}
.gift-card:hover{transform:translateY(-4px);border-color:rgba(53,199,255,.7);box-shadow:0 16px 34px rgba(0,0,0,.42),0 0 20px rgba(53,199,255,.14)}
.gift-card:focus-within{border-color:rgba(53,199,255,.7)}
.gift-card__img{width:72px;height:72px;object-fit:contain;margin-bottom:.7rem;filter:drop-shadow(0 4px 12px rgba(53,199,255,.25))}
.gift-card__name{font:800 .95rem/1.3 var(--head);color:#fff;margin:0 0 .6rem}
.gift-card__name a{color:#fff}
.gift-card__name a:hover,.gift-card__name a:focus-visible{color:var(--cyan-soft)}
/* .doc p out-specifies a bare class, so scope the stats to the card. */
.gift-card .gift-card__stats{display:flex;flex-direction:column;gap:.28rem;margin:0 0 .85rem;font-size:.74rem;line-height:1.3;color:var(--muted)}
.gift-card__stats span{display:block;text-align:center}
.gift-card__stats svg{display:inline-block;vertical-align:-2px;width:12px;height:12px;color:#7fe3ff;margin-right:.25rem}
.gift-card__stats strong{color:var(--ink);font-weight:800}
.gift-card__gbp strong{color:#7fe3ff}
.gift-card .btn{margin-top:auto;font-size:.72rem;padding:.5rem .8rem}

.tt-more{display:flex;justify-content:center;margin-top:1.6rem}
.gift-empty{color:var(--muted);text-align:center;padding:2.5rem 1rem;border:1px dashed rgba(120,200,255,.25);border-radius:14px;margin-top:1.4rem}

/* ---------- conversion table ---------- */
.tt-table{width:100%;border-collapse:collapse;margin-top:1.2rem;font-size:.92rem}
.tt-table caption{text-align:left;font:800 .78rem/1 var(--body);letter-spacing:.14em;text-transform:uppercase;color:var(--cyan-soft);padding-bottom:.7rem}
.tt-table th,.tt-table td{padding:.6rem .9rem;text-align:left;border-bottom:1px solid rgba(120,200,255,.14)}
.tt-table thead th{color:var(--cyan-soft);font:800 .72rem/1 var(--body);letter-spacing:.12em;text-transform:uppercase}
.tt-table tbody tr:hover{background:rgba(53,199,255,.05)}
.tt-table td:last-child{font-weight:800;color:#fff}
@media (max-width:560px){.tt-table{display:block;overflow-x:auto;white-space:nowrap}}