/*
 * CamionOnline - Bootstrap 5 Custom Theme
 * Colore Primario: #192853 (blu notte)
 * Colore Secondario: #df2728 (rosso intenso)
 * Font: Verdana (storico) + miglioramenti tipografici
 * ================================================
 */

/* ================================================
   1. CSS VARIABLES (Design Tokens)
   ================================================ */
:root {
  /* Brand Colors */
  --co-primary:        #192853;
  --co-primary-dark:   #0f1a35;
  --co-primary-light:  #253d7a;
  --co-secondary:      #df2728;
  --co-secondary-dark: #b51e1f;
  --co-secondary-light:#e84e4f;

  /* Neutral Palette */
  --co-white:          #ffffff;
  --co-off-white:      #f8f8f8;
  --co-light-gray:     #eeeeee;
  --co-mid-gray:       #cccccc;
  --co-text-gray:      #555555;
  --co-text-dark:      #1a1a1a;
  --co-black:          #111111;

  /* Semantic Colors */
  --co-success:        #1a7a3c;
  --co-warning:        #e6a800;
  --co-info:           #2563a8;
  --co-danger:         #df2728;

  /* Evidence (ciano) - NON sovrascrive --bs-warning */
  --co-evidence:       #59E5FF;
  --co-evidence-dark:  #007B99;

  /* Typography */
  --co-font-base:      'Verdana', 'Geneva', Tahoma, sans-serif;
  --co-font-size-xs:   11px;
  --co-font-size-sm:   12px;
  --co-font-size-base: 13px;
  --co-font-size-md:   14px;
  --co-font-size-lg:   16px;
  --co-font-size-xl:   20px;
  --co-font-size-2xl:  24px;

  /* Spacing */
  --co-radius:         4px;
  --co-radius-lg:      8px;
  --co-shadow:         0 2px 6px rgba(25,40,83,0.15);
  --co-shadow-lg:      0 4px 16px rgba(25,40,83,0.2);

  /* Bootstrap Overrides via CSS vars */
  --bs-primary:        #192853;
  --bs-secondary:      #df2728;
  --bs-primary-rgb:    25, 40, 83;
  --bs-secondary-rgb:  223, 39, 40;
  --bs-font-sans-serif: 'Verdana', 'Geneva', Tahoma, sans-serif;
  --bs-body-font-size: 13px;
  --bs-body-color:     #1a1a1a;
  --bs-link-color:     #192853;
  --bs-link-hover-color: #df2728;
  --bs-border-radius:  4px;
  /* NOTA: --bs-warning lasciato al default Bootstrap (#ffc107) */
  /* Il ciano è disponibile come --co-evidence per uso custom */
}

/* ================================================
   2. LAYOUT — Struttura pagina
   ================================================ */

body { margin: 0; padding: 0; background-color: #eee; background: var(--co-light-gray); }

#maintopbanner {
  width: 100%;
  text-align: center;
  padding: 4px 0;
  margin: 0;
}

#navbar-main { width: 100%; padding: 0; margin: 0; }

.co-navbar-inner {
  width: 1024px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 0 8px;
}

#maincontent {
  width: 1024px;
  max-width: 100%;
  margin: 0 auto;
  background-color: var(--co-white);
  border-left:   1px solid var(--co-secondary);
  border-right:  1px solid var(--co-secondary);
  border-bottom: 1px solid var(--co-secondary);
  text-align: left;
  min-height: 60vh;
}

#belmenu3 {
  margin-top: 24px;
  padding: 8px 12px;
  border-top: 1px solid var(--co-light-gray);
  text-align: center;
}
#belmenu3 a, #belmenu3 a:visited {
  color: var(--co-primary);
  font-weight: bold;
  text-decoration: none;
  font-size: var(--co-font-size-sm);
}
#belmenu3 a:hover { color: var(--co-secondary); }

.bargiu {
  background-color: var(--bs-dark-bg-subtle);
  color: var(--co-black);
  padding: 5px 12px;
  font-size: var(--co-font-size-xs);
}
.bargiu a, .bargiu a:visited { color: var(--co-black); font-weight: bold; text-decoration: none; }
.bargiu a:hover { color: var(--co-primary); }

.footnote {
  width: 1024px;
  max-width: 100%;
  margin: 6px auto 0;
  padding: 10px 12px;
  font-size: var(--co-font-size-xs);
  color: var(--co-text-dark);
  text-align: center;
}

