/* =========================================================================
   okiu.ir-inspired theme for WHMCS "six" template
   Dark, ops/infra aesthetic — mint-teal accent, Archivo/Inter Tight/JetBrains Mono
   ========================================================================= */

:root {
    --okiu-ink: #080B12;
    --okiu-slate: #131A27;
    --okiu-slate-light: #1B2333;
    --okiu-paper: #E8EDF6;
    --okiu-mute: #93A0B8;
    --okiu-signal: #35E6C0;
    --okiu-signal-deep: #0E7F6B;
    --okiu-signal-bright: #4CF0CE;
    --okiu-beam: #6E8DFF;
    --okiu-amber: #FFB454;
    --okiu-line: rgba(232, 237, 246, 0.10);
    --okiu-display: 'Archivo', system-ui, sans-serif;
    --okiu-body: 'Inter Tight', system-ui, -apple-system, sans-serif;
    --okiu-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
}

html, body {
    background: var(--okiu-ink) !important;
    color: var(--okiu-paper);
    font-family: var(--okiu-body);
}

h1, h2, h3, h4, h5, h6,
.panel-title, .page-title, .navbar-brand {
    font-family: var(--okiu-display) !important;
    color: var(--okiu-paper) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

a { color: var(--okiu-signal); }
a:hover, a:focus { color: var(--okiu-signal-bright); }

code, .label-mono, .text-mono, .invoice-num, .order-num {
    font-family: var(--okiu-mono) !important;
}

/* ---------- Top header / navbar ---------- */
#header,
.navbar,
.navbar-default {
    background: var(--okiu-ink) !important;
    border-bottom: 1px solid var(--okiu-line);
}

#header .top-nav > li > a,
.navbar-default .navbar-nav > li > a {
    color: var(--okiu-mute) !important;
    font-family: var(--okiu-mono);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

#header .top-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:hover {
    color: var(--okiu-signal) !important;
}

.navbar-brand, #header .logo {
    font-family: var(--okiu-display) !important;
    font-weight: 800;
    color: var(--okiu-paper) !important;
}

/* ---------- Primary navigation bar (secondary menu) ---------- */
#primary-nav,
.navbar-inverse {
    background: var(--okiu-slate) !important;
    border-bottom: 1px solid var(--okiu-line);
}

#primary-nav .navbar-nav > li > a {
    color: var(--okiu-paper) !important;
    font-family: var(--okiu-body);
    font-weight: 500;
}

#primary-nav .navbar-nav > li > a:hover,
#primary-nav .navbar-nav > .active > a {
    color: var(--okiu-signal) !important;
    background: transparent !important;
}

/* ---------- Buttons ---------- */
.btn-primary,
.btn-success,
#header .btn-cart {
    background: var(--okiu-signal) !important;
    border-color: var(--okiu-signal) !important;
    color: var(--okiu-ink) !important;
    font-family: var(--okiu-mono);
    font-weight: 600;
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.03em;
    border-radius: 8px;
    transition: background 0.15s var(--okiu-ease, ease), transform 0.15s ease;
}

.btn-primary:hover,
.btn-success:hover,
#header .btn-cart:hover {
    background: var(--okiu-signal-bright) !important;
    border-color: var(--okiu-signal-bright) !important;
    color: var(--okiu-ink) !important;
    transform: translateY(-1px);
}

.btn-default {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    color: var(--okiu-paper) !important;
    border-radius: 8px;
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.03em;
}

.btn-default:hover {
    border-color: var(--okiu-signal) !important;
    color: var(--okiu-signal) !important;
}

/* ---------- Panels / cards ---------- */
.panel,
.card,
.list-group-item,
#content .panel-default {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 14px !important;
    color: var(--okiu-paper);
}

.panel-heading {
    background: var(--okiu-slate-light) !important;
    border-bottom: 1px solid var(--okiu-line) !important;
    border-radius: 14px 14px 0 0 !important;
    color: var(--okiu-paper) !important;
    font-family: var(--okiu-display);
}

.panel-footer {
    background: var(--okiu-slate) !important;
    border-top: 1px solid var(--okiu-line) !important;
}

/* Pricing / product cards */
.pricing-table,
.order-pkg-list li,
.product-column {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 16px !important;
}

/* ---------- Tables ---------- */
.table {
    color: var(--okiu-paper);
}
.table > thead > tr > th {
    border-bottom: 1px solid var(--okiu-line);
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    font-size: 11px;
    color: var(--okiu-mute);
}
.table > tbody > tr > td,
.table > tbody > tr > th {
    border-top: 1px solid var(--okiu-line);
}
.table-striped > tbody > tr:nth-of-type(odd) {
    background-color: rgba(255,255,255,0.02);
}

