/*
Theme Name: OceanWP Child Theme
Theme URI: https://oceanwp.org/
Description: OceanWP WordPress theme. Sample child theme.
Author: OceanWP
Author URI: https://oceanwp.org/
Template: oceanwp
Version: 1.0
*/

/* Parent stylesheet should be loaded from functions.php not using @import */

body {
	overflow: hidden;
}

/* -------------------------------- */
/* ---------- Counter Number ---------- */
/* -------------------------------- */
.defhero-counter .elementor-counter-number-wrapper {
    display: block !important;
}
.woocommerce-SavedPaymentMethods {
    display: none !important;
}


/* -------------------------------- */
/* ---------- Checkout ---------- */
/* -------------------------------- */
.woocommerce-checkout .custom_checkout_billing {
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
}

/* -------------------------------------------- */
/* ---------- DEF Gallons Calculator --------- */
/* -------------------------------------------- */

/* Main Container - Now Full Width */
.def-gallons-calculator {
    width: 100% !important; /* Full width */
    max-width: 100%; /* Ensures it takes the full viewport width */
    margin: 20px 0; /* Adjusted margin */
    font-family: Arial, sans-serif;
    line-height: 50px;
}

/* Align slider input and value on one line */
.def-gallons-calculator .slider-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%; /* Ensures it spans full width */
    justify-content: space-between; /* Center align elements */
}

/* ---- Styled Range Slider ---- */
.def-gallons-calculator input[type="range"] {
    -webkit-appearance: none;
    appearance: none;
    width: 70% !important; /* Ensures slider takes 70% of container */
    height: 12px; /* Thicker track */
    border-radius: 6px;
    outline: none;
    transition: background 0.3s ease-in-out;
    
    /* Dynamic background */
    background: linear-gradient(to right, #1eae98 0%, #ddd 0%);
}

/* Dynamically update the track fill */
.def-gallons-calculator input[type="range"]::-webkit-slider-runnable-track {
    height: 12px;
    border-radius: 6px;
}

/* Larger Circular Thumb */
.def-gallons-calculator input[type="range"]::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 28px; /* Bigger */
    height: 28px; /* Bigger */
    background: #1eae98;
    border: 4px solid rgba(30, 174, 152, 0.3); /* Soft border */
    border-radius: 50%;
    cursor: pointer;
    transition: transform 0.2s ease-in-out, background 0.3s ease-in-out;
    margin-top: -10px;
}

/* On hover */
.def-gallons-calculator input[type="range"]::-webkit-slider-thumb:hover {
    background: #0f8f77;
    transform: scale(1.1);
}

/* Firefox Track */
.def-gallons-calculator input[type="range"]::-moz-range-track {
    background: #ddd;
    height: 12px;
}

/* Firefox Progress */
.def-gallons-calculator input[type="range"]::-moz-range-progress {
    background: #1eae98;
    height: 12px;
}

/* ---------------------------- */
/* ---- Progress Bar Styling --- */
/* ---------------------------- */

.def-gallons-calculator .progress-container {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%; /* Ensures full width */
    justify-content: space-between; /* Center align elements */
}

/* Adjusted progress bar width */
.def-gallons-calculator .progress-bar {
    width: 70% !important;  /* Ensures 70% width */
    max-width: 70%;
    height: 12px;
    background: #ddd;
    border-radius: 6px;
    overflow: hidden;
    min-width: 150px; /* Ensures it does not shrink to nothing */
    flex-shrink: 0; /* Prevent shrinking */
}

/* Ensure the progress fill does not exceed 100% */
.def-gallons-calculator #progress-bar-fill {
    height: 100%;
    width: 3%;  /* Ensures initial fill matches 25,000 */
    background: #1eae98;
    transition: width 0.3s ease-in-out;
}

/* ---------------------------- */
/* ---- General Styling ---- */
/* ---------------------------- */

.def-gallons-calculator .sales-boxes {
    display: flex;
    gap: 100px;
}

.def-gallons-calculator .sales-boxes h3 {
    font-family: inherit;
    font-weight: bold;
    color: #1eae98;
}

.def-gallons-calculator span#def-gallons-value,
.def-gallons-calculator span#monthly-gallons {
    font-family: inherit;
    font-size: 18px;
    font-weight: bold;
    color: #1eae98;
}

.single-product div.product form.cart {
    border: none !important;
    padding: 0px !important;
}


/* ---------------------------- */
/* ---- Responsive Fixes ---- */
/* ---------------------------- */

@media (max-width: 768px) {
    .def-gallons-calculator .slider-container {
        flex-direction: column;
        align-items: stretch;
    }

    .def-gallons-calculator .progress-container {
        flex-direction: column; /* Stack elements vertically */
        align-items: stretch;
    }

    .def-gallons-calculator .progress-bar {
        min-width: 100%; /* Ensures it stretches fully */
    }
}

/* -------------------------------- */
/* ---------- WC Rating ---------- */
/* -------------------------------- */

.woocommerce-product-rating .def_display_rating {
    font-weight: bold; margin-left: 5px; font-size: 14px;
}
.woocommerce-product-rating .def_based_on_x {
    font-size: 14px; color: #666;
}
.woocommerce-product-rating .def_review_count {
    font-weight: bold;font-size: 14px; 
}

/* -------------------------------- */
/* ---------- Single Product ---------- */
/* -------------------------------- */
.tote_gallery_imgs .woocommerce-product-gallery__wrapper{
    padding:0 15px;
}



/* -------------------------------- */
/* ---------- VT Steps ---------- */
/* -------------------------------- */
.vt-step{
  --size:72px;
  --from:#005BAC;
  --to:#1EAE98;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:var(--size);
  height:var(--size);
  border-radius:50%;
  background:linear-gradient(135deg,var(--from),var(--to));
  color:#fff;
  font:700 24px/1 "Inter",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  box-shadow:0 14px 30px rgba(16,24,40,.18),0 4px 10px rgba(16,24,40,.12);
}
.vt-step.small{--size:56px;font-size:20px;}
.vt-step.large{--size:96px;font-size:30px;}