@charset "UTF-8";
/*
 * CYA Yacht Shortcodes - consolidated stylesheet.
 * Extracted from index.php's inline <style> blocks so styling can be
 * edited independently of the PHP template/logic that generates markup.
 * Section headers below note which shortcode/method each block originally
 * belonged to, purely for reference - CSS doesn't care about the grouping.
 */

/* --- From render_debug_block() --- */
            .cya-debug-block {
                background: #1c1c1c;
                color: #7CFC7C;
                font-family: monospace;
                font-size: 12px;
                padding: 10px 16px;
                border-radius: 6px;
                margin-bottom: 20px;
                overflow-x: auto;
            }
            .cya-debug-block summary {
                color: #fff;
                font-family: inherit;
                font-size: 12px;
                cursor: pointer;
                padding: 2px 0;
                user-select: none;
            }
            .cya-debug-block[open] summary {
                margin-bottom: 8px;
            }
            .cya-debug-block pre {
                margin: 0;
                white-space: pre-wrap;
                word-break: break-word;
                max-height: 500px;
                overflow-y: auto;
            }

/* --- From render_filter_form() --- */
            .cya-search-box {
                background: #F8F8F8;
                border-radius: 10px;
                padding: 25px;
                margin-bottom: 30px;
            }

            .cya-field-grid {
                display: grid;
                grid-template-columns: 1fr;
                gap: 12px;
                width: 100%;
            }

            .cya-container {
                display: flex;
                justify-content: space-between;
                max-width: 1240px;
                margin: 0 auto;
                gap: 20px;
            }

            .cya-filter {
                width: 30%;
                border-radius: 1rem;
                margin-bottom: 2rem;
                position: sticky;
                overflow-y: scroll;
                top: 10px;
                height: 100vh;
            }

            .cya-facet-filters .facetwp-facet {
                font-size: 16px;
                margin: 0;
                margin-bottom: 0;
            }

            .cya-results {
                width: 70%;
                display: flex;
                flex-wrap: wrap;
                gap: 15px;
                justify-content: start;
            }

            .facetwp-template .cya-results {
                width: 100%;
            }




            .cya-modal {
                position: fixed;
                top: 0;
                left: 0;
                width: 100vw;
                height: 100vh;
                background: rgba(0, 0, 0, 0.5);
                display: none;
                align-items: center;
                justify-content: center;
                padding: 20px;
                overflow-y: auto;
                z-index: 9999;

                /* Animation */
                animation: fadeInModal 0.3s ease forwards;
            }

            .cya-modal.show {
                display: flex;
            }

            .cya-modal-inner {
                background: #fff;
                padding: 20px;
                border-radius: 8px;
                max-width: 900px;
                width: 90%;
                max-height: 90vh;
                /* limit height */
                overflow-y: auto;
                box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);

                /* Animation */
                transform: translateY(-30px);
                opacity: 0;
                animation: slideInModal 0.3s ease forwards;
            }

            /* Animations */
            @keyframes fadeInModal {
                from {
                    opacity: 0;
                }

 to {
                    opacity: 1;
                }
            }

            @keyframes slideInModal {
 to {
                    opacity: 1;
                    transform: translateY(0);
                }
            }

            .cya-close {
                cursor: pointer;
                font-size: 24px;
                float: right;
            }

            /* Responsiveness */
            @media(max-width: 800px) {
                .cya-container {
                    flex-direction: column;
                }

                .cya-filter {
                    width: 100%;
                    margin-bottom: 20px;
                }

                .cya-results {
                    width: 100%;
                }
            }



            .cya-filter {
                border-radius: 1rem;
                margin-bottom: 2rem;

            }

            .cya-field-grid label {
                display: block;
                font-weight: 900;
                margin-bottom: 0.5rem;
                color: #333;
            }

            .cya-field-grid input,
            .cya-field-grid select {
                height: 42px;
                width: 100% !important;
                max-width: 100% !important;
                padding: 0.6rem !important;
                border: 1px solid #ccc !important;
                border-radius: 0.5rem !important;
                background-color: #fefefe !important;
                font-size: 16px;
            }

            .cya-search-btn button {
                padding: 1.75rem 3.5rem;
                font-size: 2rem;
                border: none;
                border-radius: 0.5rem;
                background-color: #6EC1E4;
                color: white;
                font-weight: bold;
                cursor: pointer;
                transition: background 0.3s ease;
            }

            .cya-search-btn button:hover {
                background-color: #6EC1E4;
            }

            .fiter-heading {
                display: flex;
                align-items: center;
                font-size: 28px;
                font-weight: 900;
                gap: 10px;
            }

            .fiter-heading img {
                height: 24px;
                width: 24px;
                object-fit: contain;
            }

            .cya-card {
                padding: 10px;
                border-radius: 20px;
                width: 32%;
                border: 1px solid #DFE0E3;
                /* border-radius: 8px; */
                text-align: center;
                display: flex;
                flex-direction: column;
            }

            .cya-card:hover {
                transform: translateY(-5px);
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
            }

            #cya-results img.cya-card-image {
                width: 100%;
                height: 200px;
                object-fit: cover;
                background-color: #E8EBF0;
                border-radius: 12px;
                display: block;
            }

            .cya-card h3 {
                color: #0C2456;
                margin: 1rem;
                font-weight: 600;
                font-size: 20px;
            }

            #cya-results .short-detail-wrap {
                display: flex;
                flex-flow: nowrap;
                justify-content: space-between;
                gap: 16px;
                margin-bottom: 15px;
                margin-top: auto;
            }

            #cya-results .short-detail-wrap p {
                margin: 0;
                flex: 0 0 25%;

            }

            #cya-results .cya-view:hover {
                background-color: #4a4a4a !important;
                color: #ffff;
            }

            .cya-card p {
                color: #4A4A4A;
                line-height: 1.4;
                margin: 0 0 15px 0;

            }

            p.yacht-price {
                font-size: 20px;
                color: #000;
                font-weight: bold;
            }

            #cya-results .cya-view {
                background: #6EC1E4 !important;
                border: 0;
                padding: 14px 60px;
                color: #ffff !important;
                border-radius: 100px;
                font-family: Montserrat;
                font-weight: 600;
                font-size: 16px;
                line-height: 100%;
                text-align: center;
                text-transform: uppercase;
            }





            /* Make number inputs behave like text inputs for width */
            input[type="number"] {
                /* Remove spinner buttons for Chrome, Safari, Edge, Opera */
                -webkit-appearance: textfield;
                -moz-appearance: textfield;
                appearance: textfield;

                /* Set width behavior like text inputs */
                width: 100%;
                box-sizing: border-box;

                /* Optional: consistent padding */
                padding: 8px 12px;
            }

            /* Remove spinner buttons for Firefox */
            input[type="number"]::-webkit-outer-spin-button,
            input[type="number"]::-webkit-inner-spin-button {
                -webkit-appearance: none;
                margin: 0;
            }

            /* Optional: Style the container divs for consistent layout */
            #cya-search-form div {
                margin-bottom: 15px;
            }

            /* Optional: Style the labels for consistent layout */
            #cya-search-form label {
                display: block;
                margin-bottom: 5px;
            }

            @media(max-width:1200px) {
                .cya-card {
                    /*width: 48%;*/
                    flex: 0 0 calc((100% - 15px) / 2);
                    padding: 10px 10px 30px 10px;
                }

                #cya-results .short-detail-wrap {
                    max-width: 80%;
                    margin: 0 auto;
                }
            }

            @media (max-width: 1024px) {
                .cya-mobile-sticky {
                    position: sticky;
                    top: 0;
                    z-index: 100;
                }
            }

            @media(max-width:991px) {
                .cya-card {
                    /*width: 48%;*/
                    flex: 0 0 calc((100% - 15px) / 2);
                    padding: 10px 10px 30px 10px;
                }

                #cya-results .short-detail-wrap {
                    max-width: 70%;
                    margin: 0 auto;
                }

                .cya-filter {
                    position: relative !important;
                    top: 0;
                    height: auto;
                    overflow-y: initial;
                }
            }

            @media(max-width:767px) {
                .cya-card {
                    /*width: 49%;*/
                    flex: 0 0 calc((100% - 15px) / 2);
                    padding: 10px;
                }

                #cya-results .short-detail-wrap {
                    max-width: 100%;
                    margin: 0 auto;
                }

                .cya-filter {
                    position: relative;
                    top: 0;
                    height: auto;
                    overflow-y: initial;
                }

                /*.cya-results {
                    gap: 0;
                }*/

                .cya-card h3 {
                    font-size: 18px;
                    margin: 10px 0;
                }

                .cya-card p {
                    font-size: 14px;
                }

                #cya-results .cya-view {
                    font-size: 14px;
                    width: 100%;
                    padding: 10px;
                }

                #cya-results img.cya-card-image {
                    height: 170px;
                }
            }

            @media(max-width:580px) {
                .cya-card {
                    width: 100%;
                    flex: 0 0 100%;
                }
            }

            /* Loading spinner shown in #cya-results while a search is in flight */
            .cya-loading-wrapper {
                display: flex;
                align-items: center;
                justify-content: center;
                min-height: 200px;
                width: 100%;
            }

            .lds-roller,
            .lds-roller div,
            .lds-roller div:after {
                box-sizing: border-box;
            }
            .lds-roller {
                display: inline-block;
                position: relative;
                width: 80px;
                height: 80px;
                color: #1c4c5b;
            }
            .lds-roller div {
                animation: lds-roller 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
                transform-origin: 40px 40px;
            }
            .lds-roller div:after {
                content: " ";
                display: block;
                position: absolute;
                width: 7.2px;
                height: 7.2px;
                border-radius: 50%;
                background: currentColor;
                margin: -3.6px 0 0 -3.6px;
            }
            .lds-roller div:nth-child(1) {
                animation-delay: -0.036s;
            }
            .lds-roller div:nth-child(1):after {
                top: 62.62742px;
                left: 62.62742px;
            }
            .lds-roller div:nth-child(2) {
                animation-delay: -0.072s;
            }
            .lds-roller div:nth-child(2):after {
                top: 67.71281px;
                left: 56px;
            }
            .lds-roller div:nth-child(3) {
                animation-delay: -0.108s;
            }
            .lds-roller div:nth-child(3):after {
                top: 70.90963px;
                left: 48.28221px;
            }
            .lds-roller div:nth-child(4) {
                animation-delay: -0.144s;
            }
            .lds-roller div:nth-child(4):after {
                top: 72px;
                left: 40px;
            }
            .lds-roller div:nth-child(5) {
                animation-delay: -0.18s;
            }
            .lds-roller div:nth-child(5):after {
                top: 70.90963px;
                left: 31.71779px;
            }
            .lds-roller div:nth-child(6) {
                animation-delay: -0.216s;
            }
            .lds-roller div:nth-child(6):after {
                top: 67.71281px;
                left: 24px;
            }
            .lds-roller div:nth-child(7) {
                animation-delay: -0.252s;
            }
            .lds-roller div:nth-child(7):after {
                top: 62.62742px;
                left: 17.37258px;
            }
            .lds-roller div:nth-child(8) {
                animation-delay: -0.288s;
            }
            .lds-roller div:nth-child(8):after {
                top: 56px;
                left: 12.28719px;
            }
            @keyframes lds-roller {
                0% {
                    transform: rotate(0deg);
                }
                100% {
                    transform: rotate(360deg);
                }
            }

