/* IBOweb – huisstijl voor Mijn IBOweb (WHMCS, child theme van twenty-one)
   Zelfde kleuren en lettertype als iboweb.nl. */

@font-face { font-family: "Montserrat"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-500-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-600-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-700-normal.woff2") format("woff2"); }
@font-face { font-family: "Montserrat"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/montserrat-latin-800-normal.woff2") format("woff2"); }

:root {
  --ibo-navy: #2A3167;
  --ibo-navy-dark: #1F2433;
  --ibo-yellow: #FFC72C;
  --ibo-yellow-dark: #F0B400;
  --ibo-orange: #C2410C;
  --ibo-ink: #1F2433;
  --ibo-muted: #4A5068;
  --ibo-mist: #F4F5FA;
  --ibo-tint: #EEF0FA;
  --ibo-line: #E1E4EE;
}

/* ---------- Basis ---------- */
body, .popover, .tooltip, input, select, textarea, button {
  font-family: "Montserrat", "Segoe UI", Arial, sans-serif;
}
body { color: var(--ibo-ink); font-weight: 500; background: #fff; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 800; color: var(--ibo-ink); }
a { color: var(--ibo-navy); }
a:hover, a:focus { color: var(--ibo-orange); }
.text-primary { color: var(--ibo-navy) !important; }
.text-muted { color: var(--ibo-muted) !important; }
.text-warning { color: var(--ibo-orange) !important; }
.bg-primary { background-color: var(--ibo-navy) !important; }
section#main-body { background: var(--ibo-mist); }

/* ---------- Kop en menu ---------- */
header.header { background: #fff; }
header.header .navbar { background: #fff; }
header.header .navbar-brand { font-weight: 800; color: var(--ibo-navy); }
header.header .logo-img { height: 44px; width: auto; max-height: 44px; }
header.header .main-navbar-wrapper { border-bottom: 1px solid var(--ibo-line); }
header.header .navbar-nav > li > a,
header.header .navbar-nav .nav-link {
  color: var(--ibo-ink); font-size: 13px; font-weight: 700;
  letter-spacing: .5px; text-transform: uppercase;
}
header.header .navbar-nav > li > a:hover,
header.header .navbar-nav .nav-link:hover,
header.header .navbar-nav > li.active > a { color: var(--ibo-orange); }
header.header .dropdown-menu { border-color: var(--ibo-line); border-radius: 10px; box-shadow: 0 2px 12px rgba(42,49,103,.12); }
header.header .dropdown-item { font-weight: 600; text-transform: none; letter-spacing: 0; font-size: 14px; }
header.header .dropdown-item:hover, header.header .dropdown-item:focus { background: var(--ibo-tint); color: var(--ibo-navy); }
header.header .topbar { background: var(--ibo-navy); }
header.header .topbar .btn { color: #fff; }
header.header .cart-btn .badge, header.header .badge-info { background: var(--ibo-yellow); color: var(--ibo-ink); }
header.header .search .form-control, header.header .search .btn { border-color: var(--ibo-line); }

.master-breadcrumb, .master-breadcrumb .breadcrumb { background: var(--ibo-tint); }
.master-breadcrumb .breadcrumb { font-size: 13px; font-weight: 600; }
.master-breadcrumb .breadcrumb-item.active { color: var(--ibo-muted); }

/* ---------- Knoppen ---------- */
.btn { font-weight: 700; border-radius: 6px; }
.btn-primary, .btn-info {
  background-color: var(--ibo-navy); border-color: var(--ibo-navy); color: #fff;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active,
.btn-primary:not(:disabled):not(.disabled):active,
.btn-info:hover, .btn-info:focus,
.btn-info:not(:disabled):not(.disabled):active {
  background-color: var(--ibo-navy-dark); border-color: var(--ibo-navy-dark); color: #fff;
}
.btn-success, .btn-warning {
  background-color: var(--ibo-yellow); border-color: var(--ibo-yellow); color: var(--ibo-ink);
}
.btn-success:hover, .btn-success:focus,
.btn-success:not(:disabled):not(.disabled):active,
.btn-warning:hover, .btn-warning:focus,
.btn-warning:not(:disabled):not(.disabled):active {
  background-color: var(--ibo-yellow-dark); border-color: var(--ibo-yellow-dark); color: var(--ibo-ink);
}
.btn-default, .btn-outline-primary {
  background: #fff; border-color: var(--ibo-navy); color: var(--ibo-navy);
}
.btn-default:hover, .btn-default:focus,
.btn-outline-primary:hover, .btn-outline-primary:focus {
  background: var(--ibo-navy); border-color: var(--ibo-navy); color: #fff;
}
.btn-link { color: var(--ibo-navy); }
.btn-link:hover { color: var(--ibo-orange); }
.btn:focus, .btn.focus, .form-control:focus, .custom-select:focus {
  box-shadow: 0 0 0 .2rem rgba(255, 199, 44, .55); border-color: var(--ibo-navy);
}

/* ---------- Formulieren ---------- */
.form-control, .custom-select, .input-group-text { border-color: var(--ibo-line); border-radius: 6px; }
.input-group-text { background: var(--ibo-mist); color: var(--ibo-muted); }
label { font-weight: 600; }
.custom-control-input:checked ~ .custom-control-label::before,
.icheckbox_square-blue.checked, .iradio_square-blue.checked { background-color: var(--ibo-navy); border-color: var(--ibo-navy); }

/* ---------- Kaarten, zijbalk, lijsten ---------- */
.card, .panel { border-color: var(--ibo-line); border-radius: 10px; box-shadow: 0 2px 12px rgba(42,49,103,.06); }
.card-header, .panel-heading { background: #fff; border-bottom-color: var(--ibo-line); font-weight: 700; }
.card-header .card-title, .panel-title { font-weight: 800; color: var(--ibo-ink); }
.card-footer, .panel-footer { background: var(--ibo-mist); border-top-color: var(--ibo-line); }
.card-accent-blue, .card-accent-midnight-blue, .card-accent-teal, .card-accent-turquoise,
.card-accent-emerald, .card-accent-green { border-top: 3px solid var(--ibo-navy); }
.card-accent-gold, .card-accent-sun-flower, .card-accent-orange, .card-accent-asbestos { border-top: 3px solid var(--ibo-yellow); }
.list-group-item { border-color: var(--ibo-line); font-weight: 600; }
.list-group-item.active, .list-group-item.active:hover, .list-group-item.active:focus {
  background: var(--ibo-navy); border-color: var(--ibo-navy); color: #fff;
}
.list-group-item-action:hover, .list-group-item-action:focus { background: var(--ibo-tint); color: var(--ibo-navy); }
.sidebar .list-group-item .badge { background: var(--ibo-tint); color: var(--ibo-navy); }

/* ---------- Tabellen, tabs, labels ---------- */
.table thead th { border-bottom-color: var(--ibo-line); font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--ibo-muted); }
.table td, .table th { border-top-color: var(--ibo-line); }
.dataTables_wrapper .dataTables_info, .dataTables_wrapper table.table-list thead th { background: var(--ibo-navy); color: #fff; }
.nav-tabs .nav-link { font-weight: 700; color: var(--ibo-muted); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link { color: var(--ibo-navy); border-bottom-color: var(--ibo-orange); }
.page-item.active .page-link { background: var(--ibo-navy); border-color: var(--ibo-navy); }
.page-link { color: var(--ibo-navy); }
.badge-primary, .label-primary, .label-info, .badge-info { background: var(--ibo-navy); color: #fff; }
.progress-bar { background-color: var(--ibo-navy); }
.alert { border-radius: 10px; font-weight: 600; }
.alert-info { background: var(--ibo-tint); border-color: var(--ibo-line); color: var(--ibo-navy); }

/* ---------- Startpagina van het klantenpaneel ---------- */
.home-domain-search, #home-banner, .domain-checker-bg { background: var(--ibo-navy) !important; background-image: none !important; }
.home-domain-search h2, #home-banner h2 { color: #fff; }
.home-domain-search .tld-logos li, .home-domain-search .tld-logos { color: #fff; }
.home-domain-search a.btn-link, .home-domain-search .btn-link { color: #fff; }
.card-columns.home .card, .action-icon-btns a { border-radius: 10px; }
.action-icon-btns a { background: #fff; color: var(--ibo-navy); border: 1px solid var(--ibo-line); }
.action-icon-btns a:hover { background: var(--ibo-navy); color: #fff; }
.action-icon-btns a .ico-container, .action-icon-btns a i { color: inherit; }
.action-icon-btns a[class*="card-accent"] { border-top: 3px solid var(--ibo-yellow); }

/* Dashboard-tegels (ingelogd) */
.tiles .tile { background: #fff; border-color: var(--ibo-line); }
.tiles .tile .stat { color: var(--ibo-navy); font-weight: 800; }
.tiles .tile .highlight, .tiles .tile .highlight.bg-color-blue, .tiles .tile .highlight.bg-color-green,
.tiles .tile .highlight.bg-color-red, .tiles .tile .highlight.bg-color-gold { background: var(--ibo-yellow); }
.tiles .tile:hover { background: var(--ibo-tint); }
.tiles .tile i { color: var(--ibo-tint); }

/* ---------- Inloggen ---------- */
.login-form .card, .login-form { border-radius: 10px; }
.providerLinkingFeedback, .social-signin-btns { font-weight: 600; }

/* ---------- Voet ---------- */
footer.footer { background: var(--ibo-navy-dark); color: #D5DAE0; font-size: 13px; }
footer.footer a, footer.footer .nav-link { color: #fff; }
footer.footer a:hover, footer.footer .nav-link:hover { color: var(--ibo-yellow); }
footer.footer .btn { border-color: rgba(255,255,255,.3); color: #fff; background: rgba(255,255,255,.08); }
footer.footer .copyright { color: #D5DAE0; }

/* ---------- Bestelformulier: pakketvergelijking (premium_comparison) ---------- */
#order-premium_comparison .main-container .txt-container, #order-premium_comparison { font-family: inherit; }
#order-premium_comparison .header-lined h1, #order-premium_comparison h1, #order-premium_comparison #headline { color: var(--ibo-ink); font-weight: 800; }
#order-premium_comparison .price-table-container > ul > li { background: transparent !important; box-shadow: none !important; border-radius: 0; overflow: visible; }
#order-premium_comparison .price-table-container .price-table { background: #fff; border: 0; border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px rgba(42,49,103,.10); }
#order-premium_comparison .price-table-container ul li .top-head,
#order-premium_comparison .price-table-container ul li .top-area {
  background: var(--ibo-navy); background-image: none; border: 0 !important;
}
#order-premium_comparison .price-table-container .price-table .top-head h4 { color: #fff; font-weight: 800; }
#order-premium_comparison .price-table-container .price-table .popular-plan { background: var(--ibo-yellow) !important; color: var(--ibo-ink) !important; font-weight: 700; letter-spacing: 1px; border: 0; }
#order-premium_comparison .price-table-container ul li .price-area { background: var(--ibo-navy); background-image: none; }
#order-premium_comparison .price-table-container ul li .price-area .price,
#order-premium_comparison .price-table-container ul li .price-area .price span { color: #fff; font-weight: 800; }
#order-premium_comparison .price-table-container ul li .price-area a.order-button,
#order-premium_comparison .price-table-container ul li a.order-button {
  background: var(--ibo-yellow); background-image: none; border: 0; border-radius: 6px;
  color: var(--ibo-ink); font-weight: 700; text-shadow: none; box-shadow: none;
}
#order-premium_comparison .price-table-container ul li a.order-button:hover { background: var(--ibo-yellow-dark); }
#order-premium_comparison .price-table-container ul li ul li { box-shadow: none; border-radius: 0; color: var(--ibo-ink); font-weight: 600; border-color: var(--ibo-line); }

/* ---------- Bestelformulier: winkelwagen en domeinzoeker (standard_cart) ---------- */
#order-standard_cart { font-family: inherit; }
#order-standard_cart .header-lined h1, #order-standard_cart h1 { font-weight: 800; color: var(--ibo-ink); }
#order-standard_cart .domain-checker-container { background: var(--ibo-navy); background-image: none; border-radius: 10px; }
#order-standard_cart .domain-checker-bg { background-image: none; }
#order-standard_cart .domain-checker-container .input-group-box { border-radius: 10px; }
#order-standard_cart .btn-primary { background-color: var(--ibo-navy); border-color: var(--ibo-navy); }
#order-standard_cart .domain-checker-container .btn-primary,
#order-standard_cart .btn-success, #order-standard_cart .btn-checkout,
#order-standard_cart .btn-add-to-cart {
  background-color: var(--ibo-yellow); border-color: var(--ibo-yellow); color: var(--ibo-ink);
}
#order-standard_cart .domain-checker-container .btn-primary:hover,
#order-standard_cart .btn-success:hover, #order-standard_cart .btn-checkout:hover,
#order-standard_cart .btn-add-to-cart:hover { background-color: var(--ibo-yellow-dark); border-color: var(--ibo-yellow-dark); }
#order-standard_cart .domain-checker-result-headline { font-weight: 700; }
#order-standard_cart .domain-checker-available { color: #1B7A3E; }
#order-standard_cart .domain-price .price { color: var(--ibo-navy); font-weight: 800; }
#order-standard_cart .spotlight-tlds .spotlight-tld { border-color: var(--ibo-line); border-radius: 10px; }
#order-standard_cart .spotlight-tlds .spotlight-tld .btn { border-radius: 0 0 8px 8px; }
#order-standard_cart .suggested-domains .card-header, #order-standard_cart .suggested-domains .panel-heading { background: var(--ibo-tint); color: var(--ibo-navy); }
#order-standard_cart .domain-pricing .tld-pricing-header .col-sm-2,
#order-standard_cart .domain-pricing .tld-pricing-header div { border-bottom-color: var(--ibo-navy); font-weight: 700; }
#order-standard_cart .domain-pricing .tld-filters a.badge-success, #order-standard_cart .domain-pricing .tld-filters a.label-success { background: var(--ibo-navy); }
#order-standard_cart .view-cart-items-header { background: var(--ibo-navy); border-radius: 10px 10px 0 0; font-weight: 700; }
#order-standard_cart .view-cart-items { border-color: var(--ibo-line); }
#order-standard_cart .order-summary { background: var(--ibo-navy); border-color: var(--ibo-navy); border-radius: 10px; }
#order-standard_cart .order-summary h2 { color: #fff; font-weight: 800; }
#order-standard_cart .summary-container { background: var(--ibo-mist); border-radius: 0 0 8px 8px; }
#order-standard_cart .order-summary .total-due-today .amt { color: var(--ibo-navy); font-weight: 800; }
#order-standard_cart .products .product { border-color: var(--ibo-line); border-radius: 10px; overflow: hidden; }
#order-standard_cart .products .product header { background: var(--ibo-tint); }
#order-standard_cart .products .product header span { color: var(--ibo-navy); font-weight: 800; }
#order-standard_cart .products .product footer .price, #order-standard_cart .products .product div.product-pricing span.price { color: var(--ibo-navy); font-weight: 800; }
#order-standard_cart .sub-heading { border-top-color: var(--ibo-line); }
#order-standard_cart .sub-heading span, #order-standard_cart .sub-heading-borderless span { color: var(--ibo-navy); font-weight: 700; }
#order-standard_cart .domain-selection-options .option { border-radius: 10px; }
#order-standard_cart .domain-selection-options .option-selected { background: var(--ibo-tint); border-color: var(--ibo-navy); }
#order-standard_cart .panel-addon-selected, #order-standard_cart .panel-addon .panel-add { border-color: var(--ibo-navy); }
#order-standard_cart .panel-addon .panel-add { background: var(--ibo-navy); }
#order-standard_cart .field, #order-standard_cart .form-control { border-color: var(--ibo-line); border-radius: 6px; }

/* ---------- Logo in de kop ---------- */
header.header .navbar-brand {
  display: inline-block; width: 160px; height: 44px; padding: 0;
  font-size: 0; color: transparent;
  background: url("https://iboweb.nl/img/iboweb-logo.svg") no-repeat left center / contain;
}