/*
 * OctaWeb Client Portal
 * Full ShufyTheme fork for WHMCS 8.13.1
 * Version 2.0.0
 */

:root {
    --ow-bg: #080e10;
    --ow-bg-deep: #05090b;
    --ow-surface: #10191f;
    --ow-surface-raised: #15232c;
    --ow-surface-hover: #1a2a34;
    --ow-border: #29404d;
    --ow-border-soft: rgba(84, 111, 126, .28);
    --ow-text: #f7f9fa;
    --ow-muted: #b1b4b8;
    --ow-subtle: #7f8d95;
    --ow-blue: #010c83;
    --ow-blue-hover: #0718a6;
    --ow-success: #66d19e;
    --ow-warning: #e7be68;
    --ow-danger: #f29a9a;
    --ow-radius-sm: 10px;
    --ow-radius: 15px;
    --ow-radius-lg: 21px;
    --ow-shadow: 0 24px 70px -38px rgba(0, 0, 0, .96);
    --ow-glass: linear-gradient(145deg, rgba(25, 41, 51, .72), rgba(12, 21, 27, .86));
    --ow-glass-soft: rgba(17, 29, 36, .68);
    --ow-glass-highlight: rgba(255, 255, 255, .035);
    --ow-glass-blur: 18px;
    --ow-container: 1420px;
    --ow-header-height: 78px;
}

body.octa-portal-v2.not__login__page {
    min-width: 320px;
    min-height: 100vh;
    color: var(--ow-text) !important;
    background:
        radial-gradient(circle at 6% -5%, rgba(1, 12, 131, .42), transparent 34rem),
        radial-gradient(circle at 96% 18%, rgba(1, 12, 131, .18), transparent 31rem),
        linear-gradient(180deg, var(--ow-bg) 0%, var(--ow-bg-deep) 100%) !important;
    background-attachment: fixed !important;
    font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
}

body.octa-portal-v2.not__login__page::before,
body.octa-portal-v2.not__login__page::after {
    display: none !important;
}

body.octa-portal-v2.not__login__page #mainpagewrapper {
    min-height: 100vh !important;
    padding-top: 0 !important;
    overflow: visible !important;
    background: transparent !important;
}

body.octa-portal-v2:not(.this__is__login__page) > .page-wrapper {
    padding-top: 0 !important;
}

