/* =====================================================================
   CALCOLATORE O-Ring — shortcode [ocean_calculator]
   Stili estratti dall'originale (Next.js styled-jsx), scoped a .ocean-calculator
   ===================================================================== */

.ocean-calculator { color: #0d47a1; }
.ocean-calculator .calculator--content { text-align: justify; }

/* ------------------------------ form base ------------------------------ */
.ocean-calculator input,
.ocean-calculator select {
  display: block;
  width: 100%;
  height: 3.75rem;
  background: transparent;
  padding: 0 .3125rem 0 calc(33.3333333% + 30px);
  font-size: .75rem;
  line-height: 1.5em;
  font-weight: 500;
  border: none;
  border-bottom: .0625rem solid #0d47a1;
  border-radius: 0 !important;
  color: #0d47a1;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  transition-property: all;
  transition-duration: .5s;
  transition-timing-function: cubic-bezier(.77, 0, .175, 1);
}
.ocean-calculator input::placeholder,
.ocean-calculator select::placeholder { color: rgba(13, 71, 161, .5); }
.ocean-calculator input:active,
.ocean-calculator input:focus,
.ocean-calculator input:hover,
.ocean-calculator select:active,
.ocean-calculator select:focus,
.ocean-calculator select:hover { color: #0d47a1; background: rgba(99, 101, 105, .1); outline: none; }
.ocean-calculator select option { color: #0d47a1; }

.ocean-calculator .fake--label {
  padding-left: .125rem;
  position: absolute;
  bottom: 1.40625rem;
  color: #0d47a1;
  pointer-events: none;
}

.ocean-calculator .calculator-field,
.ocean-calculator .result-field { position: relative; width: 100%; }

/* ------------------------------ risultati ------------------------------ */
.ocean-calculator .result--label,
.ocean-calculator .result--result {
  height: 1.875rem;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  white-space: nowrap;
}
.ocean-calculator .result--label {
  background: #0d47a1;
  color: #fff;
  padding-left: .3125rem;
  padding-right: .3125rem;
}
.ocean-calculator .result--wrapper {
  position: relative;
  border-bottom: .0625rem solid #0d47a1;
}

/* offset colonna sinistra (label) */
.ocean-calculator .result--result { padding-left: calc(41.66666667% + 5px); }
@media (min-width: 992px) { .ocean-calculator .result--result { padding-left: calc(33.3333333% + 30px); } }
@media (min-width: 768px) { .ocean-calculator .result--result { padding-left: 0; } }

.ocean-calculator .calc-type--e { width: calc(41.66666667% + 70px); }
@media (min-width: 576px) { .ocean-calculator .calc-type--e { width: calc(41.66666667% + 150px); } }
@media (min-width: 992px) { .ocean-calculator .calc-type--e { width: calc(41.66666667% + 70px); } }

.ocean-calculator .has-value { color: #0d47a1; }

/* immagine */
.ocean-calculator .single-content--image {
  position: relative;
  width: 100%;
  overflow: hidden;
  aspect-ratio: 5 / 4;
}
.ocean-calculator .single-content--image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
@media (min-width: 768px) { .ocean-calculator .single-content--image { margin: 0 auto; } }
@media (max-width: 991.98px) {
  .ocean-calculator .calculator-image--column .single-content--image { margin-right: auto; margin-left: auto; }
}

/* visibilità condizionale dei campi (gestita dal JS via CSS) */
.ocean-calculator [data-calc-field] { display: none; }
.ocean-calculator[data-type="L"] [data-calc-field-for="L"],
.ocean-calculator[data-type="*"] [data-calc-field-for="L"],
.ocean-calculator[data-type="D"] [data-calc-field-for="D"],
.ocean-calculator[data-type="T"] [data-calc-field-for="T"],
.ocean-calculator[data-type="L"] [data-calc-field-for="LD"],
.ocean-calculator[data-type="*"] [data-calc-field-for="LD"],
.ocean-calculator[data-type="D"] [data-calc-field-for="LD"] { display: block; }
.ocean-calculator[data-type="E"][data-unit="mm"] [data-calc-field-for="E-mm"],
.ocean-calculator[data-type="E"][data-unit="in"] [data-calc-field-for="E-in"] { display: block; }

.ocean-calculator [data-calc-results] { display: none; }
.ocean-calculator[data-type="L"] [data-calc-results="LD"],
.ocean-calculator[data-type="*"] [data-calc-results="LD"],
.ocean-calculator[data-type="D"] [data-calc-results="LD"] { display: block; }
.ocean-calculator[data-type="E"] [data-calc-results="ET"],
.ocean-calculator[data-type="T"] [data-calc-results="ET"] { display: block; }

.ocean-calculator .page--box-calculator-unit.in { display: none; }
.ocean-calculator[data-unit="in"] .page--box-calculator-unit.mm { display: none; }
.ocean-calculator[data-unit="in"] .page--box-calculator-unit.in { display: inline; }