/*
 * ViewTVY WHMCS Client Area
 * Isolated overrides for the Twenty-One theme.
 * Original WHMCS theme files remain unchanged.
 */

:root {
    --vt-navy: #041b38;
    --vt-navy-2: #062b5d;
    --vt-blue: #0876d1;
    --vt-blue-2: #159eea;
    --vt-cyan: #38bdf8;
    --vt-pale: #eef7ff;
    --vt-border: #d6e5f4;
    --vt-text: #263f58;
    --vt-muted: #6b7f93;
    --vt-white: #ffffff;
    --vt-shadow: 0 14px 38px rgba(5, 43, 86, .11);
}

html {
    scroll-behavior: smooth;
}

body.primary-bg-color,
body {
    background: linear-gradient(180deg, #f7fbff 0, #eef5fc 420px, #f5f8fb 100%) !important;
    color: var(--vt-text);
    font-family: "Open Sans", Arial, Helvetica, sans-serif;
}

a {
    color: var(--vt-blue);
    transition: color .2s ease, background-color .2s ease, border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

a:hover {
    color: #0557a3;
    text-decoration: none;
}

/* Header and brand */
#header.header {
    background: var(--vt-navy) !important;
    background-image: linear-gradient(135deg, #03172f 0%, var(--vt-navy-2) 58%, #0758b5 100%) !important;
    border: 0;
    box-shadow: 0 8px 30px rgba(4, 34, 70, .08);
    position: relative;
    z-index: 1030;
}

#header .navbar-light {
    background: transparent !important;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    min-height: 82px;
    padding: 10px 0;
}

#header .navbar-brand {
    align-items: center;
    display: inline-flex;
    min-height: 58px;
}

#header .logo-img {
    content: url("https://www.viewtvy.com/assets/telnet/logo.png");
    display: block;
    height: auto !important;
    max-height: 58px !important;
    max-width: 210px !important;
    object-fit: contain;
    width: 210px !important;
}

#header .toolbar .nav-link,
#header .cart-btn {
    align-items: center;
    background: rgba(255, 255, 255, .10) !important;
    border: 1px solid rgba(255, 255, 255, .22) !important;
    border-radius: 10px;
    color: #fff !important;
    display: inline-flex;
    min-height: 42px;
    padding: 9px 12px;
}

#header .toolbar .nav-link:hover,
#header .cart-btn:hover {
    background: rgba(255, 255, 255, .18) !important;
    border-color: rgba(255, 255, 255, .40) !important;
    color: #fff !important;
}

#header .badge-info {
    background: var(--vt-blue-2);
    color: #fff;
}

#header .search .form-control,
#header .search .btn-default {
    background: rgba(255, 255, 255, .96);
    border-color: rgba(255, 255, 255, .30);
}

#header .navbar-toggler {
    background: rgba(255, 255, 255, .10);
    border-color: rgba(255, 255, 255, .28);
    color: #fff;
}

#header .main-navbar-wrapper {
    background: #0758b5 !important;
    background-image: linear-gradient(135deg, var(--vt-navy-2) 0%, #0758b5 58%, var(--vt-blue-2) 100%) !important;
    border: 0 !important;
    box-shadow: inset 0 1px rgba(255, 255, 255, .08);
}

#header .main-navbar-wrapper .nav-link,
#header .main-navbar-wrapper .navbar-nav > li > a {
    border-radius: 8px;
    color: #eaf7ff !important;
    font-size: 14px;
    font-weight: 600;
    margin: 5px 2px;
    padding: 10px 13px;
}

#header .main-navbar-wrapper .nav-link:hover,
#header .main-navbar-wrapper .navbar-nav > li > a:hover,
#header .main-navbar-wrapper .nav-item.active > .nav-link,
#header .main-navbar-wrapper .navbar-nav > li.active > a,
#header .main-navbar-wrapper .show > .nav-link {
    background: rgba(255, 255, 255, .15) !important;
    color: #fff !important;
}

