/* ==========================================================================
   Square Loop — inner page components (loaded after client.css)
   ========================================================================== */

/* Breadcrumbs (Rank Math) */
.sl-breadcrumbs .rank-math-breadcrumb p { margin: 0; font-size: 14px; color: var(--sl-muted); }
.sl-breadcrumbs .rank-math-breadcrumb a { color: var(--sl-muted); text-decoration: none; }
.sl-breadcrumbs .rank-math-breadcrumb a:hover { color: var(--sl-primary); }
.sl-breadcrumbs .rank-math-breadcrumb .separator { margin: 0 8px; color: #A3ACCB; }
.sl-breadcrumbs .rank-math-breadcrumb .last { color: var(--sl-heading); font-weight: 600; }
.sl-breadcrumbs--center .rank-math-breadcrumb { text-align: center; }

/* Mock UI card (stands in for product screenshots) */
.sl-mock { background: #fff; border: 1px solid var(--sl-border); border-radius: 18px; box-shadow: var(--sl-shadow-lg); overflow: hidden; max-width: 520px; margin: 0 auto; }
.sl-mock__bar { display: flex; align-items: center; gap: 6px; padding: 10px 16px; background: var(--sl-soft); border-bottom: 1px solid var(--sl-border); }
.sl-mock__bar span { width: 9px; height: 9px; border-radius: 50%; background: #D5DAEA; }
.sl-mock__bar em { margin-left: auto; font-style: normal; font-size: 12px; color: var(--sl-muted); }
.sl-mock__head { display: flex; align-items: center; gap: 12px; padding: 18px 22px 8px; }
.sl-mock__head i { width: 38px; height: 38px; border-radius: 10px; background: var(--sl-primary-50); color: var(--sl-primary); display: inline-flex; align-items: center; justify-content: center; font-size: 16px; }
.sl-mock__head strong { font: 700 16px/1.3 "Plus Jakarta Sans", sans-serif; color: var(--sl-heading); }
.sl-mock__rows { list-style: none; margin: 0; padding: 6px 22px 20px; }
.sl-mock__rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 13px 0; border-bottom: 1px dashed var(--sl-border); font-size: 14.5px; color: var(--sl-heading); }
.sl-mock__rows li:last-child { border-bottom: 0; }
.sl-mock__rows small { display: block; font-size: 12.5px; color: var(--sl-muted); margin-top: 2px; }
.sl-mock__val { font-weight: 700; white-space: nowrap; }
.sl-chip { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; }
.sl-chip--ok { background: #ECFDF3; color: #16A34A; }
.sl-chip--info { background: var(--sl-primary-50); color: var(--sl-primary); }
.sl-chip--warn { background: #FFF7E6; color: #B45309; }
.sl-chip--bad { background: #FEF2F2; color: #DC2626; }

/* Hero images rendered from HTML widgets */
.sl-hero-img { width: 100%; height: auto; border-radius: 14px; box-shadow: var(--sl-shadow-lg); display: block; }
.squareloop img.sl-phone-img { width: 100%; max-width: 300px; height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 24px 40px rgba(13,19,64,.25)); }
.sl-phones { display: flex; justify-content: center; align-items: flex-end; gap: 0; }
.sl-phones img { width: 40%; max-width: 240px; height: auto; filter: drop-shadow(0 24px 40px rgba(13,19,64,.22)); }
.sl-phones img:nth-child(1), .sl-phones img:nth-child(3) { transform: scale(.86); opacity: .95; }
.sl-phones img:nth-child(1) { margin-right: -9%; }
.sl-phones img:nth-child(3) { margin-left: -9%; }
.sl-phones img:nth-child(2) { position: relative; z-index: 2; }

/* Pills */
.sl-pills { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 0; padding: 0; }
.sl-pills li { font-size: 13.5px; font-weight: 600; color: var(--sl-primary); background: var(--sl-primary-50); border-radius: 999px; padding: 7px 13px; }

/* Industry visual tile (industries page rows) */
.sl-ind-visual { border-radius: 22px; min-height: 320px; display: flex; flex-direction: column; justify-content: space-between; padding: 32px; color: #fff; box-shadow: var(--sl-shadow-lg); position: relative; overflow: hidden; }
.sl-ind-visual::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 240px; height: 240px; border-radius: 50%; background: rgba(255,255,255,.08); }
.sl-ind-visual i { font-size: 46px; opacity: .95; }
.sl-ind-visual strong { font: 800 26px/1.2 "Plus Jakarta Sans", sans-serif; display: block; }
.sl-ind-visual span { font-size: 14px; opacity: .8; }

/* Numbered reason cards */
.sl-num .elementor-heading-title { font: 800 15px/1 "Plus Jakarta Sans", sans-serif !important; color: var(--sl-primary) !important; background: var(--sl-primary-50); width: 42px; height: 42px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; }

/* Flow lanes (features page) */
.sl-lanes .sl-flow__step { font-size: 13.5px; }

/* Plan cards */
.sl-plan-price .elementor-heading-title { font: 800 30px/1.1 "Plus Jakarta Sans", sans-serif !important; }

/* Contact cards */
.sl-contact-card a { color: var(--sl-primary); font-weight: 600; text-decoration: none; }

/* Map */
.sl-map iframe { border-radius: 18px; filter: saturate(.9); }

/* Legal / plain pages */
.sl-prose { max-width: 820px; margin: 0 auto; }

/* Blog archive (theme template) */
.squareloop.blog .site-main, .squareloop.archive .site-main { max-width: 1240px; margin: 0 auto; padding: 64px 24px; }

/* --------------------------------------------------------------------------
   AI Assistant chat mock-up
   -------------------------------------------------------------------------- */
.sl-chat { background: #fff; border: 1px solid var(--sl-border); border-radius: 20px; box-shadow: var(--sl-shadow-lg); overflow: hidden; max-width: 540px; margin: 0 auto; font-size: 14.5px; }
.sl-chat__bar { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--sl-border); background: var(--sl-soft); }
.sl-chat__bar i { width: 30px; height: 30px; border-radius: 9px; background: linear-gradient(135deg, var(--sl-primary), var(--sl-secondary)); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-size: 13px; }
.sl-chat__bar strong { font: 700 15px/1.2 "Plus Jakarta Sans", sans-serif; color: var(--sl-heading); }
.sl-chat__bar em { margin-left: auto; font-style: normal; font-size: 12px; font-weight: 600; color: #16A34A; background: #ECFDF3; padding: 4px 10px; border-radius: 999px; }
.sl-chat__body { padding: 20px 18px 22px; display: flex; flex-direction: column; gap: 14px; }
.sl-chat__q { align-self: flex-end; max-width: 82%; background: var(--sl-primary); color: #fff; padding: 11px 15px; border-radius: 16px 16px 4px 16px; font-weight: 500; }
.sl-chat__a { align-self: flex-start; max-width: 92%; background: var(--sl-soft); color: var(--sl-heading); border: 1px solid var(--sl-border); padding: 14px 16px; border-radius: 16px 16px 16px 4px; line-height: 1.55; }
.sl-chat__a ul { list-style: none; margin: 10px 0 0; padding: 0; }
.sl-chat__a li { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px dashed var(--sl-border); }
.sl-chat__a li:last-child { border-bottom: 0; }
.sl-chat__a li b { color: var(--sl-primary); white-space: nowrap; }
.sl-chat__src { font-size: 12.5px; color: var(--sl-muted); display: flex; align-items: center; gap: 6px; }
.sl-chat__src::before { content: ""; width: 14px; height: 14px; border-radius: 4px; background: var(--sl-primary-50); border: 1px solid #C9CFEA; }
.sl-chat__input { display: flex; align-items: center; gap: 10px; margin: 0 18px 18px; padding: 10px 10px 10px 16px; border: 1px solid var(--sl-border); border-radius: 12px; color: var(--sl-muted); font-size: 14px; }
.sl-chat__input span { margin-left: auto; width: 34px; height: 34px; border-radius: 9px; background: var(--sl-primary); color: #fff; display: inline-flex; align-items: center; justify-content: center; }

/* Speech-bubble example questions */
.sl-bubbles { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 0; padding: 0; list-style: none; }
.sl-bubbles li { background: var(--sl-primary-50); color: var(--sl-heading); padding: 9px 13px; border-radius: 14px 14px 14px 4px; font-size: 14.5px; font-style: italic; }
.sl-answered { font-size: 13.5px; color: var(--sl-muted); border-top: 1px solid var(--sl-border); padding-top: 12px; margin: 0; }
.sl-answered strong { color: var(--sl-heading); }

/* Example chips (home AI band) */
.sl-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.sl-chips li { background: #fff; border: 1px solid #C9CFEA; color: var(--sl-primary); font-weight: 600; font-size: 14px; padding: 8px 14px; border-radius: 999px; }
.sl-chips li::before { content: "✦ "; color: var(--sl-accent); }

/* Mega menu AI row */
.sl-mega-ai { border: 1px dashed #C9CFEA; background: linear-gradient(90deg, #F5F7FF, #FFF9EE); }
.sl-mega-ai:hover { background: linear-gradient(90deg, #EEF0FB, #FFF3DC); }
.sl-badge-new .elementor-heading-title { display: inline-block; background: var(--sl-accent); color: #fff !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .08em; padding: 3px 8px; border-radius: 6px; }

/* Industries page: photo visuals with the logo-blue overlay (matches the Home industry cards). */
.sl-ind-visual--photo { background: #0D1340; isolation: isolate; }
.sl-ind-visual--photo .sl-ind-visual__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; transition: transform .6s var(--sl-ease); }
.sl-ind-visual--photo::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background: linear-gradient(180deg, rgba(13,19,64,.92) 0%, rgba(27,39,128,.78) 32%, rgba(34,49,151,.42) 62%, rgba(13,19,64,.70) 100%);
}
.sl-ind-visual--photo::after { display: none; }
.sl-ind-visual--photo i { width: 58px; height: 58px; border-radius: 16px; display: inline-flex; align-items: center; justify-content: center; font-size: 26px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.25); backdrop-filter: blur(4px); }
.sl-ind-visual--photo span { color: rgba(225,229,255,.85); }
.sl-ind-visual--photo:hover .sl-ind-visual__img { transform: scale(1.05); }