/* =========================================================
   Fused Graphics Group – storefront dark theme
   Matches fusedgraphics.com (navy + Inter + white rounded buttons)
   To revert: delete this file from Content Management > CSS Override
   ========================================================= */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --fgg-bg: #0C111D;        /* page background (website body) */
  --fgg-surface: #161B26;   /* header / footer / cards */
  --fgg-surface-2: #1F2533; /* raised elements, hovers */
  --fgg-border: #2A3140;
  --fgg-text: #FFFFFF;
  --fgg-muted: #94969C;     /* website paragraph grey */
  --fgg-accent: #2E9BDB;    /* website blue sub-heading accent */
}

/* ---------- Base ---------- */
html, body {
  background-color: var(--fgg-bg) !important;
  color: var(--fgg-text);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}
body, button, input, select, textarea,
.title, .subtitle, .content, .navbar, .footer, .card {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Main content wrappers that paint white */
.section, .hero, .container > .columns, .ict-content-column,
.box, .card, .card-content, .card-header, .panel, .tabs, .message-body,
.generatedcontent, .page, .page-body, .main-content, .master-wrapper-content {
  background-color: transparent;
  color: var(--fgg-text);
}

/* ---------- Typography ---------- */
h1, h2, h3, h4, h5, h6, .title, .ict-title {
  color: var(--fgg-text) !important;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.subtitle, .ict-sub-title { color: var(--fgg-accent) !important; font-weight: 400; }
p, .content p, .ict-content-column p, label, .help { color: var(--fgg-muted); }
strong, b { color: var(--fgg-text); }
a { color: var(--fgg-text); }
a:hover { color: var(--fgg-accent); }

/* ---------- Header / navbar ---------- */
#main-nav.navbar, .navbar.ict-navbar, .navbar-menu, .navbar-dropdown {
  background-color: var(--fgg-surface) !important;
  border-color: var(--fgg-border) !important;
}
#main-nav .navbar-item, #main-nav .navbar-link,
#main-nav .navbar-item > a, .navbar-dropdown .navbar-item {
  color: var(--fgg-text) !important;
  background-color: transparent !important;
}
#main-nav .navbar-item:hover, #main-nav .navbar-link:hover,
.navbar-dropdown .navbar-item:hover {
  color: var(--fgg-accent) !important;
  background-color: var(--fgg-surface-2) !important;
}
.navbar-link:not(.is-arrowless)::after { border-color: var(--fgg-text) !important; }
.navbar-burger span { background-color: var(--fgg-text) !important; }
/* white version of the logo on the dark header */
#main-nav .navbar-brand img {
  content: url('/-761597569/Handler/Picture/GU/F/ThemeImages/Fused%20logo_white.png');
}

