/*
 Theme Name:   DR Website Child Theme
 Theme URI:    https://www.digitalredefined.com/
 Description:  Use this DR Base child theme to extend Bricks.
 Author:       Bricks
 Author URI:    https://www.digitalredefined.com/
 Template:     bricks
 Version:      1.1
 Text Domain:  bricks
*/


.input, input:not([type=submit]), select, textarea {
    color: var(--neutral-dark);
}

.form--light input[type="checkbox"]:not(.ff-el-form-check-checkbox):not(.ff-el-form-check-input) {
    accent-color: var(--primary);
    width: 20px;
    height: 20px;
    padding: 0;
    margin: 0;
    opacity: 1;
    position: relative;
    left: 0;
    margin-right: 5px;
    top: 3px;
    border: 1px solid rgb(221, 221, 221);
    border-radius: 4px;
    outline: 1px solid var(--neutral-light);
}

/* Buttons */
.featured-tabs__view-all-link {
    padding: 14px 40px;
    background: transparent;
    color: #fff;
    border: 2px solid var(--white-trans-40);
    border-radius: 50px;
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    transition: all 0.3s
    ease;
    display: inline-block;
}

.bbg-nav-container{
    background: var(--primary);
    height: 60px;

}

.bbg-nav-menu .menu-item-icon{
    display: none;
}


.header-trips-button {
    display: inline-block;
    position: relative;
    margin: 0 10px;
    vertical-align: middle;
}

.trips-button {
    margin-top: -10px;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: var(--white);
    transition: color 0.2s;
}

.trips-button i, .header-favorites-button i, .header-viewed-button i{
    font-size: 24px;
}

/* Icon Styles */
.trips-icon {
    width: 22px;
    height: 22px;
    stroke: currentColor;
    fill: none;
}

/* Count Badge Styles */
.trips-count {
    position: absolute;
    top: -5px;
    right: -10px;
    background-color: var(--tertiary-medium);
    color: white;
    font-size: 12px;
    font-weight: bold;
    height: 18px;
    width: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    line-height: 1;
}

/* Hide count when zero */
.trips-count:empty {
    display: none;
}

* Header Favorites Button Styles */
.header-favorites-button-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.header-favorites-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
}

.favorites-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}


