/*
 * Antler look for the FOSSBilling client area (my.cnqdev.xyz)
 * Colours, font and components taken from the cnqdev.xyz marketing site (Antler template, pink scheme).
 * Loaded after Huraga's compiled CSS, so it only overrides presentation.
 */

/* ---------- Fonts (local copies of the site's Open Sans) ---------- */
@font-face { font-family: "Open Sans"; font-weight: 400; font-style: normal; font-display: swap;
    src: url("fonts/OpenSans-Regular.woff2") format("woff2"), url("fonts/OpenSans-Regular.woff") format("woff"); }
@font-face { font-family: "Open Sans"; font-weight: 600; font-style: normal; font-display: swap;
    src: url("fonts/OpenSans-SemiBold.woff2") format("woff2"), url("fonts/OpenSans-SemiBold.woff") format("woff"); }
@font-face { font-family: "Open Sans"; font-weight: 700; font-style: normal; font-display: swap;
    src: url("fonts/OpenSans-Bold.woff2") format("woff2"), url("fonts/OpenSans-Bold.woff") format("woff"); }

/* ---------- Palette ---------- */
:root, [data-bs-theme="light"] {
    --antler-pink: #ee5586;
    --antler-pink-rgb: 238, 85, 134;
    --antler-purple: #a5215e;
    --antler-yellow: #fdd700;
    --antler-dark: #15212a;
    --antler-darker: #121e25;
    --antler-grey: #808080;
    --antler-bg: #f6f6f6;
    --antler-gradient: linear-gradient(89deg, #a5215e 3%, #ee5586 98%);

    --bs-primary: var(--antler-pink);
    --bs-primary-rgb: var(--antler-pink-rgb);
    --bs-link-color: var(--antler-pink);
    --bs-link-color-rgb: var(--antler-pink-rgb);
    --bs-link-hover-color: var(--antler-purple);
    --bs-link-hover-color-rgb: 165, 33, 94;
    --bs-body-bg: var(--antler-bg);
    --bs-body-color: #212122;
    --bs-body-font-family: "Open Sans", sans-serif;
    --bs-border-radius: .6rem;
    --bs-border-radius-lg: .9rem;
    --bs-focus-ring-color: rgba(var(--antler-pink-rgb), .25);
    --bs-primary-text-emphasis: var(--antler-purple);
    --bs-primary-bg-subtle: #fde8ef;
    --bs-primary-border-subtle: #f8b9cd;
}

body.antler {
    font-family: "Open Sans", sans-serif;
    background-color: var(--antler-bg);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}
body.antler h1, body.antler h2, body.antler h3, body.antler h4, body.antler h5 { font-weight: 700; color: #181b22; }

/* ---------- Header (same gradient bar as the site's sticky menu) ---------- */
.antler-header {
    background: var(--antler-gradient);
    box-shadow: 0 2px 8px 0 rgba(62, 62, 79, .23);
    position: sticky;
    top: 0;
    z-index: 1030;
}
.antler-header .navbar { padding: 13px 0; background: transparent !important; } /* Huraga paints .navbar with the body background */
.antler-header .navbar-brand img { height: 36px; width: auto; }
.antler-header .nav-link {
    color: #fff !important;
    font-size: 15px;
    padding: .5rem .9rem !important;
    position: relative;
    background: none;
    border: 0;
}
.antler-header .nav-link:hover, .antler-header .nav-link.active { color: var(--antler-yellow) !important; }
.antler-header .nav-link.active::after {
    content: ""; position: absolute; left: .9rem; right: .9rem; bottom: .15rem;
    height: 2px; background: var(--antler-yellow); border-radius: 2px;
}
.antler-header .navbar-toggler { border-color: rgba(255, 255, 255, .5); }
.antler-header .dropdown-menu { border: 0; box-shadow: 0 10px 30px rgba(21, 33, 42, .2); }
.antler-header .dropdown-item:active { background-color: var(--antler-pink); }
.antler-header .form-select { min-width: 8rem; background-color: rgba(255, 255, 255, .15); color: #fff; border-color: rgba(255, 255, 255, .35); }
.antler-header .form-select option { color: #212122; }
@media (max-width: 991.98px) {
    .antler-header .navbar-collapse { padding: .75rem 0; }
    .antler-header .nav-link.active::after { display: none; }
}

/* ---------- Dark patterned band under the header (Antler "top-header" look) ---------- */
.antler-page-band {
    height: 110px;
    background: var(--antler-dark) url("img/motpath.png") repeat;
    background-blend-mode: overlay;
}
.antler-main { margin-top: -70px; margin-bottom: 3rem; flex: 1 0 auto; position: relative; z-index: 1; }
.antler-public-body { margin-top: -70px; margin-bottom: 3rem; flex: 1 0 auto; position: relative; z-index: 1; }

.antler .breadcrumb { --bs-breadcrumb-divider-color: rgba(255, 255, 255, .6); margin-bottom: 1.25rem; }
.antler .breadcrumb a { color: #fff; text-decoration: none; }
.antler .breadcrumb .breadcrumb-item.active { color: var(--antler-yellow); }

/* ---------- Cards / boxes ---------- */
.antler .card {
    border: 0;
    border-radius: 12px;
    box-shadow: 0 4px 20px rgba(21, 33, 42, .08);
}
.antler .card-header {
    background: #fff;
    border-bottom: 1px solid #efefef;
    border-radius: 12px 12px 0 0 !important;
    font-weight: 600;
}
.antler .card-header h1, .antler .card-header h2, .antler .card-header h3,
.antler .card-header h4, .antler .card-header h5 { margin-bottom: 0; }

/* ---------- Buttons ---------- */
.antler .btn { border-radius: 50px; font-weight: 600; padding-left: 1.4rem; padding-right: 1.4rem; }
.antler .btn-sm { padding-left: .9rem; padding-right: .9rem; }
.antler .btn-primary {
    --bs-btn-bg: var(--antler-pink); --bs-btn-border-color: var(--antler-pink);
    --bs-btn-hover-bg: var(--antler-purple); --bs-btn-hover-border-color: var(--antler-purple);
    --bs-btn-active-bg: var(--antler-purple); --bs-btn-active-border-color: var(--antler-purple);
    --bs-btn-disabled-bg: var(--antler-pink); --bs-btn-disabled-border-color: var(--antler-pink);
    --bs-btn-focus-shadow-rgb: var(--antler-pink-rgb);
}
.antler .btn-outline-primary {
    --bs-btn-color: var(--antler-pink); --bs-btn-border-color: var(--antler-pink);
    --bs-btn-hover-bg: var(--antler-pink); --bs-btn-hover-border-color: var(--antler-pink);
    --bs-btn-active-bg: var(--antler-purple); --bs-btn-active-border-color: var(--antler-purple);
    --bs-btn-focus-shadow-rgb: var(--antler-pink-rgb);
}
.btn-antler-yellow, .antler .btn-success {
    --bs-btn-color: #000; --bs-btn-bg: var(--antler-yellow); --bs-btn-border-color: var(--antler-yellow);
    --bs-btn-hover-color: #000; --bs-btn-hover-bg: #ffe34d; --bs-btn-hover-border-color: #ffe34d;
    --bs-btn-active-color: #000; --bs-btn-active-bg: #e6c400; --bs-btn-active-border-color: #e6c400;
    border-radius: 50px; font-weight: 600; font-size: 14px;
}
.btn-antler-yellow { display: inline-block; padding: .55rem 1.3rem; background: var(--antler-yellow); color: #000; text-decoration: none; border: 0; }
.btn-antler-yellow:hover { background: #ffe34d; color: #000; }
.btn-antler-top { background: var(--antler-yellow); color: #000; border-radius: 50%; width: 44px; height: 44px; padding: 0 !important; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 14px rgba(0, 0, 0, .2); }
.btn-antler-top:hover { background: #ffe34d; color: #000; }

/* ---------- Forms ---------- */
.antler .form-control:focus, .antler .form-select:focus {
    border-color: rgba(var(--antler-pink-rgb), .6);
    box-shadow: 0 0 0 .2rem rgba(var(--antler-pink-rgb), .2);
}
.antler .form-check-input:checked { background-color: var(--antler-pink); border-color: var(--antler-pink); }

/* ---------- Side menu (Huraga partial_menu) ---------- */
.antler .list-group-item.active, .antler .nav-pills .nav-link.active {
    background: var(--antler-gradient); border-color: transparent; color: #fff;
}
.antler .list-group { border-radius: 12px; box-shadow: 0 4px 20px rgba(21, 33, 42, .08); }
.antler .list-group-item { border-color: #efefef; }
.antler .list-group-item-action:hover { color: var(--antler-pink); }

/* ---------- Badges, tables, pagination ---------- */
.antler .badge.bg-primary, .antler .text-bg-primary { background-color: var(--antler-pink) !important; }
.antler .table > thead th { font-weight: 600; color: var(--antler-grey); text-transform: uppercase; font-size: .78rem; letter-spacing: .03em; }
.antler .page-link { color: var(--antler-pink); }
.antler .page-item.active .page-link { background-color: var(--antler-pink); border-color: var(--antler-pink); }

/* ---------- Footer (site footer colours) ---------- */
.antler-footer {
    background-color: var(--antler-dark);
    color: var(--antler-grey);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}
.antler-footer-symbol { position: absolute; right: -60px; top: 20px; width: 340px; opacity: .04; pointer-events: none; }
.antler-footer-top { padding: 60px 0 40px; position: relative; }
.antler-footer-heading { color: #fff; font-size: 18px; margin-bottom: 1rem; }
.antler-footer-menu { list-style: none; padding: 0; margin: 0; }
.antler-footer-menu li { margin-bottom: .45rem; }
.antler-footer-menu a, .antler-footer-links a { color: var(--antler-grey); text-decoration: none; font-size: 15px; }
.antler-footer-menu a:hover, .antler-footer-links a:hover { color: var(--antler-yellow); }
.antler-footer-logo { height: 34px; width: auto; margin-bottom: 1rem; }
.antler-copyright { font-size: 14px; margin-bottom: 1rem; }
.antler-payment-list { list-style: none; padding: 0; margin: 0; display: flex; gap: .8rem; font-size: 1.6rem; color: #d8d8d8; }
.antler-footer-bottom { background-color: var(--antler-darker); padding: 18px 0; font-size: 14px; position: relative; }
.antler-footer-links a + a::before { content: "•"; margin: 0 .5rem; color: #414142; }

/* Public pages (login, signup, password reset): no breadcrumb in the band, so keep it slim */
.antler-public .antler-page-band { height: 40px; }
.antler-public .antler-public-body { margin-top: 2rem; }