/* ---------- Fix: services/products list rendered white-on-light ----------
   all.min.css hard-codes a white background on `.table-list` header + body
   cells, which on this dark theme washed out the My Products & Services table
   (light text on a white panel). Force the cells transparent so the dark
   section shows through, matching the rest of the theme. */
table.table-list thead th,
.table-list > thead > tr > th {
    background-color: transparent !important;
    color: var(--okiu-mute) !important;
}
.table-list > tbody > tr > td,
table.table-list > tbody > tr > td {
    background-color: transparent !important;
    color: var(--okiu-paper);
    border-top: 1px solid var(--okiu-line);
}
.table-list > tbody > tr:nth-of-type(2n+1) > td {
    background-color: rgba(255,255,255,0.02) !important;
}
.table-list > tbody > tr:hover > td {
    background-color: rgba(53, 230, 192, 0.06) !important;
}
/* Status pills were white boxes; give them theme-consistent dark chips */
.table-list .label.status {
    background-color: var(--okiu-slate-light) !important;
    border: 1px solid var(--okiu-line);
}

/* ---------- Forms ---------- */
.form-control,
input[type="text"], input[type="email"], input[type="password"], textarea, select {
    background: var(--okiu-ink) !important;
    border: 1px solid var(--okiu-line) !important;
    color: var(--okiu-paper) !important;
    border-radius: 8px !important;
}
.form-control:focus {
    border-color: var(--okiu-signal) !important;
    box-shadow: 0 0 0 3px rgba(53, 230, 192, 0.15) !important;
}
::placeholder { color: var(--okiu-mute) !important; opacity: 0.7; }

/* ---------- Page background / containers ---------- */
.outer-wrapper,
.inner-wrapper,
#main-body,
.col-xs-12.main-content,
body {
    background: var(--okiu-ink) !important;
}

#content, .content-panel { color: var(--okiu-paper); }

/* ---------- Homepage hero ---------- */
.okiu-hero {
    background:
        radial-gradient(ellipse 900px 500px at 15% -10%, rgba(53,230,192,0.10), transparent 60%),
        radial-gradient(ellipse 700px 500px at 90% 10%, rgba(110,141,255,0.08), transparent 60%),
        var(--okiu-ink) !important;
    padding: 72px 0 56px;
    border-bottom: 1px solid var(--okiu-line);
}

.okiu-hero-grid {
    display: flex;
    gap: 48px;
    align-items: flex-start;
    flex-wrap: wrap;
}

.okiu-hero-copy { flex: 1 1 460px; min-width: 320px; text-align: left; }

.okiu-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 6px 14px;
    border: 1px solid var(--okiu-line);
    border-radius: 999px;
    font-family: var(--okiu-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okiu-mute);
    margin-bottom: 22px;
}

.okiu-pill-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--okiu-signal);
    display: inline-block;
    box-shadow: 0 0 8px var(--okiu-signal);
}

.okiu-hero-title {
    font-family: var(--okiu-display) !important;
    font-weight: 800 !important;
    font-size: clamp(32px, 4.2vw, 52px) !important;
    line-height: 1.08 !important;
    color: var(--okiu-paper) !important;
    margin: 0 0 22px 0 !important;
}

.okiu-accent-signal { color: var(--okiu-signal); }
.okiu-accent-beam { color: var(--okiu-beam); }

.okiu-hero-sub {
    font-family: var(--okiu-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--okiu-mute);
    max-width: 520px;
    margin-bottom: 30px;
}

.okiu-hero-actions { display: flex; gap: 14px; flex-wrap: wrap; }
.okiu-hero-actions .btn { margin: 0 !important; }

.okiu-hero-card {
    flex: 0 1 340px;
    min-width: 280px;
    background: var(--okiu-slate);
    border: 1px solid var(--okiu-line);
    border-radius: 16px;
    padding: 20px 22px;
}

.okiu-hero-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    font-family: var(--okiu-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--okiu-mute);
    padding-bottom: 14px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--okiu-line);
}

.okiu-hero-stat {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 14px 0;
    border-bottom: 1px solid var(--okiu-line);
}
.okiu-hero-stat:last-child { border-bottom: none; }

.okiu-stat-label {
    font-family: var(--okiu-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--okiu-mute);
}

