/*
Theme Name:   SNN-BRX - Bricks Builder Child Theme
Theme URI:    https://sinanisler.com/
Description:  SNN-BRX Child Theme is a purpose-built essential building suite for agencies and professionals, streamlining your Bricks Builder projects with one powerful child theme.
Author:       sinanisler
Author URI:   https://sinanisler.com/
Text Domain:  snn
Template:     bricks
Version: 0.260
*/

/* Mobile portrait 375px and below */
@media (max-width: 375px) {
    .brx-offcanvas-backdrop {
        /* Your styles for mobile portrait */
    }
}

/* Mobile landscape 768px and below */
@media (max-width: 767px) {
    .brx-offcanvas-backdrop {
        /* Your styles for mobile landscape */
    }
}

/* Tablet portrait 992px and below */
@media (max-width: 991px) {
    .brx-offcanvas-backdrop {
        /* Your styles for tablet */
    }

    .page-id-52 .brx-sticky, .page-id-2196 .brx-sticky, .page-id-2293 .brx-sticky{
     background-color: var(--c-EBFCED);
    color: #000 !important;
    }



    .sub-menu.brx-submenu-positioned {
  display: none !important;
}

/*menu color*/
    .page-id-1761 .brx-sticky, .page-id-2431 .brx-sticky{
            background-color: var(--c-F1F1F1);
    }

    .page-id-738 .brx-sticky{
            background-color: var(--c-EBFCED);
    }

    .page-id-618 .brx-sticky, .page-id-3145 .brx-sticky{
            background-color: var(--c-5A6450);
    }

    .page-id-686 .brx-sticky, .page-id-2300 .brx-sticky, .single-journal .brx-sticky{
            background-color: var(--c-EBDFD2);
    }

    .page-id-564 .brx-sticky, .page-id-3058 .brx-sticky, .single-room .brx-sticky{
        background-color: var(--c-FFFFD4) !important;
    color: #000 !important;
    }

    .page-id-690 .brx-sticky, .page-id-2095 .brx-sticky, .page-id-1167 .brx-sticky{
        background-color: #fff !important;

    }

    .page-id-682 .brx-sticky, .page-id-2279 .brx-sticky, .single-explore-and-plan .brx-sticky{
        background-color: var(--c-EBDFD2) !important;

    }

    .page-id-742 .brx-sticky, .page-id-2271 .brx-sticky{
        background-color: var(--c-FFD5B2) !important;

    }

/*menu color*/


}

/* Desktop 1280px and below */
@media (max-width: 1279px) {
    .brx-offcanvas-backdrop {
        /* Your styles for desktop */
    }
}

/* Laptop 1440px and below */
@media (max-width: 1440px) {
    .brx-offcanvas-backdrop {
        /* Your styles for laptop */
    }
}


/* Laptop 1600px and below */
@media (max-width: 1600px) {
    .brx-offcanvas-backdrop {
        /* Your styles for laptop */
    }

    .faq {
width: 60%;
  display: inline-block;  
}

.faq-title {
width: 40%;
  display: inline-block;
}
}

/* Base (1920px+) */

.page-id-742 main a, .page-id-2271 main a {
  text-decoration: underline;
}

/* Universal solution - works for all sliders */
.brxe-slider-nested .splide__list:empty ~ .splide__arrows,
.brxe-slider .splide__list:empty ~ .splide__arrows {
    display: none !important;
}

/* Mobile-specific universal fix */
@media (max-width: 991px) {
    .brxe-slider-nested .splide__arrows,
    .brxe-slider .splide__arrows {
        display: none !important;
    }
    
    .brxe-slider-nested:has(.splide__slide) .splide__arrows,
    .brxe-slider:has(.splide__slide) .splide__arrows {
        display: flex !important;
    }
}

.bricks-image-caption{
    display: none;
}

header li::marker {
  content: none;
}

.ls-image-right {
  box-shadow: unset !important;
}

.faq {
  padding-left: 50px;
  display: inline-flex;
}

.faq-title {
  width: 120px;
  display: inline-block;
}

/* booknow bar start */

.booknow-bar-mobile {
    backdrop-filter: blur(10px);
}


.booknow-bar {
    transition: transform 0.3s ease;
    backdrop-filter: blur(10px);

}

.booknow-bar.hidden {
    transform: translateY(100%);
}

/* booknow bar end */


li::marker {
  content: "- ";
}

ul {
  margin-top: auto;
  padding-left: unset;
}

/* Header start */

/* .single-room #brx-header {
  background-color: var(--c-FFFFD4);
} */

