:root {
  /* --- Colors --- */
  --c-white: rgb(255, 255, 255);
  --c-primary: rgb(23, 23, 23);

  /* --- Font Family --- */
  --ff-main:
    Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

  /* --- Font Sizes --- */
  --fs-h1: 38px;
  --fs-h2: 32px;
  --fs-h3: 24px;
  --fs-h4: 20px;
  --fs-h5: 18px;
  --fs-h6: 16px;
  --fs-p: 16px;

  /* --- Font Height --- */
  --lh-h: 1.4;
  --lh-p: 1.8;

  /* --- Font Weight --- */
  --fw-h: 800;
  --fw-p: 400;

  /* --- Margins --- */
  --m-h1-top: 0;
  --m-h1-bottom: 25px;

  --m-h2-top: 36px;
  --m-h2-bottom: 28px;

  --m-h3-top: 28px;
  --m-h3-bottom: 28px;

  --m-h4-top: 24px;
  --m-h4-bottom: 20px;

  --m-h5-top: 24px;
  --m-h5-bottom: 18px;

  --m-h6-top: 20px;
  --m-h6-bottom: 16px;

  --m-p-top: 0;
  --m-p-bottom: 16px;

  /* --- Borders --- */
  --b-radius: 5px;

  /* Container Paddings */
  --c-pv: 20px;
  --c-ph: 25px;
}

/* ============================= Header Styles ============================= */
h1,
h2,
h3,
h4,
h5,
h6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {
  font-family: var(--ff-main);
  font-weight: var(--fw-h);
  line-height: var(--lh-h);
  color: var(--c-primary) !important;
}

h1,
.h1 {
  font-size: var(--fs-h1) !important;
  margin-top: var(--m-h1-top) !important;
  margin-bottom: var(--m-h1-bottom) !important;
  color: var(--c-white) !important;
}

.vac-info-wrapper h1,
.vac-info-wrapper .h1,
.back-text h1,
.back-text .h1 {
  color: var(--c-primary) !important;
}

h2,
.h2 {
  font-size: var(--fs-h2);
  margin-top: var(--m-h2-top);
  margin-bottom: var(--m-h2-bottom);
}

h3,
.h3 {
  font-size: var(--fs-h3);
  margin-top: var(--m-h3-top);
  margin-bottom: var(--m-h3-bottom);
}

h4,
.h4 {
  font-size: var(--fs-h4);
  margin-top: var(--m-h4-top);
  margin-bottom: var(--m-h4-bottom);
}

h5,
.h5 {
  font-size: var(--fs-h5);
  margin-top: var(--m-h5-top);
  margin-bottom: var(--m-h5-bottom);
}

h6,
.h6 {
  font-size: var(--fs-h6);
  margin-top: var(--m-h6-top);
  margin-bottom: var(--m-h6-bottom);
}

p {
  font-size: var(--fs-p);
  line-height: var(--lh-p);
  font-weight: var(--fw-p);
  margin-top: var(--m-p-top);
  margin-bottom: var(--m-p-bottom);
}

ol li p,
ul li p {
  margin-bottom: 0 !important;
}

/* ============================== Adjustments ============================== */

/* Firs title on a block */
.vac-info-wrapper > h1,
.vac-info-wrapper > .h1,
.back-text > h1,
.back-text > .h1,
.vac-info-wrapper > h2,
.vac-info-wrapper > .h2,
.back-text > h2,
.back-text > .h2,
.vac-info-wrapper > h3,
.vac-info-wrapper > .h3,
.back-text > h3,
.back-text > .h3,
.vac-info-wrapper > h4,
.vac-info-wrapper > .h4,
.back-text > h4,
.back-text > .h4,
.vac-info-wrapper > h5,
.vac-info-wrapper > .h5,
.back-text > h5,
.back-text > .h5,
.vac-info-wrapper > h6,
.vac-info-wrapper > .h6,
.back-text > h6,
.back-text > .h6 {
  margin-top: 0 !important;
}

/* H1 + Other titles */
h1 + h2,
.h1 + .h2,
h1 + h3,
.h1 + .h3,
h1 + h4,
.h1 + .h4,
h1 + h5,
.h1 + .h5,
h1 + h6,
.h1 + .h6 {
  margin-top: 0 !important;
}

/* H2 + Other titles */
h2 + h3,
.h2 + .h3,
h2 + h4,
.h2 + .h4,
h2 + h5,
.h2 + .h5,
h2 + h6,
.h2 + .h6 {
  margin-top: 0 !important;
}

/* H3 + Other titles */
h3 + h4,
.h3 + .h4,
h3 + h5,
.h3 + .h5,
h3 + h6,
.h3 + .h6 {
  margin-top: 0 !important;
}

/* H4 + Other titles */
h4 + h5,
.h4 + .h5,
h4 + h6,
.h4 + .h6 {
  margin-top: 0 !important;
}