/* --- From render_random_yachts() --- */
			  .scuba-filter-wrapper input[type=checkbox],  .scuba-filter-wrapper input[type=radio] {
    height: 30px !important;
    width: 30px !important;
    padding: 6px;
}
            .cya-random-yachts-container {
                display: flex;
                gap: 20px;
                justify-content: space-between;
                flex-wrap: wrap;
            }
			 .cya-random-yachts-container h3 {
                	color: #0C2456;
    margin: 1rem;
    font-weight: 600;
    font-size: 20px;
            }
			.cya-random-yachts-container p {
          	color: #4A4A4A;
    line-height: 1.4;
    margin: 0 0 15px 0;
            }

            .cya-random-yacht {
                width: 23%;
				    padding: 10px 10px 20px 10px;
                border-radius: 8px;
                border: 1px solid #DFE0E3;
                text-align: center;
                box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
            }

            .cya-random-yacht img {
                width: 100%;
                height: 200px;
                object-fit: cover;
                border-radius: 12px;
            }

            .cya-random-yacht h3 {
                font-size: 18px;
                color: #0C2456;
                margin: 10px 0;
            }

            .cya-random-yacht p {
                font-size: 16px;
				font-weight: bolder;
                color: #4A4A4A;
                margin: 5px 0;
            }
			p.yacht-price {
    font-size: 20px;
    color: #000;
    font-weight: bold;
				    margin: 0 0 15px 0;
}
            .cya-view-all-btn {
                text-align: center;
                margin-top: 30px;
            }
			button.cya-view {
    background: #6EC1E4 !important;
    border: 0;
    padding: 14px 60px;
    color: #ffff !important;
    border-radius: 100px;
    font-family: Montserrat;
    font-weight: 600;
    font-size: 16px;
    line-height: 100%;
    text-align: center;
    text-transform: uppercase;
}
			button.cya-view:hover{background-color: #4a4a4a !important;
				color: #ffff;}

            .cya-view-all-btn-link {
                background: #6EC1E4 !important;
                border: 0;
                padding: 14px 60px;
                color: #ffff !important;
                border-radius: 100px;
                font-family: Montserrat;
                font-weight: 600;
                font-size: 16px;
                line-height: 100%;
                text-align: center;
                text-transform: uppercase;
            }
			.cya-view-all-btn-link:hover{
				background-color: #4a4a4a !important;
				color: #ffff;
			}
			@media(max-width:991px){
				.cya-random-yacht {
    width: 31%;

}

			}
						@media(max-width:767px){
				.cya-random-yacht {
    width: 100%;

}

			}

/* --- From render_redirect_search_form() --- */
            /*.cya-inline-search {
                display: flex;
                gap: 12px;
                align-items: flex-end;
                background: #fff;
                padding: 20px;
                justify-content: center;
            }*/

           /*.cya-hp-search-form-parent-container {
                max-width: 1088px;
                margin: auto;
            }*/

            form.cya-inline-search {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                align-items: stretch;
                gap: 15px;
                justify-content: space-between;
            }

            /* flex: 1 1 480px lets this side take the remaining space and
               shrink/wrap its own fields as needed; min-width: 0 overrides
               flexbox's default min-width:auto on flex items, which would
               otherwise fight genuine shrinking/wrapping under a squeeze. */
            form.cya-inline-search .cya-inline-search-filters-container {
                display: flex;
                flex-direction: row;
                flex-wrap: nowrap;
                flex: 1 1 480px;
                min-width: 0;
                gap: 15px;
                justify-content: space-between;
                padding: 20px 20px 28px 46px;
            }

            form.cya-inline-search .cya-inline-search-filters-container input,
            form.cya-inline-search .cya-inline-search-filters-container select {
                height: 42px;
            }

            /* Grid items stretch to fill their cell's width by default,
               but the actual <input>/<select> inside each one doesn't
               automatically match that - without this they'd only be as
               wide as their own content/intrinsic size within an
               otherwise full-width cell. Only matters at the two grid
               breakpoints above; harmless at desktop width, where this
               container is flex instead. */
            form.cya-inline-search .cya-inline-search-filters-container input,
            form.cya-inline-search .cya-inline-search-filters-container select {
                width: 100%;
            }

            /* Fixed flex-basis (not just padding) so the button reads as
               genuinely wider, matching the reference screenshot's
               proportions, rather than only as wide as its own text +
               padding. flex-wrap above on the parent is what actually
               guarantees this can never overlap the filter fields at any
               width - if there's ever not enough room side by side, this
               wraps to its own line below instead of overlapping. */
            form.cya-inline-search .cya-inline-search-button-container {
                display: flex;
                flex: 0 0 180px;
            }

            /* This chain (button-container -> its child div -> the button
               itself) is what makes the button fill the full height of
               its row on desktop - each level needs to explicitly stretch
               the next, since flex's default cross-axis stretch only
               reaches one level deep on its own. */
            form.cya-inline-search .cya-inline-search-button-container > div {
                display: flex;
                flex: 1;
            }

            form.cya-inline-search .cya-inline-search-button-container button {
                flex: 1;
                width: 100%;
                height: 100%;
            }

            form.cya-inline-search .cya-inline-search-filters-container div, 
            .cya-inline-search .cya-inline-search-filters-container div,
            form.cya-inline-search .cya-inline-search-button-container div, 
            .cya-inline-search .cya-inline-search-button-container div {
                display: flex;
                flex-direction: column;
                height: 100%;
            }

            form.cya-inline-search .cya-inline-search-filters-container .scuba-filter-checkbox-wrapper {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: start;
            }

            /*.cya-inline-search label {
                font-size: 13px;
                margin-bottom: 4px;
                color: #333;
            }*/

            form.cya-inline-search label {
                font-weight: 600;
                margin-bottom: 8px;
                font-size: 14px;
                color: #333;
            }

            .cya-inline-search input,
            .cya-inline-search select {
                padding: 6px 10px;
                font-size: 14px;
                border: 1px solid #ccc;
                border-radius: 4px;
                background-color: #fff;
            }

            form.cya-inline-search input[readonly] {
                /*background-color: rgba(0,0,0,0);*/
                background-color: #fff;
            }

            /*.cya-inline-search button {
                padding: 16px 20px;
                background: #c6b895;
                color: #fff;
                border: none;
                border-radius: 4px;
                font-weight: bold;
                cursor: pointer;
            }*/

            /* Original Button Styling
            form.cya-inline-search button {
                padding: 14px;
                font-size: 16px;
                background: linear-gradient(135deg, #2c7be5, #5a67d8);
                color: #fff;
                border: none;
                border-radius: 14px;
                cursor: pointer;
                transition: all 0.3s ease;
                font-weight: bold;
                text-transform: uppercase;
                letter-spacing: 1px;
                box-shadow: 0 4px 14px rgba(44, 123, 229, 0.4);
            }*/

            form.cya-inline-search button {
                padding: 14px;
                font-size: 24px;
                font-weight: 400;
                /*background: linear-gradient(135deg, #2c7be5, #5a67d8);*/
                background-color: #2c7be5;
                color: #fff;
                border: none;
                border-radius: 0;
                cursor: pointer;
                transition: all 0.3s ease;
                text-transform: uppercase;
                letter-spacing: 1px;
                transition: background-color 0.2s;
            }

            form.cya-inline-search button:hover {
                /*background: linear-gradient(135deg, rgb(249, 31, 85), rgb(226, 79, 115));*/
                /*background-color: rgb(249, 31, 85);*/
                background-color: #5a67d8;
            }

            form.cya-inline-search .cya-start-date-field, form.cya-inline-search .cya-end-date-field {
                min-width: 130px;
                max-width: 140px;
                font-size: 14px;
                border-color: rgb(204, 204, 204);
            }

            form.cya-inline-search #cya-guests {
                font-size: 14px;
            }

            form.cya-inline-search .scuba-filter-wrapper input[type="checkbox"], .scuba-filter-wrapper input[type="radio"] {
                height: 40px !important;
                width: 40px !important;
                padding: 12px;
            }

            /* Mobile HP Popup */
            .sheer-hp-popup form.cya-inline-search label {
                color: #fff;
                font-weight: 400;
            }

            .sheer-hp-popup .cya-inline-search-filters-container {
                padding: 0;
            }

            @media screen and (max-width: 1108px) {
                form.cya-inline-search .scuba-filter-wrapper-container {
                    display: none !important;
                }
            }

            /*Handle Tablet form fields wrapping */
            @media screen and (max-width: 1030px) {
                form.cya-inline-search .cya-inline-search-filters-container {
                    justify-content: start;
                }
                
                form.cya-inline-search .cya-inline-search-filters-container div, 
                .cya-inline-search .cya-inline-search-filters-container div,
                form.cya-inline-search .cya-inline-search-button-container div, 
                .cya-inline-search .cya-inline-search-button-container div {
                    height: auto;
                }

                form.cya-inline-search label {
                    margin-bottom: 0px;
                }

                form.cya-inline-search .cya-inline-search-filters-container {
                    gap: 5px 15px;
                }
            }

            /* Tablet only (768px-1024px): 2 columns for the first 4
               fields (Start Date, End Date, Guests, Location), 2 rows -
               everything from the 5th field onward (Boat Type, Scuba)
               spans the full row width instead of pairing up. Grid's
               auto-placement pushes each full-span item onto its own new
               row on its own, no explicit row/nth-of-type math needed. */
            @media (max-width: 1024px) /*and (min-width: 769px)*/ {
                form.cya-inline-search .cya-inline-search-filters-container {
                    display: grid;
                    grid-template-columns: repeat(2, 1fr);
                    gap: 5px 15px;
                }

                form.cya-inline-search .cya-inline-search-filters-container > div:nth-child(n+5) {
                    grid-column: 1 / -1;
                }

                form.cya-inline-search .cya-start-date-field, form.cya-inline-search .cya-end-date-field {
                     max-width: 100%;
                }
               
            }

            /* Mobile (below 768px): single column, every field stacked
               full-width on its own row. */
            @media (max-width: 768px) {
                /*form.cya-inline-search .cya-inline-search-filters-container {
                    display: grid;
                    grid-template-columns: 1fr;
                    gap: 15px;
                }*/

                form.cya-inline-search {
                    gap: 0;
                }

                form.cya-inline-search .cya-start-date-field, form.cya-inline-search .cya-end-date-field {
                     max-width: 100%;
                }

                form.cya-inline-search .cya-inline-search-filters-container {
                    padding: 28px 20px 28px 20px;
                }

                .sheer-hp-popup form.cya-inline-search .cya-inline-search-filters-container {
                    padding: 0 0 28px 0;
                }

                .sheer-hp-popup form.cya-inline-search button {
                    background: linear-gradient(135deg, #2c7be5, #5a67d8);
                }

                /* Button only ever wraps onto its own line at/below 768px -
                above that, it always stays on the same row as the filters,
                regardless of how tight things get (the filters side
                shrinks/wraps its own fields instead - see below). */
                form.cya-inline-search {
                    flex-wrap: wrap;
                }

                /* Button takes up 100% width on mobile screen size */
                form.cya-inline-search .cya-inline-search-button-container {
                    display: flex;
                    flex: 1 1 auto;
                }
            }

            

/* --- From render_yacht_detail() --- */
			.scuba-filter-wrapper input[type=checkbox],  .scuba-filter-wrapper input[type=radio] {
    height: 30px !important;
    width: 30px !important;
    padding: 6px;
}
            .yacht-detail-container .cya-view:hover {
                background-color: #4a4a4a !important;
                color: #ffff;
            }



            .yacht-detail-container .cya-view {
                background: #6EC1E4 !important;
                border: 0;
                padding: 14px 60px;
                color: #ffff !important;
                border-radius: 100px;
                font-family: Montserrat;
                font-weight: 600;
                font-size: 16px;
                line-height: 100%;
                text-align: center;
                text-transform: uppercase;
            }

            .yacht-detail-container {
                max-width: 90%;
                margin: auto;
                padding: 30px;
                font-family: 'Montserrat', sans-serif;
            }

            .yacht-detail-container h1 {
                text-align: center;
                margin-bottom: 20px;
            }

            .yacht-detail-container .video-container {
                margin-bottom: 30px;
            }

            .yacht-gallery {
                display: flex;
                flex-wrap: wrap;
                gap: 10px;
                margin: 20px 0;
            }

            .yacht-gallery img {
                width: calc(33.33% - 10px);
                border-radius: 6px;
                object-fit: cover;
                height: 200px;
            }

            @media (max-width: 768px) {
                .yacht-gallery img {
                    width: 100%;
                    height: auto;
                }
            }

            .spec-table {
                width: 100%;
                border-collapse: collapse;
                margin-top: 20px;
            }

            .spec-table th,
            .spec-table td {
                border: 1px solid #ccc;
                padding: 10px;
                text-align: left;
            }

            .spec-table th {
                background: #3a7bd5;
                color: white;
            }

            .calendar-section {
                background: white;
                padding: 20px;
                border-radius: 10px;
                box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
                margin-top: 40px;
				height:500px;
				overflow-y:scroll;
            }

            .short-line {
                height: 50px;
                width: 1px !important;
                background: #D2D2D2;
            }

            .cya-card .short-detail-wrap {
                margin-bottom: 24px !important;
            }

            .cya-card .short-detail-wrap .short-line {
                display:none;
            }

            @media screen and (min-width: 1024px) {
                .cya-card .short-detail-wrap {
                    padding: 0 10%;
                }
            }



            section.hero-detail {
                height: 650px;
                position: relative;
            }

            .overlay {
                position: absolute;
                height: 100%;
                width: 100%;
                top: 0;
                left: 0;
                background: linear-gradient(180deg, #0000009c -62.25%, rgba(0, 0, 0, 0) 100%)
            }

            .yacht-hero-heading h1 {
                font-family: Montserrat;
                font-weight: 700;
                font-size: 80px;
                line-height: 100%;
                letter-spacing: 0;
                color: #ffff;
                z-index: 1;
                position: relative;
            }

            .yacht-text {
                text-align: center;
                font-family: 'Abel';
                font-weight: 400;
                font-size: 32px;
                line-height: 100%;
                letter-spacing: 0%;
                text-align: center;
                color: #fff;
                position: relative;
                margin-top: 20px;
            }

            .info-wrap {
                display: flex;
                justify-content: space-between;
                gap: 50px;
                align-items: center;
                margin: 50px 0;
            }

            .yacht-detail-container .short-detail-wrap {
                display: flex;
                gap: 50px;
                align-items: center;
            }

            .btn-wrap button {
                width: 299px;
                height: 50px;
                border-radius: 100px;
                padding-top: 15px;
                padding-right: 12px;
                padding-bottom: 15px;
                padding-left: 12px;
                display: flex;
                align-items: center;
                justify-content: center;
            }

            .yacht-detail-container .short-detail-wrap p {
                margin: 0;
                font-family: 'Abel';
                font-size: 40px;
                line-height: 100%;
                text-align: center;
                text-transform: uppercase;
            }

            .yacht-detail-container .short-detail-wrap span {
                font-weight: 700;
                width: 100%;
                display: block;
                font-size: 22px;
            }

            .yachtshortimg {
                display: flex;
                gap: 20px;
                align-items: center;
                margin-bottom: 20px;
            }

            .yacht-static-text-wrap {
                padding: 80px 0;
            }

            .yacht-static-text-wrap h2 {
                color: #0C2456;
            }

            .main-slider {
                width: 100%;
                height: 600px;
            }

            .main-slider .swiper-slide img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .thumbnail-slider {
                height: 200px;
                margin-top: 10px;
            }

            .thumbnail-slider .swiper-slide {
                width: 150px;
                height: 200px;
                opacity: 0.4;
                cursor: pointer;
            }

            .thumbnail-slider .swiper-slide-thumb-active {
                opacity: 1;
            }

            .thumbnail-slider img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }

            .desc-wrap {
                display: flex;
                flex-flow: wrap;
            }

            .yacht-description {
                font-size: 16px;
                max-width: 70%;
                color: #000;
                font-weight: 400;
                font-family: 'montserrat';
                margin-bottom: 40px;

            }

            .about-yacht {
                flex: 0 0 70%;
            }

            .yacht-cal {
                flex: 0 0 30%;
            }

            .about-yacht h4 {
                text-transform: uppercase;
                font-size: 20px;
            }

            h2.abt-yacht {
                color: #0c2456;
                text-transform: capitalize;
            }

            .yacht-detail-container h2 {
                color: #0c2456;
                text-transform: capitalize !important;

            }

            .price-wrap {
                box-shadow: 0px 2px 23.8px 4px #CDD1E240;
                border: 1px solid #DFE0E3;
                border-radius: 20px;
                padding: 20px 40px;
            }

            span.yacht-price {
                color: #0C2456;
                font-size: 22px;
            }

            .price-wrap p {
                font-family: Montserrat;
                font-weight: 500;
                font-size: 18px;
                line-height: 100%;
            }

            .calendar-section h2 {
                font-family: Montserrat;
                font-weight: 600;
                font-size: 22px;
                line-height: 100%;
                letter-spacing: 0%;
                font-weight: 700;
                margin-bottom: 20px;
                color: #0C2456;
                text-transform: capitalize;

            }

            .calendar-section {
                background: white;
                padding: 20px;
                box-shadow: 0px 2px 23.8px 4px #CDD1E240;
                border: 1px solid #DFE0E3;
                border-radius: 20px;
                margin-top: 40px;
            }

            .calendar-event strong {
                color: #3A7BD5;
            }

            .calendar-event {
                color: #0C2456;
                font-weight: 400;
                border: 1px solid #D9D9D9;
                border-radius: 8px;
                padding: 10px;
                margin-bottom: 20px;
                font-size: 14px;
            }

            .yacht-specs-grid {
                display: grid;
                grid-template-columns: repeat(5, 1fr);
                gap: 60px;
                background: #f7f7f9;
                padding: 50px;
                border-radius: 30px;
                text-align: center;
                margin: 90px 0;
            }

            .spec-item {
                display: flex;
                flex-direction: column;
                align-items: center;
                font-size: 14px;
            }

            .spec-icon {
                font-size: 20px;
                color: #1e73be;
                margin-bottom: 6px;
            }

            .spec-item strong {
                text-transform: uppercase;
                color: #4A4A4A;
                font-weight: bold;
                font-size: 18px;
                margin-bottom: 4px;
            }

            .spec-item div {
                font-size: 20px;
                font-weight: 400;
            }

            span.spec-icon img {
                height: 24px !important;
                width: 24px !important;
            }

            section.sec-desc {
                margin: 60px 0;
            }

            .video-container {
                position: relative;
                width: 100%;
                max-width: 100%;
                height: 540px;
                overflow: hidden;
                border-radius: 30px;
            }

            .video-container iframe {
                width: 100%;
                height: 100%;
                display: block;
                z-index: 1;
                position: relative;
            }

            .video-overlay {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
                z-index: 2;
                cursor: pointer;
                background-color: rgba(0, 0, 0, 0.2);
                /* Optional dim */
                display: flex;
                justify-content: center;
                align-items: center;
            }

            .video-overlay img {
                max-width: 100%;
                width: 100%;
                height: 100%;
                transition: transform 0.3s ease;
                object-fit: cover;
            }

            .video-overlay:hover img {
                transform: scale(1.05);
            }

            .video-wrapper h2 {
                max-width: 340px;
            }

            .video-wrapper {
                margin-bottom: 100px;
            }

            .crew-data p {
                font-family: 'montserrat';
                font-weight: 400;
                font-size: 16px;
                line-height: 34px;
            }

            .yacht-detail-container .calendar-section .cya-view {
                display: block;
                width: 100%;
            }

            @media(max-width:991px) {
                .custom-cursor {
                    display: none;
                }

                .swiper-button-next,
                .swiper-button-prev {
                    display: block;
                }

                .thumbnail-slider {
                    height: 100px;
                }

                .thumbnail-slider .swiper-slide {
                    height: 100px;
                }

                .yacht-cal {
                    flex: 0 0 40%;
                }

                .about-yacht {
                    flex: 0 0 60%;
                }

                section.hero-detail {
                    height: auto;
                }

                .yacht-hero-heading h1 {
                    font-size: 40px;
                }


                .yacht-text {
                    font-size: 18px;
                }


                .yacht-detail-container {
                    max-width: 100%;
                    padding: 20px;
                }

                .yacht-detail-container .short-detail-wrap p {
                    font-size: 30px;
                }

                .yacht-detail-container .short-detail-wrap span {
                    font-size: 16px;
                }

                .yacht-detail-container .cya-view {
                    padding: 10px 40px !important;
                    font-size: 12px;
                }

                .yacht-static-text-wrap {
                    padding: 40px 0;
                }

                .yacht-static-text-wrap h2 {
                    font-size: 30px;
                }

                .main-slider {
                    height: auto;
                }

                h2.abt-yacht {
                    font-size: 30px;
                }

                .about-yacht h4 {
                    font-size: 16px;
                }

                .yacht-description {
                    max-width: 90%;
                }

                .price-wrap {
                    padding: 20px;
                }

                .price-wrap p {
                    line-height: 1.3;
                    font-size: 16px;
                }

                .yacht-specs-grid {
                    grid-template-columns: repeat(2, 1fr);
                    padding: 40px;
                    gap: 20px;
                    margin: 50px 0;
                }

                .video-wrapper h2 {
                    max-width: 100%;
                    font-size: 30px;
                }

                .video-container {
                    height: 300px;
                }

                .video-wrapper {
                    margin-bottom: 60px;
                }

                .accordion-toggle {
                    font-size: 18px;
                }

                section.sec-desc {
                    margin: 30px 0;
                }
            }

            @media(max-width:767px) {
                 .desc-wrap {
                text-align: center;
            }
                .info-wrap {
                    flex-flow: wrap;
                    justify-content: center;
                    gap: 20px;
                    margin: 30px 0;
                }

                .yacht-detail-container .short-detail-wrap {
                    gap: 20px;
                }

                .yachtshortimg {
                    flex-flow: wrap;
                    justify-content: center;
                    text-align: center;
                }

                .yacht-static-text-wrap h2 {
                    text-align: center;
                    font-size: 25px;
                    margin: 0;
                }

                .about-yacht {
                    flex: 0 0 100%;
                }

                h2.abt-yacht {
                    font-size: 25px;
                }

                .desc-wrap {
                    gap: 50px;
                }

                .yacht-cal {
                    flex: 0 0 100%;
                }

                .yacht-specs-grid {
                    padding: 30px;
                    gap: 10px;
                    margin: 40px 0;
                }


                .spec-item div {
                    font-size: 16px;
                }

                .spec-item strong {
                    font-size: 14px;
                }

                .spec-icon {
                    width: 100%;
                    display: flex;
                    justify-content: center;
                }

                .price-wrap {
                    text-align: center;
                }

                .calendar-section h2 {
                    text-align: center;
                }

                .btn-wrap {
                    text-align: center;
                }

                .video-wrapper h2 {
                    text-align: center;
                    font-size: 25px;
                }

                .main-slider .swiper-slide img {
                    height: 283px;
                }

                .yacht-description {
                    max-width: 100%;
                }
            }

/* --- From render_yacht_detail (block 2)() --- */
                        .accordion-toggle-menu {
                            background-color: #5b8196 !important;
                            color: white;
                            cursor: pointer;
                            padding: 15px;
                            width: 100%;
                            border: none;
                            text-align: center;
                            font-size: 26px;
                            border-radius: 30px 30PX 0 0;
                            transition: background-color 0.3s ease;
                            font-weight: bold;
                            text-transform: uppercase;
                        }

                        .accordion-toggle-menu:hover {
                            background-color: #005177;
                        }

                        .accordion-content-menu {
                            max-height: 0;
                            overflow: hidden;
                            transition: max-height 0.4s ease;
                            padding: 0 15px;
                            background-color: #f9f9f9;
                            border: 1px solid #ddd;
                            border-top: none;
                            border-radius: 0 0 4px 4px;
                        }

                        .accordion-section-menu.active .accordion-content-menu {
                            max-height: 1000px;
                            /* Adjust as needed */
                            overflow-y: scroll;
                            padding: 15px;
                        }

                        @media (max-width: 991px) {
                            .accordion-toggle-menu {
                                font-size: 18px;
                            }
                        }

/* --- From render_yacht_detail (block 3)() --- */
                        .accordion-toggle {
                            background-color: #5b8196 !important;
                            color: white;
                            cursor: pointer;
                            padding: 15px;
                            width: 100%;
                            border: none;
                            text-align: center;
                            font-size: 26px;
                            border-radius: 30px 30PX 0 0;
                            transition: background-color 0.3s ease;
                            font-weight: bold;
                            text-transform: uppercase;
                        }

                        .accordion-toggle:hover {
                            background-color: #005177;
                        }

                        .accordion-content {
                            max-height: 0;
                            overflow: hidden;
                            transition: max-height 0.4s ease;
                            padding: 0 15px;
                            background-color: #f9f9f9;
                            border: 1px solid #ddd;
                            border-top: none;
                            border-radius: 0 0 4px 4px;
                        }

                        .accordion-section.active .accordion-content {
                            max-height: 1000px;
                            /* Adjust as needed */
                            overflow-y: scroll;
                            padding: 15px;
                        }

                        @media (max-width: 991px) {
                            .accordion-toggle {
                                font-size: 18px;
                            }
                        }

/* --- Search page filter accordion (mobile/tablet, <=1024px) --- */
/* Collapsed via .cya-accordion-body:not(.cya-accordion-open) rather than
   giving the "open" state an explicit display value - this way opening it
   just lets Elementor's own container display (flex) take back over
   instead of us having to guess/hardcode it. Above 1024px this rule
   simply doesn't apply, and Elementor's own elementor-hidden-desktop
   class (already on the button's wrapper) keeps the toggle hidden there
   too - filters are always shown, uncollapsed, on desktop. */
@media (max-width: 1024px) {
    .cya-accordion-body:not(.cya-accordion-open) {
        display: none;
    }
}

/* Chevron rotates 180deg open -> closed to indicate state; toggled via
   cya-accordion.js adding/removing "cya-accordion-open" on the button. */
.cya-accordion-button svg {
    transition: transform 0.3s ease;
}

.cya-accordion-button.cya-accordion-open svg {
    transform: rotate(180deg);
}

/* --- Flatpickr calendar (start/end date fields) --- */
.cya-date-input-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
    justify-content: start;
    align-items: start;
    font-size: 16px;
}

