/* @extend display-flex; */
display-flex, .steps ul, .title-number, .actions ul, .actions ul li a {
  display: flex;
  display: -webkit-flex; }

/* @extend list-type-ulli; */
list-type-ulli, .steps ul, .actions ul {
  list-style-type: none;
  margin: 0;
  padding: 0; }

/* sans Fonts */
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 900;
  src: url('../fonts/sans/eot/IRANSansWeb_Black.eot');
  src: url('../fonts/sans/eot/IRANSansWeb_Black.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('../fonts/sans/woff2/IRANSansWeb_Black.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('../fonts/sans/woff/IRANSansWeb_Black.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('../fonts/sans/ttf/IRANSansWeb_Black.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: bold;
  src: url('../fonts/sans/eot/IRANSansWeb_Bold.eot');
  src: url('../fonts/sans/eot/IRANSansWeb_Bold.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('../fonts/sans/woff2/IRANSansWeb_Bold.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('../fonts/sans/woff/IRANSansWeb_Bold.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('../fonts/sans/ttf/IRANSansWeb_Bold.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 500;
  src: url('../fonts/sans/eot/IRANSansWeb_Medium.eot');
  src: url('../fonts/sans/eot/IRANSansWeb_Medium.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('../fonts/sans/woff2/IRANSansWeb_Medium.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('../fonts/sans/woff/IRANSansWeb_Medium.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('../fonts/sans/ttf/IRANSansWeb_Medium.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 300;
  src: url('../fonts/sans/eot/IRANSansWeb_Light.eot');
  src: url('../fonts/sans/eot/IRANSansWeb_Light.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('../fonts/sans/woff2/IRANSansWeb_Light.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('../fonts/sans/woff/IRANSansWeb_Light.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('../fonts/sans/ttf/IRANSansWeb_Light.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: 200;
  src: url('../fonts/sans/eot/IRANSansWeb_UltraLight.eot');
  src: url('../fonts/sans/eot/IRANSansWeb_UltraLight.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('../fonts/sans/woff2/IRANSansWeb_UltraLight.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('../fonts/sans/woff/IRANSansWeb_UltraLight.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('../fonts/sans/ttf/IRANSansWeb_UltraLight.ttf') format('truetype');
}
@font-face {
  font-family: IRANSans;
  font-style: normal;
  font-weight: normal;
  src: url('../fonts/sans/eot/IRANSansWeb.eot');
  src: url('../fonts/sans/eot/IRANSansWeb.eot?#iefix') format('embedded-opentype'),  /* IE6-8 */
  url('../fonts/sans/woff2/IRANSansWeb.woff2') format('woff2'),  /* FF39+,Chrome36+, Opera24+*/
  url('../fonts/sans/woff/IRANSansWeb.woff') format('woff'),  /* FF3.6+, IE9, Chrome6+, Saf5.1+*/
  url('../fonts/sans/ttf/IRANSansWeb.ttf') format('truetype');
}




/* poppins-300 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 300;
  src: url("../fonts/poppins/poppins-v5-latin-300.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Light"), local("Poppins-Light"), url("../fonts/poppins/poppins-v5-latin-300.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-300.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-300.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-300.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-300.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-300italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 300;
  src: url("../fonts/poppins/poppins-v5-latin-300italic.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Light Italic"), local("Poppins-LightItalic"), url("../fonts/poppins/poppins-v5-latin-300italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-300italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-300italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-300italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-300italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-regular - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 400;
  src: url("../fonts/poppins/poppins-v5-latin-regular.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Regular"), local("Poppins-Regular"), url("../fonts/poppins/poppins-v5-latin-regular.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-regular.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-regular.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-regular.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-regular.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 400;
  src: url("../fonts/poppins/poppins-v5-latin-italic.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Italic"), local("Poppins-Italic"), url("../fonts/poppins/poppins-v5-latin-italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-500 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 500;
  src: url("../fonts/poppins/poppins-v5-latin-500.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Medium"), local("Poppins-Medium"), url("../fonts/poppins/poppins-v5-latin-500.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-500.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-500.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-500.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-500.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-500italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 500;
  src: url("../fonts/poppins/poppins-v5-latin-500italic.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Medium Italic"), local("Poppins-MediumItalic"), url("../fonts/poppins/poppins-v5-latin-500italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-500italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-500italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-500italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-500italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-600 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 600;
  src: url("../fonts/poppins/poppins-v5-latin-600.eot");
  /* IE9 Compat Modes */
  src: local("Poppins SemiBold"), local("Poppins-SemiBold"), url("../fonts/poppins/poppins-v5-latin-600.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-600.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-600.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-600.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-600.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-700 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 700;
  src: url("../fonts/poppins/poppins-v5-latin-700.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Bold"), local("Poppins-Bold"), url("../fonts/poppins/poppins-v5-latin-700.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-700.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-700.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-700.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-700.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-700italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 700;
  src: url("../fonts/poppins/poppins-v5-latin-700italic.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Bold Italic"), local("Poppins-BoldItalic"), url("../fonts/poppins/poppins-v5-latin-700italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-700italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-700italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-700italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-700italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-800 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 800;
  src: url("../fonts/poppins/poppins-v5-latin-800.eot");
  /* IE9 Compat Modes */
  src: local("Poppins ExtraBold"), local("Poppins-ExtraBold"), url("../fonts/poppins/poppins-v5-latin-800.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-800.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-800.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-800.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-800.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-800italic - latin */
@font-face {
  font-family: 'Poppins';
  font-style: italic;
  font-weight: 800;
  src: url("../fonts/poppins/poppins-v5-latin-800italic.eot");
  /* IE9 Compat Modes */
  src: local("Poppins ExtraBold Italic"), local("Poppins-ExtraBoldItalic"), url("../fonts/poppins/poppins-v5-latin-800italic.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-800italic.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-800italic.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-800italic.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-800italic.svg#Poppins") format("svg");
  /* Legacy iOS */ }
/* poppins-900 - latin */
@font-face {
  font-family: 'Poppins';
  font-style: normal;
  font-weight: 900;
  src: url("../fonts/poppins/poppins-v5-latin-900.eot");
  /* IE9 Compat Modes */
  src: local("Poppins Black"), local("Poppins-Black"), url("../fonts/poppins/poppins-v5-latin-900.eot?#iefix") format("embedded-opentype"), url("../fonts/poppins/poppins-v5-latin-900.woff2") format("woff2"), url("../fonts/poppins/poppins-v5-latin-900.woff") format("woff"), url("../fonts/poppins/poppins-v5-latin-900.ttf") format("truetype"), url("../fonts/poppins/poppins-v5-latin-900.svg#Poppins") format("svg");
  /* Legacy iOS */ }
  :root {
  --primary-color: #4a90e2;       /* رنگ اصلی دکمه‌ها و استپ‌ها */
  --primary-color-dark: #024b64;  /* برای hover دکمه‌ها و استپ‌ها */
  --secondary-color: #dc3545;     /* رنگ ثانویه (مثلاً برای hover منو) */
  --text-color: #222222;          /* رنگ متن اصلی */
  --page-bg: #f5f5f5;             /* پس‌زمینه نرم صفحه */
  --card-bg: #ffffff;             /* پس‌زمینه باکس سفید فرم */
  --border-color: #e0e0e0;        /* رنگ مرز اینپوت‌ها و باکس‌ها */
}

a:focus, a:active {
  text-decoration: none;
  outline: none;
  transition: all 300ms ease 0s;
  -moz-transition: all 300ms ease 0s;
  -webkit-transition: all 300ms ease 0s;
  -o-transition: all 300ms ease 0s;
  -ms-transition: all 300ms ease 0s; }

input, select, textarea {
  outline: none;
  appearance: unset !important;
  -moz-appearance: unset !important;
  -webkit-appearance: unset !important;
  -o-appearance: unset !important;
  -ms-appearance: unset !important; }

input::-webkit-outer-spin-button, input::-webkit-inner-spin-button {
  appearance: none !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  -o-appearance: none !important;
  -ms-appearance: none !important;
  margin: 0; }

input:focus, select:focus, textarea:focus {
  outline: none;
  box-shadow: none !important;
  -moz-box-shadow: none !important;
  -webkit-box-shadow: none !important;
  -o-box-shadow: none !important;
  -ms-box-shadow: none !important; }

input[type=checkbox] {
  appearance: checkbox !important;
  -moz-appearance: checkbox !important;
  -webkit-appearance: checkbox !important;
  -o-appearance: checkbox !important;
  -ms-appearance: checkbox !important; }

input[type=radio] {
  appearance: radio !important;
  -moz-appearance: radio !important;
  -webkit-appearance: radio !important;
  -o-appearance: radio !important;
  -ms-appearance: radio !important; }

.clear {
  clear: both; }

h3 {
  font-size: 12px;
  font-weight: bold;
  color: #fff;
  cursor: pointer; }

h2 {
  text-transform: uppercase;
  font-size: 18px;      /* قبلاً 16 بود */
  font-weight: bold;
  text-align: center;
  margin: 0 0 12px;     /* مارجین پایین 12px */
  padding-top: 32px;
  padding-bottom: 25px;
  color: #333;          /* رنگ تیره‌تر برای خوانایی بیشتر */
}



body {
  font-size: 13px;
  line-height: 1.92;
  color: var(--text-color);
  font-weight: 500;
  font-family: IRANSans !important;
  margin: 0px;
  background-color: var(--page-bg); /* پس‌زمینه ساده، هماهنگ با سایت */
  }

.main {
  padding: 20px 0;
font-family: IRANSans !important;
}

.container {
  width: 100%;
  max-width: 1100px;   /* یا مقدار نزدیک به کانتینر اصلی سایت */
  position: relative;
  margin: 20px auto;
  background: transparent;
}


input, textarea {
  box-sizing: border-box;
  background: transparent;
  border: none;
  font-size: 13px;
  color: var(--text-color);
  padding: 15px 20px;
  border: 1px solid var(--border-color);
  font-family: IRANSans, 'Poppins', sans-serif;
  height: 40px;
  font-weight: 500;
  border-radius: 5px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
  -o-border-radius: 5px;
  -ms-border-radius: 5px; }
  input:focus, textarea:focus {
  border: 1px solid var(--primary-color);
  box-shadow: 0 0 0 1px rgba(0, 136, 107, 0.15); /* اگر کد رنگ برندت فرق داره، اینجا عوضش کن */
  background-color: #fff;
}

  input:focus::placeholder,
textarea:focus::placeholder {
  opacity: 0.35;
}

  input::-webkit-input-placeholder, textarea::-webkit-input-placeholder {
    color: #999; }
  input::-moz-placeholder, textarea::-moz-placeholder {
    color: #999; }
  input:-ms-input-placeholder, textarea:-ms-input-placeholder {
    color: #999; }
  input:-moz-placeholder, textarea:-moz-placeholder {
    color: #999; }

input {
  width: 100%;
  display: block; }

fieldset {
  border: none;
  margin: 0px;
  padding: 0px; }

fieldset.current {
  padding-left: 42px;
  padding-right: 37px; }

.steps ul::after{
  width: 97% !important;
}
.content {
  width: 100%;
  margin: 0 auto;
  background: var(--card-bg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  border-radius: 10px;
  border-top: 4px solid var(--primary-color); /* نوار بالای باکس با رنگ برند */
  padding: 0 32px 24px;   /* پدینگ چپ و راست سکشن اصلی */
}

  .content h3 {
    display: none; }

.steps {
  padding-bottom: 20px;
direction: rtl; }
  .steps ul {
    justify-content: space-between;
    -moz-justify-content: space-between;
    -webkit-justify-content: space-between;
    -o-justify-content: space-between;
    -ms-justify-content: space-between;
    position: relative; }
    .steps ul:after {
      position: absolute;
      content: "";
      height: 8px;
      width: 290px;
      left: 50%;
      transform: translateX(-50%);
      -moz-transform: translateX(-50%);
      -webkit-transform: translateX(-50%);
      -o-transform: translateX(-50%);
      -ms-transform: translateX(-50%);
      background: #fff;
      z-index: 9;
      bottom: 22px; }
    .steps ul li {
      position: relative;
      z-index: 99; }
      .steps ul li a {
        text-decoration: none;
        color: #024b64; }
    .steps ul .current .title-number {
  font-family: IRANSans !important;
  font-size: 16px;
  color: #fff;
  background-color: var(--primary-color);
}


.title span {
  text-align: center; }

.title-text {
  display: block;
  font-size: 12px;
  font-weight: bold;
  padding-bottom: 8px;
  text-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
  -moz-text-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
  -webkit-text-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
  -o-text-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2);
  -ms-text-shadow: 3px 4px 5px rgba(0, 0, 0, 0.2); }

.title-number {
  font-size: 13px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  -moz-border-radius: 50%;
  -webkit-border-radius: 50%;
  -o-border-radius: 50%;
  -ms-border-radius: 50%;
  border: 3px solid #fff;
  background: #ebebeb;
  color: #999999;
  align-items: center;
  -moz-align-items: center;
  -webkit-align-items: center;
  -o-align-items: center;
  -ms-align-items: center;
  justify-content: center;
  -moz-justify-content: center;
  -webkit-justify-content: center;
  -o-justify-content: center;
  -ms-justify-content: center;
  margin: 0 auto;
  box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.2);
  -webkit-box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.2);
  -o-box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.2);
  -ms-box-shadow: 0px 5px 9.5px 0.5px rgba(0, 0, 0, 0.2); }

.actions {
  position: absolute;
  bottom: 5px;
  right: 0;
  width: 100%; }
  .actions ul {
    width: 100%;
    align-items: center;
    -moz-align-items: center;
    -webkit-align-items: center;
    -o-align-items: center;
    -ms-align-items: center;
    justify-content: center;
    -moz-justify-content: center;
    -webkit-justify-content: center;
    -o-justify-content: center;
    -ms-justify-content: center; }
    .actions ul .disabled {
      display: none; }
    .actions ul li {
      margin: 0 5px; }
      .actions ul li a {
  font-family: IRANSans !important;
  width: 140px;
  height: 40px;
  color: #fff;
  background-color: var(--primary-color);
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border: none;
}

.actions ul li a:hover {
  background-color: var(--primary-color-dark);
}


.form-group {
  padding-bottom: 20px;
  position: relative; }
  /* متن زیر عنوان «نوع محصول را انتخاب کنید» */
.selected-shape-label {
  margin-bottom: 12px;
  font-size: 13px;
  color: #666666; /* اگر خواستی با رنگ سایت عوضش کن */
}

/* وقتی شکلی انتخاب شده، کمی برجسته‌تر بشه */
.selected-shape-label--active {
  color: #0d3b66;  /* یا هر رنگ اصلی برند خودت */
  font-weight: 600;
}





@media screen and (max-width: 400px) {

  .container {
    width: calc(100% - 40px);
    max-width: 100%; }

  .content {
    width: 100%;
  }

  fieldset.current {
    padding-left: 10px;
    padding-right: 10px; }

  .actions ul li a {
    width: 100px; } }

@media screen and (min-width: 400px) {

  .container {
    width: calc(100% - 40px);
    max-width: 100%; }

  .content {
    width: 100%;
  }


  fieldset.current {
    padding-left: 10px;
    padding-right: 10px; }

  .actions ul li a {
    width: 100px; } }
@media screen and (max-width: 768px) {

  .container {
    width: calc(100% - 40px);
    max-width: 100%; }

  .content {
    width: 100%;
  }

  fieldset.current {
    padding-left: 10px;
    padding-right: 10px; }

  .actions ul li a {
    width: 100px; } }
@media screen and (max-width: 365px) {

  .container {
    width: calc(100% - 40px);
    max-width: 100%; }

  .content {
    width: 100%;
  }

  fieldset.current {
    padding-left: 10px;
    padding-right: 10px; }

  .actions ul li a {
    width: 100px; } }

@media screen and (min-width: 768px) {

  .container {
    width: calc(50% - 40px);
    max-width: 100%; }

  .content {
    width: 80%;
  }



  fieldset.current {
    padding-left: 10px;
    padding-right: 10px; }

  .actions ul li a {
    width: 100px; } }


#i1{
  transition: all 0.2s ease-in;
  -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
  filter: grayscale(80%);
  background-image: url("../images/sheet-ptfe.png");
  background-size: contain;
  opacity: 0.6;
  background-repeat: no-repeat;
  background-position: center center;
}
#i2{
  transition: all 0.2s ease-in;
  -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
  filter: grayscale(80%);
  background-image: url("../images/roll-ptfe.png");
  background-size: contain;
  opacity: 0.6;
  background-repeat: no-repeat;
  background-position: center center;
}
#i3{
  transition: all 0.2s ease-in;
  -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
  filter: grayscale(80%);
  background-image: url("../images/pipe-ptfe.png");
  background-size: contain;
  opacity: 0.6;
  background-repeat: no-repeat;
  background-position: center center;
}
#i4{
  transition: all 0.2s ease-in;
  -webkit-filter: grayscale(80%); /* Safari 6.0 - 9.0 */
  filter: grayscale(80%);
  background-image: url("../images/rod-ptfe.png");
  background-size: contain;
  opacity: 0.6;
  background-repeat: no-repeat;
  background-position: center center;
}



#i1:hover{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  cursor: pointer;
  opacity: 1;
}
#i2:hover{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  cursor: pointer;
  opacity: 1;
}
#i3:hover{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  cursor: pointer;
  opacity: 1;
}
#i4:hover{
  -webkit-filter: grayscale(0%); /* Safari 6.0 - 9.0 */
  filter: grayscale(0%);
  cursor: pointer;
  opacity: 1;
}


.containerflex {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: 32px;
  row-gap: 20px;
  margin: 0 auto;
}

.flex-item {
  width: calc(50% - 32px);
  padding-bottom: 49%; /* نسبت ۱:۱ برای مربع‌ها */
  margin-bottom: 2%;
  position: relative;

  background-color: #ffffff;
  border-radius: 18px;
  border: 2px solid #ececec;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.04);
  transition: all 0.2s ease;
}

/* حالت hover روی کارت‌ها */
.flex-item:hover {
  border-color: var(--primary-color);
}

/* کارت انتخاب‌شده (وقتی از JS کلاسش رو ست می‌کنیم) */
.flex-item--selected {
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 136, 187, 0.15);
}


.pagetitle{
  width: 70%;
  margin: 0 auto 8px auto;
  text-align: center;
  color: #090909;
  background-color: white;
  border-radius: 0px 40px 40px 40px;
}
.pagetitle>h2 , .pagetitle>h1{
  padding-top: 0px;
  padding-bottom: 0px;
  margin-bottom: 0px;
}
.pagetitle>h1{
  font-size: 20px;
}
.pagetitle>h2{
  font-weight: normal;
}
/*two section*/

#shapeselected{
  background-image: url("../images/noimage.png");
  background-repeat: no-repeat;
  background-size: contain;
}
.containerflex2 {
  display: flex;
  flex-direction: column;   /* عکس و دراپ‌داون زیر هم */
  align-items: center;      /* وسط‌چین افقی */
  justify-content: flex-start;
  margin: 24px auto 0 auto;
}

.flex-item2 {
    width: 240px;
    height: 240px;
    margin: 12px auto 24px;
}



.custom-select {
  position: relative;
  width: 100%;
  max-width: 25em;
  margin: 4em auto;
  cursor: pointer;
  text-align: center;
}

.select,
.label {
  display: block;
}

.select {
  font-family: IRANSans !important;
  width: 80%;                 /* پهنای لیست زیر شکل */
  max-width: 360px;
  position: static;           /* دیگر مطلق نباشد */
  padding: 10px 14px;
  height: 44px;
  opacity: 1;
  border: 1px solid #d7d7d7;
  border-radius: 8px;
  direction: rtl;
  right: auto;                /* بی‌اثر شود */
  box-sizing: border-box;
}

/* حالت فوکوس برای هماهنگی با رنگ اصلی سایت */
.select:focus {
  outline: none;
  border-color: var(--primary-color);
  box-shadow: 0 0 0 2px rgba(0, 136, 187, 0.15);
}


.label {
  position: relative;
  padding: 1em;
  border-radius: .5em;
  cursor: pointer;
}

.label::after {
  content: "▼";
  position: absolute;
  right: 0;
  top: 0;
  padding: 1em;
  border-left: 1px solid;
}

.open .label::after {
  content: "▲";
}

.select-1 {
  background: #335376;
  border-bottom: 0.25em solid #103056;
  color: #fff;
}
.select-1,
.select-2,
.select-3 {
  background: var(--primary-color);
  border-bottom: 0.25em solid var(--primary-color-dark);
  color: #fff;
}


option{
  direction: rtl;
}
/*# sourceMappingURL=style.css.map */


label{
  direction: ltr;
  text-align: right;
  display: block;
}

button{
  font-family: IRANSans !important;
  margin-bottom:12px;
}

.navbar {
  display: flex;
  align-items: center;
  /* justify-content: center; */
  height: 100%;
  width: 100%;
  margin: auto;
  background-color: #fff;
  border-radius: 13px;
  margin-bottom: 1rem;
}

.navbar ul {
  display: flex;
}

.container .navbar {
  justify-content: center;
  direction: rtl;
}

.navbar ul li {
  list-style-type: none;
}

.container .navbar ul li {
  margin: 0 10px;
}

.navbar a {
  color: var(--nav-text);
  font-weight: bold;
}


/* Responsive section for small screen like mobile devices */

@media screen and (min-width: 390px) and (max-width: 767px) {
  .container {
    height: 100%;
  }

  .container .navbar {
    flex-direction: column;
  }
}
.navbar a {
  color: var(--nav-text);
  font-weight: bold;
}

.navbar a:hover {
  color: var(--secondary-color);
}

.material-title {
    text-align: center;
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 6px;
}

.material-subtitle {
    text-align: center;
    font-size: 13px;
    color: #666;
    margin-bottom: 20px;
}

.material-grid{
  width: min(720px, 100%);
  margin: 16px auto 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px 18px; /* فاصله عمودی/افقی */
  padding: 0 10px;
}
@media (max-width: 520px) {
  .material-grid {
    grid-template-columns: 1fr;
    gap: 12px;
  }
}

.material-card {
    width: 100%;
    background: #fff;
    padding: 14px 18px;
    text-align: center;
    border: 2px solid #e6e6e6;
    border-radius: 12px;
    cursor: pointer;
    transition: all .25s ease;
    box-shadow: 0 2px 6px rgba(0,0,0,0.05);
}

.material-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 3px 12px rgba(0,0,0,0.08);
}

.material-card.is-selected{
  border-color: var(--primary-color);
  background: #f0f6ff;
  box-shadow: 0 4px 15px rgba(0,0,0,0.1);
}


.material-name {
    display: block;
    font-size: 15px;
    font-weight: 600;
    margin-bottom: 6px;
}

.material-density {
    font-size: 13px;
    color: #555;
}

.material-info {
    margin-top: 12px;
    text-align: center;
    font-size: 13px;
    color: #444;
}


/* inputs usable */
.form-group{
  width:100%;
  max-width:560px;
}

.form-group input{
  width:100%;
  pointer-events:auto !important;
  position:relative;
  z-index:2;
}

/* ===== Step 3 Layout (Desktop 2 columns / Mobile 1 column) ===== */
#cal1{
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  gap: 22px;
  align-items: start;
  margin-top: 10px;
}

.cal-side{
  display: flex;
  flex-direction: column;
  align-items: center;
}

#cal1img{
  width: 280px;
  height: 140px;
  margin: 0 auto 10px;
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  pointer-events: none; /* خیلی مهم: حفظ می‌شود */
}

.cal-meta{
  font-size: 12.5px;
  color: #555;
  margin-bottom: 12px;
  text-align: center;
}

.cal-form{
  width: 100%;
  max-width: 600px; /* همون بازه‌ای که گفتی 520-600 */
  margin: 0 auto;
}

.form-row{
  margin-bottom: 18px;
}

.form-row label{
  display: block;
  margin-bottom: 8px;
}

.form-row input{
  width: 100%;
  height: 44px;
}

.field-error{
  display: block;
  min-height: 16px;
  margin-top: 6px;
  font-size: 12px;
  color: #c62828;
}

/* Summary Card */
.calc-summary{
  width: 100%;
  max-width: 300px;
  background: #fff;
  border: 2px solid #e6eaf1;
  border-radius: 12px;
  padding: 12px 14px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.05);
  position: sticky;
  top: 16px;
}

.calc-summary__title{
  font-weight: 800;
  font-size: 13px;
  margin-bottom: 10px;
  text-align: center;
}

.calc-summary__row{
  display:flex;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed #eef1f6;
  font-size: 13px;
}

.calc-summary__row strong{
  font-weight: 800;
}

.calc-summary__hint{
  margin-top: 10px;
  font-size: 12px;
  color: #666;
  text-align: center;
}

/* Mobile: single column */
@media (max-width: 820px){
  #cal1{
    grid-template-columns: 1fr;
  }
  .calc-summary{
    position: static;
    top: auto;
    max-width: 600px;
  }
}
.unit-hint{
  text-align:center;
  font-size: 12.5px;
  color:#666;
  margin-top: 8px;
}

