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

    ** Custom Stylesheet **

    Any custom styling you want to apply should be
    defined here.

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

/* Custom CSS for Nexus Cart
 *
 * This block allows you to customize theme colors and styles for the entire Nexus Cart template.
 *
 * To customize colors:
 * - Replace the var() references with your own hex colors or other CSS values.
 * - For example, instead of --primary: #4b5563; use --primary: #your-color;
 * - You can also override any CSS properties here.
 */

html {
    font-size: 14px;
}

:root {
    --white: #fff;

    /* Neutral shades */
    --neutral-50: #fbf9fa;
    --neutral-100: #f4f5f7;
    --neutral-200: #e4e4e7;
    --neutral-300: #d0d5dd;
    --neutral-400: #9ca3af;
    --neutral-500: #6b7280;
    --neutral-600: #4b5563;
    --neutral-700: #374151;
    --neutral-800: #1f2937;
    --neutral-900: #111827;
    --neutral-950: #030712;

    /* chlink.ro brand palette (matches the main Next.js site's brand-* scale) */
    --primary-50: #eef2ff;
    --primary-100: #e0e7ff;
    --primary-200: #c7d2fe;
    --primary-300: #a5b4fc;
    --primary-400: #818cf8;
    --primary-500: #6366f1;
    --primary-600: #4f46e5;
    --primary-700: #4338ca;
    --primary-800: #362f91;
    --primary-900: #1b2a6b;
    --primary-950: #131b47;

    /* Primary colors */
    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);

    /* Secondary colors */
    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    /* Success colors */
    --success: #00a63e;
    --success-lifted: #008236;
    --success-accented: #016630;

    /* Info colors */
    --info: #155dfc;
    --info-lifted: #1447e6;
    --info-accented: #193cb8;

    /* Notice colors */
    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    /* Warning colors */
    --warning: #f54a00;
    --warning-lifted: #ca3500;
    --warning-accented: #9f2d00;

    /* Error colors */
    --error: #e7000b;
    --error-lifted: #c10007;
    --error-accented: #9f0712;

    /* Grayscale colors */
    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    /* Neutral colors */
    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    /* Text neutral colors */
    --text-inverted: var(--white);
    --text-muted: var(--neutral-400);
    --text-lifted: var(--neutral-500);
    --text-accented: var(--neutral-600);
    --text: var(--neutral-900);

    /* Border neutral colors */
    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

    /* Background neutral colors */
    --bg: var(--white);
    --bg-muted: var(--neutral-50);
    --bg-lifted: var(--neutral-100);
    --bg-accented: var(--neutral-200);
    --bg-inverted: var(--neutral-900);

    /* Additional colors */
    --yellow-200: #fff085;
    --yellow-300: #ffdf20;
    --teal-300: #46edd5;
    --teal-400: #00d5be;
    --emerald-300: #5ee9b5;
    --pink-400: #fb64b6;

    /* Additional custom properties */
    /* Font sizes */
    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    /* Spacing */
    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    /* Rounding */
    --rounding-sm: 0.25rem;
    --rounding-md: 0.5rem;
    --rounding-lg: 0.75rem;

    /* Other */
    --letter-spacing: 0em;
    --disabled-opacity: 25%;

    /* chlink.ro brand tokens, mirroring the main Next.js site */
    --chlink-ink-950: #131b47;
    --chlink-brand-50: #eef2ff;
    --chlink-brand-100: #e0e7ff;
    --chlink-brand-200: #c7d2fe;
    --chlink-brand-300: #a5b4fc;
    --chlink-brand-400: #818cf8;
    --chlink-brand-500: #6366f1;
    --chlink-brand-600: #4f46e5;
    --chlink-brand-700: #4338ca;
    --chlink-brand-900: #1b2a6b;
}

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

    ** chlink.ro theme — matches the main Next.js site **

    Typography, header, navigation, buttons, cards and
    footer are reskinned here to match www.chlink.ro.
    Structural Smarty logic in the .tpl files is untouched;
    only markup wrappers/classes and this stylesheet changed.

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