/* H5 + Other titles */
h5 + h6,
.h5 + .h6 {
  margin-top: 0 !important;
}

/* Text on a block */
.vac-info-wrapper p,
.back-text p {
  margin-top: 0 !important;
}

/* Header Section */
.section-header__media-content {
  width: 690px;
}

@media (max-width: 991px) {
  .section-header {
    margin-bottom: 0;
  }

  .section-header__media-image {
    border-radius: var(--b-radius) !important;
  }

  .col-lg-8.col-md-12.col-sm-12 {
    min-height: 500px; /* adjusted for mobile */
  }

  .vac-info-wrapper {
    min-height: 450px; /* adjusted for mobile */
  }

  .calculator .container > .row {
    min-height: 500px; /* adjusted for mobile */
  }
}

@media (max-width: 767px) {
  .section-header__media-content {
    width: 510px;
  }

  .col-lg-8.col-md-12.col-sm-12 {
    min-height: 400px; /* further adjusted for small screens */
  }

  .vac-info-wrapper {
    min-height: 350px; /* further adjusted for small screens */
  }
}

@media (max-width: 575px) {
  .section-header__media-content {
    width: calc(100% - 30px);
  }
}

.section-header__last-update {
  font-size: 14px;
  line-height: 25px;
  font-weight: 400;
}

.section-header__written-by {
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
}

/* Block with content */
.vac-info-wrapper,
.back-text {
  border-radius: var(--b-radius);
  padding: var(--c-pv) var(--c-ph);
}

.back-text {
  max-width: 100%;
  margin: auto;
}

/* Calculator */
#app .vac-calc {
  border-radius: var(--b-radius);
}

/* ================================= Images ================================= */
img,
figure {
  border-radius: var(--b-radius);
}

/* Fix CLS for VAT calculator layout */
#application .row {
  align-items: flex-start; /* prevent column jump */
}

/* Enhanced layout shift prevention targeting specific PageSpeed issues */

/* Conservative fix for the main container layout shift */
.container {
  contain: layout; /* Less aggressive containment */
}

/* Specific fix for the calculator container causing the main shift */
.calculator .container {
  min-height: 600px; /* Reduced from 700px to be less aggressive */
}

/* Conservative fix for the col-lg-4 layout shift - calculator column */
.col-lg-4.col-md-12.col-sm-12 {
  min-height: 550px; /* Reduced from 650px */
}

/* Ensure the React app container has consistent but reasonable height */
#app {
  min-height: 500px; /* Reduced from 600px */
  width: 100%;
}

/* More targeted image fix to resolve "unsized image element" issue */
/* Fix unsized image elements by forcing explicit dimensions and preventing any layout shift */
img[src*="262fc201ec7e963ca9726fb28edd04b1.png"] {
  width: 250px !important;
  height: 61px !important;
  max-width: 250px !important;
  max-height: 61px !important;
  display: block !important;
  object-fit: contain;
  /* Prevent any layout shift from image loading */
  aspect-ratio: 250 / 61;
  /* Force the browser to reserve space immediately */
  min-width: 250px;
  min-height: 61px;
}

/* Conservative header stability fix */
header {
  min-height: 70px; /* Reduced from 80px */
  display: flex;
  align-items: center;
}

header a {
  display: block;
  width: 250px;
  height: 61px;
  flex-shrink: 0; /* Prevent shrinking */
}

/* Less aggressive row height to prevent over-constraining */
#application .row {
  align-items: stretch;
  min-height: 550px; /* Reduced from 650px */
}

/* More conservative content area stability */
.vac-info-wrapper {
  min-height: 500px; /* Reduced from 600px */
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
}

/* Conservative title space reservation */
.vac-content-title {
  min-height: 50px; /* Reduced from 60px */
  display: block;
  line-height: 1.2;
  margin-bottom: 30px;
}

.vac-content {
  flex: 1;
  min-height: 350px; /* Reduced from 400px */
}

/* Updated mobile adjustments to match new conservative heights */
@media (max-width: 991px) {
  .calculator .container {
    min-height: 500px; /* Reduced */
  }

  .col-lg-4.col-md-12.col-sm-12,
  .col-lg-8.col-md-12.col-sm-12 {
    min-height: 450px; /* Reduced */
  }

  .vac-info-wrapper {
    min-height: 400px; /* Reduced */
  }
}

@media (max-width: 767px) {
  .calculator .container {
    min-height: 450px; /* Reduced */
  }

  .col-lg-4.col-md-12.col-sm-12,
  .col-lg-8.col-md-12.col-sm-12 {
    min-height: 350px; /* Reduced */
  }

  .vac-info-wrapper {
    min-height: 300px; /* Reduced */
  }
}

/* Conservative performance hints only where needed */
.container {
  will-change: auto;
}