/*
Theme Name: OceanWP Child
Theme URI: https://oceanwp.org/
Template: oceanwp
Author: OceanWP
Author URI: https://oceanwp.org/about-oceanwp/
Description: OceanWP is the perfect theme for your project. Lightweight and highly extendable, it will enable you to create almost any type of website such a blog, portfolio, business website and WooCommerce storefront with a beautiful & professional design. Very fast, responsive, RTL & translation ready, best SEO practices, unique WooCommerce features to increase conversion and much more. You can even edit the settings on tablet & mobile so your site looks good on every device. Work with the most popular page builders as Elementor, Beaver Builder, Brizy, Visual Composer, Divi, SiteOrigin, etc... Developers will love his extensible codebase making it a joy to customize and extend. Best friend of Elementor & WooCommerce. Looking for a Multi-Purpose theme? Look no further! Check the demos to realize that it's the only theme you will ever need: https://oceanwp.org/demos/
Tags: two-columns,right-sidebar,footer-widgets,blog,news,custom-background,custom-menu,post-formats,rtl-language-support,sticky-post,editor-style,threaded-comments,translation-ready,buddypress,custom-colors,featured-images,full-width-template,theme-options,e-commerce,block-styles,wide-blocks,accessibility-ready
Version: 4.1.5.1783208495
Updated: 2026-07-04 23:41:35

*/


/* CRS Calculator - OceanWP Clean Layout */

/* CRS Calculator - Force Correct OceanWP Layout */

#crsCalculator {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 !important;
  outline: none !important;
}

/* Targets the inner wrapper inside the form */
#crsCalculator > div,
#crsCalculator .crs-calculator-grid {
  width: 100% !important;
  max-width: 760px !important;
  margin: 0 auto !important;
  padding: 0 !important;
}

/* Targets the row that holds Roof Type, Square Footage, and Submit */
#crsCalculator > div > div,
#crsCalculator .crs-calculator-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  column-gap: 28px !important;
  align-items: end !important;
  width: 100% !important;
}

/* Targets each field column */
#crsCalculator > div > div > div,
#crsCalculator .crs-calculator-field {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  float: none !important;
  display: block !important;
}

#crsCalculator label {
  display: block !important;
  margin: 0 0 8px 0 !important;
  padding: 0 !important;
  text-align: center !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  font-weight: 700 !important;
  color: #222222 !important;
}

/* Roof Type and Square Footage fields */
#selectCRSType,
#crsSqFootage {
  display: block !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  height: 46px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  border: 1px solid #cccccc !important;
  border-radius: 3px !important;
  background-color: #ffffff !important;
  color: #000000 !important;
  font-size: 16px !important;
  line-height: 1.3 !important;
  box-sizing: border-box !important;
}

/* Square Footage input specifically */
#crsSqFootage {
  text-align: right !important;
  appearance: auto !important;
  -webkit-appearance: auto !important;
  -moz-appearance: textfield !important;
}

#crsSqFootage::placeholder {
  color: #000000 !important;
  opacity: 1 !important;
}

/* Submit button */
#crsSubmit {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  height: 46px !important;
  padding: 8px 20px !important;
  margin: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  background-color: #1479b8 !important;
  color: #ffffff !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  box-sizing: border-box !important;
}

#crsSubmit:hover {
  background-color: #0f6498 !important;
}

/* Mobile stacking */
@media (max-width: 767px) {
  #crsCalculator > div > div,
  #crsCalculator .crs-calculator-grid {
    grid-template-columns: 1fr !important;
    row-gap: 18px !important;
  }

  #crsCalculator label {
    text-align: left !important;
  }

  #selectCRSType,
  #crsSqFootage,
  #crsSubmit {
    width: 100% !important;
  }
}
/* Fine-tune CRS Calculator fields */

.crs-calculator-field {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-end !important;
}

/* Center labels above fields */
.crs-calculator-field label {
    text-align: center !important;
    width: 100% !important;
}

/* Roof Type dropdown width */
#selectCRSType {
    width: 220px !important;
    max-width: 220px !important;
}

/* Square Footage input width */
#crsSqFootage {
    width: 160px !important;
    min-width: 160px !important;
    max-width: 160px !important;
    text-align: center !important;
    color: #000000 !important;
    font-size: 16px !important;
}

/* Square Footage placeholder */
#crsSqFootage::placeholder {
    color: #000000 !important;
    opacity: 1 !important;
}

/* Submit button */
#crsSubmit {
    width: 220px !important;
    max-width: 220px !important;
    font-size: 17px !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
}

/* =========================================================
   CRS CALCULATOR RESULTS LAYOUT
   Add this at the very end of the child theme style.css file.
   ========================================================= */

/* Allow enough room for 2- and 3-column product results. */
.crs-calculator-wrap,
.crs-calculator-box {
    width: 100% !important;
    max-width: 1200px !important;
}

/* Keep the calculator controls at their existing comfortable width. */
#crsCalculator {
    max-width: 760px !important;
}

#crsResult {
    width: 100% !important;
    margin: 40px auto 0 !important;
    padding: 0 !important;
    text-align: center !important;
}

.crs-results-grid {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 28px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    align-items: stretch !important;
}

.crs-product-card {
    display: flex !important;
    flex-direction: column !important;
    min-width: 0 !important;
    overflow: hidden !important;
    background: #ffffff !important;
    border: 1px solid #d9e0e5 !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08) !important;
    text-align: center !important;
}

.crs-product-card-heading {
    padding: 14px 16px !important;
    background: #f2f5f7 !important;
    border-bottom: 1px solid #d9e0e5 !important;
    color: #222222 !important;
    font-size: 15px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.crs-product-image-wrap {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-height: 300px !important;
    padding: 24px 20px 14px !important;
    background: #ffffff !important;
    text-align: center !important;
}

.crs-product-image {
    display: block !important;
    width: auto !important;
    max-width: 100% !important;
    height: 270px !important;
    max-height: 270px !important;
    margin: 0 auto !important;
    object-fit: contain !important;
}

.crs-product-details {
    flex: 1 1 auto !important;
    padding: 20px 20px 24px !important;
    border-top: 1px solid #edf0f2 !important;
    background: #ffffff !important;
    color: #222222 !important;
    text-align: center !important;
}

.crs-product-name {
    margin: 0 0 12px !important;
    color: #1d1d1d !important;
    font-size: 19px !important;
    line-height: 1.3 !important;
    font-weight: 700 !important;
    text-align: center !important;
    text-transform: uppercase !important;
}

.crs-product-meta {
    margin: 7px 0 0 !important;
    color: #333333 !important;
    font-size: 15px !important;
    line-height: 1.5 !important;
    text-align: center !important;
}

.crs-recommended-units {
    color: #b3261e !important;
    font-weight: 700 !important;
}

.crs-result-message {
    padding: 18px 20px !important;
    border: 1px solid #d9e0e5 !important;
    border-radius: 5px !important;
    background: #f7f9fa !important;
    color: #333333 !important;
    font-size: 16px !important;
    text-align: center !important;
}

/* Two columns on tablets and smaller desktop screens. */
@media (max-width: 1024px) {
    .crs-results-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }
}

/* One column on phones. */
@media (max-width: 640px) {
    .crs-results-grid {
        grid-template-columns: 1fr !important;
        gap: 22px !important;
    }

    .crs-product-image-wrap {
        min-height: 260px !important;
    }

    .crs-product-image {
        height: 235px !important;
        max-height: 235px !important;
    }
}