/*============================================================================================*/
/* RESPONSIVE CSS - Le Rose Residence */
/*============================================================================================*/

/* Base responsive settings */
* {
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
}

/* Remove fixed min-width from body */
body {
    min-width: 0 !important;
}

/* Make all images responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Responsive containers */
.container,
.container_24 {
    width: 100%;
    max-width: 1100px;
    padding-left: 15px;
    padding-right: 15px;
}

/*----------------------------------------------*/
/* Mobile Menu Toggle Button */
/*----------------------------------------------*/
.mobile-menu-toggle {
    display: none;
    background: #404040;
    color: #fff;
    border: none;
    padding: 12px 20px;
    font-size: 18px;
    cursor: pointer;
    width: 100%;
    text-align: left;
    font-family: 'MelbourneBold', Arial, sans-serif;
}

.mobile-menu-toggle:hover,
.mobile-menu-toggle:focus {
    background: #404040;  /* Keep same as default */
    color: #fff;          /* Keep white, not purple */
    cursor: pointer;      /* Keep pointer cursor */
}

.mobile-menu-toggle span {
    float: right;
    font-size: 24px;
    line-height: 1;
}

/*============================================================================================*/
/* TABLET STYLES - Max 992px */
/*============================================================================================*/
@media screen and (max-width: 992px) {
    
    /* Header adjustments */
    .head .container {
        height: auto;
        padding: 15px;
    }
    
    .logo {
        position: relative;
        top: auto;
        left: auto;
        width: 100%;
        max-width: 300px;
        height: auto;
        margin: 0 auto;
        text-align: center;
    }
    
    .logo img {
        width: 100%;
        max-width: 300px;
        height: auto;
    }
    
    .head_right {
        float: none;
        margin: 15px 0 0 0;
        text-align: center;
    }
    
    .icon-top {
        text-align: center;
        padding-right: 0;
        background-position: left center !important;
        padding-left: 25px;
        display: inline-block;
        margin: 5px 0;
    }
    
    .fb-like {
        margin-top: 10px;
    }
    
    .TA_socialButtonBubbles {
        text-align: center;
        display: flex;
        justify-content: center;
    }
    
    /* Grid system adjustments */
    .grid_1, .grid_2, .grid_3, .grid_4, .grid_5, .grid_6,
    .grid_7, .grid_8, .grid_9, .grid_10, .grid_11, .grid_12,
    .grid_13, .grid_14, .grid_15, .grid_16, .grid_17, .grid_18,
    .grid_19, .grid_20, .grid_21, .grid_22, .grid_23, .grid_24 {
        width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
        display: block;
    }
    
    .container_24 .grid_12 {
        width: 100%;
    }
    
    .container_24 .grid_17,
    .container_24 .grid_6 {
        width: 100%;
    }
    
    /* Remove prefix/suffix */
    .container_24 .suffix_1,
    .container_24 .prefix_1 {
        padding-left: 0;
        padding-right: 0;
    }
    
    /* Header slider */
    .header .container {
        width: 100%;
        max-width: 100%;
    }
    
    .homepage .container {
        height: auto;
        min-height: 300px;
        background-size: contain;
    }
    
    #slides {
        width: 100% !important;
    }
    
    .slides_container {
        width: 100% !important;
    }
    
    .slides_container > div,
    .slides_container img {
        width: 100% !important;
        height: auto !important;
    }
    
    /* Banners top section */
    .baners_top {
        position: relative;
        top: auto;
        left: auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        padding: 20px 0;
    }
    
    .baner-item {
        width: 45%;
        margin: 10px 2%;
    }
    
    .baner-img {
        background: none;
    }
    
    .baner-item img {
        width: 100%;
    }
    
    /* Middle content */
    .middle .container {
        padding-top: 30px;
    }
    
    /* Header title image */
    .header-title-image {
        position: relative;
        left: auto;
        width: 100%;
        margin-bottom: 20px;
    }
    
    .header-title-image .image {
        width: 100%;
        height: auto;
        padding: 0;
        background: none;
    }
    
    .header-title-image .image img {
        width: 100%;
        height: auto;
    }
    
    /* News items */
    .news-item img.alignleft {
        float: none;
        display: block;
        margin: 0 auto 15px auto !important;
        max-width: 100%;
    }
    
    /* Newsletter box */
    .newsletter_box {
        width: 100%;
        height: auto;
        background-size: cover;
        padding: 30px 20px;
        margin-top: 30px;
    }
    
    .newsletter_box h3 {
        float: none;
        width: 100%;
        text-align: center;
        padding-right: 0;
        margin-bottom: 15px;
    }
    
    .newsletter_box form {
        float: none;
        text-align: center;
    }
    
    .newsletter_box .inputField {
        width: 100%;
        max-width: 300px;
        margin-bottom: 10px;
    }
    
    .newsletter_box .btn-submit {
        float: none;
    }
    
    /* Room items */
    .room-item .image {
        float: none;
        width: 100%;
        margin-right: 0;
        margin-bottom: 20px;
        text-align: center;
    }
    
    .room-item .image img {
        max-width: 100%;
        height: auto;
    }
    
    .room-item .description {
        float: none;
        width: 100%;
    }
    
    .services-included li,
    .text .services-included li {
        width: 50%;
    }
    
    /* Footer */
    .footer {
        padding: 30px 15px;
    }
    
    .footer .grid_3,
    .footer .grid_8,
    .footer .grid_13 {
        text-align: center;
        margin-bottom: 20px;
    }
    
    .botmenu ul {
        text-align: center;
    }
    
    .fallow,
    .copyright {
        text-align: center;
    }
    
    /* Contact form */
    .contact-form .row.field_text.alignleft {
        float: none;
        width: 100%;
    }
    
    .contact-form .field_text .inputtext {
        width: 100%;
        max-width: 100%;
        margin-right: 0;
    }
    
    .contact-form .field_textarea textarea {
        width: 100%;
    }
    
    /* Boxes */
    .box {
        margin-bottom: 20px;
    }
    
    /* Sidebar on tablet - show below content */
    .grid_6 {
        margin-top: 30px;
    }
}

