/* ================================================================
   RFC COMPONENTS.CSS — Buttons · Cards · Badges · Forms · Footer · Popup
   ================================================================ */

/* ---------- BUTTONS ---------- */
.btn {
  display:inline-flex; align-items:center; gap:6px;
  padding:12px 26px; border-radius:var(--r-pill);
  font-size:13px; font-weight:500; letter-spacing:.02em;
  cursor:pointer; border:none; font-family:var(--fb);
  text-decoration:none; white-space:nowrap;
  transition:all var(--ease); position:relative;
}
.btn:disabled { opacity:.5; cursor:not-allowed; }
.btn-primary  { background:var(--p); color:#fff; }
.btn-primary:hover:not(:disabled) { background:var(--pm); transform:translateY(-1px); }
.btn-gold     { background:var(--g); color:var(--ink); }
.btn-gold:hover:not(:disabled) { opacity:.9; transform:translateY(-1px); }
.btn-outline  { background:transparent; color:var(--p); border:1px solid rgba(74,21,96,.3); }
.btn-outline:hover:not(:disabled) { border-color:var(--pm); background:rgba(123,45,139,.04); }
.btn-ghost-w  { background:transparent; color:#fff; border:1px solid rgba(255,255,255,.3); }
.btn-ghost-w:hover:not(:disabled) { background:rgba(255,255,255,.1); }
..btn-sm { padding:8px 18px; font-size:12px; }
.btn-sm img.btn-social-icon { width:18px; height:18px; object-fit:contain; }
.btn-lg { padding:15px 32px; font-size:15px; }
.btn-full { width:100%; justify-content:center; }

/* ---------- BADGES ---------- */
.badge {
  display:inline-block; padding:3px 10px;
  border-radius:var(--r-pill); font-size:10px;
  font-weight:500; text-transform:uppercase; letter-spacing:.08em;
}
.badge-upcoming { background:rgba(201,151,42,.12); color:#7a5710; }
.badge-past     { background:rgba(74,21,96,.08);   color:var(--p); }
.badge-featured { background:var(--g); color:var(--ink); }
.badge-live     { background:rgba(192,57,43,.12); color:var(--r); }

/* ---------- CARDS ---------- */
.card {
  background:var(--wh); border-radius:var(--r-lg);
  border:1px solid var(--bd); overflow:hidden;
  transition:transform var(--ease), box-shadow var(--ease);
}
.card:hover { transform:translateY(-3px); box-shadow:var(--sh-hover); }
.card-purple { background:var(--p); }
.card-cream  { background:var(--cr); }

/* ---------- PLAY BUTTON ---------- */
.play-btn {
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.15); border:2px solid rgba(255,255,255,.4);
  display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:all var(--ease); flex-shrink:0;
}
.play-btn:hover { background:var(--p); border-color:var(--p); }
.play-btn__tri {
  width:0; height:0; border-style:solid;
  border-width:8px 0 8px 14px;
  border-color:transparent transparent transparent #fff;
  margin-left:3px;
}

/* ---------- INFO NOTE ---------- */
.info-note {
  background:rgba(201,151,42,.08); border:1px solid rgba(201,151,42,.22);
  border-radius:var(--r-sm); padding:12px 16px;
  font-size:13px; color:var(--mu);
  display:flex; align-items:flex-start; gap:10px;
}

/* ---------- FORMS ---------- */
.fg { display:flex; flex-direction:column; gap:6px; }
.flabel { font-size:12px; font-weight:500; letter-spacing:.02em; }
.flabel-light { color:rgba(255,255,255,.7); }

.finput, .fselect, .ftextarea {
  background:#fff; border:1px solid var(--bd);
  border-radius:var(--r-sm); padding:11px 14px;
  font-size:13px; color:var(--ink); outline:none; width:100%;
  transition:border-color var(--ease), box-shadow var(--ease);
  font-family:var(--fb);
}
.finput:focus, .fselect:focus, .ftextarea:focus {
  border-color:var(--pm);
  box-shadow:0 0 0 3px rgba(123,45,139,.08);
}
.finput.err, .ftextarea.err { border-color:var(--r); }
.ftextarea { resize:vertical; min-height:110px; }
.fselect { cursor:pointer; color:var(--mu); }
.ferr { font-size:12px; color:var(--r); margin-top:2px; }

/* dark variant */
.finput-d, .fselect-d, .ftextarea-d {
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.15); color:#fff;
}
.fselect-d { background:rgba(255,255,255,.14); color:#fff; }
.fselect-d option { color:var(--ink); background:#fff; }
.finput-d::placeholder, .ftextarea-d::placeholder { color:rgba(255,255,255,.35); }
.finput-d:focus, .ftextarea-d:focus {
  border-color:rgba(201,151,42,.6);
  box-shadow:0 0 0 3px rgba(201,151,42,.1);
}

/* ---------- "I'M NEW HERE" POPUP ---------- */
.popup-overlay {
  position:fixed; inset:0; z-index:900;
  background:rgba(26,16,8,.6);
  backdrop-filter:blur(6px);
  display:flex; align-items:center; justify-content:center;
  padding:20px;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:all .3s ease;
}
.popup-overlay.open {
  opacity:1; visibility:visible; pointer-events:auto;
}
.popup {
  background:var(--wh); border-radius:var(--r-lg);
  max-width:540px; width:100%; overflow:hidden;
  transform:scale(.94) translateY(20px);
  transition:transform .3s ease;
  box-shadow: 0 24px 64px rgba(74,21,96,.25);
}
.popup-overlay.open .popup { transform:none; }
.popup__header {
  background:var(--p); padding:32px 32px 24px;
  position:relative; overflow:hidden;
}
.popup__header-kente {
  position:absolute; inset:0; opacity:.07;
}
.popup__header h2 { color:#fff; position:relative; z-index:1; font-size:28px; }
.popup__header h2 em { color:var(--g); }
.popup__header p { color:rgba(255,255,255,.7); position:relative; z-index:1; margin-top:8px; font-size:14px; }
.popup__body { padding:28px 32px; }
.popup__links {
  display:grid; grid-template-columns:1fr 1fr;
  gap:10px; margin-top:4px;
}
.popup__link {
  display:flex; align-items:center; gap:10px;
  padding:14px; border-radius:var(--r-md);
  border:1px solid var(--bd);
  font-size:13px; color:var(--p); font-weight:500;
  transition:all var(--ease);
}
.popup__link:hover { background:var(--cr); border-color:var(--pm); }
.popup__link .pl-icon { font-size:20px; }
.popup__close {
  display:block; text-align:center; margin-top:20px;
  font-size:12px; color:var(--mu); cursor:pointer;
  background:none; border:none; font-family:var(--fb);
}
.popup__close:hover { color:var(--p); }
.popup__dismiss {
  font-size:11px; color:var(--mu); text-align:center;
  margin-top:8px; cursor:pointer; background:none; border:none;
  font-family:var(--fb);
}
.popup__dismiss:hover { color:var(--p); }

/* ---------- ORBIT GRAPHIC ---------- */
.orbit-wrap { position:relative; display:flex; align-items:center; justify-content:center; align-self:center; }
.orbit-ring {
  width:320px; height:320px; border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(255,255,255,.95) 0 110px, transparent 110px 100%),
    conic-gradient(from -30deg,
      rgba(123,45,139,.08) 0deg 60deg,
      rgba(201,151,42,.12) 60deg 120deg,
      rgba(192,57,43,.1) 120deg 180deg,
      rgba(74,21,96,.12) 180deg 240deg,
      rgba(123,45,139,.08) 240deg 300deg,
      rgba(201,151,42,.12) 300deg 360deg);
  display:flex; align-items:center; justify-content:center; position:relative;
  border:1px solid rgba(74,21,96,.16);
  box-shadow: inset 0 0 0 10px rgba(255,255,255,.35);
}
/* ---------- ORBIT GRAPHIC (RFC Orbit Implementation) ---------- */
:root{

  /* Responsive Size */

  --size:min(85vw,600px);

  --center:58%;
  --ring-width:15%;

  --label-height:clamp(44px,8vw,54px);

  --labels:4;

  --rotation-speed:28s;

  --purple:#4d176f;
  --gold:#d4a520;
}

.orbit-wrap { position:relative; display:flex; align-items:center; justify-content:center; align-self:center; }
.orbit-system{

  width:var(--size);
  aspect-ratio:1;

  position:relative;

}

.ring{

  position:absolute;
  inset:0;

  border-radius:50%;

  animation:orbit var(--rotation-speed) linear infinite;

}

.ring::before{

  content:"";

  position:absolute;
  inset:0;

  border-radius:50%;

  padding:18px;

  background:

    conic-gradient(

    from 0deg,

    rgba(98,48,140,.18),

    rgba(214,180,80,.16),

    rgba(242,206,188,.18),

    rgba(180,150,255,.15),

    rgba(98,48,140,.18)

    );

  -webkit-mask:
    radial-gradient(farthest-side,
    transparent calc(100% - 18px),
    #000 calc(100% - 17px));

      mask:
    radial-gradient(farthest-side,
    transparent calc(100% - 18px),
    #000 calc(100% - 17px));
}

.center-circle{

  position:absolute;

  width:var(--center);
  aspect-ratio:1;

  left:50%;
  top:50%;

  transform:translate(-50%,-50%);

  border-radius:50%;

  background:var(--purple);

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  box-shadow:
  0 15px 40px rgba(40,20,60,.18);

}

.center-circle h1{

  color:var(--gold);

  font-size:clamp(2.5rem,8vw,4rem);

  font-weight:400;

  letter-spacing:3px;

}

.center-circle span{

  margin-top:.5rem;

  color:white;

  font-size:clamp(.7rem,1.5vw,.9rem);

  letter-spacing:4px;

}

.label{

  position:absolute;

  width:clamp(110px,22vw,145px);
  height:var(--label-height);

  display:flex;
  justify-content:center;
  align-items:center;

  border-radius:999px;

  color:#5c247f;

  font-size:clamp(.9rem,2.4vw,1.1rem);

  font-weight:500;

  /* Glass */

  background:rgba(255,255,255,.55);

  backdrop-filter:blur(12px);

  -webkit-backdrop-filter:blur(12px);

  border:1px solid rgba(255,255,255,.65);

  box-shadow:

    0 8px 22px rgba(40,20,60,.12),

    inset 0 1px 1px rgba(255,255,255,.8);

}

.label:nth-child(1) { left:50%; top:0; transform:translate(-50%,-50%); }
.label:nth-child(2) { left:100%; top:50%; transform:translate(-50%,-50%); }
.label:nth-child(3) { left:50%; top:100%; transform:translate(-50%,-50%); }
.label:nth-child(4) { left:0; top:50%; transform:translate(-50%,-50%); }
.label { animation:counterOrbit var(--rotation-speed) linear infinite; }

@keyframes counterOrbit {
  from { transform:translate(-50%,-50%) rotate(0deg); }
  to { transform:translate(-50%,-50%) rotate(-360deg); }
}

.label::before{

  content:"";

  position:absolute;

  inset:0;

  border-radius:inherit;

}

@keyframes orbit{

  from{

    transform:rotate(0deg);

  }

  to{

    transform:rotate(360deg);

  }

}

/* ---------- PAGE HEADER ---------- */
.page-hdr {
  background:var(--p); padding:60px 5vw 48px;
  position:relative; overflow:hidden;
}
.page-hdr__kente { position:absolute; inset:0; opacity:.06; }
.page-hdr h1   { color:#fff; position:relative; z-index:1; font-size:clamp(30px,6vw,54px); }
.page-hdr h1 em { color:var(--g); }
.page-hdr p    { color:rgba(255,255,255,.65); position:relative; z-index:1; max-width:500px; margin-top:10px; }

/* ---------- FOOTER ---------- */
.footer {
  background:var(--p); color:rgba(255,255,255,.85);
  padding:68px 5vw 52px;
  position:relative;
  z-index:1;
}
.footer__grid {
  display:grid; grid-template-columns:2fr 1fr 1fr 1fr;
  gap:60px; margin-bottom:48px;
}
.footer__brand {
  display:flex; align-items:center; gap:24px;
}
.footer__brand img {
  flex-shrink:0;
}
.footer__brand > div {
  flex:1;
}
.footer__brand h5 {
  font-family:var(--fd); font-size:17px; font-weight:700;
  color:var(--g); margin-bottom:6px;
}
.footer__brand p { font-size:13px; line-height:1.75; color:rgba(255,255,255,.9); }
.footer__col-title {
  display:block; font-size:10px; text-transform:uppercase;
  letter-spacing:.15em; color:var(--g); margin-bottom:14px; font-weight:500;
}
.footer__links { display:flex; flex-direction:column; gap:9px; }
.footer__links a { font-size:13px; color:rgba(255,255,255,.8); transition:color var(--ease); }
.footer__links a:hover { color:rgba(255,255,255,.85); }
.footer__social { display:flex; gap:8px; margin-top:16px; flex-wrap:wrap; }
.footer__social a {
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:var(--r-md); border:1px solid rgba(255,255,255,.3);
  color:rgba(255,255,255,.8); font-size:0;
  transition:all var(--ease);
}
.footer__social a img {
  width:20px; height:20px; object-fit:contain; display:block;
}
.footer__social a:hover { background:rgba(255,255,255,.08); color:rgba(255,255,255,.9); }
.footer__bottom {
  border-top:1px solid rgba(255,255,255,.15); padding-top:20px;
  display:flex; justify-content:space-between; align-items:center;
  flex-wrap:wrap; gap:10px; font-size:12px;
}
.footer__tagline { font-family:var(--fd); font-style:italic; font-size:12px; color:rgba(255,255,255,.5); }

/* ---------- RESPONSIVE ---------- */
@media(max-width:900px) {
  .footer__grid { grid-template-columns:1fr 1fr; }
  .popup__links { grid-template-columns:1fr; }
}
@media(max-width:600px) {
  .footer__grid { grid-template-columns:1fr; gap:28px; }
  .footer__brand { flex-direction:column; align-items:flex-start; }
  .popup__body  { padding:22px 20px; }
  .popup__header{ padding:24px 20px 18px; }
}