/**
 * Kalkulator Podłoża do Akwarium - Style
 */

:root {
  --primary-orange-calc: #ff8900;
  --primary-green-calc: #4b8b00;
  --light-green-calc: #e4eed9;
  --light-gray-calc: #f8f8f8;
  --medium-gray-calc: #e0e0e0;
  --border-gray-calc: #d9d9d9;
  --dark-gray-calc: #333333;
  --white-calc: #ffffff;
  --success-green: #4caf50;
  --error-red: #f44336;
  --border-radius-calc: 30px;
  --border-radius-small-calc: 25px;
  --shadow-calc: 0 1px 3px rgba(0, 0, 0, 0.05);
  --transition-calc: all 0.2s ease;
}

/* Kontener główny */
.aquarium-calculator-container {
  margin: 0 auto;
  font-family: "Playfair Display", serif;
  color: var(--dark-gray-calc);
  line-height: 1.5;
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
  align-items: flex-start;
  width: 100%;
}

.calculator-form-container {
  flex: 1;
  width: 100%;
  min-width: 300px;
  padding: 40px;
  border-radius: 30px;
}

.aquarium-calculator-form {
  margin-top: 3em;
}

.calculator-results-container {
  flex: 1;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  gap: 2em;
}

.results-tittle-main {
  font-size: 2em;
  font-weight: 700;
  color: black;
}
.results-tittle {
  font-size: 1.3em;
  font-weight: 500;
  color: black;
}

.calculator-results-info {
  background-color: #f5f5f5;
  padding: 40px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

.calculator-results-info-head {
  display: flex;
  flex-direction: row;
  gap: 1em;
  align-items: center;
}

.description-icon {
  width: 70px;
  height: 70px;
  vertical-align: middle;
  position: relative;
}
.calculator-results-inner {
  background-color: #f5f5f5;
  padding: 40px;
  border-radius: 30px;
  display: flex;
  flex-direction: column;
  gap: 1em;
}

/* Sekcje kalkulatora */
.calculator-section {
  margin-bottom: 25px;
}

.calculator-section h3 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--dark-gray-calc);
  font-weight: 600;
  font-size: 1.4em;
}

.calculator-section label,
.calculator-section h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--dark-gray-calc);
  font-weight: 600;
  font-size: 1.2em;
  font-family: "Playfair Display", serif;
}

.input-group label {
  display: block;
  margin-bottom: 10px;
  font-weight: 500;
  color: var(--dark-gray-calc);
  margin-top: 20px;
}

.input-group input[type="number"],
.input-group select {
  width: 100%;
  max-width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-gray-calc);
  border-radius: var(--border-radius-small-calc);
  font-size: 16px;
  box-sizing: border-box;
  transition: var(--transition-calc);
  background-color: var(--white-calc);
}

.input-group select {
  height: 45px; /* Zwiększona wysokość selecta */
}

.input-group input[type="number"]:focus,
.input-group select:focus {
  outline: none;
  border-color: var(--primary-green-calc);
}

/* Stylizacja selecta z niestandardową strzałką */
.input-group select {
  width: 100%;
  max-width: 100%;
  padding: 12px 15px;
  border: 1px solid var(--border-gray-calc);
  border-radius: var(--border-radius-small-calc);
  font-size: 16px;
  box-sizing: border-box;
  transition: var(--transition-calc);
  background-color: var(--white-calc);
  height: 45px; /* Zwiększona wysokość selecta */

  /* Ustawienia dla niestandardowej strzałki */
  background-image: url("../../images/select-arrow.svg");
  background-repeat: no-repeat;
  background-position: right 15px center;
  background-size: 12px;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  padding-right: 40px; /* Większy padding z prawej, aby strzałka była widoczna */
}

/* Ukrycie domyślnej strzałki w IE10+ */
.input-group select::-ms-expand {
  display: none;
}

/* Stylizacja stanu focus */
.input-group select:focus {
  outline: none;
  border-color: var(--primary-green-calc);
  background-image: url("../../images/select-arrow.svg"); /* Zachowanie strzałki przy focusie */
}

.input-hint {
  display: block;
  font-size: 13px;
  color: #777;
  margin-top: 5px;
}

/* Układ inputów - po 2 w rzędzie */
.inputs-row {
  display: flex;
  flex-wrap: wrap;
  gap: 30px;
}

.inputs-row .input-group {
  flex: 1;
  min-width: 200px;
}