#header .main-navbar-wrapper .dropdown-menu {
    border: 0;
    border-radius: 12px;
    box-shadow: var(--vt-shadow);
    overflow: hidden;
    padding: 8px;
}

#header .main-navbar-wrapper .dropdown-item {
    border-radius: 7px;
    color: var(--vt-text);
    padding: 9px 12px;
}

#header .main-navbar-wrapper .dropdown-item:hover {
    background: var(--vt-pale);
    color: #055bac;
}

/* Breadcrumbs and page structure */
.master-breadcrumb {
    background: #eaf5ff !important;
    border-bottom: 1px solid #cfe5f6;
    box-shadow: inset 0 1px #fff;
}

.breadcrumb {
    background: transparent;
    color: var(--vt-muted);
    margin-bottom: 0;
}

.breadcrumb-item.active,
.breadcrumb-item + .breadcrumb-item::before {
    color: #71879b;
}

.main-content {
    min-height: 520px;
    padding-bottom: 42px;
    padding-top: 30px;
}

.main-content h1,
.main-content h2,
.main-content h3,
.main-content h4,
.card-title {
    color: #063f82;
    font-weight: 700;
}

/* Cards, dashboard widgets, sidebars */
.card,
.panel,
.tile,
.client-home-cards .card,
.sidebar .list-group {
    background: var(--vt-white);
    border: 1px solid var(--vt-border) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 28px rgba(6, 51, 99, .08);
    overflow: hidden;
}

.card:hover,
.client-home-cards .card:hover,
.tile:hover {
    border-color: #aed8f5 !important;
    box-shadow: 0 15px 34px rgba(6, 62, 121, .13);
}

