/* =================================================================
   Global Overrides — dev2.goopter.com
   Loaded LAST to cascade over every page template.
   ================================================================= */

/* ------------------------------------------------------------------
   1. ~~Global H1 Normalization~~ REMOVED
      Per-page templates set their own h1 sizes (48px on most pages).
      A global 38px override was suppressing those, making headings
      look smaller than the live site.
   ------------------------------------------------------------------ */

/* ------------------------------------------------------------------
   2. Standardized Button & CTA Tokens
   Enforces primary teal CTA across all legacy templates and Elementor
   buttons to match the new CTA system.
   ------------------------------------------------------------------ */
.btn-primary-teal,
.elementor-button.elementor-size-md {
    background-color: #008080 !important;
    color: #ffffff !important;
    padding: 12px 28px !important;
    border-radius: 4px !important;
    font-weight: 600 !important;
    border: none !important;
}

.btn-primary-teal:hover,
.elementor-button.elementor-size-md:hover {
    background-color: #006666 !important;
    color: #ffffff !important;
}

/* ------------------------------------------------------------------
   3. Use-Case Hero Padding Alignment
   Standardises vertical rhythm on all use-case pages (restaurant,
   retail, hotel, movie-theatre, casino, etc.) and ensures subheadline
   font weights stay at 400.
   ------------------------------------------------------------------ */
.usecase-page .hero-section,
.usecase-page .ViewCaseSection,
.casino-page .hero-section,
.casino-page .main-background,
.restaurant-page .hero-section,
.retail-page .hero-section,
.hotel-page .hero-section,
.movie-page .hero-section {
    padding: 60px 0 !important;
}

/* Subheadline / paragraph weight inside use-case hero blocks */
.usecase-page .hero-section p,
.usecase-page .ViewCaseSection a,
.casino-page .main-background p,
.restaurant-page .hero-section p,
.retail-page .hero-section p,
.hotel-page .hero-section p,
.movie-page .hero-section p {
    font-weight: 400 !important;
    font-family: 'Open Sans', sans-serif;
}

/* ------------------------------------------------------------------
   4. Remove Stray Background Accent Boxes on Secondary Spec Blocks
   Strips persistent faint pale background highlight boxes /
   pseudo-elements from older imported pages (Clover sub-sections,
   merchant-service spec blocks, etc.).
   ------------------------------------------------------------------ */
.elementor-heading-wrapper,
.spec-block-heading {
    background: transparent !important;
}

/* Also target the decorative SVG rectangles and the light-red PNG
   that appear behind spec/feature headings on Clover pages. */
.contents-two-column-pos .header,
.contents-two-column-pos .row {
    background: transparent !important;
}

/* Ensure no leftover radial/linear gradients leak into spec blocks */
.features .background,
.contents-two-column-pos .row::before,
.contents-two-column-pos .row::after {
    background: transparent !important;
}

/* ------------------------------------------------------------------
   5. Blog Index Grid Alignment
   Ensures the multi-post grid at /blogs/ uses a uniform 30px gap on
   desktop and tablet viewports.
   ------------------------------------------------------------------ */
.card-list {
    gap: 30px;
}

/* Tablet (640px+) */
@media (min-width: 640px) {
    .card-list {
        gap: 30px;
    }
}

/* Desktop (980px+) */
@media (min-width: 980px) {
    .card-list {
        gap: 30px;
    }
}

/* ------------------------------------------------------------------
   6. 404 fix — section hidden under fixed header in desktop view
   .main-header is position:fixed (65px mobile, 114px desktop ≥1111px
   per header.css:1). 404 template has no hero padding, so h1 was
   rendered under header. Add top padding matching header height;
   keep header height unchanged to stay aligned with dev2.goopter.com.
   ------------------------------------------------------------------ */
.error-404-section {
    padding-top: 65px;
}
@media (min-width: 1111px) {
    .error-404-section {
        padding-top: 114px;
    }
}