@media (max-width: 1039px) {
  #maincontent, .co-navbar-inner, .footnote { width: 100%; }
}

/* ================================================
   3. BOOTSTRAP COMPONENT OVERRIDES
   ================================================ */

/* --- Buttons --- */
.btn-primary {
  background-color: var(--co-primary);
  border-color: var(--co-primary);
  color: var(--co-white) !important;  /* forza bianco anche su a:visited */
  font-weight: bold;
  font-size: var(--co-font-size-sm);
  letter-spacing: 0.03em;
}
.btn-primary:hover,
.btn-primary:focus {
  background-color: var(--co-primary-light);
  border-color: var(--co-primary-light);
  color: var(--co-white) !important;
}
.btn-primary:active {
  background-color: var(--co-primary-dark) !important;
  border-color: var(--co-primary-dark) !important;
  color: var(--co-white) !important;
}

.btn-secondary {
  background-color: var(--co-secondary);
  border-color: var(--co-secondary);
  color: var(--co-white) !important;
  font-weight: bold;
  font-size: var(--co-font-size-sm);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background-color: var(--co-secondary-dark);
  border-color: var(--co-secondary-dark);
  color: var(--co-white) !important;
}

.btn-outline-primary {
  color: var(--co-primary);
  border-color: var(--co-primary);
}
.btn-outline-primary:hover {
  background-color: var(--co-primary);
  border-color: var(--co-primary);
  color: var(--co-white) !important;
}
.btn-outline-primary:active {
  background-color: var(--co-evidence-dark);
  border-color: var(--co-evidence-dark);
  color: var(--co-white) !important;
}

.btn-outline-secondary {
  color: var(--co-secondary);
  border-color: var(--co-secondary);
}
.btn-outline-secondary:hover {
  background-color: var(--co-secondary);
  border-color: var(--co-secondary);
  color: var(--co-white) !important;
}

/* Fix globale: link dentro qualsiasi bottone non devono ereditare a:visited */
.btn:visited,
.btn a:visited,
a.btn:visited {
  color: inherit;
}

/* Submit premium */
.btn-co-premium {
  background-color: var(--co-secondary);
  border-color: var(--co-secondary-dark);
  color: var(--co-white);
  font-size: var(--co-font-size-md);
  font-weight: bold;
  padding: 10px 20px;
  border-radius: var(--co-radius);
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}
.btn-co-premium:hover {
  background-color: var(--co-secondary-dark);
  color: var(--co-white);
  text-decoration: none;
}

/* Submit free */
.btn-co-free {
  background-color: var(--co-warning);
  border-color: #c48e00;
  color: var(--co-black);
  font-size: var(--co-font-size-sm);
  font-weight: bold;
  padding: 4px 12px;
  border-radius: var(--co-radius);
  cursor: pointer;
  border: none;
  transition: background-color 0.2s ease;
}
.btn-co-free:hover {
  background-color: #c48e00;
  color: var(--co-black);
  text-decoration: none;
}

/* --- Navbar --- */
.navbar-co {
  background-color: var(--co-primary);
  border-bottom: 3px solid var(--co-secondary);
}
.navbar-co .navbar-brand {
  color: var(--co-white);
  font-weight: 900;
  font-size: var(--co-font-size-lg);
  letter-spacing: 0.05em;
}
.navbar-co .nav-link {
  color: rgba(255,255,255,0.85) !important;
  font-size: var(--co-font-size-sm);
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 8px 14px !important;
  transition: color 0.15s;
  border-bottom: 2px solid var(--co-primary);
}
.navbar-co .nav-link:hover,
.navbar-co .nav-link.active {
  color: var(--co-white) !important;
  border-bottom: 2px solid var(--co-secondary);
  text-decoration: none;
}
.navbar-co .navbar-toggler {
  border-color: rgba(255,255,255,0.4);
}
.navbar-co .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-co .navbar-nav { width: 100%; }
.navbar-co .nav-item-evidence .nav-link { 
  color: var(--co-secondary) !important; 
  background-color: var(--co-white);
}
.navbar-co .navbar-nav .nav-item + .nav-item .nav-link {
  border-left: 2px solid rgba(255, 255, 255, 0.75);
}
.navbar-co .navbar-nav .nav-item { margin: 0.3em 0; }
.navbar-co .nav-item-login {
  margin-left: auto !important;
  background: var(--co-secondary);
}