.card-header,
.panel-heading {
    background: linear-gradient(180deg, #f5fbff 0%, #eaf5ff 100%) !important;
    border-bottom: 1px solid #d6e9f8 !important;
    color: #063f82 !important;
    font-weight: 700;
    padding: 15px 18px;
}

.card-body,
.panel-body {
    padding: 20px;
}

.card.mw-540 {
    border-top: 5px solid var(--vt-blue-2) !important;
    box-shadow: var(--vt-shadow);
    max-width: 570px !important;
}

.card.mw-540 .card-body {
    padding: 30px;
}

.sidebar .list-group-item {
    border-color: #e5edf5;
    color: #405970;
    padding: 12px 15px;
}

.sidebar .list-group-item:hover {
    background: var(--vt-pale);
    color: #075cae;
}

.sidebar .list-group-item.active,
.list-group-item.active {
    background: linear-gradient(135deg, #0758b5, #159eea) !important;
    border-color: #0876d1 !important;
    color: #fff !important;
}

.client-home-cards .card-icon,
.tile .icon,
.status-icon {
    color: var(--vt-blue) !important;
}

/* Buttons */
.btn {
    border-radius: 9px;
    font-weight: 600;
}

.btn-primary,
.btn-success,
.btn-info,
.btn-order-now,
input[type="submit"].btn-primary {
    background: #0876d1 !important;
    background-image: linear-gradient(135deg, #0758b5 0%, #159eea 100%) !important;
    border-color: #0876d1 !important;
    box-shadow: 0 6px 15px rgba(8, 118, 209, .20);
    color: #fff !important;
}

.btn-primary:hover,
.btn-success:hover,
.btn-info:hover,
.btn-order-now:hover {
    background-image: linear-gradient(135deg, #064a96 0%, #0876d1 100%) !important;
    border-color: #065fae !important;
    box-shadow: 0 9px 20px rgba(8, 95, 174, .26);
    color: #fff !important;
    transform: translateY(-1px);
}

.btn-default,
.btn-secondary {
    background: #fff !important;
    border-color: #ccdeed !important;
    color: #33516d !important;
}

.btn-default:hover,
.btn-secondary:hover {
    background: var(--vt-pale) !important;
    border-color: #9cccef !important;
    color: #0758a8 !important;
}

/* Forms */
.form-control,
.custom-select,
.input-group-text {
    border-color: #cdddea;
    border-radius: 9px;
    min-height: 43px;
}

.form-control:focus,
.custom-select:focus {
    border-color: #43a9eb;
    box-shadow: 0 0 0 .2rem rgba(21, 158, 234, .16);
}

.input-group .form-control:not(:first-child),
.input-group .custom-select:not(:first-child) {
    border-bottom-left-radius: 0;
    border-top-left-radius: 0;
}

.input-group .form-control:not(:last-child) {
    border-bottom-right-radius: 0;
    border-top-right-radius: 0;
}

label {
    color: #314c67;
    font-weight: 600;
}

.form-check-input:checked {
    background-color: var(--vt-blue);
    border-color: var(--vt-blue);
}

/* Tables, tabs and messages */
.table {
    background: #fff;
    border-radius: 10px;
    overflow: hidden;
}

.table thead th {
    background: #eaf5ff;
    border-bottom: 1px solid #cfe2f2;
    color: #063f82;
    font-weight: 700;
}

.table td,
.table th {
    border-color: #e4edf5;
    vertical-align: middle;
}

.nav-tabs {
    border-bottom-color: #cfe0ee;
}

.nav-tabs .nav-link {
    border-radius: 9px 9px 0 0;
    color: #537087;
    font-weight: 600;
}

.nav-tabs .nav-link.active {
    border-color: #cfe0ee #cfe0ee #fff;
    color: #075cae;
}

.alert {
    border: 0;
    border-radius: 11px;
}

.alert-info {
    background: #e8f6ff;
    color: #07528f;
}

.alert-success {
    background: #e8f8f2;
    color: #176b52;
}

.badge-primary,
.badge-info {
    background: var(--vt-blue-2);
}

/* Store and product cards */
.products .row-eq-height > [class*="col-"] {
    display: flex;
    margin-bottom: 24px;
}

.products .product,
.product,
.product-details,
.pricing-table {
    background: #fff;
    border: 1px solid var(--vt-border) !important;
    border-radius: 15px !important;
    box-shadow: 0 10px 28px rgba(6, 51, 99, .09);
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
    position: relative;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    width: 100%;
}

.products .product:hover {
    border-color: #acd8f6 !important;
    box-shadow: 0 16px 36px rgba(6, 51, 99, .14);
    transform: translateY(-3px);
}

.products .product header,
.product header,
.pricing-table .pricing-title {
    background: linear-gradient(135deg, #062b5d, #0876d1) !important;
    color: #fff !important;
    font-weight: 700;
    min-height: 54px;
    padding: 14px 20px !important;
    position: relative;
}

/* Product names have their own dark text rule in the order-form stylesheet. */
#products .product > header > span,
.products .product header > span,
.product header > span[id$="-name"] {
    color: #fff !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    letter-spacing: .1px;
    text-shadow: 0 1px 2px rgba(0, 20, 48, .28);
}

.products .product .product-desc,
.product .product-desc {
    color: #405970;
    flex: 1 1 auto;
    line-height: 1.65;
    padding: 18px 20px 12px !important;
}

#products .vt-feature-list {
    display: grid;
    gap: 8px;
    list-style: none;
    margin: 0;
    padding: 0;
}

#products .vt-feature-list li,
#products .vt-feature-list .vt-feature-item {
    color: #314d68;
    display: block;
    font-size: 14px;
    line-height: 1.45;
    padding-left: 25px;
    position: relative;
}

#products .vt-feature-list li::before,
#products .vt-feature-list .vt-feature-item::before {
    align-items: center;
    background: #e7f7ef;
    border-radius: 50%;
    color: #0c8a58;
    content: "\2713";
    display: inline-flex;
    font-size: 11px;
    font-weight: 800;
    height: 18px;
    justify-content: center;
    left: 0;
    position: absolute;
    top: 1px;
    width: 18px;
}

#products .vt-delivery-note {
    border-top: 1px solid #e2ecf5;
    color: #60768a;
    display: block;
    font-size: 12px;
    line-height: 1.5;
    margin: 15px 0 0;
    padding-top: 12px;
}

#products .product > footer {
    align-items: center;
    background: #f8fbfe;
    border-top: 1px solid #e2ecf5;
    display: flex;
    justify-content: space-between;
    margin-top: auto;
    min-height: 88px;
    padding: 16px 20px !important;
}

