/*
 * Foodmood + Elementor 3/4 layout compatibility (kuciasharan.com maintenance, 2026-10-24).
 *
 * Elementor 2.x wrapped columns in .elementor-row and the theme (css/main.css) pulled that
 * row out by the column gap on all four sides:
 *   .wgl-container .elementor-section-boxed .elementor-column-gap-default .elementor-row
 *       { width: calc(100% + 20px); margin: -10px; }
 * Elementor 3+ no longer outputs .elementor-row, so sections grew by 2x the gap and content
 * became narrower. The rules below reproduce the same geometry on the container/columns.
 * 1170px = the site's Elementor container width (Site Settings > Layout > Content Width).
 */

/* Horizontal: container widened by the gap on both sides, still centred. */
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-narrow {
	max-width: none;
	width: min(calc(100% + 10px), calc(1170px + 10px));
	margin-left: calc((100% - min(calc(100% + 10px), calc(1170px + 10px))) / 2);
	margin-right: calc((100% - min(calc(100% + 10px), calc(1170px + 10px))) / 2);
}
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-default {
	max-width: none;
	width: min(calc(100% + 20px), calc(1170px + 20px));
	margin-left: calc((100% - min(calc(100% + 20px), calc(1170px + 20px))) / 2);
	margin-right: calc((100% - min(calc(100% + 20px), calc(1170px + 20px))) / 2);
}
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-extended {
	max-width: none;
	width: min(calc(100% + 30px), calc(1170px + 30px));
	margin-left: calc((100% - min(calc(100% + 30px), calc(1170px + 30px))) / 2);
	margin-right: calc((100% - min(calc(100% + 30px), calc(1170px + 30px))) / 2);
}
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-wide {
	max-width: none;
	width: min(calc(100% + 40px), calc(1170px + 40px));
	margin-left: calc((100% - min(calc(100% + 40px), calc(1170px + 40px))) / 2);
	margin-right: calc((100% - min(calc(100% + 40px), calc(1170px + 40px))) / 2);
}
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-wider {
	max-width: none;
	width: min(calc(100% + 60px), calc(1170px + 60px));
	margin-left: calc((100% - min(calc(100% + 60px), calc(1170px + 60px))) / 2);
	margin-right: calc((100% - min(calc(100% + 60px), calc(1170px + 60px))) / 2);
}

/* Vertical: columns pulled up/down by the gap, so the section height matches Elementor 2.x. */
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-narrow > .elementor-column { margin-top: -5px; margin-bottom: -5px; }
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-default > .elementor-column { margin-top: -10px; margin-bottom: -10px; }
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-extended > .elementor-column { margin-top: -15px; margin-bottom: -15px; }
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-wide > .elementor-column { margin-top: -20px; margin-bottom: -20px; }
.wgl-container .elementor-section-boxed > .elementor-container.elementor-column-gap-wider > .elementor-column { margin-top: -30px; margin-bottom: -30px; }

/*
 * Slick carousel base styles. Elementor 2.x shipped these in frontend.css and the theme's
 * carousels (products, blog, team, testimonials...) depend on them; Elementor 3+ removed Slick.
 * Copied verbatim from Elementor 2.9.8 assets/css/frontend.min.css (Slick: MIT, Ken Wheeler).
 */
.slick-slider{-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-touch-callout:none;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-ms-touch-action:pan-y;touch-action:pan-y;-webkit-tap-highlight-color:transparent}
.slick-list,.slick-slider{position:relative;display:block}
.slick-list{overflow:hidden;margin:0;padding:0}
.slick-list:focus{outline:none}
.slick-list.dragging{cursor:pointer}
.slick-slider .slick-list,.slick-slider .slick-track{-webkit-transform:translateZ(0);transform:translateZ(0)}
.slick-track{position:relative;left:0;top:0;display:block}
.slick-track:after,.slick-track:before{content:"";display:table}
.slick-track:after{clear:both}
.slick-loading .slick-track{visibility:hidden}
.slick-slide{float:left;height:100%;min-height:1px;display:none}
.slick-slide img{display:block}
.slick-slide.slick-loading img{display:none}
.slick-slide.dragging img{pointer-events:none}
.slick-initialized .slick-slide{display:block}
.slick-loading .slick-slide{visibility:hidden}
.slick-vertical .slick-slide{display:block;height:auto;border:1px solid transparent}
.slick-arrow.slick-hidden{display:none}

/*
 * Elementor 2.x printed colour/typography scheme defaults for ALL widget types on every page
 * ("elementor-frontend-inline-css"). Theme widgets reuse core classes such as
 * .elementor-widget-icon-box/.elementor-icon and inherited those colours. Elementor 3+ only prints
 * them for widgets present on the page, so footer icons etc. lost the theme colour.
 * Copied verbatim from the live site (Elementor 2.9.8, scheme = theme colours/fonts) on 2026-10-24.
 */