/* --- Top bar --- */
.co-topbar {
  background-color: var(--co-primary);
  color: rgba(255,255,255,0.7);
  font-size: var(--co-font-size-xs);
  padding: 4px 10px;
  border-bottom: 1px solid var(--co-primary-light);
}
.co-topbar a {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-weight: bold;
}
.co-topbar a:hover { color: var(--co-white); }

/* Bottom bar */
.co-bottombar {
  background-color: var(--co-warning);
  color: var(--co-black);
  font-size: var(--co-font-size-sm);
  padding: 4px 10px;
}
.co-bottombar a,
.co-bottombar a:visited {
  color: var(--co-black);
  font-weight: bold;
  text-decoration: none;
}
.co-bottombar a:hover { color: var(--co-primary); }

/* --- Cards --- */
.card {
  border: 1px solid var(--co-mid-gray);
  border-radius: var(--co-radius);
  box-shadow: var(--co-shadow);
  font-size: var(--co-font-size-sm);
}

/*
 * card-header: DEFAULT blu primario.
 * Per header colorati usare le classi modificatrici:
 *   .warning-header  → giallo (offertissime, sezioni home)
 *   .secondary        → rosso
 * Non aggiungere stili inline bg-warning nei template,
 * usare sempre queste classi per coerenza.
 */
.card-header {
  background-color: var(--co-primary);
  color: var(--co-white);
  font-weight: bold;
  font-size: var(--co-font-size-sm);
  border-radius: var(--co-radius) var(--co-radius) 0 0 !important;
  padding: 6px 10px;
}
.card-header.secondary {
  background-color: var(--co-secondary);
  color: var(--co-white);
}
.card-header.warning-header {
  background-color: var(--co-warning);
  color: var(--co-black);
}
/* Offertissima: rossa */
.card-header.offertissima-header {
  background-color: var(--co-secondary);
  color: var(--co-white);
}

/* --- Badges --- */
.badge.bg-primary   { background-color: var(--co-primary)   !important; }
.badge.bg-secondary { background-color: var(--co-secondary) !important; }

/* --- Tables --- */
.table thead th {
  background-color: var(--co-primary);
  color: var(--co-white);
  font-size: var(--co-font-size-sm);
  font-weight: bold;
  text-align: center;
  padding: 6px 4px;
  border-color: var(--co-primary-dark);
}
.table-co-bordered { border: 1px solid var(--co-secondary); }
.table-co-bordered td {
  border-left: 1px solid var(--co-secondary);
  border-bottom: 1px solid var(--co-secondary);
  padding: 4px;
}
.table-striped > tbody > tr:nth-of-type(odd) > * {
  background-color: rgba(25, 40, 83, 0.04);
}

/* --- Forms --- */
.form-label {
  font-size: var(--co-font-size-sm);
  font-weight: bold;
  color: var(--co-text-dark);
}
.form-control:focus,
.form-select:focus {
  border-color: var(--co-primary);
  box-shadow: 0 0 0 0.2rem rgba(25, 40, 83, 0.2);
}
fieldset.co-fieldset {
  border: 2px solid var(--co-warning);
  border-radius: var(--co-radius);
  padding: 12px;
  margin-bottom: 16px;
}
legend.co-legend {
  background-color: inherit;
  border: 1px solid var(--co-warning);
  padding: 2px 8px;
  font-size: var(--co-font-size-md);
  font-weight: bold;
  width: auto;
  float: none;
}

/* --- Alerts --- */
.alert-primary {
  background-color: rgba(25, 40, 83, 0.1);
  border-color: var(--co-primary);
  color: var(--co-primary-dark);
}
.alert-secondary {
  background-color: rgba(223, 39, 40, 0.08);
  border-color: var(--co-secondary);
  color: var(--co-secondary-dark);
}
.alert-success {
  background-color: rgba(26, 122, 60, 0.1);
  border-color: var(--co-success);
  color: #155228;
}
.alert-warning {
  background-color: #fffaed;
  border-color: var(--co-warning);
  color: #7a5600;
}

