/* =====================================================
   Calculator CSS — scoped to #ac-calculator
   Compiled from calculator.scss
   All rules namespaced to prevent conflicts with the
   existing aerconditionat.ariston.com stylesheet.
   ===================================================== */

/* ---- Fonts (global) ---- */
@font-face {
  font-family: 'DINAlternateRegular';
  src: url('../fonts/DINAlternateRegular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'DINAlternateRegular';
  src: url('../fonts/DINAlternate-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

/* ---- Scoped to #ac-calculator ---- */
#ac-calculator {
  font-family: 'DINAlternateRegular', arial, sans-serif;
}

#ac-calculator h2 {
  color: #C31726;
  font-family: 'DINAlternateRegular', arial, sans-serif;
  font-size: 32px;
}

#ac-calculator p {
  font-family: 'DINAlternateRegular', arial, sans-serif;
  font-size: 16px;
  color: inherit;
}

#ac-calculator select,
#ac-calculator input[type="text"],
#ac-calculator input[type="number"] {
  border: 1px solid #C31726;
  width: 100%;
  background-color: #fff;
  padding: 8px;
  outline: none;
}

/* ---- Form box ---- */
#ac-calculator .container-formular-1 {
  background-color: #EBEBEB;
  padding: 5% 6%;
  margin-bottom: 40px;
}

/* ---- Button ---- */
#ac-calculator .buton-rosu,
#ac-calculator .buton-rosu:hover {
  color: #fff;
  background-color: #C31726;
  font-family: 'DINAlternateRegular', arial, sans-serif;
  font-size: 16px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 12px 40px;
  text-align: center;
  display: inline-block;
  text-decoration: none;
  margin-top: 15px;
  border: none;
  cursor: pointer;
}

#ac-calculator .btn_align-middle {
  text-align: center;
  overflow: hidden;
}

#ac-calculator .btn_align-middle .buton-rosu {
  float: right;
}

@media (max-width: 767px) {
  #ac-calculator .btn_align-middle .buton-rosu {
    float: none;
    display: block;
    width: 100%;
    margin-top: 20px;
  }
}

/* ---- Icon checkboxes ---- */
#ac-calculator .icon_checkboxes-container {
  font-size: 0;
  text-align: center;
}

#ac-calculator .custom-checkbox {
  display: inline-block;
  position: relative;
  padding-left: 40px;
  margin-bottom: 5px;
  margin-top: 15px;
  cursor: pointer;
  font-size: 16px;
  line-height: 1.5;
}

#ac-calculator .custom-checkbox input[type="checkbox"],
#ac-calculator .custom-checkbox input[type="radio"] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
}

#ac-calculator .custom-checkbox .checkmark {
  position: absolute;
  top: 0;
  left: 0;
  width: 30px;
  height: 30px;
  border: 1px solid #C31726;
  background-color: #fff;
  margin-right: 10px;
}

#ac-calculator .custom-checkbox .checkmark:after {
  content: "";
  position: absolute;
  display: none;
  left: 9px;
  top: 5px;
  width: 6px;
  height: 13px;
  border: solid #000;
  border-width: 0 3px 3px 0;
  transform: rotate(45deg);
}

#ac-calculator .custom-checkbox input[type="checkbox"]:checked + .checkmark:after,
#ac-calculator .custom-checkbox input[type="radio"]:checked + .checkmark:after {
  display: block;
}

#ac-calculator .custom-checkbox.icon-checkbox {
  padding: 15px;
  text-align: center;
  border: 2px solid transparent;
  margin: 14px 0 20px;
  transition: .3s;
}

#ac-calculator .custom-checkbox.icon-checkbox.checkbox_checked {
  border: 2px solid #c31726;
}

#ac-calculator .custom-checkbox.icon-checkbox.col-4,
#ac-calculator .custom-checkbox.icon-checkbox.col-3 {
  display: inline-block;
}

#ac-calculator .custom-checkbox.icon-checkbox .checkmark {
  position: absolute;
  visibility: hidden;
  opacity: 0;
}

#ac-calculator .custom-checkbox.icon-checkbox .checkbox-label {
  display: block;
  margin-bottom: 15px;
  color: #4C4C4C;
  font-size: 16px;
}

#ac-calculator .custom-checkbox.icon-checkbox input[type="radio"]:checked + .checkbox-label,
#ac-calculator .custom-checkbox.icon-checkbox input[type="checkbox"]:checked + .checkbox-label {
  font-weight: bold;
}

#ac-calculator .custom-checkbox.icon-checkbox .checkbox-icon {
  max-width: 90px;
  width: 90%;
}

@media (max-width: 767px) {
  #ac-calculator .custom-checkbox.icon-checkbox.col-4,
  #ac-calculator .custom-checkbox.icon-checkbox.col-3 {
    width: 100%;
  }
}

#ac-calculator .step1-error {
  font-size: 13px;
  color: red;
}

/* ---- Disclaimer ---- */
#ac-calculator .configurator-disclaimer {
  font-size: 16px;
  color: #666;
  font-style: italic;
  margin-top: 18px;
}