.elementor-widget-heading .elementor-heading-title{color:#f7b035;font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-image .widget-image-caption{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-text-editor{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-text-editor.elementor-drop-cap-view-stacked .elementor-drop-cap{background-color:#f7b035;}
.elementor-widget-text-editor.elementor-drop-cap-view-framed .elementor-drop-cap, .elementor-widget-text-editor.elementor-drop-cap-view-default .elementor-drop-cap{color:#f7b035;border-color:#f7b035;}
.elementor-widget-button .elementor-button{font-family:"Open Sans", Sans-serif;font-weight:400;background-color:#f7b035;}
.elementor-widget-divider{--divider-border-color:#232323;}
.elementor-widget-divider .elementor-divider__text{color:#232323;font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-divider.elementor-view-stacked .elementor-icon{background-color:#232323;}
.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon{color:#232323;border-color:#232323;}
.elementor-widget-divider.elementor-view-framed .elementor-icon, .elementor-widget-divider.elementor-view-default .elementor-icon svg{fill:#232323;}
.elementor-widget-image-box .elementor-image-box-content .elementor-image-box-title{color:#f7b035;font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-image-box .elementor-image-box-content .elementor-image-box-description{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-icon.elementor-view-stacked .elementor-icon{background-color:#f7b035;}
.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon{color:#f7b035;border-color:#f7b035;}
.elementor-widget-icon.elementor-view-framed .elementor-icon, .elementor-widget-icon.elementor-view-default .elementor-icon svg{fill:#f7b035;}
.elementor-widget-icon-box.elementor-view-stacked .elementor-icon{background-color:#f7b035;}
.elementor-widget-icon-box.elementor-view-framed .elementor-icon, .elementor-widget-icon-box.elementor-view-default .elementor-icon{fill:#f7b035;color:#f7b035;border-color:#f7b035;}
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-title{color:#f7b035;font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-icon-box .elementor-icon-box-content .elementor-icon-box-description{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-star-rating .elementor-star-rating__title{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-image-carousel .elementor-image-carousel-caption{font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-image-gallery .gallery-item .gallery-caption{font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-icon-list .elementor-icon-list-item:not(:last-child):after{border-color:#616161;}
.elementor-widget-icon-list .elementor-icon-list-icon i{color:#f7b035;}
.elementor-widget-icon-list .elementor-icon-list-icon svg{fill:#f7b035;}
.elementor-widget-icon-list .elementor-icon-list-text{color:#232323;}
.elementor-widget-icon-list .elementor-icon-list-item{font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-counter .elementor-counter-number-wrapper{color:#f7b035;font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-counter .elementor-counter-title{color:#232323;font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-progress .elementor-progress-wrapper .elementor-progress-bar{background-color:#f7b035;}
.elementor-widget-progress .elementor-title{color:#f7b035;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-testimonial .elementor-testimonial-content{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-testimonial .elementor-testimonial-name{color:#f7b035;font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-testimonial .elementor-testimonial-job{color:#232323;font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-tabs .elementor-tab-title, .elementor-widget-tabs .elementor-tab-title a{color:#f7b035;}
.elementor-widget-tabs .elementor-tab-title.elementor-active a{color:#f7b035;}
.elementor-widget-tabs .elementor-tab-title{font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-tabs .elementor-tab-content{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-accordion .elementor-accordion-icon, .elementor-widget-accordion .elementor-accordion-title{color:#f7b035;}
.elementor-widget-accordion .elementor-active .elementor-accordion-icon, .elementor-widget-accordion .elementor-active .elementor-accordion-title{color:#f7b035;}
.elementor-widget-accordion .elementor-accordion .elementor-accordion-title{font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-accordion .elementor-accordion .elementor-tab-content{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-toggle .elementor-toggle-title, .elementor-widget-toggle .elementor-toggle-icon{color:#f7b035;}
.elementor-widget-toggle .elementor-tab-title.elementor-active a, .elementor-widget-toggle .elementor-tab-title.elementor-active .elementor-toggle-icon{color:#f7b035;}
.elementor-widget-toggle .elementor-toggle .elementor-toggle-title{font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-toggle .elementor-toggle .elementor-tab-content{color:#616161;font-family:"Open Sans", Sans-serif;font-weight:400;}
.elementor-widget-alert .elementor-alert-title{font-family:"Rubik", Sans-serif;font-weight:700;}
.elementor-widget-alert .elementor-alert-description{font-family:"Open Sans", Sans-serif;font-weight:400;}

/*
 * Icon Box / Image Box layout. Theme info-box and image-box widgets output Elementor 2.x markup
 * (e.g. .elementor-position-left); Elementor 3.5+ renamed these classes (position-inline-start) and
 * moved the CSS to per-widget files. Copied verbatim from Elementor 2.9.8 frontend.min.css.
 */
@media (min-width:768px){.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper,.elementor-widget-icon-box.elementor-position-right .elementor-icon-box-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-icon,.elementor-widget-icon-box.elementor-position-right .elementor-icon-box-icon{display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-box-flex:0;-webkit-flex:0 0 auto;-ms-flex:0 0 auto;flex:0 0 auto}.elementor-widget-icon-box.elementor-position-right .elementor-icon-box-wrapper{text-align:right;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.elementor-widget-icon-box.elementor-position-left .elementor-icon-box-wrapper{text-align:left;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.elementor-widget-icon-box.elementor-position-top .elementor-icon-box-img{margin:auto}.elementor-widget-icon-box.elementor-vertical-align-top .elementor-icon-box-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.elementor-widget-icon-box.elementor-vertical-align-middle .elementor-icon-box-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.elementor-widget-icon-box.elementor-vertical-align-bottom .elementor-icon-box-wrapper{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}}
@media (max-width:767px){.elementor-widget-icon-box .elementor-icon-box-icon{margin-left:auto!important;margin-right:auto!important;margin-bottom:15px}}
.elementor-widget-icon-box .elementor-icon-box-wrapper{text-align:center}
.elementor-widget-icon-box .elementor-icon-box-title a{color:inherit}
.elementor-widget-icon-box .elementor-icon-box-content{-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1}
.elementor-widget-icon-box .elementor-icon-box-description{margin:0}
.elementor-widget-image-box .elementor-image-box-content{width:100%}
@media (min-width:768px){.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper,.elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex}.elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper{text-align:right;-webkit-box-orient:horizontal;-webkit-box-direction:reverse;-webkit-flex-direction:row-reverse;-ms-flex-direction:row-reverse;flex-direction:row-reverse}.elementor-widget-image-box.elementor-position-left .elementor-image-box-wrapper{text-align:left;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-webkit-flex-direction:row;-ms-flex-direction:row;flex-direction:row}.elementor-widget-image-box.elementor-position-top .elementor-image-box-img{margin:auto}.elementor-widget-image-box.elementor-vertical-align-top .elementor-image-box-wrapper{-webkit-box-align:start;-webkit-align-items:flex-start;-ms-flex-align:start;align-items:flex-start}.elementor-widget-image-box.elementor-vertical-align-middle .elementor-image-box-wrapper{-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}.elementor-widget-image-box.elementor-vertical-align-bottom .elementor-image-box-wrapper{-webkit-box-align:end;-webkit-align-items:flex-end;-ms-flex-align:end;align-items:flex-end}}
@media (max-width:767px){.elementor-widget-image-box .elementor-image-box-img{margin-left:auto!important;margin-right:auto!important;margin-bottom:15px}}
.elementor-widget-image-box .elementor-image-box-img{display:inline-block}
.elementor-widget-image-box .elementor-image-box-title a{color:inherit}
.elementor-widget-image-box .elementor-image-box-wrapper{text-align:center}
.elementor-widget-image-box .elementor-image-box-description{margin:0}

/*
 * WooCommerce 7+ form fields. WooCommerce 4 left .input-text unstyled so the theme's input style
 * (main.css: "body input:not([type=checkbox]):not([type=submit]), select, textarea") applied;
 * newer WooCommerce styles .woocommerce form .form-row .input-text with higher specificity.
 * Restore the theme's look (values from foodmood/css/main.css).
 */
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
	height: 52px;
	padding: 12px 28px;
	border: 1px solid #dddddd;
	border-radius: 25px;
	font-size: 14px;
	line-height: 1.7;
	background-color: #ffffff;
}
.woocommerce form .form-row textarea.input-text {
	padding: 12px 28px;
	border: 1px solid #dddddd;
	border-radius: 25px;
	font-size: 14px;
	line-height: 1.7;
	background-color: #ffffff;
}
/* Keep room for WooCommerce's show-password button inside the rounded field. */
.woocommerce form .form-row .password-input input.input-text { padding-right: 52px; }
.woocommerce form .show-password-input { right: 20px; }

/*
 * Contact Form 7 5.4+ wraps each field in <p> inside the theme's .wgl_col-* columns
 * (CF7 5.1 did not), adding paragraph margins between fields. Neutralise them.
 */
.wpcf7-form [class*="wgl_col-"] > p { margin: 0; }