.elementor-kit-8{--e-global-color-primary:#FF2636;--e-global-color-secondary:#141010;--e-global-color-text:#141414;--e-global-color-accent:#D6101F;--e-global-color-c20d4c6:#E01422;--e-global-color-2e3c347:#5E5759;--e-global-color-aa58441:#7A7A7A;--e-global-color-eabb4a3:#EDEDED;--e-global-color-4a403d9:#F8F8F8;--e-global-color-c7724a5:#FFECEE;--e-global-color-f715bd3:#F4F1F1;--e-global-color-071bf32:#FFC2C7;--e-global-typography-secondary-font-family:"Barlow Condensed";--e-global-typography-secondary-font-weight:700;--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Inter";--e-global-typography-accent-font-weight:700;color:#5E5759;font-family:"Inter", Sans-serif;font-size:16px;font-weight:400;}.elementor-kit-8 button,.elementor-kit-8 input[type="button"],.elementor-kit-8 input[type="submit"],.elementor-kit-8 .elementor-button{background-color:#FF2636;font-family:"Inter", Sans-serif;font-size:16px;font-weight:700;border-radius:10px 10px 10px 10px;padding:16px 26px 16px 26px;}.elementor-kit-8 button:hover,.elementor-kit-8 button:focus,.elementor-kit-8 input[type="button"]:hover,.elementor-kit-8 input[type="button"]:focus,.elementor-kit-8 input[type="submit"]:hover,.elementor-kit-8 input[type="submit"]:focus,.elementor-kit-8 .elementor-button:hover,.elementor-kit-8 .elementor-button:focus{background-color:#E01422;}.elementor-kit-8 e-page-transition{background-color:#FFBC7D;}.elementor-kit-8 h1{color:#141414;font-family:"Barlow Condensed", Sans-serif;font-weight:800;text-transform:uppercase;}.elementor-kit-8 h2{color:#141414;font-family:"Barlow Condensed", Sans-serif;font-weight:800;text-transform:uppercase;}.elementor-kit-8 h3{color:#141414;}.elementor-kit-8 h4{color:#141414;}.elementor-kit-8 h5{color:#141414;}.elementor-kit-8 h6{color:#141414;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* Car Key Guru – site-wide custom CSS
   Paste into: Elementor > Site Settings > Custom CSS (or Appearance > Customize > Additional CSS).
   Everything element-specific already lives in each element's own Custom CSS inside the JSON;
   this file only covers things Elementor has no control for. */

/* Smooth scroll + offset so the sticky header doesn't cover section titles */
html { scroll-behavior: smooth; }
#services, #how-it-works, #what-to-send, #faq, #contact { scroll-margin-top: 84px; }
@media (max-width: 767px) {
  #services, #how-it-works, #what-to-send, #faq, #contact { scroll-margin-top: 70px; }
}

/* Red span inside H1 / CTA H2 (fallback if the inline style is stripped by a sanitiser) */
.elementor-heading-title span[style*="FF2636"] { color: #FF2636; }

/* Body text paragraphs: no extra bottom gap inside cards */
.elementor-widget-text-editor p:last-child { margin-bottom: 0; }

/* WhatsApp buttons: keep icon vertically centred */
.elementor-button .elementor-button-content-wrapper { align-items: center; }

/* Hero visual + phone/key tile (also inlined in the HTML widgets) */
.ckg-visual svg { max-width: 220px; }
.ckg-tile svg { display: block; }

/* Burger dropdown (also set on the widget's own Custom CSS) */
.ckg-burger { position: relative; }
.ckg-burger summary { list-style: none; cursor: pointer; width: 44px; height: 44px; border: 1px solid #EDEDED; border-radius: 10px;
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; }
.ckg-burger summary::-webkit-details-marker { display: none; }
.ckg-burger summary span { display: block; width: 20px; height: 2px; background: #141414; border-radius: 2px; }
.ckg-burger nav { position: absolute; right: 0; top: 54px; min-width: 220px; background: #fff; border: 1px solid #F0ECEC; border-radius: 14px;
  box-shadow: 0 18px 40px rgba(20,16,16,.14); padding: 8px; display: flex; flex-direction: column; z-index: 999; }
.ckg-burger nav a { font: 500 15px/1.3 Inter, sans-serif; color: #141414; padding: 12px 14px; border-radius: 10px; text-decoration: none; }
.ckg-burger nav a:hover { background: #FFECEE; color: #D6101F; }

/* FAQ accordion: remove default focus outline offset, keep visible focus ring */
.e-n-accordion-item-title:focus-visible { outline: 2px solid #FF2636; outline-offset: 2px; }

/* Accessibility: keyboard focus on buttons and links */
.elementor-button:focus-visible, a:focus-visible { outline: 2px solid #FF2636; outline-offset: 3px; }

/* ===== Car Key Guru – home draft fixes (append to Site Settings > Custom CSS, after custom.css) =====
   Selectors hang off the section anchors (#what-to-send, #contact, #faq), which survive template
   insertion. Elementor can give elements new data-ids when a template is inserted into a page, so
   the .elementor-element-<id> .elementor-kit-8s (IDs from home.json) are a second hook only. */

/* 1. Final CTA band: dark gradient + dot texture + red glow (band = first container inside the section after #faq) */
#faq + .e-con > .e-con-inner > .e-con,
#faq + .e-con > .e-con,
.elementor-element-40f0798c {
  background-color: #141010 !important;
  background-image:
    radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    radial-gradient(circle at 85% 0%, rgba(255,38,54,.45), transparent 50%),
    linear-gradient(135deg, #1E1414 0%, #141010 100%) !important;
  background-size: 18px 18px, auto, auto !important;
  border-radius: 28px !important;
  overflow: hidden;
}
@media (max-width: 767px) {
  #faq + .e-con > .e-con-inner > .e-con, #faq + .e-con > .e-con, .elementor-element-40f0798c { border-radius: 22px !important; }
}

/* 2. "Not every car key can be copied" note: stop the icon tile shrinking under the title */
#what-to-send .elementor-widget-icon,
.elementor-element-fcede8d0 {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 52px;
  max-width: none !important;
}
#what-to-send .elementor-widget-icon + .e-con,
.elementor-element-be37c5a6 {
  flex: 1 1 0% !important;
  width: auto !important;
  min-width: 0 !important;
  --width: auto;
}

/* 3. Visit panel: restore dot texture, and make the map fill the right column */
#contact > .e-con-inner > .e-con,
#contact > .e-con,
.elementor-element-3d96e4e5 {
  background-color: #141010 !important;
  background-image: radial-gradient(rgba(255,255,255,.07) 1px, transparent 1px) !important;
  background-size: 18px 18px !important;
  overflow: hidden;
}
#contact .elementor-widget-google_maps,
.elementor-element-fdf881ba { width: 100% !important; flex: 1 1 auto; }
#contact .elementor-widget-google_maps .elementor-custom-embed,
#contact .elementor-widget-google_maps iframe {
  display: block; width: 100% !important; height: 440px !important; border: 0; border-radius: 18px;
}
@media (max-width: 1024px) { #contact .elementor-widget-google_maps iframe { height: 380px !important; } }
@media (max-width: 767px)  { #contact .elementor-widget-google_maps iframe { height: 300px !important; } }

/* 4. FAQ answers: inner padding (the answer containers were imported with padding 0, overriding the accordion's content padding) */
#faq .e-n-accordion-item > .e-con,
#faq .e-n-accordion-item > div[role="region"] {
  padding: 0 24px 22px 24px !important;
  --padding-top: 0px; --padding-right: 24px; --padding-bottom: 22px; --padding-left: 24px;
}
@media (max-width: 767px) {
  #faq .e-n-accordion-item > .e-con,
  #faq .e-n-accordion-item > div[role="region"] {
    padding: 0 18px 18px 18px !important;
    --padding-top: 0px; --padding-right: 18px; --padding-bottom: 18px; --padding-left: 18px;
  }
}

/* (Optional, temporary) Hello theme default footer logo while the Elementor footer has no display condition */
#site-footer .site-logo img, .site-footer .site-branding img { max-height: 56px; width: auto; }
/* mobile: map embed wrapper must not keep desktop 440px height */
@media (max-width: 767px) { #contact .elementor-widget-google_maps .elementor-custom-embed { height: 300px !important; } }/* ===== Car Key Guru – /phone-as-car-key/ extras (APPEND-ONLY; add after custom.css + fixes.css in Site Settings > Custom CSS) ===== */
/* Price cards: big Barlow price + featured middle card */
.ckg-price .ckg-amount, .ckg-price .ckg-amount .elementor-heading-title { font-variant-numeric: tabular-nums; white-space: nowrap; }
.ckg-price-featured { border: 2px solid #FF2636 !important; }
@media (max-width: 767px) { .ckg-price .ckg-amount .elementor-heading-title { font-size: 46px !important; } }
/* Hero phone visual */
.ckg-phone svg { width: 46%; max-width: 230px; height: auto; filter: drop-shadow(0 24px 40px rgba(0,0,0,.5)); transform: rotate(-6deg); }

/* Car Key Guru – blog theme additions. Append to Site Settings > Custom CSS (kit 8). Scoped to .ckg-archive / .ckg-post only. */
.ckg-archive .elementor-post__card { transition: transform .2s ease, box-shadow .2s ease; overflow: hidden; }
.ckg-archive .elementor-post__card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20,16,16,.12); }
.ckg-archive .elementor-post__thumbnail__link { margin-bottom: 0 !important; }
.ckg-archive .elementor-post__thumbnail img { transition: transform .3s ease; }
.ckg-archive .elementor-post__card:hover .elementor-post__thumbnail img { transform: scale(1.03); }
.ckg-archive .elementor-post__badge { letter-spacing: .5px; line-height: 1; padding: 7px 12px; }
.ckg-archive .elementor-post__title a { color: inherit; }
.ckg-archive .elementor-post__title a:hover { color: #D6101F; }
.ckg-archive .elementor-post__read-more { text-decoration: none; }
.ckg-archive .elementor-post__meta-data { display: none; }
.ckg-archive .elementor-pagination .page-numbers { display: inline-flex; min-width: 40px; height: 40px; align-items: center; justify-content: center;
  border: 1px solid #EDEDED; border-radius: 10px; margin: 0 3px; padding: 0 12px; background: #fff; text-decoration: none; }
.ckg-archive .elementor-pagination .page-numbers.current { background: #FF2636; border-color: #FF2636; color: #fff; }
/* single post body */
.ckg-post h2, .ckg-post h3 { font-family: "Barlow Condensed", sans-serif; font-weight: 800; text-transform: uppercase; color: #141414; line-height: 1.1; }
.ckg-post h2 { font-size: 34px; margin: 44px 0 14px; }
.ckg-post h3 { font-size: 24px; margin: 28px 0 10px; }
.ckg-post p, .ckg-post ul { margin: 0 0 18px; }
.ckg-post ul { padding-left: 22px; }
.ckg-post li { margin-bottom: 8px; }
.ckg-post li::marker { color: #FF2636; }
.ckg-post a { color: #D6101F; text-decoration: underline; text-underline-offset: 3px; }
.ckg-post a:hover { color: #FF2636; }
@media (max-width: 767px) { .ckg-post h2 { font-size: 28px; } .ckg-post h3 { font-size: 21px; } }/* End custom CSS */