.products .product .product-pricing,
.product .product-pricing {
    color: #063f82;
    font-weight: 700;
    line-height: 1.35;
    text-align: left !important;
}

#products .product-pricing .price {
    color: #063f82;
    display: inline-block;
    font-size: 23px !important;
    font-weight: 800;
    letter-spacing: -.35px;
    margin-bottom: 3px;
}

#products .btn-order-now {
    align-items: center;
    display: inline-flex;
    font-size: 15px;
    font-weight: 700;
    gap: 7px;
    justify-content: center;
    min-height: 44px;
    min-width: 136px;
}

#products #product2,
#products #product6,
#products #product10,
#products #product14,
#products #product20 {
    border-color: #53baf2 !important;
    box-shadow: 0 15px 38px rgba(7, 88, 181, .16);
}

#products #product2 > header::after,
#products #product6 > header::after,
#products #product10 > header::after,
#products #product14 > header::after,
#products #product20 > header::after {
    background: #fff;
    border-radius: 999px;
    color: #0758b5;
    content: "POPULAR";
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .7px;
    padding: 5px 9px;
    position: absolute;
    right: 16px;
    top: 14px;
}

/* Footer */
#footer.footer {
    background: #041b38 !important;
    background-image: linear-gradient(135deg, #031326 0%, #062b5d 100%) !important;
    border-top: 5px solid var(--vt-blue-2);
    color: #a9c8e0 !important;
    margin-top: 48px;
    padding: 34px 0 30px;
}

#footer.footer .nav-link,
#footer.footer a,
#footer.footer .btn {
    color: #d9efff !important;
}

#footer.footer a:hover,
#footer.footer .btn:hover {
    color: #fff !important;
}

#footer.footer .copyright {
    color: #83a5c1;
    font-size: 12px;
}

#footer.footer .btn {
    background: rgba(255, 255, 255, .08) !important;
    border: 1px solid rgba(255, 255, 255, .14) !important;
    border-radius: 8px;
}

.btn-return-to-admin {
    border-radius: 999px !important;
}

/* Responsive refinements */
@media (max-width: 1199.98px) {
    #header .main-navbar-wrapper .navbar-collapse {
        background: rgba(3, 27, 56, .96);
        border-radius: 12px;
        margin: 8px 0 14px;
        padding: 10px;
    }

    #header .main-navbar-wrapper .nav-link {
        margin: 2px 0;
    }
}

@media (max-width: 767.98px) {
    #header .navbar-light {
        min-height: 72px;
    }

    #header .logo-img {
        max-height: 46px !important;
        max-width: 170px !important;
        width: 170px !important;
    }

    .main-content {
        padding-top: 20px;
    }

    .card.mw-540 .card-body,
    .card-body,
    .panel-body {
        padding: 20px;
    }

    #products .product > footer {
        align-items: stretch;
        flex-direction: column;
        gap: 13px;
        min-height: 0;
    }

    #products .product-pricing {
        text-align: center !important;
    }

    #products .btn-order-now {
        width: 100%;
    }

    body > div[style*="z-index: 2000000000"] {
        transform: scale(.84) !important;
        transform-origin: right bottom !important;
    }

    #footer.footer {
        margin-top: 30px;
        text-align: center;
    }

    #footer.footer .float-lg-right {
        float: none !important;
    }
}