@import url("https://fonts.googleapis.com/css2?family=Geist:wght@500;600;700&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@500;600&display=swap");

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

    ** Custom Stylesheet **

    Green Olive Tree "Grove" theme for the WHMCS Twenty-One template
    and the Standard Cart order form. Matches greenolivetree.net.

    Install: upload to /templates/twenty-one/css/got-theme.css
    Loaded by includes/hooks/got_theme.php with a cache-busting version,
    after the theme CSS. WHMCS updates never touch either file.

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

/* ==========================================================
   1. Brand tokens
   ========================================================== */
:root {
    --got-navy: #0b2f40;
    --got-navy-2: #0f3d53;
    --got-primary: #135d80;        /* logo blue */
    --got-primary-hover: #0f4d6b;
    --got-primary-soft: #dcecf3;
    --got-olive: #56701f;          /* 5.6:1 with white text */
    --got-olive-hover: #46601a;
    --got-olive-soft: #eaf1d8;
    --got-paper: #f7f6f1;
    --got-surface: #ffffff;
    --got-surface-2: #efede5;
    --got-ink: #12252c;
    --got-ink-soft: #3c4e54;
    --got-muted: #5a6b70;          /* 4.75:1 on surface-2 */
    --got-line: #e2dfd4;
    --got-line-strong: #cfcbbd;
    --got-focus: #e0a526;
    --got-radius: 14px;
    --got-radius-sm: 8px;
    --got-shadow: 0 1px 2px rgb(18 37 44 / 6%), 0 8px 24px -8px rgb(18 37 44 / 12%);
    --got-font-display: "Geist", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
    --got-font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    --got-font-mono: "JetBrains Mono", ui-monospace, Consolas, monospace;
}

/* ==========================================================
   2. Nexus Cart variables (stock WHMCS block, re-pointed to the brand)
      Only used if the order form is switched to Nexus Cart.
   ========================================================== */
html {
    font-size: 14px;
}

:root {
    --white: #fff;
    --neutral-50: #f7f6f1;
    --neutral-100: #efede5;
    --neutral-200: #e2dfd4;
    --neutral-300: #cfcbbd;
    --neutral-400: #8ea2a3;
    --neutral-500: #5a6b70;
    --neutral-600: #3c4e54;
    --neutral-700: #2a3d43;
    --neutral-800: #1b2f36;
    --neutral-900: #12252c;
    --neutral-950: #0b171c;

    --primary-50: #eef6fa;
    --primary-100: #dcecf3;
    --primary-200: #b5d7e6;
    --primary-300: #84bcd5;
    --primary-400: #4f9cc0;
    --primary-500: #2a86ad;
    --primary-600: #135d80;
    --primary-700: #0f4d6b;
    --primary-800: #0f3d53;
    --primary-900: #0b2f40;
    --primary-950: #071f2b;

    --primary: var(--primary-600);
    --primary-lifted: var(--primary-700);
    --primary-accented: var(--primary-800);

    --secondary: var(--neutral-500);
    --secondary-lifted: var(--neutral-600);
    --secondary-accented: var(--neutral-700);

    --success: #56701f;
    --success-lifted: #46601a;
    --success-accented: #3a5015;

    --info: #135d80;
    --info-lifted: #0f4d6b;
    --info-accented: #0f3d53;

    --notice: #7f22fe;
    --notice-lifted: #7008e7;
    --notice-accented: #5d0ec0;

    --warning: #b7791f;
    --warning-lifted: #975a16;
    --warning-accented: #744210;

    --error: #c53030;
    --error-lifted: #9b2c2c;
    --error-accented: #822727;

    --grayscale: var(--neutral-900);
    --grayscale-lifted: var(--neutral-800);
    --grayscale-accented: var(--neutral-700);

    --neutral: var(--neutral-500);
    --neutral-lifted: var(--neutral-600);
    --neutral-accented: var(--neutral-700);

    --text-inverted: var(--white);
    --text-muted: var(--neutral-500);
    --text-lifted: var(--neutral-600);
    --text-accented: var(--neutral-700);
    --text: var(--neutral-900);

    --border-muted: var(--neutral-200);
    --border: var(--neutral-300);
    --border-lifted: var(--neutral-400);
    --border-accented: var(--neutral-600);

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

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

    --text-xs: 0.625rem;
    --text-sm: 0.75rem;
    --text-md: 0.875rem;
    --text-lg: 1rem;

    --outline-sm: 1px;
    --outline-md: 2px;
    --outline-lg: 3px;

    --rounding-sm: 0.5rem;
    --rounding-md: 0.75rem;
    --rounding-lg: 1rem;

    --letter-spacing: 0em;
    --disabled-opacity: 25%;
}

