/* ============================================================
   Johnflies Fly Factory Ltd — Premium modern footer
   Loaded last so it overrides theme/skin footer styles.
   ============================================================ */

#footer.jff-footer {
  background:
    radial-gradient(1200px 420px at 15% -120px, rgba(208, 18, 26, 0.14), transparent 65%),
    linear-gradient(180deg, #151b23 0%, #10151c 55%, #0c1016 100%);
  color: #a9b4c0;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}

#footer.jff-footer > .container,
#footer.jff-footer .footer-center > .inner,
#footer.jff-footer .footer-bottom > .inner,
#footer.jff-footer .footer-top > .inner {
  background: transparent !important;
}

/* ---------- Promise band ---------- */
.jff-promise {
  background: rgba(255, 255, 255, 0.025);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.jff-promise-list {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin: 0;
  padding: 22px 0;
  list-style: none;
}
.jff-promise-list > li {
  display: flex;
  align-items: center;
  gap: 14px;
}
.jff-ic {
  flex: 0 0 auto;
  width: 42px;
  height: 42px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 12px;
  background: linear-gradient(145deg, rgba(208, 18, 26, 0.9), rgba(150, 12, 18, 0.9));
  color: #fff;
  font-size: 17px;
  box-shadow: 0 8px 18px rgba(208, 18, 26, 0.28);
}
.jff-txt {
  display: flex;
  flex-direction: column;
  line-height: 1.3;
}
.jff-txt strong {
  color: #f3f6f9;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.jff-txt em {
  font-style: normal;
  color: #8b96a3;
  font-size: 12px;
}

/* ---------- Main columns ---------- */
#footer.jff-footer .jff-main {
  padding: 44px 0 10px;
}
#footer.jff-footer .footer-bottom,
#footer.jff-footer .footer-center-right {
  padding-bottom: 24px;
}

/* Headings */
#footer.jff-footer .block .title_block,
#footer.jff-footer .title_block {
  position: relative;
  display: inline-block;
  margin: 0 0 22px;
  padding: 0 0 12px;
  color: #ffffff;
  font-family: "Open Sans", Arial, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: none;
}
#footer.jff-footer .block .title_block:after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 34px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #d0121a, #f0486b);
}
#footer.jff-footer .block .title_block a {
  color: #ffffff;
}

/* Links */
#footer.jff-footer a {
  color: #a9b4c0;
  transition: color 0.2s ease;
}
#footer.jff-footer a:hover,
#footer.jff-footer a:focus {
  color: #ffffff;
  text-decoration: none;
}
#footer.jff-footer .footer-block ul.toggle-footer,
#footer.jff-footer .widget-links .nav-links {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer.jff-footer .footer-block ul li.item,
#footer.jff-footer .widget-links .nav-links li {
  position: relative;
  padding: 6px 0 6px 18px;
}
#footer.jff-footer .footer-block ul li.item:before,
#footer.jff-footer .widget-links .nav-links li:before {
  content: "";
  position: absolute;
  left: 0;
  top: 14px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #d0121a;
  opacity: 0.85;
}
#footer.jff-footer .footer-block ul li.item a,
#footer.jff-footer .widget-links .nav-links li a {
  display: inline-block;
  transition: color 0.2s ease, transform 0.2s ease;
}
#footer.jff-footer .footer-block ul li.item a:hover,
#footer.jff-footer .widget-links .nav-links li a:hover {
  color: #ffffff;
  transform: translateX(3px);
}

/* ---------- Contact block (left column) ---------- */
#footer.jff-footer .contact-info {
  padding-top: 2px;
}
#footer.jff-footer .contact-info .media {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 16px;
}
#footer.jff-footer .contact-info .media .fa {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.08);
  color: #d0121a;
  font-size: 15px;
}
#footer.jff-footer .contact-info .address,
#footer.jff-footer .contact-info .contact-customhtml {
  color: #a9b4c0;
}
#footer.jff-footer .contact-info .address a {
  color: #a9b4c0;
}
#footer.jff-footer .contact-info .address a:hover {
  color: #ffffff;
}
#footer.jff-footer .contact-customhtml .title_block {
  margin-top: 6px;
}
#footer.jff-footer .contact-customhtml p {
  margin: 0 0 4px;
  color: #8b96a3;
  font-size: 12.5px;
  letter-spacing: 0.04em;
}

/* ---------- Social icons ---------- */
#footer.jff-footer #social_block ul {
  display: flex;
  gap: 10px;
  float: none;
  width: auto;
}
#footer.jff-footer #social_block ul li {
  float: none;
  margin: 0;
}
#footer.jff-footer #social_block ul li a {
  width: 40px;
  height: 40px;
  line-height: 40px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.09);
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
#footer.jff-footer #social_block ul li a:before {
  position: static;
  display: block;
  width: auto;
  height: auto;
  background: none;
  border-radius: 0;
  color: #c7d0da;
  font-size: 17px;
  line-height: 40px;
}
#footer.jff-footer #social_block ul li a:hover {
  transform: translateY(-3px);
  background: linear-gradient(145deg, #d0121a, #a90e15);
  border-color: rgba(208, 18, 26, 0.6);
}
#footer.jff-footer #social_block ul li a:hover:before {
  color: #ffffff;
}

/* ---------- Trusted brand logo card ---------- */
#footer.jff-footer .contentbanner-left img {
  max-width: 100%;
  height: auto;
  border-radius: 14px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.35);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#footer.jff-footer .contentbanner-left img:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
}

