/* ================================================================
   SQUIDLEADS THEME — Main CSS from test-main-new
   ================================================================ */

:root {
    --primary-orange: #FF6105; 
    --accent-orange: #FF9E4D;
    --bg-cream: #FFF9F5;
    --text-dark: #222222;
    --text-muted: #555555;
    --white: #ffffff;
}

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

body {
    font-family: 'Inter', sans-serif;
    color: var(--text-dark);
    background-color: var(--bg-cream);
    line-height: 1.6;
    overflow-x: hidden;
}

a {
    color: inherit;
    text-decoration: none;
    transition: all 0.3s ease;
}

/* --- Header --- */
header {
    position: relative !important;
    background: var(--primary-orange) !important;
    width: 100% !important;
    padding: 20px 5% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    z-index: 1000 !important;
}

/* Make header transparent and absolute on landing pages */
.root_index header,
.index header,
.merchant_index header,
.faq_public header,
body:has(.hero) header,
body:has(.inner-page-hero) header,
body:has(.faq-hero) header {
    position: absolute !important;
    background: transparent !important;
}

.logo {
    display: inline-block;
    transition: transform 0.3s ease;
}

.logo:hover {
    transform: scale(1.02);
}

.logo img {
    height: 35px;
    width: auto;
    display: block;
}

.nav-links {
    display: flex;
    gap: 30px;
    align-items: center;
    margin-left: auto;
    margin-right: 40px;
}

.nav-links a {
    text-decoration: none;
    color: var(--white);
    font-size: 14px;
    font-weight: 400;
    opacity: 0.9;
    transition: opacity 0.3s;
}

.nav-links a:hover {
    opacity: 1;
}

.login-btn {
    display: inline-block !important;
    background: var(--white) !important;
    border: 1.5px solid var(--white) !important;
    color: var(--primary-orange) !important;
    padding: 8px 25px !important;
    border-radius: 20px !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    text-decoration: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05) !important;
}

.login-btn:hover {
    background: transparent !important;
    color: var(--white) !important;
    border-color: var(--white) !important;
    box-shadow: none !important;
    text-decoration: none !important;
}

/* Overrides for transparent headers (on landing pages with hero banners) */
.root_index .login-btn,
.index .login-btn,
.merchant_index .login-btn,
.faq_public .login-btn,
body:has(.hero) .login-btn,
body:has(.inner-page-hero) .login-btn,
body:has(.faq-hero) .login-btn {
    background: transparent !important;
    border-color: var(--white) !important;
    color: var(--white) !important;
    box-shadow: none !important;
}

.root_index .login-btn:hover,
.index .login-btn:hover,
.merchant_index .login-btn:hover,
.faq_public .login-btn:hover,
body:has(.hero) .login-btn:hover,
body:has(.inner-page-hero) .login-btn:hover,
body:has(.faq-hero) .login-btn:hover {
    background: var(--white) !important;
    color: var(--primary-orange) !important;
}

/* --- Hero Section --- */
.hero {
    height: 100vh;
    min-height: 600px;
    background: url('img/Main - 1.png') center/cover no-repeat;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding: 0 5%;
    position: relative;
}

.hero h1 {
    font-size: 80px;
    font-weight: 300;
    margin-bottom: 20px;
    letter-spacing: -2px;
}

.hero p {
    font-size: 20px;
    max-width: 600px;
    margin-bottom: 40px;
    opacity: 0.9;
}

.hero-btns {
    display: flex;
    gap: 20px;
}

.btn {
    padding: 15px 40px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.3s;
    display: inline-block;
    text-align: center;
}

.btn-outline {
    border: 1px solid var(--white);
    color: var(--white);
    background: transparent;
}

.btn-filled {
    background: rgba(0, 0, 0, 0.1);
    border: 1px solid rgba(0, 0, 0, 0.2);
    backdrop-filter: blur(5px);
    color: var(--white);
}

.btn-orange {
    background: var(--primary-orange);
    color: var(--white);
    border: 1px solid var(--primary-orange);
}

.btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.btn-outline:hover {
    background: var(--white);
    color: var(--primary-orange);
}

/* --- Steps Section --- */
.steps {
    padding: 80px 10%;
    background: var(--white);
}

.step-row {
    display: flex;
    padding: 50px 0;
    border-bottom: 1px solid #eeeeee;
    align-items: center;
}

.step-row:last-child {
    border-bottom: none;
}

.step-title {
    flex: 1;
    font-size: 32px;
    color: var(--accent-orange);
    font-weight: 500;
}

.step-desc {
    flex: 1;
    font-size: 16px;
    color: var(--text-dark);
    padding-left: 50px;
}

.step-desc b {
    font-weight: 700;
}

/* Steps Orange Background Override */
.steps.bg-orange {
    background: var(--primary-orange);
    color: var(--white);
}

.steps.bg-orange .step-row {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.steps.bg-orange .step-title {
    color: var(--white);
}

.steps.bg-orange .step-desc {
    color: var(--white);
}

/* --- Benefits Section --- */
.benefits {
    background: var(--primary-orange);
    padding: 100px 10%;
    color: var(--white);
    position: relative;
}

.benefits h2 {
    font-size: 60px;
    font-weight: 500;
    margin-bottom: 60px;
}

.benefits-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
}

.benefit-card {
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 40px;
    border-radius: 5px;
    height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
}

.benefit-card h3 {
    font-size: 28px;
    margin-bottom: auto;
    line-height: 1.2;
}

.benefit-card p {
    font-size: 16px;
    opacity: 0.9;
}

.benefits-arrow {
    position: absolute;
    top: 90px;
    right: 10%;
    width: 60px;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.benefits-arrow svg path {
    transition: stroke 0.3s;
}

/* Benefits Cream Background Override */
.benefits.bg-cream {
    background: var(--bg-cream);
    color: var(--text-dark);
}

.benefits.bg-cream h2 {
    color: var(--text-dark);
}

.benefits.bg-cream .benefit-card {
    border: 1px solid rgba(255, 107, 0, 0.3);
    background: var(--white);
    color: var(--text-dark);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
}

.benefits.bg-cream .benefits-arrow svg path {
    stroke: var(--text-dark);
}

/* --- Trusted By --- */
.trusted {
    padding: 80px 10%;
    text-align: center;
}

.trusted p {
    font-size: 18px;
    color: var(--text-muted);
    margin-bottom: 40px;
}

.logos {
    display: flex;
    justify-content: center;
    gap: 80px;
    align-items: center;
    flex-wrap: wrap;
}

.logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    color: var(--white);
    font-size: 14px;
}

.logo-box {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #ff4c00, #ffcc00);
    border-radius: 20px;
    filter: blur(2px);
    opacity: 0.7;
}

/* --- About Section --- */
.about {
    display: flex;
    padding: 100px 10%;
    gap: 50px;
    align-items: center;
}

.about-text {
    flex: 1;
}

.about-text p {
    margin-bottom: 30px;
    font-size: 18px;
}

.about-text h4 {
    font-size: 22px;
    margin-bottom: 20px;
}

.about-text ul {
    list-style: none;
    margin-bottom: 40px;
}

.about-text ul li::before {
    content: "•";
    color: black;
    font-weight: bold;
    display: inline-block;
    width: 1em;
    margin-left: -1em;
}

.about-text ul li {
    padding-left: 1em;
    margin-bottom: 10px;
    font-weight: 500;
}

.people-link {
    color: var(--accent-orange);
    text-decoration: none;
    font-size: 28px;
    font-weight: 300;
}

.about-image {
    flex: 1;
    height: 500px;
    background: url('img/Main - 2.png') center/cover no-repeat;
    border-radius: 30px;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 35px rgba(255, 107, 0, 0.15);
}

/* About Orange Background Override */
.about.bg-orange {
    background: var(--primary-orange);
    color: var(--white);
}

.about.bg-orange .about-text h4 {
    color: var(--white);
}

.about.bg-orange .about-text ul li::before {
    color: var(--white);
}

.about.bg-orange .people-link {
    color: var(--white);
    opacity: 0.95;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}

.about.bg-orange .people-link:hover {
    opacity: 1;
    border-bottom-color: var(--white);
}

/* --- Inner Page Hero --- */
.inner-header {
    background: transparent;
    position: absolute;
    top: 0; left: 0; width: 100%;
    z-index: 1000;
}
.inner-page-hero {
    min-height: 750px;
	height: 100vh;
    background: radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.4), transparent 40%),
        radial-gradient(circle at 80% 20%, rgba(255, 255, 255, 0.3), transparent 50%),
        linear-gradient(135deg, #FFD075 0%, #FF9E4D 100%);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: var(--white);
    padding: 180px 5% 100px;
    position: relative;
    overflow: hidden;
}
.inner-page-hero.affiliates-hero {
    background: url('img/Affiliates - 1.png') center/cover no-repeat;
}
.inner-page-hero.advertisers-hero {
    background: url('img/Advertisers - 1.png') center/cover no-repeat;
}
/* .inner-page-hero:not(.affiliates-hero):not(.advertisers-hero)::before { */
    /* content: ''; */
    /* position: absolute; */
    /* width: 200%; height: 200%; left: -50%; top: -50%; */
    /* background: repeating-radial-gradient(circle, transparent, transparent 50px, rgba(255, 255, 255, 0.1) 50px, rgba(255, 255, 255, 0.1) 100px); */
    /* opacity: 0.5; pointer-events: none; */