/* ---------- Buttons (website style: white fill, navy text, 12px radius) ---------- */
.button.is-primary, .button.is-link, .button.is-info,
input[type="submit"], input[type="button"], button.ui-button, .ui-button {
  background-color: #FFFFFF !important;
  color: var(--fgg-surface) !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
.button.is-primary:hover, .button.is-link:hover, .button.is-info:hover,
input[type="submit"]:hover, input[type="button"]:hover, .ui-button:hover {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: var(--fgg-accent) !important;
}
/* secondary / outlined buttons */
.button:not(.is-primary):not(.is-link):not(.is-info):not(.is-danger):not(.is-success):not(.is-warning) {
  background-color: transparent;
  color: var(--fgg-text);
  border-color: var(--fgg-border);
  border-radius: 12px;
}
.button:not(.is-primary):not(.is-link):not(.is-info):not(.is-danger):not(.is-success):not(.is-warning):hover {
  border-color: var(--fgg-accent);
  color: var(--fgg-text);
}

/* ---------- Cards / product tiles ---------- */
.card, .box {
  background-color: var(--fgg-surface) !important;
  border: 1px solid var(--fgg-border);
  border-radius: 16px;
  box-shadow: none;
  overflow: hidden;
}
.card-header { box-shadow: none; border-bottom: 1px solid var(--fgg-border); }
.card-header-title, .card-content, .card-content * { color: var(--fgg-text); }
.ict-image img, .card-image img, .image img { border-radius: 16px; }

/* ---------- Forms: keep fields light so they stay obviously usable ---------- */
.input, .textarea, .select select, input[type="text"], input[type="email"],
input[type="password"], input[type="number"], input[type="tel"], input[type="search"], textarea, select {
  background-color: #FFFFFF !important;
  color: #0C111D !important;
  border-color: var(--fgg-border) !important;
  border-radius: 8px;
}
.input::placeholder, .textarea::placeholder, input::placeholder, textarea::placeholder { color: #6B7280 !important; }

/* ---------- Tables (basket, orders, addresses) ---------- */
.table, table {
  background-color: var(--fgg-surface) !important;
  color: var(--fgg-text) !important;
}
.table th, .table td, table th, table td {
  color: var(--fgg-text) !important;
  border-color: var(--fgg-border) !important;
}
.table.is-striped tbody tr:nth-child(even), .table.is-hoverable tbody tr:hover {
  background-color: var(--fgg-surface-2) !important;
}

/* ---------- Dropdowns / modals ---------- */
.dropdown-content, .modal-card-head, .modal-card-body, .modal-card-foot, .modal-content .box {
  background-color: var(--fgg-surface) !important;
  color: var(--fgg-text) !important;
  border-color: var(--fgg-border) !important;
}
.dropdown-item { color: var(--fgg-text) !important; }
.dropdown-item:hover, a.dropdown-item:hover { background-color: var(--fgg-surface-2) !important; }

/* ---------- Slider ---------- */
.flexslider, .infigo-slider { background: transparent !important; border: 0 !important; }
.flex-control-paging li a { background: rgba(255,255,255,.35) !important; }
.flex-control-paging li a.flex-active { background: #FFFFFF !important; }

/* ---------- Footer ---------- */
.ict-dedicated-footer, .arone-footer, footer, .footer {
  background-color: var(--fgg-surface) !important;
  color: var(--fgg-text) !important;
  border-top: 1px solid var(--fgg-border);
}
.ict-dedicated-footer a, .arone-footer a, .footer a { color: var(--fgg-muted) !important; }
.ict-dedicated-footer a:hover, .arone-footer a:hover, .footer a:hover { color: var(--fgg-text) !important; }

/* ---------- Bulma background/text utility classes used by content blocks ---------- */
.has-background-white, .has-background-white-bis, .has-background-white-ter, .has-background-light {
  background-color: var(--fgg-bg) !important;
}
.has-text-default, .has-text-dark, .has-text-black { color: var(--fgg-text) !important; }
.ict-dedicated-footer .title, .ict-dedicated-footer h1, .ict-dedicated-footer h2,
.ict-dedicated-footer h3, .ict-dedicated-footer h4 { color: var(--fgg-text) !important; }

/* ---------- Table rows (theme paints rows #F5F9FB, which hid cart text) ---------- */
table tr, .table tr, .cart-item-row, table tbody tr, table thead tr, table tfoot tr {
  background-color: var(--fgg-surface) !important;
}
table tbody tr:nth-child(even) { background-color: var(--fgg-surface-2) !important; }
form table tr, form .table tr, form table tbody tr:nth-child(even) { background-color: transparent !important; }
.cart-item-row-missingjob { box-shadow: inset 4px 0 0 #CF4646; }

/* ---------- Header logo area (white box on account pages) ---------- */
.navbar-brand, #main-nav .navbar-brand, #main-nav .navbar-item { background-color: transparent !important; }

/* ---------- My Account side menu ---------- */
.block-account-navigation .title, .block-account-navigation strong { color: var(--fgg-muted) !important; }
.block-account-navigation a { color: var(--fgg-muted) !important; border-radius: 8px; }
.block-account-navigation a:hover { color: var(--fgg-text) !important; background-color: var(--fgg-surface-2) !important; }
.block-account-navigation a.active { color: var(--fgg-surface) !important; background-color: #FFFFFF !important; font-weight: 600; }

/* ---------- Misc ---------- */
hr { background-color: var(--fgg-border); }
.notification:not([class*="is-"]) { background-color: var(--fgg-surface-2); color: var(--fgg-text); }
.breadcrumb a { color: var(--fgg-muted); }
.breadcrumb li.is-active a { color: var(--fgg-text); }
.pagination-link, .pagination-previous, .pagination-next {
  background: var(--fgg-surface); color: var(--fgg-text); border-color: var(--fgg-border);
}
.pagination-link.is-current { background: #FFFFFF; color: var(--fgg-surface); border-color: #FFFFFF; }

/* ---------- Login page ---------- */
.returning-wrapper__inner {
  background-color: var(--fgg-surface) !important;
  border: 1px solid var(--fgg-border) !important;
  border-radius: 16px !important;
}
.login-block table, .login-block .table-container, .login-block tr, .login-block td { background-color: transparent !important; }
.login-block label, .login-block .item-name { color: var(--fgg-muted) !important; }
.login-title { color: var(--fgg-text) !important; font-weight: 600 !important; }
.login-block .forgot-password a { color: var(--fgg-accent) !important; }
.loginbutton, .login-block button[type="submit"] {
  background-color: #FFFFFF !important;
  color: var(--fgg-surface) !important;
  border: 1px solid #FFFFFF !important;
  border-radius: 12px !important;
  font-weight: 600 !important;
}
.loginbutton:hover, .login-block button[type="submit"]:hover {
  background-color: transparent !important;
  color: #FFFFFF !important;
  border-color: var(--fgg-accent) !important;
}
/* Chrome autofill paints fields light blue; keep them white */
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px #FFFFFF inset !important;
  -webkit-text-fill-color: #0C111D !important;
}

/* ---------- Home page category icons: black F instead of gradient F ---------- */
/* Image uploaded under CSS Override > Uploaded Resources */
.ict-image.is-128x128 img {
  content: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/fgg-category-icon-black-f.png');
}

/* ---------- Home page slider: show the whole banner at every screen size ---------- */
/* Banners are ~1938x618; size each slide to that ratio and scale the image to fit */
.infigo-slider .slides > li {
  background-size: cover !important;
  background-position: center !important;
  aspect-ratio: 1938 / 618;
  height: auto !important;
  min-height: 0 !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
}
/* keep the slide's foreground image beside (not above) the banner text on phones */
@media screen and (max-width: 768px) {
  .infigo-slider .slides > li .columns { display: flex !important; }
  .infigo-slider .slides > li .column { flex: none; width: 50%; }
}

/* ---------- Promotional products slide: illustrated Fused promo collage ---------- */
/* Image uploaded under CSS Override > Uploaded Resources (replaces the mousepad photo) */
.infigo-slider .slides > li .ict-image img {
  content: url('/00000000-0000-0000-0000-000000000000/Handler/CSSOverride/GetImage/1/promo-collage.png');
}