/* Central Indy IT, Proposed mock. Their palette, type and layout; only the
   pieces listed in docs/STATE.md change. Our own controls use html body plus
   !important so the builder's global styles cannot reach them. */

/* ---------- header: thinner, and it stays with you ---------- */
html.cii-thin .header-top-bar { padding-top: 8px !important; padding-bottom: 8px !important; }
html.cii-thin .header-top-bar .row-align-center { padding-top: 0 !important; padding-bottom: 0 !important; }
html.cii-thin .header-top-bar .header-top { padding-top: 2px !important; padding-bottom: 2px !important; }
html.cii-thin .header-main:not(.cii-stuck) { top: var(--cii-top, 36px) !important; }
html.cii-thin .header-main { padding-top: 6px !important; padding-bottom: 6px !important; }
html.cii-thin .header-main .row-align-center,
html.cii-thin .header-main .noBorder { padding-top: 0 !important; padding-bottom: 0 !important; }
html.cii-thin .header-main .branding img { width: 205px !important; height: auto !important; }

html body .header-main.cii-stuck {
  position: fixed !important;
  top: 0;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: #1d1d23 !important;
  box-shadow: 0 2px 14px rgba(0, 0, 0, .35);
  z-index: 900 !important;
  animation: cii-drop .22s ease-out;
}
@keyframes cii-drop { from { top: -90px; } to { top: 0; } }
@media (prefers-reduced-motion: reduce) { html body .header-main.cii-stuck { animation: none; } }

/* The phone number next to the menu button, phone only. */
html body .cii-call { display: none !important; }

