/* Ender — visual design aligned with EnderHosting website
   Brand + surfaces/radii/shadows/motion. Layout/HTML unchanged. */

:root {
    --eh-bg: #101014;
    --eh-bg-alt: #131317;
    --eh-surface: #17171e;
    --eh-surface-2: #1b1823;
    --eh-surface-3: #201c2a;
    --eh-text: #f3f2f7;
    --eh-text-secondary: #cfc6dc;
    --eh-muted: #9b98a6;
    --eh-nav: #aaa7b4;
    --eh-purple: #7f00ff;
    --eh-brand-hover: #6c00db;
    --eh-brand-soft: #bb88ff;
    --eh-brand-btn: #a782ff;
    --eh-brand-btn-border: #b899ff;
    --eh-brand-btn-hover: #bb9eff;
    --eh-brand-text: #c9a4ff;
    --eh-brand-tint: rgba(127, 0, 255, 0.08);
    --eh-brand-tint-strong: rgba(127, 0, 255, 0.18);
    --eh-success: #4fd59f;
    --eh-error: #ff8080;
    --eh-warning: #ffc062;
    --eh-border: #292830;
    --eh-border-strong: #3a3745;
    --eh-outline-border: #45404f;
    --eh-focus: #c2a7ff;
    --eh-font: "Ubuntu", Arial, sans-serif;
    --eh-display: "Rubik", Arial, sans-serif;
    --eh-radius-sm: 6px;
    --eh-radius-md: 10px;
    --eh-radius-lg: 14px;
    --eh-radius-xl: 16px;
    --eh-shadow-sm: 0 2px 6px rgba(0, 0, 0, 0.2);
    --eh-shadow: 0 10px 35px rgba(0, 0, 0, 0.2);
    --eh-shadow-accent: 0 4px 14px rgba(127, 0, 255, 0.25);
    --eh-shadow-btn: 0 7px 28px rgba(157, 114, 255, 0.13);
    --eh-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --eh-duration: 0.2s;
}

html {
    color-scheme: dark;
}

body {
    background:
        radial-gradient(1100px 480px at 12% -18%, rgba(127, 0, 255, 0.16), transparent 58%),
        radial-gradient(900px 420px at 92% 0%, rgba(187, 136, 255, 0.07), transparent 52%),
        var(--eh-bg) !important;
    color: var(--eh-text) !important;
    font-family: var(--eh-font) !important;
    font-size: 15px;
    line-height: 1.65;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: rgba(127, 0, 255, 0.35);
    color: #fff;
}

h1, h2, h3, h4, h5, h6,
.title h1, .title h2, .title h3,
.card-header, .card-blesta > .card-header,
.panel-heading {
    font-family: var(--eh-display) !important;
    letter-spacing: -0.03em;
    font-weight: 650;
    color: var(--eh-text) !important;
}

p, li, td, th, label, .text-secondary {
    color: var(--eh-text-secondary);
}

a {
    color: var(--eh-brand-text) !important;
    transition: color var(--eh-duration) var(--eh-ease);
}

a:hover {
    color: var(--eh-brand-soft) !important;
}

/* ---------- Header (sticky glass feel, same structure) ---------- */
.header {
    background: rgba(16, 16, 20, 0.88) !important;
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.031) !important;
    box-shadow: none !important;
    min-height: 72px;
    padding-bottom: 0 !important;
    position: sticky;
    top: 0;
    z-index: 30;
}

.header .container-md,
.header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 72px;
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100%;
}

.header .logo {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0 !important;
    width: auto !important;
}

.header .logo img,
.header .logo img.ender-logo,
.header .logo img.blesta {
    display: block;
    height: 42px !important;
    width: auto !important;
    max-height: 42px !important;
    max-width: 160px;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(127, 0, 255, 0.22));
}

/* Push staff badge / language switcher to the right (replaces broken float-right under flex) */
.header .badge,
.header .label,
.header .top-nav {
    float: none !important;
    margin-left: auto !important;
    margin-right: 0 !important;
    flex: 0 1 auto;
    max-width: min(100%, 420px);
}

.header .top-nav a,
.header .badge a {
    color: var(--eh-text-secondary) !important;
    font-size: 13px;
    font-weight: 500;
}

.header .top-nav a:hover {
    color: var(--eh-text) !important;
}

