/* Branded styles for Top Choice Payments */
:root{
  --bg: #f6f8fb;
  --brand-blue: #27415e; /* primary */
  --brand-orange: #f04f23; /* accent */
  --muted: #6b7280;
  --card-bg: #ffffff;
  --text: #1f2937;
}

*{box-sizing:border-box}
html,body{height:100%;margin:0;font-family:Segoe UI, Roboto, Arial, sans-serif;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased}
.container{max-width:1100px;margin:0 auto;padding:28px}

/* Header */
.site-header{background:var(--card-bg);border-bottom:1px solid #e6e9ee}
.header-inner{display:flex;align-items:center;justify-content:space-between}
.logo img{display:block}
.logo img{height:122px;max-height:122px;width:auto}
.main-nav a{margin-left:18px;color:var(--brand-blue);text-decoration:none;font-weight:600}
.main-nav a.cta{background:var(--brand-orange);color:#fff;padding:8px 12px;border-radius:6px}

/* Mobile menu toggle */
.menu-toggle{display:none;background:transparent;border:0;padding:8px;border-radius:6px;cursor:pointer}
.menu-toggle .hamburger{display:block;width:24px;height:2px;background:var(--brand-blue);position:relative}
.menu-toggle .hamburger:before,.menu-toggle .hamburger:after{content:'';position:absolute;left:0;width:24px;height:2px;background:var(--brand-blue)}
.menu-toggle .hamburger:before{top:-7px}
.menu-toggle .hamburger:after{top:7px}

/* Mobile nav (hidden by default) */
.main-nav{display:flex;align-items:center}
.main-nav.mobile-visible{display:flex}
.main-nav.mobile-hidden{display:none}

/* Hero */
.hero{padding:56px 0;background:linear-gradient(180deg, rgba(39,65,94,0.03), rgba(240,79,35,0.01));}
.hero-grid{display:grid;grid-template-columns:1fr;gap:28px;align-items:center}
.hero-content h1{font-size:2rem;margin:0 0 12px;color:var(--brand-blue)}
.lead{color:var(--muted);margin-bottom:18px}
.hero-ctas .btn{margin-right:12px}
.hero-media img{width:100%;height:auto;border-radius:8px;box-shadow:0 6px 20px rgba(16,24,40,0.06)}
.hero-inline{float:right;width:35%;margin:0 0 18px 18px;border-radius:8px}
.trust-list{display:flex;gap:18px;margin:18px 0 0;padding:0;list-style:none}
.trust-list li{background:#fff;padding:10px 12px;border-radius:8px;border:1px solid #eef2f6;font-size:0.95rem}

/* Buttons */
.btn{display:inline-block;text-decoration:none;padding:10px 16px;border-radius:8px;border:1px solid transparent;font-weight:600}
/* Get a Quote (primary) uses brand orange site-wide */
.btn-primary{background:var(--brand-orange);color:#fff;border-color:var(--brand-orange)}
/* See A Demo uses brand blue */
.btn-demo{background:var(--brand-blue);color:#fff;border-color:var(--brand-blue)}
.btn-outline{background:transparent;border-color:var(--brand-blue);color:var(--brand-blue)}

/* Sections */
.section{padding:48px 0}
.section.alt{background:#fff;border-top:1px solid #eef2f6;border-bottom:1px solid #eef2f6}
.section h2{margin:0 0 8px;color:var(--brand-blue)}
.section-sub{color:var(--muted);margin-bottom:18px}

/* Cards */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.card{background:var(--card-bg);padding:16px;border-radius:10px;border:1px solid #eef2f6;text-align:center}
.card img{max-width:100%;height:140px;object-fit:cover;border-radius:6px;margin-bottom:12px}
.card h3{margin:8px 0}

/* Pricing */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.price-card{background:var(--card-bg);padding:20px;border-radius:10px;border:1px solid #eef2f6;text-align:center}
.price-card.featured{box-shadow:0 8px 30px rgba(16,24,40,0.06);border-color:rgba(240,79,35,0.12)}
.price{font-size:1.5rem;font-weight:700;color:var(--brand-blue)}
.price span{font-size:0.8rem;font-weight:500;color:var(--muted)}

.partners{display:flex;gap:20px;align-items:center;margin-top:16px}
.partners img{border-radius:6px;height:64px;width:auto;object-fit:contain}

/* Contact */
.contact-grid{display:grid;grid-template-columns:1fr 320px;gap:32px;align-items:start}
.contact-form{display:flex;flex-direction:column;gap:10px}
.contact-form label{display:flex;flex-direction:column;font-size:0.95rem;color:var(--muted)}
.contact-form input,.contact-form textarea{padding:10px;border-radius:8px;border:1px solid #e6e9ee;margin-top:6px}
.contact-form textarea{min-height:110px;resize:vertical}
.contact-info{background:var(--card-bg);padding:16px;border-radius:10px;border:1px solid #eef2f6}

/* Footer */
.site-footer{margin-top:48px;padding:40px 0 20px;background:linear-gradient(180deg,#ffffff,#f7f9fb);border-top:1px solid #e6edf4}
.footer-inner{display:flex;align-items:flex-start;justify-content:space-between;gap:40px;padding:12px 0}
.footer-left{flex:0 0 280px}
.footer-center{flex:1 1 300px;text-align:center}
.footer-right{flex:0 0 280px;text-align:left}

/* Footer Left - Logo, Copyright, Links */
.footer-logo{height:75px;width:auto;object-fit:contain}
.footer-left img{height:75px;width:auto;object-fit:contain}
.footer-left small{display:block;margin-top:8px;color:var(--muted);font-size:0.9rem}
.trademark-text{margin-top:4px;font-size:0.85rem}
.footer-links{margin-top:12px;display:flex;gap:12px}
.footer-links a{color:var(--brand-blue);text-decoration:none;font-size:0.9rem;font-weight:500}
.footer-links a:hover{text-decoration:underline}

/* Footer Center - Navigation */
.footer-nav{display:flex;gap:12px;justify-content:center;align-items:flex-start;flex-wrap:wrap}
.nav-column{display:flex;flex-direction:column;gap:6px;min-width:80px;flex:1;max-width:120px}
.nav-column h4{margin:0 0 10px;color:var(--brand-blue);font-size:0.9rem;font-weight:600;text-align:left}
.nav-column a{color:var(--brand-blue);text-decoration:none;font-weight:400;font-size:0.8rem;text-align:left}
.nav-column a:hover{text-decoration:underline;color:var(--brand-orange)}
.footer-tag{color:var(--muted);margin-top:20px;font-size:0.9rem;font-style:italic;text-align:center}

/* Footer Right - Social & Contact */
.footer-right{text-align:left}
.footer-right h4{margin:0 0 12px;color:var(--brand-blue);font-size:1.1rem;font-weight:600;text-align:left}
.social-links{display:flex;gap:12px;justify-content:flex-start;margin-bottom:16px}
.social{display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;border-radius:6px;background:#fff;border:1px solid #eef2f6;color:var(--brand-blue);text-decoration:none}
.social svg{width:20px;height:20px;display:block;fill:currentColor}
.social span{display:none}
.social{transition:background-color 180ms ease, color 180ms ease, transform 160ms ease}
.social:hover{background:var(--brand-blue);color:#fff;transform:translateY(-2px)}
.social:active{transform:translateY(0)}
.contact-info{display:flex;flex-direction:column;gap:8px;align-items:flex-start}
.contact-info a{color:var(--brand-blue);text-decoration:none;font-weight:500;font-size:0.95rem}
.contact-info a:hover{text-decoration:underline}
.phone-link{font-weight:600}
.service-area{color:var(--muted);margin-top:8px;font-weight:600}

/* CTA section (replaces pricing) */
.cta-section{display:flex;align-items:center;justify-content:center;text-align:center;padding:36px 0}
.cta-inner{max-width:820px}
.cta-buttons{margin-top:18px;display:flex;gap:12px;justify-content:center}
.cta-section .btn{padding:12px 18px;border-radius:8px;font-size:1rem}
.cta-section .btn-outline{background:transparent;border:2px solid var(--brand-blue);color:var(--brand-blue)}
.demo-placeholder{background:#f3f6f9;border:1px dashed #e6edf4;padding:36px;border-radius:10px;color:var(--muted);text-align:center;margin-top:12px}

/* Header demo CTA styling (next to primary CTA) */
.main-nav a.demo-cta{background:var(--brand-blue);color:#fff;padding:8px 12px;border-radius:6px;border:none;margin-left:8px}

/* Modal (demo scheduling) */
.modal{position:fixed;inset:0;display:none;align-items:center;justify-content:center;z-index:1200}
.modal[aria-hidden="false"],.modal.active{display:flex}
.modal-backdrop{position:absolute;inset:0;background:rgba(15,23,42,0.55)}
.modal-dialog{position:relative;background:#fff;border-radius:12px;max-width:720px;width:92%;padding:22px;z-index:10;box-shadow:0 12px 40px rgba(16,24,40,0.25);display:flex;flex-direction:column;overflow:hidden}
.modal-close{position:absolute;right:12px;top:8px;border:0;background:transparent;font-size:20px;cursor:pointer}
/* When the demo is used as a standalone page, let the page scroll normally
  and remove the internal demo form scroll. When the demo is shown inside the
  modal, keep the internal scroll to constrain it to the viewport.
*/
.demo-form{display:flex;flex-direction:column;gap:10px;padding-right:6px}
.modal .demo-form{overflow-y:auto;max-height:calc(100vh - 140px)}
/* Helper class for explicit standalone pages (applied to <body>) */
.standalone-demo .demo-form{overflow:visible;max-height:none}

/* Standalone demo page layout: center the demo form and make it fit
  the viewport where possible (reduces need for internal scrolling). */
/* Standalone demo layout: center content and constrain width for readability */
body.standalone-demo main.container{
  min-height:calc(100vh - 160px);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:flex-start;
  padding-top:28px;
  padding-bottom:28px;
}
/* Hero inside demo page: subtle card-style background to separate it from page */
.demo-hero{width:100%;background:linear-gradient(180deg, #f7fafc, #f3f6f9);border-radius:8px;padding:24px;margin-bottom:18px;border:1px solid #eef2f6}
.demo-hero .hero-content{max-width:1100px;margin:0 auto}

/* Constrain the form to a readable column and center it */
body.standalone-demo .demo-form{max-width:820px;width:100%;background:var(--card-bg);padding:20px;border-radius:12px;border:1px solid #eef2f6;box-shadow:0 10px 30px rgba(16,24,40,0.06)}
/* Ensure solutionQuestions area grows naturally and does not force overflow */
body.standalone-demo .solution-questions{max-height:none;overflow:visible}
.demo-form label{display:flex;flex-direction:column;font-size:0.95rem}
.demo-form input,.demo-form textarea,.demo-form select{padding:10px;border-radius:8px;border:1px solid #e6e9ee;margin-top:6px}
.demo-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:6px}
.modal-cancel{background:transparent;border:1px solid #d1d5db;color:var(--muted)}

/* visual cue when preferred datetime is invalid (weekend / before min) */
.invalid-weekend {
  background-color: #f5f5f5 !important;
  border-color: #d0d0d0 !important;
  color: #666 !important;
}

/* small hint text inside modal labels */
.demo-form .hint{display:block;font-size:0.85rem;color:var(--muted);margin-top:6px;margin-bottom:6px}

/* timezone radio group styling */
.timezone-group{border:0;margin-top:8px;display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.timezone-group legend{font-weight:600;margin-bottom:6px}
.timezone-group label{display:inline-flex;align-items:center;gap:6px;padding:6px 8px;border-radius:8px;border:1px solid #eef2f6;background:#fff}
.timezone-group input[type="radio"]{transform:scale(1.05)}

/* Injected per-solution question styling */
.solution-questions{margin-top:6px;border-top:1px dashed #eef2f6;padding-top:12px}
.solution-questions .sq-item{margin-bottom:10px}
.solution-questions .sq-item label{font-size:0.95rem;color:var(--muted);display:flex;flex-direction:column}
.solution-questions .sq-item input[type="text"],
.solution-questions .sq-item input[type="number"],
.solution-questions .sq-item select,
.solution-questions .sq-item textarea{padding:10px;border-radius:8px;border:1px solid #e6e9ee;margin-top:6px}
.solution-questions .static-field{background:#f7f8fa;border-color:#e6e9ee}

/* Data source badge for debugging whether inline JSON or fetch was used */
.data-source{display:inline-block;margin-top:8px;padding:6px 10px;background:#eef2f6;border-radius:999px;color:var(--brand-blue);font-weight:600;font-size:0.85rem;border:1px solid #e6edf4}

/* Server-side form error styling */
.form-errors{
  display:none; /* toggled via JS */
  color: #7f1d1d; /* darker red for text */
  background: linear-gradient(180deg, #fff5f5 0%, #fff 100%);
  border: 1px solid #fecaca; /* soft red border */
  padding: 12px 14px;
  border-radius: 8px;
  margin-bottom: 12px;
  box-shadow: 0 6px 18px rgba(16,24,40,0.04);
  transform: translateY(-6px);
  opacity: 0;
  transition: opacity 220ms cubic-bezier(.2,.9,.2,1), transform 220ms cubic-bezier(.2,.9,.2,1);
}
.form-errors.show{display:block;opacity:1;transform:translateY(0)}
.form-errors ul{margin:0;padding-left:18px}
.form-errors li{margin:6px 0}
.form-errors .close-btn{position:absolute;right:10px;top:6px;background:transparent;border:0;color:inherit;font-size:20px;line-height:1;cursor:pointer}
.form-errors .errors-inner{padding-right:26px}

/* Close button appears on hover only */
.form-errors .close-btn{opacity:0;transition:opacity 180ms ease}
.form-errors:hover .close-btn{opacity:1}

/* Highlight invalid inputs */
.demo-form input.invalid, .demo-form select.invalid, .demo-form textarea.invalid, .solution-questions .invalid{
  border-color: #b91c1c !important;
  box-shadow: 0 4px 14px rgba(185,28,28,0.08);
}

/* Inline per-field error messages */
.field-error{
  margin-top:6px;
  color:#7f1d1d;
  font-size:0.9rem;
}

/* Shake animation for repeated submissions */
@keyframes shake {
  0% { transform: translateX(0); }
  20% { transform: translateX(-6px); }
  40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); }
  80% { transform: translateX(4px); }
  100% { transform: translateX(0); }
}
.form-errors.shake{ animation: shake 360ms cubic-bezier(.36,.07,.19,.97); }

/* Responsiveness */
@media (max-width:900px){
  .hero-grid{grid-template-columns:1fr;}
  .cards{grid-template-columns:1fr 1fr;gap:14px}
  .pricing-grid{grid-template-columns:1fr}
  .contact-grid{grid-template-columns:1fr}
  .main-nav a{margin-left:12px}
  .container{padding:18px}
  .logo img{height:106px;max-height:106px}
  .menu-toggle{display:block}
  .main-nav{display:none}
  .main-nav.mobile-visible{display:flex;flex-direction:column;gap:10px;background:transparent;padding-top:12px}
  .main-nav.mobile-visible a{padding:8px 0}
  .hero-content h1{font-size:1.6rem}
  .lead{font-size:0.98rem}
  .hero-media{display:none}
  .hero-inline{float:none;width:100%;margin:12px 0 18px;border-radius:8px}
  .btn{width:100%;text-align:center}
  .cta-buttons{flex-direction:column}
  .modal-dialog{padding:16px}
  /* Tablet-specific partner/footer sizing */
  .partners img{height:56px}
  .footer-left img{height:80px}
  .footer-inner{flex-direction:column;align-items:flex-start;gap:32px}
  .footer-left,.footer-center,.footer-right{flex:none;width:100%}
  .footer-center{text-align:left;margin-top:0}
  .footer-nav{flex-direction:column;gap:24px;align-items:flex-start}
  .nav-column{min-width:auto}
  .footer-right{text-align:left;margin-top:0}
  .footer-right h4{text-align:left}
  .social-links{justify-content:flex-start}
  .contact-info{align-items:flex-start}
  .footer-links{flex-wrap:wrap}
}

@media (max-width:480px){
  .trust-list{flex-direction:column}
  .header-inner{padding:8px 0;flex-direction:row;align-items:center}
  .main-nav a.cta{padding:6px 10px}
  .logo img{height:94px;max-height:94px}
  .cards{grid-template-columns:1fr}
  .card img{height:110px;object-fit:contain}
  .hero-content h1{font-size:1.25rem}
  .lead{font-size:0.92rem}
  .hero{padding:28px 0}
  .container{padding:12px}
  .partners img{height:48px}
  .footer-left img{height:60px}
}