/* theme.css — load AFTER bootstrap.css */

@font-face {
  font-family: "bootstrap-icons";
  font-display: swap;
}


@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Bold.eot');
    src: url('../fonts/Oswald-Bold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Bold.woff2') format('woff2'),
        url('../fonts/Oswald-Bold.woff') format('woff'),
        url('../fonts/Oswald-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-ExtraLight.eot');
    src: url('../fonts/Oswald-ExtraLight.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-ExtraLight.woff2') format('woff2'),
        url('../fonts/Oswald-ExtraLight.woff') format('woff'),
        url('../fonts/Oswald-ExtraLight.ttf') format('truetype');
    font-weight: 200;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Light.eot');
    src: url('../fonts/Oswald-Light.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Light.woff2') format('woff2'),
        url('../fonts/Oswald-Light.woff') format('woff'),
        url('../fonts/Oswald-Light.ttf') format('truetype');
    font-weight: 300;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Medium.eot');
    src: url('../fonts/Oswald-Medium.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Medium.woff2') format('woff2'),
        url('../fonts/Oswald-Medium.woff') format('woff'),
        url('../fonts/Oswald-Medium.ttf') format('truetype');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-Regular.eot');
    src: url('../fonts/Oswald-Regular.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-Regular.woff2') format('woff2'),
        url('../fonts/Oswald-Regular.woff') format('woff'),
        url('../fonts/Oswald-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: 'Oswald';
    src: url('../fonts/Oswald-SemiBold.eot');
    src: url('../fonts/Oswald-SemiBold.eot?#iefix') format('embedded-opentype'),
        url('../fonts/Oswald-SemiBold.woff2') format('woff2'),
        url('../fonts/Oswald-SemiBold.woff') format('woff'),
        url('../fonts/Oswald-SemiBold.ttf') format('truetype');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}


/* =========================
   1) Project palette (edit here)
   ========================= */
:root{
  /* Brand / accents */
  --pp-success: #198754;
  --pp-success-rgb: 25, 135, 84;

  --pp-warning: #ffc107;
  --pp-warning-rgb: 255, 193, 7;

  /* Neutral */
  --pp-body-bg: #ffffff;
  --pp-body-color: #212529;
  --pp-muted-color: #6c757d;

  --pp-border-color: rgba(33,37,41,.12);
  --pp-card-bg: #ffffff;
  --pp-soft-bg: rgba(33,37,41,.04);

  /* Links */
  --pp-link-color: var(--pp-success);
  --pp-link-hover-color: rgba(var(--pp-success-rgb), .85);

  /* Radii */
  --pp-radius: .75rem;      /* close to rounded-4 */
  --pp-radius-lg: 1rem;

  /* Block-specific */
  --pp-overlay-opacity: .15;
  --pp-stage-bg: #e9ecef;
}

body {
  font-family: "Oswald", var(--bs-body-font-family);
  text-transform: uppercase;
}

.normal-case {
  text-transform: none;
}

.offcanvas-messanger {
  width: 100% !important;
}

@media (min-width: 992px) {
  .offcanvas-kits {
    width: 40% !important;
  }
}


.offcanvas-kits {
  width: 100% !important;
}

@media (min-width: 992px) {
  .offcanvas-kits {
    width: 60% !important;
  }
}


.min-h-0 {
  min-height: 0 !important;
}

.img-fix {
  width: 50%;
  height: auto;
}

/* =========================
   2) Substitute Bootstrap vars using your pp-vars
   ========================= */
:root{
  --bs-success: var(--pp-success);
  --bs-success-rgb: var(--pp-success-rgb);

  --bs-warning: var(--pp-warning);
  --bs-warning-rgb: var(--pp-warning-rgb);

  --bs-body-bg: var(--pp-body-bg);
  --bs-body-color: var(--pp-body-color);
  --bs-secondary-color: var(--pp-muted-color);

  --bs-border-color: var(--pp-border-color);

  --bs-link-color: var(--pp-link-color);
  --bs-link-hover-color: var(--pp-link-hover-color);

  --bs-card-bg: var(--pp-card-bg);

  --bs-border-radius: var(--pp-radius);
  --bs-border-radius-lg: var(--pp-radius-lg);
}

section {position: relative;}

/* =========================
   3) Small utilities instead of inline style
   ========================= */

/* overlay container */
.background-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.background-overlay img{
  position:absolute;
  right: 0;
  /*width:100%;*/
  height:100%;
  max-height: 640px;
  object-fit: contain; /* or cover  - see classes below */
  bottom: 4em;
}

/* content above overlay */
.position-relative > .container-fluid,
.position-relative > .container{
  position:relative;
  z-index:1;
}

/* object-fit, so you don't have to write style="" anymore */
.u-cover{ object-fit: cover; }
.u-contain{ object-fit: contain; }
.u-w100{ width:100%; }
.u-h100{ height:100%; }

/* letter-spacing вместо inline */
.ls-wide{ letter-spacing: .06em; }

/* soft background like your bg-light cards, but under control */
.bg-soft{
  background: var(--pp-soft-bg) !important;
}

/* =========================
   4) Website components/blocks
   ========================= */

/* Constructor overlay (repeating text) */
.constructor-overlay{
  position:absolute;
  inset:0;
  z-index:0;
  pointer-events:none;
}
.constructor-overlay .text-muted{
  opacity: var(--pp-overlay-opacity);
}

/* Promo badge (if you have the promo-badge class) */
.promo-badge{
  position: absolute;
  right: 0.5em;
  bottom: 0.1em;
  text-transform: uppercase;
  z-index: 2;
}
 

/* Stages: steps background (removed inline background:#5a7f1f) */
.stage-step{
  background: var(--pp-stage-bg);
  color: #000;
}

/* Metrics: if you want to control "orange" via a class, not a style */
.metric-accent-warning .metric-value,
.metric-accent-warning .metric-label{
  color: var(--bs-warning);
}
.metric-accent-success .metric-value,
.metric-accent-success .metric-label{
  color: var(--bs-success);
}


table {width: 100%;}
table tbody td, table thead th {
  border-bottom: 1px solid var(--bs-gray-200) !important;
}

.prev-btn, .next-btn, .btn-next, .btn-prev {
  cursor: pointer;
}
 
/*JSON Editor Fix*/
.je-object__title {
  display: none !important;
}