.header .badge,
.header .badge-pill,
.header .badge-info {
    background: var(--eh-brand-tint-strong) !important;
    border: 1px solid rgba(127, 0, 255, 0.3);
    color: var(--eh-brand-text) !important;
    border-radius: 999px !important;
    padding: 0.45em 0.9em !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
}

.header .badge a {
    color: var(--eh-brand-text) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.35em;
}

/* ---------- Page title (keep Blesta 50px bar; text vertically centered, not on the border) ---------- */
.title {
    background: var(--eh-bg-alt) !important;
    border-bottom: 1px solid var(--eh-border) !important;
    height: 50px !important;
    margin-bottom: 20px !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
}

.title .container-md,
.title .container {
    padding-left: 15px !important;
    padding-right: 15px !important;
    width: 100%;
    height: 50px;
    display: flex;
    align-items: center;
}

.title h3 {
    color: var(--eh-text) !important;
    font-size: 1.25rem !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 50px !important;
    display: block !important;
    height: 50px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ---------- Navigation ---------- */
.nav-content {
    position: relative;
    z-index: 20;
}

.nav-content nav.navbar {
    background: rgba(23, 23, 30, 0.92) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--eh-border) !important;
    box-shadow: none !important;
    padding-top: 0.35rem;
    padding-bottom: 0.35rem;
}

.nav-content nav.navbar .navbar-nav > li > a,
.nav-content nav.navbar .nav-link {
    color: var(--eh-nav) !important;
    font-weight: 500;
    font-size: 13px;
    border-radius: var(--eh-radius-sm);
    padding: 0.55rem 0.85rem !important;
    margin: 0 1px;
    position: relative;
    transition: color var(--eh-duration) var(--eh-ease), background-color var(--eh-duration) var(--eh-ease);
}

.nav-content nav.navbar .navbar-nav > li > a:hover,
.nav-content nav.navbar .nav-link:hover,
.nav-content nav.navbar .navbar-nav > .open > a,
.nav-content nav.navbar .navbar-nav > .open > a:hover,
.nav-content nav.navbar .navbar-nav > .open > a:focus {
    color: var(--eh-text) !important;
    background: rgba(255, 255, 255, 0.04) !important;
}

.nav-content nav.navbar .navbar-nav > .active > a,
.nav-content nav.navbar .navbar-nav > .active > a:hover,
.nav-content nav.navbar .navbar-nav > .active > a:focus,
.nav-content nav.navbar .nav-item.active > .nav-link {
    color: var(--eh-text) !important;
    background: var(--eh-brand-tint-strong) !important;
}

.nav-content nav.navbar .navbar-nav > .active > a::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--eh-purple);
    transform: translateX(-50%);
}

.navbar-toggler {
    border-color: var(--eh-border-strong) !important;
    border-radius: var(--eh-radius-sm);
}

.navbar-toggler-icon {
    filter: invert(1);
}

.dropdown-menu {
    background: var(--eh-surface-2) !important;
    border: 1px solid var(--eh-border) !important;
    border-radius: var(--eh-radius-md) !important;
    box-shadow: var(--eh-shadow);
    padding: 0.4rem;
    margin-top: 0.35rem;
}

.dropdown-item {
    color: var(--eh-text-secondary) !important;
    border-radius: var(--eh-radius-sm);
    font-size: 13px;
    font-weight: 500;
    padding: 0.5rem 0.75rem;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--eh-brand-tint) !important;
    color: var(--eh-text) !important;
}

.dropdown-divider {
    border-top-color: var(--eh-border) !important;
}

/* ---------- Cards / panels (same boxes, website surface language) ---------- */
.card,
.card-blesta,
.well,
.panel,
.panel-default {
    background: var(--eh-surface) !important;
    border: 1px solid var(--eh-border) !important;
    border-radius: var(--eh-radius-xl) !important;
    box-shadow: var(--eh-shadow-sm) !important;
    color: var(--eh-text) !important;
    overflow: hidden;
    transition: border-color var(--eh-duration) var(--eh-ease), box-shadow var(--eh-duration) var(--eh-ease), transform var(--eh-duration) var(--eh-ease);
}

.card-blesta:hover,
.card:hover {
    border-color: var(--eh-border-strong) !important;
    box-shadow: var(--eh-shadow) !important;
}

