/*
  RBT Custom Blocks - Frontend styles
  (Hero / TOC / FAQ)
*/

/* ===== HERO (from your rbt-hero.css, variable-driven) ===== */
.rbt-hero{ width:100%; }

.rbt-hero__bg{
  width:100%;
  color: var(--rbt-hero-text, #fff);
  border-radius: calc(var(--rbt-hero-radius, 22) * 1px);
  padding: calc(var(--rbt-hero-pad, 30) * 1px);
  overflow:hidden;
  background:
    radial-gradient(1200px 500px at 10% 0%, var(--rbt-hero-grad-1, rgba(255,255,255,.16)), transparent 60%),
    radial-gradient(900px 420px at 90% 10%, var(--rbt-hero-grad-2, rgba(255,255,255,.10)), transparent 55%),
    linear-gradient(135deg,
      var(--rbt-hero-grad-a, #4a68bb) 0%,
      var(--rbt-hero-grad-b, #3a58a6) 55%,
      var(--rbt-hero-grad-c, #2c3c86) 100%
    );
}

.rbt-hero__grid{
  width:100%;
  display:flex;
  gap:18px;
  align-items:center;
  justify-content:space-between;
}

.rbt-hero__text{ min-width:0; }
.rbt-hero__card-col{ min-width:0; }

.rbt-hero__title{
  margin:0 0 10px;
  font-size:36px;
  line-height:1.15;
  letter-spacing:-0.02em;
  color: var(--rbt-hero-text, #fff);
}

.rbt-hero__desc{
  margin:0;
  font-size:16px;
  line-height:1.6;
  color: var(--rbt-hero-text, #fff);
  opacity: var(--rbt-hero-desc-opacity, .9);
}

@media (min-width: 769px){
  .rbt-hero__text{ flex: 0 0 65%; }
  .rbt-hero__card-col{
    flex: 0 0 35%;
    display:flex;
    justify-content:flex-end;
  }
  .rbt-card{ max-width: 420px; }
}

.rbt-card{
  width:100%;
  position:relative;
  padding:18px 16px 16px;
  text-align:center;
  border-radius:20px;
  transform: translateZ(0);
  transition: transform .35s ease;
}

.rbt-card:hover{ transform: translateY(-3px); }

.rbt-card__bg{
  position:absolute;
  left:0;
  bottom:0;
  width:100%;
  height:calc(100% - 24px);
  z-index:0;
  background: var(--rbt-card-bg, rgba(255,255,255,.78));
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border-radius:18px;
  border: 1px solid var(--rbt-card-border, rgb(113,65,234));
  box-shadow: 0 18px 55px rgba(9,25,42,.30);
}

.rbt-card__badge{
  position:relative;
  z-index:2;
  display:inline-block;
  margin-bottom:12px;
  padding:12px 20px;
  border-radius:999px;
  background: var(--rbt-badge-bg, rgba(89,61,144,.95));
  color: var(--rbt-badge-text, #f7f5f9);
  font-weight:900;
  font-size:17px;
  line-height:1;
  box-shadow: 0 10px 22px rgba(89,61,144,.25);
}

.rbt-card__icon{
  position:relative;
  z-index:2;
  width:62px;
  height:62px;
  margin:0 auto;
  background: rgba(240,240,240,.95);
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(19,26,38,.10);
  box-shadow: 0 10px 24px rgba(9,25,42,.14);
}

@keyframes rbtGift{
  0%   { transform: translateY(0) scale(1); }
  50%  { transform: translateY(-4px) scale(1.10); }
  100% { transform: translateY(0) scale(1); }
}

.rbt-card__icon img{
  max-width:100%;
  height:auto;
  display:block;
  animation: rbtGift var(--rbt-gift-speed, 3.6s) ease-in-out infinite;
  will-change: transform;
}

.rbt-card__text{
  position:relative;
  z-index:2;
  margin-top:12px;
  font-weight:800;
  color: var(--rbt-card-text, #101726);
  font-size:15px;
  line-height:1.25;
}

.rbt-card__btn{
  position:relative;
  z-index:2;
  margin-top:12px;
  display:block;
  width:100%;
  padding:12px 14px;
  border-radius:12px;
  color: var(--rbt-btn-text, #f7f5f9);
  text-decoration:none;
  font-weight:800;
  overflow:hidden;
  background: linear-gradient(135deg,
    var(--rbt-btn-grad-a, #593d90) 0%,
    var(--rbt-btn-grad-b, #6d4bb3) 100%
  );
  box-shadow: 0 14px 26px rgba(89,61,144,.25);
  transition: transform .28s ease, filter .28s ease, box-shadow .28s ease;
}

.rbt-card__btn:hover{
  color: var(--rbt-btn-text, #f7f5f9);
  filter: brightness(1.05);
  transform: translateY(-2px);
  box-shadow: 0 18px 34px rgba(89,61,144,.32);
}

.rbt-card__btn:active{ transform: translateY(0); }

.rbt-card__btn::after{
  content:"";
  position:absolute;
  top:-40%;
  left:-60%;
  width:40%;
  height:180%;
  transform: rotate(18deg);
  background: rgba(255,255,255,.22);
  transition: left .75s ease;
}

.rbt-card__btn:hover::after{ left:130%; }

.rbt-card__note{
  position:relative;
  z-index:2;
  margin-top:8px;
  font-size:12px;
  opacity:.65;
  color: var(--rbt-note-text, #131a26);
}

@media (max-width:768px){
  .rbt-hero__bg{ padding:18px; border-radius:18px; }
  .rbt-hero__grid{ flex-direction:column; text-align:center; }
  .rbt-hero__title{ font-size:28px; }
  .rbt-hero__card-col{ width:100%; display:block; }
  .rbt-card{ max-width:none; width:100%; margin:0; }
}

@media (prefers-reduced-motion: reduce){
  .rbt-card, .rbt-card__btn{ transition:none; }
  .rbt-card__icon img{ animation:none; }
}

/* ===== TOC (variable-driven) ===== */
.rbt-toc{
  background: var(--toc-bg, rgba(15,23,42,.78));
  border: 1px solid var(--toc-border, rgba(148,163,184,.18));
  border-radius: 16px;
  padding: 12px 12px 8px;
  color: var(--toc-text, #e5e7eb);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 14px 36px rgba(0,0,0,.22);
}

.rbt-toc summary{
  background: var(--toc-sum-bg, rgba(255,255,255,.06));
  color: var(--toc-text, #e5e7eb);
  padding: 10px 12px;
  border-radius: 12px;
  font-weight: 800;
  cursor:pointer;
}

.rbt-toc a{
  color: var(--toc-link, #cbd5e1);
  text-decoration: none;
}

.rbt-toc a:hover{
  color: var(--toc-link-hover, #fff);
  text-decoration: underline;
}

.rbt-toc ol{
  list-style:none;
  counter-reset: rbt_toc;
  padding-left:0;
  margin: 10px 0 0;
}

.rbt-toc li{
  margin: 8px 0;
  position: relative;
  padding-left: 30px;
}

.rbt-toc li::before{
  counter-increment: rbt_toc;
  content: counter(rbt_toc) ".";
  position:absolute;
  left:0;
  top:0;
  width:24px;
  text-align:right;
  color: var(--toc-link, #cbd5e1);
  font-weight:800;
}

.rbt-toc li:hover::before{ color: var(--toc-link-hover, #fff); }

/* ===== FAQ (based on your .faq styles, with CSS vars) ===== */
.rbt-faq .faq{
  margin:0;
  padding:0;
  text-indent:0;
  list-style:none;
}

.rbt-faq .faq__item{
  display:flex;
  flex-direction:column;
  overflow:hidden;
  padding: 1rem 0 1.25rem;
}

.rbt-faq .faq__item:not(:last-child){
  border-bottom: 1px solid var(--rbt-faq-border, #f1f3f5);
}

.rbt-faq .faq__item:last-child{ padding-bottom:0; }
.rbt-faq .faq__item:first-child{ padding-top:0; }

.rbt-faq .faq__toggle{
  color: inherit;
  display:flex;
  justify-content:space-between;
  align-items:flex-start;
  gap: 12px;
  padding:0;
  text-align:left;
  width:100%;
  background: transparent;
  border: 0;
  cursor:pointer;
}

.rbt-faq .faq__title{
  font-size: 18px;
  font-weight: 700;
  color: var(--rbt-faq-q, #111827);
  line-height: 1.44;
}

.rbt-faq .faq__toggle:hover .faq__title,
.rbt-faq .faq__toggle:focus .faq__title{
  color: var(--rbt-faq-q-hover, #111827);
}

.rbt-faq .faq__toggle[aria-expanded="true"] .faq__title{
  color: var(--rbt-faq-q-active, #6d4bb3);
}

.rbt-faq .faq__body{ padding-top: .5rem; }

.rbt-faq .faq__icon{
  flex: 0 0 2rem;
  height: 2rem;
  border-radius: 999px;
  background-color: var(--rbt-faq-icon-bg, #6d4bb3);
  background-repeat:no-repeat;
  background-position:center;
  background-image: url("data:image/svg+xml,%3Csvg width='13' height='14' viewBox='0 0 13 14' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13 7.92857H7.42857V13.5H5.57143V7.92857H0V6.07143H5.57143V0.5H7.42857V6.07143H13V7.92857Z' fill='%23ffffff'/%3E%3C/svg%3E");
  transition: transform .2s ease-in-out;
}

.rbt-faq .faq__toggle[aria-expanded="true"] .faq__icon{
  background-image: url("data:image/svg+xml,%3Csvg width='14' height='2' viewBox='0 0 14 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='14' height='2' fill='%23ffffff'/%3E%3C/svg%3E");
}

/* Optional: title wrapper */
.rbt-faq__header{ margin-bottom: 12px; }
.rbt-faq__title{ margin: 0; }