.okiu-stat-value {
    text-align: right;
    font-family: var(--okiu-display);
    font-weight: 700;
    color: var(--okiu-paper);
    font-size: 14px;
}
.okiu-stat-value small {
    display: block;
    font-family: var(--okiu-mono);
    font-weight: 400;
    text-transform: uppercase;
    color: var(--okiu-signal);
    font-size: 9.5px;
    letter-spacing: 0.04em;
    margin-top: 2px;
}

/* ---------- Homepage shortcuts (Order/Payment/Support) ---------- */
.home-shortcuts {
    background: var(--okiu-ink) !important;
    padding: 40px 0 60px;
}
.home-shortcuts .lead {
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.06em;
    color: var(--okiu-mute) !important;
}
.home-shortcuts ul { display: flex; gap: 18px; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; }
.home-shortcuts ul li { flex: 1 1 200px; }
.home-shortcuts ul li a {
    display: block;
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 14px;
    padding: 26px 22px;
    text-align: center;
    color: var(--okiu-paper) !important;
    transition: border-color 0.15s ease, transform 0.15s ease;
}
.home-shortcuts ul li a:hover {
    border-color: var(--okiu-signal) !important;
    transform: translateY(-3px);
}
.home-shortcuts ul li a i {
    font-size: 26px;
    color: var(--okiu-signal);
    margin-bottom: 12px;
    display: block;
}
.home-shortcuts ul li a p {
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.04em;
    margin: 0;
}
.home-shortcuts ul li a p span { color: var(--okiu-signal); }

@media (max-width: 767px) {
    .okiu-hero-grid { flex-direction: column; }
    .okiu-hero-copy, .okiu-hero-card { text-align: left; }
}

/* ---------- Cart / cart button ---------- */
.primary-action > a.btn,
#header .primary-action .btn {
    background: var(--okiu-signal) !important;
    border-color: var(--okiu-signal) !important;
    color: var(--okiu-ink) !important;
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.primary-action > a.btn:hover { background: var(--okiu-signal-bright) !important; }

/* ---------- Domain selection card (cart step 1) ---------- */
.domain-selection-options,
.domain-selection-options .well,
.w-domain-input-group,
.domain-input-group {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    color: var(--okiu-paper) !important;
    border-radius: 14px !important;
}
.domain-selection-options input[type="text"] {
    background: var(--okiu-ink) !important;
    color: var(--okiu-paper) !important;
    border: 1px solid var(--okiu-line) !important;
}

/* ---------- Ensure full-height page so footer doesn't leave a dead gap ---------- */
html, body { min-height: 100%; }
.outer-wrapper { display: flex; flex-direction: column; min-height: 100vh; }
#main-body { flex: 1 0 auto; }
#footer, .footer { flex-shrink: 0; }

/* Subtle background texture (kept as a fallback for very short pages) */
body {
    background-image:
        radial-gradient(rgba(232,237,246,0.035) 1px, transparent 1px) !important;
    background-size: 28px 28px !important;
    background-position: 0 0 !important;
}

/* ---------- Homepage "Three things that actually matter" section ---------- */
.okiu-features {
    background: var(--okiu-ink) !important;
    padding: 30px 0 70px;
    text-align: left;
}
.okiu-section-eyebrow {
    font-family: var(--okiu-mono);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--okiu-signal);
    margin-bottom: 16px;
}
.okiu-section-eyebrow-center { text-align: center; }
.okiu-features-title {
    font-family: var(--okiu-display) !important;
    font-weight: 800 !important;
    font-size: clamp(26px, 3vw, 36px) !important;
    color: var(--okiu-paper) !important;
    max-width: 640px;
    margin: 0 0 16px 0 !important;
}
.okiu-features-lede {
    color: var(--okiu-mute);
    font-size: 15px;
    line-height: 1.6;
    max-width: 560px;
    margin: 0 0 50px 0;
}

.okiu-features-list {
    border-top: 1px solid var(--okiu-line);
}
.okiu-feature-row {
    display: flex;
    gap: 32px;
    padding: 38px 0;
    border-bottom: 1px solid var(--okiu-line);
}
.okiu-feature-num {
    font-family: var(--okiu-mono);
    font-size: 13px;
    color: var(--okiu-mute);
    flex: 0 0 auto;
    padding-top: 3px;
}
.okiu-feature-body { flex: 1; max-width: 680px; }
.okiu-feature-body h3 {
    font-family: var(--okiu-display) !important;
    font-size: 19px !important;
    font-weight: 700 !important;
    color: var(--okiu-paper) !important;
    margin: 0 0 10px 0 !important;
}
.okiu-feature-body p {
    font-family: var(--okiu-body);
    font-size: 14.5px;
    line-height: 1.65;
    color: var(--okiu-mute);
    margin: 0 0 16px 0;
}
.okiu-feature-body ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
}
.okiu-feature-body ul li {
    font-family: var(--okiu-mono);
    font-size: 12px;
    color: var(--okiu-signal);
    position: relative;
    padding-left: 14px;
}
.okiu-feature-body ul li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 6px;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: var(--okiu-signal);
}