.cya-date-input-container:first-child {
    margin-bottom: 20px;
}

/* Adjacent-month days (the greyed-out days filling the first/last week
   of the visible grid) shown at full color, matching in-month days,
   instead of Flatpickr's default muted/grey treatment. Scoped to
   .flatpickr-calendar (not just .flatpickr-day.nextMonthDay alone) so
   this genuinely outranks Flatpickr's own built-in rule for the same
   elements, which has identical specificity otherwise - without this
   extra scope, whichever of the two stylesheets loads second in the
   page (Flatpickr's own CSS, in our case) wins the tie regardless of
   which color is set, which is why this didn't visually take effect the
   first time it was added.

   Excludes .flatpickr-disabled (past dates, before minDate) - the goal
   is making selectable adjacent-month days look selectable, not making
   every adjacent-month day look identical regardless of whether it can
   actually be clicked. */
.flatpickr-calendar .flatpickr-day.nextMonthDay:not(.flatpickr-disabled),
.flatpickr-calendar .flatpickr-day.prevMonthDay:not(.flatpickr-disabled) {
    color: #393939;
}

/* Small calendar icon inside the date fields, positioned via
   background-image so no extra DOM element/JS is needed. Two separate
   inline SVG data URIs (not one swapped via opacity) since CSS opacity
   on the input itself would also fade its border/background/text, not
   just the icon - baking the opacity into the SVG itself keeps it
   independent of everything else in the field.

   This selector also covers native <input type="date"> (used in the
   Elementor popup specifically - see redirect-search-form.php), not
   just the Flatpickr-managed text inputs used everywhere else. Native
   date inputs get very different default browser chrome than a plain
   text input, especially on iOS Safari - transparent background,
   different internal padding/height, off-center text - none of which
   is inherited automatically just from sharing this class, since it's
   the browser's own native control rendering, not something driven by
   our other CSS. -webkit-appearance: none / appearance: none strips
   that native chrome so our own box model (padding, border, background)
   is what actually determines the rendered result, matching the text
   input version instead of fighting against iOS's own styling. */
