/* ===========================================================================
   STD86 — Components
   Buttons, cards, forms, navbar — pulled from std86 css.
   Depends on colors_and_type.css
   =========================================================================== */

/* -------------------- Viewport frame (signature std86 layout) ----------- */
.std86-frame { position: relative; }
.std86-frame .frame-edge {
  position: fixed; background: var(--bg-frame); z-index: 50; pointer-events: none;
}
.std86-frame .frame-edge.top    { top: 0; left: 0; right: 0; height: var(--frame-gutter); }
.std86-frame .frame-edge.bottom { bottom: 0; left: 0; right: 0; height: var(--frame-gutter); }
.std86-frame .frame-edge.left   { top: 0; bottom: 0; left: 0; width: var(--frame-gutter); }
.std86-frame .frame-edge.right  { top: 0; bottom: 0; right: 0; width: var(--frame-gutter); }

/* -------------------- Buttons ------------------------------------------- */
.btn {
  display: inline-block;
  border-radius: var(--radius-2);
  letter-spacing: var(--tracking-btn);
  text-transform: uppercase;
  font-weight: var(--fw-bold);
  font-family: var(--font-mono);
  line-height: 1.42857143;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background-color var(--duration-fast) ease,
              color var(--duration-fast) ease,
              border-color var(--duration-fast) ease;
}
.btn-l  { padding: 15px 70px; font-size: var(--fs-meta); }
.btn-m  { padding: 15px 50px; font-size: var(--fs-meta); }
.btn-s  { padding: 10px 20px; font-size: var(--fs-meta); }
.btn-xs { padding: 5px 10px;  font-size: var(--fs-micro); }
.btn-rounded { border-radius: var(--radius-pill); }