/* ---------- Typography ---------- */

body,
input,
button,
select,
textarea,
.btn {
    font-family: "Inter", "Open Sans", Verdana, Tahoma, sans-serif;
}

h1, h2, h3, h4, h5, h6,
.panel-heading, .navbar-brand, .logo-text {
    font-family: "Manrope", "Raleway", "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-weight: 800;
}

a {
    color: var(--chlink-brand-600);
}
a:hover,
a:focus {
    color: var(--chlink-brand-700);
}

/* ---------- Header: utility bar ---------- */

section#header {
    background: var(--chlink-ink-950);
    background-color: var(--chlink-ink-950);
    padding: 8px 0;
    border-radius: 0;
}

#header .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 8px;
}

#header .header-utility-left {
    display: flex;
    align-items: center;
    gap: 20px;
    font-size: 12px;
}

#header .header-utility-left a {
    color: var(--chlink-brand-100);
}
#header .header-utility-left a:hover {
    color: #fff;
}

#header .header-hours {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--chlink-brand-100);
    white-space: nowrap;
}

@media (max-width: 767px) {
    #header .header-hours {
        display: none;
    }
}

.theme-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 0;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.1);
    color: var(--chlink-brand-100);
    cursor: pointer;
    transition: background-color 0.15s ease, color 0.15s ease;
}
.theme-toggle:hover,
.theme-toggle:focus {
    background-color: rgba(255, 255, 255, 0.2);
    color: #fff;
}
.theme-icon-sun {
    display: none;
}
html.dark-mode .theme-icon-moon {
    display: none;
}
html.dark-mode .theme-icon-sun {
    display: inline;
}

#header .top-nav {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
}

#header .top-nav > li > a {
    color: var(--chlink-brand-100);
    font-size: 12px;
    padding: 6px 10px;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#header .top-nav > li > a:hover {
    color: #fff;
    background-color: rgba(255, 255, 255, 0.1);
}

#header .top-nav > li.primary-action > a.btn {
    background-color: var(--chlink-brand-600);
    color: #fff;
    padding: 6px 16px;
}
#header .top-nav > li.primary-action > a.btn:hover {
    background-color: var(--chlink-brand-700);
}

/* ---------- Main navigation ---------- */

#main-menu {
    border-bottom: 1px solid #eef0f4;
}

.navbar-main {
    background-color: #fff;
    border: 0;
    min-height: 68px;
}

.navbar-main .container {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
}

.navbar-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    float: none;
}

/* Desktop: logo, then nav links filling the rest of the row, never overlapping. */
@media (min-width: 992px) {
    .navbar-main .container {
        flex-wrap: nowrap;
    }
    .navbar-header {
        float: none;
        flex: 0 0 auto;
        margin-right: 24px;
    }
    .navbar-main .collapse.navbar-collapse {
        float: none;
        display: flex !important;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 auto;
        height: auto !important;
        padding: 0;
        overflow: visible;
        box-shadow: none;
    }
    .navbar-main .navbar-nav {
        float: none;
        display: flex;
        align-items: center;
        margin: 0;
    }
    .navbar-main .navbar-nav.navbar-right {
        margin-left: 8px;
    }
}

.navbar-main .logo {
    display: flex;
    align-items: center;
    height: 68px;
    padding: 0;
    float: none;
    flex-shrink: 0;
}
.navbar-main .logo img {
    height: 32px;
    width: auto;
    filter: brightness(0);
}
.navbar-main .logo.logo-text {
    font-size: 22px;
    font-weight: 800;
    color: var(--chlink-ink-950);
}

.navbar-main .navbar-nav > li > a {
    color: #334155;
    font-family: "Inter", sans-serif;
    font-weight: 600;
    font-size: 14px;
    padding: 10px 16px;
    margin: 14px 2px;
    border-radius: 999px;
    transition: background-color 0.15s ease, color 0.15s ease;
}

