/* 
Theme Name: Hello Elementor Otw
Theme URI: https://github.com/elementor/hello-theme/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 1.0.1
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/*
    Add your custom styles here
*/

:root {
  --inline-padding: 3rem;
  --block-padding: 3rem;
}

a,
a:hover,
a:focus {
  color: unset;
}

[type="button"],
[type="submit"],
button,
[type="button"]:focus,
[type="button"]:hover,
[type="submit"]:focus,
[type="submit"]:hover,
button:focus,
button:hover {
  border: unset;
  background-color: unset;
}

.pointer {
  cursor: pointer;
}
h1,
h2,
h3,
h4,
h5,
h6,
p:last-child {
  margin-bottom: 0;
}

.elementor-widget-spacer {
  height: var(--spacer-size);
}

.rtl .elementor-toggle,
.rtl .elementor-accordion {
  text-align: start;
}

.rtl .elementor-toggle .elementor-tab-title .elementor-toggle-icon.elementor-toggle-icon-right,
.rtl .elementor-accordion .elementor-tab-title .elementor-accordion-icon.elementor-accordion-icon-right {
  float: left;
  float: inline-end;
  margin-inline-start: 10px;
}

.rtl .elementor-widget-image-box.elementor-position-right .elementor-image-box-wrapper {
  flex-direction: row;
}

.dynamic-font-fix {
  min-height: 0vw;
}

.section-padding.e-con {
  --padding-top: var(--block-padding);
  --padding-bottom: var(--block-padding);
  --padding-left: var(--inline-padding);
  --padding-right: var(--inline-padding);
}

.inline-padding.e-con {
  --padding-left: var(--inline-padding);
  --padding-right: var(--inline-padding);
}

.block-padding.e-con {
  --padding-top: var(--block-padding);
  --padding-bottom: var(--block-padding);
}

.elementor-widget.elementor-widget-jet-listing-grid {
  flex-basis: unset;
}

[data-elementor-type="header"] + main,
[data-elementor-type="header"] + div:not(.woocommerce-notices-wrapper),
[data-elementor-type="header"] + section {
  min-height: 75vh;
}

html[dir="rtl"] input[type="tel"] {
  text-align: right;
}

@media (min-width: 1025px) {
  .desktop-hidden {
    display: none !important;
  }
}

@media (max-width: 1024px) {
  :root {
    --inline-padding: 2rem;
    --block-padding: 2rem;
  }
}

@media (max-width: 1024px) and (min-width: 768px) {
  .tablet-hidden {
    display: none !important;
  }
}

@media (max-width: 768px) {
  :root {
    --inline-padding: 1rem;
    --block-padding: 2rem;
  }

  .mobile-hidden {
    display: none !important;
  }
}

body:not(.elementor-editor-active) .elementor-widget-menu-anchor {
  pointer-events: none;
  z-index: -1;
  height: 0;
}

body:not(.elementor-editor-active) .elementor-menu-anchor:before {
  content: "";
  display: block;
  height: 80px; /* fixed header height*/
  margin: -80px 0 0; /* negative fixed header height */
  visibility: hidden;
}

.elementor-icon-wrapper {
  line-height: 1;
}

/* JETENGINE LISINGS */
/* JETLISTING LOADING ANIMATION */
.jet-listing-grid.jet-filters-loading,
.jet-listing-grid.jet-listing-grid-loading {
  opacity: 1 !important;
}
.jet-listing-grid.jet-filters-loading:before,
.jet-listing-grid.jet-listing-grid-loading:before {
  backdrop-filter: blur(2px);
  background-color: rgba(0, 0, 0, 0.1);
  content: "";
  position: absolute;
  inset: 0;
  z-index: 997;
}
.jet-listing-grid.jet-filters-loading:after,
.jet-listing-grid.jet-listing-grid-loading:after {
  content: " ";
  display: block;
  width: 50px;
  height: 50px;
  margin: 0;
  border-radius: 50%;
  border: 6px solid #fff;
  border-color: #fff transparent #fff transparent;
  animation: lds-dual-ring 1.2s linear infinite;
  position: absolute;
  left: calc(50% - 25px);
  transform: translate(-50%);
  z-index: 998;
}

.jet-listing-grid.jet-filters-loading:after {
  top: 150px;
}

.jet-listing-grid.jet-listing-grid-loading:after {
  bottom: 100px;
}

