/*

Theme Name: Petzorg Child

Description: Child Theme for petzorg Theme

Author: zozothemes

Version: 1.0

Template: petzorg

Tags: one-column, two-columns, right-sidebar, flexible-header, custom-colors, custom-header, custom-menu, custom-logo, editor-style, featured-images, footer-widgets, post-formats, rtl-language-support, sticky-post, theme-options, threaded-comments, translation-ready

Text Domain: zozothemes

*/



/*Custom Style Code Right Here */



/* ----- Generic navigation tabs ----- */
.main-container .rte .tabs-container{margin-top:10px;display:flex;gap:30px;justify-content:center}
.main-container .rte .calculator-nav{padding:10px 20px;background:#5BB347;color:#fff;border-radius:4px;font-weight:700;cursor:pointer}
.main-container .rte .calculator-nav.locked{opacity:.35;pointer-events:none;cursor:not-allowed}
.main-container .rte .calculator-nav-active{box-shadow:0 0 0 3px #113959 inset}

/* animations */
@keyframes fadeInRight1 {
    0%   {opacity:0;transform:translateX(40px)}
    100% {opacity:1;transform:translateX(0)}
}
@keyframes fadeInLeft1  {
    0%   {opacity:0;transform:translateX(-40px)}
    100% {opacity:1;transform:translateX(0)}
}

.fadeInRight1 {animation:fadeInRight1 .6s ease-out both}
.fadeInLeft1  {animation:fadeInLeft1  .6s ease-out both}

/* ----- Wizard buttons (prev / next) ----- */
 .wizard-btn{background:#5BB347;color:#fff;border:none;padding:8px 22px;border-radius:4px;font-weight:600;cursor:pointer}
 .wizard-btn.locked[disabled]{opacity:.35;cursor:not-allowed}

/* ----- Step-1 (height choices) ----- */
/* ----- Step-1 (height choices) ----- */
.main-container .rte .step-1-boxes {
    display: grid;
    grid-template-columns: repeat(4, 1fr); /* 4 columns */
    gap: 30px;
    justify-content: center;
}

.main-container .rte .step-1-boxes img.four-foot {
    width: 100%;               /* full width of container */
    height: auto;              /* maintain aspect ratio */
    max-height: 300px;         /* optional: limit height */
    object-fit: contain;       /* show full image */
}
.foot_tall_fence_btn, .image-box {
    box-sizing: border-box;
    text-align:center;
}
.choose_height_btn{margin:15px 0;}
.main-container .rte .choose_height_btn{    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: var(--e-global-color-primary);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-primary);
    border-radius: 30px 30px 30px 30px;
    padding: 8px 10px 7px 25px;
    font-size: 16px;
    font-weight: 700;
    line-height: 34px;}

.wizard-btn{    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: var(--e-global-color-primary);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-primary);
    border-radius: 30px 30px 30px 30px;
    padding: 8px 10px 7px 25px;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;}
.choose_spicy_pro{margin:15px 0;}
.main-container .rte .choose_spicy_pro{
fill: #FFFFFF;
    color: #FFFFFF;
    background-color: var(--e-global-color-primary);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-primary);
    border-radius: 30px 30px 30px 30px;
    padding: 8px 10px 7px 25px;
    font-size: 16px;
    font-weight: 700;
    line-height: 34px;
}