/* } */
.inner-page-hero h1 {
    font-size: 60px;
    font-weight: 400;
    margin-bottom: 20px;
    z-index: 2;
}
.inner-page-hero p {
    font-size: 20px;
    max-width: 600px;
    font-weight: 300;
    margin-bottom: 30px;
    z-index: 2;
}

/* --- Common Layout Utility --- */
.page-section {
    padding: 80px 10%;
}
.bg-cream { background: var(--bg-cream); }
.bg-orange { background: var(--primary-orange); color: var(--white); }
.bg-white { background: var(--white); }

/* --- Affiliates Components --- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    margin-top: 40px;
}
.feature-icon-card {
    text-align: left;
    background: var(--white);
    padding: 30px;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.03);
    transition: transform 0.3s ease;
}
.feature-icon-card:hover {
    transform: translateY(-5px);
}
.feature-card-image {
    width: 100%;
    height: 180px;
    margin-bottom: 25px;
}
.works-list {
    max-width: 800px;
    margin: 0 auto;
    font-size: 18px;
}
.works-list li {
    margin-bottom: 20px;
    padding-left: 20px;
}
.split-benefits {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 60px;
    align-items: center;
}
.benefit-list-item {
    border-bottom: 1px solid #ddd;
    padding: 20px 0;
}
.bg-orange .benefit-list-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
.callout-card {
    background: linear-gradient(135deg, #FF9E4D, #FF6B00);
    padding: 60px;
    border-radius: 30px;
    color: var(--white);
    text-align: center;
}
.callout-card.affiliates-satisfaction {
    background: 
        linear-gradient(180deg, rgba(255, 107, 0, 0.45) 0%, rgba(255, 107, 0, 0.8) 100%),
        url('img/Affiliates - 3.png') center/cover no-repeat;
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(255, 107, 0, 0.2);
}
.callout-card.auto-approval-card {
    background: var(--white);
    color: var(--text-dark);
    min-height: 420px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08);
}
.auto-approval-badge {
    width: 80px;
    height: 80px;
    background: var(--primary-orange);
    color: var(--white);
    font-size: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 30px;
    box-shadow: 0 10px 20px rgba(255, 107, 0, 0.2);
}
.callout-card .number { font-size: 120px; font-weight: bold; line-height: 1; }

/* --- Advertisers Components --- */
.value-prop-band {
    text-align: center; font-size: 24px; font-weight: 300;
}
.what-you-get-grid {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.wyget-card {
    border: 1px solid var(--primary-orange);
    padding: 30px; border-radius: 12px;
}
.wyget-card h4 { color: var(--primary-orange); margin-bottom: 10px; font-size: 20px; }

.verticals-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; max-width: 1024px; margin: 0 auto;
}
.vertical-pill {
    background: #fff; border: 1px solid #ddd; padding: 20px; border-radius: 40px;
    text-align: center; font-weight: bold; font-size: 14px; letter-spacing: 1px; color: var(--text-muted);
}
.split-choose {
    display: grid; grid-template-columns: 2fr 1fr; border-radius: 20px; overflow: hidden;
}
.split-choose-left { background: var(--primary-orange); padding: 60px; color: var(--white); }
.split-choose-right { background: #ddd; }

.image-cards-row {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px;
}
.img-card {
    height: 300px; border-radius: 16px; position: relative;
    display: flex; align-items: flex-end; padding: 25px; color: var(--white); font-weight: bold;
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    overflow: hidden;
}
.img-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 107, 0, 0.15);
}

/* --- FAQ Components --- */
.faq-hero {
    background: var(--primary-orange);
    padding: 150px 5% 50px;
    text-align: center; color: var(--white);
}
.faq-hero h1 { font-size: 72px; font-weight: 400; }

.faq-list {
    max-width: 800px; margin: 0 auto;
}
.faq-item {
    margin-bottom: 40px;
}
.faq-item h4 {
    text-transform: uppercase; font-size: 18px; font-weight: bold; margin-bottom: 15px;
}
.faq-item p {
    color: var(--text-muted); margin-bottom: 10px;
}

/* --- CTA Footer Section --- */
.cta-footer {
    display: grid;
    grid-template-columns: 1fr 1fr;
    min-height: 480px;
	background: var(--primary-orange);
}

.cta-left {
    background: url('img/Contact.png') center/cover no-repeat;
    padding: 80px 10%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
}

.cta-left::before {
    display: none;
}

.cta-title {
    font-size: 64px;
    color: var(--white);
    line-height: 1.1;
    font-weight: 400;
    z-index: 2;
    position: relative;
}

.cta-subtitle {
    font-size: 64px;
    color: var(--white);
    line-height: 1.1;
    font-weight: 300;
    margin-top: 40px;
    z-index: 2;
    position: relative;
}