/* ------------------------------------------------------------------
   7. Tablet Horizontal Overflow Fix (700–900px) — HIGH PRIORITY
   Decorative SVGs (hero-bg1/2/3, bg-img-left/right, etc.) extend
   beyond viewport and create horizontal scrollbar at tablet widths.
   Use safe containment without hiding legitimate content.
   ------------------------------------------------------------------ */
html, body {
    overflow-x: clip;
    max-width: 100vw;
}
.home, .pricing-page, .main-page, .main-container, .merchant-service-page {
    overflow-x: clip;
    max-width: 100%;
}
.home .hero-bg1 {
    max-width: 85vw;
    overflow: hidden;
}
.home .hero-bg2, .home .hero-bg3,
.bg-img-left, .bg-img-right1, .bg-img-right2,
.hg-bg-left, .hg-bg-right, .bg-img-left, .bg-img-right2,
.page-header-bg-left, .page-header-bg-right, .page-header-bg-right-shadow,
.title-subtitle-page-header .hg-bg-left,
.title-subtitle-page-header .rightFrame,
.title-subtitle-page-header .rightBox {
    max-width: 100vw;
    pointer-events: none;
}
@media (max-width: 1024px) and (min-width: 700px) {
    .home .hero-bg1 {
        right: 0;
        width: 85vw;
        max-width: 100vw;
        transform-origin: top right;
    }
    .what-sets .bg, .what-sets .bg-left, .what-sets .bg-right {
        overflow: hidden;
        max-width: 100vw;
    }
    .what-sets .bg-img-left, .what-sets .bg-img-right1, .what-sets .bg-img-right2 {
        max-width: 100vw;
    }
}
@media (max-width: 900px) and (min-width: 700px) {
    .home {
        overflow-x: clip;
    }
    .home .hero-bg2 {
        left: -80px !important;
        max-width: 60vw;
    }
    .home .hero-bg3 {
        max-width: 30vw;
        left: -10px;
    }
}

/* ------------------------------------------------------------------
   8. Typography — raise 11px small text to 12–13px for readability
   ------------------------------------------------------------------ */
small, .small-text, .weaker, .footer .small, .pricing-page .small-text {
    font-size: 12px !important;
}
@media (min-width: 768px) {
    .weaker { font-size: 13px !important; }
}

/* ------------------------------------------------------------------
   9. Pale Rectangle / Heading Artifact — ensure no faint background
   behind headings on Clover / merchant-service pages
   ------------------------------------------------------------------ */
.rectangle-light-red, .rectangle-light, img.rectangle-light-red {
    display: none !important;
}
.title .primary, .title .accent, .merchant-service .title h2,
.contents-two-column-pos .title h2, .green-banner h2 {
    background: transparent !important;
    box-shadow: none !important;
}
.contents-two-column-pos .header::before,
.contents-two-column-pos .row::before,
.green-banner::before {
    display: none !important;
}

/* ------------------------------------------------------------------
   10. Mobile Floating Widgets — chat + back-to-top overlap at 390px
   ------------------------------------------------------------------ */
#scrollToTop, #liveChatButton {
    z-index: 9998;
}
#scrollToTop {
    bottom: 20px;
    right: 20px;
}
#liveChatButton {
    bottom: 20px;
    right: 80px;
}
@media (max-width: 768px) {
    #scrollToTop {
        display: none !important;
    }
    #liveChatButton {
        bottom: 16px;
        right: 16px;
    }
    body {
        padding-bottom: 70px;
    }
}
@media (max-width: 414px) {
    #liveChatButton {
        bottom: 12px;
        right: 12px;
        transform: scale(0.92);
    }
}

/* ------------------------------------------------------------------
   11. CTA Standardization — Primary teal fill, secondary outline
   ------------------------------------------------------------------ */
.primary.green-button, .primary .green-button, a.green-button, .green-button a,
.btn.green-button, .custom-button.primary a, .pricing-page .custom-button.primary a {
    background-color: #11B7B5 !important;
    color: #fff !important;
    border: 2px solid #11B7B5 !important;
    font-weight: 600 !important;
}
.primary.green-button:hover, a.green-button:hover, .green-button a:hover {
    background-color: #0E9795 !important;
    border-color: #0E9795 !important;
}
/* Accent button — #f30 (#FF3300) for all variants:
   class="accent-button", class="accent-button text-center", class="btn accent-button" */