/* Radio buttons */
.radio-group {
  display: flex;
  flex-wrap: wrap;
  gap: 15px;
  margin-bottom: 10px;
}

.radio-group input[type="radio"] {
  display: none;
}

.radio-group label {
  display: inline-flex;
  align-items: center;
  padding: 12px 15px 12px 40px;
  background-color: var(--white-calc);
  border: 1px solid var(--border-gray-calc);
  border-radius: var(--border-radius-small-calc);
  cursor: pointer;
  transition: var(--transition-calc);
  font-weight: normal;
  text-align: left;
  min-width: 120px;
  margin: 0;
  position: relative;
}

.radio-group label::before {
  content: "";
  position: absolute;
  left: 15px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg id='Rectangle_32428' data-name='Rectangle 32428' fill='none' stroke='%23ddd' stroke-width='1'%3E%3Crect width='16' height='16' rx='4' stroke='none'/%3E%3Crect x='0.5' y='0.5' width='15' height='15' rx='3.5' fill='none'/%3E%3C/g%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.radio-group input[type="radio"]:checked + label {
  background-color: var(--light-green-calc);
  border-color: var(--primary-green-calc);
}

.radio-group input[type="radio"]:checked + label::before {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cg id='Group_6363' data-name='Group 6363' transform='translate(-350 -609)'%3E%3Crect id='Rectangle_32428' data-name='Rectangle 32428' width='16' height='16' rx='4' transform='translate(350 609)' fill='%234b8b00'/%3E%3Cpath id='Path_656' data-name='Path 656' d='M1.017-5.394a3.209,3.209,0,0,1-.235-.231.292.292,0,0,1-.093-.181.184.184,0,0,1,.084-.147.73.73,0,0,1,.2-.106,1.32,1.32,0,0,1,.251-.061,1.6,1.6,0,0,1,.226-.019.3.3,0,0,1,.164.042,1.234,1.234,0,0,1,.152.12A9,9,0,0,1,2.821-4.855q.474.6.876,1.19A30.752,30.752,0,0,1,5.5-7.4a24.545,24.545,0,0,1,2.315-3.386A.779.779,0,0,1,8.2-11.02a1.952,1.952,0,0,1,.591-.083.331.331,0,0,1,.167.036.113.113,0,0,1,.062.1A.312.312,0,0,1,9-10.851a.485.485,0,0,1-.087.125q-.687.817-1.334,1.712T6.347-7.126q-.588.992-1.114,2.082t-.966,2.29A.118.118,0,0,1,4.2-2.7a.665.665,0,0,1-.136.042,1.516,1.516,0,0,1-.18.025q-.1.008-.2.008a1.252,1.252,0,0,1-.26-.025.264.264,0,0,1-.173-.108q-.3-.456-.551-.8T2.187-4.2q-.26-.3-.542-.584T1.017-5.394Z' transform='translate(353.145 623.862)' fill='%23fff'/%3E%3C/g%3E%3C/svg%3E");
}

/* Numeryczne inputy */
input[type="number"] {
  -moz-appearance: textfield;
  position: relative;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.input-number-wrapper {
  position: relative;
}

.input-arrows {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.arrow-up,
.arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  cursor: pointer;
}

.arrow-up {
  border-bottom: 5px solid var(--border-gray-calc);
}

.arrow-down {
  border-top: 5px solid var(--border-gray-calc);
}

.arrow-up:hover {
  border-bottom-color: var(--primary-green-calc);
}

.arrow-down:hover {
  border-top-color: var(--primary-green-calc);
}

/* Przyciski */
.calculate-button,
.add-to-cart-button,
.recalculate-button,
.add-pdf-to-cart-button {
  padding: 12px 25px;
  border: none;
  border-radius: var(--border-radius-calc);
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  transition: var(--transition-calc);
  text-align: center;
  display: inline-block;
}

.calculate-button {
  background-color: var(--primary-green-calc);
  color: var(--white-calc);
  width: auto;
  min-width: 150px;
}

.calculate-button:hover {
  background-color: #3d7500;
}

.add-to-cart-button,
.add-pdf-to-cart-button {
  background-color: var(--primary-orange-calc);
  color: var(--white-calc);
  margin-right: 10px;
}

.add-to-cart-button:hover,
.add-pdf-to-cart-button:hover {
  background-color: #e07a00;
}

.recalculate-button {
  background-color: var(--light-gray-calc);
  color: var(--dark-gray-calc);
  border: 1px solid var(--border-gray-calc);
}

.recalculate-button:hover {
  background-color: var(--medium-gray-calc);
  color: #000;
}
.download-pdf-button {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  align-items: center;
  background: transparent;
  border: none;
  cursor: pointer;
}
.button-icon {
  width: 18px;
  height: 18px;
  margin-right: 8px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

.calculator-buttons {
  margin-top: 30px;
}

/* Sekcja wyników */
.calculator-results {
  margin-top: 2em;
  padding: 0;
}
.result-section {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
}

.result-section-buttons {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 2em;
  position: relative;
}

.up-result {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 1em;
}
.result-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 15px;
  padding: 10px 0;
}
.result-item-inner {
  display: flex;
  flex-direction: row;
  gap: 0.5em;
  align-items: center;
}
.result-label {
  font-weight: 400;
}

.result-value {
  font-weight: 600;
  text-align: right;
}

.result-final {
  display: flex;
  justify-content: space-between;
  margin-top: 25px;
  margin-bottom: 15px;
  padding: 15px 0;

  font-size: 20px;
}

.result-final .result-label {
  font-weight: 500;
}

.result-final .result-value {
  font-weight: 700;
  color: var(--primary-green-calc);
}

.calculation-results {
  margin-top: 30px;
  display: none;
}

.calculation-results h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--dark-gray-calc);
  font-weight: 600;
  font-size: 20px;
}

