/* ============================================================
   Conversion CTA styles — Softomate Solutions
   Brand palette: #003d82 (primary blue), #0b1726 (dark navy), #ffffff
   1. Mobile sticky bottom bar (Call + WhatsApp)
   2. Inline contextual "call us" CTA block (service pages + blog)
   3. Hero CTA row (hero banner)
   Mobile-first. Desktop hides the sticky bar.
   ============================================================ */

/* ---------- 1. MOBILE STICKY BOTTOM BAR ---------- */
.ss-sticky-cta {
   position: fixed;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: 9990;
   display: flex;
   gap: 1px;
   background: #0b1726;
   box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.18);
   padding: 0;
}

.ss-sticky-cta__btn {
   flex: 1 1 50%;
   display: flex;
   align-items: center;
   justify-content: center;
   gap: 8px;
   min-height: 54px;
   font-size: 15px;
   font-weight: 600;
   letter-spacing: 0.2px;
   text-decoration: none;
   color: #fff;
   transition: background 0.15s ease, color 0.15s ease;
   -webkit-tap-highlight-color: transparent;
}

.ss-sticky-cta__btn i { font-size: 16px; }

/* Call = brand blue, hover reverses to white text on deeper blue */
.ss-sticky-cta__call { background: #003d82; color: #ffffff; }
.ss-sticky-cta__call:active { background: #002d62; }

/* WhatsApp = white bg, blue text — reverses on hover */
.ss-sticky-cta__wa { background: #ffffff; color: #003d82; }
.ss-sticky-cta__wa:active { background: #e8f0fc; }

/* Reserve space so the bar never covers the footer's last line on mobile */
@media (max-width: 991px) {
   body { padding-bottom: 54px; }
   .whatsapp-icon,
   #whatsappIcon,
   .chat-panel,
   #chatPanel { display: none !important; }
}

/* Hide the sticky bar on desktop */
@media (min-width: 992px) {
   .ss-sticky-cta { display: none; }
}

/* ---------- 2. INLINE CONTEXTUAL CTA BLOCK ---------- */
.ss-call-cta {
   margin: 40px auto;
   max-width: 1100px;
   padding: 0 16px;
}

.ss-call-cta__inner {
   background: linear-gradient(135deg, #0b1726 0%, #14304f 100%);
   border-radius: 16px;
   padding: 32px 28px;
   display: flex;
   flex-direction: column;
   gap: 20px;
   align-items: center;
   text-align: center;
}

.ss-call-cta__heading {
   color: #fff;
   font-size: 22px;
   line-height: 1.3;
   margin: 0 0 8px;
   font-weight: 700;
}

.ss-call-cta__sub {
   color: #c7d4e2;
   font-size: 16px;
   line-height: 1.55;
   margin: 0;
}

.ss-call-cta__actions {
   display: flex;
   flex-wrap: wrap;
   gap: 12px;
   justify-content: center;
}

.ss-call-cta__btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 13px 22px;
   border-radius: 10px;
   font-size: 15px;
   font-weight: 600;
   text-decoration: none;
   transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}

.ss-call-cta__btn:hover { transform: translateY(-2px); }

/* Call button — solid white, blue text. Hover: brand blue bg, white text */
.ss-call-cta__btn--call {
   background: #ffffff;
   color: #003d82;
}
.ss-call-cta__btn--call:hover {
   background: #003d82;
   color: #ffffff;
}

/* WhatsApp button — brand blue bg, white text. Hover: white bg, blue text */
.ss-call-cta__btn--wa {
   background: #003d82;
   color: #ffffff;
}
.ss-call-cta__btn--wa:hover {
   background: #ffffff;
   color: #003d82;
}

/* Book button — ghost border, white text. Hover: white bg, navy text */
.ss-call-cta__btn--book {
   background: transparent;
   color: #ffffff;
   border: 1.5px solid rgba(255, 255, 255, 0.6);
}
.ss-call-cta__btn--book:hover {
   background: #ffffff;
   color: #0b1726;
}

/* Desktop: side-by-side text and actions */
@media (min-width: 768px) {
   .ss-call-cta__inner {
      flex-direction: row;
      justify-content: space-between;
      text-align: left;
      padding: 36px 40px;
   }
   .ss-call-cta__heading { font-size: 26px; }
   .ss-call-cta__actions { flex-shrink: 0; }
}

/* ---------- 3. HERO CTA ROW (hero banner on service pages + blog) ---------- */
.ss-hero-cta {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   gap: 12px;
   margin-top: 18px;
   position: relative;
   z-index: 2;
}

.ss-hero-cta__phone {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   color: #ffffff;
   font-weight: 700;
   font-size: 1.05rem;
   text-decoration: none;
   white-space: nowrap;
}
/* White phone icon — matches text colour, clean on dark hero */
.ss-hero-cta__phone i { color: #ffffff; }
.ss-hero-cta__phone:hover { opacity: 0.85; }

.ss-hero-cta__btn {
   display: inline-flex;
   align-items: center;
   gap: 8px;
   padding: 11px 20px;
   border-radius: 9px;
   font-weight: 600;
   font-size: 0.95rem;
   text-decoration: none;
   transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.ss-hero-cta__btn:hover { transform: translateY(-2px); }

/* WhatsApp — brand blue bg, white text. Hover reverses: white bg, blue text */
.ss-hero-cta__btn--wa {
   background: #003d82;
   color: #ffffff;
}
.ss-hero-cta__btn--wa:hover {
   background: #ffffff;
   color: #003d82;
}

/* Book a Call — white bg, navy text. Hover reverses: navy bg, white text */
.ss-hero-cta__btn--book {
   background: #ffffff;
   color: #0b1726;
}
.ss-hero-cta__btn--book:hover {
   background: #003d82;
   color: #ffffff;
}

@media (max-width: 480px) {
   .ss-hero-cta { gap: 8px; }
   .ss-hero-cta__phone { width: 100%; }
   .ss-hero-cta__btn { flex: 1 1 auto; justify-content: center; }
}