.card-blesta > .card-header,
.card > .card-header,
.panel-default > .panel-heading,
.panel-heading {
    background: linear-gradient(180deg, var(--eh-surface-3), var(--eh-surface-2)) !important;
    color: var(--eh-text) !important;
    border-bottom: 1px solid var(--eh-border) !important;
    font-family: var(--eh-display) !important;
    font-size: 0.95rem;
    padding: 0.9rem 1.15rem;
}

.card-body,
.card-blesta > .card-body,
.panel-body,
.well {
    background: transparent !important;
    color: var(--eh-text-secondary) !important;
}

.card-footer,
.panel-footer {
    background: rgba(0, 0, 0, 0.18) !important;
    border-top: 1px solid var(--eh-border) !important;
    color: var(--eh-muted) !important;
}

.list-group-item {
    background: transparent !important;
    border-color: var(--eh-border) !important;
    color: var(--eh-text-secondary) !important;
}

.list-group-item:hover {
    background: var(--eh-brand-tint) !important;
    color: var(--eh-text) !important;
}

.list-group-item.active {
    background: var(--eh-brand-tint-strong) !important;
    border-color: rgba(127, 0, 255, 0.35) !important;
    color: var(--eh-text) !important;
}

/* ---------- Tables ---------- */
.table {
    color: var(--eh-text-secondary) !important;
}

.table thead th {
    border-color: var(--eh-border) !important;
    color: var(--eh-muted) !important;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    font-weight: 700;
    background: transparent !important;
    border-top: none !important;
}

.table td,
.table th {
    border-color: var(--eh-border) !important;
    vertical-align: middle;
}

.table-striped tbody tr:nth-of-type(odd) {
    background-color: rgba(255, 255, 255, 0.015) !important;
}

.table-hover tbody tr {
    transition: background-color var(--eh-duration) var(--eh-ease);
}

.table-hover tbody tr:hover {
    background-color: var(--eh-brand-tint) !important;
    color: var(--eh-text) !important;
}

/* ---------- Forms ---------- */
.form-control,
.custom-select,
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple,
.input-group-text {
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--eh-outline-border) !important;
    color: var(--eh-text) !important;
    border-radius: var(--eh-radius-sm) !important;
    min-height: 42px;
    transition: border-color var(--eh-duration) var(--eh-ease), box-shadow var(--eh-duration) var(--eh-ease), background-color var(--eh-duration) var(--eh-ease);
}

.form-control:hover,
.custom-select:hover {
    border-color: #555064 !important;
}

.form-control:focus,
.custom-select:focus {
    border-color: var(--eh-focus) !important;
    box-shadow: 0 0 0 3px rgba(127, 0, 255, 0.18) !important;
    background: var(--eh-surface) !important;
    color: var(--eh-text) !important;
}

.form-control::placeholder {
    color: var(--eh-muted) !important;
}

label,
.col-form-label {
    color: var(--eh-text-secondary) !important;
    font-weight: 500;
    font-size: 0.875rem;
}

.custom-control-label::before {
    background-color: var(--eh-surface-2);
    border-color: var(--eh-outline-border);
}

.custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--eh-purple);
    border-color: var(--eh-purple);
}

/* ---------- Buttons (website .button language) ---------- */
.btn {
    border-radius: var(--eh-radius-sm) !important;
    font-weight: 700;
    font-family: var(--eh-font);
    font-size: 0.875rem;
    line-height: 1.3;
    letter-spacing: 0;
    padding: 0.65rem 1.15rem;
    transition:
        background var(--eh-duration) var(--eh-ease),
        transform var(--eh-duration) var(--eh-ease),
        box-shadow var(--eh-duration) var(--eh-ease),
        border-color var(--eh-duration) var(--eh-ease),
        color var(--eh-duration) var(--eh-ease);
}

.btn:hover {
    transform: translateY(-2px);
}

.btn:active {
    transform: translateY(0);
}

.btn-primary {
    background: var(--eh-brand-btn) !important;
    border: 1px solid var(--eh-brand-btn-border) !important;
    color: #171021 !important;
    box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--eh-brand-btn-hover) !important;
    border-color: var(--eh-brand-btn-hover) !important;
    color: #171021 !important;
    box-shadow: var(--eh-shadow-btn);
}