.navbar-main .navbar-nav > li > a:hover,
.navbar-main .navbar-nav > li > a:focus,
.navbar-main .navbar-nav > .active > a,
.navbar-main .navbar-nav > .active > a:hover,
.navbar-main .navbar-nav > .active > a:focus,
.navbar-main .navbar-nav > .open > a,
.navbar-main .navbar-nav > .open > a:hover,
.navbar-main .navbar-nav > .open > a:focus {
    color: var(--chlink-brand-700);
    background-color: var(--chlink-brand-50);
}

.navbar-main .dropdown-menu {
    padding: 6px;
    border: 1px solid #eef0f4;
    border-radius: 14px;
    box-shadow: 0 12px 32px rgba(19, 27, 71, 0.12);
}
.navbar-main .navbar-nav .dropdown-menu > li > a {
    border-radius: 10px;
    font-weight: 500;
    color: #334155;
}
.navbar-main .navbar-nav .dropdown-menu > li > a:hover,
.navbar-main .navbar-nav .dropdown-menu > li > a:focus,
.navbar-main .navbar-nav .dropdown-menu > .active > a,
.navbar-main .navbar-nav .dropdown-menu > .active > a:hover,
.navbar-main .navbar-nav .dropdown-menu > .active > a:focus {
    color: var(--chlink-brand-700);
    background-color: var(--chlink-brand-50);
}

@media (max-width: 991px) {
    .navbar-main .logo {
        height: 56px;
    }
    .navbar-main .navbar-nav > li > a {
        margin: 2px 0;
    }
}

@media (max-width: 767px) {
    /* The stock theme's mobile dropdown text (#ddd/#fff) was designed for the
       original dark-blue navbar; needs a dark, readable color on our white one. */
    .navbar-main .navbar-nav .open .dropdown-menu > li > a {
        color: #475569;
    }
    .navbar-main .navbar-nav .open .dropdown-menu > li > a:hover {
        color: var(--chlink-brand-700);
    }
    .navbar-main .navbar-nav .dropdown-menu {
        box-shadow: none;
        border: 0;
        background-color: transparent;
    }
}

/* ---------- Buttons ---------- */

.btn,
input[type="submit"].btn,
input[type="button"].btn {
    border-radius: 999px;
    font-weight: 600;
    transition: transform 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.btn:active {
    transform: scale(0.97);
}

/* Anchor-rendered buttons (e.g. custom menu items with a "btn ..." class) must not
   inherit the global link color — Bootstrap's colored button variants need white text. */
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:visited {
    color: #fff;
}
a.btn.btn-default,
a.btn.btn-default:hover,
a.btn.btn-default:focus {
    color: var(--chlink-brand-700);
}
a.btn.btn-link {
    color: var(--chlink-brand-600);
}

.btn-primary,
input[type="submit"].btn-primary {
    background-color: var(--chlink-brand-600);
    border-color: var(--chlink-brand-600);
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
input[type="submit"].btn-primary:hover {
    background-color: var(--chlink-brand-700) !important;
    border-color: var(--chlink-brand-700) !important;
}

.btn-default {
    border-color: var(--chlink-brand-200);
    color: var(--chlink-brand-700);
}
.btn-default:hover {
    background-color: var(--chlink-brand-50);
    color: var(--chlink-brand-700);
}

/* ---------- Homepage domain-search hero ---------- */

section#home-banner {
    background: linear-gradient(180deg, var(--chlink-ink-950) 0%, var(--chlink-brand-900) 100%);
    background-color: var(--chlink-ink-950);
    padding: 56px 0;
}
section#home-banner h2 {
    color: #fff;
}
section#home-banner .btn {
    border-radius: 999px;
}
section#home-banner .btn.search,
section#home-banner .btn.transfer {
    background-color: var(--chlink-brand-600);
    border-color: var(--chlink-brand-600);
    color: #fff;
}
section#home-banner .btn.search:hover,
section#home-banner .btn.transfer:hover {
    background-color: var(--chlink-brand-700);
}