/* --- Pagination --- */
.page-link {
  color: var(--co-primary);
  font-size: var(--co-font-size-sm);
}
.page-link:hover {
  color: var(--co-secondary);
  background-color: var(--co-light-gray);
}
.page-item.active .page-link {
  background-color: var(--co-primary);
  border-color: var(--co-primary);
  color: var(--co-white);
}

/* --- Dropdown --- */
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(25, 40, 83, 0.08);
  color: var(--co-primary);
}
.dropdown-item.active {
  background-color: var(--co-primary);
  color: var(--co-white);
}

/* --- Tabs --- */
.nav-tabs .nav-link {
  color: var(--co-primary);
  font-size: var(--co-font-size-sm);
  font-weight: bold;
  border-radius: var(--co-radius) var(--co-radius) 0 0;
  background-color: #e0e4ef;
  margin-right: 3px;
  border: 1px solid var(--co-mid-gray);
}
.nav-tabs .nav-link:hover {
  background-color: var(--co-primary-light);
  color: var(--co-white);
  border-color: var(--co-primary-light);
}
.nav-tabs .nav-link.active {
  background-color: var(--co-primary);
  color: var(--co-white);
  border-color: var(--co-primary);
}

/* ================================================
   4. CUSTOM CAMIONONLINE COMPONENTS
   ================================================ */
#flash-container .alert {
    margin-bottom: 0;
    border-radius: 0;
    border-left: none;
    border-right: none;
}


body {
  font-family: var(--co-font-base);
  font-size: var(--co-font-size-base);
  color: var(--co-text-dark);
  background-color: #eee;
  background: var(--co-light-gray);
}

#maincontent {
  background: var(--co-white);
  max-width: 1024px;
  margin: 0 auto;
  border: none;
  text-align: left;
  padding: 0.7em;
}

/* --- Links ---
 * a:visited usa viola Bootstrap di default.
 * Dentro i bottoni viene annullato da .btn:visited sopra.
 * Nelle card e nei risultati mantiene il colore brand.
 */
