/* Supplemental rules ONLY for markup that has no counterpart in the uploaded
   templates: dropdown submenus, footer social icons and flash messages. These
   classes do not exist in the original stylesheets, so nothing is overridden. */
.nav-item{ position:relative; }
.nav-submenu{
  display:none; position:absolute; top:100%; left:0; margin-top:14px;
  background:var(--surface); border:1px solid var(--border); border-radius:10px;
  padding:8px; min-width:200px; box-shadow:0 20px 40px -20px rgba(0,0,0,.6); z-index:120;
}
.nav-item:hover .nav-submenu{ display:block; }
.nav-submenu a{ display:block; padding:9px 12px; border-radius:6px; white-space:nowrap; }
.nav-submenu a:hover{ background:var(--surface-2); }

.footer-social{ display:flex; gap:12px; margin-top:16px; }
.footer-social a{
  width:32px; height:32px; border:1px solid var(--border); border-radius:8px;
  display:flex; align-items:center; justify-content:center; font-size:12px; color:var(--text-muted);
}
.footer-social a:hover{ color:var(--accent); border-color:var(--accent-dim); }

.site-message{
  background:var(--accent-glow); border:1px solid var(--accent-dim); color:var(--text);
  padding:14px 18px; border-radius:10px; margin-bottom:14px; font-size:14px;
}
.site-message-error{ background:rgba(229,103,90,.12); border-color:#E5675A; color:#E5675A; }

@media (max-width:1040px){
  .nav-item .nav-submenu{
    display:block; position:static; border:none; padding:0 0 0 14px;
    margin-top:0; background:transparent; box-shadow:none;
  }
}

/* Checkout fields inside the pricing ticket. New classes only — the original
   stylesheets are untouched. */
.checkout-field{
  width:100%; margin-bottom:8px; padding:10px 12px; font-size:13.5px;
  color:var(--text); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--radius-sm);
}
.checkout-field::placeholder{ color:var(--text-dim); }
.checkout-field:focus{ outline:none; border-color:var(--accent); }

/* ---------------------------------------------------------------------------
   Floating WhatsApp button. New classes only — nothing in the original
   stylesheets is overridden.
   --------------------------------------------------------------------------- */
.wa-float{
  position:fixed; bottom:22px; z-index:150;
  display:inline-flex; align-items:center; gap:10px;
  padding:11px 16px 11px 12px; border-radius:40px;
  background:#25D366; color:#0A2E17; font-weight:600; font-size:14px;
  box-shadow:0 10px 28px -8px rgba(0,0,0,.5); text-decoration:none;
  transition:transform .15s ease, box-shadow .15s ease;
}
.wa-float:hover{ transform:translateY(-2px); box-shadow:0 14px 32px -8px rgba(0,0,0,.55); }
.wa-float:active{ transform:translateY(0); }
.wa-right{ right:22px; }
.wa-left{ left:22px; }
.wa-icon{ display:flex; align-items:center; }
.wa-text{ display:flex; flex-direction:column; line-height:1.25; }
.wa-hours{ font-size:11px; font-weight:500; opacity:.75; }

/* Live-chat widgets sit bottom-right, so shift the button up to avoid overlap. */
.wa-right.wa-with-chat{ bottom:96px; }

@media (max-width:640px){
  .wa-float{ padding:12px; bottom:16px; }
  .wa-right{ right:16px; }
  .wa-left{ left:16px; }
  .wa-text{ display:none; }        /* icon only on small screens */
  .wa-desktop-only{ display:none; }
}
@media (prefers-reduced-motion: reduce){
  .wa-float{ transition:none; }
  .wa-float:hover{ transform:none; }
}

/* ---------------------------------------------------------------------------
   Mobile horizontal-scroll fix.

   The off-canvas menu is position:fixed and parked off-screen right with
   translateX(100%). `overflow-x:hidden` on <body> alone does not contain that
   on iOS Safari or Chrome Android — the browser still lets the user pan across
   to the hidden panel, which reads as "the site isn't responsive".

   Fixing it needs three things:
     1. overflow-x:hidden on <html> as well as <body>
     2. the panel clipped out of the layout entirely until it is opened
     3. a max-width guard so no single element can force the page wider
   These are additive rules; the original stylesheets are untouched.
   --------------------------------------------------------------------------- */
html{
  overflow-x:hidden;
  max-width:100%;
}
body{
  overflow-x:hidden;
  max-width:100%;
  position:relative;
}