@keyframes lds-dual-ring {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/* ******* JET SMART FILTER ******* */
.rtl .jet-filter-items-dropdown__label:after {
  right: unset;
  left: 5px;
}

.rtl .jet-filter-items-dropdown__active__item__remove {
  margin-left: unset;
  margin-right: 5px;
}

.rtl .jet-filter-items-dropdown__label {
  padding: 8px 12px 8px 20px;
}

.rtl .jet-smart-filters-active .jet-active-filter {
  padding-right: unset;
  padding-left: 10px;
}

.rtl .jet-smart-filters-active .jet-active-filter__remove {
  right: unset;
  left: 0;
}

/* WOOCOMMERCE  */
.wc-block-components-order-summary .wc-block-components-panel__button,
.wc-block-components-order-summary .wc-block-components-panel__button:hover,
.wc-block-components-order-summary .wc-block-components-panel__button:focus,
button.wc-block-components-panel__button,
button.wc-block-components-panel__button:hover,
button.wc-block-components-panel__button:focus {
  background: unset;
  color: var(--e-global-color-text);
  font-weight: bold;
  border: none;
  outline: none;
}
.time-slot-wrapper input[type="text"] {
  position: relative;
}
.time-slot-wrapper input[type="text"]::after {
  content: '';
  background-image: url('images/clock.png');
  background-repeat: no-repeat;
  background-size: cover;
  padding-right: 30px; /* Adjust based on icon width */
  width: 100%; /* Adjust width as needed */
  box-sizing: border-box;
  position: absolute;
  right: 10px; /* Adjust as needed */
  top: 50%;
  transform: translateY(-50%);
  color: #888; /* Optional: Adjust icon color */
  pointer-events: none; /* Prevent icon from blocking input clicks */
}

.sos-days-box {
  display: none;
}
.elementor-editor-active .sos-days-box,
.sos-days-box.sos-active {
  display: flex;
}
.sos-days-box .days-wrapper .time-slot-wrapper {
    display: flex;
    width: 100%;
    max-width: 250px;
}

.days-wrapper.reg-sos-box .time-slot-wrapper {
  display: flex;
  width: 100%;
  max-width: 250px;
}

.time-slot-wrapper .day-title {
    width: 100%;
}

.star-rating {
  display: inline-flex;
  cursor: pointer;
}

.star-rating span {
  font-size: 30px;
  color: #ccc; /* default gray */
  transition: color 0.2s;
  margin: 0 3px;
}

.star-rating span.hover,
.star-rating span.active {
  color: #f5a623; /* gold color */
}
.star-select {
  display: none;
}

.elementor-field-group-age_child_1,
.elementor-field-group-age_child_2,
.elementor-field-group-age_child_3,
.elementor-field-group-age_child_4,
.elementor-field-group-age_child_5,
.elementor-field-group-age_child_6,
.elementor-field-group-age_child_7,
.elementor-field-group-age_child_8,
.elementor-field-group-age_child_9,
.elementor-field-group-age_child_10,
.elementor-field-group-sos_age_child_1,
.elementor-field-group-sos_age_child_2,
.elementor-field-group-sos_age_child_3,
.elementor-field-group-sos_age_child_4,
.elementor-field-group-sos_age_child_5,
.elementor-field-group-sos_age_child_6,
.elementor-field-group-sos_age_child_7,
.elementor-field-group-sos_age_child_8,
.elementor-field-group-sos_age_child_9,
.elementor-field-group-sos_age_child_10 {
  display: none;
}

.otw-time-slots {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}
.day-wrapper {
    flex: 1 0 calc(14% - var(--gap, 1rem));
}
.day-label {
    font-weight: bold;
    margin-bottom: 0.25em;
}
.otw-time-slots .add-slot-button {
    padding: 0;
    background: transparent;
    text-align: center;
    width: 100%;
    font-size: 14px;
    border: none; 
    color: black;
}


.otw-time-slots .add-slot-button:hover,
.otw-time-slots .add-slot-button:focus {
    background: transparent;
    color: black;
}

.time-slot-wrapper {
    position: relative;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    flex-wrap: wrap;
    padding: 10px;
    border-radius: 14px;
    background-color: white;
    box-shadow: 0px 0px 12px 0px #0F233712;

}

.time-slot-wrapper:has( + .time-slot-wrapper:not([style="display:none;"])) {
    margin-bottom: .5rem;
}

.time-slots-header {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

button.time-slots-submit-btn {
    cursor: pointer;
    padding: .25em 1em;
}

span.clear-slot, span.remove-slot, .clear-time {
    position: absolute;
    top: -5px;
    right: -5px;
    background-color: var(--e-global-color-secondary);
    width: 20px;
    height: 20px;
    display: grid;
    place-content: center;
    border-radius: 50%;
    color: white;
    line-height: 1;
}

.reg-sos-box .clear-time {
    display: none;
}

.time-picker {
    display: inline-block;
    flex: 1 0 calc(50% - 10px)
}

.time-slot-wrapper label {
  color: #0F233740
}

.time-slot-wrapper input {
    direction: ltr;
    flex-grow: 1;
    border: 1px solid #0F233740;
    width: 100%;
    padding: 6px;
    cursor: pointer;
    text-align: center;
    border-radius: 100vw;
}

.time-wrapper {
    display: flex;
    align-items: center;
}

.hours-label {
    margin: 0;
    width: 30px;
}

.clear-time {
    cursor: pointer;
}

.time-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    background: white;
    border: 1px solid #ccc;
    z-index: 100;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    width: 100%;
    direction: ltr;
    min-width: 150px;
    border-radius: 14px;;
}


.time-dropdown > div {
    flex: 1 0 44%;
}

.time-column {
    display: flex;
    flex-direction: column;
    max-height: 150px;
    overflow-y: auto;
}

.time-option {
    padding: 4px;
    cursor: pointer;
    text-align: center;
}
.time-option.active,
.time-option:hover {
    background-color: #eee;
}

.time-option.disabled {
    background-color: #ffe0e0;
}
.ok-button {
    margin-top: 10px;
    padding: 6px;
    background-color: #0073aa;
    color: #fff;
    border: none;
    cursor: pointer;
    width: 100%;
    font-size: 14px;
}

.ok-button:hover {
    background-color: #005d8f;
}

@media (max-width: 1024px) {
	.day-wrapper {
		flex: 0 0 calc(33% - (var(--gap, 1rem) / 2) );
	}
}

@media (max-width: 767px) {
	.day-wrapper {
		flex: 0 0 calc(50% - (var(--gap, 1rem) / 2) );
	}
}