/* Header end */

/* Position arrows below the slider */
/* Remove existing arrow positioning */
#brxe-rgjgkt .splide__arrow--prev,
#brxe-rgjgkt .splide__arrow--next {
    top: 447px !important;
    transform: translateY(0) !important;
}

#brxe-rgjgkt .splide__arrow--prev {
    left: calc(50% - 80px) !important;
    right: auto !important;
}

#brxe-rgjgkt .splide__arrow--next {
    right: calc(50% - 80px) !important;
    left: auto !important;
}

/* Make sure the slider container has enough space below */
#brxe-rgjgkt {
    padding-bottom: 80px !important;
    position: relative;
}

/* Ensure arrows are visible */
#brxe-rgjgkt .splide__arrows {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 60px;
    pointer-events: none;
}

#brxe-rgjgkt .splide__arrow {
    pointer-events: auto;
    position: absolute;
}

/* Mobile adjustments */
@media (max-width: 991px) {
    #brxe-rgjgkt .splide__arrow--prev {
        left: calc(50% - 60px) !important;
    }
    
    #brxe-rgjgkt .splide__arrow--next {
        right: calc(50% - 60px) !important;
    }
    
    #brxe-rgjgkt {
        padding-bottom: 60px !important;
    }
    
    #brxe-rgjgkt .splide__arrow--prev,
    #brxe-rgjgkt .splide__arrow--next {
        bottom: -40px !important;
    }
}
/* lightbox start */
/* Replace Bricks Lightbox Icons - CSS Only */
 .pswp__button--arrow--prev svg,
.pswp__button--arrow--next svg,
.pswp__button--close svg {
    display: none !important;
}

.splide__arrow--prev::before, .pswp__button--arrow--prev::before {
    content: url("data:image/svg+xml,%3Csvg width='34' height='13' viewBox='0 0 34 13' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M34 5.52087V7.72922H10.625V13L0 6.62505L10.625 0V5.52087H34Z' fill='black'/%3E%3C/svg%3E") !important;
    display: block !important;
}

.splide__arrow--next::before, .pswp__button--arrow--next::before {
    content: url("data:image/svg+xml,%3Csvg width='35' height='13' viewBox='0 0 35 13' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M4.8265e-07 7.47913L6.7571e-07 5.27078L24.0625 5.27078L24.0625 1.90484e-06L35 6.37496L24.0625 13L24.0625 7.47913L4.8265e-07 7.47913Z' fill='black'/%3E%3C/svg%3E") !important;
    display: block !important;
}

.pswp__button--close::before {
    content: url("data:image/svg+xml,%3Csvg width='40' height='37' viewBox='0 0 40 37' fill='black' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20.518 29V27.986H22C22.936 27.986 23.248 27.414 22.65 26.608L18.802 21.538H18.594L14.928 26.114C14.096 27.154 14.46 27.986 15.656 27.986H16.826V29H9.39V27.986H9.962C10.976 27.986 11.652 27.414 12.484 26.374L17.632 19.978L12.484 13.192C11.704 12.178 11.236 11.814 10.3 11.814H9.546V10.8H18.308V11.814H16.826C15.89 11.814 15.578 12.412 16.176 13.192L19.712 17.846H19.868L23.17 13.712C24.028 12.646 23.664 11.814 22.468 11.814H21.584V10.8H28.968V11.814H28.162C27.148 11.814 26.446 12.412 25.64 13.426L20.856 19.38L26.342 26.608C27.122 27.648 27.564 27.986 28.5 27.986H29.228V29H20.518Z' fill='black'/%3E%3Cpath d='M9.074 32.37C3.172 29.536 1.144 24.232 1.144 19.76C1.144 15.262 3.172 9.958 9.074 7.124V8.19C5.59 10.4 4.264 15.522 4.264 19.76C4.264 23.972 5.59 29.094 9.074 31.304V32.37ZM27.9636 31.304C31.4476 29.094 32.7736 23.972 32.7736 19.76C32.7736 15.522 31.4476 10.4 27.9636 8.19V7.124C33.8656 9.958 35.8936 15.262 35.8936 19.76C35.8936 24.232 33.8656 29.536 27.9636 32.37V31.304Z' fill='black'/%3E%3C/svg%3E") !important;
    display: block !important;
}

.pswp__img {
  /* height: calc(100vh - 191px) !important;
  width: auto !important; */
}

.pswp.brx .pswp__button--arrow--next {
  right: calc(50% - 60px) !important;
  position: absolute !important;
  bottom: -55px !important;
  top: unset !important;
  width: 60px !important;
}

