/* 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: 8px;
  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-2 (the navy blue bar) - legal links + credit text */
.footer-2 .footer_legal-link,
.footer-2 .footer_legal-link:link,
.footer-2 .footer_legal-link:visited { color: rgba(255,255,255,0.7) !important; }
.footer-2 .footer_legal-link:hover,
.footer-2 .footer_legal-link.w--current:hover { color: var(--_primitives---colors--green) !important; }
.footer-2 .footer_legal-link.w--current { color: rgba(255,255,255,0.7) !important; }
.footer-2 .footer_credit-text { color: rgba(255,255,255,0.65); }

/* Social icons: keep CCL's beige default + green hover */
.footer_social-link,
.footer_social-link:link,
.footer_social-link:visited { color: var(--_primitives---colors--beige) !important; }
.footer_social-link:hover { color: var(--_primitives---colors--green) !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; }
}

/* Features section uses Webflow problem_list grid (3-col); ensure dark navy text on white */
.section_problem { background: #fff; }
.section_problem .layout234_item .intro-mantul { color: #1a1e4f; }
.section_problem .icon-1x1-medium { width: 48px; height: 48px; }

/* 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;
}
.ccl-tier-cta {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 22px; border-radius: 999px;
  background: #00f5c9; color: #1a1e4f;
  font-family: var(--_typography---font-styles--heading);
  font-weight: 700;
  text-decoration: none; justify-content: center;
}
.ccl-tier-cta:hover { background: #00d9b3; }
@media (max-width: 991px) {
  .ccl-tiers-3, .ccl-tiers-4 { grid-template-columns: 1fr; }
}

/* FAQ - we use CCL's section_faq + faq_accordion exactly. NO overrides on .section_faq
   (Webflow already styles it with the gradient + faq_bg.svg background full-width).
   The only addition we need is wiring native <details>/<summary> to behave like CCL's
   JS-animated accordion: hide the default marker, rotate the chevron on [open]. */
.faq_accordion { list-style: none; }
.faq_accordion > summary.faq_question { list-style: none; cursor: pointer; }
.faq_accordion > summary.faq_question::-webkit-details-marker { display: none; }
.faq_accordion > summary.faq_question::marker { display: none; }
/* Chevron color: CCL renders it BLACK (inherits from .section_faq text color).
   No color override - we just inherit. Rotate on [open] for native details. */
.faq_accordion[open] > summary > .faq_icon-wrapper { transform: rotate(180deg); }
.faq_icon-wrapper { transition: transform .25s ease; }
/* The collapsed CCL .faq_answer has inline `height: 0px`. Override for our native details
   so the answer pane shows naturally when open and is hidden when closed. */
.faq_accordion .faq_answer { height: auto !important; padding-top: 0; padding-bottom: 1.25rem; }

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

/* Webflow padding-section-large can be heavy on mobile - tighten */
@media (max-width: 767px) {
  .padding-section-large { padding-top: 4rem; padding-bottom: 4rem; }
}

/* Floating Shopify App Store badge (bottom-right of viewport, every page) */
.shopify-floating-badge {
  position: fixed;
  right: clamp(16px, 4vw, 48px);
  bottom: 24px;
  z-index: 40;
  display: inline-block;
  text-decoration: none;
  transition: transform .2s ease, opacity .2s ease;
}
.shopify-floating-badge img {
  width: clamp(140px, 14vw, 200px);
  height: auto;
  display: block;
  filter: drop-shadow(0 6px 18px rgba(0,0,0,0.35));
}
.shopify-floating-badge:hover { transform: translateY(-2px); }
.shopify-floating-badge:hover img { opacity: 0.92; }
@media (max-width: 640px) { .shopify-floating-badge { display: none; } }