/* ----- Step-2 (slider) ----- */
.main-container .rte .slider-wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;max-width:600px;margin:30px auto}
.main-container .rte .min-label,.max-label{font-weight:600;white-space:nowrap;color:#333; margin-top:20px}
.main-container .rte .range-track{position:relative;flex:1;height:8px}
.main-container .rte #feetSlider{-webkit-appearance:none;width:100%;height:8px !important; min-height:8px !important; border-radius:4px;background:#d3d3d3;outline:none}
.main-container .rte #feetSlider::-webkit-slider-runnable-track{
	background:linear-gradient(to right,#5BB347 0%,#5BB347 var(--pct,0%),#d3d3d3 var(--pct,0%),#d3d3d3 100%);
	border-radius:4px;height:8px
}
.main-container .rte #feetSlider::-moz-range-track{background:#d3d3d3;height:8px;border-radius:4px}
.main-container .rte #feetSlider::-webkit-slider-thumb{-webkit-appearance:none;width:20px;height:20px;border-radius:50%;background:#5BB347;cursor:pointer;margin-top:-6px}
.main-container .rte #feetSlider::-moz-range-thumb{width:20px;height:20px;border:none;border-radius:50%;background:#5BB347;cursor:pointer}
.main-container .rte #sliderBubble{
	position:absolute;top:-36px;left:0;transform:translateX(-50%);
	padding:4px 10px;border-radius:4px;background:#5BB347;color:#fff;font-weight:600;font-size:14px;white-space:nowrap;pointer-events:none
}
.main-container .rte #sliderBubble::after{
	content:"";position:absolute;bottom:-4px;left:50%;transform:translateX(-50%);
	border:4px solid transparent;border-top-color:#5BB347
}

.main-container .rte .pricing_div{
    text-align: center !important;
}

.child-products-row {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    flex-wrap: nowrap;
}

.child-product-card {
    flex: 1 1 calc(33.333% - 20px);
      text-align: center;
 
    box-sizing: border-box;
     font-size: 14px;   /* smaller font */

 background-color: #FBF9F3;
  border-radius: 25px;
  padding: 20px;
  box-shadow: inset 0 0 0 1px #e5e3dc, inset 0 0 0 22px #FBF9F3;
}

.child-product-card img {
    width: 100%;
     object-fit: contain;
    margin-bottom: 8px;
}

.buttons-div{
    text-align: center;
    display: flex;
    gap: 30px;
    justify-content: center;
    margin: 60px;
}

.myself_install_button{
    padding: 10px;
    border-radius: 10px;
}

.spicy-pro-card {
    max-width: 500px;
    margin: 20px auto;
    padding: 20px;
    border: 1px solid #eee;
    border-radius: 12px;
    text-align: center;
    background: #fff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
display: inline-flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 10px !important;
    background-color: var(--e-global-color-accent);
 }
.spicy-pro-image {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
}
.spicy-pro-title {
    margin: 15px 0 5px;
    font-size: 1.2em;
    font-weight: bold;
}
.spicy-pro-price {
    font-size: 1.1em;
    color: #27ae60;
    margin-bottom: 15px;
}
.spicy-pro-btn {
    display: inline-block;
    padding: 10px 20px ;
    background-color: #ff5a5f;
    color: #fff;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
}
.spicy-pro-btn:hover {
    background-color: #e04a4f;
}

.spicy-pro-container{
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}
.foot_tall_fence_btn span.cea-button-icon.cea-align-icon-right {
    background: #fff;
    color: #000;
    padding: 9px;
    line-height: 10px;
    border-radius: 50px;
    margin: 0 5px;
}

.main-container .rte .choose_height_btn:hover{
   background-color: var(--e-global-color-secondary);
    border-color: var(--e-global-color-secondary);
}
.steps_counter{padding:15px 0;}

.wizard-btn{    fill: #FFFFFF;
    color: #FFFFFF;
    background-color: var(--e-global-color-primary);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-primary);
    border-radius: 30px 30px 30px 30px;
    padding: 8px 25px 7px 25px;
    font-size: 16px;
    font-weight: 700;
    margin:15px 0;
    line-height: 34px;}

