/* ============================================================
   5G Store - Components CSS
   Buttons, badges, brand pills, spec tables, notices, CTAs
   ============================================================ */


/* ---- BUTTONS ---------------------------------------------- */
.btn-primary,
.btn-outline,
.btn-signal,
.btn-quote,
button.btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--fgs-space-2);
  padding: 0.75rem 1.625rem;
  font-family: var(--fgs-font-head);
  font-size: var(--fgs-text-sm);
  font-weight: 700;
  letter-spacing: 0.01em;
  text-decoration: none;
  border-radius: var(--fgs-radius);
  border: 2px solid transparent;
  cursor: pointer;
  transition:
    background var(--fgs-transition),
    color var(--fgs-transition),
    border-color var(--fgs-transition),
    box-shadow var(--fgs-transition),
    transform var(--fgs-transition);
  white-space: nowrap;
}

.btn-primary {
  background: var(--fgs-blue);
  color: #fff;
  border-color: var(--fgs-blue);
}
.btn-primary:hover {
  background: var(--fgs-blue-hover);
  border-color: var(--fgs-blue-hover);
  color: #fff;
  box-shadow: 0 4px 16px rgba(13, 71, 161, 0.3);
  transform: translateY(-1px);
}

.btn-signal {
  background: var(--fgs-signal);
  color: var(--fgs-navy);
  border-color: var(--fgs-signal);
  font-weight: 800;
}
.btn-signal:hover {
  background: #00cef3;
  border-color: #00cef3;
  color: var(--fgs-navy);
  box-shadow: 0 4px 16px rgba(0, 180, 216, 0.35);
  transform: translateY(-1px);
}

.btn-outline {
  background: transparent;
  color: var(--fgs-navy);
  border-color: var(--fgs-border-dark);
}
.btn-outline:hover {
  border-color: var(--fgs-blue);
  color: var(--fgs-blue);
  background: var(--fgs-off-white);
}

.btn-quote {
  background: var(--fgs-navy);
  color: var(--fgs-white);
  border-color: var(--fgs-navy);
  min-width: 160px;
}
.btn-quote:hover {
  background: var(--fgs-navy-light);
  border-color: var(--fgs-navy-light);
  color: var(--fgs-white);
}

/* Inverse (on dark backgrounds) */
.btn-outline--inverse {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}
.btn-outline--inverse:hover {
  border-color: var(--fgs-signal);
  color: var(--fgs-signal);
  background: rgba(0, 180, 216, 0.1);
}

/* Call button */
.btn-call {
  display: inline-flex;
  align-items: center;
  gap: var(--fgs-space-2);
  padding: 0.625rem 1.25rem;
  background: transparent;
  border: 1.5px solid var(--fgs-border-dark);
  border-radius: var(--fgs-radius);
  font-family: var(--fgs-font-head);
  font-size: var(--fgs-text-sm);
  font-weight: 600;
  color: var(--fgs-body);
  text-decoration: none;
  transition: border-color var(--fgs-transition), color var(--fgs-transition);
}
.btn-call:hover {
  border-color: var(--fgs-blue);
  color: var(--fgs-blue);
}

/* Size modifiers */
.btn-lg {
  padding: 1rem 2rem;
  font-size: var(--fgs-text-md);
}

.btn-sm {
  padding: 0.5rem 1rem;
  font-size: var(--fgs-text-xs);
}


/* ---- BADGES ----------------------------------------------- */
.fgs-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2em 0.65em;
  border-radius: var(--fgs-radius-full);
  font-family: var(--fgs-font-head);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1;
}

.fgs-badge--5g {
  background: var(--fgs-signal);
  color: var(--fgs-navy);
}

.fgs-badge--4g {
  background: var(--fgs-blue);
  color: #fff;
}

.fgs-badge--new {
  background: var(--fgs-success);
  color: #fff;
}

.fgs-badge--sale {
  background: var(--fgs-danger);
  color: #fff;
}

.fgs-badge--archived {
  background: var(--fgs-border-dark);
  color: var(--fgs-muted);
}

.fgs-badge--teltonika {
  background: #e8f0fe;
  color: #0d47a1;
}

.fgs-badge--milesight {
  background: #e8f8fd;
  color: #00899e;
}

.fgs-badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fgs-space-1);
  margin-bottom: var(--fgs-space-2);
}