.actions a.is-disabled{
  pointer-events: none;
  opacity: 0.45;
  filter: grayscale(60%);
}

/* =========================
   Step 3 ONLY: Actions fix
   ========================= */

/* فقط وقتی Step 3 فعال است */
#signup-form.is-step3 .actions{
  position: static;      /* از absolute خارج می‌کنیم */
  width: 100%;
  margin-top: 18px;      /* فاصله از محتوای Step 3 */
  padding-bottom: 16px;  /* نفس دادن پایین */
}

#signup-form.is-step3 .actions ul{
  gap: 10px;
  flex-wrap: wrap;
}

#signup-form.is-step3 .actions ul li a[href="#finish"]{
  background: #25D366 !important;
  color: #fff !important;
}

#signup-form.is-step3 .actions ul li a[href="#finish"]:hover{
  filter: brightness(0.95);
}
#signup-form.is-step3 .actions ul{
  justify-content: center; /* وسط‌چین */
}

/* Step 3: دکمه واتساپ (Finish) را درست و خوش‌فرم کن */
#signup-form.is-step3 .actions ul li a[href="#finish"]{
  width: auto !important;        /* عرض ثابت 100/140 را بی‌اثر می‌کند */
  min-width: 220px;              /* حداقل عرض مناسب برای متن */
  padding: 0 16px;
  height: 44px;                  /* کمی بهتر از 40 */
  white-space: nowrap;           /* جلوگیری از رفتن متن به خط بعد */
  line-height: 1;
  border-radius: 8px;
}

/* اگر دکمه "شروع مجدد" هم کنار آن اضافه می‌شود، یک استایل مشخص بده */
#signup-form.is-step3 .actions ul li.js-reset-stepper a{
  width: auto !important;
  min-width: 140px;
  padding: 0 14px;
  height: 44px;
  white-space: nowrap;
  background: #6c757d;           /* خاکستری استاندارد */
}
#signup-form.is-step3 .actions ul li.js-reset-stepper a:hover{
  filter: brightness(0.95);
}

/* ===============================
   Selected Shape Card (FINAL)
   =============================== */

/* وقتی کارت انتخاب شد، حتی بعد از hover هم فعال بماند */
.flex-item.flex-item--selected,
#i1.flex-item--selected,
#i2.flex-item--selected,
#i3.flex-item--selected,
#i4.flex-item--selected {
  border-color: var(--primary-color) !important;
  box-shadow: 0 0 0 3px rgba(74, 144, 226, 0.25) !important;

  /* خنثی کردن حالت خاکستری */
  filter: grayscale(0%) !important;
  opacity: 1 !important;
}