/* *****************************************************

    ** OCN Networks Custom Stylesheet **

    OCN Networks dark theme with orange accents
    Matching main website branding at ocnetworks.co.uk

***************************************************** */

/* ===========================
   CSS Variables - OCN Theme
   =========================== */
:root {
    --ocn-background: #0e1623;
    --ocn-background-light: #1a2332;
    --ocn-background-lighter: #1e293b;
    --ocn-foreground: #e2e8f0;
    --ocn-foreground-muted: rgba(226, 232, 240, 0.85);
    --ocn-foreground-dim: rgba(226, 232, 240, 0.6);
    --ocn-primary: #f97316;
    --ocn-primary-hover: #fb923c;
    --ocn-primary-dark: #ea580c;
    --ocn-secondary: #22c55e;
    --ocn-danger: #ef4444;
    --ocn-warning: #f59e0b;
    --ocn-info: #3b82f6;
    --ocn-border: rgba(71, 85, 105, 0.3);
    --ocn-border-light: rgba(71, 85, 105, 0.15);
    --ocn-border-primary: rgba(249, 115, 22, 0.3);
    --ocn-shadow: 0 4px 6px rgba(0, 0, 0, 0.2);
    --ocn-shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.3);
    --font-display: 'Orbitron', sans-serif;
    --font-body: 'Montserrat', sans-serif;
    --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===========================
   Global Overrides
   =========================== */
body {
    background-color: var(--ocn-background) !important;
    color: var(--ocn-foreground) !important;
    font-family: var(--font-body) !important;
}

/* Container width matching OCN main website (1600px) */
.container {
    max-width: 1600px !important;
    width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 1rem !important;
    padding-right: 1rem !important;
}

@media (min-width: 640px) {
    .container {
        padding-left: 1.5rem !important;
        padding-right: 1.5rem !important;
    }
}

@media (min-width: 1024px) {
    .container {
        padding-left: 2rem !important;
        padding-right: 2rem !important;
    }
}

section#main-body .container,
#main-body .container {
    max-width: 1600px !important;
}

.primary-bg-color {
    background-color: var(--ocn-background) !important;
}

section#header {
    background-color: var(--ocn-background-light) !important;
    border-bottom: 1px solid var(--ocn-border) !important;
}

section#main-body {
    background-color: var(--ocn-background) !important;
    color: var(--ocn-foreground) !important;
}

section#footer {
    background-color: var(--ocn-background-light) !important;
    border-top: 1px solid var(--ocn-border) !important;
    color: var(--ocn-foreground-muted) !important;
}

/* ===========================
   Typography
   =========================== */
h1, h2, h3, h4, h5, h6 {
    color: var(--ocn-foreground) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
}

p, span, div, td, th, li, label {
    color: var(--ocn-foreground-muted) !important;
    font-size: 15px !important;
    line-height: 1.6 !important;
}

/* Improve body text readability */
body {
    font-size: 15px !important;
    line-height: 1.6 !important;
    -webkit-font-smoothing: antialiased !important;
    -moz-osx-font-smoothing: grayscale !important;
}

/* Specific text elements */
.panel-body p,
.main-content p,
section#main-body p {
    font-size: 15px !important;
    line-height: 1.6 !important;
    color: var(--ocn-foreground-muted) !important;
}

/* Small text */
small, .text-small, .help-block {
    font-size: 13px !important;
    color: var(--ocn-foreground-dim) !important;
}

a {
    color: var(--ocn-primary) !important;
    transition: var(--transition);
}

a:hover, a:focus {
    color: var(--ocn-primary-hover) !important;
    text-decoration: none !important;
}

/* ===========================
   Panels & Cards
   =========================== */
.panel, .panel-default {
    background-color: var(--ocn-background-light) !important;
    border: 1px solid var(--ocn-border) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--ocn-shadow) !important;
}

.panel-heading, .panel-title {
    background-color: var(--ocn-background-lighter) !important;
    border-bottom: 1px solid var(--ocn-border) !important;
    color: var(--ocn-foreground) !important;
    font-family: var(--font-display) !important;
}

.panel-body {
    background-color: transparent !important;
    color: var(--ocn-foreground-muted) !important;
}

.panel-footer {
    background-color: var(--ocn-background-lighter) !important;
    border-top: 1px solid var(--ocn-border) !important;
}

/* ===========================
   Buttons
   =========================== */