@media (max-width: 640px) {
    .okiu-feature-row { flex-direction: column; gap: 10px; }
}

/* ---------- Homepage closing CTA band ---------- */
.okiu-cta-band {
    background: linear-gradient(180deg, var(--okiu-ink), var(--okiu-slate)) !important;
    border-top: 1px solid var(--okiu-line);
    padding: 60px 0 70px;
    text-align: center;
}
.okiu-cta-band h2 {
    font-family: var(--okiu-display) !important;
    font-weight: 800 !important;
    font-size: clamp(24px, 3vw, 32px) !important;
    color: var(--okiu-paper) !important;
    margin: 0 0 14px 0 !important;
}
.okiu-cta-band p {
    color: var(--okiu-mute);
    max-width: 480px;
    margin: 0 auto 28px;
    font-size: 15px;
}
.okiu-cta-band .btn { display: inline-block; }

/* ---------- Store product cards ---------- */
.product {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 14px !important;
    color: var(--okiu-paper) !important;
    overflow: hidden;
}
.product header {
    background: var(--okiu-slate-light) !important;
    color: var(--okiu-paper) !important;
    border-bottom: 1px solid var(--okiu-line) !important;
}
.product header span, .product header #product1-name {
    color: var(--okiu-paper) !important;
    font-family: var(--okiu-display);
}
.product-desc { color: var(--okiu-mute) !important; }
.product-pricing { color: var(--okiu-paper) !important; }

/* ---------- Register page section dividers + mailing-list box ---------- */
.sub-heading {
    background: transparent !important;
    border-bottom: 1px solid var(--okiu-line) !important;
}
.sub-heading span {
    background: var(--okiu-ink) !important;
    color: var(--okiu-signal) !important;
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    font-size: 12px;
    letter-spacing: 0.05em;
}
.marketing-email-optin {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 12px !important;
    color: var(--okiu-paper) !important;
    padding: 16px 20px;
}
.marketing-email-optin h4 { color: var(--okiu-paper) !important; }
.marketing-email-optin p { color: var(--okiu-mute) !important; }

/* ---------- Support ticket markdown editor + captcha ---------- */
.markdown-editor,
.CodeMirror,
.editor-toolbar {
    background: var(--okiu-ink) !important;
    color: var(--okiu-paper) !important;
    border: 1px solid var(--okiu-line) !important;
}
.CodeMirror-cursor { border-left-color: var(--okiu-paper) !important; }
.editor-toolbar a { color: var(--okiu-mute) !important; }
.editor-toolbar a:hover, .editor-toolbar a.active {
    background: var(--okiu-slate) !important;
    color: var(--okiu-signal) !important;
}
.editor-statusbar { color: var(--okiu-mute) !important; }
.CodeMirror-placeholder { color: var(--okiu-mute) !important; }

.captchaimage, #default-captcha-domainchecker {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 8px;
    padding: 4px;
}

/* ---------- Labels / badges / status ---------- */
.label-success, .label-primary { background: var(--okiu-signal-deep) !important; color: #fff !important; }
.label-danger { background: #E85D5D !important; }
.label-warning { background: var(--okiu-amber) !important; color: var(--okiu-ink) !important; }
.label-info { background: var(--okiu-beam) !important; }

/* =========================================================================
   Order / cart flow polish pass
   ========================================================================= */

/* Sidebar: shrink oversized empty panels, tighten padding */
.cart-sidebar .panel-heading.card-header {
    padding: 12px 16px !important;
}
.cart-sidebar .panel-title {
    font-size: 11px !important;
}
.cart-sidebar .list-group-item {
    padding: 10px 16px !important;
    font-size: 13px;
}
.cart-sidebar .panel.card.card-sidebar {
    margin-bottom: 14px !important;
}

/* Promo code input icon — position inline instead of floating loose above the field */
.form-group.prepend-icon {
    position: relative;
}
.form-group.prepend-icon .field-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--okiu-mute);
    font-size: 13px;
    z-index: 2;
    margin: 0;
    pointer-events: none;
}
.form-group.prepend-icon .field.form-control {
    padding-left: 38px !important;
}