.home-shortcuts {
    background-color: #f8f9fc;
    color: #334155;
}
.home-shortcuts li {
    border-right-color: #e2e8f0;
}
.home-shortcuts li:first-child {
    border-left-color: #e2e8f0;
}
.home-shortcuts li a {
    color: #334155;
}
.home-shortcuts li a:hover {
    color: var(--chlink-brand-700);
}
.home-shortcuts i {
    color: var(--chlink-brand-600);
}

/* ---------- Panels / cards ---------- */

.panel {
    border: 1px solid #eef0f4;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgba(19, 27, 71, 0.04);
}
.panel-heading,
.panel-default > .panel-heading {
    background-color: #fff;
    border-bottom: 1px solid #eef0f4;
    border-radius: 16px 16px 0 0 !important;
    font-weight: 700;
    color: var(--chlink-ink-950);
}
.panel-primary > .panel-heading {
    background-color: var(--chlink-brand-600);
    border-color: var(--chlink-brand-600);
    color: #fff;
}

/* ---------- Footer ---------- */

section#footer {
    background: var(--chlink-ink-950);
    background-color: var(--chlink-ink-950);
    color: var(--chlink-brand-100);
    padding: 56px 0 0;
    position: relative;
    margin-top: 40px;
    border-top: 0;
    font-size: 1em;
}

#footer .footer-columns {
    display: grid;
    grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr;
    gap: 32px;
    padding-bottom: 40px;
}
/* Bootstrap's .container:before/:after clearfix would otherwise count as two
   extra (invisible) grid items and shift every real column over by one. */
#footer .footer-columns:before,
#footer .footer-columns:after {
    content: none;
    display: none;
}

#footer .footer-col h3 {
    color: #fff;
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    margin-bottom: 16px;
}

#footer .footer-col ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
#footer .footer-col ul li {
    margin-bottom: 10px;
}
#footer .footer-col a {
    color: var(--chlink-brand-200);
    font-size: 14px;
    text-decoration: none;
}
#footer .footer-col a:hover {
    color: #fff;
}

#footer .footer-logo img {
    height: 32px;
    width: auto;
    filter: brightness(0) invert(1);
}
#footer .footer-col-brand p {
    margin: 16px 0;
    font-size: 14px;
    color: var(--chlink-brand-200);
    max-width: 280px;
}
#footer .footer-contact {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
#footer .footer-contact a {
    color: var(--chlink-brand-100);
}
#footer .footer-contact a:hover {
    color: #fff;
}

#footer .footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding: 20px 0;
}
#footer .footer-bottom .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
#footer .footer-bottom p {
    margin: 0;
    font-size: 12px;
    color: var(--chlink-brand-300);
}
#footer .footer-badges {
    display: flex;
    align-items: center;
    gap: 12px;
}
#footer .footer-badges img {
    height: 28px;
    width: auto;
}

section#footer .back-to-top {
    position: absolute;
    top: -20px;
    right: 24px;
    float: none;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 999px;
    background-color: var(--chlink-brand-600);
    color: #fff;
    box-shadow: 0 8px 20px rgba(79, 70, 229, 0.35);
}
section#footer .back-to-top i {
    padding: 0;
    background-color: transparent;
    color: #fff;
    opacity: 1;
    border-radius: 0;
}
section#footer .back-to-top:hover {
    background-color: var(--chlink-brand-700);
    color: #fff;
}

@media (max-width: 991px) {
    #footer .footer-columns {
        grid-template-columns: 1fr 1fr;
    }
    #footer .footer-col-brand {
        grid-column: 1 / -1;
    }
}
@media (max-width: 600px) {
    #footer .footer-columns {
        grid-template-columns: 1fr;
    }
}