.favorites-count {
    background-color: var(--tertiary-medium);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    position: absolute;
    top: -8px;
    right: -8px;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.favorites-count.has-count {
    transform: scale(1);
}

.favorites-count:empty {
    display: none;
}

/* Header Viewed Units Button Styles */
.header-viewed-button-wrapper {
    display: inline-flex;
    align-items: center;
    position: relative;
}

.header-viewed-button {
    display: flex;
    align-items: center;
    gap: 8px;
    background: transparent;
    color: var(--white);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    position: relative;
}


.viewed-icon {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
    transition: color 0.2s ease;
}



.viewed-count {
    background-color: var(--tertiary-medium);
    color: white;
    border-radius: 50%;
    min-width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: bold;
    line-height: 1;
    position: absolute;
    top: -8px;
    right: -8px;
    transform: scale(0);
    transition: transform 0.2s ease;
}

.viewed-count.has-count {
    transform: scale(1);
}

.viewed-count:empty {
    display: none;
}

/* For when trips button is in a menu item */
li.menu-item-trips {
    display: inline-block;
    vertical-align: middle;
}

/* Section Styling */
.section-title {
    position: relative;
    display: inline-block;
    padding: 0 60px; /* Add padding to create space for stars */
}


.section-title::before, .section-title::after {
    content: '✦';
    position: absolute;
    color: var(--secondary);
    font-size: 36px;
    animation: twinkle 2s
    ease-in-out infinite;
    top: 20%; /* Center vertically */
    transform: translateY(-50%); /* Adjust for star's own height */
}

.section-title::before {
    left: 0;

}

.section-title::after {
    right: 0;

    animation-delay: 0.5s;
}

.section-bottom-clip{
    clip-path: polygon(0 0, 100% 0, 100% calc(100% - 40px), 0 100%);
}

@keyframes subtleTwinkle {
    0%, 100% { opacity: 0.5; transform: scale(1); }
    50% { opacity: 1; transform: scale(1.2); }
}

.hero-content::before {
    content: '';
    position: absolute;
    width: 700px;
    height: 700px;
    background: var(--secondary);
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    opacity: 0.28;
    top: -250px;
    right: -150px;
    animation: heroBlob1 20s
    ease-in-out infinite;
    z-index: 0;
}

.hero-content::after {
    content: '';
    position: absolute;
    width: 600px;
    height: 600px;
    background: var(--secondary);
    border-radius: 50% 40% 60% 40% / 50% 60% 40% 50%;
    opacity: 0.28;
    bottom: -200px;
    left: -150px;
    animation: heroBlob2 25s ease-in-out infinite reverse;
    z-index: 0;
}

.section-bottom-divider{
    overflow:hidden;
    position:relative;
}
.section-bottom-divider::before{
    content:'';
    font-family:'shape divider from ShapeDividers.com';
    position: absolute;
    bottom: -1px;
    left: -1px;
    right: -1px;
    top: -1px;
    z-index: 3;
    pointer-events: none;
    background-repeat: no-repeat;
    background-size: 100% 90px;
    background-position: 50% 100%;
    background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23fbd8c2"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23fbd8c2"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23fbd8c2"/></svg>');
}

.brxe-back-to-top{
    border-radius: 50px;
    box-shadow: 0 4px 4px var(--black-trans-30);;
}

@media (min-width:768px){
    .section-bottom-divider::before{
        background-size: 100% 90px;
        background-position: 50% 100%;
    }
}

@media (min-width:1025px){
    .section-bottom-divider::before{
        bottom: -0.1vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 90px;
        background-position: 50% 100%;
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23113d6e"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23113d6e"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23113d6e"/></svg>');
    }

    .section-bottom-divider::before{
        bottom: -1.2vw;
        left: -0.1vw;
        right: -0.1vw;
        top: -0.1vw;
        background-size: 100% 90px;
        background-position: 50% 100%;
        background-image: url('data:image/svg+xml;charset=utf8, <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 35.28 2.17" preserveAspectRatio="none"><path d="M35.28 1.67c-3.07-.55-9.27.41-16.15 0-6.87-.4-13.74-.58-19.13.1v.4h35.28z" fill="%23113d6e"/><path d="M35.28 1.16c-3.17-.8-7.3.4-10.04.56-2.76.17-9.25-1.47-12.68-1.3-3.42.16-4.64.84-7.04.86C3.12 1.31 0 .4 0 .4v1.77h35.28z" opacity=".5" fill="%23113d6e"/><path d="M35.28.31c-2.57.84-7.68.3-11.8.43-4.1.12-6.85.61-9.57.28C11.18.69 8.3-.16 5.3.02 2.3.22.57.85 0 .87v1.2h35.28z" opacity=".5" fill="%23113d6e"/></svg>');
    }
}
@media (min-width:2100px){
    .section-bottom-divider::before{
        background-size: 100% calc(2vw + 90px);
    }
}










@keyframes heroBlob1 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(40px, -40px) rotate(8deg); }
    66% { transform: translate(-30px, 30px) rotate(-8deg); }
}

@keyframes heroBlob2 {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    33% { transform: translate(-40px, 40px) rotate(-8deg); }
    66% { transform: translate(30px, -30px) rotate(8deg); }
}

/*Read more and less feature */
.property-description {
    position: relative;
}

.description-text {

    margin-bottom: 10px;
    max-height: 4.8em; /* 3 lines at 1.6 line height */
    overflow: hidden;
    position: relative;
}

.description-text.truncated {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    text-overflow: ellipsis;
}

.description-text.expanded {
    max-height: none;
    overflow: visible;
    white-space: pre-wrap;
}

.read-more-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-weight: 500;
    padding: 0;
    margin-top: 10px;
    display: block;
}

.read-more-btn:hover {
    text-decoration: underline;
}

.read-more-btn:focus {
    outline: none;
    text-decoration: underline;
}

.property-amenities-container {
    position: relative;
    width: 100%;
}

.property-amenities-list {
    line-height: 1.6;
    margin-bottom: 10px;
    max-height: 9.6em; /* 6 lines at 1.6 line height */
    overflow: hidden;
    position: relative;
}

.property-amenities-list.truncated {
    max-height: 0; /* Visible height for truncated state */
    overflow: hidden;
}

.property-amenities-list.expanded {
    max-height: none;
    overflow: visible;
}

.read-more-btn.amenities-read-more-btn {
    background: none;
    border: none;
    color: #007bff;
    cursor: pointer;
    font-weight: 500;
    padding: 0;
    margin-top: 10px;
    display: block;
}

.read-more-btn.amenities-read-more-btn:hover {
    text-decoration: underline;
}

.read-more-btn.amenities-read-more-btn:focus {
    outline: none;
    text-decoration: underline;
}



/* UNIVERSAL STYLING */
/* Main Button Styles */
.header-trips-button {
    display: inline-block;
    position: relative;
    margin: 0 10px;
    vertical-align: middle;
}

