/* Ingetrans – Fleet Widget CSS */
:root { --gffleetgrid-brand: #EF4444; }

.gffleetgrid-section { background:#fff; padding:112px 0; overflow:hidden; }
.gffleetgrid-container { max-width:1440px; margin:0 auto; padding:0 24px; }
@media(min-width:1024px){ .gffleetgrid-container { padding:0 48px; } }

/* Header */
.gffleetgrid-header { text-align:center; max-width:720px; margin:0 auto 64px; }
.gffleetgrid-eyebrow { display:inline-block; font-size:11px; text-transform:uppercase; letter-spacing:3px; font-weight:700; color:var(--gffleetgrid-brand); margin-bottom:12px; }
.gffleetgrid-title { font-size:clamp(2rem,4vw,3rem); font-weight:900; letter-spacing:-0.03em; line-height:1.1; color:#0f172a; margin:0 0 20px; }
.gffleetgrid-subtitle { font-size:1.0625rem; color:#64748b; line-height:1.7; margin:0; }

/* Cards Grid */
.gffleetgrid-cards-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-bottom:48px; }
@media(max-width:767px){ .gffleetgrid-cards-grid { grid-template-columns:1fr; } }

/* Card (button reset + styles) */
.gffleetgrid-card {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  text-align: left;
  cursor: pointer;
  padding: 36px;
  border-radius: 16px;
  border: 1px solid #e2e8f0;
  background: #fff;
  transition: transform .4s cubic-bezier(.22,1,.36,1), box-shadow .4s ease, border-color .3s ease;
  position: relative;
}
.gffleetgrid-card:hover { transform:translateY(-4px); box-shadow:0 24px 60px -12px rgba(15,23,42,.15); border-color:transparent; }
.gffleetgrid-card--dark { background:#0f172a; border-color:#1e293b; color:#fff; }
.gffleetgrid-card--dark:hover { border-color:#334155; box-shadow:0 24px 60px -12px rgba(0,0,0,.4); }

.gffleetgrid-card__top { display:flex; align-items:flex-start; justify-content:space-between; margin-bottom:24px; }
.gffleetgrid-card__icon { width:56px; height:56px; border-radius:12px; display:grid; place-items:center; background:#f1f5f9; color:#334155; transition:background .3s,color .3s; flex-shrink:0; }
.gffleetgrid-card:not(.gffleetgrid-card--dark):hover .gffleetgrid-card__icon { background:#0f172a; color:#fff; }
.gffleetgrid-card__icon--dark { background:rgba(245, 158, 11, 0.15); color:var(--gffleetgrid-brand); }
.gffleetgrid-card__icon svg { fill: currentColor; width: 28px; height: 28px; }
.gffleetgrid-card__icon svg path, .gffleetgrid-card__icon svg circle, .gffleetgrid-card__icon svg rect { stroke: currentColor; }
.gffleetgrid-card__count { font-size:1.875rem; font-weight:900; color:#e2e8f0; }
.gffleetgrid-card__count--dark { color:#1e293b; }
.gffleetgrid-card__title { font-size:1.2rem; font-weight:800; letter-spacing:-0.02em; color:#0f172a; margin:0 0 8px; }
.gffleetgrid-card--dark .gffleetgrid-card__title { color:#fff; }
.gffleetgrid-card__desc { font-size:0.875rem; line-height:1.7; color:#64748b; margin:0 0 20px; }
.gffleetgrid-card--dark .gffleetgrid-card__desc { color:#94a3b8; }
.gffleetgrid-card__cta { display:inline-flex; align-items:center; gap:6px; font-size:0.8125rem; font-weight:600; color:var(--gffleetgrid-brand); opacity:0; transform:translateY(4px); transition:opacity .3s,transform .3s; }
.gffleetgrid-card:hover .gffleetgrid-card__cta { opacity:1; transform:none; }

/* ── Card Modals ── */
.gffleetgrid-modal-overlay {
  position: fixed; inset:0;
  background: rgba(15,23,42,.7);
  backdrop-filter: blur(6px);
  z-index: 99999;
  display: grid;
  place-items: center;
  padding: 16px;
  animation: igf-fade-in .2s ease;
}
.gffleetgrid-modal-overlay[hidden] { display:none; }
@keyframes igf-fade-in { from{opacity:0} to{opacity:1} }

.gffleetgrid-modal {
  background: #fff;
  border-radius: 20px;
  max-width: 480px;
  width: 100%;
  overflow: hidden;
  box-shadow: 0 40px 80px -20px rgba(15,23,42,.4);
  animation: igf-slide-up .3s cubic-bezier(.22,1,.36,1);
}
@keyframes igf-slide-up { from{transform:translateY(24px);opacity:0} to{transform:none;opacity:1} }

.gffleetgrid-modal__header { display:flex; align-items:center; gap:16px; padding:28px; border-bottom:1px solid #f1f5f9; background:#f8fafc; position:relative; }
.gffleetgrid-modal__header--dark { background:#0f172a; border-color:#1e293b; }
.gffleetgrid-modal__header--dark .gffleetgrid-modal__count,
.gffleetgrid-modal__header--dark .gffleetgrid-modal__title { color:#fff; }
.gffleetgrid-modal__icon { width:48px; height:48px; border-radius:10px; background:#e2e8f0; display:grid; place-items:center; flex-shrink:0; color:#475569; }
.gffleetgrid-modal__icon svg { fill: currentColor; width: 24px; height: 24px; }
.gffleetgrid-modal__icon svg path, .gffleetgrid-modal__icon svg circle, .gffleetgrid-modal__icon svg rect { stroke: currentColor; }
.gffleetgrid-modal__header--dark .gffleetgrid-modal__icon { background:rgba(245, 158, 11, 0.15); color:var(--gffleetgrid-brand); }
.gffleetgrid-modal__count { font-size:0.75rem; text-transform:uppercase; letter-spacing:2px; font-weight:700; color:#94a3b8; }
.gffleetgrid-modal__title { font-size:1.25rem; font-weight:800; color:#0f172a; margin:2px 0 0; }
.gffleetgrid-modal__close { position:absolute; top:16px; right:16px; width:32px; height:32px; border-radius:50%; border:none; background:#e2e8f0; cursor:pointer; font-size:1.2rem; display:grid; place-items:center; transition:background .2s; }
.gffleetgrid-modal__close:hover { background:#cbd5e1; }
.gffleetgrid-modal__header--dark .gffleetgrid-modal__close { background:#1e293b; color:#94a3b8; }
.gffleetgrid-modal__body { padding:28px; }
.gffleetgrid-modal__body p { color:#475569; line-height:1.7; margin:0 0 16px; }
.gffleetgrid-modal__body ul { padding-left:20px; margin:0; }
.gffleetgrid-modal__body li { color:#64748b; padding:4px 0; }

/* Reveal */
.gffleetgrid-reveal { opacity:0; transform:translateY(28px); transition:opacity .65s cubic-bezier(.22,1,.36,1),transform .65s cubic-bezier(.22,1,.36,1); }
.gffleetgrid-reveal.gffleetgrid-animated { opacity:1; transform:none; }

.gffleetgrid-card__stat-icon i,
.gffleetgrid-modal__spec-icon i {
  font-size: 16px;
  color: inherit;
}