/* Order summary: consistent heading scale + tighter row layout */
.order-summary h2.font-size-30 {
    font-size: 20px !important;
    font-family: var(--okiu-display) !important;
    font-weight: 700 !important;
    margin-bottom: 18px !important;
    padding-bottom: 14px;
    border-bottom: 1px solid var(--okiu-line);
}

/* Continue Shopping link -> a real secondary button, not a lone hyperlink */
.btn-continue-shopping {
    display: inline-block;
    padding: 9px 16px !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 8px;
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    font-size: 11px !important;
    letter-spacing: 0.03em;
    color: var(--okiu-mute) !important;
    text-decoration: none !important;
    margin-top: 10px;
}
.btn-continue-shopping:hover {
    border-color: var(--okiu-signal) !important;
    color: var(--okiu-signal) !important;
}

/* Give the whole order form more breathing room on wide viewports instead
   of everything hugging the left edge */
#order-standard_cart .cart-body {
    max-width: 900px;
}

/* =========================================================================
   Order Form (standard_cart-based "okiu" order form) specific overrides
   NOTE: WHMCS resolves order-form assetPath() to the active CLIENT theme
   directory, not templates/orderforms/<name>/css/ — so these rules must
   live here, in the client theme's custom.css, to actually apply.
   ========================================================================= */

#order-standard_cart .btn-order-now, #btnCompleteOrder {
    background: var(--okiu-signal) !important;
    border-color: var(--okiu-signal) !important;
    color: var(--okiu-ink) !important;
}
.already-registered {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 14px !important;
    padding: 18px 22px;
    color: var(--okiu-mute) !important;
}
.summary, .order-summary, #cartSummary, .cart-summary, .panel.summary,
.summary-container {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-radius: 14px !important;
    color: var(--okiu-paper) !important;
}
/* Review & Checkout (standard_cart order form): all.min.css paints these
   blocks white, washing them out on the dark theme. Match theme surfaces. */
#order-standard_cart .view-cart-items .item,
#order-standard_cart .view-cart-promotion-code,
#order-standard_cart .mc-promo,
#order-standard_cart .products .product,
#order-standard_cart .account-select-container div.account,
#order-standard_cart .account-select-container div.account.active {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    color: var(--okiu-paper) !important;
}
#order-standard_cart .field,
#order-standard_cart .form-control {
    background: var(--okiu-ink) !important;
    border: 1px solid var(--okiu-line) !important;
    color: var(--okiu-paper) !important;
}
.summary-container .cart-cycle,
.summary-container .label,
.summary-container td,
.summary-container li,
.summary-container span {
    color: var(--okiu-paper);
}
.order-total, .total-due, .summary-total {
    color: var(--okiu-signal) !important;
    font-family: var(--okiu-display);
    font-weight: 700;
}
.alert-info {
    background: rgba(110, 141, 255, 0.10) !important;
    border: 1px solid rgba(110, 141, 255, 0.3) !important;
    color: var(--okiu-beam) !important;
}

/* nav-tabs (e.g. "Apply Promo Code" tab on cart view) */
.nav-tabs {
    border-bottom: 1px solid var(--okiu-line) !important;
}
.nav-tabs > li > a,
.nav-tabs > li.nav-item > a.nav-link {
    background: transparent !important;
    border: 1px solid transparent !important;
    color: var(--okiu-mute) !important;
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: 0.04em;
}
.nav-tabs > li.active > a,
.nav-tabs > li.nav-item > a.nav-link.active {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    border-bottom-color: var(--okiu-slate) !important;
    color: var(--okiu-signal) !important;
}
.tab-content, .tab-pane {
    background: transparent !important;
    color: var(--okiu-paper) !important;
}

/* ---------- Footer ---------- */
#footer, .footer {
    background: var(--okiu-ink) !important;
    border-top: 1px solid var(--okiu-line);
    color: var(--okiu-mute);
    font-family: var(--okiu-mono);
    font-size: 12px;
}
#footer a { color: var(--okiu-mute); }
#footer a:hover { color: var(--okiu-signal); }

/* ---------- Hero / homepage banner (if present) ---------- */
.homepage-banner, .jumbotron {
    background: linear-gradient(180deg, var(--okiu-ink), var(--okiu-slate)) !important;
    border-bottom: 1px solid var(--okiu-line);
}

/* ---------- Misc surfaces ---------- */
.well {
    background: var(--okiu-slate) !important;
    border: 1px solid var(--okiu-line) !important;
    color: var(--okiu-paper);
}