.btn-secondary,
.btn-default,
.btn-light,
.btn-outline-secondary {
    color: #ddd7e8 !important;
    background: rgba(255, 255, 255, 0.012) !important;
    border: 1px solid var(--eh-outline-border) !important;
}

.btn-secondary:hover,
.btn-default:hover,
.btn-light:hover,
.btn-outline-secondary:hover {
    background: rgba(255, 255, 255, 0.04) !important;
    border-color: #555064 !important;
    color: var(--eh-text) !important;
}

.btn-success {
    background: var(--eh-success) !important;
    border-color: var(--eh-success) !important;
    color: #0b1a14 !important;
}

/* Order config: sticky summary must not hide Vaciar carrito under Continuar */
#sticker #empty_cart {
    display: inline-flex !important;
    align-items: center;
    gap: 0.45rem;
    float: none !important;
    width: 100%;
    justify-content: center;
    clear: both;
    margin: 0 0 12px !important;
    position: relative;
    z-index: 3;
    min-height: 42px;
    border-radius: var(--eh-radius-md) !important;
    background: rgba(255, 255, 255, 0.02) !important;
    border: 1px solid var(--eh-outline-border) !important;
    color: var(--eh-muted) !important;
    font-weight: 500;
    transition: background var(--eh-duration) var(--eh-ease), border-color var(--eh-duration) var(--eh-ease), color var(--eh-duration) var(--eh-ease);
}

#sticker #empty_cart:hover {
    background: rgba(255, 128, 128, 0.08) !important;
    border-color: rgba(255, 128, 128, 0.45) !important;
    color: var(--eh-error) !important;
}

#sticker .order-continue-wrap {
    clear: both;
    margin-top: 4px;
    padding-top: 0;
    border-top: none;
}

#sticker .order-continue-wrap .btn-success {
    width: 100%;
    float: none !important;
    margin: 0;
    min-height: 52px;
    border-radius: var(--eh-radius-md) !important;
    font-family: var(--eh-display) !important;
    font-weight: 650;
    letter-spacing: -0.02em;
    box-shadow: 0 8px 28px rgba(79, 213, 159, 0.18);
}

.sticky-wrapper,
#sticker {
    z-index: 6;
}

/* ========== Order flow — modern EnderHosting UI ========== */
#package-config,
#summary-details,
#create-account {
    font-family: var(--eh-font);
}

#package-config .section-title,
#summary-details .section-title {
    margin: 0 0 1.25rem;
    padding: 0;
}

#package-config .section-title h3,
#summary-details .section-title h3 {
    font-family: var(--eh-display) !important;
    font-size: 1.35rem !important;
    font-weight: 650 !important;
    letter-spacing: -0.03em;
    margin: 0 0 0.35rem !important;
    color: var(--eh-text) !important;
}

#package-config .section-title h3 i,
#summary-details .section-title h3 i {
    color: var(--eh-brand-soft);
    margin-right: 0.4rem;
}

#package-config .section-title p,
#summary-details .section-title p {
    margin: 0;
    color: var(--eh-muted) !important;
    font-size: 0.9rem;
    line-height: 1.45;
}

/* Config panel */
#package-config .col-md-6:first-child {
    padding-right: 1.25rem;
}

#package-config .form-group {
    margin-bottom: 1.15rem;
}

#package-config .form-group > label,
#package-config label.control-label,
#package-config .pad label {
    display: block;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    color: var(--eh-text-secondary) !important;
    margin-bottom: 0.45rem;
}

#package-config .form-control,
#package-config select.form-control,
#package-config textarea.form-control,
#package-config .pad .form-control {
    background: var(--eh-surface-2) !important;
    border: 1px solid var(--eh-border-strong) !important;
    border-radius: var(--eh-radius-md) !important;
    color: var(--eh-text) !important;
    min-height: 46px;
    padding: 0.65rem 0.9rem !important;
    box-shadow: none !important;
    transition: border-color var(--eh-duration) var(--eh-ease), box-shadow var(--eh-duration) var(--eh-ease);
}

#package-config .form-control:focus,
#package-config select.form-control:focus {
    border-color: var(--eh-brand-btn-border) !important;
    box-shadow: 0 0 0 3px var(--eh-brand-tint-strong) !important;
    outline: none;
}

