/* ============================================================
   ALGORAM – Bottom action bar (Get Demo · Inquiry · Chat with Us)
   + the Demo / Inquiry popups.
   Markup + behaviour: assets/js/bottom-bar.js
   Linked from partials/footer.html and partials/hi/footer.html.
   Form controls use !important because brand.css styles every
   input/select/textarea/label with !important.
   ============================================================ */

.abb-bar, .abb-modal {
  --abb-gold: linear-gradient(135deg, #FDE68A 0%, #FBBF24 35%, #F59E0B 70%, #D97706 100%);
  --abb-blue: linear-gradient(135deg, #4FA8FF 0%, #1683FF 45%, #0057D9 100%);
  --abb-green: linear-gradient(135deg, #2BD86F 0%, #16A866 50%, #0E7C6F 100%);
  --abb-navy: linear-gradient(90deg, #08142B 0%, #0E2147 50%, #08142B 100%);
  --abb-font: 'Exo 2', 'Noto Sans Devanagari', 'Noto Sans Gujarati', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --abb-body: 'Inter', 'Noto Sans Devanagari', 'Noto Sans Gujarati', system-ui, -apple-system, 'Segoe UI', sans-serif;
  box-sizing: border-box;
}
.abb-bar *, .abb-modal * { box-sizing: border-box; }

/* ━━━━━━━━━━━━━━━━ Bar ━━━━━━━━━━━━━━━━ */
.abb-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9990; /* above page content + navbar (1000); below the support chat (99998+) and popups */
  background: var(--abb-navy);
  box-shadow: 0 -10px 34px rgba(2, 8, 23, 0.3);
  padding-bottom: env(safe-area-inset-bottom, 0px); /* iPhone home indicator */
  font-family: var(--abb-font);
  transform: translateY(115%);
  transition: transform 0.4s cubic-bezier(0.2, 0.85, 0.25, 1);
}
.abb-bar.abb-show { transform: translateY(0); }

/* brand line: ALGO blue → RAM gold, slowly flowing */
.abb-bar::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #007BFF, #40A0FF, #FCD34D, #F59E0B, #40A0FF, #007BFF);
  background-size: 200% 100%;
  animation: abbFlow 6s linear infinite;
}
@keyframes abbFlow { to { background-position: -200% 0; } }

.abb-inner {
  max-width: 1240px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  gap: 18px;
}

.abb-text {
  flex: 1;
  min-width: 0;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  color: #CBD5E1;
  font: 600 15px/1.3 var(--abb-font);
  white-space: nowrap;
}
.abb-text > span:last-child { overflow: hidden; text-overflow: ellipsis; }
.abb-hl {
  font-weight: 800;
  background: linear-gradient(90deg, #FDE68A, #F59E0B);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.abb-text-ico {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #4ADE80;
  background: rgba(74, 222, 128, 0.12);
  box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.3);
  animation: abbWiggle 5s ease-in-out infinite;
}
.abb-text-ico svg { width: 19px; height: 19px; }
@keyframes abbWiggle {
  0%, 82%, 100% { transform: rotate(0); }
  86% { transform: rotate(-12deg); }
  90% { transform: rotate(10deg); }
  94% { transform: rotate(-6deg); }
}

.abb-actions { display: flex; gap: 10px; flex-shrink: 0; }

/* ── The three buttons ── */
.abb-btn {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  overflow: hidden;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  height: 46px;
  margin: 0;
  padding: 0 22px 0 8px;
  border: 0;
  border-radius: 999px;
  color: #fff;
  font: 700 15px/1 var(--abb-font);
  letter-spacing: 0.2px;
  white-space: nowrap;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}
.abb-btn:hover { transform: translateY(-2px); filter: saturate(1.15) brightness(1.05); }
.abb-btn:active { transform: translateY(0) scale(0.97); }
.abb-btn:focus-visible { outline: 2px solid #FDE68A; outline-offset: 3px; }

/* icon sits in its own glossy circle */
.abb-ico {
  position: relative;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(255, 255, 255, 0.22);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35);
}
.abb-ico svg { width: 18px; height: 18px; }
.abb-lbl-short { display: none; }

/* Get Demo – gold, with a light sweep (the main call to action) */
.abb-btn-demo {
  background: var(--abb-gold);
  color: #2B1700;
  box-shadow: 0 6px 22px rgba(245, 158, 11, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.abb-btn-demo .abb-ico { background: rgba(255, 255, 255, 0.45); }
.abb-btn-demo:hover { box-shadow: 0 10px 30px rgba(245, 158, 11, 0.6), inset 0 1px 0 rgba(255, 255, 255, 0.5); }
.abb-btn-demo::after {
  content: '';
  position: absolute;
  top: 0;
  left: -70%;
  width: 45%;
  height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.65), transparent);
  transform: skewX(-20deg);
  animation: abbShine 3.4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes abbShine { 0%, 55% { left: -70%; } 100% { left: 135%; } }

/* Inquiry – brand blue */
.abb-btn-inquiry {
  background: var(--abb-blue);
  box-shadow: 0 6px 22px rgba(0, 123, 255, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.abb-btn-inquiry:hover { box-shadow: 0 10px 30px rgba(0, 123, 255, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.3); }

/* Chat – green, with a live "ping" dot */
.abb-btn-chat {
  background: var(--abb-green);
  box-shadow: 0 6px 22px rgba(22, 168, 102, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.abb-btn-chat:hover { box-shadow: 0 10px 30px rgba(22, 168, 102, 0.58), inset 0 1px 0 rgba(255, 255, 255, 0.3); }
.abb-ping {
  position: absolute;
  top: 1px;
  right: 1px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: #FDE047;
  box-shadow: 0 0 0 2px #16A866;
}
.abb-ping::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #FDE047;
  animation: abbPing 1.8s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes abbPing { 75%, 100% { transform: scale(2.6); opacity: 0; } }

.abb-close {
  -webkit-appearance: none;
  appearance: none;
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  margin: 0;
  padding: 0;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.18);
  background: rgba(255, 255, 255, 0.06);
  color: #CBD5E1;
  font: 400 20px/1 system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.abb-close:hover { background: rgba(255, 255, 255, 0.16); color: #fff; transform: rotate(90deg); }
.abb-close:focus-visible { outline: 2px solid #FDE68A; outline-offset: 2px; }

/* ── Laptop / tablet landscape ── */
@media (max-width: 1100px) {
  .abb-text { font-size: 14px; }
  .abb-btn { padding-right: 18px; font-size: 14px; }
}
/* ── Tablet: drop the text, centre the buttons ── */
@media (max-width: 900px) {
  .abb-text { display: none; }
  .abb-actions { flex: 1; justify-content: center; }
}

/* ── Mobile: three colourful tiles, app-style bottom nav ── */
@media (max-width: 768px) {
  .abb-inner { padding: 8px 10px; gap: 0; }
  .abb-close { display: none; }
  .abb-actions {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
  }
  .abb-btn {
    flex-direction: column;
    gap: 3px;
    height: 58px;
    min-width: 0;
    padding: 0 4px;
    border-radius: 16px;
    font-size: 12.5px;
    line-height: 1.15;
  }
  .abb-btn:hover { transform: none; }
  .abb-ico { width: 28px; height: 28px; background: rgba(255, 255, 255, 0.24); }
  .abb-ico svg { width: 17px; height: 17px; }
  .abb-lbl-long { display: none; }
  .abb-lbl-short { display: block; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
}
@media (max-width: 360px) {
  .abb-inner { padding: 7px 8px; }
  .abb-actions { gap: 6px; }
  .abb-btn { height: 54px; font-size: 11.5px; border-radius: 14px; }
  .abb-ico { width: 26px; height: 26px; }
}

/* ── Support chat (support-widget.js): the bar's Chat button replaces its round button while the
      bar is up, and its panel / nudge open just above the bar ── */
html.abb-on .agw-btn { display: none !important; }
html.abb-on .agw-panel,
html.abb-on .agw-nudge { bottom: calc(var(--abb-h, 66px) + 12px) !important; }
html.abb-on .agw-panel { max-height: min(560px, calc(100vh - var(--abb-h, 66px) - 96px)) !important; }

/* ━━━━━━━━━━━━━━━━ Popups ━━━━━━━━━━━━━━━━ */
html.abb-lock, html.abb-lock body { overflow: hidden !important; }

.abb-modal {
  position: fixed;
  inset: 0;
  z-index: 100000; /* above the support chat panel (99999) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  font-family: var(--abb-body);
}
.abb-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(4, 10, 26, 0.64);
  -webkit-backdrop-filter: blur(5px);
  backdrop-filter: blur(5px);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.abb-dialog {
  position: relative;
  width: 100%;
  max-width: 450px;
  max-height: calc(100vh - 40px);
  max-height: calc(100dvh - 40px);
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  background: #fff;
  border-radius: 22px;
  box-shadow: 0 30px 90px rgba(2, 8, 23, 0.5);
  outline: none;
  opacity: 0;
  transform: translateY(18px) scale(0.97);
  transition: transform 0.3s cubic-bezier(0.2, 0.85, 0.25, 1), opacity 0.22s ease;
}
.abb-modal-inquiry .abb-dialog { max-width: 580px; }
.abb-modal.abb-open .abb-backdrop { opacity: 1; }
.abb-modal.abb-open .abb-dialog { opacity: 1; transform: none; }

/* header: navy with a coloured badge + stripe (gold = demo, blue = inquiry) */
.abb-head {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 24px 58px 22px 24px;
  background:
    radial-gradient(circle at 92% -20%, rgba(245, 158, 11, 0.28), transparent 55%),
    linear-gradient(135deg, #08142B 0%, #10295A 100%);
  color: #fff;
}
.abb-modal-inquiry .abb-head {
  background:
    radial-gradient(circle at 92% -20%, rgba(64, 160, 255, 0.35), transparent 55%),
    linear-gradient(135deg, #08142B 0%, #10295A 100%);
}
.abb-head::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 4px;
  background: var(--abb-gold);
}
.abb-modal-inquiry .abb-head::after { background: var(--abb-blue); }
.abb-head-ico {
  flex-shrink: 0;
  width: 48px;
  height: 48px;
  border-radius: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--abb-gold);
  color: #2B1700;
  box-shadow: 0 8px 22px rgba(245, 158, 11, 0.45);
}
.abb-modal-inquiry .abb-head-ico { background: var(--abb-blue); color: #fff; box-shadow: 0 8px 22px rgba(0, 123, 255, 0.45); }
.abb-head-ico svg { width: 24px; height: 24px; }
.abb-title {
  margin: 2px 0 6px;
  padding: 0;
  font: 800 21px/1.3 'Oxanium', var(--abb-font);
  color: #fff;
  -webkit-text-fill-color: #fff;
  background: none;
  text-align: left;
}
.abb-sub { margin: 0; font: 400 13.5px/1.6 var(--abb-body); color: #CBD5E1; text-align: left; }
.abb-x {
  -webkit-appearance: none;
  appearance: none;
  position: absolute;
  top: 14px;
  right: 14px;
  width: 36px;
  height: 36px;
  min-width: 0;
  min-height: 0;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
  font: 400 22px/1 system-ui, sans-serif;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, transform 0.2s;
}
.abb-x:hover { background: rgba(255, 255, 255, 0.22); transform: rotate(90deg); }
.abb-x:focus-visible { outline: 2px solid #FDE68A; outline-offset: 2px; }

/* form */
.abb-form { margin: 0; padding: 22px 24px 22px; text-align: left; }
.abb-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.abb-field { margin: 0 0 14px; }
.abb-field label {
  display: block;
  margin: 0 0 6px;
  font: 600 13px/1.35 var(--abb-body) !important;
  color: #334155 !important;
}
.abb-field input,
.abb-field select,
.abb-field textarea {
  -webkit-appearance: none;
  appearance: none;
  display: block;
  width: 100%;
  margin: 0;
  padding: 12px 14px;
  border: 1.5px solid #E2E8F0 !important;
  border-radius: 12px !important;
  background: #F8FAFC !important;
  color: #0F172A !important;
  box-shadow: none !important;
  font: 400 15px/1.4 var(--abb-body);
  outline: none !important;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.abb-field input::placeholder,
.abb-field textarea::placeholder { color: #94A3B8 !important; }
.abb-field select {
  padding-right: 38px;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}
.abb-field textarea { min-height: 110px; resize: vertical; }
.abb-field input:focus,
.abb-field select:focus,
.abb-field textarea:focus {
  border-color: #1683FF !important;
  background-color: #fff !important;
  box-shadow: 0 0 0 4px rgba(0, 123, 255, 0.13) !important;
}
.abb-modal-demo .abb-field input:focus {
  border-color: #F59E0B !important;
  box-shadow: 0 0 0 4px rgba(245, 158, 11, 0.18) !important;
}
.abb-field .abb-invalid,
.abb-field .abb-invalid:focus {
  border-color: #EF4444 !important;
  box-shadow: 0 0 0 4px rgba(239, 68, 68, 0.13) !important;
}

.abb-tel { display: flex; }
.abb-tel-cc {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  padding: 0 12px;
  border: 1.5px solid #E2E8F0;
  border-right: 0;
  border-radius: 12px 0 0 12px;
  background: #EEF2F7;
  color: #475569;
  font: 700 15px/1 var(--abb-body);
}
.abb-tel input { border-radius: 0 12px 12px 0 !important; min-width: 0; }

.abb-err {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #FECACA;
  border-radius: 10px;
  background: #FEF2F2;
  color: #B91C1C;
  font: 500 13px/1.5 var(--abb-body);
}
.abb-err[hidden] { display: none; }

.abb-submit {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  overflow: hidden;
  width: 100%;
  height: 52px;
  margin: 4px 0 0;
  padding: 0 18px;
  border: 0;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font: 800 16px/1 var(--abb-font);
  letter-spacing: 0.3px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}
.abb-submit svg { transition: transform 0.2s ease; }
.abb-submit:hover:not([disabled]) { transform: translateY(-2px); }
.abb-submit:hover:not([disabled]) svg { transform: translateX(4px); }
.abb-submit:focus-visible { outline: 3px solid rgba(0, 123, 255, 0.35); outline-offset: 2px; }
.abb-submit[disabled] { opacity: 0.72; cursor: progress; }
.abb-modal-demo .abb-submit {
  background: var(--abb-gold);
  color: #2B1700;
  box-shadow: 0 10px 26px rgba(245, 158, 11, 0.42), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
.abb-modal-inquiry .abb-submit {
  background: var(--abb-blue);
  color: #fff;
  box-shadow: 0 10px 26px rgba(0, 123, 255, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.3);
}
.abb-note {
  margin: 12px 0 0;
  text-align: center;
  font: 400 12px/1.5 var(--abb-body);
  color: #64748B;
}
.abb-note a { color: #0B6BEA; text-decoration: underline; }

/* success */
.abb-done { padding: 32px 24px 28px; text-align: center; }
.abb-done-ico {
  width: 76px;
  height: 76px;
  margin: 0 auto 16px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  background: linear-gradient(135deg, #34D399, #059669);
  box-shadow: 0 0 0 8px rgba(16, 185, 129, 0.14), 0 12px 30px rgba(5, 150, 105, 0.35);
  animation: abbPop 0.5s cubic-bezier(0.2, 1.5, 0.4, 1);
}
@keyframes abbPop { from { transform: scale(0.4); opacity: 0; } to { transform: scale(1); opacity: 1; } }
.abb-done h3 {
  margin: 0 0 8px;
  font: 800 20px/1.35 'Oxanium', var(--abb-font);
  color: #047857;
  -webkit-text-fill-color: #047857;
  background: none;
}
.abb-done p { margin: 0 0 22px; font: 400 14.5px/1.7 var(--abb-body); color: #475569; }
.abb-done p strong { color: #0F172A; }
.abb-done-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; }
.abb-done-wa,
.abb-done-close {
  -webkit-appearance: none;
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 44px;
  margin: 0;
  padding: 0 20px;
  border-radius: 999px;
  font: 700 14px/1 var(--abb-font);
  text-decoration: none !important;
  cursor: pointer;
}
.abb-done-wa { border: 0; background: var(--abb-green); color: #fff !important; box-shadow: 0 8px 22px rgba(22, 168, 102, 0.35); }
.abb-done-wa svg { width: 18px; height: 18px; }
.abb-done-close { border: 1.5px solid #E2E8F0; background: #fff; color: #475569; }
.abb-done-close:hover { border-color: #CBD5E1; color: #0F172A; }

/* ── Mobile: popups become bottom sheets ── */
@media (max-width: 768px) {
  .abb-modal { align-items: flex-end; padding: 0; }
  .abb-dialog,
  .abb-modal-inquiry .abb-dialog {
    max-width: none;
    max-height: 92vh;
    max-height: 92dvh;
    border-radius: 24px 24px 0 0;
    padding-bottom: env(safe-area-inset-bottom, 0px);
    transform: translateY(100%);
  }
  .abb-modal.abb-open .abb-dialog { transform: none; }
  /* grab handle */
  .abb-dialog::before {
    content: '';
    position: absolute;
    top: 8px;
    left: 50%;
    z-index: 1;
    width: 42px;
    height: 4px;
    margin-left: -21px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.35);
  }
  .abb-head { padding: 26px 56px 20px 18px; gap: 12px; }
  .abb-head-ico { width: 42px; height: 42px; border-radius: 13px; }
  .abb-head-ico svg { width: 21px; height: 21px; }
  .abb-title { font-size: 18px; }
  .abb-sub { font-size: 13px; }
  .abb-form { padding: 18px 18px 20px; }
  .abb-done { padding: 28px 18px 24px; }
  /* 16px stops iOS Safari zooming into the field */
  .abb-field input, .abb-field select, .abb-field textarea, .abb-tel-cc { font-size: 16px; }
}
@media (max-width: 480px) {
  .abb-row { grid-template-columns: 1fr; }
}

/* ── Accessibility / print ── */
@media (prefers-reduced-motion: reduce) {
  .abb-bar, .abb-dialog, .abb-backdrop, .abb-btn, .abb-submit, .abb-close, .abb-x { transition: none !important; }
  .abb-bar::before, .abb-btn-demo::after, .abb-ping::after, .abb-text-ico, .abb-done-ico { animation: none !important; }
}
@media print {
  .abb-bar, .abb-modal { display: none !important; }
}