.cya-start-date-field,
.cya-end-date-field {
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 18px 18px;
    padding: 0.5em;
    padding-right: 38px;
    background-color: #fff !important;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
    font-family: inherit;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20opacity%3D%220.5%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%23606060%22%20stroke-width%3D%221.5%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%229%22%20x2%3D%2221%22%20y2%3D%229%22%20stroke%3D%22%23606060%22%20stroke-width%3D%221.5%22%2F%3E%3Cline%20x1%3D%227%22%20y1%3D%223%22%20x2%3D%227%22%20y2%3D%227%22%20stroke%3D%22%23606060%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2217%22%20y1%3D%223%22%20x2%3D%2217%22%20y2%3D%227%22%20stroke%3D%22%23606060%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    border: 1px solid #ddd;
}

.cya-start-date-field:hover,
.cya-end-date-field:hover {
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%20opacity%3D%221%22%3E%3Crect%20x%3D%223%22%20y%3D%225%22%20width%3D%2218%22%20height%3D%2216%22%20rx%3D%222%22%20fill%3D%22none%22%20stroke%3D%22%23606060%22%20stroke-width%3D%221.5%22%2F%3E%3Cline%20x1%3D%223%22%20y1%3D%229%22%20x2%3D%2221%22%20y2%3D%229%22%20stroke%3D%22%23606060%22%20stroke-width%3D%221.5%22%2F%3E%3Cline%20x1%3D%227%22%20y1%3D%223%22%20x2%3D%227%22%20y2%3D%227%22%20stroke%3D%22%23606060%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3Cline%20x1%3D%2217%22%20y1%3D%223%22%20x2%3D%2217%22%20y2%3D%227%22%20stroke%3D%22%23606060%22%20stroke-width%3D%221.5%22%20stroke-linecap%3D%22round%22%2F%3E%3C%2Fsvg%3E");
}