.btn-primary, .btn-success {
    background: linear-gradient(to right, var(--ocn-primary), var(--ocn-primary-dark)) !important;
    border: none !important;
    color: white !important;
    box-shadow: 0 4px 6px rgba(249, 115, 22, 0.3) !important;
    font-family: var(--font-body) !important;
    font-weight: 500 !important;
    transition: var(--transition) !important;
}

.btn-primary:hover, .btn-success:hover,
.btn-primary:focus, .btn-success:focus {
    background: linear-gradient(to right, var(--ocn-primary-dark), #dc2626) !important;
    box-shadow: 0 6px 12px rgba(249, 115, 22, 0.4) !important;
    transform: translateY(-1px) !important;
    color: white !important;
}

.btn-default, .btn-secondary {
    background-color: rgba(148, 163, 184, 0.1) !important;
    border: 1px solid var(--ocn-border) !important;
    color: var(--ocn-foreground-muted) !important;
}

.btn-default:hover, .btn-secondary:hover,
.btn-default:focus, .btn-secondary:focus {
    background-color: rgba(148, 163, 184, 0.2) !important;
    border-color: rgba(148, 163, 184, 0.5) !important;
    color: white !important;
}

.btn-danger {
    background: linear-gradient(to right, var(--ocn-danger), #b91c1c) !important;
    border: none !important;
    color: white !important;
}

.btn-danger:hover, .btn-danger:focus {
    background: linear-gradient(to right, #b91c1c, #991b1b) !important;
    color: white !important;
}

/* ===========================
   Forms
   =========================== */
.form-control {
    background-color: var(--ocn-background-lighter) !important;
    border: 1px solid var(--ocn-border) !important;
    color: var(--ocn-foreground) !important;
    border-radius: 0.5rem !important;
}

.form-control:focus,
.form-control:active {
    background-color: var(--ocn-background-light) !important;
    border-color: var(--ocn-primary) !important;
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.1) !important;
    color: var(--ocn-foreground) !important;
}

input:focus,
input:active,
textarea:focus,
textarea:active,
select:focus,
select:active {
    background-color: var(--ocn-background-light) !important;
    border-color: var(--ocn-primary) !important;
    color: var(--ocn-foreground) !important;
}

.form-control::placeholder {
    color: var(--ocn-foreground-dim) !important;
}

/* ===========================
   Tables
   =========================== */
.table {
    color: var(--ocn-foreground-muted) !important;
    border-color: var(--ocn-border) !important;
}

.table thead th {
    background-color: rgba(249, 115, 22, 0.1) !important;
    border-color: var(--ocn-border-primary) !important;
    color: var(--ocn-primary) !important;
    font-family: var(--font-display) !important;
    font-weight: 600 !important;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(30, 41, 59, 0.3) !important;
}

.table tbody tr:hover {
    background-color: rgba(249, 115, 22, 0.05) !important;
}

/* ===========================
   List Groups
   =========================== */
.list-group-item {
    background-color: transparent !important;
    border-color: var(--ocn-border) !important;
    color: var(--ocn-foreground-muted) !important;
    transition: var(--transition) !important;
}

.list-group-item:hover {
    background-color: rgba(71, 85, 105, 0.15) !important;
    border-color: rgba(71, 85, 105, 0.3) !important;
    color: var(--ocn-foreground) !important;
}

.list-group-item.active {
    background-color: rgba(249, 115, 22, 0.15) !important;
    border-color: var(--ocn-border-primary) !important;
    color: var(--ocn-primary) !important;
}

/* ===========================
   Alerts
   =========================== */
.alert {
    border-radius: 0.75rem !important;
}

.alert-info {
    background-color: rgba(59, 130, 246, 0.1) !important;
    color: #60a5fa !important;
    border-color: rgba(59, 130, 246, 0.2) !important;
}

.alert-success {
    background-color: rgba(34, 197, 94, 0.1) !important;
    color: #4ade80 !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
}

.alert-warning {
    background-color: rgba(249, 115, 22, 0.1) !important;
    color: #fb923c !important;
    border-color: var(--ocn-border-primary) !important;
}

.alert-danger {
    background-color: rgba(239, 68, 68, 0.1) !important;
    color: #f87171 !important;
    border-color: rgba(239, 68, 68, 0.2) !important;
}

/* ===========================
   Badges & Labels
   =========================== */
.badge, .label {
    font-family: var(--font-body) !important;
    font-weight: 600 !important;
}

.badge-primary, .label-primary {
    background-color: var(--ocn-primary) !important;
}

.badge-success, .label-success {
    background-color: var(--ocn-secondary) !important;
}

.badge-danger, .label-danger {
    background-color: var(--ocn-danger) !important;
}

.badge-warning, .label-warning {
    background-color: var(--ocn-warning) !important;
}

.badge-info, .label-info {
    background-color: var(--ocn-info) !important;
}

/* ===========================
   Pagination
   =========================== */
.pagination > li > a,
.pagination > li > span {
    background-color: var(--ocn-background-light) !important;
    border-color: var(--ocn-border) !important;
    color: var(--ocn-foreground-muted) !important;
}

.pagination > li > a:hover,
.pagination > li > span:hover {
    background-color: var(--ocn-background-lighter) !important;
    border-color: var(--ocn-border) !important;
    color: var(--ocn-primary) !important;
}

.pagination > .active > a,
.pagination > .active > span {
    background-color: var(--ocn-primary) !important;
    border-color: var(--ocn-primary) !important;
    color: white !important;
}

/* ===========================
   Modals
   =========================== */
.modal-content {
    background-color: var(--ocn-background-light) !important;
    border: 1px solid var(--ocn-border-primary) !important;
    border-radius: 1rem !important;
    box-shadow: var(--ocn-shadow-lg) !important;
}

.modal-header {
    border-bottom: 1px solid var(--ocn-border) !important;
    background-color: rgba(249, 115, 22, 0.05) !important;
}

.modal-title {
    color: var(--ocn-primary) !important;
    font-family: var(--font-display) !important;
}

.modal-body {
    color: var(--ocn-foreground-muted) !important;
}

.modal-footer {
    border-top: 1px solid var(--ocn-border) !important;
    background-color: transparent !important;
}

/* Fix close button (X) visibility */
.close,
button.close,
.modal-header .close {
    color: var(--ocn-foreground) !important;
    opacity: 0.7 !important;
    text-shadow: none !important;
    font-size: 1.5rem !important;
}

.close:hover,
button.close:hover {
    color: var(--ocn-primary) !important;
    opacity: 1 !important;
}

/* Ensure remove item buttons are visible in cart */
.btn-link.btn-xs,
a.btn-link[data-toggle="modal"] {
    color: var(--ocn-primary) !important;
    opacity: 1 !important;
}

.btn-link.btn-xs:hover {
    color: #ea580c !important;
}

/* ===========================
   Headers & Titles
   =========================== */
div.header-lined h1 {
    color: var(--ocn-primary) !important;
    border-bottom-color: var(--ocn-border) !important;
    font-family: var(--font-display) !important;
}

/* ===========================
   Miscellaneous
   =========================== */
.well {
    background-color: var(--ocn-background-light) !important;
    border: 1px solid var(--ocn-border) !important;
    border-radius: 0.75rem !important;
}

hr {
    border-color: var(--ocn-border) !important;
}

.text-muted {
    color: var(--ocn-foreground-dim) !important;
}

/* ===========================
   Navigation Bar Styling
   =========================== */
.navbar-main {
    background-color: transparent !important;
    border: none !important;
    margin-top: 2rem !important;
    padding-top: 1rem !important;
    padding-bottom: 1rem !important;
    font-size: 16px !important;
}

.navbar-main li.account {
    background-color: transparent !important;
}

.navbar-main .navbar-nav > li > a {
    color: var(--ocn-foreground) !important;
    font-size: 16px !important;
    font-weight: 600 !important;
    font-family: var(--font-body) !important;
    padding: 0.75rem 1.25rem !important;
    border-radius: 0.5rem !important;
    transition: all 0.3s ease !important;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus {
    color: var(--ocn-primary) !important;
    background-color: rgba(249, 115, 22, 0.1) !important;
}

.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus {
    color: var(--ocn-primary) !important;
    background-color: rgba(249, 115, 22, 0.15) !important;
}

.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: var(--ocn-primary) !important;
    background-color: rgba(249, 115, 22, 0.1) !important;
}

section#main-menu {
    background-color: transparent !important;
    padding-top: 1.5rem !important;
}

/* ===========================
   Top Navigation (Hide if using iframe header)
   =========================== */
section#header .top-nav {
    display: none !important;
}

