/**
 * Cid Hosting 2026 — WHMCS Six child theme
 * Deploy as: templates/cid-hosting-2026/css/custom.css
 *
 * Loaded after Six styles.css. Prefer variables + overrides here.
 * Do NOT edit templates/six/css/styles.css.
 *
 * Brand: match cidhosting.net (see redesign-2026/06-DESIGN-SYSTEM.md)
 * Plan:  redesign-2026/16-WHMCS-CHILD-THEME-PLAN.md
 */

/* -------------------------------------------------------------------------- */
/* Tokens                                                                     */
/* -------------------------------------------------------------------------- */

:root {
  --cid-blue: #004e73;
  --cid-blue-dark: #003e5b;
  --cid-blue-soft: #eef5f9;
  --cid-ink: #111827;
  --cid-body: #4b5563;
  --cid-border: #e5e7eb;
  --cid-surface: #f8fafc;
  --cid-white: #ffffff;
  --cid-font: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --cid-radius: 12px;
  --cid-radius-sm: 8px;
  --cid-shadow: 0 1px 2px rgba(17, 24, 39, 0.06), 0 4px 12px rgba(17, 24, 39, 0.04);
}

/* Optional: Inter from Google Fonts. Prefer self-host or header.tpl <link>
   if you need stricter privacy / offline admin. Uncomment when deploying: */
/* @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap"); */

/* -------------------------------------------------------------------------- */
/* Base                                                                       */
/* -------------------------------------------------------------------------- */

body,
.body,
#main-body {
  font-family: var(--cid-font);
  color: var(--cid-body);
  background-color: var(--cid-surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6,
.panel-title,
.card-title {
  color: var(--cid-ink);
  font-family: var(--cid-font);
  font-weight: 600;
}

a {
  color: var(--cid-blue);
}

a:hover,
a:focus {
  color: var(--cid-blue-dark);
}

/* -------------------------------------------------------------------------- */
/* Primary actions (Six / Bootstrap 3 patterns)                               */
/* -------------------------------------------------------------------------- */

.btn-primary,
.btn-success,
input.btn-primary,
button.btn-primary {
  background-color: var(--cid-blue);
  border-color: var(--cid-blue);
  color: var(--cid-white);
  border-radius: var(--cid-radius-sm);
  font-weight: 500;
  box-shadow: none;
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open > .dropdown-toggle.btn-primary,
.btn-success:hover,
.btn-success:focus {
  background-color: var(--cid-blue-dark);
  border-color: var(--cid-blue-dark);
  color: var(--cid-white);
}

.btn-default,
.btn-link {
  border-radius: var(--cid-radius-sm);
}

.btn-link {
  color: var(--cid-blue);
}

/* -------------------------------------------------------------------------- */
/* Navbar / header chrome                                                     */
/* -------------------------------------------------------------------------- */

.navbar-main,
.navbar-default,
#main-menu,
.topbar {
  background-color: var(--cid-white);
  border-color: var(--cid-border);
}

.navbar-main .nav > li > a,
.navbar-default .navbar-nav > li > a {
  color: var(--cid-ink);
  font-weight: 500;
}

.navbar-main .nav > li > a:hover,
.navbar-main .nav > li > a:focus,
.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li.active > a {
  color: var(--cid-blue);
  background-color: var(--cid-blue-soft);
}

/* Logo: if header still points at Six default, prefer WHMCS logo URL setting
   or override img.src via header.tpl. Soft size guard: */
.navbar-brand img,
#header .logo img,
.logo img {
  max-height: 40px;
  width: auto;
}

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

.panel,
.card,
.tile,
.client-home-panels .panel {
  border-color: var(--cid-border);
  border-radius: var(--cid-radius);
  box-shadow: var(--cid-shadow);
  background: var(--cid-white);
}

.panel-heading,
.panel-default > .panel-heading,
.card-header {
  background-color: var(--cid-white);
  border-bottom-color: var(--cid-border);
  color: var(--cid-ink);
  border-radius: var(--cid-radius) var(--cid-radius) 0 0;
}

.panel-primary > .panel-heading,
.panel-accent > .panel-heading {
  background-color: var(--cid-blue);
  border-color: var(--cid-blue);
  color: var(--cid-white);
}

/* -------------------------------------------------------------------------- */
/* Forms                                                                      */
/* -------------------------------------------------------------------------- */

.form-control {
  border-color: var(--cid-border);
  border-radius: var(--cid-radius-sm);
  color: var(--cid-ink);
  box-shadow: none;
}

.form-control:focus {
  border-color: var(--cid-blue);
  box-shadow: 0 0 0 3px rgba(0, 78, 115, 0.15);
}

label {
  color: var(--cid-ink);
  font-weight: 500;
}

/* -------------------------------------------------------------------------- */
/* Tables, lists, badges                                                      */
/* -------------------------------------------------------------------------- */

.table > thead > tr > th {
  color: var(--cid-ink);
  border-bottom-color: var(--cid-border);
  background-color: var(--cid-surface);
  font-weight: 600;
}

.table > tbody > tr > td {
  border-top-color: var(--cid-border);
}

.label-primary,
.badge-primary,
.label-info {
  background-color: var(--cid-blue);
}

/* -------------------------------------------------------------------------- */
/* Alerts / notices                                                           */
/* -------------------------------------------------------------------------- */

.alert-info {
  background-color: var(--cid-blue-soft);
  border-color: #c5d9e6;
  color: var(--cid-blue-dark);
}

/* -------------------------------------------------------------------------- */
/* Login / register / cart surfaces                                           */
/* -------------------------------------------------------------------------- */

.logincontainer,
.providerLinkingFeedback,
#order-standard_cart,
.cart-sidebar {
  font-family: var(--cid-font);
}

#order-standard_cart .cart-body .secondary-cart-body,
#order-standard_cart .panel {
  border-radius: var(--cid-radius);
}

#order-standard_cart .btn-success,
#order-standard_cart .btn-primary {
  background-color: var(--cid-blue);
  border-color: var(--cid-blue);
}