.cta-right {
    background: var(--primary-orange);
    color: var(--white);
    padding: 80px 10%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.footer-bottom {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: auto;
    z-index: 2;
    position: relative;
}

.footer-links {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links a {
    color: var(--white);
    text-decoration: none;
    font-size: 14px;
    opacity: 0.9;
}

.company-info {
    text-align: right;
    font-size: 14px;
    opacity: 0.8;
    color: var(--white);
    line-height: 1.5;
}

/* --- Contact Form Styles --- */
.contact-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
    width: 100%;
    max-width: 450px;
}

.input-group {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.input-group label {
    font-size: 16px;
    color: var(--white);
    font-weight: 400;
}

.contact-form input,
.contact-form textarea {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 30px;
    padding: 15px 25px;
    color: var(--white);
    font-family: inherit;
    font-size: 16px;
    transition: all 0.3s;
    outline: none;
}

.contact-form textarea {
    border-radius: 20px;
    resize: none;
}

.contact-form input:focus,
.contact-form textarea:focus {
    border-color: var(--white);
    background: rgba(255, 255, 255, 0.1);
}

.contact-submit-btn {
    background: var(--white);
    color: var(--primary-orange);
    border: none;
    padding: 16px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    margin-top: 20px;
    transition: all 0.3s;
    width: 100%;
}

.contact-submit-btn:hover {
    background: #f8f8f8;
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

/* ================================================================
   FORM OVERRIDES
   ================================================================ */

.c1_Wrapper, .c1_WrapperContact {
    padding: 80px 10%;
    max-width: 1400px;
    margin: 0 auto;
}

.panel {
    background: var(--white);
    border-radius: 12px;
    padding: 40px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 30px;
}

.login-tabs {
    display: flex;
    list-style: none;
    border-bottom: 2px solid #eee;
    margin-bottom: 30px;
}

.login-tabs li {
    padding: 15px 30px;
}

.login-tabs li a {
    color: var(--text-muted);
}

.login-tabs li.active {
    border-bottom: 2px solid var(--primary-orange);
    color: var(--primary-orange);
    margin-bottom: -2px;
}

input[type="text"], input[type="email"], input[type="password"], textarea, select {
    width: 100%;
    padding: 15px 20px;
    border: 1px solid #ddd;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    margin-bottom: 15px;
    outline: none;
}

input:focus, textarea:focus {
    border-color: var(--primary-orange);
}

/* --- Redesigned Affiliates Styling --- */

/* Transparent Pill Button */
.btn-outline-pill {
    background: transparent;
    border: 1px solid var(--white);
    color: var(--white);
    padding: 12px 35px;
    border-radius: 30px;
    font-size: 16px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s ease;
    display: inline-block;
    text-transform: uppercase;
    letter-spacing: 1px;
}
.btn-outline-pill:hover {
    background: var(--white);
    color: var(--primary-orange);
    transform: translateY(-2px);
    box-shadow: 0 5px 15px rgba(255, 255, 255, 0.2);
}

/* Clean borderless features grid */
.features-grid-clean {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 50px;
    max-width: 1200px;
    margin: 40px auto 0;
    text-align: center;
}
.feature-clean-card {
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.feature-clean-image {
    width: 120px;
    height: 120px;
    margin-bottom: 25px;
}
.feature-clean-card h3 {
    font-size: 24px;
    font-weight: 500;
    line-height: 1.3;
    color: var(--text-dark);
}

/* Underline list items - Benefits (Orange borders) */
.benefit-underlined-item {
    border-bottom: 1px solid rgba(255, 107, 0, 0.3);
    padding: 25px 0;
}
.benefit-underlined-item:first-child {
    padding-top: 0;
}
.benefit-underlined-item:last-of-type {
    border-bottom: none;
}
.benefit-underlined-item h4 {
    font-size: 20px;
    font-weight: 300;
    color: var(--text-dark);
}

/* Underline list items - Why Join Us (White borders) */
.why-underlined-item {
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    padding: 25px 0;
}
.why-underlined-item:first-child {
    padding-top: 0;
}
.why-underlined-item:last-of-type {
    border-bottom: none;
}
.why-underlined-item h4 {
    font-size: 20px;
    font-weight: 300;
    color: var(--white);
}

/* Solid Orange Callout Card */
.callout-card-solid-orange {
    background: var(--primary-orange);
    color: var(--white);
    padding: 60px 40px;
    border-radius: 30px;
    text-align: left;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
    box-shadow: 0 15px 35px rgba(255, 107, 0, 0.15);
}
.callout-card-solid-orange .number {
    font-size: 130px;
    font-weight: 500;
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 20px;
}
.callout-card-solid-orange .callout-card-text {
    font-size: 24px;
    font-weight: 350;
    line-height: 1.3;
}

/* Split Columns Sorting & Callout Card White Outline */
.split-benefits-why {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: 80px;
    align-items: center;
}
.callout-card-outline-white {
    border: 1.5px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.05);
    padding: 65px 40px;
    border-radius: 30px;
    text-align: left;
    min-height: 400px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: baseline;
}
.callout-card-outline-white .auto-title {
    font-size: 130px;
    font-weight: 500;
    color: var(--white);
    line-height: 1;
    letter-spacing: -3px;
    margin-bottom: 10px;
}
.callout-card-outline-white .auto-text {
    font-size: 24px;
    font-weight: 350;
    color: var(--white);
    line-height: 1.3;
}

/* Mobile Responsiveness & Breakpoint Overrides */
@media (max-width: 900px) {
    .hero h1, .inner-page-hero h1 { font-size: 50px; }
    .step-row { flex-direction: column; gap: 20px; align-items: flex-start; }
    .step-desc { padding-left: 0; }
    .benefits-grid, .content-grid { grid-template-columns: 1fr; }
    .about { flex-direction: column; }
    .cta-footer { grid-template-columns: 1fr; }
    header { 
        position: relative; 
        background: var(--primary-orange); 
        flex-wrap: wrap;
        padding: 15px 5%;
        justify-content: space-between;
        align-items: center;
        gap: 10px;
    }
    .logo {
        order: 1;
    }
    .header-right {
        order: 2;
    }
    .nav-links {
        width: 100%;
        order: 3;
        margin: 15px 0 0 0 !important;
        padding-top: 15px;
        border-top: 1px solid rgba(255, 255, 255, 0.15);
        justify-content: space-around;
        gap: 15px;
    }

    /* New Mobile overrides */
    .features-grid-clean {
        grid-template-columns: 1fr;
        gap: 30px;
        margin-top: 20px;
    }
    .feature-clean-card {
        padding: 10px;
    }
    .feature-clean-image {
        width: 100px;
        height: 100px;
        margin-bottom: 15px;
    }
    .feature-clean-card h3 {
        font-size: 20px;
    }
    .split-benefits {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .split-benefits-why {
        display: flex;
        flex-direction: column-reverse; /* Heading/list first, white outline card underneath! */
        gap: 40px;
    }
    .split-benefits-why > div:last-child {
        width: 100%;
    }
    .split-benefits-why > .callout-card-outline-white {
        width: 100%;
    }
    .callout-card-solid-orange, .callout-card-outline-white {
        min-height: auto;
        padding: 50px 30px;
    }
    .callout-card-solid-orange .number, .callout-card-outline-white .auto-title {
        font-size: 100px;
    }
    .callout-card-solid-orange .callout-card-text, .callout-card-outline-white .auto-text {
        font-size: 20px;
    }
    .benefits-title, .why-join-title {
        font-size: 40px !important;
        margin-bottom: 20px !important;
    }
    .benefit-underlined-item, .why-underlined-item {
        padding: 20px 0;
    }
    .benefit-underlined-item h4, .why-underlined-item h4 {
        font-size: 18px !important;
    }
    .thumbs-up-section {
        padding: 60px 5% !important;
    }
    .thumbs-up-bold {
        font-size: 20px !important;
    }
    .thumbs-up-text {
        font-size: 16px !important;
    }
    .inner-page-hero {
        min-height: 550px !important;
        padding: 120px 5% 80px !important;
    }
}

@media (max-width: 600px) {
    .callout-card-solid-orange .number, .callout-card-outline-white .auto-title {
        font-size: 80px;
    }
    .callout-card-solid-orange .callout-card-text, .callout-card-outline-white .auto-text {
        font-size: 18px;
    }
    .hero-btns {
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        align-items: center !important;
    }
    .hero-btns .btn {
        width: 100% !important;
        max-width: 280px !important;
        padding: 14px 20px !important;
        box-sizing: border-box !important;
    }
}

/* --- Redesigned Advertisers & Main Page Fixes Styling --- */

/* Stacked Value Props Globe Wireframe */
.value-prop-band-stacked .wireframe-background-left {
	position: absolute;
    left: -60px;
    top: 0;
    width: 400px;
    height: 100%;
    background: url(img/Advertisers-n2.png) center / cover no-repeat;
    pointer-events: none;
}

/* What You Get Card */
.what-you-get-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1em;
    max-width: 1200px;
    margin: 0 auto;
}
.wyget-card-clean {
    background: transparent;
    border: 1.5px solid var(--primary-orange);
    padding: 40px 30px;
    border-radius: 0;
	height: 440px;
    text-align: left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	align-items: baseline;
}
.wyget-card-clean:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 107, 0, 0.1);
}
.wyget-card-clean h4 {
    color: var(--primary-orange);
    font-size: 20px;
    font-weight: 500;
    line-height: 1.3;
    margin-bottom: 15px;
}
.wyget-card-clean p {
    font-size: 14px;
    line-height: 1.6;
    color: var(--primary-orange);
}

/* How It Works Split screen */
.how-works-split {
    display: grid;
    grid-template-columns: 3fr 1fr;
    min-height: 600px;
    width: 100%;
}
.how-works-left {
    background: var(--primary-orange);
    padding: 80px 10%;
    color: var(--white);
}
.how-works-right {
    background: linear-gradient(135deg, #FFD075 0%, #FF6B00 100%);
}

@media (max-width: 900px) {
    .how-works-split {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    .how-works-left {
        padding: 50px 5% !important;
    }
    .how-works-right {
        height: 250px !important;
    }
}

/* Traffic Badges */
.vertical-pill-clean {
    background: var(--white);
    border: 1px solid rgba(255, 107, 0, 0.3);
    padding: 18px 30px;
    border-radius: 40px;
    text-align: center;
    font-weight: 500;
    font-size: 14px;
    letter-spacing: 1px;
    color: var(--primary-orange);
    box-shadow: 0 5px 20px rgba(255, 107, 0, 0.05);
    transition: all 0.3s ease;
}
.vertical-pill-clean:hover {
    background: var(--primary-orange);
    color: var(--white);
    transform: translateY(-2px);
}

/* Split Choose Wrap Styles */
.bg-orange-split-choose {
    padding: 0;
    background: var(--bg-cream);
}
.bg-orange-split-choose .split-choose {
    border-radius: 0;
    overflow: hidden;
}

/* Bottom Grid 2x2 Capabilities Card */
.image-cards-grid-2x2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    max-width: 100%;
    margin: 0;
}
.img-card-2x2 {
    height: 380px;
    border-radius: 0;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--white);
    text-align: center;
    padding: 40px;
    transition: transform 0.3s ease;
    overflow: hidden;
}
.img-card-2x2:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(255, 107, 0, 0.2);
}
.img-card-2x2 .img-card-title {
    font-size: 32px;
    font-weight: 400;
    line-height: 1.2;
    letter-spacing: -0.5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
    z-index: 2;
}

/* Appending Media Queries Overrides inside width <= 900px */
@media (max-width: 900px) {
    /* Advertisers responsive classes */
    .value-prop-band-stacked {
        padding: 50px 5% !important;
    }
    .value-prop-stacked-content h2 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }
    .what-you-get-grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }
    .wyget-card-clean {
		height: auto;
        padding: 30px 20px !important;
    }
    .wyget-card-clean h4 {
        font-size: 18px !important;
    }
    .how-works-split {
        grid-template-columns: 1fr !important;
        min-height: auto !important;
    }
    .how-works-left {
        padding: 60px 5% !important;
    }
    .how-works-right {
        height: 250px !important;
    }
    .verticals-grid {
        grid-template-columns: 1fr !important;
        gap: 15px !important;
        padding: 0 10px !important;
    }
    .vertical-pill-clean {
        padding: 15px 20px !important;
        font-size: 13px !important;
    }
    .bg-orange-split-choose {
        padding: 0 5% !important;
    }
    .split-choose {
        grid-template-columns: 1fr !important;
    }
    .split-choose-left {
        padding: 50px 5% !important;
    }
    .split-choose-right {
        height: 300px !important;
        min-height: auto !important;
    }
    .capabilities-section {
        padding: 0 !important;
    }
    .image-cards-grid-2x2 {
        grid-template-columns: 1fr !important;
        gap: 0 !important;
        max-width: 100% !important;
        margin: 0 !important;
    }
    .img-card-2x2 {
        height: 280px !important;
        padding: 30px 20px !important;
        border-radius: 0 !important;
        box-shadow: none !important;
    }
    .img-card-2x2 .img-card-title {
        font-size: 24px !important;
    }

    /* Main page responsive overrides */
    .about-image {
        width: 100% !important;
        height: 300px !important;
        margin-top: 30px !important;
    }
    .about-text {
        width: 100% !important;
    }
    .step-title, .step-desc {
        width: 100% !important;
    }
    .logos {
        gap: 30px !important;
    }
    .page-section {
        padding: 60px 5% !important;
    }
}

@media (max-width: 600px) {
    .value-prop-stacked-content h2 {
        font-size: 18px !important;
    }
    .img-card-2x2 .img-card-title {
        font-size: 18px !important;
    }
}

/* --- Home Page Reversed Colors & Logo Sorting Styling --- */