.accent-button,
.accent-button.text-center,
.btn.accent-button,
a.accent-button,
a.accent-button.text-center,
a.btn.accent-button,
.btn.accent-button a,
div.btn.accent-button {
    background-color: #FF3300 !important; /* #f30 */
    background: #FF3300 !important;
    color: #fff !important;
    border: 2px solid #FF3300 !important;
}
.accent-button:hover,
.accent-button.text-center:hover,
.btn.accent-button:hover,
a.accent-button:hover,
a.accent-button.text-center:hover,
a.btn.accent-button:hover,
.btn.accent-button a:hover,
div.btn.accent-button:hover {
    background-color: #C53815 !important;
    background: #C53815 !important;
    color: #fff !important;
    border-color: #C53815 !important;
}
a.primary.red {
    background-color: transparent !important;
    color: #11B7B5 !important;
    border: 2px solid #11B7B5 !important;
}
a.primary.red:hover {
    background-color: #11B7B5 !important;
    color: #fff !important;
}
/* Unified: red buttons must match blue (teal #11B7B5) — browse-by-use-cases active primary red should look like primary blue.
   Previously scoped to --accent (#FF3300); now maps to --primary so all header red buttons are teal outline / teal fill active. */
.title-subtitle-page-header .header a.primary.red {
    background-color: #fff !important;
    color: var(--primary) !important;
    border-color: var(--primary) !important;
}
.title-subtitle-page-header .header a.primary.red:hover {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
a.primary.red.active,
.title-subtitle-page-header .header a.primary.red.active,
.title-subtitle-page-header .header a.red.active {
    background-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
a.primary.red.active:hover,
.title-subtitle-page-header .header a.primary.red.active:hover,
.title-subtitle-page-header .header a.red.active:hover {
    background-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
/* Ensure plain .red in header also matches blue (covers Self-Serve button on software-solution without primary) */
.title-subtitle-page-header .header a.red {
    border-color: var(--primary) !important;
    color: var(--primary) !important;
}
.title-subtitle-page-header .header a.red:hover,
.title-subtitle-page-header .header a.red.active {
    background-color: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
/* Self-Serve Ordering Kiosk: primary red must be #FF3300 per latest request — overrides teal mapping with higher specificity */
.software-solution-page .title-subtitle-page-header .header a.primary.red,
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.red,
.software-solution-page .title-subtitle-page-header .header a.red,
.software-solution-kiosk-page .title-subtitle-page-header .header a.red {
    border-color: #FF3300 !important;
    color: #FF3300 !important;
    background-color: #fff !important;
}
.software-solution-page .title-subtitle-page-header .header a.primary.red:hover,
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.red:hover,
.software-solution-page .title-subtitle-page-header .header a.red:hover,
.software-solution-kiosk-page .title-subtitle-page-header .header a.red:hover,
.software-solution-page .title-subtitle-page-header .header a.primary.red.active,
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.red.active,
.software-solution-page .title-subtitle-page-header .header a.red.active,
.software-solution-kiosk-page .title-subtitle-page-header .header a.red.active {
    background-color: #FF3300 !important;
    color: #fff !important;
    border-color: #FF3300 !important;
}
/* Software Solution page: all header buttons should be #FF3300 with border per request (software-solution/?lang=en) */
.software-solution-page .title-subtitle-page-header .header a.primary.blue,
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue,
.software-solution-page .title-subtitle-page-header .header a.blue,
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue {
    border: 2px solid #FF3300 !important;
    border-color: #FF3300 !important;
    color: #FF3300 !important;
    background-color: #fff !important;
}
.software-solution-page .title-subtitle-page-header .header a.primary.blue:hover,
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue:hover,
.software-solution-page .title-subtitle-page-header .header a.blue:hover,
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue:hover,
.software-solution-page .title-subtitle-page-header .header a.primary.blue.active,
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue.active,
.software-solution-page .title-subtitle-page-header .header a.blue.active,
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue.active {
    background-color: #FF3300 !important;
    color: #fff !important;
    border-color: #FF3300 !important;
}
/* software-solution + software-solution-kiosk: Cloud-Based eCommerce System + Request Quote — Goopter blue override */
.software-solution-page .title-subtitle-page-header .header a.primary.blue[href*="software-solution"],
.software-solution-page .title-subtitle-page-header .header a.primary.blue[href*="request-quote"],
.software-solution-page .title-subtitle-page-header .header a.blue[href*="software-solution"],
.software-solution-page .title-subtitle-page-header .header a.blue[href*="request-quote"],
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue[href*="software-solution"],
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue[href*="request-quote"],
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue[href*="software-solution"],
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue[href*="request-quote"] {
    border: 2px solid var(--primary) !important;
    border-color: var(--primary) !important;
    color: var(--primary) !important;
    background-color: #fff !important;
}
.software-solution-page .title-subtitle-page-header .header a.primary.blue[href*="software-solution"]:hover,
.software-solution-page .title-subtitle-page-header .header a.primary.blue[href*="request-quote"]:hover,
.software-solution-page .title-subtitle-page-header .header a.blue[href*="software-solution"]:hover,
.software-solution-page .title-subtitle-page-header .header a.blue[href*="request-quote"]:hover,
.software-solution-page .title-subtitle-page-header .header a.primary.blue.active[href*="software-solution"],
.software-solution-page .title-subtitle-page-header .header a.primary.blue.active[href*="request-quote"],
.software-solution-page .title-subtitle-page-header .header a.blue.active[href*="software-solution"],
.software-solution-page .title-subtitle-page-header .header a.blue.active[href*="request-quote"],
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue[href*="software-solution"]:hover,
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue[href*="request-quote"]:hover,
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue[href*="software-solution"]:hover,
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue[href*="request-quote"]:hover,
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue.active[href*="software-solution"],
.software-solution-kiosk-page .title-subtitle-page-header .header a.primary.blue.active[href*="request-quote"],
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue.active[href*="software-solution"],
.software-solution-kiosk-page .title-subtitle-page-header .header a.blue.active[href*="request-quote"] {
    background-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
/* Merchant Service: primary red (Browse by Use Cases) => #FF3300 base + hover #FF3300 */
.merchant-service-page .title-subtitle-page-header .header a.primary.red,
.merchant-service-page .title-subtitle-page-header .header a.red {
    border-color: #FF3300 !important;
    color: #FF3300 !important;
    background-color: #fff !important;
}
.merchant-service-page .title-subtitle-page-header .header a.primary.red:hover,
.merchant-service-page .title-subtitle-page-header .header a.red:hover,
.merchant-service-page .title-subtitle-page-header .header a.primary.red.active,
.merchant-service-page .title-subtitle-page-header .header a.red.active {
    background-color: #FF3300 !important;
    background: #FF3300 !important;
    color: #fff !important;
    border-color: #FF3300 !important;
}
/* Active POS (teal) vs Active Browse (red) differentiated by href */
.merchant-service-page .title-subtitle-page-header .header a.primary.blue.active[href*="merchant-service"],
.merchant-service-page .title-subtitle-page-header .header a.active.primary.blue[href*="merchant-service"],
.merchant-service-page .title-subtitle-page-header .header a.blue.active[href*="merchant-service"] {
    background-color: var(--primary) !important;
    background: var(--primary) !important;
    color: #fff !important;
    border-color: var(--primary) !important;
}
.merchant-service-page .title-subtitle-page-header .header a.primary.blue.active[href*="merchant-service"]:hover,
.merchant-service-page .title-subtitle-page-header .header a.active.primary.blue[href*="merchant-service"]:hover,
.merchant-service-page .title-subtitle-page-header .header a.blue.active[href*="merchant-service"]:hover {
    background-color: var(--primary-hover) !important;
    background: var(--primary-hover) !important;
    border-color: var(--primary-hover) !important;
    color: #fff !important;
}
.merchant-service-page .title-subtitle-page-header .header a.primary.blue.active[href*="browse-by-use-cases"],
.merchant-service-page .title-subtitle-page-header .header a.active.primary.blue[href*="browse-by-use-cases"],
.merchant-service-page .title-subtitle-page-header .header a.blue.active[href*="browse-by-use-cases"] {
    background-color: #FF3300 !important;
    background: #FF3300 !important;
    color: #fff !important;
    border-color: #FF3300 !important;
}
.merchant-service-page .title-subtitle-page-header .header a.primary.blue.active[href*="browse-by-use-cases"]:hover,
.merchant-service-page .title-subtitle-page-header .header a.active.primary.blue[href*="browse-by-use-cases"]:hover,
.merchant-service-page .title-subtitle-page-header .header a.blue.active[href*="browse-by-use-cases"]:hover {
    background-color: #C53815 !important;
    background: #C53815 !important;
    border-color: #C53815 !important;
    color: #fff !important;
}

/* Goopter Smart POS page — .primary.red border + hover #FF3300 per request for http://localhost/goopter/goopter_smart_pos/ */
.goopter-smart-pos a.primary.red,
.goopter-smart-pos .primary.red,
a.primary.red.goopter-smart-pos,
.goopter-smart-pos .title-subtitle-page-header .header a.primary.red {
    border: 2px solid #FF3300 !important;
    border-color: #FF3300 !important;
    color: #FF3300 !important;
    background: #fff !important;
    background-color: #fff !important;
}
.goopter-smart-pos a.primary.red:hover,
.goopter-smart-pos .primary.red:hover,
a.primary.red.goopter-smart-pos:hover,
.goopter-smart-pos .title-subtitle-page-header .header a.primary.red:hover {
    background-color: #FF3300 !important;
    background: #FF3300 !important;
    border-color: #FF3300 !important;
    color: #fff !important;
}

/* Goopter Smart POS — deployment-card onprem green-button → #FF3300 (Option 2 · Smart POS On-Premises card) */
.goopter-smart-pos .deployment-card.onprem .primary.green-button,
.goopter-smart-pos .deployment-card.onprem a.primary.green-button,
.goopter-smart-pos #deploy-onprem .primary.green-button,
.goopter-smart-pos #deploy-onprem a.primary.green-button {
    background-color: #FF3300 !important;
    background: #FF3300 !important;
    border: 2px solid #FF3300 !important;
    border-color: #FF3300 !important;
    color: #fff !important;
}
.goopter-smart-pos .deployment-card.onprem .primary.green-button:hover,
.goopter-smart-pos .deployment-card.onprem a.primary.green-button:hover {
    background-color: #C53815 !important;
    background: #C53815 !important;
    border-color: #C53815 !important;
    color: #fff !important;
}

/* ------------------------------------------------------------------
   12. Pricing Page Mobile Button Fix + Comparison Table
   ------------------------------------------------------------------ */
.comparison-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.comparison-table { width: 100%; border-collapse: collapse; min-width: 600px; }
.comparison-table th, .comparison-table td { padding: 12px; text-align: center; border: 1px solid #dfe9e4; }
.comparison-table th { background: #E7F8F8; color: #0E9795; }
@media (max-width: 576px) {
    .pricing-page .pricing-options .card { margin: 12px 8px; }
    .pricing-page .custom-button.primary a { width: 100% !important; font-size: 18px !important; }
}

/* ------------------------------------------------------------------
   13. Breadcrumbs — semantic nav, inherits header spacing
   ------------------------------------------------------------------ */
.goopter-breadcrumbs { padding: 12px 0; font-size: 14px; background: #f9f9f9; }
.goopter-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0 20px; }
.goopter-breadcrumbs li + li::before { content: "›"; margin-right: 6px; color: #888; }

/* ------------------------------------------------------------------
   14. Homepage Structural Helpers — preserve content while improving scan
   ------------------------------------------------------------------ */
.home .header h2 { scroll-margin-top: 120px; }
.title-subtitle-page-header .header p.primary.text-bold{margin-top:0 !important;margin-bottom:0 !important;}
/* Request demo background � match https://www.goopter.com/signup/?lang=en live image */