/* ---- Step 3 — config summary ---- */
#ac-calculator .config-col       { padding: 20px 30px; }
#ac-calculator .config-col-left  { border-right: 1px solid #C31726; }
#ac-calculator .config-casa-row  { display: flex; align-items: center; justify-content: center; gap: 12px; }
#ac-calculator .config-icon      { max-height: 56px; object-fit: contain; }
#ac-calculator .camere-count     { font-family: 'DINAlternateRegular'; font-size: 30px; color: #C31726; }

/* ---- Step 3 — room calc rows ---- */
#ac-calculator .calc-room {
  padding: 16px 20px;
  border-right: 1px solid #C31726;
}
#ac-calculator .calc-room:last-child,
#ac-calculator .calc-room:nth-child(3n) { border-right: none; }

#ac-calculator .room-name      { color: #333; font-family: 'DINAlternateRegular'; font-size: 16px; margin-bottom: 4px; }
#ac-calculator .room-calc      { color: #555; font-size: 16px; margin-bottom: 4px; }
#ac-calculator .room-unit      { color: #C31726; font-family: 'DINAlternateRegular'; font-size: 16px; margin-bottom: 0; }
#ac-calculator .room-unit-value { font-family: 'DINAlternateRegular'; }

/* ---- Step 4 — product carousel (scoped, doesn't affect page carousel) ---- */
#ac-calculator .owl-carousel.prod_carousel {
  margin: 10px 0;
  position: relative;
}

#ac-calculator .owl-carousel.prod_carousel .prod_title {
  display: block;
  margin-top: 12px;
  font-family: 'DINAlternateRegular';
  font-size: 18px;
  text-transform: uppercase;
  color: #C31726;
}

#ac-calculator .owl-carousel.prod_carousel .prod_slide {
  cursor: pointer;
  padding: 10px;
  border: 2px solid transparent;
  transition: border-color .2s;
}

#ac-calculator .owl-carousel.prod_carousel .prod_slide.card-selected {
  border-color: #C31726;
}

#ac-calculator .owl-carousel.prod_carousel .owl-dots { display: none; }

#ac-calculator .owl-carousel.prod_carousel .owl-nav {
  margin-top: 20px;
  text-align: center;
}

#ac-calculator .owl-carousel.prod_carousel .owl-nav button {
  border-radius: 50%;
  border: none;
  background: #C31726;
  color: #fff;
  width: 44px;
  height: 44px;
  display: inline-block;
  margin: 0 4px;
  position: relative;
  cursor: pointer;
  transition: background .2s;
}

#ac-calculator .owl-carousel.prod_carousel .owl-nav button:hover {
  background: #000;
}

#ac-calculator .owl-carousel.prod_carousel .owl-nav button span {
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translateX(-50%) translateY(-50%);
  font-size: 34px;
  line-height: 44px;
}

/* ---- Step 4 — product cards ---- */
#ac-calculator .product-card {
  cursor: pointer;
  text-align: center;
  padding: 16px 12px;
  border: 2px solid #eee;
  transition: border-color .2s;
}
#ac-calculator .product-card:hover        { border-color: #C31726; }
#ac-calculator .product-card.card-selected { border-color: #C31726; }
#ac-calculator .product-card img          { max-height: 140px; object-fit: contain; }

#ac-calculator .product-detail-category {
  color: #C31726;
  font-family: 'DINAlternateRegular';
  font-size: 13px;
  letter-spacing: 1px;
  margin-bottom: 4px;
}

/* ---- Step 4 — accordion ---- */
#ac-calculator .accordion-item         { border-bottom: 1px solid #eee; }
#ac-calculator .accordion-item-header  { display: flex; align-items: center; gap: 12px; cursor: pointer; padding: 12px 0; }
#ac-calculator .accordion-item-header.no-icon { gap: 8px; }
#ac-calculator .accordion-icon         { width: 26px; height: 26px; object-fit: contain; flex-shrink: 0; }
#ac-calculator .accordion-item-title   { flex: 1; font-family: 'DINAlternateRegular'; color: #333; font-size: 16px; }
#ac-calculator .accordion-toggle       { color: #C31726; font-size: 22px; font-weight: bold; line-height: 1; width: 20px; text-align: center; }
#ac-calculator .accordion-item-content { display: none; padding: 0 0 14px 38px; color: #555; font-size: 14px; }

/* ---- Step 4 — gallery ---- */
#ac-calculator .gallery-main-img { width: 100%; max-height: 340px; object-fit: contain; }
#ac-calculator .gallery-thumbs   { display: flex; gap: 8px; flex-wrap: wrap; }

#ac-calculator .gallery-thumb {
  width: 72px;
  height: 72px;
  object-fit: contain;
  cursor: pointer;
  border: 2px solid #eee;
  padding: 4px;
  transition: border-color .2s;
}
#ac-calculator .gallery-thumb.thumb-active,
#ac-calculator .gallery-thumb:hover { border-color: #C31726; }