body.octa-portal-v2.not__login__page .octa-page-shell.homepage__main__wrapper {
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - var(--ow-header-height)) !important;
    margin: var(--ow-header-height) 0 0 !important;
    padding: 0 !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .octa-page-frame.sidebar__page__wrapper {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    transform: none !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .octa-main.main__page__wraper {
    position: static !important;
    display: block !important;
    width: 100% !important;
    max-width: none !important;
    min-height: calc(100vh - var(--ow-header-height)) !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: visible !important;
    transform: none !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .octa-container,
body.octa-portal-v2.not__login__page .main__page__content.octa-container {
    width: min(calc(100% - 48px), var(--ow-container)) !important;
    max-width: var(--ow-container) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.octa-portal-v2.not__login__page #main-body {
    min-height: 430px;
    padding: 0 0 70px !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page #main-body > div,
body.octa-portal-v2.not__login__page #main-body .primary-content {
    background: transparent !important;
}

body.octa-portal-v2.not__login__page a {
    color: #d9dde0;
}

body.octa-portal-v2.not__login__page a:hover {
    color: #fff;
}

body.octa-portal-v2.not__login__page h1,
body.octa-portal-v2.not__login__page h2,
body.octa-portal-v2.not__login__page h3,
body.octa-portal-v2.not__login__page h4,
body.octa-portal-v2.not__login__page h5,
body.octa-portal-v2.not__login__page h6,
body.octa-portal-v2.not__login__page .h1,
body.octa-portal-v2.not__login__page .h2,
body.octa-portal-v2.not__login__page .h3,
body.octa-portal-v2.not__login__page .h4,
body.octa-portal-v2.not__login__page .h5,
body.octa-portal-v2.not__login__page .h6 {
    color: var(--ow-text) !important;
    letter-spacing: -.025em;
}

body.octa-portal-v2.not__login__page p,
body.octa-portal-v2.not__login__page small,
body.octa-portal-v2.not__login__page .small,
body.octa-portal-v2.not__login__page .text-muted,
body.octa-portal-v2.not__login__page .text-gray,
body.octa-portal-v2.not__login__page .text-black-50 {
    color: var(--ow-muted) !important;
}

/* Header */
.octa-header {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 1080;
    height: var(--ow-header-height);
    border-bottom: 1px solid rgba(84, 111, 126, .25);
    box-shadow: 0 16px 50px -38px #000;
}

/* Frosted-glass header background lives on a pseudo-element instead of on
   .octa-header itself. backdrop-filter on .octa-header would make it the
   containing block for any position:fixed descendant (e.g. .octa-nav-wrap,
   the mobile menu panel), forcing that panel to size itself against the
   header's own small box instead of the viewport — which is why the mobile
   menu was collapsing to a sliver and letting page content show on top of it. */
.octa-header::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: rgba(8, 14, 16, .91);
    backdrop-filter: blur(19px);
    -webkit-backdrop-filter: blur(19px);
}

.octa-header *,
.octa-primary-nav * {
    box-sizing: border-box;
}

.octa-header__inner {
    display: flex;
    width: min(calc(100% - 48px), 1520px);
    height: 100%;
    margin: 0 auto;
    align-items: center;
    gap: 24px;
}

.octa-brand {
    display: inline-flex;
    min-width: 190px;
    align-items: center;
    gap: 11px;
    color: #fff !important;
    text-decoration: none !important;
}

.octa-brand__wordmark {
    display: block;
    width: auto;
    max-width: 190px;
    height: 38px;
    object-fit: contain;
    object-position: left center;
}

.octa-nav-wrap {
    display: flex;
    min-width: 0;
    height: 100%;
    margin: 0 auto;
    align-items: center;
    justify-content: center;
    flex: 1 1 auto;
}

.octa-primary-nav {
    display: flex;
    min-width: 0;
    height: 100%;
    margin: 0;
    padding: 0;
    align-items: center;
    justify-content: center;
    gap: 4px;
}

.octa-primary-nav__group {
    position: relative;
    display: flex;
    height: 100%;
    align-items: center;
}

.octa-primary-nav__link {
    display: inline-flex;
    min-width: 0;
    min-height: 42px;
    padding: 0 12px;
    align-items: center;
    justify-content: center;
    gap: 8px;
    border: 1px solid transparent;
    border-radius: 11px;
    outline: 0;
    color: var(--ow-muted) !important;
    background: transparent;
    box-shadow: none;
    font: inherit;
    font-size: 13px;
    font-weight: 650;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease;
}

.octa-primary-nav__link > i:not(.octa-primary-nav__chevron) {
    color: var(--ow-subtle);
    font-size: 13px;
}

.octa-primary-nav__chevron {
    margin-left: 1px;
    color: var(--ow-subtle);
    font-size: 9px;
    transition: transform .18s ease;
}

.octa-primary-nav__link:hover,
.octa-primary-nav__link:focus,
.octa-primary-nav__link.is-current,
.octa-primary-nav__group.is-current > .octa-primary-nav__link,
.octa-primary-nav__group.is-open > .octa-primary-nav__link {
    border-color: var(--ow-border-soft);
    color: #fff !important;
    background: rgba(255, 255, 255, .055);
}

.octa-primary-nav__link:hover > i,
.octa-primary-nav__link.is-current > i,
.octa-primary-nav__group.is-open > .octa-primary-nav__link > i {
    color: #fff;
}

.octa-primary-nav__group.is-open .octa-primary-nav__chevron {
    transform: rotate(180deg);
}

.octa-primary-nav__badge,
.octa-header-action__count {
    display: inline-grid;
    min-width: 19px;
    height: 19px;
    padding: 0 5px;
    border-radius: 999px;
    color: #fff;
    background: var(--ow-blue);
    font-size: 10px;
    font-weight: 750;
    line-height: 1;
    place-items: center;
}

.octa-primary-nav__dropdown {
    position: absolute;
    top: calc(100% - 7px);
    left: 0;
    z-index: 20;
    display: grid;
    width: 255px;
    padding: 9px;
    gap: 3px;
    border: 1px solid var(--ow-border);
    border-radius: 15px;
    opacity: 0;
    visibility: hidden;
    background: rgba(16, 25, 31, .99);
    box-shadow: 0 24px 70px -28px #000;
    transform: translateY(-7px);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.octa-primary-nav__group.is-open .octa-primary-nav__dropdown {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.octa-primary-nav__title {
    padding: 8px 10px 6px;
    color: var(--ow-subtle);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.octa-primary-nav__dropdown a {
    display: flex;
    min-height: 41px;
    padding: 9px 11px;
    align-items: center;
    gap: 10px;
    border-radius: 9px;
    color: var(--ow-muted) !important;
    font-size: 13px;
    font-weight: 550;
    text-decoration: none !important;
}

.octa-primary-nav__dropdown a > i {
    width: 16px;
    color: var(--ow-subtle);
    text-align: center;
}

.octa-primary-nav__dropdown a:hover,
.octa-primary-nav__dropdown a.is-current {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
}

.octa-primary-nav__dropdown a .octa-primary-nav__badge {
    margin-left: auto;
}

.octa-header__actions {
    display: flex;
    flex: 0 0 auto;
    align-items: center;
    gap: 8px;
}

.octa-header-action,
.octa-account__trigger {
    display: inline-flex;
    min-height: 44px;
    padding: 0 13px;
    align-items: center;
    gap: 9px;
    border: 1px solid var(--ow-border-soft);
    border-radius: 12px;
    color: var(--ow-text) !important;
    background: rgba(21, 35, 44, .66);
    box-shadow: none;
    font: inherit;
    font-size: 12px;
    font-weight: 650;
    text-decoration: none !important;
    cursor: pointer;
    transition: border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.octa-header-action:hover,
.octa-account__trigger:hover,
.octa-account.is-open .octa-account__trigger {
    border-color: var(--ow-border);
    color: #fff !important;
    background: var(--ow-surface-hover);
    transform: translateY(-1px);
}

.octa-header-action {
    position: relative;
}

.octa-header-action__count {
    position: absolute;
    top: -6px;
    right: -5px;
}

.octa-account {
    position: relative;
}

.octa-account__trigger {
    padding: 4px 10px 4px 5px;
}

.octa-account__trigger img {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255, 255, 255, .45);
    border-radius: 9px;
    object-fit: cover;
}

.octa-account__copy {
    display: grid;
    min-width: 78px;
    text-align: left;
    line-height: 1.05;
}

.octa-account__copy small {
    margin-bottom: 4px;
    color: var(--ow-subtle);
    font-size: 9px;
}

.octa-account__copy strong {
    overflow: hidden;
    max-width: 105px;
    color: #fff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octa-account__trigger > i {
    margin-left: 2px;
    color: var(--ow-subtle);
    font-size: 9px;
    transition: transform .18s ease;
}

.octa-account.is-open .octa-account__trigger > i {
    transform: rotate(180deg);
}

.octa-account__menu {
    position: absolute;
    top: calc(100% + 11px);
    right: 0;
    z-index: 30;
    display: grid;
    width: 310px;
    padding: 9px;
    gap: 3px;
    border: 1px solid var(--ow-border);
    border-radius: 16px;
    opacity: 0;
    visibility: hidden;
    background: rgba(16, 25, 31, .99);
    box-shadow: 0 25px 75px -30px #000;
    transform: translateY(-7px);
    transition: opacity .16s ease, visibility .16s ease, transform .16s ease;
}

.octa-account.is-open .octa-account__menu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.octa-account__summary {
    display: grid;
    margin-bottom: 5px;
    padding: 13px;
    border: 1px solid var(--ow-border-soft);
    border-radius: 11px;
    background: rgba(255, 255, 255, .025);
}

.octa-account__support-pin {
    margin-bottom: 5px;
}

.octa-account__support-pin .octa-support-pin {
    min-height: 0;
    padding: 11px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 9px;
    border-color: var(--ow-border-soft);
    border-radius: 11px;
    background: rgba(1, 12, 131, .11);
    backdrop-filter: none;
}

.octa-account__support-pin .octa-support-pin__icon {
    width: 35px;
    height: 35px;
    border-radius: 9px;
    font-size: 12px;
}

.octa-account__support-pin .octa-support-pin__copy small {
    margin-bottom: 4px;
    font-size: 8px;
}

.octa-account__support-pin .octa-support-pin__copy strong {
    font-size: 11px;
}

.octa-account__support-pin .octa-support-pin__button {
    min-height: 34px;
    padding: 0 9px;
}

.octa-account__support-pin .octa-support-pin__button[data-pin-copy] {
    grid-column: 3;
}

.octa-account__summary strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octa-account__summary small {
    margin-top: 5px;
    color: var(--ow-subtle);
    font-size: 10px;
}

.octa-account__eyebrow {
    margin-bottom: 7px;
    color: var(--ow-subtle);
    font-size: 9px;
    font-weight: 750;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.octa-account__menu > a {
    display: flex;
    min-height: 40px;
    padding: 9px 11px;
    align-items: center;
    gap: 10px;
    border-radius: 9px;
    color: var(--ow-muted) !important;
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
}

.octa-account__menu > a i {
    width: 17px;
    color: var(--ow-subtle);
    text-align: center;
}

.octa-account__menu > a:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .06);
}

.octa-account__divider {
    height: 1px;
    margin: 5px 2px;
    background: var(--ow-border-soft);
}

.octa-account__logout:hover {
    color: var(--ow-danger) !important;
    background: rgba(242, 154, 154, .08) !important;
}

.octa-menu-toggle {
    display: none;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid var(--ow-border-soft);
    border-radius: 11px;
    background: var(--ow-surface-raised);
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
}

.octa-menu-toggle__bar {
    display: block;
    width: 17px;
    height: 2px;
    margin: 0;
    border-radius: 2px;
    background: #fff;
    transition: transform .18s ease, opacity .18s ease;
    /* Forces its own compositing layer so iOS Safari repaints the
       transform/opacity change immediately instead of leaving a stale
       frame on screen until something else triggers a repaint. */
    will-change: transform, opacity;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
}

.octa-menu-toggle.is-open .octa-menu-toggle__bar--top {
    transform: translateY(5px) rotate(45deg);
}

.octa-menu-toggle.is-open .octa-menu-toggle__bar--mid {
    opacity: 0;
}

.octa-menu-toggle.is-open .octa-menu-toggle__bar--bottom {
    transform: translateY(-5px) rotate(-45deg);
}

/* Page heading and contextual navigation */
.octa-page-heading {
    border-bottom: 1px solid rgba(84, 111, 126, .14);
    background: rgba(5, 9, 11, .16);
}

.octa-page-heading > .octa-container {
    display: flex;
    min-height: 126px;
    padding: 34px 0 25px !important;
    align-items: flex-end;
    justify-content: space-between;
    gap: 30px;
}

.octa-page-heading--dashboard > .octa-container {
    min-height: 102px;
    padding-top: 25px !important;
    padding-bottom: 20px !important;
}

.octa-page-heading--compact > .octa-container {
    min-height: 102px;
    padding-top: 25px !important;
    padding-bottom: 20px !important;
}

.octa-page-heading h1 {
    margin: 0;
    color: #fff !important;
    font-size: clamp(25px, 2.2vw, 36px) !important;
    font-weight: 720 !important;
    letter-spacing: -.045em;
    line-height: 1.08;
}

.octa-page-heading .master-breadcrumb,
.octa-page-heading .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    color: var(--ow-subtle) !important;
    background: transparent !important;
}

.octa-page-heading .breadcrumb-item,
.octa-page-heading .breadcrumb-item a {
    color: var(--ow-subtle) !important;
    font-size: 11px;
}

.octa-page-heading .breadcrumb-item.active,
.octa-page-heading .breadcrumb-item:last-child {
    color: var(--ow-muted) !important;
}

.octa-context-nav {
    margin: 0 0 28px;
    border-bottom: 1px solid var(--ow-border-soft);
    background: rgba(16, 25, 31, .6);
}

.octa-context-nav__inner {
    display: flex;
    min-height: 58px;
    padding: 9px 0 !important;
    align-items: center;
    gap: 12px;
    overflow-x: auto;
}

.octa-context-nav .nav__items__wrapper {
    display: flex !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
    align-items: center;
    gap: 7px;
    border: 0 !important;
    background: transparent !important;
}

.octa-context-nav .main__nav__title {
    display: none !important;
}

.octa-context-nav .nav {
    display: flex !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap;
    gap: 4px;
    border: 0 !important;
}

.octa-context-nav .nav-item {
    flex: 0 0 auto;
}

.octa-context-nav .nav-link,
.octa-context-nav .list-group-item {
    display: inline-flex !important;
    min-height: 38px;
    padding: 8px 12px !important;
    align-items: center;
    border: 0 !important;
    border-radius: 9px !important;
    color: var(--ow-muted) !important;
    background: transparent !important;
    font-size: 12px;
    font-weight: 600;
    white-space: nowrap;
}

.octa-context-nav .nav-link:hover,
.octa-context-nav .nav-link.active,
.octa-context-nav .list-group-item:hover,
.octa-context-nav .list-group-item.active {
    color: #fff !important;
    background: rgba(255, 255, 255, .06) !important;
}

/* Shared surfaces */
body.octa-portal-v2.not__login__page .card,
body.octa-portal-v2.not__login__page .panel,
body.octa-portal-v2.not__login__page .well,
body.octa-portal-v2.not__login__page .default__shadow__panel,
body.octa-portal-v2.not__login__page .modal-content {
    border: 1px solid var(--ow-border-soft) !important;
    border-radius: var(--ow-radius-lg) !important;
    color: var(--ow-text) !important;
    background: var(--ow-glass) !important;
    box-shadow: var(--ow-shadow) !important;
    backdrop-filter: blur(var(--ow-glass-blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--ow-glass-blur)) saturate(125%);
}

body.octa-portal-v2.not__login__page .card {
    overflow: hidden;
}

body.octa-portal-v2.not__login__page .card__header,
body.octa-portal-v2.not__login__page .card-header,
body.octa-portal-v2.not__login__page .panel-heading,
body.octa-portal-v2.not__login__page .modal-header {
    padding: 20px 22px !important;
    border-bottom: 1px solid var(--ow-border-soft) !important;
    color: var(--ow-text) !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .card__body,
body.octa-portal-v2.not__login__page .card-body,
body.octa-portal-v2.not__login__page .panel-body,
body.octa-portal-v2.not__login__page .modal-body {
    padding: 22px !important;
    color: var(--ow-muted) !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .card__footer,
body.octa-portal-v2.not__login__page .card-footer,
body.octa-portal-v2.not__login__page .panel-footer,
body.octa-portal-v2.not__login__page .modal-footer {
    padding: 17px 22px !important;
    border-top: 1px solid var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: rgba(0, 0, 0, .08) !important;
}

body.octa-portal-v2.not__login__page .body__list__group__item,
body.octa-portal-v2.not__login__page .list-group-item {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page a.body__list__group__item:hover,
body.octa-portal-v2.not__login__page a.list-group-item:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .04) !important;
}

/* Buttons */
body.octa-portal-v2.not__login__page .btn {
    min-height: 40px;
    padding: 9px 15px;
    border-radius: 10px !important;
    box-shadow: none !important;
    font-weight: 650;
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
}

body.octa-portal-v2.not__login__page .btn:hover {
    transform: translateY(-1px);
}

body.octa-portal-v2.not__login__page .btn-primary,
body.octa-portal-v2.not__login__page .btn-success {
    border-color: var(--ow-blue) !important;
    color: #fff !important;
    background: var(--ow-blue) !important;
}

body.octa-portal-v2.not__login__page .btn-primary:hover,
body.octa-portal-v2.not__login__page .btn-primary:focus,
body.octa-portal-v2.not__login__page .btn-success:hover,
body.octa-portal-v2.not__login__page .btn-success:focus {
    border-color: var(--ow-blue-hover) !important;
    background: var(--ow-blue-hover) !important;
}

body.octa-portal-v2.not__login__page .btn-light,
body.octa-portal-v2.not__login__page .btn-default,
body.octa-portal-v2.not__login__page .btn-secondary {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-text) !important;
    background: var(--ow-surface-raised) !important;
}

body.octa-portal-v2.not__login__page .btn-light:hover,
body.octa-portal-v2.not__login__page .btn-default:hover,
body.octa-portal-v2.not__login__page .btn-secondary:hover {
    border-color: var(--ow-border) !important;
    color: #fff !important;
    background: var(--ow-surface-hover) !important;
}

body.octa-portal-v2.not__login__page .btn-danger {
    border-color: rgba(242, 154, 154, .3) !important;
    color: #ffc2c2 !important;
    background: rgba(242, 154, 154, .1) !important;
}

/* Forms */
body.octa-portal-v2.not__login__page label,
body.octa-portal-v2.not__login__page .form-control-label {
    color: var(--ow-text) !important;
    font-weight: 600;
}

body.octa-portal-v2.not__login__page .form-control,
body.octa-portal-v2.not__login__page .custom-select,
body.octa-portal-v2.not__login__page .select2-selection,
body.octa-portal-v2.not__login__page .input-group-text,
body.octa-portal-v2.not__login__page textarea,
body.octa-portal-v2.not__login__page input[type="text"],
body.octa-portal-v2.not__login__page input[type="email"],
body.octa-portal-v2.not__login__page input[type="password"],
body.octa-portal-v2.not__login__page input[type="tel"],
body.octa-portal-v2.not__login__page input[type="number"],
body.octa-portal-v2.not__login__page select {
    min-height: 44px;
    border: 1px solid var(--ow-border) !important;
    border-radius: 10px !important;
    color: var(--ow-text) !important;
    background: var(--ow-surface-raised) !important;
    box-shadow: none !important;
}

body.octa-portal-v2.not__login__page .form-control::placeholder,
body.octa-portal-v2.not__login__page textarea::placeholder,
body.octa-portal-v2.not__login__page input::placeholder {
    color: var(--ow-subtle) !important;
}

body.octa-portal-v2.not__login__page .form-control:focus,
body.octa-portal-v2.not__login__page textarea:focus,
body.octa-portal-v2.not__login__page input:focus,
body.octa-portal-v2.not__login__page select:focus {
    border-color: rgba(255, 255, 255, .6) !important;
    background: var(--ow-surface-hover) !important;
    box-shadow: 0 0 0 3px rgba(255, 255, 255, .08) !important;
}

/* Tables */
body.octa-portal-v2.not__login__page .table,
body.octa-portal-v2.not__login__page table {
    color: var(--ow-muted) !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .table thead th,
body.octa-portal-v2.not__login__page table thead th {
    padding: 14px 16px !important;
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-subtle) !important;
    background: rgba(255, 255, 255, .025) !important;
    font-size: 10px;
    font-weight: 750;
    letter-spacing: .07em;
    text-transform: uppercase;
}

body.octa-portal-v2.not__login__page .table td,
body.octa-portal-v2.not__login__page table td {
    padding: 15px 16px !important;
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: transparent !important;
    vertical-align: middle !important;
}

body.octa-portal-v2.not__login__page .table tbody tr:hover,
body.octa-portal-v2.not__login__page table tbody tr:hover {
    background: rgba(255, 255, 255, .03) !important;
}

body.octa-portal-v2.not__login__page .table-container,
body.octa-portal-v2.not__login__page .dataTables_wrapper {
    padding: 3px;
    overflow: hidden;
    border: 1px solid var(--ow-border-soft);
    border-radius: var(--ow-radius);
    background: rgba(16, 25, 31, .7);
}

body.octa-portal-v2.not__login__page .page-link {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: var(--ow-surface) !important;
}

body.octa-portal-v2.not__login__page .page-item.active .page-link {
    border-color: var(--ow-blue) !important;
    color: #fff !important;
    background: var(--ow-blue) !important;
}

/* Status and feedback */
body.octa-portal-v2.not__login__page .badge,
body.octa-portal-v2.not__login__page .label,
body.octa-portal-v2.not__login__page .status {
    padding: 5px 9px;
    border-radius: 999px;
    font-weight: 700;
}

body.octa-portal-v2.not__login__page .badge-success,
body.octa-portal-v2.not__login__page .label-success {
    color: #9ae3bd !important;
    background: rgba(102, 209, 158, .12) !important;
}

body.octa-portal-v2.not__login__page .badge-warning,
body.octa-portal-v2.not__login__page .label-warning {
    color: #f2d18d !important;
    background: rgba(231, 190, 104, .12) !important;
}

body.octa-portal-v2.not__login__page .badge-danger,
body.octa-portal-v2.not__login__page .label-danger {
    color: #ffc2c2 !important;
    background: rgba(242, 154, 154, .12) !important;
}

body.octa-portal-v2.not__login__page .alert {
    border: 1px solid var(--ow-border-soft) !important;
    border-radius: 13px !important;
    color: var(--ow-text) !important;
    background: var(--ow-surface-raised) !important;
}

body.octa-portal-v2.not__login__page .alert-success {
    border-color: rgba(102, 209, 158, .28) !important;
    background: rgba(102, 209, 158, .08) !important;
}

body.octa-portal-v2.not__login__page .alert-warning {
    border-color: rgba(231, 190, 104, .28) !important;
    background: rgba(231, 190, 104, .08) !important;
}

body.octa-portal-v2.not__login__page .alert-danger {
    border-color: rgba(242, 154, 154, .28) !important;
    background: rgba(242, 154, 154, .08) !important;
}

body.octa-portal-v2.not__login__page .dropdown-menu,
body.octa-portal-v2.not__login__page .select2-dropdown {
    border: 1px solid var(--ow-border) !important;
    border-radius: 13px !important;
    color: var(--ow-text) !important;
    background: var(--ow-surface) !important;
    box-shadow: 0 24px 70px -28px #000 !important;
}

body.octa-portal-v2.not__login__page .dropdown-item {
    color: var(--ow-muted) !important;
}

body.octa-portal-v2.not__login__page .dropdown-item:hover,
body.octa-portal-v2.not__login__page .dropdown-item:focus {
    color: #fff !important;
    background: rgba(255, 255, 255, .055) !important;
}

/* Footer */
body.octa-portal-v2.not__login__page .main__footer__wrapper,
body.octa-portal-v2.not__login__page .footer__copyright__wrapper {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: rgba(5, 9, 11, .72) !important;
}

body.octa-portal-v2.not__login__page .main__footer__wrapper .main__page__content {
    width: min(calc(100% - 48px), var(--ow-container)) !important;
    max-width: var(--ow-container) !important;
    margin-right: auto !important;
    margin-left: auto !important;
}

body.octa-portal-v2.not__login__page .main__footer__wrapper a {
    color: var(--ow-muted) !important;
}

body.octa-portal-v2.not__login__page .main__footer__wrapper a:hover {
    color: #fff !important;
}

/* Submit ticket */
.octa-ticket-start {
    display: grid;
    padding: 34px 0 62px;
    gap: 21px;
}

.octa-ticket-start__intro {
    max-width: 750px;
}

.octa-ticket-start__intro h2 {
    margin: 0;
    font-size: clamp(24px, 2.2vw, 34px) !important;
    font-weight: 700 !important;
    letter-spacing: -.04em;
}

.octa-ticket-start__intro p {
    margin: 10px 0 0;
    font-size: 14px;
    line-height: 1.65;
}

.octa-ticket-notice {
    display: grid;
    min-height: 86px;
    padding: 17px 19px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 15px;
    border: 1px solid var(--ow-border-soft);
    border-left: 3px solid #6288ff;
    border-radius: 15px;
    background: linear-gradient(135deg, rgba(21, 35, 44, .92), rgba(16, 25, 31, .96));
}

.octa-ticket-notice__icon {
    display: grid;
    width: 40px;
    height: 40px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    color: #fff;
    background: rgba(1, 12, 131, .35);
    place-items: center;
}

.octa-ticket-notice strong {
    color: #fff;
    font-size: 13px;
}

.octa-ticket-notice p {
    margin: 4px 0 0;
    font-size: 11px;
}

.octa-ticket-departments {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 15px;
}

.octa-ticket-department {
    position: relative;
    display: grid;
    min-height: 174px;
    overflow: hidden;
    padding: 22px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-rows: auto 1fr;
    align-items: start;
    gap: 17px 14px;
    border: 1px solid var(--ow-border-soft);
    border-radius: 17px;
    color: var(--ow-text) !important;
    background: linear-gradient(145deg, rgba(21, 35, 44, .88), rgba(16, 25, 31, .97));
    box-shadow: var(--ow-shadow);
    text-decoration: none !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.octa-ticket-department::after {
    position: absolute;
    right: -55px;
    bottom: -65px;
    width: 150px;
    height: 150px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: rgba(1, 12, 131, .16);
}

.octa-ticket-department:hover {
    border-color: rgba(113, 139, 153, .58);
    color: #fff !important;
    box-shadow: 0 28px 75px -42px #000;
    transform: translateY(-3px);
}

.octa-ticket-department__icon {
    display: grid;
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 12px;
    color: #fff;
    background: rgba(1, 12, 131, .32);
    font-size: 15px;
    place-items: center;
}

.octa-ticket-department__copy {
    display: grid;
    min-width: 0;
}

.octa-ticket-department__copy strong {
    color: #fff;
    font-size: 16px;
    font-weight: 680;
    letter-spacing: -.02em;
}

.octa-ticket-department__copy small {
    margin-top: 9px;
    color: var(--ow-muted) !important;
    font-size: 12px;
    line-height: 1.55;
}

.octa-ticket-department__arrow {
    position: relative;
    z-index: 1;
    margin-top: 5px;
    color: var(--ow-subtle);
    font-size: 11px;
}

.octa-ticket-managed {
    display: grid;
    padding: 22px;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 16px;
    border: 1px solid rgba(231, 190, 104, .3);
    border-radius: 16px;
    background: rgba(231, 190, 104, .07);
}

.octa-ticket-managed__icon {
    display: grid;
    width: 45px;
    height: 45px;
    border-radius: 12px;
    color: var(--ow-warning);
    background: rgba(231, 190, 104, .1);
    place-items: center;
}

.octa-ticket-managed h3,
.octa-ticket-managed p {
    margin: 0;
}

.octa-ticket-managed h3 {
    font-size: 15px !important;
}

.octa-ticket-managed p {
    margin-top: 7px;
}

body.octa-portal-v2.not__login__page form[action*="submitticket"] > .card {
    margin-bottom: 16px;
}

/* Order forms and checkout */
body.octa-portal-v2.not__login__page .shopping__main__body,
body.octa-portal-v2.not__login__page .shopping__cart__main__page__content,
body.octa-portal-v2.not__login__page .shopping__cart__main__page__content #order-standard_cart {
    color: var(--ow-text) !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .shopping__cart__main__page__content #order-standard_cart {
    width: min(calc(100% - 48px), var(--ow-container)) !important;
    max-width: var(--ow-container) !important;
    margin-right: auto !important;
    margin-left: auto !important;
    padding-right: 0 !important;
    padding-left: 0 !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart {
    --background: var(--ow-surface);
    --background-2: var(--ow-surface-raised);
    --background-3: var(--ow-surface-hover);
    --background-4: #1b2a33;
    --background-5: var(--ow-blue);
    --background-6: #21323c;
    --background-7: #15232c;
    --background-8: #10191f;
    --background-9: #0c151a;
    --background-10: #192832;
    --background-11: #17242c;
    --background-12: #20313b;
    --background-13: #111c22;
    --background-14: #15232c;
    --border-color: var(--ow-border);
    --border-color-light: var(--ow-border-soft);
    --color-h: var(--ow-text);
    --color-h-sub: var(--ow-muted);
    --a-link-color: #7e8cff;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps__container {
    margin-bottom: 32px !important;
    padding: 28px 0 27px !important;
    border-top: 1px solid var(--ow-border-soft);
    border-bottom: 1px solid var(--ow-border-soft);
    color: var(--ow-text) !important;
    background:
        radial-gradient(circle at 92% 0%, rgba(1, 12, 131, .2), transparent 27rem),
        linear-gradient(145deg, rgba(21, 35, 44, .9), rgba(16, 25, 31, .98)) !important;
    box-shadow: 0 25px 65px -52px #000 !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps__container > div,
body.octa-portal-v2.not__login__page .standard__cart__order__steps__container .main__page__content,
body.octa-portal-v2.not__login__page .standard__cart__order__steps__container #order-standard_cart {
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps__container h1,
body.octa-portal-v2.not__login__page .standard__cart__order__steps__container h2,
body.octa-portal-v2.not__login__page .standard__cart__order__steps__container h3,
body.octa-portal-v2.not__login__page .standard__cart__order__steps__container h4,
body.octa-portal-v2.not__login__page .standard__cart__order__steps__container h5,
body.octa-portal-v2.not__login__page .standard__cart__order__steps__container h6 {
    color: #fff !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps__container p {
    color: var(--ow-muted) !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps {
    margin-top: 26px;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item .standard__cart__order__steps__item__number {
    border: 1px solid var(--ow-border);
    color: var(--ow-muted) !important;
    background: var(--ow-surface-raised) !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item.current .standard__cart__order__steps__item__number,
body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item.done .standard__cart__order__steps__item__number {
    border-color: var(--ow-blue);
    color: #fff !important;
    background: var(--ow-blue) !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item .standard__cart__order__steps__item__text,
body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item.done .standard__cart__order__steps__item__text,
body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item.current .standard__cart__order__steps__item__text {
    color: var(--ow-muted) !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item.current .standard__cart__order__steps__item__text {
    color: #fff !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item:not(.done, .current),
body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item:not(.done, .current) .standard__cart__order__steps__item__text {
    opacity: .68 !important;
}

body.octa-portal-v2.not__login__page .standard__cart__order__steps .standard__cart__order__steps__item:not(:last-of-type)::after {
    opacity: .55;
    background: repeating-linear-gradient(to right, var(--ow-border), var(--ow-border) 7px, transparent 7px, transparent 13px) !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .default__shadow__panel,
body.octa-portal-v2.not__login__page #order-standard_cart .pricing__plans__standard__item,
body.octa-portal-v2.not__login__page #order-standard_cart .cart__domains__config__box,
body.octa-portal-v2.not__login__page #order-standard_cart .view__cart__items__wrapper,
body.octa-portal-v2.not__login__page #order-standard_cart .sticky__order__summary__sidebar__wrapper,
body.octa-portal-v2.not__login__page #order-standard_cart .already__registered__card,
body.octa-portal-v2.not__login__page #order-standard_cart .checkout__payment__gateway__radios__wrapper,
body.octa-portal-v2.not__login__page #order-standard_cart .panel-addon,
body.octa-portal-v2.not__login__page #order-standard_cart .product-info,
body.octa-portal-v2.not__login__page #order-standard_cart .summary-container {
    border: 1px solid var(--ow-border-soft) !important;
    border-radius: var(--ow-radius) !important;
    color: var(--ow-text) !important;
    background: linear-gradient(145deg, rgba(21, 35, 44, .84), rgba(16, 25, 31, .97)) !important;
    box-shadow: var(--ow-shadow) !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .view__cart__items__wrapper__header,
body.octa-portal-v2.not__login__page #order-standard_cart .view__cart__items__wrapper__footer,
body.octa-portal-v2.not__login__page #order-standard_cart .card__header,
body.octa-portal-v2.not__login__page #order-standard_cart .panel-heading,
body.octa-portal-v2.not__login__page #order-standard_cart .summary-container .heading {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-text) !important;
    background: rgba(255, 255, 255, .018) !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .view__cart__items__wrapper__body__item,
body.octa-portal-v2.not__login__page #order-standard_cart .checkout__payment__gateway__radios,
body.octa-portal-v2.not__login__page #order-standard_cart .panel-addon,
body.octa-portal-v2.not__login__page #order-standard_cart .list-group-item {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .view__cart__items__wrapper__body__item:hover,
body.octa-portal-v2.not__login__page #order-standard_cart .checkout__payment__gateway__radios:hover,
body.octa-portal-v2.not__login__page #order-standard_cart .panel-addon:hover {
    background: rgba(255, 255, 255, .025) !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .panel__check__cart__group .default__shadow__panel,
body.octa-portal-v2.not__login__page #order-standard_cart .panel__check__cart__choosecycle__group .default__shadow__panel,
body.octa-portal-v2.not__login__page #order-standard_cart .cart__choose__cycle__content {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: var(--ow-surface-raised) !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .panel__check__cart__group .default__shadow__panel:hover,
body.octa-portal-v2.not__login__page #order-standard_cart .panel__check__cart__choosecycle__group .default__shadow__panel:hover,
body.octa-portal-v2.not__login__page #order-standard_cart .cart__choose__cycle__label:hover .cart__choose__cycle__content {
    border-color: var(--ow-border) !important;
    background: var(--ow-surface-hover) !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .panel-addon-selected,
body.octa-portal-v2.not__login__page #order-standard_cart .cart__choose__cycle__label input:checked ~ .cart__choose__cycle__content {
    border-color: rgba(98, 116, 255, .58) !important;
    background: rgba(1, 12, 131, .18) !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .buttom__cart__submit__area,
body.octa-portal-v2.not__login__page #order-standard_cart .form__btn__submit__group {
    border-top: 1px solid var(--ow-border-soft) !important;
    background: rgba(8, 14, 16, .9) !important;
    box-shadow: 0 -28px 55px -45px #000 !important;
    backdrop-filter: blur(14px);
}

body.octa-portal-v2.not__login__page #order-standard_cart .empty-cart,
body.octa-portal-v2.not__login__page #order-standard_cart .empty__cart,
body.octa-portal-v2.not__login__page #order-standard_cart .cart-empty,
body.octa-portal-v2.not__login__page #order-standard_cart .no-data,
body.octa-portal-v2.not__login__page #order-standard_cart .no__data {
    color: var(--ow-muted) !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page #order-standard_cart .empty-cart h2,
body.octa-portal-v2.not__login__page #order-standard_cart .empty__cart h2,
body.octa-portal-v2.not__login__page #order-standard_cart .cart-empty h2,
body.octa-portal-v2.not__login__page #order-standard_cart .no-data h2,
body.octa-portal-v2.not__login__page #order-standard_cart .no__data h2 {
    color: #fff !important;
}

/* Dashboard */
.octa-dashboard {
    display: grid;
    padding-top: 32px;
    gap: 22px;
}

.octa-dashboard-eyebrow,
.octa-panel__eyebrow {
    display: block;
    margin-bottom: 8px;
    color: var(--ow-subtle);
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .15em;
    text-transform: uppercase;
}

.octa-dashboard-alert {
    display: flex;
    margin: 0 !important;
    padding: 15px 17px !important;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
}

.octa-dashboard-alert p {
    margin: 4px 0 0;
}

.octa-dashboard-alert__actions {
    display: flex;
    align-items: center;
    gap: 8px;
}

.octa-dashboard-alert .close {
    position: static !important;
    display: grid;
    width: 36px;
    height: 36px;
    padding: 0;
    border: 0;
    border-radius: 9px;
    opacity: 1;
    color: var(--ow-muted);
    background: rgba(255, 255, 255, .05);
    text-shadow: none;
    place-items: center;
}

.octa-dashboard-alert--invoice {
    position: relative;
    display: grid;
    min-height: 118px;
    overflow: hidden;
    padding: 20px 21px !important;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 17px;
    border-color: rgba(242, 154, 154, .24) !important;
    background:
        radial-gradient(circle at 91% 8%, rgba(190, 55, 68, .18), transparent 18rem),
        linear-gradient(145deg, rgba(57, 30, 36, .7), rgba(25, 19, 22, .86)) !important;
    box-shadow: 0 24px 70px -42px rgba(0, 0, 0, .95);
    backdrop-filter: blur(18px) saturate(125%);
    -webkit-backdrop-filter: blur(18px) saturate(125%);
}

.octa-dashboard-alert--invoice::after {
    position: absolute;
    top: -82px;
    right: 120px;
    width: 180px;
    height: 180px;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.octa-dashboard-alert__icon {
    display: grid;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(242, 154, 154, .25);
    border-radius: 14px;
    color: #ffc2c2;
    background: rgba(242, 154, 154, .1);
    font-size: 18px;
    place-items: center;
}

.octa-dashboard-alert__content {
    position: relative;
    z-index: 1;
    min-width: 0;
}

.octa-dashboard-alert__eyebrow {
    display: block;
    margin-bottom: 6px;
    color: #e5a6aa;
    font-size: 9px;
    font-weight: 760;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.octa-dashboard-alert__content > strong {
    display: block;
    color: #fff;
    font-size: 16px;
    font-weight: 680;
    letter-spacing: -.02em;
}

.octa-dashboard-alert--invoice .octa-dashboard-alert__content p {
    margin: 6px 0 0;
    color: #c5afb2 !important;
    font-size: 12px;
}

.octa-dashboard-alert__balance {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 150px;
    padding: 12px 16px;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: 13px;
    background: rgba(5, 10, 13, .28);
    line-height: 1.15;
}

.octa-dashboard-alert__balance span {
    margin-bottom: 6px;
    color: #a98f93;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.octa-dashboard-alert__balance strong {
    color: #fff;
    font-size: 20px;
    font-weight: 720;
    letter-spacing: -.025em;
    white-space: nowrap;
}

.octa-dashboard-alert--invoice .octa-dashboard-alert__actions {
    position: relative;
    z-index: 1;
}

.octa-dashboard-alert--invoice .btn-light {
    min-height: 42px;
    padding-right: 17px;
    padding-left: 17px;
    border-color: rgba(242, 154, 154, .22) !important;
    background: rgba(242, 154, 154, .09) !important;
}

.octa-dashboard-alert--invoice .btn-light:hover {
    border-color: rgba(242, 154, 154, .42) !important;
    background: rgba(242, 154, 154, .16) !important;
}

.octa-anniversary {
    position: relative;
    display: flex;
    overflow: hidden;
    padding: 25px 27px;
    align-items: center;
    gap: 18px;
    border: 1px solid rgba(80, 97, 230, .35);
    border-radius: var(--ow-radius-lg);
    background:
        radial-gradient(circle at 90% 20%, rgba(62, 79, 214, .35), transparent 25rem),
        linear-gradient(135deg, rgba(1, 12, 131, .88), rgba(11, 19, 50, .96));
    box-shadow: var(--ow-shadow);
}

.octa-anniversary__icon {
    display: grid;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .14);
    border-radius: 14px;
    color: #fff;
    background: rgba(255, 255, 255, .08);
    font-size: 19px;
    place-items: center;
}

.octa-anniversary h2,
.octa-anniversary p {
    margin: 0;
}

.octa-anniversary p {
    margin-top: 5px;
}

.octa-welcome {
    position: relative;
    display: grid;
    min-height: 284px;
    overflow: hidden;
    padding: clamp(28px, 4vw, 50px);
    grid-template-columns: minmax(0, 1.25fr) minmax(300px, .75fr);
    align-items: center;
    gap: 45px;
    border: 1px solid var(--ow-border-soft);
    border-radius: 24px;
    background:
        radial-gradient(circle at 92% 15%, rgba(1, 12, 131, .48), transparent 23rem),
        linear-gradient(145deg, rgba(21, 35, 44, .96), rgba(11, 19, 24, .98));
    box-shadow: 0 32px 90px -52px #000;
}

.octa-welcome::before {
    position: absolute;
    top: -145px;
    right: -90px;
    width: 390px;
    height: 390px;
    border: 1px solid rgba(255, 255, 255, .045);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.octa-welcome::after {
    position: absolute;
    right: 170px;
    bottom: -185px;
    width: 330px;
    height: 330px;
    border: 1px solid rgba(255, 255, 255, .035);
    border-radius: 50%;
    content: "";
    pointer-events: none;
}

.octa-welcome__content {
    position: relative;
    z-index: 1;
}

.octa-welcome h1 {
    max-width: 700px;
    margin: 0;
    font-size: clamp(31px, 4vw, 53px) !important;
    font-weight: 720 !important;
    letter-spacing: -.055em !important;
    line-height: 1.02;
}

.octa-welcome__content > p {
    max-width: 650px;
    margin: 17px 0 0;
    font-size: 15px;
    line-height: 1.7;
}

.octa-welcome__actions {
    display: flex;
    margin-top: 27px;
    gap: 10px;
    flex-wrap: wrap;
}

.octa-welcome__actions .btn {
    display: inline-flex;
    min-height: 45px !important;
    align-items: center;
    gap: 9px;
}

.octa-welcome__account {
    position: relative;
    z-index: 1;
    display: grid;
    min-width: 0;
    padding: 18px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 13px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 17px;
    background: rgba(5, 10, 13, .48);
    backdrop-filter: blur(10px);
}

.octa-support-pin {
    display: grid;
    min-height: 68px;
    padding: 12px 13px;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 11px;
    border: 1px solid rgba(255, 255, 255, .12);
    border-radius: 15px;
    background: rgba(5, 10, 13, .62);
    backdrop-filter: blur(10px);
}

.octa-support-pin__icon {
    display: grid;
    width: 39px;
    height: 39px;
    border: 1px solid rgba(255, 255, 255, .1);
    border-radius: 11px;
    color: #fff;
    background: rgba(1, 12, 131, .38);
    place-items: center;
}

.octa-support-pin__copy {
    display: grid;
    min-width: 0;
    line-height: 1.15;
}

.octa-support-pin__copy small {
    margin-bottom: 5px;
    color: var(--ow-subtle) !important;
    font-size: 9px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.octa-support-pin__copy strong {
    overflow: hidden;
    color: #fff;
    font-size: 12px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octa-support-pin__button {
    display: inline-flex;
    min-height: 38px;
    padding: 0 11px;
    align-items: center;
    gap: 7px;
    border: 1px solid var(--ow-border-soft);
    border-radius: 10px;
    color: var(--ow-text);
    background: var(--ow-surface-raised);
    font: inherit;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
}

.octa-support-pin__button:hover {
    border-color: var(--ow-border);
    background: var(--ow-surface-hover);
}

.octa-support-pin__button[hidden] {
    display: none !important;
}

.octa-welcome__avatar {
    position: relative;
}

.octa-welcome__avatar img {
    display: block;
    width: 48px;
    height: 48px;
    border: 1px solid rgba(255, 255, 255, .32);
    border-radius: 13px;
    object-fit: cover;
}

.octa-welcome__online {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 12px;
    height: 12px;
    border: 3px solid #10191f;
    border-radius: 50%;
    background: var(--ow-success);
}

.octa-welcome__account-copy {
    display: grid;
    min-width: 0;
    line-height: 1.2;
}

.octa-welcome__account-copy span,
.octa-welcome__account-copy small {
    color: var(--ow-subtle);
    font-size: 10px;
}

.octa-welcome__account-copy strong {
    overflow: hidden;
    margin: 5px 0;
    color: #fff;
    font-size: 13px;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.octa-icon-button {
    display: inline-grid !important;
    width: 38px;
    height: 38px;
    flex: 0 0 auto;
    border: 1px solid var(--ow-border-soft);
    border-radius: 10px;
    color: var(--ow-muted) !important;
    background: var(--ow-surface-raised);
    text-decoration: none !important;
    place-items: center;
}

.octa-icon-button:hover {
    border-color: var(--ow-border);
    color: #fff !important;
    background: var(--ow-surface-hover);
}

.octa-stats {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
}

.octa-stat-card {
    position: relative;
    display: grid;
    min-height: 194px;
    overflow: hidden;
    padding: 21px;
    grid-template-columns: 1fr auto;
    grid-template-rows: auto 1fr auto auto;
    border: 1px solid var(--ow-border-soft);
    border-radius: 17px;
    color: var(--ow-text) !important;
    background: linear-gradient(150deg, rgba(21, 35, 44, .93), rgba(12, 20, 25, .96));
    box-shadow: var(--ow-shadow);
    text-decoration: none !important;
    transition: border-color .18s ease, transform .18s ease, box-shadow .18s ease;
}

.octa-stat-card::before {
    position: absolute;
    top: -65px;
    right: -60px;
    width: 145px;
    height: 145px;
    border-radius: 50%;
    content: "";
    pointer-events: none;
    background: rgba(1, 12, 131, .22);
}

.octa-stat-card:hover {
    border-color: rgba(113, 139, 153, .55);
    color: #fff !important;
    box-shadow: 0 28px 75px -42px #000;
    transform: translateY(-3px);
}

.octa-stat-card__icon {
    display: grid;
    width: 41px;
    height: 41px;
    border: 1px solid rgba(255, 255, 255, .09);
    border-radius: 12px;
    color: #fff;
    background: rgba(1, 12, 131, .3);
    font-size: 15px;
    place-items: center;
}

.octa-stat-card__arrow {
    position: relative;
    z-index: 1;
    color: var(--ow-subtle);
    font-size: 13px;
}

.octa-stat-card__value {
    align-self: end;
    color: #fff;
    font-size: 34px;
    font-weight: 740;
    letter-spacing: -.05em;
    line-height: 1;
}

.octa-stat-card__label {
    grid-column: 1 / -1;
    margin-top: 5px;
    color: var(--ow-muted);
    font-size: 12px;
    font-weight: 600;
}

.octa-stat-card__status {
    display: inline-flex;
    margin-top: 16px;
    grid-column: 1 / -1;
    align-items: center;
    gap: 7px;
    color: var(--ow-subtle);
    font-size: 10px;
    font-weight: 600;
}

.octa-stat-card__status i {
    color: var(--ow-subtle);
    font-size: 5px;
}

.octa-stat-card__status--good,
.octa-stat-card__status--good i {
    color: var(--ow-success);
}

.octa-stat-card__status--warning,
.octa-stat-card__status--warning i {
    color: var(--ow-warning);
}

.octa-stat-card--attention {
    border-color: rgba(231, 190, 104, .27);
}

.octa-dashboard-grid {
    display: grid;
    grid-template-columns: .85fr 1.15fr;
    gap: 16px;
}

.octa-account-card,
.octa-quick-card,
.octa-panel {
    border: 1px solid var(--ow-border-soft);
    border-radius: var(--ow-radius-lg);
    background: linear-gradient(145deg, rgba(21, 35, 44, .82), rgba(16, 25, 31, .97));
    box-shadow: var(--ow-shadow);
}

.octa-account-card,
.octa-quick-card {
    min-height: 285px;
    padding: 25px;
}

.octa-account-card__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

.octa-account-card h2,
.octa-quick-card h2,
.octa-panel h2,
.octa-panels-heading h2 {
    margin: 0;
    font-size: 18px !important;
    font-weight: 680 !important;
}

.octa-account-card__icon {
    display: grid;
    width: 42px;
    height: 42px;
    border: 1px solid var(--ow-border-soft);
    border-radius: 12px;
    color: #fff;
    background: var(--ow-surface-raised);
    place-items: center;
}

.octa-account-card__balance {
    margin-top: 29px;
    color: #fff;
    font-size: clamp(34px, 4vw, 48px);
    font-weight: 740;
    letter-spacing: -.055em;
    line-height: 1;
}

.octa-account-card > p {
    max-width: 440px;
    margin: 13px 0 0;
    font-size: 12px;
    line-height: 1.55;
}

.octa-account-card__actions {
    display: flex;
    margin-top: 25px;
    gap: 9px;
    flex-wrap: wrap;
}

.octa-quick-card header {
    margin-bottom: 18px;
}

.octa-quick-card__grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
}

.octa-quick-card__grid a {
    display: grid;
    min-height: 83px;
    padding: 15px;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: center;
    gap: 11px;
    border: 1px solid var(--ow-border-soft);
    border-radius: 13px;
    color: var(--ow-muted) !important;
    background: rgba(255, 255, 255, .022);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none !important;
    transition: border-color .16s ease, background-color .16s ease, transform .16s ease;
}

.octa-quick-card__grid a > i:first-child {
    display: grid;
    width: 34px;
    height: 34px;
    border-radius: 9px;
    color: #fff;
    background: var(--ow-surface-raised);
    place-items: center;
}

.octa-quick-card__grid a > i:last-child {
    color: var(--ow-subtle);
    font-size: 9px;
}

.octa-quick-card__grid a:hover {
    border-color: var(--ow-border);
    color: #fff !important;
    background: rgba(255, 255, 255, .045);
    transform: translateY(-2px);
}

.octa-panels-heading {
    display: flex;
    margin-top: 13px;
    align-items: flex-end;
    justify-content: space-between;
}

.octa-panels-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-auto-flow: row dense;
    align-items: start;
    gap: 16px;
}

.octa-panel--achievements {
    grid-column: 1 / -1;
    order: 1;
}

.octa-panel--services {
    grid-column: span 1;
    order: 2;
}

.octa-panel--tickets {
    grid-column: span 1;
    order: 3;
}

.octa-panel--standard {
    order: 4;
}

.octa-panel--referral {
    grid-column: 1 / -1;
    order: 100;
}

.octa-panel--achievements .octa-panel__body,
.octa-panel--referral .octa-panel__body {
    width: 100%;
}

.octa-panel {
    min-width: 0;
    overflow: hidden;
}

.octa-panel__header {
    display: flex;
    min-height: 81px;
    padding: 20px 21px;
    align-items: flex-start;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--ow-border-soft);
}

.octa-panel__body {
    padding: 20px 21px;
}

.octa-panel__body:empty {
    display: none;
}

.octa-panel__list {
    display: grid;
}

.octa-panel__row {
    display: flex;
    min-height: 55px;
    padding: 13px 21px;
    align-items: center;
    justify-content: space-between;
    gap: 15px;
    border-bottom: 1px solid var(--ow-border-soft);
    color: var(--ow-muted) !important;
    font-size: 12px;
    text-decoration: none !important;
}

.octa-panel__row > span:first-child {
    min-width: 0;
}

.octa-panel__row > span:first-child > i {
    width: 18px;
    margin-right: 6px;
    color: var(--ow-subtle);
    text-align: center;
}

.octa-panel__row > i {
    color: var(--ow-subtle);
    font-size: 9px;
}

a.octa-panel__row:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, .035);
}

.octa-panel__footer {
    padding: 16px 21px;
    border-top: 1px solid var(--ow-border-soft);
    background: rgba(0, 0, 0, .07);
}

@media (max-width: 1050px) {
    .octa-welcome {
        grid-template-columns: 1fr;
        gap: 28px;
    }

    .octa-welcome__account {
        max-width: 480px;
    }

    .octa-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .octa-ticket-departments {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .octa-dashboard {
        padding-top: 22px;
        gap: 15px;
    }

    .octa-dashboard-alert {
        align-items: flex-start;
        flex-direction: column;
    }

    .octa-dashboard-alert--invoice {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .octa-dashboard-alert--invoice .octa-dashboard-alert__balance {
        grid-column: 2 / 3;
        grid-row: 2;
    }

    .octa-dashboard-alert--invoice .octa-dashboard-alert__actions {
        grid-column: 3;
        grid-row: 1 / 3;
        align-self: center;
        flex-direction: column-reverse;
    }

    .octa-welcome {
        min-height: 0;
        padding: 25px 20px;
        border-radius: 18px;
    }

    .octa-welcome h1 {
        font-size: 34px !important;
    }

    .octa-welcome__content > p {
        font-size: 13px;
    }

    .octa-welcome__account {
        width: 100%;
        padding: 14px;
    }

    .octa-stats,
    .octa-dashboard-grid,
    .octa-panels-grid {
        grid-template-columns: 1fr;
    }

    .octa-panel--achievements,
    .octa-panel--services,
    .octa-panel--tickets,
    .octa-panel--standard,
    .octa-panel--referral {
        grid-column: 1;
    }

    .octa-stat-card {
        min-height: 172px;
    }

    .octa-account-card,
    .octa-quick-card {
        min-height: 0;
        padding: 20px;
    }

    .octa-quick-card__grid {
        grid-template-columns: 1fr;
    }

    .octa-support-pin {
        grid-template-columns: auto minmax(0, 1fr) auto;
    }

    .octa-ticket-start {
        padding-top: 23px;
    }

    .octa-ticket-notice {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .octa-ticket-notice .btn {
        grid-column: 1 / -1;
    }

    .octa-ticket-departments {
        grid-template-columns: 1fr;
    }

    .octa-ticket-department {
        min-height: 145px;
    }
}

/* Responsive header */
@media (max-width: 1179.98px) {
    .octa-header__inner {
        width: min(calc(100% - 32px), 1520px);
        gap: 10px;
    }

    .octa-brand {
        min-width: 0;
        margin-right: auto;
    }

    .octa-menu-toggle {
        display: flex;
        order: 2;
    }

    .octa-header__actions {
        order: 1;
    }

    .octa-nav-wrap {
        position: fixed;
        top: var(--ow-header-height);
        right: 0;
        bottom: 0;
        left: 0;
        z-index: 1070;
        display: block;
        height: auto;
        padding: 16px;
        opacity: 0;
        visibility: hidden;
        overflow-y: auto;
        background: rgba(5, 9, 11, .97);
        backdrop-filter: blur(18px);
        transform: translateY(-8px);
        transition: opacity .18s ease, visibility .18s ease, transform .18s ease;
    }

    .octa-nav-wrap.is-open {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
    }

    .octa-primary-nav {
        display: grid;
        width: min(100%, 720px);
        height: auto;
        margin: 0 auto;
        align-content: start;
        justify-content: stretch;
        gap: 7px;
    }

    .octa-primary-nav__group {
        display: grid;
        height: auto;
    }

    .octa-primary-nav__link {
        width: 100%;
        min-height: 50px;
        padding: 0 15px;
        justify-content: flex-start;
        border-color: var(--ow-border-soft);
        background: rgba(21, 35, 44, .7);
    }

    .octa-primary-nav__chevron {
        margin-left: auto;
    }

    .octa-primary-nav__dropdown {
        position: static;
        display: none;
        width: 100%;
        margin: 6px 0 2px;
        padding: 7px;
        opacity: 1;
        visibility: visible;
        box-shadow: none;
        transform: none;
    }

    .octa-primary-nav__group.is-open .octa-primary-nav__dropdown {
        display: grid;
    }

}

@media (max-width: 767.98px) {
    :root {
        --ow-header-height: 68px;
    }

    body.octa-portal-v2.not__login__page .octa-container,
    body.octa-portal-v2.not__login__page .main__page__content.octa-container,
    body.octa-portal-v2.not__login__page .main__footer__wrapper .main__page__content {
        width: min(calc(100% - 24px), var(--ow-container)) !important;
    }

    .octa-header__inner {
        width: calc(100% - 24px);
    }

    .octa-brand__wordmark {
        max-width: 145px;
        height: 32px;
    }

    .octa-header-action__label,
    .octa-account__copy,
    .octa-account__trigger > i {
        display: none;
    }

    .octa-header-action,
    .octa-account__trigger {
        width: 42px;
        min-width: 42px;
        height: 42px;
        min-height: 42px;
        padding: 0;
        justify-content: center;
    }

    .octa-account__trigger {
        padding: 3px;
    }

    .octa-account__trigger img {
        width: 34px;
        height: 34px;
    }

    .octa-account__menu {
        position: fixed;
        top: calc(var(--ow-header-height) + 8px);
        right: 12px;
        left: 12px;
        width: auto;
    }

    .octa-page-heading > .octa-container {
        min-height: 104px;
        padding: 25px 0 19px !important;
        align-items: flex-start;
        flex-direction: column;
        gap: 10px;
    }

    .octa-page-heading h1 {
        font-size: 26px !important;
    }

    .octa-context-nav__inner {
        width: calc(100% - 24px) !important;
    }

    body.octa-portal-v2.not__login__page .card__header,
    body.octa-portal-v2.not__login__page .card-header,
    body.octa-portal-v2.not__login__page .card__body,
    body.octa-portal-v2.not__login__page .card-body {
        padding: 17px !important;
    }

    body.octa-portal-v2.not__login__page .table-responsive {
        border: 1px solid var(--ow-border-soft);
        border-radius: 13px;
    }

    body.octa-portal-v2.not__login__page .shopping__cart__main__page__content #order-standard_cart {
        width: min(calc(100% - 24px), var(--ow-container)) !important;
    }

    body.octa-portal-v2.not__login__page .standard__cart__order__steps__container {
        padding-top: 22px !important;
        padding-bottom: 22px !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    .octa-header *,
    body.octa-portal-v2.not__login__page *,
    body.octa-portal-v2.not__login__page *::before,
    body.octa-portal-v2.not__login__page *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* OctaWeb portal footer */
.octa-footer {
    position: relative;
    z-index: 1;
    margin-top: 56px;
    color: var(--ow-muted);
    background:
        radial-gradient(circle at 8% 0, rgba(1, 12, 131, .18), transparent 34%),
        linear-gradient(135deg, #0d171d 0%, #091115 58%, #071014 100%);
    border-top: 1px solid var(--ow-border-soft);
}

.octa-footer__inner {
    width: min(calc(100% - 48px), var(--ow-container));
    margin: 0 auto;
}

.octa-footer__main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 48px;
    padding: 32px 0 28px;
}

.octa-footer__brand {
    min-width: 0;
}

.octa-footer__logo {
    display: inline-flex;
    align-items: center;
}

.octa-footer__logo img {
    display: block;
    width: 350px;
    height: auto;
}

.octa-footer__brand p {
    max-width: 430px;
    margin: 13px 0 0;
    color: #8fa0aa;
    font-size: 13px;
    line-height: 1.65;
}

.octa-footer__links {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    gap: 8px;
}

.octa-footer__links a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
    padding: 0 13px;
    color: #c6d0d5;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none !important;
    background: rgba(21, 35, 44, .72);
    border: 1px solid rgba(73, 101, 116, .34);
    border-radius: 10px;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.octa-footer__links a i {
    color: #7d929e;
    font-size: 12px;
}

.octa-footer__links a:hover,
.octa-footer__links a:focus-visible {
    color: #fff;
    background: #192a34;
    border-color: #3d5a69;
    transform: translateY(-1px);
}

.octa-footer__links a:hover i,
.octa-footer__links a:focus-visible i {
    color: #fff;
}

.octa-footer__bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    min-height: 66px;
    padding: 13px 0;
    border-top: 1px solid rgba(73, 101, 116, .22);
}

.octa-footer__legal {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    color: #82939c;
    font-size: 12px;
    line-height: 1.5;
}

.octa-footer__legal span:first-child {
    color: #b5c0c6;
    font-weight: 600;
}

.octa-footer__separator {
    width: 3px;
    height: 3px;
    background: #40535e;
    border-radius: 50%;
}

.octa-footer__utilities,
.octa-footer__social {
    display: flex;
    align-items: center;
}

.octa-footer__utilities {
    gap: 12px;
}

.octa-footer__social {
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.octa-footer__social li {
    margin: 0;
}

.octa-footer__social a {
    display: grid;
    width: 34px;
    height: 34px;
    place-items: center;
    color: #91a1aa;
    background: rgba(21, 35, 44, .72);
    border: 1px solid rgba(73, 101, 116, .28);
    border-radius: 10px;
    text-decoration: none !important;
    transition: color .18s ease, border-color .18s ease, background-color .18s ease, transform .18s ease;
}

.octa-footer__social a:hover,
.octa-footer__social a:focus-visible {
    color: #fff;
    background: #192a34;
    border-color: #3d5a69;
    transform: translateY(-1px);
}

.octa-footer__language .language__dropdown__select_wrapper {
    margin: 0 !important;
}

@media (max-width: 991.98px) {
    .octa-footer__main {
        align-items: flex-start;
        flex-direction: column;
        gap: 24px;
    }

    .octa-footer__links {
        justify-content: flex-start;
    }
}

@media (max-width: 767.98px) {
    .octa-footer {
        margin-top: 40px;
    }

    .octa-footer__inner {
        width: calc(100% - 24px);
    }

    .octa-footer__main {
        padding: 27px 0 23px;
    }

    .octa-footer__links {
        display: grid;
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .octa-footer__links a {
        justify-content: center;
    }

    .octa-footer__bottom {
        align-items: flex-start;
        flex-direction: column;
        gap: 14px;
        padding: 18px 0 21px;
    }

    .octa-footer__legal {
        gap: 6px 9px;
    }

    .octa-footer__utilities {
        width: 100%;
        justify-content: space-between;
    }
}

@media (max-width: 420px) {
    .octa-footer__links {
        grid-template-columns: 1fr;
    }

    .octa-footer__separator {
        display: none;
    }

    .octa-footer__legal {
        align-items: flex-start;
        flex-direction: column;
        gap: 4px;
    }
}

/*
 * Gateway card-entry frame (Billing > Payment Methods, and invoice payment).
 *
 * theme.min.css defines `.auth3d-area{border:1px solid #fff}` — a generic
 * class that's only ever actually used for the "ccframe" iframe that hosts
 * the embedded card-entry form (the real 3D Secure challenge frame uses a
 * different class, .submit-3d, and is unaffected by this override). A flat
 * white 1px border has no business sitting on top of our dark portal, so we
 * drop it here and let the iframe's own themed content (which already
 * matches --ow-* via the gateway's theme bridge) be the only visible
 * surface — no double-boxing, no stray white outline.
 */
.auth3d-area {
    width: 100% !important;
    max-width: 100%;
    border: 0 !important;
    border-radius: var(--ow-radius-sm);
    background: transparent;
    display: block;
}

@media (max-width: 520px) {
    .octa-dashboard-alert--invoice {
        grid-template-columns: auto minmax(0, 1fr);
    }

    .octa-dashboard-alert--invoice .octa-dashboard-alert__balance {
        grid-column: 1 / -1;
        grid-row: auto;
    }

    .octa-dashboard-alert--invoice .octa-dashboard-alert__actions {
        width: 100%;
        grid-column: 1 / -1;
        grid-row: auto;
        align-items: center;
        flex-direction: row;
        justify-content: space-between;
    }
}

/*
 * Legacy Shufy component bridge
 *
 * A number of WHMCS templates use theme-specific component names instead of
 * Bootstrap cards. Keep those pages on the same OctaWeb glass system rather
 * than allowing app.css's flat dark-mode surfaces to leak through.
 */
body.octa-portal-v2.not__login__page .viewticket__sidebar__data,
body.octa-portal-v2.not__login__page .view__ticket__wrapper__item,
body.octa-portal-v2.not__login__page .shadow__card,
body.octa-portal-v2.not__login__page .announcements__wrapper,
body.octa-portal-v2.not__login__page .productdetails-addons-box,
body.octa-portal-v2.not__login__page .domain__overview__item,
body.octa-portal-v2.not__login__page .panel-switch,
body.octa-portal-v2.not__login__page .main__features__box,
body.octa-portal-v2.not__login__page .featured-tld,
body.octa-portal-v2.not__login__page .kb-category,
body.octa-portal-v2.not__login__page .kb-article-item,
body.octa-portal-v2.not__login__page .upgrade .product,
body.octa-portal-v2.not__login__page div.product-details-tab-container,
body.octa-portal-v2.not__login__page .module-client-area,
body.octa-portal-v2.not__login__page .ticketfeedbackstaffcont {
    border: 1px solid var(--ow-border-soft) !important;
    border-radius: var(--ow-radius-lg) !important;
    color: var(--ow-text) !important;
    background: var(--ow-glass) !important;
    box-shadow: var(--ow-shadow) !important;
    backdrop-filter: blur(var(--ow-glass-blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--ow-glass-blur)) saturate(125%);
}

body.octa-portal-v2.not__login__page .ow-panel,
body.octa-portal-v2.not__login__page .gdpr-content,
body.octa-portal-v2.not__login__page .outofstock-inner,
body.octa-portal-v2.not__login__page .client__area__proforomance__box,
body.octa-portal-v2.not__login__page .homepage__main__announcements__box,
body.octa-portal-v2.not__login__page .homepage__main__features__box,
body.octa-portal-v2.not__login__page .homepage__main__pricing__plan__box,
body.octa-portal-v2.not__login__page .coodiv__faq__accordions__item,
body.octa-portal-v2.not__login__page .downloads__list,
body.octa-portal-v2.not__login__page .no__data__error__box {
    border: 1px solid var(--ow-border-soft) !important;
    border-radius: var(--ow-radius-lg) !important;
    color: var(--ow-text) !important;
    background: var(--ow-glass) !important;
    box-shadow: var(--ow-shadow) !important;
    backdrop-filter: blur(var(--ow-glass-blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--ow-glass-blur)) saturate(125%);
}

body.octa-portal-v2.not__login__page .ow-modal,
body.octa-portal-v2.not__login__page .email-box {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-text) !important;
    background: var(--ow-glass-soft) !important;
}

body.octa-portal-v2.not__login__page .gdpr-content .form-control,
body.octa-portal-v2.not__login__page .gdpr-content .table,
body.octa-portal-v2.not__login__page .gdpr-content .table thead th,
body.octa-portal-v2.not__login__page .gdpr-content .table tbody td,
body.octa-portal-v2.not__login__page .gdpr-content .alert {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .outofstock-section,
body.octa-portal-v2.not__login__page .advent-page .card {
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .announcements .announcement article,
body.octa-portal-v2.not__login__page .upgrade .product .header,
body.octa-portal-v2.not__login__page .upgrade .product .footer,
body.octa-portal-v2.not__login__page .featured-tld .img-container,
body.octa-portal-v2.not__login__page .featured-tld .price,
body.octa-portal-v2.not__login__page .product-to-be-upgraded,
body.octa-portal-v2.not__login__page .invoice-summary-table td.total-row {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: var(--ow-glass-highlight) !important;
}

/* View ticket */
body.octa-portal-v2.not__login__page .view__ticket__wrapper {
    padding: 5px 0 30px;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__header {
    margin-bottom: 22px !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__header h6 {
    font-size: clamp(21px, 2.1vw, 29px) !important;
    font-weight: 700 !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__header p {
    margin-top: 7px;
    font-size: 14px;
}

body.octa-portal-v2.not__login__page .view-ticket {
    display: grid;
    gap: 16px;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item {
    position: relative;
    overflow: hidden;
    margin-bottom: 0 !important;
    border-radius: var(--ow-radius-lg) !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item::before {
    position: absolute;
    top: -85px;
    right: -70px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    background: rgba(1, 12, 131, .14);
    content: "";
    pointer-events: none;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item .posted__by {
    position: relative;
    z-index: 1;
    min-height: 82px;
    padding: 18px 21px !important;
    align-items: center;
    border-bottom: 1px solid var(--ow-border-soft) !important;
    background: var(--ow-glass-highlight) !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item .posted__by__name img {
    width: 43px;
    height: 43px;
    border: 1px solid rgba(255, 255, 255, .18);
    border-radius: 13px !important;
    object-fit: cover;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item .posted__by__name h6 {
    font-size: 14px !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item .posted__by__date h6 {
    color: var(--ow-subtle) !important;
    font-size: 11px !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item .label {
    display: inline-flex;
    align-items: center;
    min-height: 24px;
    padding: 4px 9px;
    border: 1px solid rgba(102, 209, 158, .18);
    border-radius: 999px;
    color: #9ae3bd !important;
    background: rgba(102, 209, 158, .1) !important;
    font-size: 9px;
    letter-spacing: .04em;
    text-transform: uppercase;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item .ticket-reply.staff .label {
    border-color: rgba(106, 205, 230, .2);
    color: #9eddec !important;
    background: rgba(76, 173, 197, .13) !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item__message {
    position: relative;
    z-index: 1;
    padding: 24px 21px !important;
    color: var(--ow-muted) !important;
    font-size: 14px;
    line-height: 1.75;
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item__message p,
body.octa-portal-v2.not__login__page .view__ticket__wrapper__item__message li {
    color: var(--ow-muted) !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item__message .reply__ipaddress {
    border: 1px solid var(--ow-border-soft);
    color: var(--ow-subtle) !important;
    background: rgba(255, 255, 255, .025) !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item__attachments {
    position: relative;
    z-index: 1;
    padding: 17px 21px !important;
    border-top: 1px solid var(--ow-border-soft) !important;
    background: rgba(0, 0, 0, .07);
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item__attachments .attachment__list {
    margin: 10px 0 0;
    padding: 0;
    list-style: none;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item__attachments .download__attachments {
    width: auto !important;
    min-width: 120px;
    padding: 8px 11px !important;
    border: 1px solid var(--ow-border-soft);
    border-radius: 9px !important;
    color: var(--ow-muted) !important;
    background: rgba(255, 255, 255, .025) !important;
}

body.octa-portal-v2.not__login__page .view__ticket__wrapper__item__attachments .download__attachments:hover {
    border-color: var(--ow-border);
    color: #fff !important;
    background: rgba(255, 255, 255, .06) !important;
}

body.octa-portal-v2.not__login__page .viewticket__sidebar__data {
    overflow: hidden;
}

body.octa-portal-v2.not__login__page .viewticket__sidebar__data .nav-item-text {
    padding: 16px 18px !important;
    border-bottom: 1px solid var(--ow-border-soft) !important;
    color: var(--ow-text);
    background: transparent !important;
}

body.octa-portal-v2.not__login__page .viewticket__sidebar__data .nav-item-text .title {
    margin-bottom: 6px;
    color: var(--ow-subtle) !important;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: .04em;
}

body.octa-portal-v2.not__login__page .viewticket__sidebar__data .nav-item-footer {
    padding: 18px !important;
    background: rgba(0, 0, 0, .07);
}

body.octa-portal-v2.not__login__page #ticketReplyContainer {
    margin-top: 20px;
}

body.octa-portal-v2.not__login__page .md-editor,
body.octa-portal-v2.not__login__page .md-editor > .md-header,
body.octa-portal-v2.not__login__page .md-editor > .md-footer,
body.octa-portal-v2.not__login__page .custom-file-label {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: rgba(255, 255, 255, .025) !important;
}

/* Homepage and offers */
body.octa-portal-v2.not__login__page.homepage__main__stylesheets__body #main-body {
    padding-bottom: 0 !important;
}

body.octa-portal-v2.not__login__page .homepage-offers-section,
body.octa-portal-v2.not__login__page .why-choose-modern,
body.octa-portal-v2.not__login__page .reasons-love {
    color: var(--ow-text) !important;
}

body.octa-portal-v2.not__login__page .homepage-offers-section,
body.octa-portal-v2.not__login__page .why-choose-modern,
body.octa-portal-v2.not__login__page .reasons-love {
    background-color: transparent !important;
    background-image: none !important;
}

body.octa-portal-v2.not__login__page .offers-tabs,
body.octa-portal-v2.not__login__page .ho-card-dark,
body.octa-portal-v2.not__login__page .why-card,
body.octa-portal-v2.not__login__page .reasons-love .reason-card {
    border: 1px solid var(--ow-border-soft) !important;
    color: var(--ow-text) !important;
    background: var(--ow-glass) !important;
    box-shadow: var(--ow-shadow) !important;
    backdrop-filter: blur(var(--ow-glass-blur)) saturate(125%);
    -webkit-backdrop-filter: blur(var(--ow-glass-blur)) saturate(125%);
}

body.octa-portal-v2.not__login__page .ho-card-gradient {
    border-bottom: 1px solid var(--ow-border-soft) !important;
    background:
        radial-gradient(circle at 85% 15%, rgba(85, 99, 235, .32), transparent 14rem),
        rgba(1, 12, 131, .28) !important;
}

body.octa-portal-v2.not__login__page .ho-card-cta {
    border-top: 1px solid var(--ow-border-soft) !important;
    background: rgba(5, 10, 13, .26) !important;
}

body.octa-portal-v2.not__login__page .ho-cta-btn {
    border: 1px solid var(--ow-blue) !important;
    border-radius: 9px !important;
    color: #fff !important;
    background: var(--ow-blue) !important;
}

body.octa-portal-v2.not__login__page .homepage-offers-section .container,
body.octa-portal-v2.not__login__page .why-choose-modern .container,
body.octa-portal-v2.not__login__page .reasons-love .container {
    width: min(calc(100% - 24px), var(--ow-container));
    max-width: var(--ow-container);
}

body.octa-portal-v2.not__login__page .feature-item,
body.octa-portal-v2.not__login__page .bundle-items-list,
body.octa-portal-v2.not__login__page .offer-mode-display {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background: rgba(255, 255, 255, .03) !important;
}

/* Common white-background leaks from stock WHMCS components. */
body.octa-portal-v2.not__login__page .table-list > tbody > tr > td,
body.octa-portal-v2.not__login__page .dataTables_wrapper table.table-list thead th,
body.octa-portal-v2.not__login__page .domain-pricing .tld-row,
body.octa-portal-v2.not__login__page .domain-pricing .tld-pricing-header > div,
body.octa-portal-v2.not__login__page #registration .sub-heading span,
body.octa-portal-v2.not__login__page #registration .field,
body.octa-portal-v2.not__login__page #registration .form-control,
body.octa-portal-v2.not__login__page div.credit-card,
body.octa-portal-v2.not__login__page div.credit-card .card-number {
    border-color: var(--ow-border-soft) !important;
    color: var(--ow-muted) !important;
    background-color: transparent !important;
}

@media (max-width: 767.98px) {
    body.octa-portal-v2.not__login__page .view__ticket__wrapper__item .posted__by {
        align-items: flex-start;
        flex-direction: column;
        gap: 12px;
    }

    body.octa-portal-v2.not__login__page .view__ticket__wrapper__item .posted__by__date {
        padding-left: 58px;
    }
}