.pswp.brx .pswp__button--arrow--prev {
  left: calc(50% - 60px) !important;
  position: absolute !important;
  bottom: -55px !important;
  top: unset !important;
  width: 60px !important;
}

.pswp.pswp--open.brx.pswp--has_mouse.pswp--ui-visible {
  background-color: #FFFFD4;
}

.pswp__counter {
  display: none;
}
/* lightbox end */

.brx-offcanvas-backdrop {
    background: transparent !important;
    opacity: 0 !important;
}

.fullwidth {
        padding-right: 0 !important;
        padding-left: 0 !important;
}

.padding-13 {
        padding-right: 13 !important;
        padding-left: 13 !important;
}
.padding-26 {
        padding-right: 26 !important;
        padding-left: 26 !important;
}


.page-id-52 .headercolor{

    /* color: #fff; */
}

.page-id-52 .brx-sticky.on-scroll.scrolling{
    background-color: var(--c-EBFCED);
        color: #000 !important;
}

.page-id-52 .brx-sticky.on-scroll{
    /* background-color: var(--c-EBFCED); */
        color: #fff !important;
}

.page-id-52 #brxe-wtaqdt{
        display: none;;
}

.page-id-564 .brx-sticky.on-scroll.scrolling{
        background-color: var(--c-FFFFD4) !important;

}

.page-id-682 .brx-sticky.on-scroll.scrolling{
        background-color: var(--c-EBDFD2) !important;
        color: #000 !important;

}
.page-id-682 .brx-sticky.on-scroll{

    color: #fff;
}
/*Slider*/

.single-room .brxe-slider-nested{
      background-color: var(--c-FFFFD4) !important;
}
/* .brxe-erfolf.brxe-block {
  align-self: flex-start !important;
  justify-content: flex-start;
  align-items: flex-start;
  width: auto !important;
} */

 .brxe-slider-nested .splide__arrows:not(.custom) .splide__arrow--prev {
    transform: translateY(-50%) scaleX(1) !important;
  }

/*Slider*/

/* Datepicker styling */
.ui-datepicker {
    background: white;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 10px;
    z-index: 999999 !important;
}

.ui-datepicker-header {
    background: #f8f9fa;
    border: none;
    border-radius: 3px;
}

.ui-datepicker-prev, .ui-datepicker-next {
    cursor: pointer;
}

.ui-datepicker-calendar td {
    border: 1px solid #eee;
}

.ui-datepicker-calendar td a {
    text-align: center;
    padding: 5px;
    display: block;
    text-decoration: none;
}

.ui-datepicker-calendar .ui-state-active {
    background: #007cba;
    color: white;
}

.booking-datepicker {
    cursor: pointer;
    background: white;
}


/* Booking form styling */

/* Hide default number input arrows */
.number-input-container input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.number-input-container input[type="number"]::-webkit-outer-spin-button,
.number-input-container input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Hide default number input arrows */

/* Book now */


.date-input-container label{
width: 190px;
}

.booking-form {
    background: #fff;
    padding: 10px 25px;
    border-radius: 35px;
    width: 100%;
    box-sizing: border-box;
    font-size: 18px;
    font-family: "ABCGaysirGreek-Regular";
    height: 72px;
}

.form-row {
    display: flex;
    gap: 20px;
    margin-bottom: 20px;
    flex-wrap: wrap;
    justify-content: space-between;
}

.form-group {
    flex: 1;
    min-width:
     120px;
}
.form-group p {
    font-size: 20px;
  line-height: 26px;
  color: #ADADAD;
  padding-left: 19px;
}
#checkout, #checkin {
  border: 0;
  margin-right: 25px;
  color: #000;
  font-size: 18px;
  font-family: "ABCGaysirGreek-Regular";
}

.booking-form label {
display: block;
  margin-bottom: 10px;
  color: #000;
  font-size: 18px;
  padding-top: 10px;
}

.booking-form input[type="text"] {
font-size: 18px;
  background: #fff;
  cursor: pointer;
  height: 52px;
  font-family: "ABCGaysirGreek-Regular";
  padding-right: 0px;
}

.booking-form input[type="text"]:focus {
    outline: none;
    border-color: #4CAF50;
}

/* Number Input Styles */

.date-input-container {
display: flex;
  align-items: center;
  border: 1.5px solid #e1e5e9;
  border-radius: 35px;
  background: #fff;
  overflow: hidden;
  height: 53px;
  width: 240px;
  padding-left: 15px;
}