#order-standard_cart .btn-success:hover,
#order-standard_cart .btn-primary:hover {
  background-color: var(--cid-blue-dark);
  border-color: var(--cid-blue-dark);
}

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

.footer,
#footer {
  background-color: var(--cid-ink);
  color: #9ca3af;
  border-top: none;
}

.footer a,
#footer a {
  color: #e5e7eb;
}

.footer a:hover,
#footer a:hover {
  color: var(--cid-white);
}

/* -------------------------------------------------------------------------- */
/* Focus / a11y                                                               */
/* -------------------------------------------------------------------------- */

a:focus,
.btn:focus,
.form-control:focus,
button:focus {
  outline: 2px solid var(--cid-blue);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* -------------------------------------------------------------------------- */
/* TODO when previewing on Six                                                */
/* - Tune selectors after inspecting live DOM (class names vary by page).     */
/* - Confirm logo via General Settings → Logo URL or header.tpl override.     */
/* - Soften any remaining Bootstrap green “success” if it clashes with brand. */
/* - Add header.tpl Inter <link> if @import is blocked.                       */
/* -------------------------------------------------------------------------- */

/* -------------------------------------------------------------------------- */
/* Store / plan cards — premium_comparison + standard_cart                    */
/* Match cidhosting.net: calm blue cards, no yellow price clash               */
/* -------------------------------------------------------------------------- */

#order-premium_comparison,
#order-standard_cart {
  font-family: var(--cid-font);
  color: var(--cid-body);
}

#order-premium_comparison .main-container.price-01 {
  background: var(--cid-surface);
}

#order-premium_comparison .main-container.price-01 h3,
#order-premium_comparison .main-container.price-01 h5 {
  color: var(--cid-ink);
  font-weight: 600;
  text-shadow: none;
}

/* Card shell — cleaner SaaS-style tiles */
#order-premium_comparison .price-table-container .price-table {
  width: 280px;
  min-width: 260px;
  background: var(--cid-white);
  border: 1px solid var(--cid-border);
  border-radius: var(--cid-radius);
  box-shadow: var(--cid-shadow);
  overflow: hidden;
  transition: box-shadow 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}

#order-premium_comparison .price-table-container .price-table:hover {
  border-color: #c5d9e6;
  box-shadow: 0 4px 16px rgba(0, 78, 115, 0.12);
}

#order-premium_comparison .price-table-container .price-table.active {
  margin-top: -12px;
  width: 280px;
  border-color: var(--cid-blue);
  box-shadow: 0 8px 24px rgba(0, 78, 115, 0.16);
}

