/*
 * Site footer (views/layouts/main.php). Deep navy in both themes so the white logo and the Razorpay badge always read well.
 * Namespaced .ft-*; the old .footer__* rules in app.css are no longer used.
 */
.ft {
  --ft-bg: #0a1020; --ft-card: rgba(255, 255, 255, .05); --ft-line: rgba(255, 255, 255, .1);
  --ft-text: rgba(226, 232, 240, .78); --ft-head: #fff; --ft-muted: rgba(148, 163, 184, .9);
  position: relative; z-index: 1; margin-top: 0; color: var(--ft-text); font-size: .9rem;
  background:
    radial-gradient(700px 320px at 100% 0%, rgba(16, 185, 129, .13), transparent 62%),
    radial-gradient(600px 300px at 0% 100%, rgba(59, 130, 246, .12), transparent 62%),
    var(--ft-bg);
}
.ft a { text-decoration: none; }

/* call-to-action band that overlaps the top edge */
.ft-cta { transform: translateY(-50%); margin-bottom: -56px; }
.ft-cta__box {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 20px 32px; padding: 28px 34px; border-radius: 24px; color: #fff;
  background:
    radial-gradient(520px 260px at 92% 0%, rgba(56, 189, 248, .38), transparent 62%),
    radial-gradient(460px 240px at 0% 110%, rgba(52, 211, 153, .32), transparent 62%),
    linear-gradient(115deg, #053b31 0%, #0a5a47 45%, #0d6a86 100%);
  box-shadow: 0 30px 56px -32px rgba(5, 80, 70, .95);
}
.ft-cta__rings {
  position: absolute; right: -80px; top: -120px; width: 380px; height: 380px; border-radius: 50%; pointer-events: none;
  background: repeating-radial-gradient(circle at center, transparent 0 26px, rgba(255, 255, 255, .08) 26px 27px);
}
.ft-cta__text { position: relative; max-width: 560px; }
.ft-cta__text b { display: block; font-size: 1.55rem; font-weight: 800; letter-spacing: -.02em; line-height: 1.15; }
.ft-cta__text > span { display: block; margin-top: 6px; font-size: .95rem; line-height: 1.5; color: rgba(255, 255, 255, .88); }
.ft-cta__btns { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 18px; }
.ft-cta__art { position: relative; flex: none; width: 250px; height: 112px; }
.ft-tile {
  position: absolute; width: 74px; height: 74px; border-radius: 20px; display: flex; align-items: center; justify-content: center; color: #fff;
  background: rgba(255, 255, 255, .13); border: 1px solid rgba(255, 255, 255, .3); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.ft-tile--a { left: 0; top: 24px; transform: rotate(-8deg); color: #6ee7b7; }
.ft-tile--b { left: 82px; top: 0; transform: rotate(5deg); }
.ft-tile--c { left: 168px; top: 22px; transform: rotate(-4deg); color: #fcd34d; }
.ft-btn { white-space: nowrap; display: inline-flex; align-items: center; justify-content: center; height: 44px; padding: 0 20px; border-radius: 12px; font-weight: 700; font-size: .9rem; transition: transform .15s ease, background .15s ease; }
.ft-btn--white { background: #fff; color: #0b3d31; }
.ft-btn--white:hover { transform: translateY(-1px); color: #0b3d31; }
.ft-btn--ghost { border: 1.5px solid rgba(255, 255, 255, .7); color: #fff; }
.ft-btn--ghost:hover { background: rgba(255, 255, 255, .14); color: #fff; }

.ft__grid { display: grid; grid-template-columns: 1.7fr repeat(5, minmax(0, 1fr)); gap: 34px; padding: 56px 0 38px; }
.ft__brand img { height: 40px; width: auto; display: block; }
.ft__tag { margin: 14px 0 0; max-width: 28em; font-size: .9rem; line-height: 1.6; color: var(--ft-text); }
.ft__contact { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; color: #fff; font-weight: 600; font-size: .88rem; }
.ft__contact:hover { color: #6ee7b7; }
.ft__social { display: flex; gap: 10px; margin-top: 16px; }
.ft__social a { width: 40px; height: 40px; border-radius: 12px; display: flex; align-items: center; justify-content: center; background: var(--ft-card); border: 1px solid var(--ft-line); transition: transform .15s ease, background .15s ease, border-color .15s ease; }
.ft__social a:hover { transform: translateY(-2px); background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .3); }
.ft__social svg { display: block; }
.ft__col h3 { margin: 0 0 14px; font-size: .74rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ft-head); }
.ft__col a { display: block; padding: 5px 0; color: var(--ft-text); font-size: .88rem; transition: color .15s ease, transform .15s ease; }
.ft__col a:hover { color: #fff; transform: translateX(3px); }
.ft__col a.is-accent { color: #7dd3fc; font-weight: 600; }
.ft__col a.is-more { margin-top: 4px; color: #6ee7b7; font-weight: 700; }

/* bottom bar: copyright, legal links, payment gateway */
.ft__bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px 28px; flex-wrap: wrap; padding: 20px 0 8px; border-top: 1px solid var(--ft-line); }
.ft__copy { margin: 0; font-size: .84rem; color: var(--ft-text); }
.ft__legal { display: flex; gap: 6px 22px; flex-wrap: wrap; margin-right: auto; }
.ft__legal a { font-size: .84rem; color: var(--ft-text); }
.ft__legal a:hover { color: #fff; }
.ft-pay { display: inline-flex; align-items: center; gap: 10px; font-size: .78rem; color: var(--ft-muted); }
.ft-pay img { display: block; height: 18px; width: auto; padding: 6px 10px; box-sizing: content-box; border-radius: 8px; background: #fff; }
.ft__disclaimer { margin: 0; padding: 4px 0 26px; font-size: .76rem; color: var(--ft-muted); }

@media (max-width: 1100px) {
  .ft__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
  .ft__brand { grid-column: 1 / -1; }
}
@media (max-width: 760px) { .ft-cta__art { display: none; } }
@media (max-width: 640px) {
  .ft { margin-top: 0; }
  .ft-cta__box { padding: 22px 20px; border-radius: 20px; }
  .ft-cta__text b { font-size: 1.25rem; }
  .ft-cta__btns { width: 100%; }
  .ft-btn { flex: 1 1 0; height: 42px; padding: 0 8px; font-size: .82rem; }
  .ft__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 18px; padding: 40px 0 28px; }
  .ft__col h3 { margin-bottom: 8px; }
  .ft__col a { font-size: .84rem; padding: 4px 0; }
  .ft__bottom { flex-direction: column; align-items: flex-start; gap: 12px; }
  .ft__legal { margin-right: 0; gap: 6px 18px; }
}
@media (prefers-reduced-motion: reduce) { .ft a, .ft__social a { transition: none; } }