.bags-section {
  margin: 25px 0;
}

.bags-section h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--dark-gray-calc);
  font-weight: 600;
}

.bag-item {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
  border-bottom: 1px solid var(--light-gray-calc);
}

.bag-info {
  font-weight: 400;
}

.bag-count {
  font-weight: 600;
}

/* Stan zablokowany kalkulatora */
.calculator-form-disabled {
  opacity: 0.6;
  pointer-events: none;
}

/* Powiadomienia o dodaniu do koszyka */
.cart-notification {
  width: 100%;
  padding: 15px;
  margin-bottom: 20px;
  border-radius: var(--border-radius-small-calc);
  font-weight: 500;
  box-sizing: border-box;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.cart-notification.success {
  background-color: var(--success-green);
  color: var(--white-calc);
}

.cart-notification.error {
  background-color: var(--error-red);
  color: var(--white-calc);
}

.cart-notification.loading {
  background-color: var(--light-gray-calc);
  color: var(--dark-gray-calc);

  position: relative;
}

.cart-notification.loading::after {
  content: "";
  position: absolute;
  top: 50%;
  right: 15px;
  transform: translateY(-50%);
  width: 20px;
  height: 20px;
  border: 3px solid #757575;
  border-top: 3px solid transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  0% {
    transform: translateY(-50%) rotate(0deg);
  }
  100% {
    transform: translateY(-50%) rotate(360deg);
  }
}

/* Responsywność */
@media (max-width: 768px) {
  .calculator-form-container {
    padding: 0px;
  }
  .calculator-results-info-head {
    display: flex;
    flex-direction: column;
    gap: 1em;
    align-items: flex-start;
  }
  .aquarium-calculator-container {
    flex-direction: column;
  }

  .radio-group {
    flex-direction: column;
    gap: 10px;
  }

  .radio-group label {
    width: 100%;
  }

  .add-to-cart-button,
  .recalculate-button {
    margin-bottom: 10px;
    margin-right: 0;
  }

  .inputs-row {
    flex-direction: column;
  }
}

/* Stylowanie sekcji mieszania podłoży */
.substrate-selection h4 {
  margin-top: 0;
  margin-bottom: 15px;
  color: var(--dark-gray-calc);
  font-weight: 600;
  font-size: 1.2em;
}

.custom-ratio-inputs {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ratio-separator {
  font-size: 18px;
  font-weight: bold;
}

#substrate-section-2 {
  margin-bottom: 15px;
}

.mixed-substrate-results {
  margin-top: 30px;
  border-top: 1px solid var(--light-gray-calc);
  padding-top: 20px;
}

.mixed-substrate-results h5 {
  margin: 15px 0 10px;
  font-weight: 600;
  font-size: 16px;
  color: var(--dark-gray-calc);
}

.substrate-1-results,
.substrate-2-results {
  margin: 15px 0;
}

/* Responsywność */
@media (max-width: 480px) {
  .custom-ratio-inputs {
    flex-direction: row;
    align-items: center;
  }

  .input-number-wrapper {
    flex: 1;
  }
}