/* ---------- Misc accents ---------- */

.pagination > .active > a,
.pagination > .active > span,
.pagination > .active > a:hover,
.pagination > .active > span:hover {
    background-color: var(--chlink-brand-600);
    border-color: var(--chlink-brand-600);
}

::selection {
    background-color: var(--chlink-brand-200);
}

/* ---------- Page background (matches www.chlink.ro) ---------- */

body {
    background-color: #ffffff;
    color: #0f1729;
}

/* ---------- Dark mode ----------
   Toggled by adding/removing "dark-mode" on <html> (see header.tpl).
   Colors mirror the Next.js site's own dark theme tokens. */

html.dark-mode body {
    background-color: #0a0f1f;
    color: #e7eaf5;
}
html.dark-mode #main-body {
    background-color: #0a0f1f;
}

html.dark-mode #main-menu {
    border-bottom-color: #1f2740;
}
html.dark-mode .navbar-main {
    background-color: #0f1526;
}
html.dark-mode .navbar-main .logo img {
    filter: brightness(0) invert(1);
}
html.dark-mode .navbar-main .logo.logo-text {
    color: #e7eaf5;
}
html.dark-mode .navbar-main .navbar-nav > li > a {
    color: #cbd5e1;
}
html.dark-mode .navbar-main .navbar-nav > li > a:hover,
html.dark-mode .navbar-main .navbar-nav > li > a:focus,
html.dark-mode .navbar-main .navbar-nav > .open > a {
    color: var(--chlink-brand-200);
    background-color: rgba(129, 140, 248, 0.12);
}
html.dark-mode .navbar-main .dropdown-menu {
    background-color: #131a2e;
    border-color: #232b45;
}
html.dark-mode .navbar-main .navbar-nav .dropdown-menu > li > a {
    color: #cbd5e1;
}
html.dark-mode .navbar-main .navbar-nav .dropdown-menu > li > a:hover,
html.dark-mode .navbar-main .navbar-nav .dropdown-menu > li > a:focus {
    color: var(--chlink-brand-200);
    background-color: rgba(129, 140, 248, 0.12);
}

html.dark-mode .home-shortcuts {
    background-color: #0f1526;
}
html.dark-mode .home-shortcuts a {
    color: #cbd5e1;
}

html.dark-mode .panel {
    background-color: #111834;
    border-color: #232b45;
}
html.dark-mode .panel-heading,
html.dark-mode .panel-default > .panel-heading {
    background-color: #111834;
    border-bottom-color: #232b45;
    color: #e7eaf5;
}
html.dark-mode .panel-body {
    color: #cbd5e1;
}
html.dark-mode .list-group-item {
    background-color: transparent;
    border-color: #232b45;
    color: #cbd5e1;
}

html.dark-mode table,
html.dark-mode .table {
    color: #cbd5e1;
}
html.dark-mode .table > thead > tr > th,
html.dark-mode .table > tbody > tr > td {
    border-color: #232b45;
}
html.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #0f1526;
}

html.dark-mode .form-control {
    background-color: #111834;
    border-color: #232b45;
    color: #e7eaf5;
}
html.dark-mode .form-control::placeholder {
    color: #64748b;
}
html.dark-mode .input-group-addon {
    background-color: #0f1526;
    border-color: #232b45;
    color: #cbd5e1;
}

html.dark-mode .btn-default {
    background-color: #111834;
    border-color: #232b45;
    color: #cbd5e1;
}
html.dark-mode .btn-default:hover {
    background-color: #1a2340;
    color: #fff;
}

html.dark-mode a {
    color: var(--chlink-brand-300);
}
html.dark-mode a:hover,
html.dark-mode a:focus {
    color: var(--chlink-brand-200);
}
html.dark-mode a.btn {
    color: #fff;
}
html.dark-mode a.btn.btn-default {
    color: #cbd5e1;
}

html.dark-mode #footer {
    background: #05070f;
}