#package-config .pad,
#package-config .generated_fields_div {
    display: flex;
    flex-direction: column;
    gap: 0.85rem;
    margin-top: 0.5rem;
}

#package-config .generated_fields_div > .form-group {
    margin-bottom: 0;
    padding: 0.95rem 1rem;
    background: var(--eh-surface);
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-md);
    transition: border-color var(--eh-duration) var(--eh-ease), background var(--eh-duration) var(--eh-ease);
}

#package-config .generated_fields_div > .form-group:hover {
    border-color: var(--eh-border-strong);
    background: var(--eh-surface-2);
}

#package-config .generated_fields_div > .form-group > .form-control,
#package-config .generated_fields_div > .form-group > select {
    margin-top: 0.15rem;
}

/* Option rows (checkboxes / radios) */
#package-config .checkbox,
#package-config .radio,
#package-config .pad .checkbox,
#package-config .pad .radio,
#package-config .generated_fields_div .checkbox,
#package-config .generated_fields_div .radio {
    margin: 0 !important;
    padding: 0.85rem 1rem !important;
    background: var(--eh-surface) !important;
    border: 1px solid var(--eh-border) !important;
    border-radius: var(--eh-radius-md) !important;
    transition: border-color var(--eh-duration) var(--eh-ease), background var(--eh-duration) var(--eh-ease), box-shadow var(--eh-duration) var(--eh-ease);
}

#package-config .checkbox:hover,
#package-config .radio:hover {
    border-color: var(--eh-border-strong) !important;
    background: var(--eh-surface-2) !important;
}

/* Avoid double cards when checkbox sits inside a styled form-group */
#package-config .generated_fields_div > .form-group > .checkbox,
#package-config .generated_fields_div > .form-group > .radio,
#package-config .pad .form-group > .checkbox,
#package-config .pad .form-group > .radio {
    background: transparent !important;
    border: none !important;
    padding: 0.25rem 0 0 !important;
    border-radius: 0 !important;
}

#package-config .checkbox label,
#package-config .radio label {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    width: 100%;
    margin: 0 !important;
    color: var(--eh-text-secondary) !important;
    font-size: 0.92rem;
    line-height: 1.4;
    cursor: pointer;
}

#package-config .checkbox input[type="checkbox"],
#package-config .radio input[type="radio"] {
    width: 1.05rem;
    height: 1.05rem;
    margin-top: 0.15rem;
    accent-color: var(--eh-purple);
    flex: 0 0 auto;
}

/* Option label + help icon on one clean row */
#package-config .eh-option-head {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.65rem;
}

#package-config .eh-option-head > label,
#package-config .eh-option-head > .control-label {
    display: inline !important;
    margin: 0 !important;
    flex: 1 1 auto;
}

#package-config .eh-option-help {
    flex: 0 0 auto;
    line-height: 1;
    color: var(--eh-muted) !important;
    text-decoration: none !important;
}

#package-config .eh-option-help:hover {
    color: var(--eh-brand-soft) !important;
}

#package-config .eh-option-help .fa-question-circle {
    font-size: 0.95rem;
}

/* Quantity / slider blocks */
#package-config .eh-qty-option {
    overflow: visible;
}

#package-config .eh-qty-option .slider.slider-horizontal,
#package-config .slider.slider-horizontal {
    display: block !important;
    width: 100% !important;
    height: 28px !important;
    margin: 0.15rem 0 0.75rem !important;
}

#package-config .slider .slider-track,
#package-config .slider-track {
    height: 6px !important;
    margin-top: -3px !important;
    border-radius: 999px !important;
    background: var(--eh-border-strong) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    box-shadow: none !important;
    filter: none !important;
}

#package-config .slider .slider-selection,
#package-config .slider-selection,
#package-config .slider-selection.tick-slider-selection {
    background: var(--eh-purple) !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    border-radius: 999px !important;
    box-shadow: none !important;
    filter: none !important;
}

#package-config .slider .slider-track-high,
#package-config .slider .slider-track-low,
#package-config .slider-track-high,
#package-config .slider-track-low {
    background: transparent !important;
    background-image: none !important;
    box-shadow: none !important;
    filter: none !important;
}