/*============================================================================================*/
/* MOBILE STYLES - Max 942px */
/*============================================================================================*/
@media screen and (max-width: 942px) {
    
    /* Show mobile menu toggle */
    .mobile-menu-toggle {
        display: block;
    }
    
    /* Hide desktop menu, show when active */
    .menu-header {
        height: auto;
        background: none;
    }
    
    .menu-header .container {
        padding: 0;
    }
    
    .topmenu {
        display: none;
        height: auto;
        background: #404040;
    }
    
    .topmenu.active {
        display: block;
    }
    
    .topmenu li {
        display: block;
        float: none;
        height: auto;
        margin-left: 0;
        border-bottom: 1px solid #555;
    }
    
    .topmenu li a {
        padding: 15px 20px;
        color: #fff;
    }
    
    .topmenu li a:hover,
    .topmenu .current-menu-item a {
        background: #555;
        color: #fff;
    }
    
    /* Banners - single column on mobile */
    .baner-item {
        width: 100%;
        margin: 10px 0;
    }
    
    /* Services list */
    .services-included li,
    .text .services-included li {
        width: 100%;
        float: none;
    }
    
    /* Table pricing */
    .table-price {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .table-price thead td,
    .table-price tbody td {
        padding: 10px 8px;
        font-size: 12px;
    }
    
    .table-price thead td span {
        padding-top: 10px;
    }
    
    /* Contact form */
    .contact-form .row.field_select.alignleft {
        float: none;
        width: 100%;
    }
    
    .contact-form .ui-selectmenu {
        margin-right: 0;
        width: 100% !important;
    }
    
    /* Reservation form */
    .reservationForm .column_3 {
        width: 100%;
        margin-right: 0;
        float: none;
    }
    
    .reservationForm .inputtext {
        width: 100%;
    }
    
    .reservationForm .split_1,
    .reservationForm .split_2 {
        width: 48%;
        margin-right: 2%;
    }
    
    .reservationForm .split_2 {
        margin-right: 0;
    }
    
    .reservationForm .btn-send {
        float: none;
        margin: 15px 0;
    }
    
    /* Footer menu - stack vertically */
    .botmenu ul li {
        display: block;
        background: none;
        padding: 5px 0;
    }
    
    /* Hide TripAdvisor widget on mobile for cleaner look */
    #TA_socialButtonBubbles95 {
        display: none;
    }
    
    /* Columns */
    .col,
    .col_1_2,
    .col_1_3 {
        width: 100%;
        float: none;
        margin-left: 0;
        margin-right: 0;
    }
}

/*============================================================================================*/
/* SMALL MOBILE STYLES - Max 480px */
/*============================================================================================*/
@media screen and (max-width: 480px) {
    
    /* Logo smaller */
    .logo img {
        max-width: 250px;
    }
    
    /* Icon text smaller */
    .icon-top {
        font-size: 13px;
    }
    
    /* Headers */
    h1 {
        font-size: 20px;
    }
    
    h2 {
        font-size: 18px;
    }
    
    .header-title-image h1,
    .header-title-image strong {
        font-size: 18px;
    }
    
    .header-title-image h1 span,
    .header-title-image strong span {
        font-size: 24px;
    }
    
    /* Baner item text */
    .baner-item h2 {
        font-size: 16px;
    }
    
    .baner-item h2 span {
        font-size: 22px;
    }
    
    /* Newsletter */
    .newsletter_box h3 {
        font-size: 24px;
    }
    
    /* News item */
    .news-item h2 {
        font-size: 18px;
    }
    
    /* Room item */
    .room-item h2 {
        font-size: 18px;
    }
    
    /* Footer text */
    .footer {
        font-size: 11px;
    }
    
    /* Buttons */
    input[type="submit"],
    input[type="button"],
    button {
        width: 100%;
        padding: 10px 20px;
    }
    
    .reset-link {
        float: none;
        display: block;
        text-align: center;
        padding: 10px 0;
    }
    
    .contact-form .contact-submit {
        width: 100%;
        text-indent: 0;
        background-size: contain;
        background-position: center;
    }
    
    /* Form split fields */
    .reservationForm .split_1,
    .reservationForm .split_2 {
        width: 100%;
        margin-right: 0;
        float: none;
    }
}

/*============================================================================================*/
/* SLIDER RESPONSIVE FIXES */
/*============================================================================================*/
#slides {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
}

.slides_container {
    overflow: hidden;
}

/* Navigation arrows */
#slides .prev,
#slides .next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 100;
}

#slides .prev {
    left: 10px;
}

#slides .next {
    right: 10px;
}

/* Caption responsive */
.caption {
    font-size: 18px !important;
}

@media screen and (max-width: 942px) {
    .caption {
        font-size: 12px !important;
        padding: 10px !important;
    }
    
    .caption p {
        margin: 0;
    }
}

/*============================================================================================*/
/* PRINT STYLES */
/*============================================================================================*/
@media print {
    .menu-header,
    .mobile-menu-toggle,
    .newsletter_box,
    .fb-like,
    #TA_socialButtonBubbles95 {
        display: none !important;
    }
    
    body {
        font-size: 12pt;
    }
    
    .container,
    .container_24 {
        width: 100%;
        max-width: none;
    }
}

/* TripAdvisor social button bubbles */
div.socialWidgetCore.green.sm {
    width: 32px !important;
}

div.socialWidgetCore.green.sm > img{
    width: 100% !important;
}