/* ===========================
   Breadcrumbs
   =========================== */
.breadcrumb {
    background-color: transparent !important;
    color: var(--ocn-foreground-dim) !important;
}

.breadcrumb > li + li:before {
    color: var(--ocn-foreground-dim) !important;
}

.breadcrumb > li > a {
    color: var(--ocn-primary) !important;
}

/* ===========================
   Dropdown Menus
   =========================== */
.dropdown-menu {
    background-color: var(--ocn-background-light) !important;
    border: 1px solid var(--ocn-border-primary) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--ocn-shadow-lg) !important;
}

.dropdown-menu > li > a {
    color: var(--ocn-foreground-muted) !important;
}

.dropdown-menu > li > a:hover,
.dropdown-menu > li > a:focus {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: var(--ocn-primary) !important;
}

/* ===========================
   Custom Scrollbar (Matching Main Website)
   =========================== */
::-webkit-scrollbar {
    width: 16px;
}

::-webkit-scrollbar-track {
    background: linear-gradient(
        180deg,
        rgba(14, 22, 35, 0.9) 0%,
        rgba(30, 41, 59, 0.5) 50%,
        rgba(14, 22, 35, 0.9) 100%
    );
    border-left: 1px solid rgba(249, 115, 22, 0.15);
}

::-webkit-scrollbar-thumb {
    background: linear-gradient(
        180deg,
        #f97316 0%,
        #ea580c 20%,
        #dc2626 40%,
        #c026d3 60%,
        #9333ea 80%,
        #7c3aed 100%
    );
    border-radius: 12px;
    border: 3px solid #0e1623;
    box-shadow: 
        0 0 15px rgba(249, 115, 22, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(
        180deg,
        #fb923c 0%,
        #f97316 20%,
        #ef4444 40%,
        #d946ef 60%,
        #a855f7 80%,
        #8b5cf6 100%
    );
    box-shadow: 
        0 0 25px rgba(249, 115, 22, 0.7),
        0 0 40px rgba(168, 85, 247, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: scaleX(1.05);
}

::-webkit-scrollbar-thumb:active {
    background: linear-gradient(
        180deg,
        #fdba74 0%,
        #fb923c 20%,
        #f87171 40%,
        #e879f9 60%,
        #c084fc 80%,
        #a78bfa 100%
    );
    box-shadow: 
        0 0 35px rgba(249, 115, 22, 1),
        0 0 50px rgba(168, 85, 247, 0.6),
        inset 0 2px 4px rgba(0, 0, 0, 0.3);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: #f97316 #0e1623;
}

/* ===========================
   Tiles
   =========================== */
.tiles .tile {
    background-color: var(--ocn-background-light) !important;
    border-right: 1px solid var(--ocn-border-primary) !important;
    color: var(--ocn-foreground) !important;
}

/* ===========================
   Marketing Email Opt-in
   =========================== */
.marketing-email-optin {
    background-color: var(--ocn-background-light) !important;
    border: 1px solid var(--ocn-border-primary) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--ocn-shadow) !important;
}

/* ===========================
   PayPal Payment Form
   =========================== */
#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields {
    background-color: var(--ocn-background-light) !important;
    border: 1px solid var(--ocn-border-primary) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--ocn-shadow) !important;
}