/* Header band — solid brand blue, no heavy gradient/text-shadow */
#order-premium_comparison .price-table-container .price-table .top-head {
  background: var(--cid-blue) !important;
  filter: none;
  border-radius: var(--cid-radius) var(--cid-radius) 0 0;
}

#order-premium_comparison .price-table-container .price-table .top-head .top-area {
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-shadow: none;
  padding: 18px 16px 12px;
}

#order-premium_comparison .price-table-container .price-table .top-head .top-area h4 {
  color: var(--cid-white);
  font-weight: 600;
  font-size: 17px;
  line-height: 1.3;
}

#order-premium_comparison .price-table-container .price-table .top-head .top-area p {
  color: rgba(255, 255, 255, 0.75);
}

/* Price — white / soft tint instead of #ffffbf yellow */
#order-premium_comparison .price-table-container .price-table .top-head .price-area {
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  color: #e8f2f7 !important;
  text-shadow: none;
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px 18px;
}

#order-premium_comparison .price-table-container .price-table .top-head .price-area .price {
  padding: 6px 0 4px;
}

#order-premium_comparison .price-table-container .price-table .top-head .price-area .price span {
  color: var(--cid-white) !important;
  font-size: 32px;
  font-weight: 700;
  letter-spacing: -0.02em;
}

/* Popular badge — soft brand tint, not lime #a3d900 */
#order-premium_comparison .price-table-container .price-table .popular-plan {
  background: rgba(0, 0, 0, 0.18);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  color: #b8e0f0 !important;
  font-weight: 600;
  letter-spacing: 0.04em;
}

/* Order CTA */
#order-premium_comparison .price-table-container .order-button,
#order-premium_comparison .price-table-container .order-button:hover {
  background: var(--cid-blue) !important;
  filter: none;
  border-radius: var(--cid-radius-sm);
  box-shadow: none;
  text-shadow: none;
  font-weight: 600;
  margin: 12px 20px 16px;
  transition: background-color 0.15s ease;
}

#order-premium_comparison .price-table-container .order-button:hover {
  background: var(--cid-blue-dark) !important;
  color: var(--cid-white);
}

#order-premium_comparison .price-table-container .price-table ul li {
  border-bottom-color: var(--cid-border);
  color: var(--cid-body);
  font-size: 13.5px;
  padding: 12px 8px;
}

#order-premium_comparison .price-table-container .price-table ul li a {
  color: var(--cid-blue);
}

#order-premium_comparison .includes-features .head-area span {
  background: var(--cid-surface);
  color: var(--cid-ink);
}

#order-premium_comparison .main-container.price-01 .includes-features .head-area span {
  background: var(--cid-surface);
}

/* Sidebar panels on store */
#order-premium_comparison .product-selection-sidebar .panel,
#order-premium_comparison .panel-sidebar,
.row-product-selection .panel-sidebar {
  border-radius: var(--cid-radius);
  border-color: var(--cid-border);
  box-shadow: var(--cid-shadow);
}

/* standard_cart product tiles (if order form switches later) */
#order-standard_cart .products .product,
#order-standard_cart .product {
  border: 1px solid var(--cid-border);
  border-radius: var(--cid-radius);
  box-shadow: var(--cid-shadow);
  background: var(--cid-white);
  overflow: hidden;
}

#order-standard_cart .products .product header,
#order-standard_cart .product-header {
  background: var(--cid-blue);
  color: var(--cid-white);
}

#order-standard_cart .price,
#order-standard_cart .product-pricing {
  color: var(--cid-blue);
  font-weight: 700;
}

#order-standard_cart .price .price-cycle,
#order-standard_cart .cycle {
  color: var(--cid-body);
  font-weight: 500;
}

/* Cart configure / checkout surfaces — keep readable, brand CTAs only */
#order-standard_cart .cart-sidebar .panel-heading,
#order-standard_cart .secondary-cart-body .panel-heading {
  background: var(--cid-blue-soft);
  color: var(--cid-blue-dark);
  border-color: var(--cid-border);
}

#order-standard_cart .btn-checkout,
#order-standard_cart .checkout-btn {
  background-color: var(--cid-blue);
  border-color: var(--cid-blue);
}

/* Optional Webuzo duplicate hide (pids 154–157). Uncomment only with Lumeng OK:
#product154, #product155, #product156, #product157 { display: none !important; }
*/