@media (max-width:1040px){
  /* The mobile menu panel is defined once, further down in this file. */
  /* Nothing should be able to push the viewport wider than the screen. */
  .container,
  .hero,
  .section,
  .cta-band,
  .footer-grid,
  .post-grid,
  .features-grid,
  .plans-grid,
  .config-grid,
  .contact-grid{
    max-width:100%;
  }
  /* Long unbroken strings (URLs, IDs, code) are a classic overflow cause. */
  .post-excerpt,
  .article-body,
  .story,
  .ticket-row,
  details p,
  code, pre{
    overflow-wrap:break-word;
    word-wrap:break-word;
  }
  pre, code{ white-space:pre-wrap; }
  /* Terminal / invoice panels are wide by nature — let them scroll internally
     rather than stretching the page. */
  .terminal-body,
  .browser-canvas{
    overflow-x:auto;
    max-width:100%;
  }
}

/* Tables scroll inside their own box instead of widening the page. */
@media (max-width:760px){
  table{ display:block; overflow-x:auto; max-width:100%; }
}

/* "Client login" / "My account" in the header. A new class, so the uploaded
   stylesheets stay untouched. */
.nav-account{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 13px; border:1px solid var(--border); border-radius:20px;
  font-size:12.5px; color:var(--text-muted); white-space:nowrap;
}
.nav-account::before{ content:"\25CF"; font-size:8px; color:var(--accent); }
.nav-account:hover{ border-color:var(--accent-dim); color:var(--accent); }
@media (max-width:1040px){
  .nav-account{ margin-top:14px; align-self:flex-start; }
}

/* ---------------------------------------------------------------------------
   Mobile menu panel — complete, self-contained.

   The original rule for this lives in each page's stylesheet. When those files
   are served from an older build, or a page uses a different stylesheet, the
   panel loses its background and layout and only the first link is visible.
   Declaring the whole panel here means it works the same on every page and
   does not depend on which page stylesheet happens to be loaded.
   --------------------------------------------------------------------------- */
@media (max-width:1040px){
  /* THE cause of the collapsed menu panel.
     .nav has backdrop-filter:blur(10px). Any ancestor with backdrop-filter,
     filter, transform or perspective becomes the containing block for its
     position:fixed descendants — so the panel was being positioned inside the
     72px-tall header instead of the viewport. inset:72px 0 0 0 against a 72px
     box leaves zero height, which is why one item showed in a tiny scroller.
     Dropping the blur on mobile hands the panel back to the viewport. */
  .nav{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    background:var(--bg, #10151C);
  }

  .nav-links{
    position:fixed;
    top:72px; right:0; bottom:0; left:0;
    display:flex;
    flex-direction:column;
    align-items:flex-start;
    gap:4px;
    padding:28px 24px 40px;
    background:var(--bg, #10151C);
    transform:translateX(100%);
    transition:transform .2s ease;
    z-index:99;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
    box-sizing:border-box;
  }
  .nav-links.open{ transform:translateX(0); }

  /* Every entry on its own full-width row, including the CTA and account pill. */
  .nav-links > a,
  .nav-links > .nav-item,
  .nav-links > .nav-item > a{
    display:block;
    width:100%;
    box-sizing:border-box;
    padding:14px 0;
    font-size:16px;
    border-bottom:1px solid var(--border-soft, rgba(255,255,255,.08));
  }
  .nav-links > .nav-item{ padding:0; border-bottom:none; }

  /* Sub-menu items sit indented under their parent rather than as a dropdown. */
  .nav-links .nav-submenu{
    position:static;
    display:block;
    opacity:1;
    visibility:visible;
    transform:none;
    background:none;
    border:none;
    box-shadow:none;
    padding:0 0 0 14px;
    min-width:0;
  }
  .nav-links .nav-submenu a{
    display:block; width:100%; padding:12px 0; font-size:15px;
    border-bottom:1px solid var(--border-soft, rgba(255,255,255,.06));
  }

  .nav-links > .btn{ margin-top:18px; width:100%; text-align:center; border-bottom:none; }
  .nav-account{ margin-top:16px; border-bottom:none !important; }
}

/* ------------------------------------------------- shared page furniture -- */
/* These class names are used by several pages that were added after the
   original templates — applications, partner programme, on demand, order
   lookup. They had no rules anywhere, so those pages rendered as unstyled
   blocks. Defined here because they are shared, and here is loaded on every
   page. Nothing external is fetched. */

.hero-copy{
  max-width:720px;
}
.hero-copy h1{
  margin:12px 0 16px;
}

.hero-actions{
  display:flex;
  gap:12px;
  flex-wrap:wrap;
  margin-top:24px;
}

/* An alternate band, so consecutive sections do not run together. */
.section-alt{
  background:var(--surface);
  border-top:1px solid var(--border);
  border-bottom:1px solid var(--border);
}

/* The current page in the navigation. */
.active-link{
  color:var(--text) !important;
}

/* Django's form mixin adds these class names to every widget. On the public
   site they should look like the rest of the page, not like a dashboard. */
.contact-form .form-control,
.contact-form .form-select,
.form-row .form-control,
.form-row .form-select{
  width:100%;
  box-sizing:border-box;
  padding:11px 13px;
  border-radius:8px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--text);
  font-family:inherit;
  font-size:14px;
}
.contact-form .form-control:focus,
.contact-form .form-select:focus,
.form-row .form-control:focus,
.form-row .form-select:focus{
  outline:none;
  border-color:var(--accent);
}

@media (max-width:700px){
  .hero-actions{ gap:10px; }
  .hero-actions .btn{ flex:1 1 auto; text-align:center; }
}

/* Cards and plan blocks used by the newer pages. The originals styled these
   only inside their own page stylesheet, so a page that reused the markup got
   the structure without the appearance. */
.feature-card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:14px;
  padding:24px 22px;
}
.feature-card h3{
  font-size:15px;
  margin:0 0 10px;
  color:var(--text);
}
.feature-card p{
  margin:0;
  color:var(--text-dim);
  font-size:13.5px;
  line-height:1.7;
}