/*.trips-button {*/
/*    background: transparent;*/
/*    border: none;*/
/*    cursor: pointer;*/
/*    padding: 5px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    position: relative;*/
/*    color: #333;*/
/*    transition: color 0.2s;*/
/*}*/

/*.trips-button:hover {*/
/*    color: #1e3a8a;*/
/*}*/

/*!* Icon Styles *!*/
/*.trips-icon {*/
/*    width: 22px;*/
/*    height: 22px;*/
/*    stroke: currentColor;*/
/*    fill: none;*/
/*}*/

/*!* Count Badge Styles *!*/
/*.trips-count {*/
/*    position: absolute;*/
/*    top: -5px;*/
/*    right: -5px;*/
/*    background-color: #1e3a8a;*/
/*    color: white;*/
/*    font-size: 12px;*/
/*    font-weight: bold;*/
/*    height: 18px;*/
/*    width: 18px;*/
/*    display: flex;*/
/*    align-items: center;*/
/*    justify-content: center;*/
/*    border-radius: 50%;*/
/*    line-height: 1;*/
/*}*/

/*!* Hide count when zero *!*/
/*.trips-count:empty {*/
/*    display: none;*/
/*}*/

/*!* For when trips button is in a menu item *!*/
/*li.menu-item-trips {*/
/*    display: inline-block;*/
/*    vertical-align: middle;*/
/*}*/

/* Modal Styles (if not already defined elsewhere) */
.br-modal {
    display: none;
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.5);
}

.br-modal-content {
    position: relative;
    background-color: #fefefe;
    margin: 50px auto;
    padding: 0;
    border-radius: 8px;
    max-width: 600px;
    max-height: 80vh;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.br-modal-header {
    padding: 15px 20px;
    background-color: #1e3a8a;
    color: white;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.br-modal-header h2 {
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: white;
}

.br-modal-close {
    color: white;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
}

.br-modal-close:hover {
    opacity: 0.7;
}

.br-modal-body {
    padding: 20px;
    overflow-y: auto;
    max-height: calc(80vh - 60px);
}

/* Saved Trip List */
#saved-trips-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.saved-trip-item {
    display: flex;
    gap: 15px;
    border-bottom: 1px solid #eee;
    padding-bottom: 20px;
}

.saved-trip-image {
    flex: 0 0 150px;
    position: relative;
}

.saved-trip-image img {
    width: 100%;
    height: 100px;
    object-fit: cover;
    border-radius: 4px;
}

.remove-saved-trip {
    position: absolute;
    top: 5px;
    left: 5px;
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    border-radius: 3px;
    padding: 3px 6px;
    font-size: 11px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.remove-saved-trip:hover {
    background-color: rgba(0, 0, 0, 0.8);
}

.saved-trip-details {
    flex: 1;
    display: flex;
    flex-direction: column;
}

.saved-trip-details h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #1e3a8a;
}

.saved-trip-details p {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #4b5563;
}

.saved-trip-price {
    font-size: 18px !important;
    font-weight: bold;
    color: #1e3a8a !important;
    margin: 5px 0 15px 0 !important;
}

.book-saved-trip {
    background-color: #1e3a8a;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 14px;
    cursor: pointer;
    border-radius: 4px;
    margin-bottom: 8px;
    transition: background-color 0.2s;
}

.book-saved-trip:hover {
    background-color: #1c3478;
}

.show-detailed-quote {
    font-size: 13px;
    color: #4b5563;
    text-decoration: none;
    align-self: center;
}

.show-detailed-quote:hover {
    text-decoration: underline;
}

/* Quote Details */
.quote-header {
    margin-bottom: 20px;
}

.quote-header h3 {
    margin: 0 0 5px 0;
    font-size: 18px;
    color: #1e3a8a;
}

.quote-header p {
    margin: 0 0 5px 0;
    font-size: 14px;
    color: #4b5563;
}

.quote-breakdown {
    border-top: 1px solid #eee;
    padding-top: 15px;
}

.quote-breakdown h4 {
    margin: 0 0 15px 0;
    font-size: 16px;
    color: #1e3a8a;
}

.quote-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 10px;
    font-size: 14px;
}

.quote-total {
    border-top: 1px solid #eee;
    padding-top: 10px;
    margin-top: 10px;
    font-weight: bold;
    font-size: 16px;
}

.quote-discount {
    margin-top: 15px;
    font-size: 13px;
    color: #059669;
}

/* Mobile Styles */
@media (max-width: 768px) {
    .header-trips-button {
        margin: 0 5px;
    }

    .br-modal-content {
        margin: 20px auto;
        width: calc(100% - 40px);
    }

    .saved-trip-item {
        flex-direction: column;
    }

    .saved-trip-image {
        flex: none;
        width: 100%;
    }
}