/* ==========================================================================
   VNDEL - Lagom2 UI polish (palette + animations + clarity) | style: modern
   Loaded automatically by includes/head.tpl as the style "custom.css".
   Safe to remove: delete this file and the theme returns to its stock colors.
   ========================================================================== */

/* ---------- Palette 2026: indigo accent, cool near-black surfaces ----------
   Red is kept only for danger/error states (Lagom's --brand-danger). */
:root {
    --brand-primary: #4F46E5;
    --brand-primary-lighter: #6366F1;
    --brand-primary-darker: #3730A3;
    --brand-primary-gradient-start: #4338CA;
    --brand-primary-gradient-end: #6366F1;
    --brand-primary-lighter-2: #C7D2FE;
    --brand-primary-lighter-3: #E0E7FF;
    --brand-primary-lighter-4: #EEF2FF;
    --brand-secondary: #4338CA;
    --svg-illustration-primary-0: #3730A3;
    --svg-illustration-primary-1: #4F46E5;
    --svg-illustration-primary-2: #6366F1;
    --svg-illustration-primary-3: #818CF8;
    --svg-illustration-primary-4: #A5B4FC;
}
html.lagom-dark-mode {
    --dark-mode-brand-primary: #6366F1;
    --dark-mode-brand-primary-lighter: #818CF8;
    --dark-mode-brand-primary-darker: #4338CA;
    --dark-mode-brand-primary-gradient-start: #4F46E5;
    --dark-mode-brand-primary-gradient-end: #818CF8;
    --dark-mode-brand-primary-lighter-2: #2B2F5E;
    --dark-mode-brand-primary-lighter-3: #262A55;
    --dark-mode-brand-primary-lighter-4: #1E2147;
    --dark-mode-brand-secondary: #4F46E5;
    --dark-mode-body-bg: #0B0E16;
    --dark-mode-svg-illustration-primary-0: #3730A3;
    --dark-mode-svg-illustration-primary-1: #4F46E5;
    --dark-mode-svg-illustration-primary-2: #6366F1;
    --dark-mode-svg-illustration-primary-3: #818CF8;
    --dark-mode-svg-illustration-primary-4: #A5B4FC;
    --brand-primary: #6366F1;
    --brand-primary-lighter: #818CF8;
    --brand-primary-darker: #4338CA;
    --brand-primary-gradient-start: #4F46E5;
    --brand-primary-gradient-end: #818CF8;
    --brand-primary-lighter-2: #2B2F5E;
    --brand-primary-lighter-3: #262A55;
    --brand-primary-lighter-4: #1E2147;
    --brand-secondary: #4F46E5;
    --body-bg: #0B0E16;
    --svg-illustration-primary-0: #3730A3;
    --svg-illustration-primary-1: #4F46E5;
    --svg-illustration-primary-2: #6366F1;
    --svg-illustration-primary-3: #818CF8;
    --svg-illustration-primary-4: #A5B4FC;
}
html.lagom-dark-mode body.lagom { background: #0B0E16; }

/* ---------- Dark surfaces: cool blue-grays instead of neutral grays ---------- */
html.lagom-dark-mode {
    --ui-block-bg: #151A26;
    --app-nav-top-bg: #10141F;
    --app-nav-left-bg: #10141F;
    --mob-app-nav-bg: #10141F;
    --mob-app-nav-header-bg: #10141F;
    --mob-dropdown-nav-bg: #10141F;
    --dropdown-bg: #151A26;
    --dropdown-collapse-bg: #0F131D;
    --select-option-bg: #151A26;
    --dark-mode-gray-faded: #171C28;
    --dark-mode-gray-gradient-start: #111622;
    --dark-mode-gray-gradient-end: #171C28;
    --dark-mode-gray-lighter-4: #222839;
    --dark-mode-gray-lighter-3: #2E3650;
    --dark-mode-gray-lighter-2: #58617A;
    --dark-mode-gray-lighter: #8790A6;
    --dark-mode-gray-base: #B4BBCB;
    --dark-mode-gray-darker: #E4E8F1;
    --dark-mode-gray-icons: #A2A9BB;
    --gray-faded: #171C28;
    --gray-gradient-start: #111622;
    --gray-gradient-end: #171C28;
    --gray-lighter-4: #222839;
    --gray-lighter-3: #2E3650;
    --gray-lighter-2: #58617A;
    --gray-lighter: #8790A6;
    --gray-base: #B4BBCB;
    --gray-darker: #E4E8F1;
    --gray-icons: #A2A9BB;
}

:root {
    --vn-ease: cubic-bezier(.22, .61, .36, 1);
    --vn-fast: .18s;
    --vn-base: .28s;
}

html { scroll-behavior: smooth; }

/* ---------- Page entrance (subtle, runs once) ----------
   fill-mode is "backwards" on purpose: with "both" the final keyframe would
   stay applied and block the hover transforms below. */
@keyframes vnFadeUp {
    from { opacity: 0; transform: translate3d(0, 10px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
@keyframes vnFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

body.lagom .tiles .tile,
body.lagom .alert-lagom,
body.lagom .package,
body.lagom .domain-checker-container {
    animation: vnFadeUp .45s var(--vn-ease) backwards;
}
body.lagom .tiles .swiper-slide:nth-child(2) .tile,
body.lagom .package-col:nth-child(2) .package { animation-delay: .06s; }
body.lagom .tiles .swiper-slide:nth-child(3) .tile,
body.lagom .package-col:nth-child(3) .package { animation-delay: .12s; }
body.lagom .tiles .swiper-slide:nth-child(4) .tile,
body.lagom .package-col:nth-child(4) .package { animation-delay: .18s; }
body.lagom .package-col:nth-child(5) .package { animation-delay: .24s; }
body.lagom .package-col:nth-child(6) .package { animation-delay: .30s; }

/* opacity only on panels: the dashboard grid is positioned by script */
body.lagom .client-home-panels .panel,
body.lagom .main-content .panel,
body.lagom .table-container {
    animation: vnFade .4s var(--vn-ease) backwards;
}

/* ---------- Tiles (dashboard counters) ---------- */
body.lagom .tile {
    transition: transform var(--vn-base) var(--vn-ease),
                box-shadow var(--vn-base) var(--vn-ease),
                border-color var(--vn-base) var(--vn-ease);
}
body.lagom .tile:hover { transform: translate3d(0, -4px, 0); }
body.lagom .tile:active { transform: translate3d(0, -1px, 0); }
body.lagom .tile .tile-icon-absolute { transition: transform var(--vn-base) var(--vn-ease), opacity var(--vn-base); }
body.lagom .tile:hover .tile-icon-absolute { transform: scale(1.08); }

/* ---------- Homepage service cards (WebHosting, VPS, RDP ...) ---------- */
body.lagom .package.package-link {
    transition: transform var(--vn-base) var(--vn-ease),
                box-shadow var(--vn-base) var(--vn-ease),
                border-color var(--vn-base) var(--vn-ease),
                background-color var(--vn-base) ease;
}
body.lagom .package.package-link:hover {
    transform: translate3d(0, -6px, 0);
    box-shadow: var(--ui-block-shadow-xlg, 0 18px 40px -14px rgba(0, 0, 0, .55));
}
body.lagom .package.package-link:active { transform: translate3d(0, -2px, 0); }
body.lagom .package.package-link .package-title { transition: color var(--vn-fast) ease; }
body.lagom .package.package-link:hover .package-title { color: var(--brand-primary-lighter, var(--brand-primary)); }
/* price line: easier to spot and read */
body.lagom .package.package-link .package-actions .btn { font-weight: 600; font-size: 1rem; }
body.lagom .package.package-link .package-actions .btn i,
body.lagom .package.package-link .package-actions .btn svg { transition: transform var(--vn-base) var(--vn-ease); }
body.lagom .package.package-link:hover .package-actions .btn i,
body.lagom .package.package-link:hover .package-actions .btn svg { transform: translate3d(4px, 0, 0); }

/* ---------- Dark mode: hairline borders and readable text ---------- */
.lagom-dark-mode body.lagom .package.is-boxed,
.lagom-dark-mode body.lagom .tile,
.lagom-dark-mode body.lagom .panel {
    border: 1px solid rgba(255, 255, 255, .07);
}
.lagom-dark-mode body.lagom .package.package-link:hover,
.lagom-dark-mode body.lagom .tile:hover {
    border-color: rgba(129, 140, 248, .55);
}
.lagom-dark-mode body.lagom .package-body,
.lagom-dark-mode body.lagom .section-subtitle,
.lagom-dark-mode body.lagom .section-desc {
    color: rgba(255, 255, 255, .8);
}
.lagom-dark-mode body.lagom .section-caption { font-weight: 600; letter-spacing: .02em; }

/* ---------- Login page ---------- */
/* the "Login with Discord" button is injected above the page with an inline
   style, so it sat flush against the top edge and was narrower than the
   login card: align it with the card (380px) */
body.page-login > .form-group {
    display: block !important;
    width: 100% !important;
    max-width: 380px !important;
    margin: 28px auto 0 !important;
}
body.page-login > .form-group .btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    min-height: 48px;
}

/* ---------- Panels / cards ---------- */
body.lagom .panel {
    transition: box-shadow var(--vn-base) var(--vn-ease),
                border-color var(--vn-base) var(--vn-ease);
}
body.lagom .panel:hover { box-shadow: var(--ui-block-shadow-lg, 0 8px 24px rgba(0, 0, 0, .08)); }

/* ---------- Buttons ---------- */
body.lagom .btn {
    transition: background-color var(--vn-fast) ease,
                border-color var(--vn-fast) ease,
                color var(--vn-fast) ease,
                box-shadow var(--vn-base) var(--vn-ease),
                transform var(--vn-fast) var(--vn-ease);
}
body.lagom .btn:not(:disabled):not(.disabled):hover { transform: translate3d(0, -1px, 0); }
body.lagom .btn:not(:disabled):not(.disabled):active { transform: translate3d(0, 0, 0) scale(.985); }
body.lagom .btn-primary:not(:disabled):not(.disabled):hover { box-shadow: 0 8px 20px -6px rgba(99, 102, 241, .55); }
body.lagom .btn:disabled,
body.lagom .btn.disabled { opacity: .55; cursor: not-allowed; }

/* ---------- Lists, tables: make the clickable row obvious ---------- */
body.lagom a.list-group-item,
body.lagom .list-group-item-action {
    transition: background-color var(--vn-fast) ease, padding var(--vn-base) var(--vn-ease);
}
body.lagom .table tbody tr {
    transition: background-color var(--vn-fast) ease;
}
body.lagom .table-hover tbody tr:hover,
body.lagom .table-list tbody tr:hover {
    background-color: var(--brand-primary-lighter-4, rgba(255, 255, 255, .04));
}
body.lagom .table-list tbody tr[onclick],
body.lagom .table-list tbody tr[data-href] { cursor: pointer; }

/* ---------- Forms: clear focus, calm transitions ---------- */
body.lagom .form-control,
body.lagom .custom-select,
body.lagom .select2-selection {
    transition: border-color var(--vn-fast) ease, box-shadow var(--vn-base) var(--vn-ease), background-color var(--vn-fast) ease;
}
body.lagom .form-control:focus {
    border-color: var(--brand-primary);
    box-shadow: 0 0 0 4px var(--brand-primary-lighter-3, rgba(99, 102, 241, .22));
}
body.lagom :focus-visible {
    outline: 2px solid var(--brand-primary);
    outline-offset: 2px;
}
body.lagom .form-control:focus-visible { outline: none; }

/* ---------- Navigation, dropdowns, tabs ---------- */
body.lagom .nav-link,
body.lagom .dropdown-item,
body.lagom .nav-tabs a {
    transition: color var(--vn-fast) ease, background-color var(--vn-fast) ease, border-color var(--vn-fast) ease;
}
@keyframes vnDrop {
    from { opacity: 0; transform: translate3d(0, -6px, 0); }
    to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
body.lagom .dropdown-menu.show { animation: vnDrop .18s var(--vn-ease) backwards; }
body.lagom .tab-pane.active { animation: vnFade .3s var(--vn-ease) backwards; }

/* ---------- Modals ---------- */
body.lagom .modal.fade .modal-dialog {
    transition: transform .3s var(--vn-ease), opacity .3s var(--vn-ease);
    transform: translate3d(0, 14px, 0) scale(.985);
}
body.lagom .modal.show .modal-dialog { transform: none; }

/* ---------- Status / badges: easier to read at a glance ---------- */
body.lagom .label,
body.lagom .status,
body.lagom .badge {
    font-weight: 600;
    letter-spacing: .01em;
}

/* ---------- Alerts: soft slide in ---------- */
body.lagom .alert-lagom { transition: opacity var(--vn-base), transform var(--vn-base) var(--vn-ease); }

/* ---------- Small details ---------- */
::selection { background: rgba(99, 102, 241, .35); }

/* ---------- Respect users who ask for less motion ---------- */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    body.lagom *,
    body.lagom *::before,
    body.lagom *::after {
        animation-duration: .001ms !important;
        animation-delay: 0s !important;
        transition-duration: .001ms !important;
    }
}