@media screen and (max-width:1326px) and (min-width:1025px) {
    .cya-date-input-container .cya-start-date-field, .cya-date-input-container .cya-end-date-field {
        max-width: 180px;
        width: 100%;
    }
}

/*FacetWP Flyout*/
.facetwp-flyout .facetwp-flyout-close {
    font-size: 20px;
}

.cya-flyout-header {
    display: flex;
    flex-direction: row;
    gap: 14px;
    justify-content: start;
    align-items: center;
    align-content: center;
    margin-bottom: 40px;
}


.cya-flyout-header img {
    width: 24px !important;
    height: 14px !important;
}

.cya-flyout-header h1, 
.cya-flyout-header h2, 
.cya-flyout-header h3, 
.cya-flyout-header h4, 
.cya-flyout-header h5,
.cya-flyout-header h6 {
    margin: 0 !important;
    font-size: 24px !important;
  color: #333 !important;
}

.cya-flyout-section {
    margin-bottom: 40px;
}

.facetwp-flyout-content {
  padding: 0px 30px !important;
}

.cya-flyout-section .cya-date-input-container:first-child {
    margin-bottom: 20px;
}

.cya-flyout-section input, .cya-flyout-section select {
    max-width: 224px !important;
    height: 39px !important;
}

.flyout-row:has(.flyout-item:not(.ready)) {
    display: none;
}

