/*
 * INDAX theme for WHMCS (child of Twenty-One).
 * Clean, card-based client area: light canvas, white surfaces, brand coral accent.
 */
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap");

:root {
    --indax-coral: #f55767;          /* logo color: decorative use only */
    --indax-primary: #d12d40;        /* coral shade with AA contrast on white */
    --indax-primary-hover: #b3233a;
    --indax-primary-soft: #fdecee;
    --indax-navy: #020617;
    --indax-ink: #1f2934;            /* brand navy from indax.cl */
    --indax-ink-2: #37485c;
    --indax-text: #2b3440;
    --indax-muted: #6b7684;
    --indax-canvas: #f4f6f9;
    --indax-surface: #ffffff;
    --indax-border: #e3e8ee;
    --indax-radius: 10px;
    --indax-radius-sm: 6px;
    --indax-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .06);
    --indax-shadow-hover: 0 4px 12px rgba(16, 24, 40, .08);
}

/* Base */
body.primary-bg-color {
    background-color: var(--indax-canvas);
    color: var(--indax-text);
    font-family: "Inter", "Lato", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    -webkit-font-smoothing: antialiased;
    /* Sticky footer: main body grows so the footer reaches the bottom on short pages. */
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.primary-bg-color > #main-body { flex: 1 0 auto; }
body.primary-bg-color > #footer { flex-shrink: 0; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
    color: var(--indax-ink);
    font-weight: 600;
    letter-spacing: -.01em;
}
a { color: var(--indax-primary); }
a:hover, a:focus { color: var(--indax-primary-hover); }
.text-muted, small.text-muted { color: var(--indax-muted) !important; }

/* Header */
/* Header: one sticky row (brand + primary nav + actions), see header.tpl */
.indax-header {
    background: var(--indax-surface);
    box-shadow: 0 1px 0 var(--indax-border);
    position: sticky;
    top: 0;
    z-index: 1020;
}
.indax-admin-bar { background: var(--indax-navy); color: #d5dce5; font-size: .8rem; padding: .35rem 0; }
.indax-admin-bar i { color: var(--indax-coral); margin-right: .35rem; }
.indax-admin-bar-link { color: #fff; font-weight: 600; }
.indax-admin-bar-link:hover { color: var(--indax-coral); text-decoration: none; }

.indax-header .indax-navbar {
    background: var(--indax-surface);
    border: 0;
    min-height: 68px;
    padding: 0;
}
.indax-header .indax-navbar > .container {
    align-items: center;
    flex-wrap: nowrap;
    min-height: 68px;
    padding-left: 15px;
    padding-right: 15px;
}
.indax-header .navbar-brand { flex-shrink: 0; margin-right: 1.25rem; padding: 0; }
.indax-header .navbar-brand img.logo-img { height: 32px; max-height: 32px; max-width: 55vw; width: auto; }

/*
 * twenty-one's autoCollapse('#nav', 30) moves items into "More" while #nav is taller than 30px.
 * Links stay short and never wrap, so the menu keeps a stable layout; spacing is tightened
 * between 1200px and 1400px instead. The active underline is an absolutely positioned
 * ::before (::after is Bootstrap's dropdown caret) so it adds no height.
 */
.indax-header #mainNavbar { flex: 1 1 auto; min-width: 0; }
.indax-header #nav { flex-wrap: nowrap; }
.indax-header #mainNavbar .navbar-nav > li { position: relative; }
.indax-header #mainNavbar .navbar-nav > li > a {
    color: var(--indax-ink-2);
    display: block;
    font-weight: 500;
    font-size: .9rem;
    line-height: 1.5;
    padding: .2rem .6rem;
    white-space: nowrap;
}
.indax-header #mainNavbar .navbar-nav > li > a::before {
    background: transparent;
    bottom: -20px;
    content: "";
    height: 2px;
    left: .6rem;
    position: absolute;
    right: .6rem;
}
.indax-header #mainNavbar .navbar-nav > li > a:hover,
.indax-header #mainNavbar .navbar-nav > li.active > a,
.indax-header #mainNavbar .navbar-nav > li > a[aria-expanded="true"] {
    color: var(--indax-primary);
    text-decoration: none;
}
.indax-header #mainNavbar .navbar-nav > li > a:hover::before,
.indax-header #mainNavbar .navbar-nav > li.active > a::before,
.indax-header #mainNavbar .navbar-nav > li > a[aria-expanded="true"]::before { background: var(--indax-primary); }
.indax-header .indax-navbar .dropdown-menu { margin-top: 1.15rem; }
.indax-header .indax-secondary-nav { flex-shrink: 0; }
.indax-header .indax-secondary-nav > li > a {
    max-width: 170px;
    overflow: hidden;
    text-overflow: ellipsis;
}
@media (min-width: 1200px) and (max-width: 1399.98px) {
    .indax-header .navbar-brand { margin-right: .75rem; }
    .indax-header #mainNavbar .navbar-nav > li > a { font-size: .86rem; padding-left: .45rem; padding-right: .45rem; }
    .indax-header #mainNavbar .navbar-nav > li > a::before { left: .45rem; right: .45rem; }
    .indax-header .indax-secondary-nav > li > a { max-width: 120px; }
    .indax-toolbar { margin-left: .25rem; }
    .indax-toolbar .nav-item { margin-left: .1rem; }
}

