/* ═══════════════════════════════════════════════════════════
   RASAMALA FOOTER PRO — CONSOLIDATED BUILD (SLiMS 9.6 – 9.8)
   Token mandiri --fp-* : kebal perbedaan skema Bootstrap antar versi
   ═══════════════════════════════════════════════════════════ */

.fp-footer {
  --fp-accent: var(--bs-primary, #ca8a04);
  --fp-band: #f6f7f9;
  --fp-card: #ffffff;
  --fp-card-border: rgba(15, 23, 42, .10);
  --fp-ink: #1f2937;
  --fp-ink-soft: #4b5563;
}
body.rasamala-dark .fp-footer {
  --fp-band: #1b2130;
  --fp-card: #10151f;
  --fp-card-border: rgba(255, 255, 255, .12);
  --fp-ink: #f1f5f9;
  --fp-ink-soft: #9aa7b8;
}

.fp-footer { position: relative; }

/* ── Hairline gradient beranimasi ── */
.fp-hairline {
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--fp-accent) 20%, var(--fp-accent) 80%, transparent);
  background-size: 200% 100%;
  animation: fp-hairline 6s linear infinite;
  opacity: .85;
}
@keyframes fp-hairline { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } }

/* ── Stats strip ── */
.fp-stats-wrap {
  background: var(--fp-band);
  border-bottom: 1px solid var(--fp-card-border);
  padding: 1.25rem 0;
}
.fp-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: .75rem; margin: 0; padding: 0; }
.fp-stat {
  position: relative; overflow: hidden;
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: .9rem .5rem; border-radius: 1rem;
  border: 1px solid var(--fp-card-border);
  background: var(--fp-card);
  color: var(--fp-ink);
  transition: transform .25s ease, box-shadow .25s ease;
}
.fp-stat:hover { transform: translateY(-4px); box-shadow: 0 .5rem 1.5rem rgba(0, 0, 0, .18); }
.fp-stat::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: conic-gradient(from var(--fp-angle, 0deg), transparent 0 70%, var(--fp-accent) 85%, transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity .3s; pointer-events: none;
}
.fp-stat:hover::before { opacity: 1; animation: fp-spin 3s linear infinite; }
@keyframes fp-spin { to { --fp-angle: 360deg; } }
@property --fp-angle { syntax: '<angle>'; initial-value: 0deg; inherits: false; }

.fp-stat-icon {
  width: 44px; height: 44px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(127, 127, 127, .12);
  background: color-mix(in srgb, var(--fp-accent) 15%, transparent);
  color: var(--fp-accent); font-size: 1.05rem; margin-bottom: .5rem;
  transition: transform .25s ease;
}
.fp-stat:hover .fp-stat-icon { transform: scale(1.12) rotate(-6deg); }
.fp-stat-num { font-size: 1.5rem; font-weight: 800; line-height: 1.1; font-variant-numeric: tabular-nums; color: var(--fp-ink); }
.fp-stat-label { font-size: .72rem; text-transform: uppercase; letter-spacing: .06em; color: var(--fp-ink-soft); }

