/*
 * ORYL Photonics — Cost Estimator Widget Styles
 * ==============================================
 * File location in child theme:
 *   wp-content/themes/impreza-child/css/oryl-estimator.css
 *
 * Intentionally uses the Impreza theme's CSS custom properties
 * so colors, fonts, borders, and radii stay in sync with the site design.
 *
 * Theme vars consumed:
 *   Typography  : --font-family, --font-size, --line-height, --bold-font-weight
 *                 --h2-*, --h3-*, --h4-* (size, weight, letter-spacing)
 *   Colors      : --color-content-text, --color-content-heading,
 *                 --color-content-primary, --color-content-secondary,
 *                 --color-green-900, --color-content-link-hover,
 *                 --color-content-bg, --color-content-bg-alt,
 *                 --color-content-border, --color-green-500-10
 *   Inputs      : --inputs-border-color, --inputs-background, --inputs-text-color,
 *                 --inputs-font-size, --inputs-padding, --inputs-border-radius,
 *                 --inputs-focus-box-shadow
 *   Site        : --site-border-radius, --box-shadow
 */

/* ── Reset (scoped) ────────────────────────────────────────────────────── */
.oryl-estimator *,
.oryl-estimator *::before,
.oryl-estimator *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* ── Base ──────────────────────────────────────────────────────────────── */
.oryl-estimator {
  font-family:  var(--font-family);
  font-size:    var(--font-size);
  color:        var(--color-content-text);
  background:   var(--color-content-bg);
  line-height:  var(--line-height);
  width:        100%;
  padding:      48px 48px;
}

#oryl-estimator {
    /* Adjust the 60px to your desired top spacing */
    scroll-margin-top: 100px;
}

/* ── Wizard Steps ──────────────────────────────────────────────────────── */
.oryl-estimator .wizard-step {
  display: none;
}

.oryl-estimator .wizard-step.active {
  display: block;
  animation: oryl-slide-in 0.35s ease both;
}

@keyframes oryl-slide-in {
  from { opacity: 0; transform: translateX(24px); }
  to   { opacity: 1; transform: translateX(0); }
}

.oryl-estimator .tag {
  display:        inline-block;
  font-size:      0.68rem;
  font-weight:    var(--bold-font-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-content-secondary);
  margin-bottom:  10px;
}

.oryl-estimator .step-title {
  font-family:    var(--font-family);
  font-size:      var(--h2-font-size);
  font-weight:    var(--h2-font-weight);
  letter-spacing: var(--h2-letter-spacing);
  line-height:    var(--h2-line-height);
  color:          var(--color-content-heading);
  margin-bottom:  8px;
}

.oryl-estimator .step-subtitle {
  font-size:     0.9rem;
  color:         var(--color-content-text);
  margin-bottom: 32px;
  max-width:     600px;
  line-height:   var(--line-height);
  opacity:       0.75;
}

/* ── Step 1: Service Cards ─────────────────────────────────────────────── */
.oryl-estimator .service-cards {
  display:               grid;
  grid-template-columns: repeat(2, 1fr);
  gap:                   16px;
}

.oryl-estimator .service-card {
  border:          1.5px solid var(--color-content-border);
  background:      var(--color-content-bg);
  border-radius:   var(--site-border-radius);
  padding:         24px;
  cursor:          pointer;
  text-align:      left;
  font-family:     var(--font-family);
  display:         flex;
  flex-direction:  column;
  gap:             12px;
  transition:      border-color 0.2s, box-shadow 0.2s, transform 0.2s;
  width:           100%;
}

.oryl-estimator .service-card:hover {
  border-color: var(--color-content-secondary);
  box-shadow:   var(--box-shadow);
  transform:    translateY(-2px);
}

.oryl-estimator .service-card__icon {
  width:           40px;
  height:          40px;
  border-radius:   var(--site-border-radius);
  display:         flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
}

.oryl-estimator .service-card__icon svg {
  width:  28px;
  height: 28px;
  stroke: var(--color-content-secondary);
}

