/* Coinsclone Global Shell CSS: Header, Mega Menus, Mobile Drawer, Footer & Floating Chat */

/* Page Background & Fonts */
html,
body,
#page,
.site,
#content,
.site-content,
.hb-shell,
.hb-shell__page {
  background: #ffffff !important;
  color: #0F1115;
  font-family: 'Figtree', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Base resets for shell elements */
[data-shell] *,
[data-drawer] *,
footer[data-cc-footer] * {
  box-sizing: border-box;
}

/* Sticky/Fixed Shell Header */
[data-shell] {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  width: 100%;
}

[data-spacer] {
  height: 45px;
  width: 100%;
}

[data-prog] {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  transform-origin: 0 50%;
  transform: scaleX(0);
  background: linear-gradient(90deg, #1877F2, #6C4BF6 55%, #0FA98E);
  will-change: transform;
  z-index: 10;
  transition: transform 0.08s ease-out;
}

/* Mega menu navigation */
[data-mega] {
  padding: 10px 0 28px !important;
  margin-bottom: -18px;
}

[data-mega] > [data-panel] {
  display: none;
}

[data-mega]:hover > [data-panel],
[data-mega]:focus-within > [data-panel] {
  display: grid;
}

/* Menu items & preview cards */
.mi {
  width: 13px;
  height: 13px;
  flex: 0 0 auto;
  fill: none;
  stroke: #1877F2;
  stroke-width: 1.9;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mif {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: #1877F2;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.mhead {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #6E809B;
  margin-bottom: 12px;
}

.mrow {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 8px 6px 6px;
  margin-left: -6px;
  border-radius: 9px;
  text-decoration: none;
  transition: background .15s;
}

.mrow:hover {
  background: #F2F7FF;
  text-decoration: none;
}

.mico {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 7px;
  background: #F1F6FE;
  border: 1px solid #E4ECFA;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .15s, border-color .15s;
}

.mrow:hover .mico {
  background: #E3EEFF;
  border-color: #C9DCFB;
}

.mrl {
  font-size: 13.5px;
  font-weight: 600;
  color: #3D4756;
  line-height: 1.3;
  transition: color .15s;
}

.mrow:hover .mrl {
  color: #1877F2;
}

.mfeat {
  display: flex;
  gap: 13px;
  align-items: flex-start;
  text-decoration: none;
}

.mfeat:hover {
  text-decoration: none;
}

.mfico {
  flex: 0 0 auto;
  width: 38px;
  height: 38px;
  border-radius: 11px;
  background: linear-gradient(140deg, #EAF3FF, #F1EEFF);
  border: 1px solid #E2EBFA;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color .15s;
}

.mfeat:hover .mfico {
  border-color: #C9DCFB;
}

.mft {
  display: block;
  font-size: 15.5px;
  font-weight: 800;
  color: #0F1115;
  letter-spacing: -.012em;
  margin-bottom: 4px;
  transition: color .15s;
}

.mfeat:hover .mft {
  color: #1877F2;
}

.mfd {
  display: block;
  font-size: 12.8px;
  line-height: 1.5;
  color: #5A6472;
}

.mrail {
  font-size: 13.5px;
  font-weight: 700;
  color: #3D4756;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: color .15s;
}

.mrail:hover {
  color: #1877F2;
  text-decoration: none;
}

/* Mobile drawer & hamburger */
[data-burger] {
  display: none;
}

[data-drawer] {
  display: none;
}

@media (max-width: 1180px) {
  nav[data-nav] {
    display: none !important;
  }
  [data-burger] {
    display: inline-flex !important;
  }
  [data-drawer][open] {
    display: block !important;
  }
  [data-shell] header > div > a[href*="lead-form"],
  [data-shell] header > div > a[href*="contact-us"] {
    display: none !important;
  }
}

[data-drawer][open] ~ [data-social] {
  display: none !important;
}

[data-dacc] > summary {
  list-style: none;
  cursor: pointer;
}

[data-dacc] > summary::-webkit-details-marker {
  display: none;
}

[data-dacc][open] > summary > span:last-child {
  rotate: -135deg;
  margin-top: 3px;
}

/* Footer styles */
.fgrid {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 30px 26px;
  padding: 30px 0 8px;
  align-items: start;
}

@media (max-width: 1120px) {
  .fgrid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 640px) {
  .fgrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 26px 18px;
  }
}

.fh {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #6E809B;
  margin-bottom: 13px;
}

.fh::before {
  content: '';
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: linear-gradient(90deg, #1877F2, #6C4BF6);
  margin-bottom: 9px;
}

.fc {
  display: grid;
  gap: 8px;
}

.fl {
  font-size: 13px;
  line-height: 1.45;
  color: #A7B6CD;
  text-decoration: none;
  transition: color .14s;
}

.fl:hover {
  color: #ffffff;
  text-decoration: none;
}

.fmeta {
  font-size: 13.5px;
  line-height: 1.65;
  color: #6F7F98;
  margin: 0;
}

.fsoc {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 1px solid #1E2A40;
  background: #0C1322;
  color: #A7B6CD;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform .16s, background .16s, border-color .16s;
}

.fsoc:hover {
  background: #162034;
  border-color: #3A4A68;
  color: #ffffff;
  transform: translateY(-2px);
}

.fbot {
  font-size: 12.5px;
  color: #8494AC;
  text-decoration: none;
  transition: color .14s;
}

.fbot:hover {
  color: #ffffff;
  text-decoration: none;
}

/* Footer CTA Banner Styles (matching approvals.coinsclone.com/blog) */
footer[data-cc-footer] {
  padding: clamp(44px, 4.6vw, 64px) 24px 0 !important;
  background: #070C15 !important;
  color: #8494AC !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  position: relative !important;
  z-index: 1 !important;
  clear: both !important;
}

footer[data-cc-footer] * {
  box-sizing: border-box;
}

footer[data-cc-footer] .cc-footer-cta {
  position: relative !important;
  border-radius: 30px !important;
  overflow: hidden !important;
  padding: clamp(28px, 3.2vw, 44px) !important;
  margin-bottom: 36px !important;
  background: linear-gradient(135deg, #0E1A31, #131B2E 52%, #1A1533) !important;
  border: 1px solid #22304A !important;
}

footer[data-cc-footer] .cc-footer-cta-inner {
  position: relative !important;
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 22px 36px !important;
  align-items: center !important;
  justify-content: space-between !important;
  z-index: 2 !important;
}

footer[data-cc-footer] .cc-cta-content {
  max-width: 560px !important;
}

footer[data-cc-footer] .cc-cta-tag,
body.single-post footer[data-cc-footer] .cc-cta-tag {
  font-family: 'IBM Plex Mono', monospace !important;
  font-size: 11px !important;
  letter-spacing: .16em !important;
  text-transform: uppercase !important;
  color: #5FA0FF !important;
  font-weight: 600 !important;
  margin-bottom: 11px !important;
  display: inline-block !important;
}

footer[data-cc-footer] h2,
footer[data-cc-footer] .cc-cta-heading,
body.single-post footer[data-cc-footer] h2,
body.single-post footer[data-cc-footer] .cc-cta-heading,
body.single footer[data-cc-footer] h2 {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: clamp(24px, 2.6vw, 32px) !important;
  line-height: 1.18 !important;
  font-weight: 800 !important;
  letter-spacing: -.022em !important;
  color: #ffffff !important;
  margin: 0 0 10px !important;
  padding: 0 !important;
  text-wrap: pretty;
}

footer[data-cc-footer] p.cc-cta-desc,
footer[data-cc-footer] .cc-footer-cta p,
body.single-post footer[data-cc-footer] p.cc-cta-desc,
body.single-post footer[data-cc-footer] .cc-footer-cta p,
body.single footer[data-cc-footer] p.cc-cta-desc {
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-size: 15.5px !important;
  line-height: 1.6 !important;
  color: #AEBDD3 !important;
  margin: 0 !important;
  padding: 0 !important;
  text-wrap: pretty;
}

footer[data-cc-footer] .cc-cta-actions {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 12px !important;
  align-items: center !important;
}

footer[data-cc-footer] .cc-btn-proposal,
body.single-post footer[data-cc-footer] .cc-btn-proposal,
body.single footer[data-cc-footer] .cc-btn-proposal {
  display: inline-flex !important;
  align-items: center !important;
  gap: 9px !important;
  background: #ffffff !important;
  color: #0F1115 !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  padding: 14px 26px !important;
  border-radius: 999px !important;
  text-decoration: none !important;
  border: 1px solid transparent !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease !important;
  white-space: nowrap !important;
}

footer[data-cc-footer] .cc-btn-proposal:hover {
  background: #E9F1FF !important;
  color: #0F1115 !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 6px 18px rgba(255, 255, 255, 0.15) !important;
}

footer[data-cc-footer] .cc-btn-proposal .cc-chevron {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid #0F1115 !important;
  border-top: 2px solid #0F1115 !important;
  transform: rotate(45deg) !important;
  margin-top: -1px !important;
}

footer[data-cc-footer] .cc-btn-architect,
body.single-post footer[data-cc-footer] .cc-btn-architect,
body.single footer[data-cc-footer] .cc-btn-architect {
  display: inline-flex !important;
  align-items: center !important;
  background: transparent !important;
  color: #D7E2F0 !important;
  font-family: 'Figtree', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  font-weight: 700 !important;
  font-size: 15.5px !important;
  padding: 14px 24px !important;
  border-radius: 999px !important;
  border: 1px solid #34456A !important;
  text-decoration: none !important;
  cursor: pointer !important;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease, transform 0.18s ease !important;
  white-space: nowrap !important;
}

footer[data-cc-footer] .cc-btn-architect:hover {
  background: #16203A !important;
  color: #ffffff !important;
  border-color: #5FA0FF !important;
  text-decoration: none !important;
  transform: translateY(-1px) !important;
}

/* Floating social buttons */
[data-social] {
  position: fixed;
  right: 18px;
  bottom: 24px;
  z-index: 120;
  display: grid;
  gap: 12px;
}

@media (max-width: 860px) {
  [data-shell] header > div {
    padding: 12px 16px !important;
    gap: 12px !important;
    flex-wrap: nowrap !important;
    justify-content: space-between !important;
  }

  [data-shell] header img {
    max-width: min(132px, 48vw) !important;
    height: auto !important;
  }

  [data-social] {
    bottom: 20px;
    right: 14px;
  }

  [data-social] a {
    width: 48px !important;
    height: 48px !important;
  }
}