#package-config .slider .slider-handle,
#package-config .slider-handle {
    width: 18px !important;
    height: 18px !important;
    margin-top: -6px !important;
    margin-left: -9px !important;
    background: #fff !important;
    background-image: none !important;
    background-repeat: no-repeat !important;
    border: 2px solid var(--eh-purple) !important;
    box-shadow: none !important;
    filter: none !important;
    opacity: 1 !important;
}

/* Hide bootstrap-slider value bubble (number input shows the value) */
#package-config .slider .tooltip {
    display: none !important;
}

#package-config .eh-qty-input,
#package-config input.eh-qty-input[type="number"],
#package-config .eh-qty-option input[data-type="quantity"] {
    display: block !important;
    width: 5.5rem !important;
    max-width: 100%;
    min-height: 40px !important;
    margin: 0 0 0.45rem !important;
    text-align: center;
    font-weight: 650;
    font-variant-numeric: tabular-nums;
}

#package-config .eh-qty-meta,
#package-config .eh-qty-meta label {
    display: block !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0.8rem !important;
    font-weight: 500 !important;
    color: var(--eh-muted) !important;
    line-height: 1.35;
}

#package-config .input-group .form-control {
    min-height: 42px;
}

/* Bootstrap help tooltips — solid surface (do NOT force opacity; breaks hide) */
.tooltip {
    pointer-events: none;
    z-index: 1080 !important;
}

.tooltip.show {
    opacity: 0.98;
}

.tooltip .arrow::before {
    border-top-color: var(--eh-surface-3) !important;
    border-bottom-color: var(--eh-surface-3) !important;
}

.tooltip.bs-tooltip-top .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="top"] .arrow::before {
    border-top-color: var(--eh-surface-3) !important;
}

.tooltip.bs-tooltip-bottom .arrow::before,
.tooltip.bs-tooltip-auto[x-placement^="bottom"] .arrow::before {
    border-bottom-color: var(--eh-surface-3) !important;
}

.tooltip-inner {
    max-width: 260px;
    padding: 0.65rem 0.8rem !important;
    background: var(--eh-surface-3) !important;
    color: var(--eh-text) !important;
    border: 1px solid var(--eh-border-strong) !important;
    border-radius: var(--eh-radius-md) !important;
    box-shadow: var(--eh-shadow-sm) !important;
    font-family: var(--eh-font) !important;
    font-size: 0.82rem !important;
    font-weight: 400 !important;
    line-height: 1.45 !important;
    text-align: left !important;
}

/* Sticky order summary card */
#sticker #summary-details,
#order-summary #summary-details {
    margin: 0;
}

#sticker .card-order,
#order-summary .card-order,
.card-order.bg-light,
.card.card-order {
    background: var(--eh-surface) !important;
    border: 1px solid var(--eh-border) !important;
    border-radius: var(--eh-radius-xl) !important;
    box-shadow: var(--eh-shadow) !important;
    padding: 1.15rem 1.2rem !important;
    margin-bottom: 0.85rem !important;
    font-size: 0.92rem !important;
    color: var(--eh-text-secondary) !important;
}

#sticker .card-order .table,
#order-summary .card-order .table,
.card-order .table {
    margin-bottom: 0.35rem;
    color: inherit;
}

#sticker .card-order .table thead th,
#order-summary .card-order .table thead th,
.card-order .table thead th {
    background: transparent !important;
    border: none !important;
    border-bottom: 1px solid var(--eh-border) !important;
    color: var(--eh-muted) !important;
    font-size: 0.7rem !important;
    font-weight: 650 !important;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 0.35rem 0.25rem 0.65rem !important;
}

#sticker .card-order .table td,
#order-summary .card-order .table td,
.card-order .table td {
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04) !important;
    padding: 0.7rem 0.25rem !important;
    vertical-align: middle;
    color: var(--eh-text-secondary) !important;
}

#sticker .card-order .table tbody tr:last-child td,
.card-order .table tbody tr:last-child td {
    border-bottom: none !important;
}

#sticker .card-order .table strong,
.card-order .table strong,
.card-order .currency_value {
    color: var(--eh-text) !important;
    font-weight: 650;
}

#sticker .card-order hr,
.card-order hr {
    border: none !important;
    border-top: 1px solid var(--eh-border) !important;
    margin: 0.75rem 0 !important;
    opacity: 1;
}

#sticker .card-order .total-due,
.card-order .total-due {
    text-align: right;
    padding: 0.35rem 0 0.15rem;
}