/* Flexbox Body Ordering for global layout sorting */
body {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
.trusted {
    order: 10; /* Shunts trusted logos to the very bottom, below global footer, on Home page only */
}

/* Transparent Benefits Outline Card */
.benefit-card-transparent {
    border: 1.5px solid var(--white);
    padding: 45px 30px;
    border-radius: 0;
    height: 440px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    color: var(--white);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.benefit-card-transparent:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(255, 255, 255, 0.12);
}
.benefit-card-transparent h3 {
    font-size: 38px;
    margin-bottom: 20px;
    line-height: 1.15;
    font-weight: 400;
    letter-spacing: -0.5px;
}
.benefit-card-transparent p {
    font-size: 24px;
    opacity: 0.95;
    line-height: 1.5;
    font-weight: 300;
}

/* Cream About value bullets styling */
.about-value-item {
    position: relative;
    padding-left: 25px;
    margin-bottom: 12px;
    font-size: 18px;
    font-weight: 500;
    color: var(--text-dark);
}
.about-value-item::before {
    content: "•";
    color: var(--primary-orange);
    font-size: 24px;
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
}

/* Responsive adjustments */
@media (max-width: 900px) {
    .benefit-card-transparent {
        height: auto !important;
        padding: 30px 20px !important;
    }
    .benefit-card-transparent h3 {
        font-size: 22px !important;
        margin-bottom: 15px !important;
    }
	.benefit-card-transparent p {
		font-size: 16px;
	}
}

@media (min-width: 767px){
	.benefit-card-transparent {
		justify-content: space-between !important;
	}
}

/* --- Additional tweaks for premium design elements --- */

/* Logo sizing optimization for stacked logo */
.logo img {
    height: 42px !important;
}

/* Home Page Hero Button Custom Styles matching Screenshot 1 */
.btn-white-outline {
    background: transparent !important;
    border: 1.5px solid var(--white) !important;
    color: var(--white) !important;
    border-radius: 50px !important;
}
.btn-white-outline:hover {
    background: rgba(255, 255, 255, 0.15) !important;
    color: var(--white) !important;
    transform: translateY(-2px);
}

.btn-black-outline {
    background: transparent !important;
    border: 1.5px solid #000000 !important;
    color: #000000 !important;
    border-radius: 50px !important;
}
.btn-black-outline:hover {
    background: rgba(0, 0, 0, 0.08) !important;
    color: #000000 !important;
    transform: translateY(-2px);
}

/* Mobile responsive layout for partner logos (2 in a row) */
@media (max-width: 768px) {
    .logos {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 40px 20px !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }
}

/* ================================================================
   GWT & REGISTRATION FORM STYLE OVERRIDES (SQ2 ORANGE THEME)
   ================================================================ */

/* Page Body: stretched background image with soft cream-orange gradient overlay */
body {
    background: linear-gradient(135deg, rgba(255, 245, 238, 0.96) 0%, rgba(255, 235, 220, 0.96) 100%), 
                url('img/Main - 1.png') center/cover no-repeat fixed !important;
}

body.root_index,
body.index,
body.merchant_index,
body.faq_public {
    background: #ffffff !important;
}

/* Page wrappers: transparent background, standard padding */
.c1_Wrapper, 
.c1_WrapperContact, 
.c1_AffiliatesWrapper {
    background: transparent !important;
    padding: 60px 10% !important;
    min-height: auto !important;
}

/* Form panel styling adjustments: premium orange top border */
.panel {
    background: var(--white) !important;
    border-radius: 12px !important;
    padding: 40px !important;
    box-shadow: 0 10px 30px rgba(0,0,0,0.03) !important;
    border: 1px solid #e2e8f0 !important;
    border-top: 4px solid var(--primary-orange) !important;
    margin-bottom: 30px !important;
}

/* Form fields layout: vertical stacking inside columns */
.FormField {
    display: flex !important;
    flex-direction: column !important;
    gap: 8px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    clear: both !important;
}

/* Labels custom typography styling */
.FormFieldLabel, 
.FormFieldLabel .Label,
.FormFieldLabel label {
    float: none !important;
    width: 100% !important;
    display: block !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    margin-bottom: 6px !important;
    text-align: left !important;
}

/* Mandatory fields star color */
.Label-mandatory {
    color: var(--primary-orange) !important;
    font-weight: bold !important;
}

/* Input boxes & dynamic GWT input wrappers */
.TextBoxContainer {
    position: relative !important;
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    height: auto !important;
    padding: 0 !important;
    margin-bottom: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.TextBoxContainer .TextBox,
.TextBoxContainer input,
input[type="text"], 
input[type="email"], 
input[type="password"], 
.gwt-TextBox, 
.gwt-PasswordTextBox, 
textarea, 
select {
    width: 100% !important;
    padding: 14px 20px !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    background: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: var(--text-dark) !important;
    box-sizing: border-box !important;
    outline: none !important;
    transition: all 0.25s ease !important;
    box-shadow: none !important;
}

/* Remove default GWT borders inside containers */
.TextBoxContainer .TextBox,
.TextBoxContainer input {
    border: none !important;
    background: transparent !important;
}

/* Focused states (prevent double-border nesting on focus) */
.TextBoxContainer-focus {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 97, 5, 0.12) !important;
}

.TextBoxContainer-focus input,
.TextBoxContainer-focus .TextBox {
    border: none !important;
    box-shadow: none !important;
}

input[type="text"]:not(.TextBoxContainer input):focus, 
input[type="email"]:not(.TextBoxContainer input):focus, 
input[type="password"]:not(.TextBoxContainer input):focus, 
.gwt-TextBox:not(.TextBoxContainer input):focus, 
.gwt-PasswordTextBox:not(.TextBoxContainer input):focus, 
textarea:focus, 
select:focus {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 97, 5, 0.12) !important;
}

/* Dropdown selections & suggest inputs */
.g-ListBoxInput, 
.ListBoxInput, 
.SelectButton, 
.gwt-ListBox {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 8px !important;
    height: auto !important;
    padding: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

.g-ListBoxInput input, 
.ListBoxInput input {
    background: transparent !important;
    border: none !important;
    padding: 14px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    color: var(--text-dark) !important;
    outline: none !important;
    height: auto !important;
    width: 100% !important;
}

/* Dropdown list popup selector panels */
.ListBoxPanel, 
.SelectButtonOptions,
.g-ListBoxPopup,
.gwt-SuggestBoxPopup,
.g-SuggestBoxPopup {
    background: #ffffff !important;
    background-image: none !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.06) !important;
    padding: 6px 0 !important;
    z-index: 99999 !important;
}

.ListBoxPanel div, 
.SelectButtonOption {
    padding: 12px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--text-dark) !important;
    cursor: pointer !important;
    border-bottom: none !important;
    transition: all 0.2s ease !important;
}

.ListBoxPanel div:hover, 
.SelectButtonOption-over,
.SelectButtonOption:hover {
    background: var(--bg-cream) !important;
    color: var(--primary-orange) !important;
}

/* ================================================================
   LOGIN ROLE SWITCH TABS
   ================================================================ */

.login-tabs {
    display: flex !important;
    list-style: none !important;
    border-bottom: 2px solid #e2e8f0 !important;
    margin-bottom: 35px !important;
    padding-left: 0 !important;
    width: 100% !important;
}

.login-tabs li {
    flex: 1 !important;
    text-align: center !important;
    padding: 15px 20px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 500 !important;
    font-size: 16px !important;
    border-bottom: 3px solid transparent !important;
    margin-bottom: -2px !important;
    transition: all 0.25s ease !important;
}

.login-tabs li a {
    color: var(--text-muted) !important;
    text-decoration: none !important;
    display: block !important;
    width: 100% !important;
}

.login-tabs li.active,
.login-tabs li:hover {
    border-bottom: 3px solid var(--primary-orange) !important;
}

.login-tabs li.active a,
.login-tabs li:hover a {
    color: var(--primary-orange) !important;
    font-weight: 600 !important;
}

/* ================================================================
   GWT NESTED BUTTON STYLE OVERRIDES (PRIMARY vs SECONDARY)
   ================================================================ */

/* Primary Button Structure (Solid Orange) */
.ImLeButtonMainOut {
    display: inline-block !important;
    vertical-align: middle !important;
    cursor: pointer !important;
    margin: 10px 0 !important;
}

.ImLeButtonMainShadow {
    display: none !important;
}

.ImLeButtonMain {
    background: var(--primary-orange) !important;
    border: 1.5px solid var(--primary-orange) !important;
    border-radius: 50px !important;
    padding: 13px 32px !important;
    transition: all 0.25s ease !important;
    box-shadow: 0 4px 14px rgba(255, 97, 5, 0.2) !important;
    display: block !important;
    height: auto !important;
}

.ImLeButtonMainContent, 
#ButtonText {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    text-align: center !important;
    display: block !important;
}

.ImLeButtonMainOut:hover .ImLeButtonMain {
    background: #e04f00 !important;
    border-color: #e04f00 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 97, 5, 0.3) !important;
}