.oryl-estimator .service-card h4 {
  font-family:    var(--font-family);
  font-size:      var(--h4-font-size);
  font-weight:    var(--h4-font-weight);
  letter-spacing: var(--h4-letter-spacing);
  color:          var(--color-content-heading);
  line-height:    1.3;
}

.oryl-estimator .service-card p {
  font-size:   0.875rem;
  color:       var(--color-content-text);
  line-height: var(--line-height);
  opacity:     0.8;
  flex:        1;
}

/* Custom Experiment card variant */
.oryl-estimator .service-card--custom {
  border-style: dashed;
}

.oryl-estimator .service-card__custom-tag {
  display:        inline-block;
  font-size:      0.65rem;
  font-weight:    var(--bold-font-weight);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color:          var(--color-content-secondary);
  background:     var(--color-green-500-10);
  border:         1px solid var(--color-content-primary);
  border-radius:  var(--site-border-radius);
  padding:        2px 8px;
  margin-top:     4px;
  width:          fit-content;
}

/* Volume discount badge (shown by JS when a tier threshold is reached) */
.oryl-estimator .estimate-discount {
  display:       none;
  font-size:     0.72rem;
  font-weight:   var(--bold-font-weight);
  color:         var(--color-content-secondary);
  background:    var(--color-green-500-10);
  border:        1px solid var(--color-content-primary);
  border-radius: var(--site-border-radius);
  padding:       4px 10px;
  margin:    16px 0px;
  text-align:    center;
}

/* ── Step 2: Configure ─────────────────────────────────────────────────── */
.oryl-estimator .selected-badge {
  display:       inline-flex;
  align-items:   center;
  gap:           8px;
  padding:       6px 14px;
  background:    var(--color-green-500-10);
  border:        1px solid var(--color-content-primary);
  border-radius: var(--site-border-radius);
  font-size:     0.8rem;
  font-weight:   var(--bold-font-weight);
  color:         var(--color-content-secondary);
  margin-bottom: 28px;
}

.oryl-estimator .config-layout {
  display:               grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap:                   32px;
  align-items:           start;
}

/* ── Step 2: Experiment Description Column ─────────────────────────────── */
.oryl-estimator .config-description {
  border:        1px solid var(--color-content-border);
  border-radius: var(--site-border-radius);
  background:    var(--color-content-bg-alt);
  padding:       20px;
  position:      sticky;
  top:           24px;
}

.oryl-estimator .config-description__title {
  font-size:      0.7rem;
  font-weight:    var(--bold-font-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-content-secondary);
  margin-bottom:  12px;
}

.oryl-estimator .config-description p {
  font-size:   0.85rem;
  color:       var(--color-content-text);
  line-height: var(--line-height);
  opacity:     0.8;
}

.oryl-estimator .config-fields {
  display:        flex;
  flex-direction: column;
  gap:            28px;
}

.oryl-estimator .field-group {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  margin-bottom: 1rem;
}

.oryl-estimator .field-group label {
  font-size:   0.85rem;
  font-weight: var(--bold-font-weight);
  color:       var(--color-content-heading);
  display:     flex;
  justify-content: space-between;
  align-items: center;
}

.oryl-estimator .field-val {
  font-size:   1rem;
  font-weight: var(--bold-font-weight);
  color:       var(--color-content-secondary);
  min-width:   56px;
  text-align:  right;
}

.oryl-estimator .field-hint {
  font-size:   0.75rem;
  color:       var(--color-content-text);
  line-height: var(--line-height);
  opacity:     0.65;
}

/* ── Sliders ───────────────────────────────────────────────────────────── */
.oryl-estimator input[type="range"] {
  -webkit-appearance: none;
  appearance:         none;
  width:              100%;
  height:             4px;
  background:         linear-gradient(to right, var(--color-content-secondary) 0%, var(--color-content-border) 0%);
  outline:            none;
  border-radius:      2px;
  cursor:             pointer;
}