#sticker .card-order .total-due small,
.card-order .total-due small {
    display: block;
    color: var(--eh-muted) !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-weight: 600;
}

#sticker .card-order .total-due h4,
.card-order .total-due h4 {
    font-family: var(--eh-display) !important;
    font-size: 1.65rem !important;
    font-weight: 700 !important;
    letter-spacing: -0.04em;
    margin: 0.2rem 0 0.85rem !important;
    color: var(--eh-text) !important;
}

#sticker .card-order .total-due h4 .currency_value,
.card-order .total-due h4 .currency_value {
    color: var(--eh-text) !important;
}

#sticker .card-order .total-due p,
.card-order .total-due p {
    margin: 0.15rem 0 0;
    font-size: 0.82rem;
    color: var(--eh-muted) !important;
}

#sticker .card-order .total-due p strong,
.card-order .total-due p strong {
    color: var(--eh-text-secondary) !important;
    font-weight: 600;
}

#sticker .card-order a[href="#coupon_box"],
.card-order a[href="#coupon_box"] {
    color: var(--eh-brand-text) !important;
    font-size: 0.82rem;
    font-weight: 600;
    text-decoration: none !important;
}

#sticker .card-order a[href="#coupon_box"]:hover {
    color: var(--eh-brand-soft) !important;
}

@media (max-width: 991.98px) {
    #package-config .col-md-6:first-child {
        padding-right: 15px;
        margin-bottom: 1.5rem;
    }

    #sticker .order-continue-wrap .btn-success,
    #sticker #empty_cart {
        width: 100%;
    }
}

.btn-danger {
    background: var(--eh-error) !important;
    border-color: var(--eh-error) !important;
    color: #2a1010 !important;
}

.btn-warning {
    background: var(--eh-warning) !important;
    border-color: var(--eh-warning) !important;
    color: #2a1c08 !important;
}

.btn-info {
    background: var(--eh-brand-soft) !important;
    border-color: var(--eh-brand-soft) !important;
    color: #1a0a2e !important;
}

.btn-link {
    color: var(--eh-brand-text) !important;
    box-shadow: none !important;
    transform: none !important;
}

.btn-sm {
    padding: 0.4rem 0.8rem;
    font-size: 0.75rem;
}

.btn-lg {
    padding: 0.85rem 1.35rem;
}

/* ---------- Alerts / badges / pagination ---------- */
.alert {
    border-radius: var(--eh-radius-md) !important;
    border: 1px solid var(--eh-border) !important;
    backdrop-filter: blur(8px);
}

.alert-primary,
.alert-info {
    background: var(--eh-brand-tint-strong) !important;
    border-color: rgba(127, 0, 255, 0.35) !important;
    color: var(--eh-brand-text) !important;
}

.alert-success {
    background: rgba(79, 213, 159, 0.12) !important;
    border-color: rgba(79, 213, 159, 0.35) !important;
    color: var(--eh-success) !important;
}

.alert-warning {
    background: rgba(255, 192, 98, 0.12) !important;
    border-color: rgba(255, 192, 98, 0.35) !important;
    color: var(--eh-warning) !important;
}

.alert-danger {
    background: rgba(255, 128, 128, 0.12) !important;
    border-color: rgba(255, 128, 128, 0.35) !important;
    color: var(--eh-error) !important;
}

.alert-secondary,
.alert-light {
    background: var(--eh-surface-2) !important;
    color: var(--eh-text-secondary) !important;
}

.badge {
    border-radius: var(--eh-radius-sm);
    font-weight: 700;
    letter-spacing: 0.02em;
}

.badge-primary {
    background: var(--eh-purple) !important;
}

.badge-pill {
    border-radius: 999px !important;
}

.pagination .page-item .page-link {
    background: var(--eh-surface) !important;
    border-color: var(--eh-border) !important;
    color: var(--eh-text-secondary) !important;
    border-radius: var(--eh-radius-sm) !important;
    margin: 0 2px;
}

.pagination .page-item.active .page-link,
div.pagination ul.pagination li.active .page-link {
    background: var(--eh-brand-btn) !important;
    border-color: var(--eh-brand-btn-border) !important;
    color: #171021 !important;
}

.pagination .page-item .page-link:hover {
    background: var(--eh-brand-tint) !important;
    color: var(--eh-text) !important;
}

