/* App-page additions on top of CCL's site.css + ccl-extras.css */

/* Brand text next to logo in topbar - ONLY in navbar, not footer */
.ccl-app-brand-text {
  font-family: var(--_typography---font-styles--heading);
  color: #fff;
  font-size: 1rem;
  margin-left: 12px;
  letter-spacing: 0.01em;
}
.navbar .navbar_logo-link { display: inline-flex; align-items: center; gap: 8px; }
/* Scope the icon size override to the NAVBAR only - the footer needs the original
   wide CCL_Logo_hell sizing (max-width: 120px from site.css). */
.navbar .navbar_logo {
  width: 36px !important; height: 36px !important; border-radius: 16px;
  max-width: 36px !important;
}
.footer .navbar_logo {
  height: auto !important;
  width: auto !important;
  max-width: 140px !important;
  border-radius: 0 !important;
}
@media (max-width: 991px) { .ccl-app-brand-text { display: none; } }

/* CCL hero pattern: navy/black gradient + BG_hero.svg pattern positioned right.
   Already styled by site.css (.section_hero, .hero_content, .hero_background-image,
   .image-overlay-layer). We only need a base background color so the gradient
   covers the entire viewport between paddings. */
.section_hero { background: #1a1e4f; overflow: hidden; }

/* NO button overrides - let site.css .button + .button.primary handle everything,
   including the hover scale + icon transform. (Earlier overrides were causing the arrow
   to disappear on hover by fighting Webflow's transform interactions.) */

/* ---- Footer: 1:1 with CCL visual ----
   Structure: <footer class="footer"> (black) holds main content,
              <div class="footer-2"> (navy #1a1e4f) holds copyright + legal (the "blue bar").
   Footer CSS is mostly inherited from site.css (Webflow). These overrides match the
   exact CCL values (logo 120px desktop / 80px mobile, hover stays green, etc.). */

/* Footer logo: exactly CCL's sizing - 120px default, 80px mobile, no border-radius from
   the nav icon override. We have to !important the size since the nav scope rule used
   .navbar .navbar_logo (which doesn't apply in footer) so the base .navbar_logo from
   site.css already wins, but border-radius from page.css nav rule does leak. */
.footer .navbar_logo,
.footer .footer-logo-img {
  width: 100% !important;
  max-width: 120px !important;
  height: auto !important;
  border-radius: 0 !important;
}
@media (max-width: 991px) {
  .footer .navbar_logo,
  .footer .footer-logo-img { max-width: 80px !important; }
}

/* Email link inside footer: white by default, turquoise on hover.
   CCL's .text-size-small.footer is green; the user prefers white default + green hover. */
.footer a.text-size-small.footer { color: #fff !important; transition: color .2s ease; }
.footer a.text-size-small.footer:hover { color: var(--_primitives---colors--green) !important; }

/* Every footer link gets an EXPLICIT default color + EXPLICIT hover.
   Webflow's .footer_link base rule has no color declaration (inherits from .footer),
   but something on these app pages was making the inherited color black/invisible.
   We pin everything down so what you see matches what you'd see on codecreationlabs.com. */
.footer .footer_link,
.footer .footer_link:link,
.footer .footer_link:visited { color: #fff !important; }
.footer .footer_link:hover,
.footer .footer_link.w--current:hover { color: var(--_primitives---colors--green) !important; }
.footer .footer_link.w--current { color: #fff !important; }

/* Email + tagline text in the left wrapper */
.footer a.text-size-small.footer,
.footer a.text-size-small.footer:link,
.footer a.text-size-small.footer:visited { color: #fff !important; }
.footer a.text-size-small.footer:hover { color: var(--_primitives---colors--green) !important; }

/* Footer social icons inherit their CCL colors straight from site.css (green default,
   beige hover) - no override needed; removing the old override fixed the inverted hover.
   Footer-2 legal links: the app HTML omits CCL's global `a { color: inherit }` embed, so a
   bare <a> falls back to UA black. Pin them to CCL's rendered SOLID WHITE with NO hover
   recolor (CCL legal links do not change color on hover). Credit text is a <div> and already
   inherits white. This matches what codecreationlabs.com actually renders. */
.footer-2 .footer_legal-link,
.footer-2 .footer_legal-link:link,
.footer-2 .footer_legal-link:visited,
.footer-2 .footer_legal-link.w--current { color: #fff !important; }

/* Blue bar layout. On mobile, keep credit + legal links ROW-aligned (not stacked).
   Wrap onto multiple lines as needed but stay horizontal. */
.footer-2 .footer_bottom-wrapper {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  gap: 12px 24px;
  flex-wrap: wrap;
  flex-direction: row !important;
}
.footer-2 .footer_legal-list {
  display: flex !important;
  gap: 1.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.footer-2 .footer_credit-text { margin-top: 0 !important; }

@media (max-width: 480px) {
  /* Tighter spacing on the smallest screens but still horizontal */
  .footer-2 .footer_bottom-wrapper { gap: 8px 16px; }
  .footer-2 .footer_legal-list { gap: 1rem; }
  .footer-2 .footer_credit-text,
  .footer-2 .footer_legal-link { font-size: 0.78rem; }
}

/* ---- Shopify App Store floating badge - 1:1 match with CCL's .shopify-button + .shopify-badge.
   CCL uses position: fixed; inset auto 0% 4rem; width 14rem (224px). Mobile shrinks to 10rem. */
.shopify-floating-badge {
  position: fixed;
  z-index: 99;
  bottom: 4rem;
  right: 5%;
  display: flex;
  text-decoration: none;
  transition: transform .3s ease;
}
.shopify-floating-badge img {
  width: 14rem;
  height: auto;
  display: block;
  cursor: pointer;
}
.shopify-floating-badge:hover img { transform: scale(1.05); }
@media (max-width: 991px) {
  .shopify-floating-badge { bottom: 3rem; }
  .shopify-floating-badge img { width: 10rem; }
}
@media (max-width: 480px) {
  .shopify-floating-badge { bottom: 1rem; right: 4%; }
  .shopify-floating-badge img { width: 9rem; }
}

/* How-it-works steps */
.ccl-howitworks-section { background: #f2f2e4; }
.ccl-steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ccl-step {
  background: #fff; border-radius: 16px; padding: 32px 28px;
  border: 1px solid rgba(0,0,0,0.06);
}
.ccl-step-num {
  font-family: var(--_typography---font-styles--heading);
  color: #00f5c9; font-weight: 700; letter-spacing: 0.1em;
  margin-bottom: 16px;
}
.ccl-step h3 { color: #1a1e4f; margin: 0 0 10px; }
.ccl-step p { color: #5a5a66; margin: 0; }
@media (max-width: 991px) { .ccl-steps-grid { grid-template-columns: 1fr; } }

/* Pricing tiers */
.ccl-pricing-section { background: #fff; }
.ccl-tiers-grid { display: grid; gap: 20px; }
.ccl-tiers-3 { grid-template-columns: repeat(3, 1fr); }
.ccl-tiers-4 { grid-template-columns: repeat(4, 1fr); }
.ccl-tier {
  background: #f9f9f1; border: 1px solid rgba(0,0,0,0.08); border-radius: 18px;
  padding: 32px 28px; display: flex; flex-direction: column;
}
.ccl-tier-highlight {
  background: #1a1e4f; color: #fff;
  border-color: #00f5c9;
  box-shadow: 0 10px 40px rgba(0,245,201,0.18);
}
.ccl-tier-name {
  font-family: var(--_typography---font-styles--heading); font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.85rem;
  color: #00f5c9; margin-bottom: 8px;
}
.ccl-tier-price {
  font-family: var(--_typography---font-styles--heading);
  font-size: 2.4rem; line-height: 1.1; color: #1a1e4f; margin-bottom: 4px;
}
.ccl-tier-highlight .ccl-tier-price { color: #fff; }
.ccl-tier-price span { font-size: 0.95rem; color: #5a5a66; }
.ccl-tier-highlight .ccl-tier-price span { color: rgba(255,255,255,0.7); }
.ccl-tier-best {
  font-family: var(--_typography---font-styles--heading);
  color: #5a5a66; font-size: 0.92rem; margin-bottom: 20px;
}
.ccl-tier-highlight .ccl-tier-best { color: rgba(255,255,255,0.7); }
.ccl-tier-features {
  list-style: none; padding: 0; margin: 0 0 24px; flex-grow: 1;
  display: flex; flex-direction: column; gap: 8px;
}
.ccl-tier-features li {
  padding-left: 22px; position: relative; color: #1a1e4f; font-size: 0.95rem;
}
.ccl-tier-highlight .ccl-tier-features li { color: rgba(255,255,255,0.92); }
.ccl-tier-features li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 14px; height: 14px;
  background: #00f5c9; border-radius: 50%;
  -webkit-mask: url("/img/check.svg") center/65% no-repeat;
          mask: url("/img/check.svg") center/65% no-repeat;
}
/* Tier CTA is now CCL's canonical .button.primary (uppercase, letter-spacing, animated arrow,
   pill radius + lift/fade hover - all from site.css). No custom pill button. */
@media (max-width: 991px) {
  .ccl-tiers-3, .ccl-tiers-4 { grid-template-columns: 1fr; }
}

/* FAQ - 1:1 with CCL: the accordion is plain <div class="faq_accordion"> with
   <div class="faq_question"> + <div style="height:0px" class="faq_answer">, driven entirely by
   site.css + the Webflow IX2 runtime (a-17 animates height + rotates the chevron). No page.css
   override - any height/marker/rotate rule here would fight the IX2 height animation. */

/* @-sign in the support email: inline span purely to break naive bot regex */
.ccl-at { font-style: normal; }

/* Floating badge hidden on the smallest screens (documented per-app behavior; CCL keeps it).
   The badge's position/size/hover are defined ONCE above to match CCL's .shopify-button /
   .shopify-badge (bottom 4rem, 14rem wide, scale(1.05) hover, no drop-shadow). */
@media (max-width: 640px) { .shopify-floating-badge { display: none; } }