.oryl-estimator input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance:         none;
  width:              20px;
  height:             20px;
  border-radius:      50%;
  background:         var(--color-content-secondary);
  cursor:             pointer;
  border:             3px solid var(--color-content-bg);
  box-shadow:         0 1px 6px rgba(0, 0, 0, 0.25);
}

.oryl-estimator input[type="range"]::-moz-range-thumb {
  width:        20px;
  height:       20px;
  border-radius: 50%;
  background:   var(--color-content-secondary);
  cursor:       pointer;
  border:       3px solid var(--color-content-bg);
  box-shadow:   0 1px 6px rgba(0, 0, 0, 0.25);
}

/* ── Estimate Panel ────────────────────────────────────────────────────── */
.oryl-estimator .estimate-panel {
  border:        2px solid var(--color-content-primary);
  border-radius: var(--site-border-radius);
  padding:       24px;
  background:    rgba(185,227,54,0.04);
  position:      sticky;
  top:           110px;
}

.oryl-estimator .estimate-panel__title {
  font-size:      0.7rem;
  font-weight:    var(--bold-font-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-content-secondary);
  margin-bottom:  16px;
}

.oryl-estimator .estimate-price {
  display:       flex;
  align-items:   baseline;
  gap:           4px;
  margin-bottom: 6px;
}

.oryl-estimator .estimate-price .currency {
  font-size:   0.9rem;
  font-weight: var(--bold-font-weight);
  color:       var(--color-content-secondary);
  line-height: 1;
}

.oryl-estimator .estimate-price .amount {
  font-size:   2.2rem;
  font-weight: 300;
  color:       var(--color-content-secondary);
  line-height: 1;
  transition:  all 0.3s ease;
}

.oryl-estimator .estimate-note {
  font-size:     0.73rem;
  color:         var(--color-content-text);
  line-height:   var(--line-height);
  margin-bottom: 20px;
  opacity:       0.65;
}

.oryl-estimator .estimate-details {
  display:        flex;
  flex-direction: column;
  gap:            10px;
  padding-top:    16px;
  border-top:     1px solid var(--color-content-border);
}

.oryl-estimator .detail-row {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  font-size:       0.8rem;
  gap:             8px;
}

.oryl-estimator .detail-row .detail-label {
  color:      var(--color-content-text);
  opacity:    0.7;
  flex-shrink: 0;
}

.oryl-estimator .detail-row .detail-value {
  font-weight: var(--bold-font-weight);
  text-align:  right;
  color:       var(--color-content-heading);
}

.oryl-estimator .detail-footnote {
  font-size:   0.68rem;
  color:       var(--color-content-text);
  font-style:  italic;
  line-height: var(--line-height);
  opacity:     0.6;
}

/* ── Step 3: Quote Form ────────────────────────────────────────────────── */
.oryl-estimator .quote-layout {
  display:               grid;
  grid-template-columns: 1fr 260px;
  gap:                   32px;
  align-items:           start;
}

.oryl-estimator .form-grid {
  display:               grid;
  grid-template-columns: 1fr 1fr;
  gap:                   20px 16px;  /* row-gap 20px matches Impreza field spacing */
}

.oryl-estimator .form-group {
  display:        flex;
  flex-direction: column;
  gap:            8px;   /* matches Impreza layout_ver label-to-field spacing */
}

.oryl-estimator .form-group.full {
  grid-column: 1 / -1;
}

.oryl-estimator .form-group label {
  font-size:   var(--font-size);        /* 16px — matches request-demo labels */
  font-weight: var(--font-weight);      /* 400 — site labels are regular weight */
  color:       var(--color-content-heading);
}

.oryl-estimator .req {
  color: var(--color-content-secondary);
}

/* ── Text inputs — match Impreza's us-field-style_1 ─────────────────────
   The site uses fixed height + horizontal padding only (not all-sides padding).
   Computed from request-demo: height 41px, padding 0 14px, border 1px #EEEEEE
   ──────────────────────────────────────────────────────────────────────── */