.breadcrumb {
    background: transparent !important;
    font-family: var(--okiu-mono);
    font-size: 12px;
}

/* Scrollbar (webkit) to match dark theme */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--okiu-ink); }
::-webkit-scrollbar-thumb { background: var(--okiu-slate-light); border-radius: 5px; }
::-webkit-scrollbar-thumb:hover { background: var(--okiu-signal-deep); }

/* ---------- Client-area sign-in ---------- */
.logincontainer.okiu-auth-shell {
    display: grid;
    grid-template-columns: minmax(0, .92fr) minmax(420px, 1.08fr);
    width: 100%;
    max-width: 1040px;
    min-height: 520px;
    margin: 34px auto 56px;
    overflow: hidden;
    background: var(--okiu-slate);
    border: 1px solid var(--okiu-line);
    border-radius: 20px;
    box-shadow: 0 28px 80px rgba(0,0,0,.28);
}
.okiu-auth-intro {
    position: relative;
    display: flex;
    flex-direction: column;
    padding: 48px 46px 40px;
    overflow: hidden;
    background:
        radial-gradient(circle at 90% 8%, rgba(53,230,192,.17), transparent 34%),
        linear-gradient(145deg, var(--okiu-slate-light), #101927);
    border-right: 1px solid var(--okiu-line);
}
.okiu-auth-intro::after {
    content: '';
    position: absolute;
    width: 230px;
    height: 230px;
    right: -120px;
    bottom: -115px;
    border: 1px solid rgba(53,230,192,.18);
    border-radius: 50%;
    box-shadow: 0 0 0 38px rgba(53,230,192,.025), 0 0 0 76px rgba(53,230,192,.018);
}
.okiu-auth-eyebrow {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-bottom: 34px;
    color: var(--okiu-signal);
    font-family: var(--okiu-mono);
    font-size: 10px;
    letter-spacing: .09em;
    text-transform: uppercase;
}
.okiu-auth-eyebrow span {
    width: 7px;
    height: 7px;
    background: var(--okiu-signal);
    border-radius: 50%;
    box-shadow: 0 0 10px rgba(53,230,192,.8);
}
.okiu-auth-intro h1 {
    margin: 0 0 16px !important;
    font-size: 42px !important;
    line-height: 1.06;
}
.okiu-auth-intro > p {
    max-width: 370px;
    margin: 0 0 38px;
    color: var(--okiu-mute);
    font-size: 15px;
    line-height: 1.65;
}
.okiu-auth-benefits {
    position: relative;
    z-index: 1;
    display: grid;
    gap: 18px;
    padding: 0;
    margin: 0;
    list-style: none;
}
.okiu-auth-benefits li {
    display: flex;
    align-items: center;
    gap: 13px;
    color: var(--okiu-paper);
    font-size: 13px;
}
.okiu-auth-benefits i {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    color: var(--okiu-signal);
    background: rgba(53,230,192,.07);
    border: 1px solid rgba(53,230,192,.15);
    border-radius: 9px;
}
.okiu-auth-register {
    position: relative;
    z-index: 1;
    margin-top: auto;
    padding-top: 30px;
    color: var(--okiu-mute);
    font-size: 13px;
}
.okiu-auth-register a {
    margin-left: 4px;
    font-weight: 600;
}
.okiu-auth-form-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 48px 54px;
    background: rgba(8,11,18,.28);
}
.okiu-auth-form-heading {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 34px;
}
.okiu-auth-icon {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    color: var(--okiu-signal);
    background: rgba(53,230,192,.08);
    border: 1px solid rgba(53,230,192,.18);
    border-radius: 12px;
}
.okiu-auth-form-heading h2 {
    margin: 0 0 4px !important;
    font-size: 25px !important;
}
.okiu-auth-form-heading p {
    margin: 0;
    color: var(--okiu-mute);
    font-size: 13px;
}
.okiu-login-form .form-group {
    margin-bottom: 20px;
}
.okiu-login-form label {
    margin-bottom: 8px;
    color: var(--okiu-paper);
    font-size: 12px;
    font-weight: 600;
}
.okiu-input-wrap {
    position: relative;
}
.okiu-input-wrap > i {
    position: absolute;
    z-index: 2;
    left: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--okiu-mute);
    font-size: 13px;
    pointer-events: none;
}
.okiu-input-wrap .form-control {
    height: 48px;
    padding: 10px 15px 10px 43px !important;
    background: rgba(8,11,18,.68) !important;
    border-color: rgba(232,237,246,.13) !important;
}
.okiu-input-wrap .form-control:hover {
    border-color: rgba(232,237,246,.24) !important;
}
.okiu-input-wrap .form-control:focus {
    border-color: var(--okiu-signal) !important;
}
.okiu-login-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin: 2px 0 26px;
}
.okiu-remember {
    display: inline-flex !important;
    align-items: center;
    gap: 9px;
    margin: 0 !important;
    color: var(--okiu-mute) !important;
    font-weight: 400 !important;
    cursor: pointer;
}
.okiu-remember input {
    width: 15px;
    height: 15px;
    margin: 0;
    accent-color: var(--okiu-signal);
}
.okiu-login-options > a {
    color: var(--okiu-mute);
    font-family: var(--okiu-mono);
    font-size: 10px;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.okiu-login-options > a:hover {
    color: var(--okiu-signal);
}
.okiu-login-submit {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    min-height: 48px;
    padding: 12px 17px !important;
    border-radius: 10px !important;
}
.okiu-login-submit i {
    transition: transform .15s ease;
}
.okiu-login-submit:hover i {
    transform: translateX(3px);
}
.okiu-social-login {
    margin-top: 26px;
}
.okiu-auth-divider {
    position: relative;
    margin-bottom: 18px;
    text-align: center;
}
.okiu-auth-divider::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    border-top: 1px solid var(--okiu-line);
}
.okiu-auth-divider span {
    position: relative;
    padding: 0 12px;
    color: var(--okiu-mute);
    background: #0e1420;
    font-size: 11px;
}
@media (max-width: 991px) {
    .logincontainer.okiu-auth-shell {
        grid-template-columns: minmax(0, .85fr) minmax(390px, 1.15fr);
    }
    .okiu-auth-intro { padding: 40px 32px; }
    .okiu-auth-form-panel { padding: 42px 36px; }
}
@media (max-width: 767px) {
    .logincontainer.okiu-auth-shell {
        display: block;
        width: auto;
        max-width: none;
        min-height: 0;
        margin: 20px 15px 38px;
        border-radius: 16px;
    }
    .okiu-auth-intro {
        padding: 27px 25px 25px;
        border-right: 0;
        border-bottom: 1px solid var(--okiu-line);
    }
    .okiu-auth-eyebrow { margin-bottom: 17px; }
    .okiu-auth-intro h1 { font-size: 31px !important; margin-bottom: 10px !important; }
    .okiu-auth-intro > p { margin: 0; font-size: 13px; line-height: 1.55; }
    .okiu-auth-benefits { display: none; }
    .okiu-auth-register { margin-top: 18px; padding-top: 0; }
    .okiu-auth-form-panel { padding: 28px 25px 30px; }
    .okiu-auth-form-heading { margin-bottom: 26px; }
    .okiu-auth-icon { width: 40px; height: 40px; }
    .okiu-auth-form-heading h2 { font-size: 22px !important; }
}
@media (max-width: 390px) {
    .okiu-login-options { align-items: flex-start; flex-direction: column; gap: 12px; }
}