/* ---------- buttons: white text on a light blue was hard to read ---------- */
html body .menu-btn ul.nav-menu li.nav-menu-item:last-child a,
html body .gradient-bg-btn.blue,
html body .form-builder--wrap .button-element {
  background: linear-gradient(270deg, #1f45ad -20.83%, #4340e2 15%, #9b5fd6 94.34%) !important;
  color: #fff !important;
}

/* ---------- scroll lock while a window is open ---------- */
html.cii-locked, html.cii-locked body { overflow: hidden !important; }
html.cii-locked body { position: fixed !important; left: 0; right: 0; width: 100% !important; }

/* Floating pieces step aside while the menu or a window is open. */
html.cii-locked .cii-chat-btn, html.cii-locked .cii-chat,
html.cii-menu-open .cii-chat-btn, html.cii-menu-open .cii-chat,
html.cii-locked [class*="slide-in__PositionContainer"],
html.cii-menu-open [class*="slide-in__PositionContainer"] { display: none !important; }

/* ---------- the request window ---------- */
html body .cii-modal {
  position: fixed !important; inset: 0 !important; z-index: 2147483200 !important;
  display: flex !important; align-items: center; justify-content: center;
  padding: 16px !important; margin: 0 !important;
  background: rgba(16, 16, 22, .55) !important;
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; transition: opacity .18s ease-out;
  font-family: Rubik, Arial, Helvetica, sans-serif !important;
}
html body .cii-modal[hidden] { display: none !important; }
html body .cii-modal.open { opacity: 1; }
html body .cii-card {
  position: relative; box-sizing: border-box !important;
  width: 100% !important; max-width: 460px !important; max-height: calc(100vh - 32px); max-height: calc(100dvh - 32px); overflow-y: auto;
  background: #fff !important; color: #1d1d23 !important; border-radius: 16px !important;
  padding: 28px 28px 22px !important; box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
  transform: translateY(8px); transition: transform .18s ease-out;
}
html body .cii-modal.open .cii-card { transform: none; }
html body .cii-card h2 { font: 600 26px/1.2 Rubik, Arial, sans-serif !important; color: #1d1d23 !important; margin: 0 0 6px !important; padding: 0 44px 0 0 !important; text-align: left !important; }
html body .cii-card .cii-sub { font: 400 15px/1.45 Rubik, Arial, sans-serif !important; color: #4a4a55 !important; margin: 0 0 18px !important; }
html body .cii-card label { display: block !important; font: 500 14px/1.3 Rubik, Arial, sans-serif !important; color: #1d1d23 !important; margin: 0 0 12px !important; text-align: left !important; }
html body .cii-card label span { color: #9b5fd6 !important; margin-left: 2px; }
html body .cii-card input,
html body .cii-card textarea {
  display: block !important; box-sizing: border-box !important; width: 100% !important;
  margin: 6px 0 0 !important; padding: 11px 12px !important; min-height: 44px !important;
  border: 1px solid #c9c9d3 !important; border-radius: 10px !important; background: #fff !important;
  font: 400 16px/1.35 Rubik, Arial, sans-serif !important; color: #1d1d23 !important; box-shadow: none !important; outline: none !important;
}
html body .cii-card textarea { resize: vertical; min-height: 80px !important; }
html body .cii-card input:focus-visible,
html body .cii-card textarea:focus-visible { border-color: #4340e2 !important; box-shadow: 0 0 0 3px rgba(67, 64, 226, .22) !important; }
html body .cii-card .cii-bad { border-color: #c62828 !important; }
html body .cii-card .cii-err { margin: 2px 0 12px !important; color: #c62828 !important; font: 500 14px/1.4 Rubik, Arial, sans-serif !important; }
html body .cii-card .cii-err[hidden], html body .cii-card [hidden] { display: none !important; }
html body .cii-card .cii-err a, html body .cii-card .cii-or a { color: #4340e2 !important; text-decoration: underline !important; }
html body .cii-card .cii-send {
  display: flex !important; align-items: center; justify-content: center; gap: 10px;
  width: 100% !important; min-height: 48px !important; margin: 4px 0 0 !important; padding: 0 18px !important;
  border: 0 !important; border-radius: 30px !important; cursor: pointer;
  background: linear-gradient(270deg, #1f45ad -20.83%, #4340e2 15%, #9b5fd6 94.34%) !important;
  color: #fff !important; font: 600 16px/1 Rubik, Arial, sans-serif !important; letter-spacing: .02em; text-transform: none !important;
  outline: none !important;
}
html body .cii-card .cii-send:focus-visible, html body .cii-x:focus-visible,
html body .cii-chat-btn:focus-visible, html body .cii-chat button:focus-visible, html body .cii-call:focus-visible {
  outline: 3px solid #85d3dd !important; outline-offset: 2px !important;
}
html body .cii-card .cii-send:disabled { cursor: default; opacity: .9; }
html body .cii-spin { display: none; width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .45); border-top-color: #fff; animation: cii-spin .7s linear infinite; }
html body .cii-send.busy .cii-spin { display: inline-block; }
html body .cii-send.busy .cii-label { opacity: .85; }
html body .cii-spin-inline { display: inline-block; }
@keyframes cii-spin { to { transform: rotate(360deg); } }
html body .cii-card .cii-or { margin: 14px 0 0 !important; text-align: center !important; font: 400 14px/1.4 Rubik, Arial, sans-serif !important; color: #4a4a55 !important; }
html body .cii-card .cii-done p { font: 400 16px/1.5 Rubik, Arial, sans-serif !important; color: #1d1d23 !important; margin: 0 0 10px !important; }
html body .cii-card .cii-note { color: #6b6b78 !important; font-size: 14px !important; }
html body .cii-card .cii-close { margin-top: 18px !important; }
html body .cii-x {
  position: absolute !important; top: 10px !important; right: 10px !important;
  width: 44px !important; height: 44px !important; padding: 0 !important; margin: 0 !important;
  border: 0 !important; border-radius: 50% !important; background: transparent !important;
  color: #1d1d23 !important; font: 300 32px/44px Arial, sans-serif !important; cursor: pointer; outline: none !important;
}
html body .cii-x:hover { background: #f1f1f5 !important; }

/* The Schedule page's own form, sent in place. */
html body .cii-inline-msg { margin: 10px 0 0 !important; font: 500 14px/1.4 Rubik, Arial, sans-serif !important; color: #1d1d23 !important; }
html body .cii-inline-msg:empty { display: none !important; }
html body .cii-inline-err { color: #c62828 !important; }
html body .cii-inline-err a { color: #4340e2 !important; text-decoration: underline !important; }
html body .form-builder--wrap .cii-bad { border-color: #c62828 !important; }
html body .cii-inline-done { padding: 24px 8px !important; text-align: center !important; }
html body .cii-inline-done h3 { font: 600 26px/1.2 Rubik, Arial, sans-serif !important; margin: 0 0 8px !important; color: inherit !important; }
html body .cii-inline-done p { font: 400 16px/1.5 Rubik, Arial, sans-serif !important; margin: 0 0 6px !important; color: inherit !important; }
html body .cii-inline-done .cii-note { opacity: .75; font-size: 14px !important; }

/* ---------- chat launcher: closed until someone asks for it ---------- */
html body .cii-chat-btn {
  position: fixed !important; right: 20px !important; bottom: 20px !important; z-index: 2147483000 !important;
  width: 56px !important; height: 56px !important; padding: 0 !important; margin: 0 !important; border: 0 !important; border-radius: 50% !important;
  display: flex !important; align-items: center; justify-content: center; cursor: pointer;
  background: linear-gradient(270deg, #1f45ad -20.83%, #4340e2 15%, #9b5fd6 94.34%) !important; color: #fff !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, .3) !important; outline: none !important;
}
html body .cii-chat {
  position: fixed !important; right: 20px !important; bottom: 86px !important; z-index: 2147483000 !important;
  box-sizing: border-box !important; width: 300px !important; max-width: calc(100vw - 32px) !important;
  background: #fff !important; color: #1d1d23 !important; border-radius: 14px !important; overflow: hidden;
  box-shadow: 0 12px 36px rgba(0, 0, 0, .3) !important; padding: 0 0 14px !important;
  font-family: Rubik, Arial, Helvetica, sans-serif !important;
}
html body .cii-chat[hidden] { display: none !important; }
html body .cii-chat-head { display: flex !important; align-items: center; justify-content: space-between; background: #1d1d23 !important; color: #fff !important; padding: 0 0 0 16px !important; font: 600 16px/1 Rubik, Arial, sans-serif !important; }
html body .cii-chat-x { width: 44px !important; height: 44px !important; padding: 0 !important; border: 0 !important; background: transparent !important; color: #fff !important; font: 300 28px/44px Arial, sans-serif !important; cursor: pointer; outline: none !important; }
html body .cii-chat p { margin: 14px 16px 10px !important; font: 400 15px/1.45 Rubik, Arial, sans-serif !important; color: #1d1d23 !important; }
html body .cii-chat p a { color: #4340e2 !important; text-decoration: underline !important; white-space: nowrap; }
html body .cii-chat-act {
  display: block !important; box-sizing: border-box !important; width: calc(100% - 32px) !important; min-height: 44px !important; margin: 0 16px 8px !important; padding: 0 14px !important;
  border: 0 !important; border-radius: 24px !important; cursor: pointer; outline: none !important;
  background: linear-gradient(270deg, #1f45ad -20.83%, #4340e2 15%, #9b5fd6 94.34%) !important; color: #fff !important;
  font: 600 15px/1 Rubik, Arial, sans-serif !important; text-transform: none !important;
}
html body .cii-chat-ghost { background: #fff !important; color: #4340e2 !important; border: 1px solid #c9c9d3 !important; }
html body .cii-chat .cii-chat-note { margin: 4px 16px 0 !important; font-size: 14px !important; color: #6b6b78 !important; }
html body .cii-chat .cii-chat-note[hidden] { display: none !important; }

/* ---------- phone ---------- */
@media (max-width: 767px) {
  /* The top bar's links and numbers move into the menu; the header gets the phone number. */
  html.cii-thin .header-top-bar { display: none !important; }
  html.cii-thin .header-main { padding: 8px 10px !important; }
  html.cii-thin .header-main .branding img { width: 172px !important; }
  html body .cii-call {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 44px !important; height: 44px !important; margin: 0 4px 0 0 !important; padding: 0 !important;
    color: #fff !important; border-radius: 50%; outline: none !important;
  }
  html body .header-main .cart-nav-wrapper { display: flex !important; align-items: center; width: auto !important; }
  html body .header-main .nav-menu-mobile { display: inline-flex !important; align-items: center; justify-content: center; min-width: 44px !important; min-height: 44px !important; }
  /* The Google rating badge sat over the page on a phone. */
  html body [class*="slide-in__PositionContainer"] { display: none !important; }
  html body .cii-chat-btn { right: 14px !important; bottom: 14px !important; width: 52px !important; height: 52px !important; }
  html body .cii-chat { right: 14px !important; bottom: 76px !important; }
  html body .cii-card { padding: 24px 18px 18px !important; border-radius: 14px !important; }
  html body .cii-card h2 { font-size: 22px !important; }
}