#frmCheckout.paypal_ppcpv-payment-form #creditCardInputFields ul,
#frmPayment.paypal_ppcpv-payment-form .paymethod-info:not([data-paymethod-id]) {
    background-color: var(--ocn-background-lighter) !important;
    border: 1px solid var(--ocn-border-primary) !important;
    border-radius: 0.75rem !important;
    box-shadow: var(--ocn-shadow) !important;
}

.dropdown-menu > .active > a {
    background-color: rgba(249, 115, 22, 0.15) !important;
    color: var(--ocn-primary) !important;
}

/* ===========================
   Product Details & Tabs
   =========================== */
div.product-details div.product-icon {
    background-color: var(--ocn-background-lighter) !important;
    border: 1px solid var(--ocn-border) !important;
    color: var(--ocn-primary) !important;
}

div.product-details-tab-container {
    background-color: var(--ocn-background-light) !important;
    border-color: var(--ocn-border) !important;
}

.nav-tabs {
    border-bottom: 1px solid var(--ocn-border) !important;
}

.nav-tabs > li > a {
    color: var(--ocn-foreground-muted) !important;
    border: 1px solid transparent !important;
}

.nav-tabs > li > a:hover {
    background-color: var(--ocn-background-lighter) !important;
    border-color: var(--ocn-border) !important;
    color: var(--ocn-foreground) !important;
}

.nav-tabs > li.active > a,
.nav-tabs > li.active > a:focus,
.nav-tabs > li.active > a:hover {
    color: var(--ocn-primary) !important;
    cursor: default !important;
    background-color: var(--ocn-background-light) !important;
    border: 1px solid var(--ocn-border) !important;
    border-bottom-color: transparent !important;
}