/* ==========================================================
   3. Base typography & color
   ========================================================== */
body {
    font-family: var(--got-font-body);
    color: var(--got-ink);
    background-color: var(--got-paper);
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6,
.card-title, .panel-title, .modal-title {
    font-family: var(--got-font-display);
    font-weight: 600;
    letter-spacing: -0.02em;
    color: var(--got-ink);
}

a, .btn-link { color: var(--got-primary); }
a:hover, .btn-link:hover { color: var(--got-primary-hover); }
.text-primary { color: var(--got-primary) !important; }
.text-muted { color: var(--got-muted) !important; }
.bg-primary, .badge-primary { background-color: var(--got-primary) !important; }
.border-primary { border-color: var(--got-primary) !important; }

a:focus-visible, .btn:focus-visible, .form-control:focus-visible, .nav-link:focus-visible {
    outline: 3px solid var(--got-focus);
    outline-offset: 2px;
}

::selection { background: #9bbb4c; color: #10220a; }

/* ==========================================================
   4. Header: top bar, logo bar, menu bar, breadcrumb
   ========================================================== */
/* Twenty-One writes these as header.header / footer.footer, so we match that
   specificity or our rules lose. */
header.header .topbar {
    background-color: var(--got-navy);
    color: #b9cdd3;
}
header.header .topbar a,
header.header .topbar .btn,
header.header .topbar .btn-link,
header.header .topbar .active-client .btn { color: #fff; }
header.header .topbar .btn:hover,
header.header .topbar a:hover { color: #fff; opacity: .85; }
header.header .topbar .active-client .input-group-text { color: #b9cdd3; }

header.header {
    background-color: var(--got-surface);
    border-bottom: 1px solid var(--got-line);
}
header.header .logo-img { max-height: 52px; width: auto; }

header.header .search {
    border: 1.5px solid var(--got-line-strong);
    border-radius: 999px;
    overflow: hidden;
}
header.header .search:focus-within { border-color: var(--got-primary); }
header.header .search .btn { color: var(--got-muted); }

/* cart / notification icon buttons */
header.header .toolbar .nav-link {
    border: 1.5px solid var(--got-line-strong);
    border-radius: 999px;
    color: var(--got-muted);
}
header.header .toolbar .nav-link:hover { color: var(--got-primary); border-color: var(--got-primary); }
header.header .toolbar .nav-link .badge { background-color: var(--got-olive); color: #fff; opacity: 1; }

.main-navbar-wrapper {
    background-color: var(--got-surface);
    border-top: 1px solid var(--got-line);
}
.main-navbar-wrapper .navbar-nav .nav-link {
    color: var(--got-ink);
    font-weight: 550;
    border-radius: var(--got-radius-sm);
}
.main-navbar-wrapper .navbar-nav .nav-link:hover,
.main-navbar-wrapper .navbar-nav .active > .nav-link,
.main-navbar-wrapper .navbar-nav .nav-link.active {
    color: var(--got-primary);
    background-color: var(--got-surface-2);
}

.dropdown-menu {
    border: 1px solid var(--got-line);
    border-radius: var(--got-radius);
    box-shadow: var(--got-shadow);
    padding: .4rem;
}
.dropdown-item { border-radius: var(--got-radius-sm); color: var(--got-ink); }
.dropdown-item:hover, .dropdown-item:focus { background-color: var(--got-surface-2); color: var(--got-ink); }
.dropdown-item.active, .dropdown-item:active,
header.header .dropdown-item.active, header.header .dropdown-item:active { background-color: var(--got-primary); color: #fff; }

.master-breadcrumb {
    background-color: var(--got-paper);
    border-bottom: 1px solid var(--got-line);
}
.master-breadcrumb .breadcrumb {
    background: transparent;
    font-family: var(--got-font-mono);
    font-size: .8rem;
    letter-spacing: .03em;
}
.master-breadcrumb .breadcrumb-item a { color: var(--got-muted); }
.master-breadcrumb .breadcrumb-item.active { color: var(--got-ink); }

/* ==========================================================
   5. Buttons (pill-shaped, like the main site)
   ========================================================== */
.btn {
    border-radius: 999px;
    font-weight: 600;
    transition: background-color .15s, border-color .15s, box-shadow .15s, transform .15s;
}
.btn:not(:disabled):not(.disabled):hover { transform: translateY(-1px); }
.btn-sm { padding: .3rem .85rem; }

/* buttons attached to inputs keep a normal radius so they line up */
.input-group .btn { border-radius: var(--got-radius-sm); }
.input-group .btn:hover { transform: none; }

.btn-primary,
.btn-primary.disabled, .btn-primary:disabled {
    background-color: var(--got-primary);
    border-color: var(--got-primary);
    color: #fff;
}
.btn-primary:hover, .btn-primary:focus,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-primary:not(:disabled):not(.disabled).active {
    background-color: var(--got-primary-hover);
    border-color: var(--got-primary-hover);
    color: #fff;
}
.btn-primary:focus, .btn-primary.focus { box-shadow: 0 0 0 .2rem rgb(19 93 128 / 30%); }

.btn-outline-primary { color: var(--got-primary); border-color: var(--got-primary); }
.btn-outline-primary:hover,
.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.show > .btn-outline-primary.dropdown-toggle {
    background-color: var(--got-primary);
    border-color: var(--got-primary);
    color: #fff;
}

/* "Order now", "Checkout", "Add to cart" */
.btn-success,
.btn-success.disabled, .btn-success:disabled {
    background-color: var(--got-olive);
    border-color: var(--got-olive);
    color: #fff;
}
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active {
    background-color: var(--got-olive-hover);
    border-color: var(--got-olive-hover);
    color: #fff;
}

.btn-default, .btn-secondary, .btn-light {
    background-color: var(--got-surface);
    border: 1.5px solid var(--got-line-strong);
    color: var(--got-ink);
}
.btn-default:hover, .btn-secondary:hover, .btn-light:hover,
.btn-default:focus, .btn-secondary:focus {
    background-color: var(--got-surface);
    border-color: var(--got-ink);
    color: var(--got-ink);
}

/* ==========================================================
   6. Cards, panels, sidebar, lists
   ========================================================== */
.card, .panel, .mc-promo-login, .mc-promo-manage {
    border: 1px solid var(--got-line);
    border-radius: var(--got-radius);
    box-shadow: 0 1px 2px rgb(18 37 44 / 4%);
}
.card-header, .panel-heading {
    background-color: var(--got-surface);
    border-bottom: 1px solid var(--got-line);
    font-family: var(--got-font-display);
    font-weight: 600;
}
.card > .card-header:first-child { border-radius: var(--got-radius) var(--got-radius) 0 0; }
.card-footer { background-color: var(--got-surface); border-top: 1px solid var(--got-line); }

.sidebar .card-sidebar .card-header,
.card-sidebar .card-header {
    background-color: var(--got-surface-2);
}

.list-group-item { border-color: var(--got-line); color: var(--got-ink); }
.list-group-item-action:hover, .list-group-item-action:focus { background-color: var(--got-paper); color: var(--got-ink); }
.list-group-item.active,
.sidebar .list-group-item.active,
.sidebar .list-group-item.active:focus,
.sidebar .list-group-item.active:hover {
    background-color: var(--got-primary);
    border-color: var(--got-primary);
    color: #fff;
}

.nav-pills .nav-link.active, .nav-pills .show > .nav-link { background-color: var(--got-primary); }
.nav-tabs .nav-link.active { border-color: var(--got-line) var(--got-line) var(--got-surface); color: var(--got-ink); font-weight: 600; }
.nav-tabs { border-bottom-color: var(--got-line); }

.progress { border-radius: 999px; background-color: var(--got-surface-2); }
.progress-bar { background-color: var(--got-primary); }

.page-link { color: var(--got-primary); border-color: var(--got-line); }
.page-item.active .page-link { background-color: var(--got-primary); border-color: var(--got-primary); color: #fff; }

/* Twenty-One status labels that used the old theme blue */
.status-delivered, .status-onhold, .status-payment-pending { background-color: var(--got-primary); }

/* ==========================================================
   7. Forms
   ========================================================== */
.form-control, .custom-select {
    border: 1.5px solid var(--got-line-strong);
    border-radius: var(--got-radius-sm);
    color: var(--got-ink);
}
.form-control:focus, .custom-select:focus {
    border-color: var(--got-primary);
    box-shadow: 0 0 0 .2rem rgb(19 93 128 / 18%);
}
.input-group-text {
    background-color: var(--got-surface-2);
    border: 1.5px solid var(--got-line-strong);
    color: var(--got-muted);
}
.custom-control-input:checked ~ .custom-control-label::before,
.custom-checkbox .custom-control-input:indeterminate ~ .custom-control-label::before {
    background-color: var(--got-primary);
    border-color: var(--got-primary);
}
.custom-range::-webkit-slider-thumb { background-color: var(--got-primary); }
.custom-range::-moz-range-thumb { background-color: var(--got-primary); }
.input-group .btn-reveal-pw:hover, .input-group .btn-reveal-pw:active { background-color: var(--got-primary); border-color: var(--got-primary); }

/* ==========================================================
   8. Tables
   ========================================================== */
.table { color: var(--got-ink); }
.table thead th, .table-list > thead > tr > th {
    font-family: var(--got-font-mono);
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--got-muted);
    background-color: var(--got-surface);
    border-bottom: 2px solid var(--got-line-strong);
}
.table td, .table th { border-color: var(--got-line); }
.table-striped tbody tr:nth-of-type(odd) { background-color: var(--got-paper); }
.table-hover tbody tr:hover, .table-list > tbody > tr:hover > td { background-color: var(--got-primary-soft); }

/* ==========================================================
   9. Alerts & modals
   ========================================================== */
.alert { border: 0; border-left: 4px solid; border-radius: var(--got-radius-sm); }
.alert-info { background-color: var(--got-primary-soft); border-color: var(--got-primary); color: var(--got-ink); }
.alert-success { background-color: var(--got-olive-soft); border-color: var(--got-olive); color: #2c3a0f; }
.alert-warning { background-color: #fbf1df; border-color: #b7791f; color: #4a3209; }
.alert-danger { background-color: #fbe9e7; border-color: #c53030; color: #6b1d16; }

.modal-content { border: 0; border-radius: var(--got-radius); box-shadow: 0 24px 48px -16px rgb(18 37 44 / 30%); }
.modal-header { border-bottom-color: var(--got-line); }
.modal-header.bg-primary { background-color: var(--got-navy) !important; border-radius: var(--got-radius) var(--got-radius) 0 0; }
.modal-footer { border-top-color: var(--got-line); }

/* ==========================================================
   10. Home page
   ========================================================== */
/* In Twenty-One, .primary-bg-color is the class on <body>: it's the page background */
.primary-bg-color { background-color: var(--got-paper); }

.home-domain-search .input-group-wrapper {
    border: 1.5px solid var(--got-line-strong);
    border-radius: 999px;
    padding: 6px 6px 6px 16px;
}
.home-domain-search .input-group-wrapper .form-control { border: 0; box-shadow: none; }

/* ==========================================================
   11. Order form (Standard Cart)
   ========================================================== */
body #order-standard_cart .products .product {
    border: 1px solid var(--got-line);
    border-radius: var(--got-radius);
    background: var(--got-surface);
    overflow: hidden;
}
body #order-standard_cart .products .product header {
    background: var(--got-surface-2);
    margin: 0;
    border-radius: 0;
    padding: 14px 20px;
}
body #order-standard_cart .products .product header span {
    font-family: var(--got-font-display);
    font-weight: 600;
    color: var(--got-ink);
}
body #order-standard_cart .sub-heading span,
body #order-standard_cart .sub-heading-borderless span {
    color: var(--got-primary);
    font-family: var(--got-font-display);
    font-weight: 600;
}
body #order-standard_cart .view-cart-items-header {
    background-color: var(--got-navy);
    border-radius: var(--got-radius-sm) var(--got-radius-sm) 0 0;
}
body #order-standard_cart .order-summary {
    background-color: var(--got-navy);
    border-bottom-color: var(--got-navy);
    border-radius: var(--got-radius);
    overflow: hidden;
}
body #order-standard_cart .order-summary h2 { font-family: var(--got-font-display); font-weight: 600; }
body #order-standard_cart .summary-container { background-color: var(--got-paper); border-radius: 0 0 var(--got-radius) var(--got-radius); }
body #order-standard_cart .order-summary .total-due-today .amt { font-family: var(--got-font-display); font-weight: 600; color: var(--got-ink); }
body #order-standard_cart .product-info,
body #order-standard_cart .domain-selection-options .option,
body #order-standard_cart .view-cart-tabs .tab-content { background-color: var(--got-paper); }
body #order-standard_cart .panel-addon { border-radius: var(--got-radius-sm); border-color: var(--got-line); }
body #order-standard_cart .panel-addon-selected { border-color: var(--got-olive); }
body #order-standard_cart .panel-addon-selected .panel-add { background-color: var(--got-olive); }
body #order-standard_cart .empty-cart .btn { background-color: var(--got-primary); border-color: var(--got-primary); }

/* domain search box: replace the bright yellow with the brand's soft teal/olive */
body .domain-checker-container {
    background: linear-gradient(135deg, var(--got-primary-soft), var(--got-olive-soft)) !important;
    border: 1px solid var(--got-line);
    border-radius: var(--got-radius);
}
body .domain-pricing .tld-pricing-header div:nth-child(odd) { background-color: var(--got-primary); }
body .spotlight-tlds, body .suggested-domains .domain-lookup-suggestions-loader,
body .addon-renewals .service-renewal, body .domain-renewals, body .service-renewals { background-color: var(--got-paper); }

/* upgrade / product comparison boxes */
body .upgrade .products .product .header { background-color: var(--got-navy); }
body .upgrade .products .product .btn { background-color: var(--got-primary); border-color: var(--got-primary); }

/* ==========================================================
   12. Footer
   ========================================================== */
footer.footer {
    background-color: var(--got-navy);
    color: #a9c0c7;
}
footer.footer a, footer.footer .nav-link { color: #d9e7eb; }
footer.footer a:hover, footer.footer .nav-link:hover { color: #fff; }
footer.footer .copyright { color: #a9c0c7; }
footer.footer .btn { background-color: rgb(255 255 255 / 8%); color: #fff; }
footer.footer .btn:hover { background-color: rgb(255 255 255 / 16%); color: #fff; }