.oryl-estimator .form-group input[type="text"],
.oryl-estimator .form-group input[type="email"],
.oryl-estimator .form-group input[type="tel"],
.oryl-estimator .form-group input[type="number"] {
  font-family:   var(--inputs-font-family);
  font-size:     var(--inputs-font-size);
  font-weight:   var(--inputs-font-weight, 400);
  height:        var(--inputs-height);          /* 39px — Impreza sets height, not padding */
  padding:       0 var(--inputs-padding);       /* horizontal only; height handles vertical */
  border:        var(--inputs-border-width) solid var(--inputs-border-color);
  border-radius: var(--inputs-border-radius);
  color:         var(--inputs-text-color);
  background:    var(--inputs-background);
  box-shadow:    var(--inputs-box-shadow);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  width:         100%;
}

/* ── Textarea — full padding on all sides since height is variable ──────── */
.oryl-estimator .form-group textarea {
  font-family:   var(--inputs-font-family);
  font-size:     var(--inputs-font-size);
  font-weight:   var(--inputs-font-weight, 400);
  padding:       var(--inputs-padding);
  border:        var(--inputs-border-width) solid var(--inputs-border-color);
  border-radius: var(--inputs-border-radius);
  color:         var(--inputs-text-color);
  background:    var(--inputs-background);
  box-shadow:    var(--inputs-box-shadow);
  outline:       none;
  transition:    border-color 0.2s, box-shadow 0.2s;
  width:         100%;
  resize:        vertical;
  min-height:    90px;
}

.oryl-estimator .form-group input:focus,
.oryl-estimator .form-group textarea:focus {
  background:   var(--inputs-focus-background);
  border-color: var(--inputs-focus-border-color);
  color:        var(--inputs-focus-text-color);
  box-shadow:   var(--inputs-focus-box-shadow); /* green ring: 0 0 0 1px #7faa09 */
}

.oryl-estimator .privacy-row {
  grid-column:  1 / -1;
  display:      flex;
  align-items:  flex-start;
  gap:          10px;
  font-size:    16px;
  color:        var(--color-content-text);
  line-height:  var(--line-height);
  margin-top:   4px;
  opacity:      0.8;
}

.oryl-estimator .privacy-row input[type="checkbox"] {
  margin-top:   2px;
  flex-shrink:  0;
  accent-color: var(--color-content-secondary);
  width:        var(--inputs-checkbox-size, 15px);
  height:       var(--inputs-checkbox-size, 15px);
  cursor:       pointer;
}

.oryl-estimator .privacy-row a {
  color:           var(--color-content-link);
  text-decoration: underline;
}

.oryl-estimator .privacy-row a:hover {
  color: var(--color-content-link-hover);
}

/* ── Summary Sidebar ───────────────────────────────────────────────────── */
.oryl-estimator .summary-panel {
  border:        1px solid var(--color-content-border);
  border-radius: var(--site-border-radius);
  background:    var(--color-content-bg-alt);
  padding:       20px;
}

.oryl-estimator .summary-panel__title {
  font-size:      0.7rem;
  font-weight:    var(--bold-font-weight);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color:          var(--color-content-secondary);
  margin-bottom:  16px;
}

.oryl-estimator .summary-rows {
  display:        flex;
  flex-direction: column;
  gap:            10px;
}

.oryl-estimator .summary-row {
  display:         flex;
  justify-content: space-between;
  align-items:     flex-start;
  font-size:       0.8rem;
  gap:             8px;
}

.oryl-estimator .summary-row .s-label {
  color:       var(--color-content-text);
  opacity:     0.7;
  flex-shrink: 0;
}

.oryl-estimator .summary-row .s-value {
  font-weight: var(--bold-font-weight);
  text-align:  right;
  color:       var(--color-content-heading);
}

.oryl-estimator .summary-total {
  display:         flex;
  justify-content: space-between;
  align-items:     center;
  margin-top:      16px;
  padding-top:     14px;
  border-top:      2px solid var(--color-content-primary);
}

.oryl-estimator .summary-total .st-label {
  font-size:   0.85rem;
  font-weight: var(--bold-font-weight);
  color:       var(--color-content-heading);
}