/* ---------- Tabs ---------- */
.nav-tabs {
    border-bottom: 1px solid var(--eh-border) !important;
}

.nav-tabs .nav-link {
    color: var(--eh-muted) !important;
    border: none !important;
    border-radius: var(--eh-radius-sm) var(--eh-radius-sm) 0 0 !important;
    font-weight: 500;
    font-size: 13px;
}

.nav-tabs .nav-link:hover {
    color: var(--eh-text) !important;
    background: rgba(255, 255, 255, 0.03) !important;
}

.nav-tabs .nav-link.active {
    color: var(--eh-text) !important;
    background: transparent !important;
    box-shadow: inset 0 -2px 0 var(--eh-purple);
}

/* ---------- Modals ---------- */
.modal-content {
    background: var(--eh-surface) !important;
    border: 1px solid var(--eh-border) !important;
    border-radius: var(--eh-radius-xl) !important;
    color: var(--eh-text) !important;
    box-shadow: var(--eh-shadow);
}

.modal-header,
.modal-footer {
    border-color: var(--eh-border) !important;
}

.modal-backdrop.show {
    opacity: 0.72;
}

.close,
.modal-header .close {
    color: var(--eh-text) !important;
    text-shadow: none !important;
    opacity: 0.7;
}

/* ---------- Login ---------- */
body.client_login,
body.client_login_forgot,
body.client_login_reset,
body.client_login_confirmreset,
body.client_login_otp {
    background:
        radial-gradient(900px 420px at 15% -10%, rgba(127, 0, 255, 0.28), transparent 55%),
        radial-gradient(700px 360px at 90% 10%, rgba(187, 136, 255, 0.12), transparent 50%),
        var(--eh-bg) !important;
}

body.client_login .card-blesta,
body.client_login_forgot .card-blesta,
body.client_login_reset .card-blesta {
    border-radius: var(--eh-radius-xl) !important;
    box-shadow: var(--eh-shadow), var(--eh-shadow-accent) !important;
    border-color: rgba(127, 0, 255, 0.22) !important;
}

/* ---------- Misc ---------- */
hr {
    border-top-color: var(--eh-border) !important;
}

.text-muted {
    color: var(--eh-muted) !important;
}

.jumbotron {
    background: var(--eh-surface-2) !important;
    border: 1px solid var(--eh-border);
    border-radius: var(--eh-radius-xl);
}

.progress {
    background: var(--eh-surface-2);
    border-radius: 999px;
    overflow: hidden;
}

.progress-bar {
    background: linear-gradient(90deg, var(--eh-purple), var(--eh-brand-soft));
}

.footer,
.common-footer {
    color: var(--eh-muted) !important;
    border-top: 1px solid var(--eh-border);
    margin-top: 2.5rem;
    padding: 1.5rem 0 2rem;
    font-size: 0.875rem;
}

/* Content cards spacing polish only */
.container-md > .card-blesta,
.container-md > .card,
.container-md .card-blesta + .card-blesta {
    margin-bottom: 1.15rem;
}

/* Scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--eh-border-strong) transparent;
}

*::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

*::-webkit-scrollbar-thumb {
    background: var(--eh-border-strong);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}

*::-webkit-scrollbar-thumb:hover {
    background: #555064;
    background-clip: content-box;
    border: 2px solid transparent;
}

@media (max-width: 767.98px) {
    .header {
        position: relative;
        min-height: 64px;
    }

    .header .container-md,
    .header .container {
        min-height: 64px;
        flex-wrap: nowrap;
        gap: 8px;
    }

    .header .logo img {
        max-height: 34px;
    }

    .header .badge,
    .header .badge-pill,
    .header .label {
        max-width: 58%;
        font-size: 0.7rem !important;
        padding: 0.35em 0.7em !important;
        white-space: nowrap;
    }

    .title,
    .title .container-md,
    .title .container,
    .title h3 {
        height: 44px !important;
        line-height: 44px !important;
    }

    .title h3 {
        font-size: 1.05rem !important;
    }

    .nav-content nav.navbar .navbar-nav > .active > a::after {
        display: none;
    }

    .btn:hover {
        transform: none;
    }
}

@media (max-width: 420px) {
    .header .badge,
    .header .badge-pill {
        max-width: 52%;
    }
}