.number-input-container {
display: flex;
  align-items: center;
  border: 1.5px solid #e1e5e9;
  border-radius: 35px;
  background: #fff;
  overflow: hidden;
  height: 53px;
  width: 191px;
  padding: 15px;
}

.number-input-container input {
flex: 1;
  border: none;
  text-align: center;
  padding: 12px 5px;
  font-size: 16px;
  font-weight: 600;
  background: transparent;
  outline: none;
  color: #333;
  cursor: default;
  height: 52px;
}

.number-btn {
background: none;
  border: none;
  padding: 4px 2px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.number-btn:hover {
    /* background: #e9ecef;
    color: #333; */
}

.number-btn:disabled {
    background: #f8f9fa;
    color: #ccc;
    cursor: not-allowed;
}

.number-btn:disabled:hover {
    background: #f8f9fa;
    color: #ccc;
}

/* .decrement-btn {
    border-right: 1px solid #e1e5e9;
}

.increment-btn {
    border-left: 1px solid #e1e5e9;
} */

.booking-form button[type="submit"] {
 background: #000;
  color: white;
  border: none;
  border-radius: 35px;
  cursor: pointer;
  font-family: "ABCGaysirGreek-Regular";
  font-size: 26px;
  height: 52px;
  width: 191px;
  text-align: center;
}

.booking-form button[type="submit"]:hover {
    background: #000;
}

/* Responsive Design */
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
        gap: 15px;
    }
    
    .form-group {
        min-width: 100%;
    }
    
    .booking-form {
        padding: 20px;
        margin: 10px;
    }
}

@media (max-width: 480px) {
    .booking-form {
        padding: 15px;
    }
    
    .number-input-container input {
        padding: 10px 5px;
    }
    
    .number-btn {
        padding: 10px 12px;
    }
    
    .booking-form input[type="text"] {
        padding: 10px 12px;
    }
}


/* Laptop 1280px and below */
@media (min-width: 1280px) {
    .brx-offcanvas-backdrop {
        /* Your styles for laptop */
    }


    .date-input-container, .number-input-container {
        width: 170px !important;
    }

    .date-input-container label {
  width: 240px;
  padding-right: 5px;
}

    .booking-form{
        font-size: 16px !important;
            padding: 10px 10px;
    }

    .booking-form label {
        font-size: 16px !important;
    }

    .booking-form input[type="text"] {
    font-size: 16px !important;

    padding: 0 !important;
    }

    #checkout, #checkin {
    font-size: 16px !important;
    }

    .input, input:not([type=submit]), select, textarea {
        border-width: 0 !important;
    }

    #checkout, #checkin {
  margin-right: 20px;

    }

}


/* Laptop 1440px and below */
@media (min-width: 1440px) {
    .brx-offcanvas-backdrop {
        /* Your styles for laptop */
    }


    .date-input-container {
        width: 190px !important;
    }

    .booking-form{
        font-size: 16px !important;
            padding: 10px 10px;
    }

    .booking-form label {
        font-size: 16px !important;
    }

    .booking-form input[type="text"] {
    font-size: 16px !important;

    padding: 0 !important;
    }

    #checkout, #checkin {
    font-size: 16px !important;
    }

    .input, input:not([type=submit]), select, textarea {
        border-width: 0 !important;
    }

    #checkout, #checkin {
  margin-right: 20px;


}

}


@media (min-width: 1600px) {
    .date-input-container {
        width: 190px !important;
    }

    .booking-form{
        font-size: 16px !important;
            padding: 10px 10px;
    }

    .booking-form label {
        font-size: 16px !important;
    }

    .booking-form input[type="text"] {
    font-size: 16px !important;

    padding: 0 !important;
    }

    #checkout, #checkin {
    font-size: 16px !important;
    }

    .input, input:not([type=submit]), select, textarea {
        border-width: 0 !important;
    }

    .form-group p {
  padding-left: 9px;
}

}

@media (min-width: 1920px) {
    .date-input-container {
        width: 190px !important;
    }

    .booking-form{
        font-size: 16px !important;
            padding: 10px 10px;
    }

    .booking-form label {
        font-size: 16px !important;
    }

    .booking-form input[type="text"] {
    font-size: 16px !important;

    padding: 0 !important;
    }

    #checkout, #checkin {
    font-size: 16px !important;
    }

    .input, input:not([type=submit]), select, textarea {
        border-width: 0 !important;
    }

    .date-input-container, .number-input-container {
    width: 230px !important;
  }

}