/* ---- BRAND PILL ------------------------------------------- */
.fgs-brand-pill {
  display: inline-block;
  padding: 0.15em 0.6em;
  background: var(--fgs-off-white);
  border: 1px solid var(--fgs-border);
  border-radius: var(--fgs-radius-full);
  font-family: var(--fgs-font-head);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--fgs-mid);
  margin-bottom: var(--fgs-space-2);
}


/* ---- SPEC TABLE ------------------------------------------- */
.fgs-spec-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fgs-text-sm);
  margin-block: var(--fgs-space-6);
  border-radius: var(--fgs-radius-md);
  overflow: hidden;
  box-shadow: var(--fgs-shadow-sm);
}

.fgs-spec-table caption {
  font-family: var(--fgs-font-head);
  font-size: var(--fgs-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fgs-muted);
  text-align: left;
  padding-bottom: var(--fgs-space-3);
  caption-side: top;
}

.fgs-spec-table thead th {
  background: var(--fgs-navy);
  color: var(--fgs-white);
  font-family: var(--fgs-font-head);
  font-weight: 600;
  padding: var(--fgs-space-3) var(--fgs-space-4);
  text-align: left;
  font-size: var(--fgs-text-xs);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.fgs-spec-table tbody tr {
  border-bottom: 1px solid var(--fgs-border);
}

.fgs-spec-table tbody tr:nth-child(even) {
  background: var(--fgs-off-white);
}

.fgs-spec-table tbody tr:hover {
  background: rgba(0, 180, 216, 0.04);
}

.fgs-spec-table tbody tr:last-child {
  border-bottom: none;
}

.fgs-spec-table td {
  padding: var(--fgs-space-3) var(--fgs-space-4);
  vertical-align: top;
}

.fgs-spec-table td:first-child {
  font-family: var(--fgs-font-head);
  font-weight: 600;
  color: var(--fgs-body);
  width: 38%;
  white-space: nowrap;
}

.fgs-spec-table td:last-child {
  color: var(--fgs-mid);
}


/* ---- FEATURE GRID ----------------------------------------- */
.fgs-feature-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: var(--fgs-space-4);
  margin-block: var(--fgs-space-8);
}

.fgs-feature-item {
  display: flex;
  flex-direction: column;
  gap: var(--fgs-space-3);
  padding: var(--fgs-space-5);
  background: var(--fgs-off-white);
  border: 1px solid var(--fgs-border);
  border-radius: var(--fgs-radius-md);
  transition: border-color var(--fgs-transition), box-shadow var(--fgs-transition);
}

.fgs-feature-item:hover {
  border-color: var(--fgs-signal);
  box-shadow: var(--fgs-shadow-card);
}

.fgs-feature-item__icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fgs-signal-glow);
  color: var(--fgs-signal);
  border-radius: var(--fgs-radius);
}

.fgs-feature-item__title {
  font-family: var(--fgs-font-head);
  font-weight: 700;
  font-size: var(--fgs-text-sm);
  color: var(--fgs-navy);
}

.fgs-feature-item__desc {
  font-size: var(--fgs-text-sm);
  color: var(--fgs-muted);
  line-height: 1.5;
}


/* ---- NOTICES & ALERTS ------------------------------------- */
.fgs-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--fgs-space-4);
  padding: var(--fgs-space-4) var(--fgs-space-5);
  border-radius: var(--fgs-radius-md);
  border-left: 4px solid;
  margin-block: var(--fgs-space-6);
}

.fgs-notice--info {
  background: #e8f4fd;
  border-left-color: var(--fgs-signal);
  color: #1a5276;
}

.fgs-notice--warning {
  background: #fef9e7;
  border-left-color: var(--fgs-warning);
  color: #7d6608;
}

.fgs-notice--success {
  background: #e9f7ef;
  border-left-color: var(--fgs-success);
  color: #1e8449;
}

.fgs-notice__icon {
  flex-shrink: 0;
  margin-top: 2px;
}

.fgs-notice__title {
  font-family: var(--fgs-font-head);
  font-weight: 700;
  margin-bottom: var(--fgs-space-1);
}

/* Archived product notice */
.fgs-archived-notice {
  display: flex;
  align-items: flex-start;
  gap: var(--fgs-space-4);
  padding: var(--fgs-space-5);
  background: #fdf6e3;
  border: 1px solid #f0c060;
  border-left: 4px solid var(--fgs-warning);
  border-radius: var(--fgs-radius-md);
  margin-bottom: var(--fgs-space-6);
  color: #5a4000;
  font-size: var(--fgs-text-sm);
}