.indax-toolbar { align-items: center; align-self: center; flex-direction: row; margin-left: .75rem; }
.indax-toolbar .nav-item { align-items: center; display: flex; margin-left: .35rem; }
.indax-toolbar .btn,
.indax-toolbar .btn i,
.indax-toolbar .fas { color: var(--indax-ink-2); opacity: 1; }
/* header.header prefix beats twenty-one's "header.header .toolbar .nav-link". */
header.header .indax-toolbar .nav-link {
    align-items: center;
    background: transparent;
    border: 1px solid transparent;
    font-size: 1rem;
    border-radius: var(--indax-radius-sm);
    color: var(--indax-ink-2);
    display: inline-flex;
    height: 40px;
    justify-content: center;
    min-width: 40px;
    padding: 0 .55rem;
    position: relative;
}
.indax-toolbar .nav-link i { font-size: 1.05rem; }
.indax-toolbar .nav-link:hover,
.indax-toolbar .nav-link:focus { background: var(--indax-canvas); color: var(--indax-primary); }
.indax-toolbar .badge-info {
    background: var(--indax-primary);
    border: 2px solid var(--indax-surface);
    border-radius: 999px;
    color: #fff;
    font-size: .65rem;
    min-width: 18px;
    padding: .15rem .3rem;
    position: absolute;
    right: 2px;
    top: 2px;
}
.indax-account-chip { border-color: var(--indax-border) !important; gap: .5rem; padding: 0 .7rem 0 .35rem !important; }
.indax-avatar {
    align-items: center;
    background: var(--indax-primary-soft);
    border-radius: 999px;
    color: var(--indax-primary);
    display: inline-flex;
    font-size: .8rem;
    font-weight: 700;
    height: 28px;
    justify-content: center;
    width: 28px;
}
.indax-account-name {
    color: var(--indax-ink);
    font-size: .85rem;
    font-weight: 600;
    max-width: 160px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Wider layout on large screens (Bootstrap 4 stops at 1140px). */
@media (min-width: 1400px) {
    .container { max-width: 1320px; }
}

/* Collapsed menu (below xl) */
@media (max-width: 1199.98px) {
    .indax-header .indax-navbar > .container { flex-wrap: wrap; }
    .indax-header .navbar-brand { margin-right: auto; }
    .indax-header #mainNavbar { order: 3; width: 100%; padding-bottom: .75rem; }
    .indax-header #mainNavbar .navbar-nav > li > a { padding: .6rem .25rem; border-bottom: 0; }
    .indax-mobile-search { padding-top: .25rem; }
}
.dropdown-menu {
    border: 1px solid var(--indax-border);
    border-radius: var(--indax-radius-sm);
    box-shadow: var(--indax-shadow-hover);
    padding: .4rem;
}
.dropdown-item { border-radius: 4px; color: var(--indax-text); padding: .45rem .75rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--indax-primary-soft); color: var(--indax-primary); }
.dropdown-item.active, .dropdown-item:active { background: var(--indax-primary); color: #fff; }

/* Breadcrumb */
.master-breadcrumb { background: transparent; border: 0; }
.master-breadcrumb .breadcrumb { background: transparent; padding: 1rem 0 0; margin: 0; font-size: .85rem; }
.master-breadcrumb .breadcrumb-item a { color: var(--indax-muted); }
.master-breadcrumb .breadcrumb-item.active { color: var(--indax-ink); }

/* Layout */
#main-body { background: transparent; padding: 1.5rem 0 3rem; }

/* Cards and panels */
.card, .panel {
    background: var(--indax-surface);
    border: 1px solid var(--indax-border);
    border-radius: var(--indax-radius);
    box-shadow: var(--indax-shadow);
}
.card-header, .panel-heading {
    background: var(--indax-surface);
    border-bottom: 1px solid var(--indax-border);
    border-radius: var(--indax-radius) var(--indax-radius) 0 0 !important;
}
.card-header .card-title, .card-title { color: var(--indax-ink); font-weight: 600; }
.card-footer { background: #fafbfc; border-top-color: var(--indax-border); }

/* Sidebar */
.sidebar .card { overflow: hidden; }
.sidebar .card-header { padding: .85rem 1.1rem; }
.sidebar .card-header .card-title { font-size: .95rem; }
.sidebar .list-group-item {
    border-color: var(--indax-border);
    color: var(--indax-text);
    padding: .6rem 1.1rem;
}
.sidebar .list-group-item:hover { background: var(--indax-canvas); color: var(--indax-ink); }
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:hover {
    background: var(--indax-primary-soft);
    border-color: var(--indax-border);
    box-shadow: inset 3px 0 0 var(--indax-primary);
    color: var(--indax-primary);
    font-weight: 600;
}
.sidebar .list-group-item .badge { background: var(--indax-canvas); color: var(--indax-ink-2); font-weight: 600; }

/* Client area home tiles */
/* Each tile: soft colored icon badge (by position), big number, small label. */
.tiles .row { margin: 0 -.5rem; }
.tiles .col-6, .tiles .col-xl-3 { padding: 0 .5rem; margin-bottom: 1rem; }
.tiles .tile {
    --tile-fg: var(--indax-primary);
    --tile-bg: var(--indax-primary-soft);
    background: var(--indax-surface);
    border: 1px solid var(--indax-border);
    border-radius: var(--indax-radius);
    box-shadow: var(--indax-shadow);
    display: block;
    min-height: 0;
    padding: 1.25rem 1.25rem 1.1rem;
    position: relative;
    text-decoration: none;
    transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease;
}
.tiles .col-6:nth-child(2) .tile { --tile-fg: #18794e; --tile-bg: #e7f6ee; }
.tiles .col-6:nth-child(3) .tile { --tile-fg: #2459a8; --tile-bg: #e8f0fc; }
.tiles .col-6:nth-child(4) .tile { --tile-fg: #9a5b00; --tile-bg: #fff4e0; }
.tiles .tile:hover { border-color: var(--tile-fg); box-shadow: var(--indax-shadow-hover); transform: translateY(-1px); }
.tiles .tile i {
    align-items: center;
    background: var(--tile-bg);
    border-radius: 10px;
    color: var(--tile-fg);
    display: inline-flex;
    font-size: 1.15rem;
    height: 44px;
    justify-content: center;
    margin: 0 0 .9rem;
    opacity: 1;
    position: static;
    width: 44px;
}
.tiles .tile .stat { color: var(--indax-ink); font-size: 1.9rem; font-weight: 700; line-height: 1.1; margin: 0; }
.tiles .tile .title {
    color: var(--indax-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .05em;
    margin-top: .2rem;
    text-transform: uppercase;
}
.tiles .tile .highlight { display: none; }

/* Home panels: twenty-one's colored top accent becomes a left accent. */
.client-home-cards .card[class*="card-accent-"] { border-top-width: 1px; }
.client-home-cards .card.card-accent-red { box-shadow: inset 3px 0 0 #d12d40, var(--indax-shadow); }
.client-home-cards .card.card-accent-gold { box-shadow: inset 3px 0 0 #d99100, var(--indax-shadow); }
.client-home-cards .card.card-accent-green { box-shadow: inset 3px 0 0 #18794e, var(--indax-shadow); }
.client-home-cards .card.card-accent-blue { box-shadow: inset 3px 0 0 #2459a8, var(--indax-shadow); }
.client-home-cards .card.card-accent-red .card-title i { color: #d12d40; }
.client-home-cards .card[class*="card-accent-"] > .card-header,
.client-home-cards .card[class*="card-accent-"] > .card-body,
.client-home-cards .card[class*="card-accent-"] > .card-footer { background: transparent; border-left: 0; }
.client-home-cards .card .card-title { font-size: 1rem; }
.client-home-cards .card .list-group-item { border-color: var(--indax-border); }
.client-home-cards .card .list-group-item:hover { background: #fafbfc; }

/* Buttons */
.btn { border-radius: var(--indax-radius-sm); font-weight: 500; }
.btn-primary, .btn-success, .btn-info.btn-checkout {
    background: var(--indax-primary);
    border-color: var(--indax-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:not(:disabled):not(.disabled):active,
.btn-success:hover, .btn-success:focus {
    background: var(--indax-primary-hover);
    border-color: var(--indax-primary-hover);
    color: #fff;
}
.btn-primary:focus, .btn-success:focus { box-shadow: 0 0 0 .2rem rgba(209, 45, 64, .25); }
.btn-default, .btn-outline-secondary {
    background: var(--indax-surface);
    border: 1px solid var(--indax-border);
    color: var(--indax-ink-2);
}
.btn-default:hover, .btn-outline-secondary:hover { border-color: var(--indax-ink-2); color: var(--indax-ink); background: var(--indax-surface); }

/* Forms */
.form-control, .custom-select {
    border-color: var(--indax-border);
    border-radius: var(--indax-radius-sm);
    color: var(--indax-text);
}
.form-control:focus, .custom-select:focus {
    border-color: var(--indax-primary);
    box-shadow: 0 0 0 .2rem rgba(209, 45, 64, .15);
}
.custom-control-input:checked ~ .custom-control-label::before { background: var(--indax-primary); border-color: var(--indax-primary); }

/* Tables */
.table thead th, .table-list thead th {
    background: #fafbfc;
    border-bottom: 1px solid var(--indax-border);
    color: var(--indax-muted);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
}
.table td, .table th { border-top-color: var(--indax-border); }
.table-hover tbody tr:hover { background: #fafbfc; }

/* Status labels */
.label, .badge, .status { border-radius: 999px; font-weight: 600; }
.label-success, .status-active, .status-paid, .status-open { background: #e7f6ee; color: #18794e; }
.label-warning, .status-pending, .status-unpaid { background: #fff4e0; color: #9a5b00; }
.label-danger, .status-suspended, .status-cancelled, .status-overdue, .status-terminated { background: #fdecee; color: #b3233a; }

/* Alerts */
.alert { border-radius: var(--indax-radius-sm); border-width: 1px; }

/* Pagination */
.page-item.active .page-link { background: var(--indax-primary); border-color: var(--indax-primary); }
.page-link { color: var(--indax-primary); }

/* Homepage domain search */
.home-domain-search {
    background: linear-gradient(135deg, var(--indax-ink) 0%, var(--indax-ink-2) 100%);
    border: 0;
}
.home-domain-search h2 { color: #fff; }
.home-domain-search .input-group-wrapper { border-radius: var(--indax-radius); }

/* Footer */
footer#footer, .footer {
    background: var(--indax-navy);
    color: #b9c3cf;
}
footer#footer a, .footer a { color: #d5dce5; }
footer#footer a:hover, .footer a:hover { color: #fff; }
footer#footer .nav-link { color: #d5dce5; }
footer#footer .copyright { color: #8e9aa8; }

/* Product details overview */
.indax-product-summary__header { align-items: flex-start; display: flex; gap: 1.5rem; justify-content: space-between; margin-bottom: 1.5rem; }
.indax-product-summary__identity { align-items: flex-start; display: flex; gap: .9rem; min-width: 0; }
.indax-product-summary__icon { align-items: center; background: var(--indax-primary-soft); border-radius: 9px; color: var(--indax-primary); display: inline-flex; flex: 0 0 42px; height: 42px; justify-content: center; }
.indax-product-summary__identity h3 { font-size: 1.15rem; line-height: 1.3; margin: .05rem 0 .2rem; }
.indax-product-summary__eyebrow, .indax-product-summary__tile > span { color: var(--indax-muted); display: block; font-size: .75rem; font-weight: 600; letter-spacing: .03em; text-transform: uppercase; }
.indax-product-summary__domain { color: var(--indax-ink-2); font-size: .88rem; overflow-wrap: anywhere; }
.indax-product-summary__actions { align-items: center; display: flex; flex: 0 0 auto; flex-wrap: wrap; gap: .5rem; justify-content: flex-end; }
.indax-product-summary__status { border-radius: 999px; display: inline-block; font-size: .78rem; font-weight: 700; line-height: 1; padding: .45rem .65rem; }
.indax-product-summary__status.product-status-active { background: #e8f6ef; color: #167346; }
.indax-product-summary__status.product-status-pending { background: #fff4d8; color: #8b5d00; }
.indax-product-summary__status.product-status-suspended, .indax-product-summary__status.product-status-terminated, .indax-product-summary__status.product-status-cancelled, .indax-product-summary__status.product-status-fraud { background: #fdecee; color: var(--indax-primary); }
.indax-product-summary__tiles { display: grid; gap: .75rem; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.indax-product-summary__tile { background: #fafbfc; border: 1px solid var(--indax-border); border-radius: var(--indax-radius-sm); min-width: 0; padding: .8rem .9rem; }
.indax-product-summary__tile strong { color: var(--indax-ink); display: block; font-size: .98rem; font-weight: 600; line-height: 1.45; margin-top: .25rem; overflow-wrap: anywhere; }
.indax-product-summary__tile--emphasis { background: var(--indax-primary-soft); border-color: #f7c7ce; }
.indax-product-summary__tile--emphasis strong { color: var(--indax-primary-hover); }
@media (max-width: 767.98px) { .indax-product-summary__header { flex-direction: column; gap: 1rem; }.indax-product-summary__actions { justify-content: flex-start; }.indax-product-summary__tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px) { .indax-product-summary__tiles { grid-template-columns: 1fr; } }