/* ── Brand gradient text ── */
@supports (-webkit-background-clip: text) {
  .fp-brand-gradient {
    background: linear-gradient(90deg, var(--fp-accent), currentColor);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

/* ── Elemen di latar footer: ikut warna teks footer (putih di emas, terang di dark) ── */
.fp-tagline, .fp-tagline i,
.fp-svc-subtitle, .fp-svc-subtitle i,
.fp-contact-label,
.fp-map-link,
.fp-links .fp-link,
.fp-mini-links a,
.fp-totop { color: inherit; }
.fp-tagline { font-size: .88rem; font-style: italic; display: flex; gap: .5rem; align-items: baseline; }
.fp-tagline-text { display: inline-block; transition: opacity .35s ease, transform .35s ease; }
.fp-tagline-fade { opacity: 0; transform: translateY(6px); }

/* ── Status Buka/Tutup ── */
.fp-status {
  display: inline-flex; align-items: center; gap: .5rem;
  font-size: .72rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  padding: .35rem .8rem; border-radius: 999px; border: 1px solid;
}
.fp-status-dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; animation: fp-pulse 2s infinite; }
.fp-status-open  { color: #2fb344; border-color: rgba(47, 179, 68, .45); background: rgba(47, 179, 68, .14); }
.fp-status-closed{ color: #e35d6a; border-color: rgba(227, 93, 106, .45); background: rgba(227, 93, 106, .14); }
@keyframes fp-pulse {
  0%   { box-shadow: 0 0 0 0 currentColor; }
  70%  { box-shadow: 0 0 0 7px transparent; }
  100% { box-shadow: 0 0 0 0 transparent; }
}

/* ── Kartu status (interior: token mandiri) ── */
.fp-svc-stack { display: flex; flex-direction: column; gap: 1rem; }
.fp-status-card {
  border: 1px solid var(--fp-card-border);
  background: var(--fp-card);
  border-radius: .9rem;
  padding: .75rem .9rem;
  color: var(--fp-ink);
}
.fp-status-card .fp-clock { margin-left: auto; }
.fp-status-card .fp-status-label { margin: .45rem 0 0; font-size: .8rem; color: var(--fp-ink-soft); }
.fp-clock {
  font-size: .8rem; color: var(--fp-ink-soft);
  display: inline-flex; gap: .4rem; align-items: center; font-variant-numeric: tabular-nums;
}
.fp-svc-subtitle {
  display: flex; align-items: center; gap: .5rem;
  margin: 0 0 .6rem; font-size: .72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em; opacity: .95;
}

/* ── Jam layanan ── */
.fp-hours li { display: flex; align-items: baseline; gap: .5rem; margin-bottom: .45rem; font-size: .88rem; }
.fp-dots {
  flex: 1; transform: translateY(-4px);
  border-bottom: 2px dotted rgba(127, 127, 127, .5);
  border-bottom: 2px dotted color-mix(in srgb, currentColor 40%, transparent);
}
.fp-hours-time { font-weight: 600; white-space: nowrap; }

/* ── Link jelajah + panah slide ── */
.fp-links li { margin-bottom: .55rem; }
.fp-link { position: relative; text-decoration: none; transition: opacity .2s, padding-left .2s; }
.fp-link::before {
  content: "\f105"; font-family: "Font Awesome 6 Free", "FontAwesome"; font-weight: 900;
  position: absolute; left: -2px; opacity: 0; transform: translateX(-6px);
  transition: opacity .2s, transform .2s; color: currentColor;
}
.fp-link:hover, .fp-link:focus-visible { opacity: .8; padding-left: 1rem; }
.fp-link:hover::before, .fp-link:focus-visible::before { opacity: 1; transform: none; }

/* ── Sosial media ── */
.fp-social a {
  width: 40px; height: 40px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(127, 127, 127, .35);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  color: inherit; text-decoration: none;
  transition: transform .2s, background-color .2s, color .2s, border-color .2s;
}
.fp-social a:hover, .fp-social a:focus-visible { transform: translateY(-3px); color: #fff; }
.fp-social a[data-fp-soc="facebook"]:hover  { background: #1877f2; border-color: #1877f2; }
.fp-social a[data-fp-soc="instagram"]:hover { background: #e4405f; border-color: #e4405f; }
.fp-social a[data-fp-soc="youtube"]:hover   { background: #ff0000; border-color: #ff0000; }
.fp-social a[data-fp-soc="tiktok"]:hover    { background: #010101; border-color: #69c9d0; color: #69c9d0; }
.fp-social a[data-fp-soc="twitter"]:hover   { background: #1da1f2; border-color: #1da1f2; }
.fp-social a[data-fp-soc="telegram"]:hover  { background: #229ed9; border-color: #229ed9; }

/* ── Tombol WA ── */
.fp-wa-btn {
  width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: .5rem;
  background: #25d366; border: none; color: #fff; font-weight: 600;
  border-radius: 999px; padding: .6rem 1rem; font-size: .9rem;
  transition: filter .2s, transform .2s;
}
.fp-wa-btn:hover { filter: brightness(.92); color: #fff; transform: translateY(-2px); }

/* ── Kontak & peta ── */
.fp-contact-stack { display: flex; flex-direction: column; gap: 1rem; }
.fp-contact { display: flex; flex-direction: column; gap: .85rem; margin: 0; padding: 0; }
.fp-contact li { display: flex; gap: .75rem; margin: 0; align-items: flex-start; }
.fp-contact-icon {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: .6rem;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, .18); color: #fff; font-size: .85rem;
}
body.rasamala-dark .fp-contact-icon {
  background: rgba(127, 127, 127, .12);
  background: color-mix(in srgb, var(--fp-accent) 14%, transparent);
  color: var(--fp-accent);
}
.fp-contact-icon i { margin: 0; width: auto; }
.fp-contact-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.fp-contact-label { font-size: .66rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; opacity: .85; }
.fp-contact-value { font-size: .9rem; color: inherit; word-break: break-word; }
.fp-contact-value a {
  color: inherit; text-decoration: none;
  border-bottom: 1px dashed transparent; transition: color .2s, border-color .2s;
}
.fp-contact-value a:hover, .fp-contact-value a:focus-visible {
  color: var(--fp-accent); border-bottom-color: var(--fp-accent);
}

.fp-map-card {
  border: 1px solid var(--fp-card-border);
  border-radius: .9rem; padding: .5rem;
  background: var(--fp-card);
  box-shadow: 0 0 0 1px rgba(127, 127, 127, .2);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--fp-accent) 22%, transparent),
              0 .5rem 1.5rem color-mix(in srgb, var(--fp-accent) 12%, transparent);
  transition: box-shadow .25s ease, transform .25s ease;
}
.fp-map-card:hover { transform: translateY(-2px); }
.fp-map { border-radius: .6rem; overflow: hidden; border: none; }
.fp-map iframe { width: 100%; height: 150px; border: 0; display: block; }
.fp-map-link {
  display: flex; align-items: center; justify-content: center; gap: .45rem;
  font-size: .78rem; padding: .45rem 0 .1rem; text-decoration: none;
  color: var(--fp-ink-soft); transition: color .2s;
}
.fp-map-link:hover { color: var(--fp-accent); }
.fp-map-link-plain {
  border: 1px dashed rgba(127, 127, 127, .5);
  border: 1px dashed color-mix(in srgb, currentColor 35%, transparent);
  border-radius: .7rem; padding: .6rem; margin-top: .25rem;
}

/* ── Bottom bar + back-to-top ring ── */
.fp-mini-links a { font-size: .95rem; transition: opacity .2s, transform .2s; display: inline-flex; }
.fp-mini-links a:hover { opacity: .75; transform: translateY(-2px); }
.fp-mini-links .fp-heart:hover { color: #dc3545; opacity: 1; }
.fp-totop {
  position: relative; width: 40px; height: 40px; border-radius: 50%;
  border: 1px solid rgba(127, 127, 127, .4);
  border: 1px solid color-mix(in srgb, currentColor 30%, transparent);
  background: transparent; cursor: pointer;
  transition: background-color .2s, color .2s, transform .2s;
}
.fp-totop:hover { background: var(--fp-accent); border-color: var(--fp-accent); color: #fff; transform: translateY(-2px); }
.fp-ring { position: absolute; inset: 2px; transform: rotate(-90deg); pointer-events: none; }
.fp-ring circle { fill: none; stroke-width: 2.5; }
.fp-ring-bg { stroke: rgba(127, 127, 127, .35); }
.fp-ring-fg { stroke: var(--fp-accent); stroke-linecap: round; transition: stroke-dashoffset .1s linear; }
.fp-totop:hover .fp-ring-fg { stroke: #fff; }
.fp-totop-icon { position: relative; }

/* ── Reveal on scroll ── */
.fp-reveal-init { opacity: 0; transform: translateY(18px); transition: opacity .6s ease, transform .6s ease; }
.fp-reveal-init.fp-revealed { opacity: 1; transform: none; }
#rasamala-footer-accordion > *:nth-child(2).fp-reveal-init { transition-delay: .08s; }
#rasamala-footer-accordion > *:nth-child(3).fp-reveal-init { transition-delay: .16s; }
#rasamala-footer-accordion > *:nth-child(4).fp-reveal-init { transition-delay: .24s; }

/* ── Responsif ── */
@media (max-width: 991.98px) { .fp-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767.98px) {
  .fp-social a { width: 48px; height: 48px; }
  .fp-totop { width: 48px; height: 48px; }
  .fp-stat-num { font-size: 1.25rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fp-hairline, .fp-status-dot, .fp-stat:hover::before { animation: none; }
  .fp-stat, .fp-social a, .fp-link, .fp-wa-btn, .fp-totop, .fp-tagline-text, .fp-stat-icon { transition: none; }
  .fp-reveal-init { opacity: 1; transform: none; transition: none; }
}