.wizard-btn:hover{
   background-color: var(--e-global-color-secondary);
    border-color: var(--e-global-color-secondary);
}
.page-title-wrap:before, .petzorg-page-header::before{
	display:none;
}
.petzorg-content-wrap {
    padding-top: 0px;
	padding-bottom: 0px;
}
.single-post .petzorg-content-wrap, .blog .petzorg-content-wrap, .page-id-266 .petzorg-content-wrap{
    padding-top: 50px;
	padding-bottom: 50px;
}
.fbox-content {
    font-family: "Nunito", Sans-serif;
}
.entry-title .post-title-head .post-title{
	    font-family: "Paytone One", Sans-serif !important;
}
.calculator-step input[type="radio"] {
    min-height: 0;
    margin-left: 5px;
    margin-right: 5px;
}
.calculator-step .fence-gate{
	text-align:center;
}
p.lead.d-block {
    font-size: 18px;
}
.single-post a.wp-block-button__link.has-background.wp-element-button {
    color: #fff;
    border-radius: 20px;
    fill: #fcf9f4;
    color: #fcf9f4;
    background-color: #5ab346;
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: #5ab346;
    border-radius: 30px 30px 30px 30px;
    padding: 8px 25px 8px 25px;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    display: inline-block;
    width: auto !important;
}
.single-post .wp-block-button.has-custom-width {
    text-align: center;
    margin: 10px 0;
}
.buttons-div a.x-btn.myself_install_button.cea-button-link.elementor-button.cea-button.elementor-size-sm {
    color: #FFFFFF;
    background-color: var(--e-global-color-primary);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-primary);
    border-radius: 30px 30px 30px 30px;
    padding: 8px 25px 8px 25px;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    position: relative;
    font-family: "Merriweather Sans", Sans-serif;
}
.buttons-div a.x-btn.myself_install_button.cea-button-link.elementor-button.cea-button.elementor-size-sm i.fas.fa-paw {
    background: #fff;
    color: var(--e-global-color-primary);
    border-radius: 10px;
    padding: 5px;
	margin-left:7px;
}
.buttons-div a.x-btn.myself_install_button.cea-button-link.elementor-button.cea-button.elementor-size-sm:hover i.fas.fa-paw{
	color:#000;
}
.buttons-div a.x-btn.myself_install_button.cea-button-link.elementor-button.cea-button.elementor-size-sm:hover{
	    background-color: var(--e-global-color-secondary);
}
button#nextStep {
    color: #FFFFFF;
    background-color: var(--e-global-color-primary);
    border-style: solid;
    border-width: 1px 1px 1px 1px;
    border-color: var(--e-global-color-primary);
    border-radius: 30px 30px 30px 30px;
    padding: 8px 25px 8px 25px;
    font-size: 14px;
    font-weight: 700;
    line-height: 30px;
    position: relative;
	font-family: "Merriweather Sans", Sans-serif;
}
.wizard-nav #prevStep:hover, .wizard-nav .wizard-nav button.cea-button-link.elementor-button.cea-button.elementor-size-sm.skip-step.wizard-btn.skip-btn:hover, .wizard-nav button#nextStep:hover{
	background-color: var(--e-global-color-secondary) !important;
}
/* button#nextStep:after{
	 font-family: "Font Awesome 5 Free";
    font-weight: 900;
    content: "\f1b0";
	    position: absolute;
    right: 15px;
    background: #fff;
    line-height: 1;
    color: #000;
    border-radius: 20px;
    padding: 6px;
} */

@media (min-width: 769px) and (max-width: 1024px) {
.main-container .rte .step-1-boxes {
    display: grid;
    grid-template-columns: repeat(2, 1fr); /* 4 columns */
    gap: 30px;
    justify-content: center;
}
.main-container .rte .tabs-container {
    margin-top: 10px;
    display: flex
;
    gap: 20px;
    justify-content: center;
}
}

@media (min-width: 300px) and (max-width: 768px) {
.main-container .rte .step-1-boxes {
    display: grid;
    grid-template-columns: repeat(1, 1fr); /* 4 columns */
    gap: 30px;
    justify-content: center;
}
.main-container .rte .tabs-container {
    margin-top: 10px;
    display: flex
;
    gap: 10px;
    justify-content: center;
}
.buttons-div {display:block}
.buttons-div .col-6{width:100%; float:left; max-width: 100%;}
.child-products-row{display:block !important}
}


.step-boxes{width:70%; float:left; }
.step_elementor{width:30%; float:left}