/* Guests Field */
#cya-guests, .cya-flyout-section .cya-guests-field {
  font-size: 16px;
}
/* --- Filter reset toast (assets/js/cya-filter-reset-toast.js) --- */
#cya-filter-reset-toast {
    position: fixed;
    left: 50%;
    bottom: 30px;
    transform: translate(-50%, 20px);
    background: #0C2456;
    color: #fff;
    padding: 14px 24px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
}

#cya-filter-reset-toast.cya-toast-visible {
    opacity: 1;
    transform: translate(-50%, 0);
}

/* Ensures the calendar renders above everything, including an Elementor
   popup's own overlay - Flatpickr sets no z-index by default for the
   normal (non-static) append mode we use, so without this it can end up
   genuinely in the DOM (appendTo: document.body) but visually buried
   underneath anything else with an explicit z-index, which popups
   commonly set very high on their own overlay. */
.flatpickr-calendar {
    z-index: 999999 !important;
}

/* --- Mobile filter overlay (<=1024px), assets/js/cya-mobile-filter-overlay.js --- */
@media (max-width: 1024px) {
    /* Hidden by default via display:none, but only until .cya-overlay-open
       is added - no explicit "open" display value is set below, so once
       this :not() stops matching, the element falls back to whatever
       Elementor's own CSS already declares for it (flex, given its
       e-flex/e-con classes) instead of us guessing/hardcoding that and
       breaking its internal layout. */
    .cya-search-filters-mobile-overlay:not(.cya-overlay-open) {
        display: none;
    }

    .cya-search-filters-mobile-overlay.cya-overlay-open {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        max-width: 100vw;
        height: 100%;
        overflow-x: hidden;
        z-index: 999999;
        overflow-y: auto;
        /* Prevents "scroll chaining" - without this, scrolling to the
           top/bottom edge of this overlay's own scrollable content can
           cause the page behind it to also start scrolling on some
           mobile browsers, a well-known quirk with fixed full-screen
           overlays. */
        overscroll-behavior: contain;
    }

    /* Standard technique for locking background scroll while the
       overlay is open. Note: iOS Safari has a known, long-standing
       quirk where overflow:hidden alone doesn't always fully block
       touch-scroll in every case - this covers the vast majority of
       real-world cases; a fully bulletproof iOS fix needs also switching
       the body to position:fixed with its scroll position preserved and
       restored on close, which is more involved and wasn't built here
       since this covers the standard case correctly. */
    body.cya-body-scroll-locked {
        overflow: hidden;
    }
}

