/*
 * Online Audience custom WHMCS Twenty One theme
 * Brand extracted from onlineaudience.co.uk website package.
 */

:root {
    --oa-blue: #005cf2;
    --oa-blue-2: #0b63ff;
    --oa-navy: #071637;
    --oa-deep: #020617;
    --oa-cyan: #38bdf8;
    --oa-muted: #64748b;
    --oa-soft: #f5f8ff;
    --oa-border: #e2e8f0;
    --oa-card-shadow: 0 18px 55px rgba(15,23,42,.09);
    --oa-card-shadow-hover: 0 25px 70px rgba(37,99,235,.15);
    --primary: var(--oa-blue);
    --primary-lifted: #0049c8;
    --primary-accented: #003ca5;
    --info: var(--oa-blue-2);
    --success: #16a34a;
    --text: var(--oa-navy);
    --bg-muted: var(--oa-soft);
}

html { font-size: 14px; scroll-behavior: smooth; }
body.oa-client-area,
body.primary-bg-color {
    background:
        radial-gradient(circle at 88% 8%, rgba(0,92,242,.10), transparent 30%),
        radial-gradient(circle at 5% 0%, rgba(56,189,248,.10), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 36%, #f8fbff 100%);
    color: var(--oa-navy);
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    text-rendering: optimizeLegibility;
}

a { color: var(--oa-blue); }
a:hover { color: #0049c8; }
::selection { background: var(--oa-blue); color: #fff; }

.container { max-width: 1180px; }
.oa-site-header { box-shadow: 0 8px 26px rgba(15,23,42,.06); position: relative; z-index: 100; }
header.header { background: rgba(255,255,255,.96); backdrop-filter: blur(14px); }
.oa-brand-ribbon {
    background: linear-gradient(90deg, var(--oa-deep), var(--oa-navy) 58%, #0b235f);
    color: #dbeafe;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .01em;
    padding: .62rem 0;
}
.oa-brand-ribbon-text { display: flex; align-items: center; gap: .55rem; }
.oa-ribbon-dot { width: .55rem; height: .55rem; border-radius: 999px; background: var(--oa-cyan); box-shadow: 0 0 0 6px rgba(56,189,248,.12); }
.oa-brand-ribbon-links { display: flex; gap: 1rem; align-items: center; flex-wrap: wrap; margin-top: .45rem; }
.oa-brand-ribbon-links a { color: #fff; opacity: .9; }
.oa-brand-ribbon-links a:hover { opacity: 1; text-decoration: none; color: #fff; }
@media (min-width: 768px) { .oa-brand-ribbon-links { margin-top: 0; } }

header.header .topbar { background: var(--oa-deep); color: rgba(255,255,255,.72); border-top: 1px solid rgba(255,255,255,.06); }
header.header .topbar .btn,
header.header .topbar .active-client .input-group-text,
header.header .topbar .active-client .btn { color: rgba(255,255,255,.78); }
header.header .topbar .btn:hover { color: #fff; }

header.header .navbar.navbar-light { padding: 1rem 0; background: rgba(255,255,255,.92); }
header.header .logo-img,
header.header .oa-logo-img { max-width: 245px; max-height: 62px; width: auto; }
header.header .search { border: 1px solid var(--oa-border); border-radius: 999px; box-shadow: 0 10px 28px rgba(15,23,42,.04); overflow: hidden; }
header.header .search:focus-within { border-color: var(--oa-blue); box-shadow: 0 0 0 4px rgba(0,92,242,.10); }
header.header .search .btn { color: var(--oa-blue); }
header.header .search .form-control { color: var(--oa-navy); font-weight: 700; }
header.header .toolbar .nav-link {
    border-color: var(--oa-border);
    background: #fff;
    color: var(--oa-navy);
    border-radius: .9rem;
    box-shadow: 0 10px 24px rgba(15,23,42,.06);
}
header.header .toolbar .nav-link:hover { color: var(--oa-blue); border-color: #bfdbfe; transform: translateY(-1px); }
header.header .toolbar .nav-link .badge { background: var(--oa-blue); color: #fff; }

header.header .main-navbar-wrapper {
    background: #fff;
    border-top: 1px solid rgba(226,232,240,.85);
    border-bottom: 1px solid rgba(226,232,240,.85);
}
header.header .main-navbar-wrapper .navbar-collapse { padding: .55rem 0; }
header.header .navbar a,
header.header .navbar-nav a {
    color: var(--oa-navy);
    font-weight: 850;
    font-size: .93rem;
    letter-spacing: -.01em;
}
header.header .navbar-nav > li > a {
    display: flex;
    align-items: center;
    min-height: 2.45rem;
    padding: .62rem .78rem;
    border-radius: .8rem;
}
header.header .navbar-nav > li > a:hover,
header.header .navbar-nav > li.show > a {
    background: #eef6ff;
    color: var(--oa-blue);
    text-decoration: none;
}
header.header .dropdown-menu {
    border: 1px solid var(--oa-border);
    border-radius: 1rem;
    box-shadow: 0 22px 60px rgba(15,23,42,.14);
    padding: .55rem;
}
header.header .dropdown-item,
header.header .dropdown-item a { border-radius: .75rem; color: var(--oa-navy); font-weight: 800; }
header.header .dropdown-item:hover,
header.header .dropdown-item a:hover { background: #eef6ff; color: var(--oa-blue); text-decoration: none; }
header.header .dropdown-item.active,
header.header .dropdown-item:active { background: var(--oa-blue); color: #fff; }

.master-breadcrumb {
    background: rgba(245,248,255,.86);
    border-bottom: 1px solid var(--oa-border);
}
.master-breadcrumb .breadcrumb { padding: .85rem 0; color: var(--oa-muted); font-weight: 700; }
.master-breadcrumb .breadcrumb a { color: var(--oa-blue); }

#main-body { padding: 2.2rem 0 4rem; }
.primary-content > h1,
.primary-content h1,
.primary-content h2,
.primary-content h3,
.oa-section-heading h2,
.oa-portal-hero h1 {
    font-weight: 900;
    letter-spacing: -.04em;
    color: var(--oa-navy);
}
.primary-content > h1 { margin-bottom: 1.1rem; }
.text-muted, .small, small { color: var(--oa-muted) !important; }

.btn {
    border-radius: .85rem;
    font-weight: 900;
    letter-spacing: -.01em;
    transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease, color .2s ease;
}
.btn:hover { transform: translateY(-2px); text-decoration: none; }
.btn-primary,
.btn-success,
.btn-info,
.btn-outline-primary:hover,
.page-item.active .page-link,
.pagination>.active>a,
.pagination>.active>span {
    background: var(--oa-blue) !important;
    border-color: var(--oa-blue) !important;
    color: #fff !important;
    box-shadow: 0 18px 44px rgba(0,92,242,.24);
}
.btn-primary:hover,
.btn-success:hover,
.btn-info:hover { background: #0049c8 !important; border-color: #0049c8 !important; }
.btn-outline-primary { color: var(--oa-blue); border-color: #bfdbfe; background: #fff; }
.btn-outline-primary:hover { color: #fff; }
.btn-default,
.btn-secondary { border-color: var(--oa-border); background: #fff; color: var(--oa-navy); font-weight: 850; }
.btn-default:hover,
.btn-secondary:hover { border-color: var(--oa-blue); color: var(--oa-blue); background: #eef6ff; }
.btn-link { color: var(--oa-blue); font-weight: 850; }

.card, .mc-promo-manage, .mc-promo-login,
.panel, .list-group, .modal-content,
.sidebar .card, .primary-content .card {
    border: 1px solid var(--oa-border);
    border-radius: 1.25rem;
    box-shadow: 0 8px 30px rgba(15,23,42,.045);
    overflow: hidden;
}
.card:hover, .primary-content .card:hover { box-shadow: var(--oa-card-shadow); }
.card-header,
.panel-heading {
    background: linear-gradient(180deg, #fff, #f8fbff);
    border-bottom: 1px solid var(--oa-border);
    color: var(--oa-navy);
    font-weight: 900;
}
.card-title { font-weight: 900; color: var(--oa-navy); }

.form-control,
.custom-select,
.input-group-text,
select,
textarea {
    border-color: #cbd5e1;
    border-radius: .85rem;
    color: var(--oa-navy);
    font-weight: 700;
}
.form-control:focus,
.custom-select:focus,
select:focus,
textarea:focus {
    border-color: var(--oa-blue);
    box-shadow: 0 0 0 4px rgba(0,92,242,.12);
}
.input-group > .form-control:not(:first-child),
.input-group > .custom-select:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.input-group > .form-control:not(:last-child),
.input-group > .custom-select:not(:last-child) { border-top-right-radius: 0; border-bottom-right-radius: 0; }

.alert { border-radius: 1rem; border: 1px solid transparent; font-weight: 700; }
.alert-info { background: #eef6ff; color: #0b3b8c; border-color: #bfdbfe; }
.alert-success { background: #ecfdf5; color: #065f46; border-color: #bbf7d0; }
.alert-warning { background: #fff7ed; color: #9a3412; border-color: #fed7aa; }
.alert-danger { background: #fef2f2; color: #991b1b; border-color: #fecaca; }

.table-list, table.table-list, .table { border-color: var(--oa-border); }
table.table-list thead th,
.dataTables_wrapper table.table-list thead th {
    background: linear-gradient(90deg, var(--oa-blue), var(--oa-blue-2));
    color: #fff;
    border-bottom: 0;
    font-weight: 900;
}
table.table-list tbody td,
.table-list>tbody>tr>td { background: #fff; }
.table-list>tbody>tr:hover>td { background: #f8fbff; }

.sidebar .card { margin-bottom: 1rem; }
.sidebar .list-group-item {
    border-color: var(--oa-border);
    color: var(--oa-navy);
    font-weight: 800;
}
.sidebar .list-group-item:hover { background: #eef6ff; color: var(--oa-blue); }
.sidebar .list-group-item.active {
    background: var(--oa-blue);
    border-color: var(--oa-blue);
    color: #fff;
}
.badge-info, .badge-primary { background: var(--oa-blue); }

.oa-kicker {
    display: inline-flex;
    color: #1d4ed8;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .2em;
    margin-bottom: .8rem;
}
.oa-portal-hero {
    position: relative;
    overflow: hidden;
    margin: -2.2rem 0 0;
    padding: 5.25rem 0 4.5rem;
    background:
        radial-gradient(circle at 82% 12%, rgba(0,92,242,.16), transparent 34%),
        radial-gradient(circle at 8% 20%, rgba(56,189,248,.12), transparent 28%),
        linear-gradient(180deg, #f8fbff 0%, #ffffff 100%);
}
.oa-portal-hero:after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background-image: linear-gradient(rgba(0,92,242,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(0,92,242,.06) 1px, transparent 1px);
    background-size: 42px 42px;
    mask-image: radial-gradient(circle at 50% 35%, #000, transparent 75%);
}
.oa-portal-hero .container { position: relative; z-index: 2; }
.oa-portal-hero h1 {
    font-size: clamp(2.2rem, 4.4vw, 4rem);
    line-height: 1.05;
    margin-bottom: 1.15rem;
}
.oa-hero-copy {
    max-width: 680px;
    font-size: 1.12rem;
    line-height: 1.85;
    color: var(--oa-muted);
    font-weight: 650;
}
.oa-hero-actions { display: flex; gap: .85rem; flex-wrap: wrap; margin: 1.7rem 0 1.25rem; }
.oa-trust-mini { display: flex; flex-wrap: wrap; gap: .65rem; }
.oa-trust-mini span {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border: 1px solid var(--oa-border);
    background: rgba(255,255,255,.78);
    color: var(--oa-navy);
    border-radius: 999px;
    padding: .6rem .85rem;
    font-size: .82rem;
    font-weight: 900;
    box-shadow: 0 12px 30px rgba(15,23,42,.05);
}
.oa-trust-mini i { color: var(--oa-blue); }
.oa-hero-panel {
    position: relative;
    border-radius: 2rem;
    background: linear-gradient(145deg, rgba(255,255,255,.92), rgba(239,246,255,.86));
    box-shadow: 0 34px 85px rgba(15,23,42,.16), inset 0 1px 0 rgba(255,255,255,.8);
    border: 1px solid rgba(148,163,184,.25);
    min-height: 360px;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.oa-hero-panel:after {
    content: "";
    position: absolute;
    inset: auto -10% -28% 15%;
    height: 46%;
    background: radial-gradient(ellipse at center, rgba(0,92,242,.18), transparent 70%);
    filter: blur(24px);
}
.oa-hero-panel img { position: relative; z-index: 2; width: 92%; height: auto; object-fit: contain; }
.oa-floating-card {
    position: absolute;
    z-index: 3;
    border: 1px solid rgba(148,163,184,.28);
    background: rgba(255,255,255,.88);
    box-shadow: 0 18px 50px rgba(15,23,42,.13);
    backdrop-filter: blur(14px);
    border-radius: 1rem;
    padding: .8rem 1rem;
}
.oa-floating-card strong { display: block; color: var(--oa-blue); font-size: 1.35rem; font-weight: 900; line-height: 1; }
.oa-floating-card span { color: var(--oa-muted); font-size: .78rem; font-weight: 850; }
.oa-floating-card-one { left: 1rem; top: 1rem; }
.oa-floating-card-two { right: 1rem; bottom: 1.1rem; }


/* Full-width homepage sections while remaining inside WHMCS primary-content wrapper. */
.primary-content > .oa-portal-hero,
.primary-content > #frmDomainHomepage,
.primary-content > .oa-section {
    width: 100vw;
    margin-left: calc(50% - 50vw);
    margin-right: calc(50% - 50vw);
}
.primary-content > #frmDomainHomepage { margin-bottom: 0; }
.primary-content > .oa-portal-hero + #frmDomainHomepage { margin-top: 0; }

.home-domain-search {
    background:
        radial-gradient(circle at 90% 25%, rgba(0,92,242,.20), transparent 32%),
        linear-gradient(135deg, var(--oa-navy), #06112d 58%, var(--oa-deep)) !important;
    color: #fff;
    margin: 0;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06);
}
.home-domain-search .p-5 { padding-top: 3.25rem !important; padding-bottom: 3.25rem !important; }
.home-domain-search h2 { color: #fff; font-weight: 900; letter-spacing: -.035em; font-size: clamp(1.8rem, 3vw, 2.6rem); }
.home-domain-search .input-group-wrapper {
    max-width: 900px;
    margin: 1.45rem auto;
    padding: .5rem;
    border: 1px solid rgba(255,255,255,.18);
    background: rgba(255,255,255,.10);
    backdrop-filter: blur(16px);
    border-radius: 1.15rem;
    box-shadow: 0 18px 60px rgba(0,0,0,.18);
}
.home-domain-search .input-group-wrapper .form-control,
.home-domain-search .input-group-wrapper textarea {
    border-radius: .85rem !important;
    min-height: 3.25rem;
    font-weight: 850;
}
.home-domain-search .input-group-wrapper .btn { border-radius: .85rem !important; padding-left: 1.2rem; padding-right: 1.2rem; }
.home-domain-search .tld-logos { display: flex; justify-content: center; flex-wrap: wrap; gap: .9rem; color: #dbeafe; }
.home-domain-search .tld-logos li {
    float: none;
    padding: .65rem .95rem;
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px;
    font-size: 1rem;
    font-weight: 850;
}
.home-domain-search .btn-link { color: #dbeafe; }

.oa-section { padding: 4.5rem 0; }
.oa-section-heading { max-width: 820px; margin: 0 auto 2.2rem; }
.oa-section-heading h2 { font-size: clamp(1.9rem, 3.4vw, 3rem); line-height: 1.08; margin-bottom: 1rem; }
.oa-section-heading p { color: var(--oa-muted); line-height: 1.8; font-size: 1.02rem; font-weight: 650; }
.oa-product-groups { background: #fff; }
.oa-card-columns.card-columns { column-gap: 1.2rem; }
.oa-service-card {
    border: 1px solid var(--oa-border);
    background: #fff;
    box-shadow: 0 8px 30px rgba(15,23,42,.045);
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease;
}
.oa-service-card:hover { transform: translateY(-4px); border-color: #3b82f6; box-shadow: var(--oa-card-shadow-hover); }
.oa-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3.7rem;
    height: 3.7rem;
    border-radius: 999px;
    background: linear-gradient(180deg, #eef6ff, #fff);
    border: 1px solid #dbeafe;
    color: var(--oa-blue-2);
    box-shadow: 0 12px 34px rgba(37,99,235,.12);
    font-size: 1.4rem;
    font-weight: 900;
    margin-bottom: 1rem;
}
.oa-service-card .pricing-card-title { font-size: 1.3rem; font-weight: 900; letter-spacing: -.025em; }
.oa-service-card p { color: var(--oa-muted); font-weight: 650; min-height: 3rem; }
.oa-help-section { background: linear-gradient(180deg, #f8fbff, #fff); }
.oa-account-section { background: #fff; }
.action-icon-btns a {
    border: 1px solid var(--oa-border);
    border-radius: 1.25rem;
    background: #fff;
    box-shadow: 0 8px 30px rgba(15,23,42,.045);
    color: var(--oa-navy);
    font-weight: 900;
    transition: transform .22s ease, border-color .22s ease, box-shadow .22s ease, color .22s ease;
}
.action-icon-btns a:hover { transform: translateY(-4px); border-color: #3b82f6; box-shadow: var(--oa-card-shadow-hover); color: var(--oa-blue); text-decoration: none; }
.action-icon-btns .ico-container { background: linear-gradient(180deg, #eef6ff, #fff) !important; border: 1px solid #dbeafe; color: var(--oa-blue); box-shadow: 0 12px 34px rgba(37,99,235,.12); }

.oa-footer { background: var(--oa-deep); color: #cbd5e1; margin-top: 0; padding: 0; }
.oa-footer-cta {
    background:
        radial-gradient(circle at 85% 20%, rgba(0,92,242,.32), transparent 36%),
        linear-gradient(135deg, var(--oa-navy), #06112d 58%, var(--oa-deep));
    padding: 3.2rem 0;
    border-top: 1px solid rgba(255,255,255,.08);
    border-bottom: 1px solid rgba(255,255,255,.08);
}
.oa-footer-cta h2 { color: #fff; font-weight: 900; letter-spacing: -.04em; font-size: clamp(1.7rem, 3vw, 2.55rem); margin-bottom: .7rem; }
.oa-footer-cta p { color: #dbeafe; margin-bottom: 0; max-width: 700px; line-height: 1.75; font-weight: 650; }
.oa-footer-cta .oa-kicker { color: #93c5fd; }
.oa-footer-cta-actions { display: flex; flex-wrap: wrap; gap: .8rem; margin-top: 1.4rem; }
.oa-footer-cta .btn-outline-light { border-color: rgba(255,255,255,.28); color: #fff; background: rgba(255,255,255,.07); }
.oa-footer-cta .btn-outline-light:hover { background: rgba(255,255,255,.16); color: #fff; }
.oa-footer-main { padding: 3.5rem 15px 2rem; }
.oa-footer-logo { max-width: 245px; background: #fff; padding: .45rem .6rem; border-radius: 1rem; margin-bottom: 1.2rem; }
.oa-footer-intro { color: #cbd5e1; line-height: 1.8; font-weight: 650; max-width: 390px; }
.oa-footer h3 { color: #fff; font-size: .84rem; font-weight: 900; text-transform: uppercase; letter-spacing: .16em; margin-bottom: 1rem; }
.oa-footer a { display: block; color: #cbd5e1; margin-bottom: .65rem; font-weight: 750; }
.oa-footer a:hover { color: #fff; text-decoration: none; }
.oa-footer-contact { color: #dbeafe; font-weight: 700; }
.oa-footer-contact i { color: var(--oa-cyan); width: 1.25rem; }
.oa-footer-bottom { margin-top: 2.25rem; padding-top: 1.5rem; border-top: 1px solid rgba(255,255,255,.10); }
.oa-footer .copyright { color: #94a3b8; }
.oa-language-btn { color: #fff; background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.16); }

.oa-support-dock {
    position: fixed;
    left: 50%;
    bottom: 1.2rem;
    transform: translateX(-50%);
    z-index: 1050;
    display: flex;
    gap: .65rem;
    max-width: calc(100vw - 2rem);
}
.oa-support-dock-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .45rem;
    border-radius: 999px;
    padding: .8rem 1rem;
    font-size: .82rem;
    font-weight: 900;
    line-height: 1;
    box-shadow: 0 18px 44px rgba(15,23,42,.20);
    transition: transform .2s ease, box-shadow .2s ease, background .2s ease, color .2s ease;
    white-space: nowrap;
    color: #fff !important;
}
.oa-support-dock-btn:hover { transform: translateY(-2px); box-shadow: 0 26px 60px rgba(15,23,42,.26); text-decoration: none; color: #fff !important; }
.oa-support-dock-primary { background: #1d4ed8; }
.oa-support-dock-primary:hover { background: #1e40af; }
.oa-support-dock-whatsapp { background: #16a34a; }
.oa-support-dock-whatsapp:hover { background: #15803d; }
.oa-support-dock-dark { background: var(--oa-deep); }
.oa-support-dock-dark:hover { background: #0f172a; }
body { padding-bottom: 4.5rem; }

/* WHMCS status and cart elements */
.domain-checker-container, .domain-promo-box, .product-status, .tiles .tile, .client-home-panels .panel { border-radius: 1.2rem; }
.product-status-active { background-color: #16a34a; }
.product-status-pending { background-color: #f59e0b; }
.product-status-suspended { background-color: var(--oa-blue); }
.product-status-cancelled,
.product-status-terminated { background-color: #475569; }
div.product-details div.product-icon { background: linear-gradient(180deg, #eef6ff, #fff); color: var(--oa-blue); border: 1px solid #dbeafe; }
.list-group-item-action:focus, .list-group-item-action:hover { background: #eef6ff; color: var(--oa-blue); }
.kb-article-title a, .announcement-single .title { color: var(--oa-navy); font-weight: 900; }

@media (max-width: 1199.98px) {
    header.header .main-navbar-wrapper .navbar-collapse { padding: .75rem 0; }
    header.header .navbar-nav > li > a { padding: .65rem .8rem; }
}
@media (max-width: 991.98px) {
    .oa-portal-hero { padding: 4rem 0 3.5rem; }
    .oa-hero-panel { min-height: 300px; }
    .oa-section { padding: 3.4rem 0; }
    .oa-footer-cta-actions { margin-top: 1.4rem; }
}
@media (max-width: 640px) {
    header.header .logo-img,
    header.header .oa-logo-img { max-width: 190px; }
    .oa-brand-ribbon-links { gap: .65rem; }
    .oa-brand-ribbon-links a { font-size: .74rem; }
    .oa-portal-hero h1 { font-size: clamp(2rem, 9vw, 3rem); }
    .oa-hero-actions .btn { width: 100%; }
    .oa-trust-mini span { width: 100%; justify-content: center; }
    .home-domain-search .p-5 { padding: 2.25rem 1rem !important; }
    .home-domain-search .input-group-wrapper .input-group { display: block; }
    .home-domain-search .input-group-wrapper .form-control { width: 100%; margin-bottom: .6rem; }
    .home-domain-search .input-group-wrapper .input-group-append { display: flex !important; width: 100%; }
    .home-domain-search .input-group-wrapper .btn { flex: 1; margin: .2rem !important; }
    .oa-footer-logo { max-width: 210px; }
    .oa-support-dock { left: .75rem; right: .75rem; bottom: .75rem; transform: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .oa-support-dock-btn { padding: .72rem .45rem; font-size: .72rem; border-radius: .9rem; width: 100%; box-shadow: 0 12px 28px rgba(15,23,42,.24); }
}


/* Online Audience custom service pages */
.oa-pages-dropdown .dropdown-menu {
    min-width: 16rem;
}
.oa-pages-dropdown .dropdown-item {
    padding: .72rem .9rem;
}
.rp-unify {
    font-family: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}
.rp-unify .btn-primary,
.rp-unify .btn-success,
.rp-unify a[class*="primary"] {
    background: linear-gradient(135deg, var(--oa-blue), #4f8cff) !important;
    border-color: transparent !important;
    color: #fff !important;
}
.rp-unify .btn-default,
.rp-unify .btn-secondary,
.rp-unify a[class*="secondary"] {
    border-color: rgba(255,255,255,.18) !important;
}
@media (min-width: 1200px) {
    .oa-pages-dropdown .dropdown-menu { max-height: 72vh; overflow-y: auto; }
}

/* Online Audience client-area promotion boxes */
.oa-promo-section {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    padding: 2.2rem 2rem 1rem;
    background:
        radial-gradient(circle at top left, rgba(0, 92, 242, .18), transparent 32rem),
        linear-gradient(135deg, #020617 0%, #071637 50%, #0b1f4d 100%);
    box-shadow: 0 24px 70px rgba(2, 6, 23, .24);
}
.oa-promo-section:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.07), transparent 42%);
}
.oa-promo-section > * {
    position: relative;
    z-index: 1;
}
.oa-promo-heading {
    max-width: 760px;
    margin-bottom: 1.5rem;
}
.oa-promo-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.16);
    color: #bfdbfe;
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.oa-promo-heading h2 {
    margin: .85rem 0 .4rem;
    color: #fff;
    font-weight: 900;
    letter-spacing: -.035em;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}
.oa-promo-heading p {
    margin: 0;
    color: #dbeafe;
    font-weight: 650;
}
.oa-promo-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 1.35rem;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,.14);
    background: rgba(255,255,255,.07);
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 16px 45px rgba(2, 6, 23, .28);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.oa-promo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 70px rgba(2, 6, 23, .36);
    border-color: rgba(255,255,255,.28);
    color: #fff !important;
}
.oa-promo-logo-wrap {
    min-height: 152px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.1), rgba(255,255,255,.03));
}
.oa-promo-logo-wrap img {
    display: block;
    max-width: 100%;
    max-height: 116px;
    object-fit: contain;
    border-radius: .9rem;
}
.oa-promo-logo-square img {
    max-height: 148px;
    max-width: 148px;
}
.oa-promo-card-body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 1.35rem;
}
.oa-promo-pill {
    width: fit-content;
    display: inline-flex;
    align-items: center;
    padding: .35rem .62rem;
    border-radius: 999px;
    background: rgba(255,255,255,.11);
    color: #dbeafe;
    border: 1px solid rgba(255,255,255,.14);
    font-size: .74rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .06em;
}
.oa-promo-card h3 {
    margin: .85rem 0 .4rem;
    color: #fff;
    font-size: 1.2rem;
    font-weight: 900;
    letter-spacing: -.02em;
}
.oa-promo-card p {
    margin: 0 0 1.2rem;
    color: #dbeafe;
    font-weight: 650;
    line-height: 1.55;
}
.oa-promo-link {
    margin-top: auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: #fff;
    font-weight: 900;
}
.oa-promo-link i {
    transition: transform .2s ease;
}
.oa-promo-card:hover .oa-promo-link i {
    transform: translateX(4px);
}
.oa-promo-card-blue .oa-promo-link,
.oa-promo-card-blue .oa-promo-pill { color: #bfdbfe; }
.oa-promo-card-purple .oa-promo-link,
.oa-promo-card-purple .oa-promo-pill { color: #f0abfc; }
.oa-promo-card-orange .oa-promo-link,
.oa-promo-card-orange .oa-promo-pill { color: #fed7aa; }
.oa-promo-card-blue { background: linear-gradient(180deg, rgba(0,92,242,.24), rgba(255,255,255,.06)); }
.oa-promo-card-purple { background: linear-gradient(180deg, rgba(168,85,247,.26), rgba(255,255,255,.06)); }
.oa-promo-card-orange { background: linear-gradient(180deg, rgba(249,115,22,.28), rgba(255,255,255,.06)); }
@media (max-width: 767.98px) {
    .oa-promo-section { padding: 1.45rem 1rem .4rem; border-radius: 1.25rem; }
    .oa-promo-logo-wrap { min-height: 126px; }
    .oa-promo-logo-wrap img { max-height: 88px; }
    .oa-promo-logo-square img { max-height: 120px; max-width: 120px; }
}



/* Online Audience responsive quote iframe */
.oa-quotes-section {
    position: relative;
    overflow: hidden;
    border-radius: 1.75rem;
    padding: 2rem;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, .18), transparent 30rem),
        linear-gradient(135deg, #f8fbff 0%, #ffffff 46%, #eef6ff 100%);
    border: 1px solid rgba(0, 92, 242, .12);
    box-shadow: 0 24px 70px rgba(15, 23, 42, .12);
}
.oa-quotes-section:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(135deg, rgba(255,255,255,.82), transparent 46%);
}
.oa-quotes-section > * {
    position: relative;
    z-index: 1;
}
.oa-quotes-header {
    max-width: 820px;
    margin-bottom: 1.35rem;
}
.oa-quotes-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .75rem;
    border-radius: 999px;
    background: #eaf2ff;
    border: 1px solid #d7e8ff;
    color: var(--oa-blue);
    font-size: .76rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.oa-quotes-header h2 {
    margin: .85rem 0 .4rem;
    color: var(--oa-navy);
    font-weight: 900;
    letter-spacing: -.035em;
    font-size: clamp(1.65rem, 3vw, 2.35rem);
}
.oa-quotes-header p {
    margin: 0;
    color: #475569;
    font-weight: 650;
    line-height: 1.65;
}
.oa-quotes-frame-shell {
    overflow: hidden;
    border-radius: 1.35rem;
    border: 1px solid rgba(0, 92, 242, .14);
    background: #fff;
    box-shadow: 0 18px 50px rgba(2, 6, 23, .10);
}
.oa-quotes-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 860px;
    border: 0;
    background: #fff;
}
.oa-quotes-fallback {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    background: rgba(0, 92, 242, .08);
    color: #334155;
    font-weight: 750;
}
.oa-quotes-fallback a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--oa-blue);
    font-weight: 900;
}
.oa-quotes-fallback a:hover {
    color: #003fbd;
    text-decoration: none;
}
@media (max-width: 991.98px) {
    .oa-quotes-section { padding: 1.45rem; border-radius: 1.35rem; }
    .oa-quotes-frame { min-height: 920px; }
}
@media (max-width: 575.98px) {
    .oa-quotes-section { padding: 1.1rem .75rem; border-radius: 1.1rem; margin-left: -.35rem; margin-right: -.35rem; }
    .oa-quotes-frame-shell { border-radius: 1rem; }
    .oa-quotes-frame { min-height: 980px; }
    .oa-quotes-fallback { align-items: flex-start; flex-direction: column; font-size: .86rem; }
}


/* OA-PROMO-QUOTE-RESPONSIVE-FIX-V3
   This fixes the client-area promo/quote sections so they stay inside the WHMCS content area,
   remove horizontal page scrolling, and remain readable on mobile. */
html,
body {
    max-width: 100%;
    overflow-x: hidden;
}
#main-body,
section#main-body,
.main-content,
.client-home-cards,
.oa-ca-extras-v3 {
    max-width: 100% !important;
    overflow-x: hidden !important;
}
.oa-ca-extras-v3,
.oa-ca-extras-v3 * {
    box-sizing: border-box;
    min-width: 0;
}
.oa-ca-extras-v3 {
    clear: both;
    width: 100%;
    margin: 2rem 0 0;
    padding: 0;
}
.oa-promo-section-v3,
.oa-quotes-section-v3 {
    width: 100%;
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
}
.oa-promo-section-v3 {
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
    padding: clamp(1.15rem, 2.5vw, 2rem);
    margin-top: 2rem;
    margin-bottom: 1.5rem;
    background:
        radial-gradient(circle at top left, rgba(0, 92, 242, .24), transparent 28rem),
        linear-gradient(135deg, #020617 0%, #071637 50%, #0b1f4d 100%);
    box-shadow: 0 22px 62px rgba(2, 6, 23, .22);
}
.oa-promo-section-v3:before,
.oa-quotes-section-v3:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 0;
}
.oa-promo-section-v3:before {
    background: linear-gradient(135deg, rgba(255,255,255,.08), transparent 45%);
}
.oa-promo-section-v3 > *,
.oa-quotes-section-v3 > * {
    position: relative;
    z-index: 1;
}
.oa-promo-heading-v3,
.oa-quotes-header-v3 {
    max-width: 820px;
    margin: 0 0 1.25rem;
}
.oa-eyebrow-v3 {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .42rem .75rem;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.18);
    color: #bfdbfe;
    font-size: .75rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .08em;
    line-height: 1.2;
}
.oa-promo-heading-v3 h2,
.oa-quotes-header-v3 h2 {
    margin: .8rem 0 .35rem;
    font-weight: 900;
    letter-spacing: -.035em;
    font-size: clamp(1.45rem, 2.8vw, 2.25rem);
    line-height: 1.1;
}
.oa-promo-heading-v3 h2 {
    color: #fff;
}
.oa-promo-heading-v3 p {
    margin: 0;
    color: #dbeafe;
    font-weight: 650;
    line-height: 1.6;
}
.oa-promo-grid-v3 {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    width: 100%;
    max-width: 100%;
    margin: 0;
}
.oa-promo-card-v3 {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 100%;
    min-height: 100%;
    overflow: hidden;
    border-radius: 1.15rem;
    border: 1px solid rgba(255,255,255,.14);
    color: #fff !important;
    text-decoration: none !important;
    background: rgba(255,255,255,.07);
    box-shadow: 0 14px 38px rgba(2, 6, 23, .26);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.oa-promo-card-v3:hover {
    transform: translateY(-4px);
    box-shadow: 0 22px 55px rgba(2, 6, 23, .34);
    border-color: rgba(255,255,255,.28);
    color: #fff !important;
}
.oa-promo-image-v3 {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 132px;
    padding: 1rem;
    background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03));
    overflow: hidden;
}
.oa-promo-image-v3 img {
    display: block;
    width: auto;
    height: auto;
    max-width: min(100%, 300px);
    max-height: 96px;
    object-fit: contain;
    border: 0;
}
.oa-promo-card-v3.is-square .oa-promo-image-v3 img {
    max-width: 132px;
    max-height: 132px;
}
.oa-promo-copy-v3 {
    display: flex;
    flex: 1;
    flex-direction: column;
    align-items: flex-start;
    padding: 1.15rem;
    overflow-wrap: anywhere;
}
.oa-promo-pill-v3 {
    display: inline-flex;
    width: auto;
    max-width: 100%;
    padding: .34rem .62rem;
    border-radius: 999px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.14);
    font-size: .72rem;
    font-weight: 900;
    letter-spacing: .055em;
    text-transform: uppercase;
    line-height: 1.2;
}
.oa-promo-copy-v3 strong {
    display: block;
    margin: .8rem 0 .35rem;
    color: #fff;
    font-size: 1.08rem;
    line-height: 1.2;
    font-weight: 900;
    letter-spacing: -.02em;
}
.oa-promo-copy-v3 small {
    display: block;
    margin: 0 0 1rem;
    color: #dbeafe;
    font-size: .94rem;
    font-weight: 650;
    line-height: 1.45;
}
.oa-promo-copy-v3 em {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin-top: auto;
    color: #fff;
    font-style: normal;
    font-weight: 900;
    line-height: 1.25;
}
.oa-promo-card-v3:hover em i {
    transform: translateX(4px);
}
.oa-promo-copy-v3 em i {
    transition: transform .18s ease;
}
.oa-promo-card-blue-v3 {
    background: linear-gradient(180deg, rgba(0,92,242,.25), rgba(255,255,255,.06));
}
.oa-promo-card-purple-v3 {
    background: linear-gradient(180deg, rgba(168,85,247,.26), rgba(255,255,255,.06));
}
.oa-promo-card-orange-v3 {
    background: linear-gradient(180deg, rgba(249,115,22,.28), rgba(255,255,255,.06));
}
.oa-promo-card-blue-v3 .oa-promo-pill-v3,
.oa-promo-card-blue-v3 em { color: #bfdbfe; }
.oa-promo-card-purple-v3 .oa-promo-pill-v3,
.oa-promo-card-purple-v3 em { color: #f0abfc; }
.oa-promo-card-orange-v3 .oa-promo-pill-v3,
.oa-promo-card-orange-v3 em { color: #fed7aa; }
.oa-quotes-section-v3 {
    position: relative;
    overflow: hidden;
    border-radius: 1.6rem;
    padding: clamp(1.15rem, 2.5vw, 2rem);
    margin-top: 1.5rem;
    margin-bottom: 2.5rem;
    background:
        radial-gradient(circle at top right, rgba(14, 165, 233, .18), transparent 30rem),
        linear-gradient(135deg, #f8fbff 0%, #ffffff 46%, #eef6ff 100%);
    border: 1px solid rgba(0, 92, 242, .12);
    box-shadow: 0 22px 62px rgba(15, 23, 42, .12);
}
.oa-quotes-section-v3:before {
    background: linear-gradient(135deg, rgba(255,255,255,.82), transparent 48%);
}
.oa-quotes-section-v3 .oa-eyebrow-v3 {
    background: #eaf2ff;
    border-color: #d7e8ff;
    color: var(--oa-blue, #005cf2);
}
.oa-quotes-header-v3 h2 {
    color: var(--oa-navy, #071637);
}
.oa-quotes-header-v3 p {
    margin: 0;
    color: #475569;
    font-weight: 650;
    line-height: 1.6;
}
.oa-quotes-frame-shell-v3 {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 1.25rem;
    border: 1px solid rgba(0, 92, 242, .14);
    background: #fff;
    box-shadow: 0 18px 50px rgba(2, 6, 23, .10);
}
.oa-quotes-frame-v3 {
    display: block;
    width: 1px !important;
    min-width: 100% !important;
    max-width: 100% !important;
    height: 1040px;
    min-height: 82vh;
    border: 0;
    margin: 0;
    background: #fff;
}
.oa-quotes-fallback-v3 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: .7rem;
    margin-top: 1rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    background: rgba(0, 92, 242, .08);
    color: #334155;
    font-weight: 750;
}
.oa-quotes-fallback-v3 a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    color: var(--oa-blue, #005cf2);
    font-weight: 900;
    text-decoration: none;
}
.oa-quotes-fallback-v3 a:hover {
    color: #003fbd;
    text-decoration: none;
}
@media (max-width: 1199.98px) {
    .oa-promo-grid-v3 {
        grid-template-columns: 1fr;
    }
    .oa-promo-card-v3 {
        flex-direction: row;
    }
    .oa-promo-image-v3 {
        width: 34%;
        min-height: 160px;
    }
    .oa-promo-copy-v3 {
        width: 66%;
    }
}
@media (max-width: 767.98px) {
    html,
    body,
    #main-body,
    section#main-body,
    .main-content,
    .client-home-cards,
    .oa-ca-extras-v3 {
        overflow-x: hidden !important;
    }
    .oa-ca-extras-v3 {
        margin-top: 1.25rem;
    }
    .oa-promo-section-v3,
    .oa-quotes-section-v3 {
        border-radius: 1.15rem;
    }
    .oa-promo-card-v3 {
        flex-direction: column;
    }
    .oa-promo-image-v3,
    .oa-promo-copy-v3 {
        width: 100%;
    }
    .oa-promo-image-v3 {
        min-height: 118px;
        padding: .85rem;
    }
    .oa-promo-image-v3 img {
        max-height: 82px;
        max-width: min(100%, 250px);
    }
    .oa-promo-card-v3.is-square .oa-promo-image-v3 img {
        max-width: 104px;
        max-height: 104px;
    }
    .oa-promo-copy-v3 {
        padding: 1rem;
    }
    .oa-quotes-frame-shell-v3 {
        border-radius: 1rem;
    }
    .oa-quotes-frame-v3 {
        height: 1180px;
        min-height: 100vh;
    }
    .oa-quotes-fallback-v3 {
        align-items: flex-start;
        flex-direction: column;
        font-size: .88rem;
    }
}
@media (max-width: 420px) {
    .oa-promo-section-v3,
    .oa-quotes-section-v3 {
        padding: 1rem .75rem;
    }
    .oa-eyebrow-v3 {
        font-size: .68rem;
    }
    .oa-promo-heading-v3 h2,
    .oa-quotes-header-v3 h2 {
        font-size: 1.35rem;
    }
    .oa-quotes-frame-v3 {
        height: 1240px;
    }
}


/* OA-QUOTE-TOP-COMPACT-V10 */
.oa-quote-top-compact {
    margin: 0 0 1.25rem;
    padding: 1.15rem;
    border: 1px solid rgba(0,92,242,.14);
    border-radius: 1.25rem;
    background: linear-gradient(135deg, rgba(255,255,255,.96), rgba(239,246,255,.96));
    box-shadow: 0 18px 42px rgba(7,22,55,.08);
    overflow: hidden;
}
.oa-quote-top-copy {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: .45rem .8rem;
    margin-bottom: .7rem;
}
.oa-quote-top-kicker {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    background: rgba(0,92,242,.08);
    color: #005cf2;
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.oa-quote-top-copy h2 {
    margin: 0;
    color: #071637;
    font-size: clamp(1.15rem, 2vw, 1.65rem);
    font-weight: 900;
}
.oa-quote-top-copy p {
    flex-basis: 100%;
    margin: 0;
    color: #475569;
    font-size: .94rem;
}
.oa-quote-top-frame-shell {
    width: 100%;
    max-width: 100%;
    border: 1px solid rgba(0,92,242,.18);
    border-radius: 1rem;
    overflow: hidden;
    background: #fff;
}
.oa-quote-top-frame {
    display: block;
    width: 100%;
    max-width: 100%;
    height: 245px;
    border: 0;
    overflow: auto;
}
.oa-quote-top-actions {
    margin-top: .55rem;
    font-size: .88rem;
}
.oa-quote-top-actions a {
    font-weight: 800;
    color: #005cf2;
}
@media (max-width: 767px) {
    .oa-quote-top-compact {
        margin: 0 0 1rem;
        padding: .9rem;
        border-radius: 1rem;
    }
    .oa-quote-top-frame {
        height: 300px;
    }
}

/* OA-TIME-TO-PAY-V10 */
.oa-ttp-page {
    max-width: 1140px;
    margin: 0 auto 3rem;
}
.oa-ttp-hero {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(280px, .6fr);
    gap: 1rem;
    align-items: stretch;
    margin-bottom: 1rem;
}
.oa-ttp-hero-copy,
.oa-ttp-hero-card,
.oa-ttp-form-card,
.oa-ttp-success {
    border-radius: 1.4rem;
    border: 1px solid rgba(0,92,242,.13);
    box-shadow: 0 24px 55px rgba(7,22,55,.08);
    background: #fff;
}
.oa-ttp-hero-copy {
    padding: clamp(1.4rem, 3vw, 2.5rem);
    background: radial-gradient(circle at top right, rgba(0,92,242,.15), transparent 38%), linear-gradient(135deg, #ffffff, #eff6ff);
}
.oa-ttp-kicker {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    margin-bottom: .7rem;
    color: #005cf2;
    font-weight: 900;
    letter-spacing: .12em;
    text-transform: uppercase;
    font-size: .75rem;
}
.oa-ttp-hero h1 {
    margin: 0 0 .8rem;
    color: #071637;
    font-size: clamp(2rem, 5vw, 3.4rem);
    line-height: .98;
    font-weight: 900;
}
.oa-ttp-hero p {
    margin: 0;
    color: #334155;
    font-size: 1.05rem;
    max-width: 720px;
}
.oa-ttp-hero-card {
    padding: 1.3rem;
    background: linear-gradient(180deg, #071637, #020617);
    color: #fff;
}
.oa-ttp-hero-card strong {
    display: block;
    margin-bottom: .65rem;
    font-size: 1.05rem;
}
.oa-ttp-hero-card ol {
    padding-left: 1.2rem;
    margin: 0;
    color: rgba(255,255,255,.82);
}
.oa-ttp-hero-card li + li {
    margin-top: .45rem;
}
.oa-ttp-form-card {
    padding: clamp(1rem, 2.4vw, 1.8rem);
}
.oa-ttp-form label {
    color: #071637;
    font-weight: 800;
}
.oa-ttp-form .form-control {
    border-radius: .85rem;
    min-height: 48px;
    border-color: rgba(7,22,55,.14);
}
.oa-ttp-form textarea.form-control {
    min-height: 150px;
}
.oa-ttp-note {
    display: flex;
    gap: .65rem;
    margin: .9rem 0 1.1rem;
    padding: .85rem 1rem;
    border-radius: 1rem;
    background: rgba(0,92,242,.08);
    color: #0f172a;
    font-weight: 700;
}
.oa-ttp-submit {
    border-radius: 999px;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    font-weight: 900;
}
.oa-ttp-alert ul {
    margin-bottom: 0;
}
.oa-ttp-success {
    display: flex;
    gap: 1rem;
    padding: 1.35rem;
    margin-bottom: 1rem;
    border-color: rgba(34,197,94,.25);
    background: linear-gradient(135deg, #ffffff, #f0fdf4);
}
.oa-ttp-success-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #16a34a;
    color: #fff;
}
.oa-ttp-success h2 {
    margin: 0 0 .45rem;
    color: #071637;
    font-weight: 900;
}
.oa-ttp-ref {
    display: inline-flex;
    margin: .15rem 0 .75rem;
    padding: .55rem .8rem;
    border-radius: .85rem;
    background: #071637;
    color: #fff;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 900;
    letter-spacing: .04em;
}
.oa-ttp-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .65rem;
}
.oa-ttp-actions .btn {
    border-radius: 999px;
    font-weight: 900;
}
@media (max-width: 900px) {
    .oa-ttp-hero {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 560px) {
    .oa-ttp-success {
        flex-direction: column;
    }
}


/* OA-INVOICE-TIMEPAY-CTA-V11 */
.oa-invoice-timepay-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 1rem;
    border: 1px solid rgba(0, 92, 242, .16);
    border-radius: 1.1rem;
    background: linear-gradient(135deg, rgba(0, 92, 242, .08), rgba(255, 255, 255, .98));
    box-shadow: 0 18px 45px rgba(7, 22, 55, .08);
}
.oa-invoice-timepay-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 48px;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #005cf2;
    color: #fff;
    font-size: 1.25rem;
}
.oa-invoice-timepay-copy {
    min-width: 0;
    flex: 1 1 auto;
}
.oa-invoice-timepay-copy h3 {
    margin: 0 0 .25rem;
    color: #071637;
    font-size: 1.05rem;
    font-weight: 900;
}
.oa-invoice-timepay-copy p {
    margin: 0;
    color: #334155;
    font-size: .94rem;
    line-height: 1.45;
}
.oa-invoice-timepay-actions {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: flex-end;
    flex: 0 0 auto;
}
.oa-invoice-timepay-actions .btn {
    border-radius: 999px;
    font-weight: 800;
    white-space: nowrap;
}
@media (max-width: 767px) {
    .oa-invoice-timepay-cta {
        align-items: flex-start;
        flex-direction: column;
        padding: .95rem;
    }
    .oa-invoice-timepay-actions {
        width: 100%;
        justify-content: stretch;
    }
    .oa-invoice-timepay-actions .btn {
        flex: 1 1 100%;
    }
}

/* OA-PAYMENT-METHODS-PRO-V12 */
.oa-payment-options {
    position: relative;
    overflow: hidden;
    margin: 0 0 24px;
    padding: 22px;
    border: 1px solid rgba(0, 92, 242, .16);
    border-radius: 24px;
    background:
        radial-gradient(circle at top left, rgba(0, 92, 242, .12), transparent 36%),
        linear-gradient(135deg, #ffffff 0%, #f8fbff 100%);
    box-shadow: 0 18px 50px rgba(7, 22, 55, .08);
}
.oa-payment-options:before {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background: linear-gradient(90deg, #005cf2 0%, #2dd4bf 55%, #005cf2 100%);
    height: 4px;
}
.oa-payment-options-hero {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 18px;
}
.oa-payment-options .oa-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #005cf2;
    font-size: 12px;
    line-height: 1;
    font-weight: 800;
    letter-spacing: .12em;
    text-transform: uppercase;
    margin-bottom: 10px;
}
.oa-payment-options h2 {
    margin: 0 0 8px;
    color: #071637;
    font-weight: 900;
    letter-spacing: -.03em;
    font-size: clamp(24px, 3vw, 34px);
}
.oa-payment-options p {
    margin: 0;
    color: #516070;
    line-height: 1.6;
}
.oa-payment-safe-note {
    flex: 0 0 270px;
    display: flex;
    gap: 10px;
    align-items: center;
    border-radius: 18px;
    padding: 14px 16px;
    background: #071637;
    color: #ffffff;
    font-weight: 700;
    box-shadow: 0 14px 28px rgba(7, 22, 55, .18);
}
.oa-payment-safe-note i { color: #5eead4; }
.oa-payment-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}
.oa-payment-card {
    display: flex;
    flex-direction: column;
    min-height: 100%;
    border-radius: 20px;
    border: 1px solid rgba(7, 22, 55, .08);
    background: #ffffff;
    padding: 16px;
    box-shadow: 0 10px 24px rgba(7, 22, 55, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.oa-payment-card:hover {
    transform: translateY(-3px);
    border-color: rgba(0, 92, 242, .25);
    box-shadow: 0 18px 34px rgba(7, 22, 55, .12);
}
.oa-payment-logo-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 80px;
    margin-bottom: 14px;
    padding: 8px;
    border-radius: 18px;
    background: linear-gradient(180deg, #f6f9ff, #ffffff);
}
.oa-payment-logo-wrap img {
    display: block;
    width: 100%;
    max-width: 210px;
    height: auto;
}
.oa-payment-card h3 {
    margin: 0 0 8px;
    color: #071637;
    font-size: 17px;
    font-weight: 900;
}
.oa-payment-card p {
    flex: 1;
    font-size: 13px;
    margin-bottom: 14px;
}
.oa-payment-card .btn {
    align-self: flex-start;
    border-radius: 999px;
    font-weight: 800;
    padding: 8px 13px;
}
.oa-payment-warning,
.oa-payment-timepay-strip {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
    border-radius: 16px;
    padding: 13px 16px;
}
.oa-payment-warning {
    background: #fff7ed;
    color: #7c2d12;
    border: 1px solid rgba(251, 146, 60, .35);
}
.oa-payment-warning i { color: #f97316; }
.oa-payment-timepay-strip {
    justify-content: space-between;
    background: #edf5ff;
    color: #071637;
    border: 1px solid rgba(0, 92, 242, .15);
}
.oa-payment-timepay-strip span {
    display: block;
    color: #516070;
    font-size: 13px;
    margin-top: 2px;
}
.oa-saved-payment-methods-card {
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(7, 22, 55, .08);
}
@media (max-width: 1199px) {
    .oa-payment-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .oa-payment-options { padding: 18px; border-radius: 20px; }
    .oa-payment-options-hero { flex-direction: column; }
    .oa-payment-safe-note { flex: 1 1 auto; width: 100%; }
    .oa-payment-grid { grid-template-columns: 1fr; }
    .oa-payment-card { padding: 14px; }
    .oa-payment-timepay-strip { flex-direction: column; align-items: flex-start; }
    .oa-payment-timepay-strip .btn { width: 100%; text-align: center; }
}


/* OA-V13-PAGES-CSS-RESTORED: radio-apps corrected; custom page designs restored from backup. */

/* OA custom page audited safety - V14 */
html, body { max-width: 100%; overflow-x: hidden; }
.primary-content, #main-body { min-height: 1px; }
.oa-custom-page-skin, .rs-page, .oa-radio-apps, .rp-page, .gh-page, .ds-page, .ts-page { max-width: 100%; }
.oa-radio-apps img, .oa-custom-page-skin img, .rs-page img { max-width: 100%; height: auto; }
@media (max-width: 767.98px) {
  .oa-radio-apps, .oa-custom-page-skin, .rs-page, .rp-page, .gh-page, .ds-page, .ts-page { padding-left: 14px !important; padding-right: 14px !important; }
}


/* OA-PAYMENT-SUPPORT-POLISH-V16 */
.oa-payment-support-centre,
.oa-payment-support-centre * { box-sizing: border-box; }
.oa-pay-hero-actions,
.oa-ref-copy-row-v16,
.oa-payment-mini-links-v16,
.oa-dashboard-payment-grid-v16,
.oa-viewinvoice-payment-help-v16 { display: flex; flex-wrap: wrap; gap: .65rem; }
.oa-pay-hero-actions { margin-top: 1.2rem; }
.oa-pay-hero-actions .btn,
.oa-ref-copy-row-v16 .btn,
.oa-payment-mini-links-v16 a,
.oa-dashboard-payment-grid-v16 a,
.oa-viewinvoice-payment-help-v16 .btn { border-radius: 999px; font-weight: 900; }
.oa-pay-options-v16 {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: .85rem;
    margin: 0 0 1rem;
}
.oa-pay-option-v16 {
    display: flex;
    flex-direction: column;
    gap: .35rem;
    min-height: 150px;
    border-radius: 1.2rem;
    border: 1px solid rgba(7,22,55,.10);
    background: #ffffff;
    padding: 1rem;
    color: #071637;
    box-shadow: 0 18px 45px rgba(7,22,55,.07);
    text-decoration: none !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.oa-pay-option-v16:hover,
.oa-pay-option-v16.is-active {
    transform: translateY(-2px);
    border-color: rgba(0,92,242,.35);
    box-shadow: 0 24px 55px rgba(7,22,55,.12);
    color: #071637;
}
.oa-pay-option-v16.is-active { background: linear-gradient(135deg, #ffffff, #eff6ff); }
.oa-pay-option-v16 i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: #005cf2;
    color: #ffffff;
    font-size: 1.1rem;
}
.oa-pay-option-v16 strong { font-size: 1rem; font-weight: 950; }
.oa-pay-option-v16 span { color: #526274; font-size: .88rem; line-height: 1.45; }
.oa-pay-form-heading-v16 { margin-bottom: 1rem; }
.oa-pay-form-heading-v16 h2 { margin: 0 0 .35rem; color: #071637; font-size: clamp(1.45rem, 3vw, 2.2rem); font-weight: 950; }
.oa-pay-form-heading-v16 p { margin: 0; color: #526274; font-weight: 650; }
.oa-payment-instructions-v16 {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: .25rem 0 1rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    background: #eff6ff;
    color: #071637;
    border: 1px solid rgba(0,92,242,.14);
    font-weight: 750;
}
.oa-payment-instructions-v16 i { color: #005cf2; margin-top: .15rem; }
.oa-branded-confirmation-v16 { border: 1px solid rgba(34,197,94,.25); }
.oa-ref-copy-row-v16 { align-items: stretch; margin: .5rem 0 .75rem; }
.oa-ref-copy-input-v16 {
    max-width: 360px;
    border-radius: .9rem !important;
    background: #071637 !important;
    color: #ffffff !important;
    font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
    font-weight: 950;
    letter-spacing: .04em;
}
.oa-mail-note-v16 { margin: .25rem 0 .8rem; font-weight: 800; }
.oa-mail-note-v16.is-ok { color: #166534; }
.oa-mail-note-v16.is-warning { color: #9a3412; }
.oa-pay-smallprint-v16 {
    margin-top: 1rem;
    padding: .9rem 1rem;
    border-radius: 1rem;
    background: #071637;
    color: #dbeafe;
    font-weight: 700;
}
.oa-pay-smallprint-v16 strong { color: #ffffff; }
.oa-invoice-empty-state-v16,
.oa-payment-confirm-strip-v16 {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 0 0 1rem;
    padding: 1rem;
    border-radius: 1.1rem;
    background: linear-gradient(135deg, #f0fdf4, #ffffff);
    border: 1px solid rgba(34,197,94,.22);
    box-shadow: 0 18px 45px rgba(7,22,55,.08);
}
.oa-invoice-empty-icon-v16 {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    flex: 0 0 50px;
    border-radius: 50%;
    background: #16a34a;
    color: #ffffff;
    font-size: 1.3rem;
}
.oa-invoice-empty-state-v16 h3 { margin: 0 0 .25rem; color: #071637; font-size: 1.08rem; font-weight: 950; }
.oa-invoice-empty-state-v16 p { margin: 0; color: #334155; font-size: .94rem; }
.oa-payment-mini-links-v16 {
    margin: 0 0 1rem;
    padding: .7rem;
    border-radius: 1rem;
    background: #f8fafc;
    border: 1px solid rgba(7,22,55,.08);
}
.oa-payment-mini-links-v16 a {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .58rem .82rem;
    background: #ffffff;
    border: 1px solid rgba(0,92,242,.12);
    color: #071637;
    text-decoration: none;
}
.oa-payment-mini-links-v16 a:hover { color: #005cf2; border-color: rgba(0,92,242,.35); text-decoration: none; }
.oa-payment-confirm-strip-v16 {
    justify-content: space-between;
    background: linear-gradient(135deg, #eff6ff, #ffffff);
    border-color: rgba(0,92,242,.18);
}
.oa-payment-confirm-strip-v16 strong { display: block; color: #071637; font-weight: 950; }
.oa-payment-confirm-strip-v16 span { display: block; color: #526274; font-size: .92rem; margin-top: .2rem; }
.oa-dashboard-payment-tools-v16 {
    margin: 0 0 1.35rem;
    padding: 1rem;
    border-radius: 1.2rem;
    background: linear-gradient(135deg, #071637, #020617);
    color: #ffffff;
    box-shadow: 0 24px 60px rgba(7,22,55,.16);
}
.oa-dashboard-payment-tools-v16 .oa-ttp-kicker { color: #93c5fd; }
.oa-dashboard-payment-intro-v16 h2 { margin: 0 0 .35rem; font-size: clamp(1.3rem, 3vw, 2rem); font-weight: 950; color: #ffffff; }
.oa-dashboard-payment-intro-v16 p { margin: 0 0 .9rem; color: #dbeafe; font-weight: 650; }
.oa-dashboard-payment-grid-v16 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .75rem; }
.oa-dashboard-payment-grid-v16 a {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-areas: "icon title" "icon text";
    column-gap: .75rem;
    align-items: center;
    padding: .9rem;
    border-radius: 1rem;
    background: rgba(255,255,255,.08);
    border: 1px solid rgba(255,255,255,.14);
    color: #ffffff;
    text-decoration: none;
}
.oa-dashboard-payment-grid-v16 a:hover { background: rgba(255,255,255,.14); text-decoration: none; color: #ffffff; }
.oa-dashboard-payment-grid-v16 i { grid-area: icon; color: #60a5fa; font-size: 1.2rem; }
.oa-dashboard-payment-grid-v16 strong { grid-area: title; font-weight: 950; }
.oa-dashboard-payment-grid-v16 span { grid-area: text; color: #cbd5e1; font-size: .86rem; }
.oa-viewinvoice-payment-help-v16 {
    align-items: center;
    margin: .85rem 0;
    padding: .85rem;
    border-radius: 1rem;
    background: #eff6ff;
    border: 1px solid rgba(0,92,242,.15);
}
.oa-viewinvoice-payment-help-v16 strong { color: #071637; margin-right: .4rem; }
.oa-support-dock { pointer-events: none; z-index: 1030; }
.oa-support-dock-btn { pointer-events: auto; }
body { padding-bottom: 5.25rem; }
@media (max-width: 1199px) {
    .oa-pay-options-v16 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .oa-dashboard-payment-grid-v16 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
    .oa-pay-options-v16 { grid-template-columns: 1fr; }
    .oa-pay-option-v16 { min-height: 0; }
    .oa-invoice-empty-state-v16,
    .oa-payment-confirm-strip-v16 { align-items: flex-start; flex-direction: column; }
    .oa-invoice-empty-state-v16 .oa-invoice-timepay-actions,
    .oa-invoice-empty-state-v16 .btn,
    .oa-payment-confirm-strip-v16 .btn { width: 100%; }
    .oa-payment-mini-links-v16 { flex-direction: column; }
    .oa-payment-mini-links-v16 a { width: 100%; justify-content: center; }
    .oa-dashboard-payment-grid-v16 { grid-template-columns: 1fr; }
    .oa-ref-copy-row-v16 { flex-direction: column; }
    .oa-ref-copy-input-v16 { max-width: none; width: 100%; }
    body { padding-bottom: 6rem; }
}


/* OA V18: bank transfer paid ticket helper */
.oa-bank-paid-ticket-note-v18 {
    align-items: flex-start;
    gap: 12px;
}
.oa-paid-helper-card-v18 {
    min-height: 86px;
    border: 1px solid rgba(0, 92, 242, 0.18);
    background: linear-gradient(135deg, rgba(0, 92, 242, 0.08), rgba(7, 22, 55, 0.04));
    border-radius: 16px;
    padding: 16px 18px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    color: #071637;
}
.oa-paid-helper-card-v18 strong {
    display: block;
    font-size: 0.98rem;
    color: #071637;
    margin-bottom: 4px;
}
.oa-paid-helper-card-v18 span {
    display: block;
    color: #475569;
    font-size: 0.92rem;
    line-height: 1.45;
}
@media (max-width: 767px) {
    .oa-paid-helper-card-v18 {
        min-height: auto;
        margin-bottom: 16px;
    }
}

/* OA V19: compact quote + station logo showcase on client area home */
.oa-quote-top-compact {
    margin-bottom: .85rem !important;
    padding: .9rem !important;
}
.oa-quote-top-copy {
    margin-bottom: .55rem !important;
}
.oa-quote-top-copy p {
    font-size: .88rem !important;
}
.oa-quote-top-frame-shell {
    box-shadow: inset 0 0 0 1px rgba(255,255,255,.5);
}
.oa-quote-top-frame {
    height: 150px !important;
}
.oa-quote-top-actions {
    margin-top: .4rem !important;
}
.oa-station-showcase-v19 {
    display: grid;
    grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr);
    gap: 1rem;
    align-items: stretch;
    margin: 0 0 1.2rem;
    max-width: 100%;
    overflow: hidden;
}
.oa-station-copy-card-v19,
.oa-station-carousel-card-v19 {
    position: relative;
    border-radius: 1.25rem;
    border: 1px solid rgba(0,92,242,.14);
    box-shadow: 0 20px 48px rgba(7,22,55,.08);
    overflow: hidden;
}
.oa-station-copy-card-v19 {
    padding: clamp(1rem, 2.3vw, 1.45rem);
    background:
        radial-gradient(circle at 10% 0%, rgba(56,189,248,.17), transparent 32%),
        linear-gradient(135deg, #071637, #020617);
    color: #ffffff;
}
.oa-station-copy-card-v19:after {
    content: "";
    position: absolute;
    right: -55px;
    bottom: -55px;
    width: 150px;
    height: 150px;
    border: 26px solid rgba(56,189,248,.09);
    border-radius: 999px;
    pointer-events: none;
}
.oa-station-kicker-v19 {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    padding: .34rem .7rem;
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    border: 1px solid rgba(255,255,255,.14);
    color: #bfdbfe;
    font-size: .72rem;
    font-weight: 950;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.oa-station-copy-card-v19 h2 {
    margin: .75rem 0 .55rem;
    color: #ffffff;
    font-size: clamp(1.25rem, 2.4vw, 1.9rem);
    line-height: 1.08;
    font-weight: 950;
    letter-spacing: -.04em;
}
.oa-station-copy-card-v19 p {
    margin: 0;
    color: #dbeafe;
    font-size: .94rem;
    line-height: 1.65;
    font-weight: 650;
}
.oa-station-actions-v19 {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-top: .9rem;
}
.oa-station-actions-v19 .btn {
    position: relative;
    z-index: 1;
}
.oa-station-carousel-card-v19 {
    padding: 1rem 0 1rem;
    background:
        linear-gradient(90deg, rgba(255,255,255,.98), rgba(239,246,255,.95));
}
.oa-station-carousel-head-v19 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .8rem;
    padding: 0 1rem .75rem;
}
.oa-station-carousel-head-v19 strong {
    color: #071637;
    font-size: 1rem;
    font-weight: 950;
}
.oa-station-carousel-head-v19 span {
    color: #005cf2;
    font-size: .78rem;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .05em;
}
.oa-station-logo-viewport-v19 {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    padding: .2rem 0;
    mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%);
}
.oa-station-logo-track-v19 {
    display: flex;
    align-items: center;
    gap: .85rem;
    width: max-content;
    max-width: none;
    animation: oa-station-scroll-v19 70s linear infinite;
    will-change: transform;
}
.oa-station-logo-viewport-v19:hover .oa-station-logo-track-v19 {
    animation-play-state: paused;
}
.oa-station-logo-tile-v19 {
    flex: 0 0 150px;
    width: 150px;
    height: 96px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .5rem;
    border-radius: 1rem;
    background: #ffffff;
    border: 1px solid rgba(15,23,42,.08);
    box-shadow: 0 10px 26px rgba(15,23,42,.08);
}
.oa-station-logo-tile-v19 img {
    display: block;
    max-width: 100%;
    max-height: 78px;
    width: auto;
    height: auto;
    object-fit: contain;
    border-radius: .55rem;
}
@keyframes oa-station-scroll-v19 {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .oa-station-logo-track-v19 { animation: none; flex-wrap: wrap; justify-content: center; width: 100%; }
}
@media (max-width: 991px) {
    .oa-station-showcase-v19 {
        grid-template-columns: 1fr;
    }
}
@media (max-width: 767px) {
    .oa-quote-top-frame {
        height: 165px !important;
    }
    .oa-station-showcase-v19 {
        gap: .8rem;
        margin-bottom: 1rem;
    }
    .oa-station-carousel-head-v19 {
        flex-direction: column;
        align-items: flex-start;
        gap: .25rem;
    }
    .oa-station-logo-tile-v19 {
        flex-basis: 128px;
        width: 128px;
        height: 86px;
    }
    .oa-station-logo-tile-v19 img {
        max-height: 68px;
    }
    .oa-station-actions-v19 .btn {
        width: 100%;
    }
}


/* OA Clientarea cross-browser slider/width safety patch - added 2026-06-08 */
#main-body .primary-content { min-width: 0; }
.oa-station-logo-track-v21 { -ms-flex-wrap: nowrap !important; flex-wrap: nowrap !important; white-space: nowrap !important; }
.oa-station-logo-tile-v21 { min-width: 150px !important; }
@media (min-width: 1200px) { #main-body > .container { max-width: 1440px; } }
@media (max-width: 767px) { .oa-station-logo-tile-v21 { min-width: 118px !important; } }


/* OA-NO-DEAD-MORE-V22: keep the Online Audience menu visible and remove the WHMCS overflow More tab. */
@media (min-width: 1200px) {
    header.header .main-navbar-wrapper .container {
        max-width: 1320px;
    }
    #nav.oa-main-nav {
        align-items: center;
        flex-wrap: nowrap !important;
        gap: 2px;
    }
    #nav.oa-main-nav > li > a {
        padding-left: .62rem !important;
        padding-right: .62rem !important;
        font-size: .86rem !important;
        white-space: nowrap !important;
    }
}
#nav .collapsable-dropdown {
    display: none !important;
}
.oa-open-ticket-link > a {
    background: #005cf2 !important;
    color: #ffffff !important;
    border-radius: 999px !important;
    box-shadow: 0 10px 26px rgba(0,92,242,.22) !important;
}
.oa-open-ticket-link > a:hover,
.oa-open-ticket-link.show > a {
    background: #004ed0 !important;
    color: #ffffff !important;
}
@media (max-width: 1199.98px) {
    .oa-open-ticket-link > a {
        display: inline-flex;
        width: fit-content;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
}

/* OA-FIREFOX-NO-GRID-SLIDER-HOTFIX-V25
   Keeps the client-area station logos as a horizontal slider in Firefox/reduced-motion/cached CSS cases. */
.oa-station-logo-window-v21 {
    overflow: hidden !important;
    contain: layout paint !important;
    isolation: isolate !important;
}
.oa-station-logo-track-v21,
.oa-station-logo-window-v21:hover .oa-station-logo-track-v21 {
    display: block !important;
    white-space: nowrap !important;
    flex-wrap: nowrap !important;
    -ms-flex-wrap: nowrap !important;
    width: max-content !important;
    min-width: max-content !important;
    max-width: none !important;
    overflow: visible !important;
    line-height: 0 !important;
    gap: 0 !important;
    -webkit-animation-name: oaStationScrollV21 !important;
    animation-name: oaStationScrollV21 !important;
    -webkit-animation-duration: 64s !important;
    animation-duration: 64s !important;
    -webkit-animation-timing-function: linear !important;
    animation-timing-function: linear !important;
    -webkit-animation-iteration-count: infinite !important;
    animation-iteration-count: infinite !important;
}
.oa-station-logo-window-v21:hover .oa-station-logo-track-v21 {
    -webkit-animation-play-state: paused !important;
    animation-play-state: paused !important;
}
.oa-station-logo-tile-v21 {
    display: inline-flex !important;
    vertical-align: middle !important;
    white-space: normal !important;
    flex: 0 0 auto !important;
    -ms-flex: 0 0 auto !important;
    margin: 0 16px 0 0 !important;
    line-height: normal !important;
}
@media (max-width: 767px) {
    .oa-station-logo-tile-v21 {
        margin-right: 12px !important;
    }
}

/* OA-SUPER-PENGUIN-CUSTOM-PAGE-IMAGES-V28
   Uses Online Audience supplied Super Penguin artwork across the custom pages.
   Safe CSS only: no WHMCS core scripts touched. */
.oa-superpenguin-hero-figure,
.oa-superpenguin-inline-card,
.oa-superpenguin-wide-image {
    box-sizing: border-box !important;
}
.oa-superpenguin-hero-figure {
    position: absolute !important;
    right: clamp(18px, 3vw, 42px) !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: min(38%, 460px) !important;
    max-width: 460px !important;
    z-index: 1 !important;
    pointer-events: none !important;
}
.oa-superpenguin-hero-figure img,
.oa-superpenguin-inline-card img,
.oa-superpenguin-wide-image img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    object-fit: cover !important;
    border-radius: 28px !important;
    border: 1px solid rgba(255,255,255,.20) !important;
    box-shadow: 0 28px 70px rgba(0,0,0,.28), 0 0 0 1px rgba(0,92,242,.10) !important;
    background: #fff !important;
}
.oa-superpenguin-hero-figure:before,
.oa-superpenguin-inline-card:before,
.oa-superpenguin-wide-image:before {
    content: "" !important;
    position: absolute !important;
    inset: -16px !important;
    border-radius: 34px !important;
    background: radial-gradient(circle at 50% 20%, rgba(0,92,242,.24), transparent 60%) !important;
    filter: blur(16px) !important;
    opacity: .75 !important;
    z-index: -1 !important;
}
.oa-superpenguin-inline-card,
.oa-superpenguin-wide-image {
    position: relative !important;
    overflow: visible !important;
    margin-bottom: 18px !important;
}
.oa-superpenguin-inline-card img {
    aspect-ratio: 1 / 1 !important;
    object-fit: cover !important;
}
.oa-superpenguin-wide-image img {
    aspect-ratio: 16 / 9 !important;
    object-fit: cover !important;
}
.rs-hero,
.oa-wh-hero,
.oa-ps-hero,
.oa-cp-alexa_radio_skill .oa-hero,
.oa-cp-social_posting .oa-hero,
.oa-cp-addon_licensing .oa-hero,
.oa-cp-whmcs_services .oa-hero,
.oa-cp-technical_support .oa-hero,
.oa-cp-videostreaming .oa-hero,
.oa-cp-vps_servers .oa-hero,
.oa-cp-reseller_program .oa-hero,
.oa-cp-reseller_apps .oa-hero,
.oa-cp-radio_station_bundles .oa-hero,
.oa-cp-host_anything .oa-hero {
    position: relative !important;
    overflow: hidden !important;
}
.rs-hero__content,
.oa-wh-hero .oa-wh-wrap,
.oa-ps-hero__inner,
.oa-cp-alexa_radio_skill .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-social_posting .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-addon_licensing .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-whmcs_services .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-technical_support .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-videostreaming .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-vps_servers .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-reseller_program .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-reseller_apps .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-radio_station_bundles .oa-hero > *:not(.oa-superpenguin-hero-figure),
.oa-cp-host_anything .oa-hero > *:not(.oa-superpenguin-hero-figure) {
    position: relative !important;
    z-index: 2 !important;
}
@media (min-width: 992px) {
    .rs-hero__content { padding-right: min(40vw, 500px) !important; }
    .oa-wh-hero .oa-wh-wrap { padding-right: min(40vw, 520px) !important; text-align: left !important; }
    .oa-wh-hero h1, .oa-wh-lead { text-align: left !important; margin-left: 0 !important; margin-right: 0 !important; }
    .oa-wh-hero-actions, .oa-wh-actions { justify-content: flex-start !important; }
    .oa-cp-alexa_radio_skill .oa-hero,
    .oa-cp-social_posting .oa-hero,
    .oa-cp-addon_licensing .oa-hero,
    .oa-cp-whmcs_services .oa-hero,
    .oa-cp-technical_support .oa-hero,
    .oa-cp-videostreaming .oa-hero,
    .oa-cp-vps_servers .oa-hero,
    .oa-cp-reseller_program .oa-hero,
    .oa-cp-reseller_apps .oa-hero,
    .oa-cp-radio_station_bundles .oa-hero,
    .oa-cp-host_anything .oa-hero {
        padding-right: min(44vw, 540px) !important;
        min-height: 420px !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: center !important;
    }
    .oa-cp-previous_shows .oa-ps-hero-copy { padding-right: min(40vw, 520px) !important; }
    .oa-cp-previous_shows .oa-superpenguin-hero-figure { width: min(34%, 430px) !important; }
}
@media (max-width: 991.98px) {
    .oa-superpenguin-hero-figure {
        position: relative !important;
        right: auto !important;
        top: auto !important;
        transform: none !important;
        width: 100% !important;
        max-width: 560px !important;
        margin: 24px auto 0 !important;
        pointer-events: auto !important;
    }
    .oa-superpenguin-hero-figure img,
    .oa-superpenguin-inline-card img {
        border-radius: 22px !important;
    }
    .rs-hero__content,
    .oa-wh-hero .oa-wh-wrap,
    .oa-cp-previous_shows .oa-ps-hero-copy {
        padding-right: 0 !important;
    }
}
@media (max-width: 575.98px) {
    .oa-superpenguin-hero-figure,
    .oa-superpenguin-inline-card,
    .oa-superpenguin-wide-image {
        margin-top: 18px !important;
        margin-bottom: 14px !important;
    }
    .oa-superpenguin-hero-figure img,
    .oa-superpenguin-inline-card img,
    .oa-superpenguin-wide-image img {
        border-radius: 18px !important;
    }
}

/* OA-SUPER-PENGUIN-EXTRA-PAGE-HEROES-V28 */
.oa-vs-hero,
.oa-vps-hero,
.rp-hero,
.oa-ttp-hero {
    position: relative !important;
    overflow: hidden !important;
}
.oa-vs-hero > *:not(.oa-superpenguin-hero-figure),
.oa-vps-hero > *:not(.oa-superpenguin-hero-figure),
.rp-hero > *:not(.oa-superpenguin-hero-figure),
.oa-ttp-hero > *:not(.oa-superpenguin-hero-figure) {
    position: relative !important;
    z-index: 2 !important;
}
@media (min-width: 992px) {
    .oa-vs-hero,
    .oa-vps-hero,
    .rp-hero,
    .oa-ttp-hero {
        padding-right: min(44vw, 540px) !important;
    }
    .oa-ttp-hero .oa-superpenguin-hero-figure,
    .oa-vs-hero .oa-superpenguin-hero-figure,
    .oa-vps-hero .oa-superpenguin-hero-figure,
    .rp-hero .oa-superpenguin-hero-figure {
        width: min(36%, 430px) !important;
    }
}


/* OA-SUPER-PENGUIN-CONTENT-PLACEMENT-V29
   Fixes oversized Super Penguin images by removing them from hero/top areas
   and presenting them as compact content cards inside the page flow. */
.oa-superpenguin-hero-figure {
    display: none !important;
}
@media (min-width: 992px) {
    .rs-hero__content,
    .oa-wh-hero .oa-wh-wrap,
    .oa-cp-previous_shows .oa-ps-hero-copy {
        padding-right: 0 !important;
    }
    .oa-cp-alexa_radio_skill .oa-hero,
    .oa-cp-social_posting .oa-hero,
    .oa-cp-addon_licensing .oa-hero,
    .oa-cp-whmcs_services .oa-hero,
    .oa-cp-technical_support .oa-hero,
    .oa-cp-videostreaming .oa-hero,
    .oa-cp-vps_servers .oa-hero,
    .oa-cp-reseller_program .oa-hero,
    .oa-cp-reseller_apps .oa-hero,
    .oa-cp-radio_station_bundles .oa-hero,
    .oa-cp-host_anything .oa-hero {
        padding-right: clamp(26px, 4vw, 70px) !important;
        min-height: auto !important;
    }
    .oa-vs-hero,
    .oa-vps-hero,
    .rp-hero,
    .oa-ttp-hero {
        padding-right: clamp(24px, 4vw, 70px) !important;
    }
}
.oa-penguin-content-band,
.oa-penguin-content-band * {
    box-sizing: border-box !important;
}
.oa-penguin-content-band {
    width: 100% !important;
    max-width: 1240px !important;
    margin: 30px auto !important;
    padding: 0 20px !important;
    clear: both !important;
}
.oa-wh-page .oa-penguin-content-band,
.rs-page .oa-penguin-content-band,
.oa-ps-page .oa-penguin-content-band,
.oa-vs-page .oa-penguin-content-band,
.oa-vps-page .oa-penguin-content-band,
.rp-page .oa-penguin-content-band,
.oa-ttp-page .oa-penguin-content-band,
.oa-custom-page-skin .oa-penguin-content-band {
    color: #eaf2ff !important;
}
.oa-penguin-content-card {
    display: grid !important;
    grid-template-columns: minmax(0, 1.18fr) minmax(230px, 390px) !important;
    gap: clamp(18px, 3vw, 34px) !important;
    align-items: center !important;
    overflow: hidden !important;
    border-radius: 28px !important;
    padding: clamp(20px, 3vw, 30px) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    background:
        radial-gradient(circle at 95% 15%, rgba(0,92,242,.24), transparent 34%),
        radial-gradient(circle at 5% 0%, rgba(56,189,248,.16), transparent 30%),
        linear-gradient(135deg, #071637 0%, #0b1b36 48%, #020617 100%) !important;
    box-shadow: 0 24px 70px rgba(2, 6, 23, .24) !important;
}
.oa-penguin-content-copy {
    min-width: 0 !important;
    position: relative !important;
    z-index: 2 !important;
}
.oa-penguin-content-copy span {
    display: inline-flex !important;
    align-items: center !important;
    width: fit-content !important;
    margin-bottom: 12px !important;
    padding: 8px 12px !important;
    border-radius: 999px !important;
    color: #bfdbfe !important;
    background: rgba(255,255,255,.08) !important;
    border: 1px solid rgba(255,255,255,.13) !important;
    font-size: 11px !important;
    font-weight: 950 !important;
    letter-spacing: .10em !important;
    text-transform: uppercase !important;
}
.oa-penguin-content-copy h2 {
    margin: 0 0 10px !important;
    color: #ffffff !important;
    font-size: clamp(24px, 3vw, 38px) !important;
    line-height: 1.08 !important;
    letter-spacing: -.04em !important;
    font-weight: 950 !important;
}
.oa-penguin-content-copy p {
    margin: 0 !important;
    color: #cfe4ff !important;
    font-size: 15px !important;
    line-height: 1.75 !important;
    font-weight: 650 !important;
}
.oa-penguin-content-media {
    position: relative !important;
    min-width: 0 !important;
    border-radius: 24px !important;
    background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    padding: 10px !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 20px 55px rgba(0,0,0,.24) !important;
}
.oa-penguin-content-media img {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 260px !important;
    aspect-ratio: 16 / 10 !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 18px !important;
    border: 1px solid rgba(255,255,255,.14) !important;
    box-shadow: none !important;
    background: #ffffff !important;
}
.oa-penguin-content-card--image-left {
    grid-template-columns: minmax(230px, 390px) minmax(0, 1.18fr) !important;
}
.oa-penguin-content-card--image-left .oa-penguin-content-media {
    order: 1 !important;
}
.oa-penguin-content-card--image-left .oa-penguin-content-copy {
    order: 2 !important;
}
@media (max-width: 991.98px) {
    .oa-penguin-content-band {
        margin: 24px auto !important;
        padding: 0 16px !important;
    }
    .oa-penguin-content-card,
    .oa-penguin-content-card--image-left {
        grid-template-columns: 1fr !important;
        border-radius: 22px !important;
    }
    .oa-penguin-content-card--image-left .oa-penguin-content-media,
    .oa-penguin-content-card--image-left .oa-penguin-content-copy {
        order: initial !important;
    }
    .oa-penguin-content-media img {
        max-height: 300px !important;
    }
}
@media (max-width: 575.98px) {
    .oa-penguin-content-band {
        padding: 0 12px !important;
    }
    .oa-penguin-content-card {
        padding: 16px !important;
        border-radius: 18px !important;
    }
    .oa-penguin-content-media {
        border-radius: 18px !important;
        padding: 8px !important;
    }
    .oa-penguin-content-media img {
        border-radius: 14px !important;
        max-height: 230px !important;
    }
}


/* OA-SUPER-PENGUIN-INLINE-CAPS-V29 */
.oa-superpenguin-inline-card,
.oa-superpenguin-wide-image {
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
}
.oa-superpenguin-inline-card img,
.oa-superpenguin-wide-image img {
    max-height: 320px !important;
    object-fit: cover !important;
}
@media (max-width: 767px) {
    .oa-superpenguin-inline-card,
    .oa-superpenguin-wide-image {
        max-width: 100% !important;
    }
    .oa-superpenguin-inline-card img,
    .oa-superpenguin-wide-image img {
        max-height: 260px !important;
    }
}