/* ===============================
   RamSchuttingen Calculator Styles
   =============================== */

   #ram-calculator {
    background: #17161a;
    border: 1px solid #a9937559;
    padding: 40px;
    border-radius: 16px;
    max-width: 700px;
    margin: 40px auto;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    font-family: "Inter", sans-serif;
    width: 755px;
    color: #fff;
    font-family: "League Spartan";
  }
  
  #ram-calculator .field-wrapper {
    margin-bottom: 24px;
  }
  
  #ram-calculator .field-wrapper h3 {
    font-size: 28px;
    margin: 0px 0 16px;
    font-weight: 500;
    text-transform: capitalize;
  }
  
  #ram-calculator button {
    font-size: 20px;
    font-weight: 500;
    margin-top: 31px;
    width: 100%;
    background: #a99375;
    color: #fff;
    border-radius: 8px;
    padding: 16px 0;
    border-color: #000;
  }
  
  button#ram-back-btn {
    margin: 0 0 20px;
  }
  
  .orientation-height-row {
    display: flex;
    gap: 20px; /* space between the two fields */
    align-items: center;
  }
  
  .orientation-height-row .field {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  h3.additional-info {
    font-size: 18px;
  }
  #ram-calculator label {
    display: block;
    font-weight: 500;
    margin-bottom: 9px;
    color: #fff;
    font-size: 22px;
  }
  

  /* Keep main variant dropdown full width */
#ram-door-options .field.full-width {
  flex: 1 1 100%;
}

/* Container layout */
#ram-door-options {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin: 10px 0 24px;
}

/* Default two per row layout */
#ram-door-options .field {
  flex: 1 1 calc(50% - 20px);
}

/* Make sure .variant-extra-fields content flows in 2 per row */
#variant-extra-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}

#variant-extra-fields .field {
  flex: 1 1 calc(50% - 20px);
}

/* Stack on small screens */
@media (max-width: 768px) {
  #ram-door-options .field,
  .variant-extra-fields .field {
    flex: 1 1 100%;
  }
}


  
  #ram-calculator-fields input[readonly],
  #ram-calculator-fields input[disabled] {
    background-color: #e8e8e8;
    color: #555;
    border: 1px solid #ddd;
    cursor: default;
  }

  #ram-calculator select,
  #ram-calculator input,
  #ram-calculator textarea {
    width: 100%;
    padding: 10px 16px;
    border: 1px solid #ccc;
    border-radius: 16px;
    font-size: 22px;
    transition: border-color 0.2s ease;
  }
  
  #ram-calculator input::placeholder,
  #ram-calculator textarea::placeholder {
    color: #919092;
  }
  select#ram-construction {
    opacity: 1;
    color: #000;
    background-image: none !important;
    cursor: default !important;
  }
  
  #ram-calculator select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-color: #fff;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="19" height="12" viewBox="0 0 19 12" fill="none"><path fill-rule="evenodd" clip-rule="evenodd" d="M0.433843 0.440908C0.704623 0.172139 1.06776 0.0252741 1.44344 0.032587C1.81913 0.0398999 2.17664 0.200793 2.4374 0.479908L9.44984 8.15901L16.4623 0.479908C16.5897 0.334936 16.7441 0.217834 16.9163 0.135543C17.0884 0.0532509 17.2748 0.00744363 17.4644 0.000834158C17.654 -0.00577531 17.843 0.0269473 18.0201 0.0970644C18.1972 0.167181 18.3589 0.273266 18.4956 0.409032C18.6322 0.544797 18.7411 0.70748 18.8157 0.887443C18.8903 1.06741 18.9291 1.26099 18.9299 1.45671C18.9306 1.65244 18.8933 1.84633 18.8201 2.0269C18.7469 2.20746 18.6392 2.37103 18.5036 2.50791L10.4705 11.2829C10.3383 11.4245 10.1797 11.537 10.0044 11.6139C9.82899 11.6908 9.64039 11.7305 9.44984 11.7305C9.25928 11.7305 9.07068 11.6908 8.89531 11.6139C8.71994 11.537 8.5614 11.4245 8.42916 11.2829L0.39604 2.50791C0.135521 2.22855 -0.00683587 1.85392 0.000252582 1.46634C0.00734104 1.07875 0.163295 0.709925 0.433843 0.440908Z" fill="%2317161A"/></svg>');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px;
    cursor: pointer;
  }
  
  .ram-costs-wrapper {
    background: #fff;
    color: #000;
    padding: 36px 18px;
    border-radius: 16px;
    font-size: 22px;
    font-weight: 400;
  }
  p.ram-costs {
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #e5e5e5;
    padding-bottom: 7px;
  }
  .ram-total-wrapepr {
    display: flex;
    justify-content: space-between;
  }
  div#ram-estimate-summary h3.main-label {
    font-weight: 500;
    margin: 0px 0 16px;
  }
  span.ram-tax-notice {
    color: #17161a8c;
    font-size: 14px;
    margin-left: 10px;
  }
  
  div#ram-quote-form h3 {
    margin: 0;
    font-size: 28px;
  }
  #ram-quote-form {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
  }
  
  #ram-quote-form .field {
    flex: 1 1 calc(50% - 20px); /* 2 per row */
    display: flex;
    flex-direction: column;
  }
  
  #ram-quote-form textarea {
    min-height: 80px;
  }
  
  #ram-quote-form h3,
  #ram-quote-form .field.additional,
  #ram-quote-form .ram-btn {
    flex: 1 1 100%; /* full width */
  }
  
  #ram-quote-form #ram-submit {
    margin: 0 auto;
  }
  
  #ram-status {
    margin-top: 15px;
    text-align: center;
    font-weight: 600;
  }
  
  #ram-status.success {
    color: #2e7d32;
  }
  
  #ram-status.error {
    color: #c62828;
  }
  
  /* Responsive */
  @media (max-width: 600px) {
    #ram-calculator {
      padding: 15px;
    }
  
    #ram-show-form,
    #ram-submit-btn {
      width: 100%;
    }
  }
  
  span.small-text {
    font-size: 17px;
}