.fgs-archived-notice__icon {
  flex-shrink: 0;
  color: var(--fgs-warning);
  margin-top: 1px;
}

.fgs-archived-notice__content strong {
  display: block;
  margin-bottom: var(--fgs-space-1);
  font-family: var(--fgs-font-head);
  font-size: var(--fgs-text-sm);
}

.fgs-archived-cta {
  display: flex;
  gap: var(--fgs-space-3);
  flex-wrap: wrap;
  margin-bottom: var(--fgs-space-6);
}


/* ---- DATASHEET DOWNLOAD BUTTON ---------------------------- */
.fgs-datasheet-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--fgs-space-3);
  padding: var(--fgs-space-3) var(--fgs-space-5);
  background: var(--fgs-off-white);
  border: 1.5px solid var(--fgs-border-dark);
  border-radius: var(--fgs-radius);
  color: var(--fgs-body);
  text-decoration: none;
  font-family: var(--fgs-font-head);
  font-weight: 600;
  font-size: var(--fgs-text-sm);
  transition: border-color var(--fgs-transition), background var(--fgs-transition);
  margin-block: var(--fgs-space-4);
}

.fgs-datasheet-btn:hover {
  border-color: var(--fgs-blue);
  background: #e8f0fe;
  color: var(--fgs-blue);
}

.fgs-datasheet-btn svg {
  color: var(--fgs-blue);
}

.fgs-datasheet-btn__label {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.fgs-datasheet-btn__main {
  font-weight: 700;
}

.fgs-datasheet-btn__sub {
  font-size: var(--fgs-text-xs);
  font-weight: 400;
  color: var(--fgs-muted);
}


/* ---- QUOTE CTA (product page) ----------------------------- */
.fgs-quote-cta {
  display: flex;
  align-items: center;
  gap: var(--fgs-space-4);
  flex-wrap: wrap;
  margin-block: var(--fgs-space-5);
  padding: var(--fgs-space-5);
  background: var(--fgs-off-white);
  border: 1px solid var(--fgs-border);
  border-radius: var(--fgs-radius-md);
}

.fgs-quote-note {
  font-size: var(--fgs-text-sm);
  color: var(--fgs-muted);
}


/* ---- USP STRIP -------------------------------------------- */
.fgs-usp-strip {
  background: var(--fgs-off-white);
  border-top: 1px solid var(--fgs-border);
  border-bottom: 1px solid var(--fgs-border);
  padding-block: var(--fgs-space-5);
}

.fgs-usp-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-around;
  gap: var(--fgs-space-8);
  flex-wrap: wrap;
}

.fgs-usp-item {
  display: flex;
  align-items: center;
  gap: var(--fgs-space-3);
}

.fgs-usp-item__icon {
  color: var(--fgs-signal);
  flex-shrink: 0;
}

.fgs-usp-item__text strong {
  display: block;
  font-family: var(--fgs-font-head);
  font-size: var(--fgs-text-sm);
  font-weight: 700;
  color: var(--fgs-navy);
}

.fgs-usp-item__text span {
  font-size: var(--fgs-text-xs);
  color: var(--fgs-muted);
}


/* ---- SECTION WRAPPERS ------------------------------------- */
.fgs-section {
  padding-block: var(--fgs-space-16);
}

.fgs-section--dark {
  background: var(--fgs-navy);
  color: var(--fgs-white);
}

.fgs-section--dark h2,
.fgs-section--dark h3 {
  color: var(--fgs-white);
}

.fgs-section--dark p {
  color: rgba(248, 250, 255, 0.72);
}

.fgs-section--tint {
  background: var(--fgs-off-white);
}

.fgs-section__header {
  max-width: 640px;
  margin-bottom: var(--fgs-space-10);
}

.fgs-section__header--center {
  margin-inline: auto;
  text-align: center;
}

/* Responsive */
@media (max-width: 640px) {
  .fgs-usp-strip__inner {
    justify-content: flex-start;
    gap: var(--fgs-space-5);
  }

  .fgs-feature-grid {
    grid-template-columns: 1fr;
  }

  .fgs-spec-table td:first-child {
    width: 44%;
  }
}