.oryl-estimator .summary-total .st-val {
  font-size:   1.1rem;
  font-weight: var(--bold-font-weight);
  color:       var(--color-content-secondary);
}

.oryl-estimator .summary-disclaimer {
  font-size:   0.7rem;
  color:       var(--color-content-text);
  margin-top:  10px;
  line-height: var(--line-height);
  font-style:  italic;
  opacity:     0.6;
}

/* ── Buttons ───────────────────────────────────────────────────────────── */
.oryl-estimator .btn-row {
  display:         flex;
  align-items:     center;
  justify-content: space-between;
  margin-top:      36px;
  gap:             12px;
}

.oryl-estimator .btn {
  display:        inline-flex;
  align-items:    center;
  gap:            8px;
  padding:        10.8px 25.2px;
  font-family:    var(--font-family);
  font-size:      var(--inputs-font-size);
  font-weight:    var(--bold-font-weight);
  letter-spacing: var(--letter-spacing);
  text-transform: var(--text-transform);
  border-radius:  var(--site-border-radius);
  cursor:         pointer;
  border:         none;
  transition:     background 0.2s, color 0.2s, opacity 0.2s;
  line-height:    1;
  text-decoration: none;
}

.oryl-estimator .btn svg {
  width:  15px;
  height: 15px;
}

/* Primary: matches the site's .w-btn primary — green-500 bg, dark text */
.oryl-estimator .btn--primary {
  background: var(--color-content-primary);
  color:      var(--color-content-heading);
}

.oryl-estimator .btn--primary:hover {
  background:      var(--color-content-secondary);
  color:           #fff;
  text-decoration: none;
}

.oryl-estimator .btn--primary:disabled {
  background: var(--color-content-border);
  color:      var(--color-content-text);
  cursor:     not-allowed;
  opacity:    0.6;
}

/* Ghost: outlined, inherits theme border color */
.oryl-estimator .btn--ghost {
  background:   transparent;
  border:       1px solid var(--color-content-border);
  color:        var(--color-content-text);
  padding:      calc(10.8px - 1px) 25.2px;
}

.oryl-estimator .btn--ghost:hover {
  border-color:    var(--color-content-heading);
  color:           var(--color-content-heading);
  text-decoration: none;
}

/* ── Success State ─────────────────────────────────────────────────────── */
.oryl-estimator .success-state {
  text-align: center;
  padding:    64px 24px;
}

.oryl-estimator .success-icon {
  width:           68px;
  height:          68px;
  background:      var(--color-content-primary);
  border-radius:   50%;
  display:         flex;
  align-items:     center;
  justify-content: center;
  margin:          0 auto 24px;
}

.oryl-estimator .success-icon svg {
  width:  30px;
  height: 30px;
  stroke: var(--color-content-heading);
}

.oryl-estimator .success-state h3 {
  font-family:    var(--font-family);
  font-size:      var(--h3-font-size);
  font-weight:    var(--h3-font-weight);
  color:          var(--color-content-heading);
  margin-bottom:  12px;
}

.oryl-estimator .success-state p {
  font-size:     0.9rem;
  color:         var(--color-content-text);
  max-width:     460px;
  margin:        0 auto 28px;
  line-height:   var(--line-height);
  opacity:       0.75;
}

.oryl-estimator .success-state .restart-link {
  font-size:   0.82rem;
  color:       var(--color-content-link);
  text-decoration: underline;
  cursor:      pointer;
  background:  none;
  border:      none;
  font-family: var(--font-family);
}

.oryl-estimator .success-state .restart-link:hover {
  color: var(--color-content-link-hover);
}

/* ── Responsive ────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  .oryl-estimator {
    padding: 32px 16px;
  }

  .oryl-estimator .service-cards {
    grid-template-columns: 1fr;
  }

  .oryl-estimator .config-layout,
  .oryl-estimator .quote-layout {
    grid-template-columns: 1fr;
  }

  .oryl-estimator .estimate-panel {
    position: static;
    order:    -1;
  }

  .oryl-estimator .form-grid {
    grid-template-columns: 1fr;
  }
}