/* Secondary Button Structure (Outline Orange) */
.ForgottenPasswordLink .ImLeButtonMain,
.ForgottenPasswordLink .ImLeButtonMainInner,
.ForgottenPasswordLink .ImLeButtonMainInnerBox,
.ForgottenPasswordLink .ImLeButtonMainShadow,
.backToLogin .ImLeButtonMain,
.backToLogin .ImLeButtonMainInner,
.backToLogin .ImLeButtonMainInnerBox,
.backToLogin .ImLeButtonMainShadow,
[id*="ForgottenPasswordLink"] .ImLeButtonMain,
[id*="ForgottenPasswordLink"] .ImLeButtonMainInner,
[id*="ForgottenPasswordLink"] .ImLeButtonMainInnerBox,
[id*="ForgottenPasswordLink"] .ImLeButtonMainShadow,
[id*="backToLogin"] .ImLeButtonMain,
[id*="backToLogin"] .ImLeButtonMainInner,
[id*="backToLogin"] .ImLeButtonMainInnerBox,
[id*="backToLogin"] .ImLeButtonMainShadow,
.secondary-btn-container button,
.secondary-btn-container .gwt-Button,
.secondary-btn-container .ImLeButtonMain,
.secondary-btn-container .ImLeButtonMainInner,
.secondary-btn-container .ImLeButtonMainInnerBox,
.secondary-btn-container .ImLeButtonMainShadow {
    background: transparent !important;
    background-image: none !important;
    border-color: var(--primary-orange) !important;
    border: 1.5px solid var(--primary-orange) !important;
    box-shadow: none !important;
}

.ForgottenPasswordLink .ImLeButtonMainContent,
.ForgottenPasswordLink #ButtonText,
.ForgottenPasswordLink .ButtonText,
.backToLogin .ImLeButtonMainContent,
.backToLogin #ButtonText,
.backToLogin .ButtonText,
[id*="ForgottenPasswordLink"] .ImLeButtonMainContent,
[id*="ForgottenPasswordLink"] #ButtonText,
[id*="ForgottenPasswordLink"] .ButtonText,
[id*="backToLogin"] .ImLeButtonMainContent,
[id*="backToLogin"] #ButtonText,
[id*="backToLogin"] .ButtonText,
.secondary-btn-container .ImLeButtonMainContent,
.secondary-btn-container #ButtonText,
.secondary-btn-container .ButtonText,
.secondary-btn-container span,
.secondary-btn-container a {
    color: var(--primary-orange) !important;
}

.ForgottenPasswordLink .ImLeButtonMainOut:hover .ImLeButtonMain,
.ForgottenPasswordLink .ImLeButtonMainOut:hover .ImLeButtonMainInner,
.ForgottenPasswordLink .ImLeButtonMainOut:hover .ImLeButtonMainInnerBox,
.backToLogin .ImLeButtonMainOut:hover .ImLeButtonMain,
.backToLogin .ImLeButtonMainOut:hover .ImLeButtonMainInner,
.backToLogin .ImLeButtonMainOut:hover .ImLeButtonMainInnerBox,
[id*="ForgottenPasswordLink"] .ImLeButtonMainOut:hover .ImLeButtonMain,
[id*="ForgottenPasswordLink"] .ImLeButtonMainOut:hover .ImLeButtonMainInner,
[id*="ForgottenPasswordLink"] .ImLeButtonMainOut:hover .ImLeButtonMainInnerBox,
[id*="backToLogin"] .ImLeButtonMainOut:hover .ImLeButtonMain,
[id*="backToLogin"] .ImLeButtonMainOut:hover .ImLeButtonMainInner,
[id*="backToLogin"] .ImLeButtonMainOut:hover .ImLeButtonMainInnerBox,
.secondary-btn-container button:hover,
.secondary-btn-container .gwt-Button:hover,
.secondary-btn-container .ImLeButtonMainOut:hover .ImLeButtonMain,
.secondary-btn-container .ImLeButtonMainOut:hover .ImLeButtonMainInner,
.secondary-btn-container .ImLeButtonMainOut:hover .ImLeButtonMainInnerBox {
    background: rgba(255, 97, 5, 0.08) !important;
    border-color: var(--primary-orange) !important;
    box-shadow: 0 4px 12px rgba(255, 97, 5, 0.1) !important;
}

/* Keep text color orange on hover/active states for secondary buttons */
.ForgottenPasswordLink .ImLeButtonMainOut:hover .ImLeButtonMainContent,
.ForgottenPasswordLink .ImLeButtonMainOut:hover #ButtonText,
.ForgottenPasswordLink .ImLeButtonMainOut:hover .ButtonText,
.backToLogin .ImLeButtonMainOut:hover .ImLeButtonMainContent,
.backToLogin .ImLeButtonMainOut:hover #ButtonText,
.backToLogin .ImLeButtonMainOut:hover .ButtonText,
[id*="ForgottenPasswordLink"] .ImLeButtonMainOut:hover .ImLeButtonMainContent,
[id*="ForgottenPasswordLink"] .ImLeButtonMainOut:hover #ButtonText,
[id*="ForgottenPasswordLink"] .ImLeButtonMainOut:hover .ButtonText,
[id*="backToLogin"] .ImLeButtonMainOut:hover .ImLeButtonMainContent,
[id*="backToLogin"] .ImLeButtonMainOut:hover #ButtonText,
[id*="backToLogin"] .ImLeButtonMainOut:hover .ButtonText,
.secondary-btn-container button:hover span,
.secondary-btn-container .gwt-Button:hover span,
.secondary-btn-container .ImLeButtonMainOut:hover .ImLeButtonMainContent,
.secondary-btn-container .ImLeButtonMainOut:hover #ButtonText,
.secondary-btn-container .ImLeButtonMainOut:hover .ButtonText {
    color: var(--primary-orange) !important;
}

/* Reset GWT outer container wrappers to prevent double border nesting */
.Button,
.gwt-Button,
.ButtonContent,
div[id*="LoginButton"],
div[id*="ForgottenPasswordLink"],
div[id*="SendButton"],
div[id*="SignupButton"] {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
    box-shadow: none !important;
    display: inline-block !important;
    height: auto !important;
    width: auto !important;
}

/* Fallback for standalone regular input/button elements */
button,
button.gwt-Button,
input[type="button"],
input[type="submit"] {
    background: var(--primary-orange) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1.5px solid var(--primary-orange) !important;
    padding: 13px 32px !important;
    border-radius: 50px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 14px rgba(255, 97, 5, 0.2) !important;
}

/* ================================================================
   CHECKBOXES, HELPER TEXT, AND INFO BLOCKS
   ================================================================ */

/* Checkbox container style */
.CheckBoxContainer, 
.CheckBoxLabel, 
.AgreeWithTerms,
.gwt-CheckBox,
span.gwt-CheckBox {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    color: var(--text-muted) !important;
    margin-bottom: 20px !important;
    cursor: pointer !important;
    font-weight: 400 !important;
    float: none !important;
    width: auto !important;
}

/* Force checkbox and text label to sit side-by-side */
.CheckBoxLabel .CheckBox,
.CheckBoxLabel .Label,
.CheckBoxLabel div.CheckBox,
.CheckBoxLabel div.Label,
.AgreeWithTerms .CheckBoxLabel .CheckBox,
.AgreeWithTerms .CheckBoxLabel .Label {
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
}

/* Custom GWT Div Checkbox styling */
.CheckBox,
div.CheckBox {
    display: inline-block !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    cursor: pointer !important;
    position: relative !important;
    box-sizing: border-box !important;
    vertical-align: middle !important;
    transition: all 0.2s ease !important;
    margin-right: 8px !important;
}

.CheckBox:hover,
div.CheckBox:hover {
    border-color: var(--primary-orange) !important;
    box-shadow: 0 0 0 3px rgba(255, 97, 5, 0.1) !important;
}

/* Checked state checkmark indicator for custom GWT checkbox */
.CheckBox-checked,
div.CheckBox-checked {
    background: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
}

.CheckBox-checked::after,
div.CheckBox-checked::after {
    content: "" !important;
    position: absolute !important;
    left: 5px !important;
    top: 2px !important;
    width: 5px !important;
    height: 9px !important;
    border: solid #ffffff !important;
    border-width: 0 2px 2px 0 !important;
    transform: rotate(45deg) !important;
}

/* Fallback style for native input checkboxes */
.CheckBoxContainer input[type="checkbox"],
.AgreeWithTerms input[type="checkbox"],
.gwt-CheckBox input[type="checkbox"],
input[type="checkbox"] {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    margin: 0 !important;
    cursor: pointer !important;
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
}

/* Signup and Login helper annotations */
.c1_Annotation,
.c1_WrapperContact p,
.panel-terms,
.CaptText {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 1.6 !important;
    color: var(--text-muted) !important;
    margin-top: 25px !important;
}

.c1_Annotation a,
.c1_Annotation .gwt-Anchor,
.c1_Annotation .gwt-Label,
.c1_WrapperContact p a,
.panel-terms a,
.panel-terms .gwt-Anchor,
.panel-terms .gwt-Label,
.c1_Wrapper a,
.c1_Wrapper .gwt-Anchor,
.c1_Wrapper .gwt-Label,
.signup-info a,
.signup-info .gwt-Anchor,
.signup-info .gwt-Label,
.ForgottenPasswordLink a,
.ForgottenPasswordLink .gwt-Anchor,
.ForgottenPasswordLink .gwt-Label,
.backToLogin a,
.backToLogin .gwt-Anchor,
.backToLogin .gwt-Label {
    color: var(--primary-orange) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 97, 5, 0.3) !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