/* ---------- Bottom bar ---------- */
#footer.jff-footer .footer-nav {
  background: transparent;
  border-top: 1px solid rgba(255, 255, 255, 0.07);
  text-align: left;
}
#footer.jff-footer .jff-bottom-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding: 20px 0 22px;
}
#footer.jff-footer #footnav .widget-html .block_content,
#footer.jff-footer #footnav .block_content {
  display: flex;
  align-items: center;
}
#footer.jff-footer #footnav img {
  max-height: 42px;
  width: auto;
  height: auto;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
#footer.jff-footer #footnav img:hover {
  opacity: 1;
}
#footer.jff-footer .jff-copy {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-end;
  gap: 4px 18px;
  text-align: right;
}
#footer.jff-footer .jff-copyright {
  margin: 0;
  color: #8b96a3;
  font-size: 13px;
  line-height: 1.6;
  white-space: nowrap;
}
#footer.jff-footer .jff-copyright a {
  color: #d8dee5;
}
#footer.jff-footer .jff-copyright a:hover {
  color: #ffffff;
}
#footer.jff-footer .jff-legal {
  display: flex;
  justify-content: flex-end;
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
  flex: 0 0 auto;
}
#footer.jff-footer .jff-legal li a {
  color: #7d8794;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
#footer.jff-footer .jff-legal li a:hover {
  color: #ffffff;
}

/* ---------- Payment badges ---------- */
#footer.jff-footer .jff-pay-list {
  display: flex;
  flex-wrap: wrap;
  align-items: stretch;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer.jff-footer .jff-pay-list > li {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 6px 14px;
  border-radius: 10px;
  background: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.12);
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#footer.jff-footer .jff-pay-list > li:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35);
}
#footer.jff-footer #footnav .jff-pay-list > li img,
#footer.jff-footer .jff-pay-list > li img {
  display: block;
  height: 30px;
  max-height: 30px;
  width: auto;
  flex: 0 0 auto;
  opacity: 1;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-bank,
#footer.jff-footer .jff-pay-list > li.jff-pay-remitly,
#footer.jff-footer .jff-pay-list > li.jff-pay-crypto {
  gap: 8px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-bank {
  color: #0e4d92;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-bank i {
  font-size: 17px;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-remitly {
  background: #101c3d;
  border-color: rgba(255, 255, 255, 0.16);
  color: #37d67a;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-remitly i {
  font-size: 14px;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-crypto {
  background: #f7931a;
  border-color: rgba(255, 255, 255, 0.2);
  color: #ffffff;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-crypto i {
  font-size: 16px;
}

/* ---------- Back to top ---------- */
#backtop {
  background: linear-gradient(145deg, #d0121a, #9e0f16);
  border: 1px solid rgba(255, 255, 255, 0.15);
  box-shadow: 0 10px 24px rgba(208, 18, 26, 0.35);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
#backtop:hover {
  transform: translateY(-3px);
  box-shadow: 0 14px 30px rgba(208, 18, 26, 0.45);
}

/* ---------- Responsive ---------- */
@media (max-width: 991px) {
  .jff-promise-list {
    grid-template-columns: repeat(2, 1fr);
    gap: 16px 24px;
  }
  #footer.jff-footer .jff-copy {
    text-align: left;
    margin-top: 16px;
    justify-content: flex-start;
    flex-wrap: wrap;
  }
  #footer.jff-footer .jff-copyright {
    white-space: normal;
  }
  #footer.jff-footer .jff-legal {
    justify-content: flex-start;
  }
}
@media (max-width: 575px) {
  .jff-promise-list {
    grid-template-columns: 1fr;
    padding: 18px 0;
  }
  #footer.jff-footer .jff-main {
    padding: 32px 0 6px;
  }
  #footer.jff-footer .footer-center,
  #footer.jff-footer .footer-bottom {
    margin-bottom: 18px;
  }
}
/* ---------- Payment badges: keep every badge on a single row ---------- */
#footer.jff-footer .jff-pay-list {
  flex-wrap: nowrap;
  gap: 6px;
}
#footer.jff-footer .jff-pay-list > li {
  min-height: 34px;
  padding: 3px 8px;
}
#footer.jff-footer #footnav .jff-pay-list > li img {
  height: 22px;
  max-height: 22px;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-bank,
#footer.jff-footer .jff-pay-list > li.jff-pay-remitly,
#footer.jff-footer .jff-pay-list > li.jff-pay-crypto {
  gap: 5px;
  font-size: 11.5px;
}
#footer.jff-footer .jff-pay-list > li.jff-pay-bank i { font-size: 13px; }
#footer.jff-footer .jff-pay-list > li.jff-pay-remitly i { font-size: 12px; }
#footer.jff-footer .jff-pay-list > li.jff-pay-crypto i { font-size: 12px; }
/* Let the badges use the full width of the bottom bar on desktop/tablet */
@media (min-width: 992px) {
  .jff-bottom-bar > #footnav { flex: 1 1 auto; width: auto; max-width: none; }
  .jff-bottom-bar > #footnav + div { flex: 0 0 auto; width: auto; max-width: none; }
}
/* Phones: wrap again so nothing gets clipped */
@media (max-width: 767px) {
  #footer.jff-footer .jff-pay-list { flex-wrap: wrap; }
}