/* Buludtelecom - "How GPON works" explainer on the Fiber optik internet page */
#gpon-explainer { margin: 10px 0 20px; }
#gpon-explainer .gpon-lead { font-size: 15px; line-height: 1.6; margin: 0 0 16px; }

.gpon-toggle { display: inline-flex; border: 1px solid #4a154b; border-radius: 4px; overflow: hidden; margin-bottom: 12px; }
.gpon-toggle button {
  border: 0; background: #fff; color: #4a154b; padding: 8px 16px; font-size: 14px; cursor: pointer;
}
.gpon-toggle button + button { border-left: 1px solid #4a154b; }
.gpon-toggle button[aria-pressed="true"] { background: #4a154b; color: #fff; }

.gpon-stage { overflow-x: auto; border: 1px solid #e5e5e5; border-radius: 4px; background: #fbfaff; }
.gpon-stage svg { display: block; width: 100%; min-width: 560px; height: auto; }
.gpon-stage .fiber { fill: none; stroke: #c9bfd0; stroke-width: 4; stroke-linecap: round; }
.gpon-stage .node { cursor: pointer; outline: none; }
.gpon-stage .node rect, .gpon-stage .node path.shape {
  fill: #fff; stroke: #4a154b; stroke-width: 2; transition: fill .2s;
}
.gpon-stage .node text { fill: #4a154b; font: 600 14px Arial, Helvetica, sans-serif; text-anchor: middle; pointer-events: none; }
.gpon-stage .node:hover rect, .gpon-stage .node:hover path.shape,
.gpon-stage .node:focus rect, .gpon-stage .node:focus path.shape,
.gpon-stage .node.active rect, .gpon-stage .node.active path.shape { fill: #f1e6f2; }
.gpon-stage .node.active rect, .gpon-stage .node.active path.shape { stroke-width: 3; }
.gpon-stage .pulse { fill: #1f7ae0; }
.gpon-stage.up .pulse { fill: #e8590c; }

.gpon-legend { margin: 8px 0 0; font-size: 13px; color: #555; }
.gpon-legend span { display: inline-block; margin-right: 18px; }
.gpon-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: 0; }
.gpon-legend .dn i { background: #1f7ae0; }
.gpon-legend .up i { background: #e8590c; }

.gpon-info {
  margin: 14px 0 0; padding: 14px 16px; border-left: 4px solid #4a154b; background: #fff;
  border-radius: 0 4px 4px 0; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); min-height: 64px;
}
.gpon-info h4 { margin: 0 0 6px; color: #4a154b; font-size: 16px; }
.gpon-info p { margin: 0; line-height: 1.55; }

.gpon-facts { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 18px; }
.gpon-fact {
  flex: 1 1 180px; background: #fff; border: 1px solid #ddd; border-radius: 4px; padding: 14px 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.055);
}
.gpon-fact b { display: block; font-size: 26px; line-height: 1.1; color: #4a154b; margin-bottom: 6px; }
.gpon-fact span { font-size: 13px; line-height: 1.45; color: #555; }

@media (prefers-reduced-motion: reduce) {
  .gpon-stage .pulse { display: none; }
}

/* Online application form (Fiber optik internet page) */
.fb-apply { display: flex; flex-wrap: wrap; gap: 24px; margin: 30px 0 10px; padding: 22px; border-radius: 6px; background: #4a154b; color: #fff; }
.fb-apply-text { flex: 1 1 280px; min-width: 0; }
.fb-apply-text h3 { color: #fff; margin: 0 0 10px; font-size: 22px; }
.fb-apply-text p { margin: 0 0 10px; line-height: 1.6; color: #f1e6f2; }
.fb-apply-text a { color: #fff; font-weight: 700; white-space: nowrap; }
.fb-apply-text small { display: block; margin-top: 12px; color: #e0cfe3; line-height: 1.5; }
.fb-apply-form { flex: 1 1 340px; min-width: 0; background: #fff; color: #333; border-radius: 4px; padding: 18px; }
.fb-apply-form textarea.form-control { height: 70px; resize: vertical; }
.fb-apply-form .field-verifycode img { border: 1px solid #ddd; border-radius: 3px; }
.fb-apply-form .tg-btn { width: 100%; }