/* cktechindia.com shared UX layer: mobile friendliness and visibility.
   Loaded after main.css from common/header.html. Tenant-owned: served from /assets/css/ux.css. */

html { scroll-padding-top: 90px; }

/* Visible keyboard focus everywhere (Bootstrap's default is easy to miss on the dark header). */
:focus-visible { outline: 3px solid #e0a31a; outline-offset: 2px; }

/* Respect "reduce motion": no pulsing, sliding or scroll animation for people who ask for it. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; scroll-behavior: auto !important; }
}

/* Feature cards: the page's own CSS used Bootstrap 5.3 colour variables that this site's Bootstrap 5.0 does not define,
   so the icons had no tile and rendered tiny. Give them the site's own colours. */
.feature-card .feature-icon { background: var(--secondary, #E8ECF8); color: var(--primary, #1b1f42); width: 52px; height: 52px; font-size: 22px; }
.feature-card .feature-icon i { line-height: 1; }

/* Comparison tables: readable on a phone, with the row label kept in view while scrolling sideways. */
.table-swipe-hint { display: none; }
@media (max-width: 767.98px) {
  .table-responsive { -webkit-overflow-scrolling: touch; border-radius: 12px; }
  .table-responsive > table { min-width: 620px; }
  .table-responsive > table th[scope="row"] { position: sticky; left: 0; z-index: 1; background: #f8f9fc; box-shadow: 1px 0 0 #dee2e6; min-width: 130px; }
  .table-swipe-hint { display: block; text-align: center; font-size: .85rem; font-weight: 600; color: #1b1f42; margin: 0 0 .5rem; }
}

/* Phone: comfortable tap targets. */
@media (max-width: 767.98px) {
  .btn:not(.btn-sm):not(.btn-lg-square), .accordion-button { min-height: 44px; }
  .accordion-button { padding-top: .85rem; padding-bottom: .85rem; }
}

/* Phone: one sticky Call / WhatsApp / Free Demo bar so the contact options are always one tap away. */
.ck-mobile-bar { display: none; }
@media (max-width: 767.98px) {
  .ck-mobile-bar {
    display: grid; grid-template-columns: 1fr 1fr 1.3fr; gap: 8px;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 1080;
    padding: 8px 12px calc(8px + env(safe-area-inset-bottom));
    background: #fff; border-top: 1px solid #e4e8f1; box-shadow: 0 -4px 18px rgba(27, 31, 66, .14);
  }
  .ck-mobile-bar a {
    display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 46px;
    border-radius: 12px; font-weight: 700; font-size: .95rem; text-decoration: none !important;
    color: #1b1f42; background: #eef1f9;
  }
  .ck-mobile-bar .ck-mb-wa { background: #25d366; color: #fff; }
  .ck-mobile-bar .ck-mb-demo { background: #e0a31a; color: #1b1f42; }
  body { padding-bottom: 72px; }
  /* the bar replaces the round WhatsApp button; the other floating items move up so nothing overlaps */
  .whatsapp-float { display: none !important; }
  .back-to-top { bottom: 84px !important; }
  #cookieConsentBanner { bottom: 66px !important; }
}