.c1_Annotation a:hover,
.c1_Annotation .gwt-Anchor:hover,
.c1_Annotation .gwt-Label:hover,
.c1_WrapperContact p a:hover,
.panel-terms a:hover,
.panel-terms .gwt-Anchor:hover,
.panel-terms .gwt-Label:hover,
.c1_Wrapper a:hover,
.c1_Wrapper .gwt-Anchor:hover,
.c1_Wrapper .gwt-Label:hover,
.signup-info a:hover,
.signup-info .gwt-Anchor:hover,
.signup-info .gwt-Label:hover,
.ForgottenPasswordLink a:hover,
.ForgottenPasswordLink .gwt-Anchor:hover,
.ForgottenPasswordLink .gwt-Label:hover,
.backToLogin a:hover,
.backToLogin .gwt-Anchor:hover,
.backToLogin .gwt-Label:hover {
    color: #e04f00 !important;
    text-decoration-color: #e04f00 !important;
}

/* Information details sections under panels (Styled as premium cards) */
.c1_ContentTextBlock {
    background: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-left: 4px solid var(--primary-orange) !important;
    border-radius: 10px !important;
    padding: 26px 30px !important;
    margin-bottom: 25px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.015) !important;
    transition: all 0.3s ease !important;
    text-align: left !important;
}

.c1_ContentTextBlock:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04) !important;
}

.c1_ContentTextBlock h4 {
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--primary-orange) !important;
    margin-bottom: 12px !important;
    font-family: 'Inter', sans-serif !important;
    margin-top: 0 !important;
}

.c1_ContentTextBlock p {
    font-size: 15px !important;
    font-weight: 350 !important;
    line-height: 1.7 !important;
    color: var(--text-muted) !important;
    font-family: 'Inter', sans-serif !important;
}