/* ---------- Hosting product landing page ---------- */
#order-standard_cart.okiu-products-page > .row {
    margin: 0;
}
#order-standard_cart.okiu-products-page .cart-sidebar {
    display: none !important;
}
#order-standard_cart.okiu-products-page .cart-body {
    float: none;
    width: 100%;
    max-width: none;
    padding: 0;
}
.okiu-store-header {
    position: relative;
    overflow: hidden;
    padding: 34px 36px 32px;
    margin: 0 0 28px;
    background:
        radial-gradient(circle at 88% 15%, rgba(53,230,192,.14), transparent 28%),
        linear-gradient(135deg, var(--okiu-slate-light), var(--okiu-slate));
    border: 1px solid var(--okiu-line);
    border-radius: 18px;
}
.okiu-store-header::after {
    content: '';
    position: absolute;
    right: 42px;
    top: 36px;
    width: 76px;
    height: 76px;
    border: 1px solid rgba(53,230,192,.25);
    border-radius: 50%;
    box-shadow: 0 0 0 18px rgba(53,230,192,.035), 0 0 0 36px rgba(53,230,192,.02);
}
.okiu-store-eyebrow,
.okiu-plan-number,
.okiu-price-label {
    font-family: var(--okiu-mono);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.okiu-store-eyebrow {
    margin-bottom: 12px;
    color: var(--okiu-signal);
    font-size: 11px;
}
.okiu-store-header h1 {
    position: relative;
    z-index: 1;
    margin: 0 0 10px !important;
    font-size: clamp(32px, 4vw, 46px) !important;
    line-height: 1.05;
}
.okiu-store-header p {
    position: relative;
    z-index: 1;
    max-width: 590px;
    margin: 0;
    color: var(--okiu-mute);
    font-size: 16px;
    line-height: 1.55;
}
#order-standard_cart.okiu-products-page .categories-collapsed {
    display: none !important;
}
#order-standard_cart .okiu-plan-grid {
    margin: 0;
}
#order-standard_cart .okiu-plan-grid > .row {
    display: flex;
    flex-wrap: wrap;
}
#order-standard_cart .okiu-plan-column {
    display: flex;
    width: 33.333333%;
    margin-bottom: 30px;
}
#order-standard_cart .products .okiu-plan-card {
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 320px;
    padding: 0;
    margin: 0;
    border-radius: 16px !important;
    transition: transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