.plan-note{
  font-size:12px;
  color:var(--text-dim);
  margin:4px 0 14px;
}
.plan-features{
  list-style:none;
  margin:0;
  padding:0;
}
.plan-features li{
  padding:7px 0;
  border-bottom:1px solid var(--border);
  font-size:13px;
  color:var(--text-dim);
}
.plan-features li:last-child{ border-bottom:none; }
.plan-featured{
  border-color:var(--accent);
}
.plan-actions{
  margin-top:16px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.cta-copy{
  max-width:560px;
}

/* Small explanatory text under a field. */
.hint{
  font-size:11.5px;
  color:var(--text-dim);
  line-height:1.5;
}

/* Consent tick boxes sit beside their words, not above them. */
.form-check-input{
  width:auto !important;
  margin-top:3px;
  flex:none;
}

/* Two fields across where there is room. Previously written into site.css,
   which no template loads — so it never applied anywhere. */
.form-pair{ display:grid; grid-template-columns:1fr 1fr; gap:0 16px; }
@media (max-width:700px){ .form-pair{ grid-template-columns:1fr; } }

/* The preset buttons on the configurator pages are created by their script,
   so the class never appears in the template and was missed when the page
   stylesheets were written. */
.apply-preset{
  margin-top:14px;
  width:100%;
}

/* ============================================================ on a phone === */
/* Every page stylesheet sets `body{ overflow-x:hidden }`. That does not make a
   wide page fit — it clips it, so anything past the right edge is simply gone
   with no way to reach it. The configurator lost a third of its pricing panel
   that way.
   
   The rules below make the content actually fit, so nothing needs clipping.
   They live here because this file is loaded on every page. */

/* A row of choices wraps onto a second line rather than running off the edge.
   Flex children refuse to shrink below their content by default, which is what
   pushed three "3 Years +₹3,499" buttons wider than a phone. */
.pill-group{ flex-wrap:wrap; }
.pill{ min-width:0; }

@media (max-width:560px){
  /* Two across reads better than three squeezed, and better than a wrap that
     leaves one button alone on a line. */
  .pill-group{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
  .pill{ width:100%; }
}

/* The quote panel: name … amount. The dotted leader between them can shrink,
   the words cannot, so on a narrow screen the row stacks instead. */
.ticket-row{ flex-wrap:wrap; }
.ticket-row .name{ white-space:normal; }
@media (max-width:440px){
  .ticket-row .leader{ display:none; }
  .ticket-row{ justify-content:space-between; }
}

/* Add-ons, plan buttons and the panel's own buttons all wrap. */
.addon,
.plan-actions,
.ticket-actions,
.switch-row,
.hero-cta,
.hero-badges{ flex-wrap:wrap; }
.ticket-actions .btn,
.plan-actions .btn{ flex:1 1 auto; }

/* Monospace blocks — the terminal and the quote — scroll inside themselves
   rather than widening the page. */
.terminal-body,
.ticket-body{ overflow-x:auto; -webkit-overflow-scrolling:touch; }

/* A long word with no spaces (an email address, a URL, a reference) can be
   wider than the screen on its own. */
.ticket-row .name,
.brief-value,
.rate-desc,
.feature-card p,
.lead{ overflow-wrap:anywhere; }

/* Flex and grid children default to a minimum size of their content, which is
   what turns one long item into a sideways scroll for the whole page. */
.config-grid > *,
.hero-grid > *,
.features-grid > *,
.plans-grid > *,
.brief-form > *{ min-width:0; }

@media (max-width:560px){
  .container{ padding:0 16px; }
  .pill{ padding:11px 6px; font-size:12.5px; }
  .pill small{ display:block; font-size:10.5px; }
}