a:link    { color: var(--co-primary); }
a:visited { color: #5a3a8a; }
a:hover   { color: var(--co-secondary); text-decoration: underline; }

/* Link dentro card: non viola ma primario */
.card a:visited,
.list-group-item a:visited,
.offerta-card a:visited {
  color: var(--co-primary);
}

/* --- Typography utilities --- */
.co-title        { color: var(--co-primary); font-size: var(--co-font-size-2xl); font-weight: 900; letter-spacing: 0.04em; }
.co-subtitle     { color: var(--co-primary); font-size: var(--co-font-size-xl); font-weight: bold; }
.co-section-title {
  color: var(--co-warning);
  font-size: var(--co-font-size-md);
  font-weight: bold;
  letter-spacing: 0.1em;
  border-bottom: 2px solid var(--co-warning);
  padding-bottom: 4px;
  margin-bottom: 10px;
}
.co-ptitle       { color: var(--co-warning); font-size: var(--co-font-size-sm); font-weight: bold; letter-spacing: 0.2em; }
.co-mediumtitle  { color: var(--co-primary); font-size: var(--co-font-size-lg); font-weight: 900; }
.co-littletitle  { color: var(--co-primary); font-size: var(--co-font-size-sm); font-weight: bold; }
.co-tinytext     { font-size: var(--co-font-size-xs); }
.co-footnote     { font-size: var(--co-font-size-xs); color: #888; }
.co-deactivated  { color: #888; }
.co-decoration   { font-size: var(--co-font-size-md); color: var(--co-warning); font-weight: bold; letter-spacing: 2px; text-decoration: none; }
.co-altdecoration { font-size: var(--co-font-size-md); color: var(--co-primary); font-weight: bold; letter-spacing: 2px; text-decoration: none; }

/* --- Premium / Paid ad components --- */
.co-premium-color     { color: var(--co-secondary); }
.co-box-premium {
  background-color: #f5e8e8;
  background-image: url("./img/crown.png");
  background-position: left top;
  background-repeat: no-repeat;
  border: 1px solid var(--co-secondary);
  border-right: 2px solid var(--co-secondary);
  border-bottom: 2px solid var(--co-secondary);
  padding: 8px 8px 8px 40px;
  margin: 8px;
  min-height: 6em;
  border-radius: var(--co-radius);
}
.co-box-order {
  background-color: #f5e8e8;
  border: 1px solid var(--co-secondary);
  border-right: 2px solid var(--co-secondary);
  border-bottom: 2px solid var(--co-secondary);
  padding: 8px 8px 8px 14px;
  margin: 8px;
  border-radius: var(--co-radius);
}
.co-box-order-title {
  background-color: var(--co-secondary);
  color: var(--co-white);
  padding: 6px 8px;
  margin: 0 0 8px;
  font-weight: bold;
  font-size: var(--co-font-size-sm);
  border-radius: var(--co-radius) var(--co-radius) 0 0;
}
.co-border-premium { border: 1px solid var(--co-secondary); padding: 6px; border-radius: var(--co-radius); }
.co-premium-title  { color: var(--co-secondary); font-size: var(--co-font-size-lg); font-weight: 900; margin-bottom: 12px; }
.co-offertissima-title { color: var(--co-secondary); font-size: 18px; font-weight: 900; margin-bottom: 12px; }

.co-premium-link {
  display: inline-block;
  padding: 4px 8px;
  background-color: var(--co-secondary);
  color: var(--co-white) !important;
  font-weight: bold;
  font-size: var(--co-font-size-sm);
  text-decoration: none;
  border-radius: var(--co-radius);
  transition: background-color 0.15s;
}
.co-premium-link:hover { background-color: var(--co-secondary-dark); color: var(--co-white) !important; }

.co-offertissima-link {
  display: inline-block;
  padding: 4px 8px;
  background-color: var(--co-success);
  color: var(--co-white) !important;
  font-weight: bold;
  font-size: var(--co-font-size-sm);
  text-decoration: none;
  border-radius: var(--co-radius);
}
.co-offertissima-link:hover { background-color: #115c2d; color: var(--co-white) !important; }

/* --- Result boxes --- */
.co-resultbox {
  border-top: 2px solid #c4d5e9;
  margin: 14px 0 4px;
  padding: 8px 0;
  font-size: var(--co-font-size-sm);
}
.co-resultbox-premium {
  background: white url("./img/premium_sfondo7_wide.png") left top no-repeat;
  border: 1px solid var(--co-secondary);
  padding: 28px 8px 8px;
  margin: 2px 0;
  min-height: 95px;
  border-radius: var(--co-radius);
}
.co-resultbox-offertissima {
  background: white url("./img/offertissima_sfondo1_wide.png") left top no-repeat;
  border: 1px solid var(--co-success);
  padding: 52px 8px 8px;
  margin: 2px 0;
  min-height: 120px;
  border-radius: var(--co-radius);
}

/* --- Link boxes --- */
.co-linkbox       { background-color: var(--co-light-gray); border-bottom: 1px solid #666; border-right: 1px solid #666; padding: 4px 6px; margin-bottom: 3px; font-size: var(--co-font-size-sm); }
.co-linkbox-short { background-color: #dddded; border-bottom: 1px solid #333; border-right: 1px solid #333; padding: 4px 6px; font-size: var(--co-font-size-sm); }
.co-linktitlebox  { background-color: var(--co-warning); border-bottom: 1px solid #333; border-right: 1px solid #333; padding: 4px 8px; margin: 8px 0 3px; font-size: var(--co-font-size-sm); font-weight: bold; }

/* --- Color utilities --- */
.co-bg-primary   { background-color: var(--co-primary);    color: var(--co-white); }
.co-bg-secondary { background-color: var(--co-secondary);  color: var(--co-white); }
.co-bg-warning   { background-color: var(--co-warning);    color: var(--co-black); }
.co-bg-evidence  { background-color: var(--co-evidence);   color: var(--co-black); }
.co-bg-light     { background-color: var(--co-off-white);  color: var(--co-text-dark); }
.co-bg-gray      { background-color: var(--co-light-gray); color: var(--co-text-dark); }
.co-bg-orange    { background-color: #fe7; color: var(--co-black); border: 1px solid #c4d5e9; }
.co-text-primary   { color: var(--co-primary); }
.co-text-secondary { color: var(--co-secondary); }
.co-text-warning   { color: var(--co-warning); }
.co-text-evidence  { color: var(--co-evidence-dark); }
.co-text-muted     { color: var(--co-text-gray); }
.co-text-green     { color: var(--co-success); font-weight: bold; }

/* --- Sidebars --- */
#sinistra, #destra {
  width: 234px;
  font-size: var(--co-font-size-sm);
  background-color: var(--co-white);
  text-align: center;
}
#centro { width: 500px; background-color: var(--co-white); }

@media (max-width: 991.98px) {
  #sinistra, #destra, #centro { width: 100%; float: none; }
}

/* --- Tables servizi --- */
.co-tabservizi { background-color: #dddded; width: 100%; border-collapse: collapse; }
.co-tabservizi th { background-color: var(--co-primary); color: var(--co-white); font-size: var(--co-font-size-sm); font-weight: bold; text-align: center; padding: 4px 6px; }
.co-tabservizi td { border-left: 1px solid var(--co-primary); border-bottom: 1px solid var(--co-primary); padding: 4px; font-size: var(--co-font-size-sm); }

/* --- Preventivo --- */
.co-tbl-preventivo { background-color: #f0f0d0; width: 100%; text-align: left; padding: 4px; }
.co-tbl-preventivo td { border-right: 1px solid #fd5; padding: 4px; width: 250px; }
.co-tbl-preventivo .tdtitle { border-top: 1px solid #fd5; background-color: var(--co-white); color: var(--co-black); width: 100%; }
.co-tbl-preventivo .tdtitle h4 { font-size: 1.1em; padding: 6px 12px; margin: 0; }

/* --- Concbox --- */
.co-concbox { border-top: 2px solid var(--co-warning); margin: 14px 0 4px; padding: 10px 6px 6px; font-size: var(--co-font-size-sm); }

/* --- Feedback --- */
.co-feedback    { padding: 8px; border: 2px solid var(--co-info);    border-radius: var(--co-radius); }
.co-error       { padding: 8px; border: 2px solid var(--co-danger);  border-radius: var(--co-radius); background: #fff5f5; }
.co-warning-box { padding: 8px; border: 2px solid var(--co-warning); border-radius: var(--co-radius); background: #fffaed; }
.co-success-box { padding: 8px; border: 2px solid var(--co-success); border-radius: var(--co-radius); background: #f0fff4; }

/* --- Misc --- */
.co-newlink { color: var(--co-warning); font-size: smaller; font-weight: bold; }
.co-oro { font-size: 9px; color: var(--co-warning); font-weight: 900; letter-spacing: -4px; text-decoration: none; }

/* --- Home layout helpers --- */
.co-home-main        { width: 72%; padding: 0; }
.co-home-sceltabreve { width: 45%; padding: 6px; }
.co-home-loginbox    { width: 48%; text-align: justify; padding: 6px; vertical-align: top; }

/* --- Softline / Vspace --- */
.co-softline { height: 1px; width: 50%; background-color: var(--co-primary); opacity: 0.3; margin: 0; padding: 0; }
.co-vspace   { height: 4px; margin: 2px 0; padding: 0; background-color: transparent; }

/* --- Card layout (offertissime grid) --- */
.co-card {
  border: 2px dotted var(--co-mid-gray);
  float: left;
  padding: 0;
  margin: 10px 10px 0 0;
  text-align: center;
  width: 150px;
  height: 208px;
  overflow: hidden;
  font-size: var(--co-font-size-xs);
}
.co-offcell {
  border: 1px dotted var(--co-success);
  border-right: none;
  padding: 0;
  width: 100px;
  height: 142px;
  overflow: hidden;
  text-align: center;
  vertical-align: top;
  float: left;
}

@media (max-width: 767.98px) {
  .co-home-main, .co-home-sceltabreve, .co-home-loginbox { width: 100%; }
  .co-card, .co-offcell { width: 44%; margin: 4px 2%; }
}

/* ================================================
   5. SPRITES
   ================================================ */

/* --- Sprite Categorie --- */
.cat-icon {
  display: inline-block;
  width: 64px;
  height: 64px;
  background-image: url('/img/icone/categorie-sprite.png');
  background-repeat: no-repeat;
}

.cat-icon--trattori-stradali      { background-position:    0px    0px; }
.cat-icon--semirimorchio          { background-position:  -64px    0px; }
.cat-icon--centinato              { background-position: -128px    0px; }
.cat-icon--cassone-aperto         { background-position: -192px    0px; }
.cat-icon--ribaltabile            { background-position: -256px    0px; }
.cat-icon--furgone                { background-position: -320px    0px; }

.cat-icon--cisterna               { background-position:    0px  -64px; }
.cat-icon--frigo-isotermico       { background-position:  -64px  -64px; }
.cat-icon--camion-con-gru         { background-position: -128px  -64px; }
.cat-icon--rimorchio              { background-position: -192px  -64px; }
.cat-icon--scarrabile             { background-position: -256px  -64px; }
.cat-icon--telaio                 { background-position: -320px  -64px; }

.cat-icon--autogru                { background-position:    0px -128px; }
.cat-icon--betoniera              { background-position:  -64px -128px; }
.cat-icon--bisarca                { background-position: -128px -128px; }
.cat-icon--bus-minibus            { background-position: -192px -128px; }
.cat-icon--mezzo-opera            { background-position: -256px -128px; }
.cat-icon--mezzo-ecologia         { background-position: -320px -128px; }

.cat-icon--soccorso-stradale      { background-position:    0px -192px; }
.cat-icon--pick-up                { background-position:  -64px -192px; }
.cat-icon--muletti-carrelli       { background-position: -128px -192px; }
.cat-icon--piattaforme-aeree      { background-position: -192px -192px; }
.cat-icon--mezzo-speciale         { background-position: -256px -192px; }

.cat-icon--veicolo-blindato       { background-position:    0px -256px; }
.cat-icon--veicolo-militare       { background-position:  -64px -256px; }
.cat-icon--veicolo-antincendio    { background-position: -128px -256px; }
.cat-icon--carro-attrezzi-pesante { background-position: -192px -256px; }
.cat-icon--veicolo-ferroviario    { background-position: -256px -256px; }

/* --- Sprite Marche --- */
.marchesmall {
  display: inline-block;
  width: 64px;
  height: 36px;
  background-image: url('/img/icone/categorie-sprite.png');
  background-repeat: no-repeat;
}

.marchesmall--dongfeng       { background-position: -384px  -14px; }
.marchesmall--daf            { background-position: -384px  -96px; }
.marchesmall--ford-trucks    { background-position: -384px -134px; }
.marchesmall--ginaf          { background-position: -384px -216px; }
.marchesmall--hino           { background-position: -384px -270px; }
.marchesmall--hyundai        { background-position: -448px  -24px; }
.marchesmall--isuzu          { background-position: -448px  -84px; }

.marchesmall--mercedes-benz  { background-position: -448px -134px; }
.marchesmall--volvo          { background-position: -448px -208px; }
.marchesmall--scania         { background-position: -448px -276px; }
.marchesmall--man            { background-position: -512px  -16px; }
.marchesmall--iveco          { background-position: -512px  -84px; }
.marchesmall--renault-trucks { background-position: -512px -136px; }

/* ================================================
   6. OFFERTA CARD COMPONENTS
   ================================================ */

.marca-card,
.cat-card {
  border: 1px solid transparent;
  transition: border-color .2s ease, background-color .2s ease;
}
.marca-card { border: 1px solid var(--co-evidence-dark); }
.marca-card:hover,
.cat-card:hover {
  border-color: #dee2e6;
  background-color: #f8f9fa;
}
.marca-logo {
  max-height: 41px;
  max-width: 100px;
  object-fit: contain;
}

/* Differenziazione area categoria */
.cat-area--marginale .cat-label {
  color: #adb5bd !important;
  font-weight: normal !important;
}

/* Offerta cards nei risultati */
.offerta-card { transition: box-shadow .15s ease; }
.offerta-card:hover { box-shadow: var(--co-shadow-lg) !important; }

/* rigapremium: card con bordo rosso */
.premium-card {
  border-color: var(--co-secondary) !important;
}
.premium-card .card-header {
  background-color: var(--co-secondary);
}

/* rigaoffertissima: card con bordo verde */
.offertissima-card {
  border-color: var(--co-secondary-light) !important;
}
.offertissima-card .card-header {
  background-color: var(--co-secondary);
  color: var(--co-white);
}

/* ================================================
   7. PRINT STYLES
   ================================================ */
@media print {
  body { background: white; }
  .navbar-co, .co-topbar, .co-bottombar, #sinistra, #destra { display: none; }
  #maincontent { border: none; width: 100%; max-width: 100%; }
  #centro { width: 100%; }
  a[href]:after { content: " (" attr(href) ")"; font-size: 9px; }
}