#order-standard_cart .products .okiu-plan-card:hover {
    transform: translateY(-4px);
    border-color: rgba(53,230,192,.42) !important;
    box-shadow: 0 18px 45px rgba(0,0,0,.24);
}
#order-standard_cart .products .okiu-plan-card header {
    margin: 0;
    padding: 24px 24px 20px;
    background: transparent !important;
    border-bottom: 0 !important;
}
#order-standard_cart .products .okiu-plan-card header .okiu-plan-number {
    display: block;
    margin: 0 0 20px;
    color: var(--okiu-signal) !important;
    font-size: 10px;
}
#order-standard_cart .products .okiu-plan-card header h2 {
    margin: 0 !important;
    color: var(--okiu-paper) !important;
    font-size: 23px !important;
    line-height: 1.2;
}
#order-standard_cart .products .okiu-plan-card div.product-desc {
    float: none;
    width: auto;
    flex: 1;
    padding: 0 24px 22px;
    color: var(--okiu-mute) !important;
    font-size: 14px;
    line-height: 1.55;
}
#order-standard_cart .products .okiu-plan-card .product-desc p {
    margin: 0;
}
.okiu-plan-features {
    list-style: none;
    padding: 18px 0 0;
    margin: 18px 0 0;
    border-top: 1px solid var(--okiu-line);
}
.okiu-plan-features li {
    display: flex;
    gap: 9px;
    margin: 8px 0;
}
.okiu-plan-features i {
    margin-top: 4px;
    color: var(--okiu-signal);
    font-size: 10px;
}
#order-standard_cart .products .okiu-plan-card footer {
    float: none;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 18px;
    width: auto;
    margin: 0;
    padding: 22px 24px 24px;
    text-align: left;
    border-top: 1px solid var(--okiu-line);
}
#order-standard_cart .products .okiu-plan-card div.product-pricing {
    margin: 0;
}
.okiu-price-label {
    display: block;
    margin-bottom: 7px;
    color: var(--okiu-mute);
    font-size: 9px;
}
#order-standard_cart .products .okiu-plan-card div.product-pricing span.price {
    display: block;
    color: var(--okiu-paper);
    font-family: var(--okiu-display);
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
    white-space: nowrap;
}
.okiu-cycle {
    display: block;
    margin-top: 5px;
    color: var(--okiu-mute);
    font-size: 11px;
}
.okiu-plan-cta {
    display: inline-flex;
    flex: 0 0 auto;
    width: auto !important;
    align-items: center;
    justify-content: center;
    gap: 12px;
    min-width: 122px;
    min-height: 42px;
    padding: 10px 15px !important;
    white-space: nowrap;
    overflow: visible !important;
}
@media (max-width: 991px) and (min-width: 768px) {
    #order-standard_cart .okiu-plan-column { width: 50%; }
}
@media (max-width: 767px) {
    .okiu-store-header {
        padding: 26px 22px;
        margin-bottom: 18px;
        border-radius: 14px;
    }
    .okiu-store-header::after { right: -30px; top: 18px; }
    .okiu-store-header h1 { font-size: 34px !important; }
    .okiu-store-header p { font-size: 14px; max-width: 270px; }
    #order-standard_cart .okiu-plan-column { width: 100%; margin-bottom: 16px; }
    #order-standard_cart .products .okiu-plan-card { min-height: 310px; }
    #order-standard_cart .products .okiu-plan-card footer {
        align-items: center;
    }
}
@media (max-width: 420px) {
    #order-standard_cart .products .okiu-plan-card footer {
        align-items: stretch;
        flex-direction: column;
    }
    .okiu-plan-cta { width: 100%; }
}