.c1_ContentTextBlock h5 {
    font-size: 16px !important;
    font-weight: 500 !important;
    color: var(--text-dark) !important;
    margin-top: 15px !important;
    margin-bottom: 6px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Learning center lists */
.c1_LearningCenter {
    margin-top: 30px !important;
    text-align: left !important;
}

.c1_LearningCenter h4 {
    font-size: 22px !important;
    font-weight: 500 !important;
    color: var(--primary-orange) !important;
    margin-bottom: 15px !important;
    font-family: 'Inter', sans-serif !important;
}

.c1_LearningCenter h5 {
    font-size: 16px !important;
    font-weight: 400 !important;
    margin-bottom: 10px !important;
    font-family: 'Inter', sans-serif !important;
}

/* Grid separator divider line for advantages block */
.signup-info {
    margin-top: 60px !important;
    padding-top: 50px !important;
    border-top: 1px solid rgba(226, 232, 240, 0.8) !important;
}

/* ================================================================
   PAGE GRID OVERRIDES (2-COLUMN SIGNUP FIELDS)
   ================================================================ */

.row {
    display: flex !important;
    flex-wrap: wrap !important;
    margin-right: -15px !important;
    margin-left: -15px !important;
}

.col-md-6, .col-xs-12, .col-md-12 {
    position: relative !important;
    width: 100% !important;
    padding-right: 15px !important;
    padding-left: 15px !important;
    box-sizing: border-box !important;
}

@media (min-width: 992px) {
    .col-md-6 {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }
    .col-md-12 {
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}

/* ================================================================
   PAGE LOADERS & BLOCKED PANEL SPINNERS
   ================================================================ */

/* Initial Page Preloader overlay */
.preloader {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: #ffffff !important;
    z-index: 9999999 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transition: opacity 0.4s ease, visibility 0.4s ease !important;
}

.preloader-spinner {
    width: 45px !important;
    height: 45px !important;
    border: 3.5px solid rgba(255, 97, 5, 0.15) !important;
    border-top: 3.5px solid var(--primary-orange) !important;
    border-radius: 50% !important;
    animation: sl-spin 0.8s linear infinite !important;
}

.preloader.fade-out {
    opacity: 0 !important;
    visibility: hidden !important;
}

/* Dynamic blocker panel overlays */
.FormPanelBlocker {
    background-color: rgba(255, 255, 255, 0.85) !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    backdrop-filter: blur(4px) !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

.FormPanelBlocker .gwt-Label {
    display: none !important; /* Hide old text label */
}

/* Dynamic blockers & loading containers spinning wheel content */
.FormPanelBlocker::before,
.LoadingScreen::before,
.WindowLoadingBox::before,
.LoadingBox::before {
    content: '' !important;
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    border: 3px solid rgba(255, 97, 5, 0.15) !important;
    border-top: 3px solid var(--primary-orange) !important;
    border-radius: 50% !important;
    animation: sl-spin 0.8s linear infinite !important;
    margin: 0 auto !important;
}

/* Hide default low-res loader images */
.LoadingScreen,
.WindowLoadingBox,
.LoadingBox {
    background: transparent !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
}

.LoadingInfo {
    font-family: 'Inter', sans-serif !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--primary-orange) !important;
    margin-top: 15px !important;
    padding: 0 !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
}

@keyframes sl-spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ================================================================
   PAGE HEADINGS, SUBTITLES & CONTAINER SPACING OVERRIDES
   ================================================================ */

.SignupForm h3,
.c1_Wrapper h1,
.c1_WrapperContact h1,
.contact-us h1,
.c1_single {
    font-family: 'Inter', sans-serif !important;
    font-size: 32px !important;
    font-weight: 700 !important;
    color: var(--text-dark) !important;
    margin-top: 0 !important;
    margin-bottom: 25px !important;
    text-align: left !important;
    letter-spacing: -0.5px !important;
    line-height: 1.25 !important;
}

.SignupForm h3 span {
    color: var(--primary-orange) !important;
}

.panel-title,
.SignupForm h4,
.c1_WrapperContainer h4 {
    font-family: 'Inter', sans-serif !important;
    font-size: 20px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-top: 25px !important;
    margin-bottom: 15px !important;
    text-align: left !important;
    display: block !important;
}

.SignupForm,
.paddingTop {
    padding-top: 40px !important;
}

.paddingVertical {
    padding: 40px 0 !important;
}

/* ================================================================
   GWT LINK BUTTONS OVERRIDES (e.g. SEND BUTTON ON CONTACT FORM)
   ================================================================ */

.ButtonSmall,
a.ButtonSmall {
    background: var(--primary-orange) !important;
    background-image: none !important;
    color: #ffffff !important;
    border: 1.5px solid var(--primary-orange) !important;
    padding: 12px 30px !important;
    border-radius: 50px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    display: inline-block !important;
    text-align: center !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    box-shadow: 0 4px 14px rgba(255, 97, 5, 0.2) !important;
    text-decoration: none !important;
}

.ButtonSmall div,
.ButtonSmall #ButtonText {
    color: #ffffff !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-block !important;
}

.ButtonSmall:hover,
a.ButtonSmall:hover {
    background: #e04f00 !important;
    border-color: #e04f00 !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 6px 20px rgba(255, 97, 5, 0.3) !important;
    text-decoration: none !important;
}

/* ================================================================
   GWT DIALOG MODAL BOXES & POPUP OVERLAYS (TERMS & CONDITIONS)
   ================================================================ */

/* Backdrop glass overlay blur */
.gwt-PopupPanelGlass,
.PopupPanelGlass {
    background-color: rgba(15, 23, 42, 0.3) !important;
    backdrop-filter: blur(4px) !important;
    z-index: 99999 !important;
}

/* Main Modal dialog container & GWT Popup Panel containers */
.gwt-DialogBox,
.gwt-DialogBox td,
.gwt-DialogBox .dialogContent,
.gwt-DialogBox .dialogMiddleCenter,
.gwt-DialogBox .dialogMiddle,
.gwt-PopupPanel,
.gwt-PopupPanel td,
.gwt-PopupPanel .dialogContent,
.gwt-PopupPanel .dialogMiddleCenter,
.gwt-PopupPanel .dialogMiddle,
.gwt-DecoratedPopupPanel,
.gwt-DecoratedPopupPanel td,
.gwt-DecoratedPopupPanel .dialogContent,
.gwt-DecoratedPopupPanel .dialogMiddleCenter,
.gwt-DecoratedPopupPanel .dialogMiddle {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: none !important;
}

/* Centered fixed DialogBox modal layout */
.gwt-DialogBox {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    overflow: hidden !important;
    z-index: 100000 !important;
    width: 60vw !important;
    max-width: 1200px !important;
    min-width: 320px !important;
    box-sizing: border-box !important;
    animation: sl-fade-in 0.3s ease-out !important;
}

@media (max-width: 768px) {
    .gwt-DialogBox {
        width: 92vw !important;
        max-width: 92vw !important;
    }
}

/* Centered fixed GWT PopupPanel & DecoratedPopupPanel layout */
.gwt-PopupPanel,
.gwt-DecoratedPopupPanel {
    position: fixed !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 16px !important;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    z-index: 100000 !important;
    width: 60vw !important;
    max-width: 1200px !important;
    min-width: 320px !important;
    box-sizing: border-box !important;
    padding: 30px !important;
    animation: sl-fade-in 0.3s ease-out !important;
}

@media (max-width: 768px) {
    .gwt-PopupPanel,
    .gwt-DecoratedPopupPanel {
        width: 92vw !important;
        max-width: 92vw !important;
        padding: 20px !important;
    }
}

/* Flex layout inside GWT PopupPanel to position the close button at the bottom */
.gwt-PopupPanel table,
.gwt-PopupPanel tbody,
.gwt-DecoratedPopupPanel table,
.gwt-DecoratedPopupPanel tbody {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
}

.gwt-PopupPanel tr,
.gwt-DecoratedPopupPanel tr {
    display: block !important;
    width: 100% !important;
}

/* Move the row containing the close button to the bottom (order: 10) */
.gwt-PopupPanel tr:has(button),
.gwt-PopupPanel tr:has(.gwt-Button),
.gwt-PopupPanel tr:has(.Button),
.gwt-PopupPanel tr:has(.pap-btn),
.gwt-PopupPanel tr:has(.LinkButton),
.gwt-DecoratedPopupPanel tr:has(button),
.gwt-DecoratedPopupPanel tr:has(.gwt-Button),
.gwt-DecoratedPopupPanel tr:has(.Button),
.gwt-DecoratedPopupPanel tr:has(.pap-btn),
.gwt-DecoratedPopupPanel tr:has(.LinkButton) {
    order: 10 !important;
}

.LinkButton.pap-btn{
	float: right !important;
}
.FormPanel .col-md-6:last-child .ButtonContent{
	border: none !important;
	box-shadow: none !important;
	
}
.FormPanel .LinkButton.pap-btn .ButtonContent .ButtonSmall, 
.FormPanel .LinkButton.pap-btn .ButtonContent a.ButtonSmall{
	background: transparent !important;
	font-size: 12px !important;
	border: none !important;
	padding: 0 !important;
	color: var(--primary-orange) !important;
	box-shadow: none !important;
	text-decoration: underline !important;
	transform: none !important;
}
.FormPanel .c1_WrapperContact .row.paddingHorizontal .col-md-6:last-child .ButtonText:hover, 
.FormPanel .c1_WrapperContact .row.paddingHorizontal .col-md-6:last-child span:hover,
.FormPanel .secondary-btn-container .ButtonText:hover,
.FormPanel .secondary-btn-container span:hover,
.FormPanel .LinkButton.pap-btn .ButtonContent .ButtonSmall:hover,
.FormPanel .LinkButton.pap-btn .ButtonContent a.ButtonSmall:hover{
	color: #e04f00 !important;
	text-decoration-color: #e04f00 !important;
}

@media (max-width: 768px) {
	.LinkButton.pap-btn{
		float: left !important;
	}	
}

/* Keep the terms text row at the top (order: 1) */
.gwt-PopupPanel tr:has(.gwt-HTML),
.gwt-PopupPanel tr:has(.TermsContent),
.gwt-DecoratedPopupPanel tr:has(.gwt-HTML),
.gwt-DecoratedPopupPanel tr:has(.TermsContent) {
    order: 1 !important;
}

/* GWT table border layouts */
.gwt-DialogBox table,
.gwt-DialogBox .dialogContent {
    width: 100% !important;
    border-collapse: collapse !important;
}

.gwt-DialogBox td {
    padding: 0 !important;
}

/* Modal header caption bar */
.gwt-DialogBox .Caption {
    background: #f8fafc !important;
    border-bottom: 1px solid #e2e8f0 !important;
    padding: 20px 28px !important;
    font-family: 'Inter', sans-serif !important;
    font-weight: 600 !important;
    font-size: 18px !important;
    color: var(--text-dark) !important;
    cursor: move !important;
    text-align: left !important;
}

/* Modal inner body container */
.gwt-DialogBox .dialogContent {
    padding: 28px !important;
    box-sizing: border-box !important;
}

/* Scrollable text container inside modal and popup panels */
.gwt-DialogBox .dialogContent .gwt-HTML,
.gwt-DialogBox .TermsContent,
.gwt-DialogBox .dialogContent div[style*="overflow"],
.gwt-PopupPanel .gwt-HTML,
.gwt-PopupPanel .TermsContent,
.gwt-PopupPanel div[style*="overflow"],
.gwt-DecoratedPopupPanel .gwt-HTML,
.gwt-DecoratedPopupPanel .TermsContent,
.gwt-DecoratedPopupPanel div[style*="overflow"] {
    max-height: 380px !important;
    overflow-y: auto !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.6 !important;
    color: var(--text-muted) !important;
    padding: 10px 24px 20px 24px !important;
    margin-bottom: 24px !important;
    border-bottom: 1px solid #e2e8f0 !important;
    box-sizing: border-box !important;
    text-align: left !important;
}

/* Scrollable area titles */
.gwt-DialogBox .dialogContent .gwt-HTML h1,
.gwt-DialogBox .dialogContent .gwt-HTML h2,
.gwt-DialogBox .dialogContent .gwt-HTML h3,
.gwt-PopupPanel .gwt-HTML h1,
.gwt-PopupPanel .gwt-HTML h2,
.gwt-PopupPanel .gwt-HTML h3,
.gwt-DecoratedPopupPanel .gwt-HTML h1,
.gwt-DecoratedPopupPanel .gwt-HTML h2,
.gwt-DecoratedPopupPanel .gwt-HTML h3 {
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-top: 0 !important;
    margin-bottom: 15px !important;
}

/* Scrollbar customizations */
.gwt-DialogBox .dialogContent .gwt-HTML::-webkit-scrollbar,
.gwt-PopupPanel .gwt-HTML::-webkit-scrollbar,
.gwt-DecoratedPopupPanel .gwt-HTML::-webkit-scrollbar {
    width: 6px !important;
}

.gwt-DialogBox .dialogContent .gwt-HTML::-webkit-scrollbar-track,
.gwt-PopupPanel .gwt-HTML::-webkit-scrollbar-track,
.gwt-DecoratedPopupPanel .gwt-HTML::-webkit-scrollbar-track {
    background: #f1f5f9 !important;
    border-radius: 4px !important;
}

.gwt-DialogBox .dialogContent .gwt-HTML::-webkit-scrollbar-thumb,
.gwt-PopupPanel .gwt-HTML::-webkit-scrollbar-thumb,
.gwt-DecoratedPopupPanel .gwt-HTML::-webkit-scrollbar-thumb {
    background: #cbd5e1 !important;
    border-radius: 4px !important;
}

.gwt-DialogBox .dialogContent .gwt-HTML::-webkit-scrollbar-thumb:hover,
.gwt-PopupPanel .gwt-HTML::-webkit-scrollbar-thumb:hover,
.gwt-DecoratedPopupPanel .gwt-HTML::-webkit-scrollbar-thumb:hover {
    background: #94a3b8 !important;
}

/* Close button alignment wrapper (Restore proper table cell display to prevent overlap) */
.gwt-DialogBox .dialogContent td[align="center"] {
    padding: 20px 0 0 0 !important;
    text-align: center !important;
    display: table-cell !important;
}

/* Make GWT button center inside the cell */
.gwt-DialogBox .dialogContent td[align="center"] button,
.gwt-DialogBox .dialogContent td[align="center"] .gwt-Button,
.gwt-DialogBox .dialogContent td[align="center"] .ImLeButtonMainOut {
    margin: 0 auto !important;
    display: inline-block !important;
}

/* ================================================================
   AGREEMENT CHECKBOX LINK STYLES
   ================================================================ */

/* Centering agreement checkboxes on both merchant and affiliate signups */
.AgreeWithTerms,
.tac .AgreeWithTerms {
    display: inline-block !important;
    vertical-align: middle !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

.AgreeWithTerms .gwt-Label,
.AgreeWithTerms .gwt-HTML,
.AgreeWithTerms a {
    color: var(--text-dark) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-decoration-color: var(--primary-orange) !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
}

.AgreeWithTerms label:hover,
.AgreeWithTerms .gwt-Label:hover,
.AgreeWithTerms .gwt-HTML:hover,
.AgreeWithTerms a:hover {
    color: var(--primary-orange) !important;
}

/* ================================================================
   BACK TO LOGIN ACTION LINK STYLING
   ================================================================ */

.backToLogin,
.backToLogin a,
.backToLogin span,
.backToLogin div,
.backToLogin .ImLeButtonMain,
div[id*="backToLogin"] a,
div[id*="backToLogin"] span,
div[id*="backToLogin"] div,
div[id*="backToLogin"] .ImLeButtonMain {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--primary-orange) !important;
    cursor: pointer !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 97, 5, 0.3) !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    display: inline-block !important;
    padding: 0 !important;
    transition: all 0.2s ease !important;
}

.backToLogin:hover,
.backToLogin a:hover,
div[id*="backToLogin"] a:hover {
    color: #e04f00 !important;
    text-decoration-color: #e04f00 !important;
}

/* ================================================================
   CAPTCHA CONTAINER FIELDS SPACINGS
   ================================================================ */

.CaptContainer {
    margin-top: 15px !important;
    margin-bottom: 25px !important;
    text-align: left !important;
}

/* Spacing between captcha input and captcha image */
.CaptContainer input,
.CaptContainer .gwt-TextBox {
    margin-bottom: 15px !important;
    display: block !important;
}

.CaptContainer img,
.CaptContainer .gwt-Image {
    display: block !important;
    margin-top: 10px !important;
    border-radius: 6px !important;
}

/* ================================================================
   LOGIN/SIGNUP ANNOTATIONS AND HELPER LINKS
   ================================================================ */

.c1_Annotation,
.c1_Annotation .gwt-HTML {
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    line-height: 1.8 !important;
    color: var(--text-dark) !important; /* Darker plain text so links stand out */
    margin-top: 35px !important;
    text-align: left !important;
}

.c1_Annotation a,
.c1_Annotation .gwt-Anchor {
    color: var(--primary-orange) !important;
    font-weight: 600 !important;
    text-decoration: underline !important;
    text-decoration-color: rgba(255, 97, 5, 0.3) !important;
    transition: all 0.2s ease !important;
    display: inline-block !important;
    margin: 4px 0 !important;
}