.btn-dark   { background: var(--fg-1);     color: #fff; border-color: var(--fg-1); }
.btn-dark:hover   { background: var(--fg-5); border-color: var(--fg-5); color: #fff; }
.btn-light  { background: #fff;            color: var(--fg-1); border-color: var(--fg-1); }
.btn-light:hover  { background: var(--fg-1); color: #fff; }
.btn-gray   { background: #3E3E3E;         color: #fff; border-color: #3E3E3E; }
.btn-gray:hover   { background: #646464; border-color: #646464; }
.btn-blue   { background: var(--c-blue);   color: #fff; border-color: var(--c-blue); }
.btn-blue:hover   { background: var(--c-blue-h); border-color: var(--c-blue-h); }
.btn-green  { background: var(--c-green);  color: #fff; border-color: var(--c-green); }
.btn-green:hover  { background: var(--c-green-h); border-color: var(--c-green-h); }
.btn-orange { background: var(--c-orange); color: #fff; border-color: var(--c-orange); }
.btn-orange:hover { background: var(--c-orange-h); border-color: var(--c-orange-h); }
.btn-purple { background: var(--c-purple); color: #fff; border-color: var(--c-purple); }
.btn-purple:hover { background: var(--c-purple-h); border-color: var(--c-purple-h); }
.btn-red    { background: var(--c-red);    color: #fff; border: 2px solid var(--c-red); }
.btn-red:hover    { background: var(--c-red-h); border-color: var(--c-red-h); }
.btn-yellow { background: var(--c-yellow); color: #000; border-color: var(--c-yellow); }
.btn-yellow:hover { background: var(--c-yellow-h); color: var(--fg-1); border-color: var(--c-yellow-h); }
.btn-transparent-dark  { background: transparent; color: var(--fg-1); border-color: var(--fg-1); }
.btn-transparent-dark:hover { background: var(--fg-1); color: #fff; }
.btn-transparent-light { background: transparent; color: #fff; border-color: #fff; }
.btn-transparent-light:hover { background: #fff; color: #000; }

/* -------------------- Pricing card -------------------------------------- */
.pricing-1-box {
  background: #fff;
  padding: 30px 24px;
  text-align: center;
  border: 1px solid #f0f0f0;
}
.pricing-1-box h3 { font-weight: var(--fw-medium); color: var(--fg-2); }
.pricing-1-box .cost .price {
  font-family: var(--font-mono);
  font-size: 28px;
  font-weight: var(--fw-bold);
  margin: 18px 0 8px;
}
.pricing-1-box .description p { color: var(--fg-2); }
.pricing-1-box features h4 { font-weight: var(--fw-medium); color: var(--fg-2); margin-top: 18px; }
.pricing-1-box ul { list-style: none; padding: 0; margin: 8px 0 22px; text-align: left; }
.pricing-1-box ul li {
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  padding: 6px 0 6px 18px;
  position: relative;
  color: var(--fg-2);
}
.pricing-1-box ul li::before {
  content: ">"; position: absolute; left: 0; color: var(--fg-1); font-weight: var(--fw-bold);
}

/* -------------------- Service block (3-up) ------------------------------ */
.service-2 { text-align: left; }
.service-2 img { width: 36px; height: 36px; }
.service-2 .title {
  color: var(--fg-2);
  text-transform: capitalize;
  margin-top: 25px;
  font-weight: var(--fw-medium);
}
.service-2 p { margin-top: 20px; color: var(--fg-2); }
.service-2 .sub { margin-top: 20px; color: var(--fg-muted); font-weight: var(--fw-regular); font-size: var(--fs-meta); }

/* -------------------- Form fields --------------------------------------- */
.form-control {
  display: block;
  width: 100%;
  padding: 12px 14px;
  background: var(--bg-form);
  border: none;
  border-radius: var(--radius-1);
  font-family: var(--font-mono);
  font-size: var(--fs-body-sm);
  color: var(--fg-2);
  outline: none;
  transition: background var(--duration-fast) ease;
}
.form-control:focus { background: #cfcfcf; }
.form-control::placeholder { color: var(--fg-4); }
label.error, .error { color: var(--color-error) !important; font-weight: var(--fw-medium); font-size: var(--fs-meta); }

/* -------------------- Filter chips (portfolio) -------------------------- */
.filter-chip {
  display: inline-block;
  padding: 10px 13px;
  color: #fff;
  font-size: var(--fs-meta);
  letter-spacing: 1px;
  font-family: var(--font-mono);
  cursor: pointer;
  transition: background var(--duration-fast) ease;
}
.filter-chip.blue   { background: var(--c-blue); }
.filter-chip.green  { background: var(--c-green); }
.filter-chip.orange { background: var(--c-orange); }
.filter-chip.purple { background: var(--c-purple); }
.filter-chip:hover, .filter-chip.is-active { background: var(--c-red); color: #fff; }

/* -------------------- Badge / tag --------------------------------------- */
.badge {
  display: inline-block;
  padding: 3px 8px;
  font-size: var(--fs-micro);
  font-family: var(--font-mono);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: 1px;
  background: var(--fg-1);
  color: #fff;
}
.badge.red    { background: var(--c-red); }
.badge.blue   { background: var(--c-blue); }
.badge.green  { background: var(--c-green); }
.badge.orange { background: var(--c-orange); }
.badge.purple { background: var(--c-purple); }

/* -------------------- Navbar -------------------------------------------- */
.nav-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px;
  background: #fff;
}
.nav-bar .brand img { height: 36px; }
.nav-bar ul { display: flex; gap: 22px; list-style: none; padding: 0; margin: 0; }
.nav-bar ul a {
  font-family: var(--font-mono);
  font-size: var(--fs-meta);
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--fg-1);
}
.nav-bar ul li.divider { color: var(--fg-line); }

/* -------------------- Accordion (steps) --------------------------------- */
.accordion-step {
  border-bottom: 1px solid #e8e8e8;
  padding: 18px 0;
}
.accordion-step h4 {
  font-family: var(--font-mono);
  font-weight: var(--fw-medium);
  color: var(--fg-1);
  cursor: pointer;
  margin: 0 0 6px;
  font-size: var(--fs-h5);
  letter-spacing: 1px;
  text-transform: uppercase;
}
.accordion-step h4::before {
  content: "[ + ]"; color: var(--c-red); margin-right: 10px; font-weight: var(--fw-bold);
}
.accordion-step.is-open h4::before { content: "[ – ]"; }
.accordion-step .body { font-family: var(--font-mono); font-size: var(--fs-body-sm); color: var(--fg-2); }