.elementor-7 .elementor-element.elementor-element-451a3b3{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}/* Start custom CSS for html, class: .elementor-element-1f23671 */@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

.mock--fleet{
  width:100%;
  max-width:100%;
  margin:0 auto;
  font-family:"Inter",system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  color:#111827;
}

.mock--fleet,
.mock--fleet *{
  box-sizing:border-box;
}

.mockFleetWindow{
  width:min(100%, 1520px);
  margin:0 auto;
  display:grid;
  grid-template-columns:260px minmax(0,1fr);
  min-height:760px;
  background:#ffffff;
  border:1px solid #e7e5e4;
  border-radius:28px;
  overflow:hidden;
  box-shadow:
    0 1px 2px rgba(15,23,42,.04),
    0 18px 42px rgba(15,23,42,.06);
}

.mockFleetSidebar{
  background:
    linear-gradient(180deg,#ffffff 0%, #fcfcfb 100%);
  border-right:1px solid #ece8e3;
  display:flex;
  flex-direction:column;
  min-width:0;
}

.mockFleetBrand{
  height:71px;
  display:flex;
  align-items:center;
  padding:18px 20px;
  border-bottom:1px solid #f0ece7;
}

.mockFleetLogoImg{
  display:block;
  width:55%;
  max-width:150px;
  height:auto;
  object-fit:contain;
}

.mockFleetWorkspace{
  display:flex;
  align-items:center;
  gap:8px;
  padding:14px 20px 6px;
  font-size:11px;
  color:#6b7280;
  letter-spacing:.02em;
  text-transform:uppercase;
  font-weight:500;
}

.workspaceDot{
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff8a00;
  display:inline-block;
}

.mockFleetNav{
  padding:8px 10px 14px;
}

.mfNavItem{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:40px;
  padding:0 12px;
  border-radius:12px;
  color:#374151;
  text-decoration:none;
  font-size:13px;
  font-weight:500;
  margin-bottom:4px;
  transition:
    background-color .22s ease,
    color .22s ease,
    transform .22s ease,
    box-shadow .22s ease;
}

.mfNavItem .ico{
  width:16px;
  min-width:16px;
  text-align:center;
  color:#6b7280;
  font-size:13px;
  transition:color .22s ease, transform .22s ease;
}

.mfNavItem .txt{
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.mfNavItem.active{
  background:#fff6ed;
  color:#c96c00;
  box-shadow:inset 0 0 0 1px rgba(255,138,0,.10);
}

.mfNavItem.active .ico{
  color:#c96c00;
}

.navBadge,
.navCount{
  margin-left:auto;
  font-size:10px;
  line-height:1;
  padding:5px 7px;
  border-radius:999px;
  font-weight:600;
}

.navBadge{
  background:#fff;
  color:#c96c00;
  border:1px solid #f6d4ac;
}

.navCount{
  background:#fff1f2;
  color:#dc2626;
  border:1px solid #ffd8dc;
}

.mockFleetSidebarFoot{
  margin-top:auto;
  padding:14px 14px 16px;
  border-top:1px solid #f0ece7;
  display:grid;
  gap:10px;
}

.sideMeta{
  border:1px solid #ede8e1;
  border-radius:14px;
  background:#fff;
  padding:10px 12px;
}

.sideMetaLabel{
  font-size:10px;
  color:#9ca3af;
  text-transform:uppercase;
  letter-spacing:.04em;
  margin-bottom:6px;
  font-weight:600;
}

.sideMetaValue{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  font-size:12px;
  color:#374151;
  font-weight:500;
}

.sideMetaValue span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}

.sideMetaValue i{
  color:#6b7280;
  font-size:11px;
}

.mockFleetMain{
  min-width:0;
  background:
    radial-gradient(circle at 26% 10%, rgba(255,138,0,.045), transparent 18%),
    linear-gradient(180deg,#fcfcfc 0%, #f7f7f7 100%);
}

.mockFleetTopbar{
  min-height:60px !important;
  padding:14px 20px;
  border-bottom:1px solid #ece8e3;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(10px);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.mockFleetSearch{
  flex:1;
  min-width:0;
  max-width:560px;
  height:42px;
  padding:0 14px;
  display:flex;
  align-items:center;
  gap:10px;
  border:1px solid #e7e5e4;
  border-radius:12px;
  background:#ffffff;
  color:#9ca3af;
  font-size:12.5px;
  font-weight:400;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
}

.mockFleetSearch i{
  color:#6b7280;
  font-size:12px;
}

.mockFleetTopActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.topActionBtn{
  width:36px;
  height:36px;
  border-radius:10px;
  border:1px solid #ece8e3;
  background:#fff;
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  position:relative;
  box-shadow:0 1px 0 rgba(15,23,42,.02);
  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.topActionBtn i{
  font-size:13px;
  transition:transform .22s ease;
}

.topActionPing{
  position:absolute;
  top:7px;
  right:7px;
  width:7px;
  height:7px;
  border-radius:999px;
  background:#ff8a00;
  border:2px solid #fff;
}

.mockFleetUser{
  margin-left:6px;
  padding-left:12px;
  border-left:1px solid #ece8e3;
  display:flex;
  align-items:center;
  gap:10px;
}

.avatar{
  width:36px;
  height:36px;
  border-radius:999px;
  background:linear-gradient(180deg,#cfcfcf 0%, #a6a6a6 100%);
  display:flex;
  align-items:center;
  justify-content:center;
  color:#fff;
  font-size:12px;
  font-weight:600;
  flex:0 0 36px;
}

.userMeta{
  display:flex;
  flex-direction:column;
  line-height:1.15;
}

.userName{
  font-size:12.5px;
  color:#111827;
  font-weight:600;
}

.userRole{
  font-size:11px;
  color:#9ca3af;
  font-weight:400;
}

.mockFleetContent{
  padding:20px;
}

.mockFleetHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  margin-bottom:18px;
}

.mockFleetHeaderText{
  min-width:0 !important;
}

.pageOverline{
  font-size:10px !important;
  text-transform:uppercase !important;
  letter-spacing:.08em !important;
  color:#9ca3af !important;
  margin-bottom:7px !important;
  font-weight:600 !important;
}

.mockFleetHeaderText h3{
  margin:0 0 6px !important;
  font-size:25px !important;
  line-height:1 !important;
  font-weight:600 !important;
  letter-spacing:-.03em !important;
  color:#111827 !important;
}

.mockFleetHeaderText p{
  margin:0 !important;
  font-size:12.5px !important;
  line-height:1.5 !important;
  color:#6b7280 !important;
  font-weight:400 !important;
}

.mockFleetHeaderActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.headBtn{
  height:38px;
  padding:0 14px;
  border-radius:12px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-size:12px;
  font-weight:500;
  border:1px solid #e7e5e4;
  background:#fff;
  color:#374151;
  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.headBtn i{
  font-size:11px;
  transition:transform .22s ease;
}

.headBtn--primary{
  border-color:#f7c995;
  background:linear-gradient(180deg,#ff9a1a 0%, #f58200 100%);
  color:#fff;
  box-shadow:0 10px 20px rgba(245,130,0,.16);
}

.headBtn--ghost{
  background:#fff;
}

.mockFleetStats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  margin-bottom:16px;
}

.mfCard{
  background:#fff;
  border:1px solid #ece8e3;
  border-radius:16px;
  padding:5px 14px 5px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  min-width:0;
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.mfCardTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:10px;
}

.mfCardLabel{
  font-size:11.5px;
  color:#6b7280;
  font-weight:500;
  line-height:1.35;
}

.mfCardIcon{
  width:26px;
  height:26px;
  border-radius:9px;
  background:#f9fafb;
  border:1px solid #ece8e3;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#6b7280;
  flex:0 0 26px;
  transition:
    transform .26s ease,
    background-color .26s ease,
    border-color .26s ease,
    color .26s ease;
}

.mfCardIcon i{
  font-size:11px;
}

.mfCardValueRow{
  display:flex;
  align-items:flex-end;
  gap:8px;
  min-width:0;
}

.mfCardValue{
  font-size:32px;
  line-height:.95;
  font-weight:500;
  letter-spacing:-.04em;
  color:#111827;
  white-space:nowrap;
}

.mfCardValue.orange{
  color:#c9821a;
}

.mfCardValueRow--km .mfCardValue{
  font-size:31px;
}

.unit{
  font-size:14px;
  line-height:1.1;
  color:#6b7280;
  font-weight:500;
  margin-bottom:4px;
}

.mfCardDelta{
  margin-left:auto;
  font-size:11px;
  font-weight:500;
  margin-bottom:4px;
  white-space:nowrap;
}

.mfCardDelta.positive{
  color:#16a34a;
}

.mfCardDelta.negative{
  color:#dc2626;
}

.mfCardDelta.neutral{
  color:#6b7280;
}

.mfCardFoot{
  margin-top:9px;
  font-size:11px;
  color:#9ca3af;
  font-weight:400;
}

.mockFleetMiddle{
  display:grid;
  grid-template-columns:minmax(0,1.6fr) minmax(260px,.7fr);
  gap:12px;
  margin-bottom:16px;
}

.mockFleetMapCard,
.miniPanel,
.mockFleetTableCard{
  background:#fff;
  border:1px solid #ece8e3;
  border-radius:16px;
  box-shadow:0 1px 2px rgba(15,23,42,.03);
  transition:
    transform .28s ease,
    box-shadow .28s ease,
    border-color .28s ease;
}

.mockFleetMapCard{
  padding:14px;
  min-width:0;
}

.sectionHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:0px;
}

.sectionHead h4{
  margin:0 0 3px;
  font-size:13px;
  line-height:1.2;
  color:#111827;
  font-weight:600;
}

.sectionHead p{
  margin:0;
  font-size:11px !important;
  color:#9ca3af !important;
  line-height:1.4 !important;
  font-weight:400 !important;
}

.sectionHeadActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.softPill{
  display:inline-flex;
  align-items:center;
  gap:6px;
  min-height:28px;
  padding:0 10px;
  border-radius:999px;
  border:1px solid #ece8e3;
  background:#fff8f1;
  color:#c96c00;
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
  transition:
    transform .22s ease,
    box-shadow .22s ease,
    border-color .22s ease;
}

.softPill i{
  font-size:10px;
}

.miniBtn{
  width:28px;
  height:28px;
  border-radius:10px;
  border:1px solid #ece8e3;
  background:#fff;
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.miniBtn i{
  font-size:11px;
  transition:transform .22s ease;
}

.mockFleetMapPlaceholder{
  position:relative;
  height:190px;
  border-radius:14px;
  border:1px dashed #e6dfd6;
  overflow:hidden;
  background:
    linear-gradient(180deg,#fbfbfb 0%, #f5f5f5 100%);
}

.mapPattern{
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(rgba(15,23,42,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(15,23,42,.03) 1px, transparent 1px);
  background-size:28px 28px;
  opacity:.55;
}

.mapCenterCard{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:min(320px, calc(100% - 40px));
  min-height:82px;
  border-radius:16px;
  border:1px solid #ebe5df;
  background:rgba(255,255,255,.92);
  box-shadow:0 10px 30px rgba(15,23,42,.07);
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px;
  z-index:2;
}

.mapCenterIcon{
  width:42px;
  height:42px;
  border-radius:14px;
  background:#fff6ed;
  color:#ff8a00;
  display:flex;
  align-items:center;
  justify-content:center;
  border:1px solid #f7d4ae;
  flex:0 0 42px;
}

.mapCenterIcon i{
  font-size:16px;
}

.mapCenterText{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.mapCenterText strong{
  font-size:12px;
  color:#111827;
  font-weight:600;
}

.mapCenterText span{
  font-size:11px;
  color:#6b7280;
  line-height:1.4;
  font-weight:400;
}

.mapPin{
  position:absolute;
  color:#ff8a00;
  opacity:.82;
  z-index:1;
}

.mapPin i{
  font-size:18px;
}

.mapPin--one{ left:14%; top:20%; }
.mapPin--two{ left:74%; top:26%; }
.mapPin--three{ left:68%; top:68%; }
.mapPin--four{ left:28%; top:72%; }

.mockFleetSidePanel{
  display:grid;
  gap:12px;
  min-width:0;
}

.miniPanel{
  padding:14px;
}

.activityList{
  display:grid;
  gap:10px;
}

.activityItem{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:10px 0;
  border-bottom:1px solid #f3f0eb;
}

.activityItem:last-child{
  border-bottom:none;
  padding-bottom:0;
}

.activityDot{
  width:8px;
  height:8px;
  border-radius:999px;
  margin-top:6px;
  flex:0 0 8px;
}

.activityDot.ok{ background:#16a34a; }
.activityDot.warn{ background:#f59e0b; }
.activityDot.danger{ background:#dc2626; }

.activityBody{
  display:flex;
  flex-direction:column;
  gap:3px;
  min-width:0;
}

.activityBody strong{
  font-size:12px;
  color:#111827;
  font-weight:600;
}

.activityBody span{
  font-size:11px;
  color:#6b7280;
  line-height:1.45;
  font-weight:400;
}

.quickStats{
  display:grid;
  gap:10px;
}

.quickStat{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  min-height:42px;
  padding:0 12px;
  border-radius:12px;
  border:1px solid #f0ece7;
  background:#fafafa;
}

.quickLabel{
  font-size:11px;
  color:#6b7280;
  font-weight:500;
}

.quickStat strong{
  font-size:12px;
  color:#111827;
  font-weight:600;
}

.mockFleetTableCard{
  padding:14px;
  min-width:0;
}

.sectionHead--table{
  margin-bottom:10px;
}

.tableTools{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

.tableToolBtn{
  height:30px;
  padding:0 10px;
  border-radius:10px;
  border:1px solid #ece8e3;
  background:#fff;
  color:#6b7280;
  display:inline-flex;
  align-items:center;
  gap:7px;
  font-size:11px;
  font-weight:500;
  transition:
    transform .22s ease,
    background-color .22s ease,
    border-color .22s ease,
    color .22s ease,
    box-shadow .22s ease;
}

.tableToolBtn i{
  font-size:10px;
  transition:transform .22s ease;
}

.mockFleetTable{
  border:1px solid #f0ece7;
  border-radius:14px;
  overflow:hidden;
}

.mfTableHead,
.mfRow{
  display:grid;
  grid-template-columns:1.1fr 1fr 1fr .9fr 1fr .9fr 28px;
  align-items:center;
  min-width:0;
}

.mfTableHead{
  min-height:42px;
  padding:0 12px;
  background:#faf9f8;
  border-bottom:1px solid #f0ece7;
  color:#9ca3af;
  font-size:10.5px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:.05em;
}

.mfRow{
  min-height:50px;
  padding:0 12px;
  border-bottom:1px solid #f6f3ef;
  color:#374151;
  font-size:12px;
  font-weight:400;
  transition:
    background-color .22s ease,
    transform .22s ease;
}

.mfRow:last-child{
  border-bottom:none;
}

.plate{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.plate span:last-child{
  font-weight:600;
  color:#111827;
}

.carIco{
  width:22px;
  height:22px;
  border-radius:8px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:#f9fafb;
  border:1px solid #ece8e3;
  flex:0 0 22px;
  transition:
    transform .22s ease,
    border-color .22s ease,
    color .22s ease,
    background-color .22s ease;
}

.carIco i{
  font-size:11px;
}

.carIco.orange{ color:#d6891d; }
.carIco.blue{ color:#5a7597; }

.status{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:24px;
  padding:0 10px;
  border-radius:999px;
  font-size:10.5px;
  font-weight:600;
  white-space:nowrap;
  border:1px solid transparent;
  transition:
    transform .22s ease,
    box-shadow .22s ease;
}

.status.ok{
  background:#effaf2;
  color:#15803d;
  border-color:#cdeed6;
}

.status.service{
  background:#eff6ff;
  color:#2563eb;
  border-color:#d8e7ff;
}

.status.danger{
  background:#fef2f2;
  color:#dc2626;
  border-color:#ffd5d5;
}

.status.off{
  background:#f3f4f6;
  color:#6b7280;
  border-color:#e5e7eb;
}

.arrow{
  text-align:right;
  color:#9ca3af;
  font-size:10px;
}

/* HOVERS */
.mock--fleet button:hover,
.mock--fleet button:focus,
.mock--fleet button:active,
.mock--fleet a:hover,
.mock--fleet a:focus,
.mock--fleet a:active{
  color:inherit !important;
  text-decoration:none !important;
  outline:none !important;
  box-shadow:none !important;
}

.mock--fleet .headBtn:hover,
.mock--fleet .headBtn:focus,
.mock--fleet .headBtn:active,
.mock--fleet .topActionBtn:hover,
.mock--fleet .topActionBtn:focus,
.mock--fleet .topActionBtn:active,
.mock--fleet .tableToolBtn:hover,
.mock--fleet .tableToolBtn:focus,
.mock--fleet .tableToolBtn:active,
.mock--fleet .miniBtn:hover,
.mock--fleet .miniBtn:focus,
.mock--fleet .miniBtn:active{
  background:#ffffff !important;
  color:#374151 !important;
  border-color:#e7e5e4 !important;
  outline:none !important;
  box-shadow:none !important;
}

.mock--fleet .headBtn--primary:hover,
.mock--fleet .headBtn--primary:focus,
.mock--fleet .headBtn--primary:active{
  background:linear-gradient(180deg,#ff9a1a 0%, #f58200 100%) !important;
  color:#ffffff !important;
  border-color:#f7c995 !important;
  box-shadow:0 10px 20px rgba(245,130,0,.16) !important;
}

.mock--fleet .headBtn--ghost:hover,
.mock--fleet .headBtn--ghost:focus,
.mock--fleet .headBtn--ghost:active{
  background:#f9fafb !important;
  color:#374151 !important;
  border-color:#e7e5e4 !important;
}

.mock--fleet .topActionBtn:hover,
.mock--fleet .topActionBtn:focus,
.mock--fleet .topActionBtn:active{
  background:#f9fafb !important;
  color:#4b5563 !important;
  border-color:#e7e5e4 !important;
}

.mock--fleet .tableToolBtn:hover,
.mock--fleet .tableToolBtn:focus,
.mock--fleet .tableToolBtn:active,
.mock--fleet .miniBtn:hover,
.mock--fleet .miniBtn:focus,
.mock--fleet .miniBtn:active{
  background:#f9fafb !important;
  color:#4b5563 !important;
  border-color:#e7e5e4 !important;
}

.mock--fleet .mfNavItem:hover,
.mock--fleet .mfNavItem:focus,
.mock--fleet .mfNavItem:active{
  background:#faf7f2 !important;
  color:#374151 !important;
  text-decoration:none !important;
  transform:translateX(2px);
}

.mock--fleet .mfNavItem:hover .ico,
.mock--fleet .mfNavItem:focus .ico,
.mock--fleet .mfNavItem:active .ico{
  color:#6b7280 !important;
  transform:scale(1.04);
}

.mock--fleet .mfNavItem.active:hover,
.mock--fleet .mfNavItem.active:focus,
.mock--fleet .mfNavItem.active:active{
  background:#fff6ed !important;
  color:#c96c00 !important;
}

.mock--fleet .mfNavItem.active:hover .ico,
.mock--fleet .mfNavItem.active:focus .ico,
.mock--fleet .mfNavItem.active:active .ico{
  color:#c96c00 !important;
}

.fleet-hover-lift:hover{
  transform:translateY(-1px) !important;
}

.mfCard:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(15,23,42,.05);
  border-color:#e6ddd4;
}

.mfCard:hover .mfCardIcon{
  transform:scale(1.05);
  border-color:#f2dcc1;
  color:#c96c00;
  background:#fff8f1;
}

.mockFleetMapCard:hover,
.miniPanel:hover,
.mockFleetTableCard:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px rgba(15,23,42,.05);
  border-color:#e6ddd4;
}

.mfRow:hover{
  background:#faf9f7;
  transform:translateX(1px);
}

.mfRow:hover .carIco{
  transform:scale(1.05);
  border-color:#e6ddd4;
}

.mfRow:hover .status{
  transform:translateY(-1px);
}

/* REVEAL SYSTEM */
#mockFleetRoot .fleet-reveal,
#mockFleetRoot .fleet-reveal-inner,
#mockFleetRoot .fleet-row-in,
#mockFleetRoot .fleet-pin-in,
#mockFleetRoot .fleet-avatar-in,
#mockFleetRoot .fleet-map-card-in{
  opacity:0;
  animation-fill-mode:forwards;
  animation-timing-function:cubic-bezier(.22,.61,.36,1);
}

#mockFleetRoot.is-visible .fleet-reveal{
  animation-name:fleetRevealUp;
  animation-duration:.72s;
  animation-delay:var(--reveal-delay, .08s);
}

#mockFleetRoot.is-visible .fleet-reveal-inner{
  animation-name:fleetRevealSoft;
  animation-duration:.7s;
  animation-delay:var(--inner-delay, .1s);
}

#mockFleetRoot.is-visible .fleet-row-in{
  animation-name:fleetRevealRow;
  animation-duration:.65s;
  animation-delay:var(--row-delay, .2s);
}

#mockFleetRoot.is-visible .fleet-pin-in{
  animation-name:fleetPopPin;
  animation-duration:.65s;
  animation-delay:var(--pin-delay, .6s);
}

#mockFleetRoot.is-visible .fleet-avatar-in{
  animation-name:fleetAvatarIn;
  animation-duration:.7s;
  animation-delay:.22s;
}

#mockFleetRoot.is-visible .fleet-map-card-in{
  animation-name:fleetMapCardIn;
  animation-duration:.78s;
  animation-delay:.66s;
}

#mockFleetRoot.is-visible .fleet-float-soft{
  animation:fleetFloatSoft 5s ease-in-out 1.1s infinite;
}

#mockFleetRoot.is-visible .fleet-pulse-dot{
  animation:fleetPulseDot 2s ease-in-out 1.1s infinite;
}

/* KEYFRAMES */
@keyframes fleetRevealUp{
  0%{
    opacity:0;
    transform:translateY(18px) scale(.985);
    filter:blur(4px);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
    filter:blur(0);
  }
}

@keyframes fleetRevealSoft{
  0%{
    opacity:0;
    transform:translateY(10px);
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:translateY(0);
    filter:blur(0);
  }
}

@keyframes fleetRevealRow{
  0%{
    opacity:0;
    transform:translateX(-10px);
  }
  100%{
    opacity:1;
    transform:translateX(0);
  }
}

@keyframes fleetPopPin{
  0%{
    opacity:0;
    transform:translateY(10px) scale(.5);
  }
  60%{
    opacity:1;
    transform:translateY(-2px) scale(1.08);
  }
  100%{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

@keyframes fleetAvatarIn{
  0%{
    opacity:0;
    transform:scale(.82);
    filter:blur(3px);
  }
  100%{
    opacity:1;
    transform:scale(1);
    filter:blur(0);
  }
}

@keyframes fleetMapCardIn{
  0%{
    opacity:0;
    transform:translate(-50%,-46%) scale(.94);
    filter:blur(5px);
  }
  100%{
    opacity:1;
    transform:translate(-50%,-50%) scale(1);
    filter:blur(0);
  }
}

@keyframes fleetFloatSoft{
  0%,100%{
    transform:translateY(0);
  }
  50%{
    transform:translateY(-2px);
  }
}

@keyframes fleetPulseDot{
  0%,100%{
    transform:scale(1);
    box-shadow:0 0 0 0 rgba(255,138,0,.24);
  }
  50%{
    transform:scale(1.08);
    box-shadow:0 0 0 6px rgba(255,138,0,0);
  }
}

@media (max-width: 1280px){
  .mockFleetWindow{
    grid-template-columns:220px minmax(0,1fr);
  }

  .mockFleetStats{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }

  .mockFleetMiddle{
    grid-template-columns:1fr;
  }
}

@media (max-width: 1080px){
  .mockFleetWindow{
    grid-template-columns:1fr;
  }

  .mockFleetSidebar{
    display:none;
  }
}

@media (max-width: 767px){
  .mockFleetTopbar{
    flex-direction:column;
    align-items:stretch;
  }

  .mockFleetTopActions{
    justify-content:space-between;
  }

  .mockFleetHeader{
    flex-direction:column;
    align-items:flex-start;
  }

  .mockFleetHeaderActions{
    width:100%;
    flex-wrap:wrap;
  }

  .mockFleetStats{
    grid-template-columns:1fr;
  }

  .mfTableHead,
  .mfRow{
    grid-template-columns:1fr 1fr;
    gap:10px;
  }

  .mfTableHead div:nth-child(n+3),
  .mfRow div:nth-child(n+3){
    display:none;
  }
}

@media (prefers-reduced-motion: reduce){
  #mockFleetRoot .fleet-reveal,
  #mockFleetRoot .fleet-reveal-inner,
  #mockFleetRoot .fleet-row-in,
  #mockFleetRoot .fleet-pin-in,
  #mockFleetRoot .fleet-avatar-in,
  #mockFleetRoot .fleet-map-card-in{
    opacity:1 !important;
    animation:none !important;
    transform:none !important;
    filter:none !important;
  }

  .fleet-float-soft,
  .fleet-pulse-dot{
    animation:none !important;
  }

  .mfNavItem,
  .topActionBtn,
  .headBtn,
  .tableToolBtn,
  .miniBtn,
  .mfCard,
  .mfCardIcon,
  .mockFleetMapCard,
  .miniPanel,
  .mockFleetTableCard,
  .mfRow,
  .carIco,
  .status{
    transition:none !important;
  }
}/* End custom CSS */