.c1_Annotation a:hover,
.c1_Annotation .gwt-Anchor:hover {
    color: #e04f00 !important;
    text-decoration-color: #e04f00 !important;
}

/* Specific override for Login page Remember Me checkbox */
.CheckBoxContainer input,
.CheckBoxContainer input[type="checkbox"],
.rememberMeInput input,
.rememberMeInput input[type="checkbox"],
div[id*="rememberMeInput"] input {
    display: inline-block !important;
    visibility: visible !important;
    opacity: 1 !important;
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    appearance: checkbox !important;
    -webkit-appearance: checkbox !important;
    -moz-appearance: checkbox !important;
    background: #ffffff !important;
    border: 1px solid #cbd5e1 !important;
    border-radius: 4px !important;
    margin-right: 8px !important;
    cursor: pointer !important;
}

/* ================================================================
   INPUT FORM VALIDATION ERRORS & TOOLTIPS
   ================================================================ */

/* Highlight input boxes that failed validation */
.FormField-error .TextBoxContainer,
.FormField-error .TextBoxContainer-mandatory,
.TextBoxContainer-error,
.FormField-error input,
.TextBoxContainer-error input {
    border-color: #ef4444 !important;
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.12) !important;
}

/* Hide empty error labels completely so they do not take space or render borders */
.FormFieldError:empty,
.ErrorLabel:empty,
.gwt-Label.ErrorLabel:empty,
.FormFieldError[style*="display: none"],
.ErrorLabel[style*="display: none"] {
    display: none !important;
}

/* Error text styling (Shows only when GWT populates it with text) */
.FormFieldError:not(:empty),
.ErrorLabel:not(:empty),
.gwt-Label.ErrorLabel:not(:empty) {
    display: block !important;
    color: #ef4444 !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    margin-top: 6px !important;
    text-align: left !important;
}

/* Hide empty helper descriptions completely to prevent vertical border lines (stripes) */
.FormFieldDescription:empty,
.gwt-HTML-FFDesc:empty,
.FormFieldDescription[style*="display: none"],
.gwt-HTML-FFDesc[style*="display: none"] {
    display: none !important;
    border: none !important;
    padding: 0 !important;
}

/* Helper description / tip block styling */
.FormFieldDescription:not(:empty),
.gwt-HTML-FFDesc:not(:empty) {
    font-family: 'Inter', sans-serif !important;
    font-size: 12.5px !important;
    line-height: 1.5 !important;
    color: #64748b !important;
    margin-top: 6px !important;
    display: block !important;
    text-align: left !important;
    border: none !important;
    padding: 0 !important;
}

/* ================================================================
   TERMS & AGREEMENT SIDE-BY-SIDE CENTERING (FORCE SINGLE ROW)
   ================================================================ */

.panel-terms {
    text-align: left !important;
    padding-left: 15px !important;
    box-sizing: border-box !important;
}

.panel-terms .tac {
    text-align: left !important;
    display: block !important;
    margin-bottom: 25px !important;
    width: 100% !important;
}
.SignupForm .panel-terms .tac {
	text-align: left !important;
	margin: 0 !important;
	margin-bottom: 1em !important;
}
.SignupForm .panel-terms .AgreeWithTerms{
	max-height: 20px;
	height: auto;
}

/* Align only the main containers and labels side-by-side, leaving inner GWT divs unaffected */
.panel-terms .AgreeWithTerms,
.panel-terms .ExpandTermsAndConditions,
.panel-terms .AgreeWithTerms .CheckBoxLabel,
.panel-terms .ExpandTermsAndConditions .LabelExtendableText {
    display: inline-block !important;
    vertical-align: middle !important;
    float: none !important;
    width: auto !important;
    line-height: 1.2 !important;
}

/* Space checkbox away from text slightly and strip margins from text */
.panel-terms .AgreeWithTerms {
    margin-right: 8px !important;
    margin-left: 0 !important;
    margin-bottom: 0 !important;
}

.panel-terms .ExpandTermsAndConditions,
.panel-terms .ExpandTermsAndConditions .LabelExtendableText,
.panel-terms .ExpandTermsAndConditions div {
    margin-left: 0 !important;
    padding-left: 0 !important;
    text-indent: 0 !important;
}

.panel-terms .AgreeWithTerms .CheckBoxLabel .CheckBox {
    vertical-align: middle !important;
    margin-top: -2px !important;
}

/* Guarantee that GWT's hidden elements remain completely hidden and do not render as blank blocks (Global) */
[style*="display: none"],
[style*="display:none"],
[style*="display:  none"],
[aria-hidden="true"],
.panel-terms .CheckBoxHelpPart,
.panel-terms .CheckBoxDescription,
.FormFieldHelp[style*="display: none"],
.FormFieldHelp[style*="display:none"],
.FormFieldError[style*="display: none"],
.FormFieldError[style*="display:none"],
.FormFieldDescription[style*="display: none"],
.FormFieldDescription[style*="display:none"] {
    display: none !important;
}

/* ================================================================
   POPUP MODALS SOLID BACKGROUND & INTERACTION OVERRIDES
   ================================================================ */

/* Force solid white backgrounds on every single element inside GWT modals (excluding Caption header) */
.gwt-PopupPanel,
.PopupPanel,
.gwt-DecoratedPopupPanel,
.gwt-DialogBox,
.gwt-PopupPanel td,
.PopupPanel td,
.gwt-DecoratedPopupPanel td,
.gwt-DialogBox td,
.gwt-PopupPanel .dialogContent,
.gwt-DialogBox .dialogContent,
.gwt-PopupPanel .dialogMiddleCenter,
.gwt-DialogBox .dialogMiddleCenter,
.gwt-PopupPanel .dialogMiddle,
.gwt-DialogBox .dialogMiddle,
.gwt-PopupPanel div:not(.Caption),
.gwt-DialogBox div:not(.Caption),
.gwt-PopupPanel table,
.gwt-DialogBox table {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

/* Specific styling to make the CLOSE button inside GWT dialog boxes a smaller, clean outline button at the bottom center */
.gwt-DialogBox td[align="center"] button,
.gwt-DialogBox td[align="center"] .gwt-Button,
.gwt-DialogBox .CloseButton,
.gwt-PopupPanel td[align="center"] button,
.gwt-PopupPanel td[align="center"] .gwt-Button {
    position: relative !important;
    top: auto !important;
    right: auto !important;
    left: auto !important;
    transform: none !important;
    margin: 20px auto 10px auto !important;
    display: inline-block !important;
    background: transparent !important;
    background-image: none !important;
    border: 1.5px solid var(--primary-orange) !important;
    color: var(--primary-orange) !important;
    padding: 8px 24px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    border-radius: 30px !important;
    text-transform: uppercase !important;
    box-shadow: none !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.gwt-DialogBox td[align="center"] button:hover,
.gwt-DialogBox td[align="center"] .gwt-Button:hover,
.gwt-DialogBox .CloseButton:hover,
.gwt-PopupPanel td[align="center"] button:hover,
.gwt-PopupPanel td[align="center"] .gwt-Button:hover {
    background: rgba(255, 97, 5, 0.08) !important;
    color: var(--primary-orange) !important;
    border-color: var(--primary-orange) !important;
    transform: none !important;
    box-shadow: none !important;
}

/* ================================================================
   GWT DYNAMIC SUGGEST & DROPDOWN LISTS
   ================================================================ */

/* Style GWT suggest boxes and custom selection dropdown popups */
.gwt-SuggestBoxPopup,
.gwt-MenuBar-popup,
.SelectButtonPopup,
.suggestPopupContent,
.gwt-SuggestBoxPopup table {
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    padding: 6px !important;
    z-index: 100000 !important;
    box-sizing: border-box !important;
}

.gwt-SuggestBoxPopup td,
.gwt-MenuBar-popup td {
    background: #ffffff !important;
    background-color: #ffffff !important;
    padding: 0 !important;
}

/* Dropdown list item styling */
.gwt-SuggestBoxPopup .item,
.gwt-MenuBar-popup .gwt-MenuItem,
.SelectButtonPopup .item,
.suggestPopupContent .item {
    padding: 10px 16px !important;
    font-family: 'Inter', sans-serif !important;
    font-size: 14.5px !important;
    color: var(--text-dark) !important;
    border-radius: 6px !important;
    cursor: pointer !important;
    transition: all 0.15s ease !important;
    text-align: left !important;
}

/* Dropdown item hover/highlight state */
.gwt-SuggestBoxPopup .item-selected,
.gwt-MenuBar-popup .gwt-MenuItem-selected,
.SelectButtonPopup .item-selected,
.suggestPopupContent .item:hover {
    background: rgba(255, 97, 5, 0.08) !important;
    color: var(--primary-orange) !important;
}

/* Headings spacing adjustments on form pages */
.SignupForm {
    padding-top: 40px !important;
}

.panel-title {
    font-family: 'Inter', sans-serif !important;
    font-size: 22px !important;
    font-weight: 600 !important;
    color: var(--text-dark) !important;
    margin-top: 35px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
    display: block !important;
}

/* Ensure the first panel title doesn't have excessive top margin */
.SignupForm .panel-title:first-of-type {
    margin-top: 10px !important;
}

@keyframes sl-fade-in {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}