.cya-search-filters-mobile-close-button svg {
    width: 30px;
}

/* Add the class "cya-mobile-full-width" (via Elementor's Advanced ->
   CSS Classes field) to any specific container that's set to a fixed
   "Boxed" width in Elementor and needs to shrink to fit the screen
   instead, below 1024px. Start with the outermost container holding the
   whole filter panel; add it to others too if any nested container
   still doesn't shrink after that. Scoped to this breakpoint only -
   desktop is unaffected regardless of which elements have this class. */
@media (max-width: 1024px) {
    .cya-mobile-full-width {
        max-width: 100% !important;
        width: 100% !important;
    }

    /* .e-con-inner is Elementor's own internal wrapper that actually
       applies/centers a "Boxed" container's fixed width - it has no
       settings panel in the Elementor editor and can't be given a
       custom class directly, so this is the one necessary exception to
       targeting only custom classes. Scoped strictly as a descendant of
       .cya-mobile-full-width, so it only affects this specific spot -
       not every .e-con-inner sitewide. */
    .cya-mobile-full-width > .e-con-inner {
        max-width: 100% !important;
        width: 100% !important;
    }
}

/* --- Card body text cleanup --- */
.cya-card .short-line {
    display: none;
}

.cya-card-location {
    color: #6b7280;
    font-size: 14px;
    margin: 4px 0;
}

.cya-card-price {
    font-size: 15px;
    font-weight: 600;
    color: #0C2456;
    margin: 4px 0 12px;
}

#cya-results .short-detail-wrap p {
    color: #4b5563;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
}

/* --- Custom dropdown arrow: [cya_redirect_search_form]'s selects
   (Guests/Location/Boat Type, scoped via the form wrapper since only
   Guests has its own class) and standalone [cya_guests_filter]. Native
   arrows render inconsistently across browsers (looks especially off in
   Edge) - appearance:none strips that, replaced with one consistent
   custom SVG everywhere. --- */
form.cya-inline-search select,
.cya-guests-field {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024%2024%22%3E%3Cpath%20d%3D%22M6%209l6%206%206-6%22%20fill%3D%22none%22%20stroke%3D%22%23606060%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%2F%3E%3C%2Fsvg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 16px 16px;
    padding-right: 34px;
}