@import url("variables.css");
:root {
	/*---- MASTER VALUES ----*/

	--master-font-size: 	 100px;
	--master-line-height: 	 1em;
	--master-letter-spacing: 0;
	--master-section-pad: 	 10px;

	/*---- FRAME SIZES ----*/

	--frame-max-l:   1400px;
	--frame-max-m:   1200px;
	--frame-max-s:   1000px;
	--frame-pad:     160px;
	--frame-overpad: calc((100% - var(--frame-max-l)) / 2);
	--frame-width:   calc(100% - (var(--frame-pad) * 2));

	/*---- SPACING ----*/

	--column-gap: 10px;
	--row-gap: 10px;

	/*---- FONTS ----*/

	--font-main: 	 "Salmond", 'montserrat', var(--font-default);
	--font-body:	 "sofia-pro-soft", var(--font-default);
	--font-footer:	 "JUST Sans", var(--font-default);
	--font-default:  "sans-serif";
	--font-fa: 		 "Font Awesome 6 Pro";
	--font-fa-sharp: "Font Awesome 6 Sharp";

	--font-setting: "ss06" 1;

	/*---- FONT SIZING ----*/

	--size-1:  clamp(10px, 0.13rem, 13px);
	--size-2:  clamp(14px, 0.16rem, 16px);
	--size-3:  clamp(16px, 0.18rem, 18px);
	--size-4:  clamp(18px, 0.20rem, 20px);
	--size-5:  clamp(22px, 0.28rem, 28px);
	--size-6:  clamp(24px, 0.30rem, 28px);
	--size-7:  clamp(22px, 0.34rem, 34px);
	--size-8:  clamp(26px, 0.36rem, 36px);
	--size-9:  clamp(26px, 0.42rem, 42px);
	--size-10: clamp(30px, 0.46rem, 46px);
	--size-11: clamp(30px, 0.52rem, 52px);
	--size-12: clamp(34px, 0.54rem, 54px);
	--size-13: clamp(36px, 0.58rem, 58px);
	--size-14: clamp(36px, 0.62rem, 62px);
	--size-15: clamp(38px, 0.66rem, 66px);
	--size-16: clamp(38px, 0.72rem, 72px);

    --size-h1: var(--size-11);
    --size-h2: var(--size-8);
    --size-h3: var(--size-5);
    --size-h4: var(--size-4);
    --size-h5: var(--size-2);
    --size-h6: var(--size-4);

    /*---- TRANSITIONS ----*/

    --pad-1:25px;
    --pad-2:50px;
    --pad-3:75px;
    --pad-4:100px;
    --pad-5:125px;
    --pad-6:150px;
    --pad-7:175px;
    --pad-8:200px;

	/*---- COLOURS ----*/

	--colour-primary: 	  #2B2D42;
	--colour-secondary:   #FFCB0E;
	--colour-black: 	  #000;
	--colour-white: 	  #FFF;
	--colour-light: 	  #F3EADF;
	--colour-background:  #F9F9F9;
	--colour-grey:        #666464;

	--colour-text:        var(--colour-primary);

	/*---- BACKGROUNDS ----*/

    --bg-noise: linear-gradient(to bottom, rgba(242, 244, 245, 0.7), rgba(242, 244, 245, 0.7)), url(/wp-admin/images/custom/white-noise.jpg) top left / 120px auto repeat;
    --bg-blob-1: url(/wp-admin/images/custom/white-noise.jpg) top left / 120px auto repeat;

	/*---- TRANSITIONS ----*/

    --transition-fast: all 0.15s cubic-bezier(0,0,0.1,0.9);
	--transition: all 0.3s cubic-bezier(0,0,0.1,0.9);
	--transition-slow: all 0.6s cubic-bezier(0,0,0.1,0.9);
	--transition-hover: all 0.1s ease-in-out 0s;
}

#sidebar {
    display: none !important;
}
#left-area {
    padding-left: 0 !important;
    width: 100%;
    float: unset;
}
#main-content .container:before {
    display: none;
}
/*---- DEFAULT - BUTTON CSS ----*/

body #content-area button.et_pb_button,
body #content-area a.et_pb_button {
    position: relative;
    padding: 13px 26px 14px !important;
    background: none !important;
    border: none !important;
	border-radius: 35px;
    z-index: 3;
	opacity: 1;
    width: fit-content;

    display: flex;
	align-items: center;
    column-gap: 10px;

	font-weight: 400;
	font-size: var(--size-2);
	font-family: var(--font-body);
	text-decoration: none;
	letter-spacing: 0;
	color: var(--colour-white);
	line-height: calc(var(--master-line-height) * 1.5);

	transition: var(--transition-fast);
}
body #content-area button.et_pb_button:hover,
body #content-area a.et_pb_button:hover {
    color: var(--colour-white);
}

body #content-area button.et_pb_button::after,
body #content-area a.et_pb_button::after {
    content: '\f061';
    font-family: var(--font-fa) !important;
	font-size: 17px;
	opacity: 1;
	display: flex !important;
	visibility: visible !important;
	transition: var(--transition-fast);
	position: unset;
	font-weight: 900;
	color: inherit;
	margin-left: 0;
}
body #content-area button.et_pb_button::before,
body #content-area a.et_pb_button::before {
    content: "";
    position: absolute;
    display: block !important;
    opacity: 1;
    z-index: -1;
    margin: 0;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
	border-radius: 12px;
	border: 0px solid;
	background-color: var(--colour-primary);
    transition: var(--transition-fast);
}
body #content-area button.et_pb_button:hover::before,
body #content-area a.et_pb_button:hover::before {
    background-color: var(--colour-secondary) !important;
}

.et_post_meta_wrapper{
    display: none;
}

body:has(.rcm-vehicle-single) header {
    background-color: var(--colour-primary);
    position: unset;
}
#main-content:has(.rcm-vehicle-single) {
    background-color: #F9F9F9;
}
/* Vehicle Display Styles */
.rcm-vehicle-single {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    display: flex;
    column-gap: 60px;
}

.rcm-vehicle-header {
    margin-bottom: 0px;
}

.rcm-vehicle-title {
    font-size: 36px;
    color: #2B2D42;
    margin-bottom: 0;
    padding: 0px;
}

.rcm-vehicle-subtitle {
    font-size: 1.2rem;
    color: #666;
    margin: 0;
}

/* Image Slider Styles */
.rcm-vehicle-images {
    margin-bottom: 40px;
    flex: 1 1 45%;
    max-width: 45%;
}

.rcm-image-slider {
    position: relative;
    background: #f8f8f8;
    border-radius: 8px;
    overflow: hidden;
}

.rcm-slider-main {
    position: relative;
    width: 100%;
    height: 400px;
    overflow: hidden;
}
.rcm-slider-thumbnails .rcm-slide {
    flex: 1 1;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #2B2D42;
}
/* .rcm-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    transition: opacity 0.3s ease-in-out;
} */

.rcm-slide.active {
    opacity: 1;
}

.rcm-slide img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

.rcm-slide-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(transparent, rgba(0,0,0,0.7));
    color: white;
    padding: 20px;
    font-size: 0.9rem;
}

.rcm-slider-btn {
    display: none !important;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,0.9);
    border: none;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    z-index: 10;
    transition: background-color 0.2s;
}

.rcm-slider-btn:hover {
    background: rgba(255,255,255,1);
}

.rcm-slider-prev {
    left: 20px;
}

.rcm-slider-next {
    right: 20px;
}

.rcm-slider-thumbnails {
    display: flex;
    gap: 10px;
    padding: 0;
    background: transparent;
    overflow-x: auto;
}
.rcm-slider-thumbnails img {
    max-height: 105px;
    min-height: 105px;
    object-fit: cover;
}
.rcm-thumbnail {
    flex-shrink: 0;
    width: 80px;
    height: 60px;
    border: 2px solid transparent;
    border-radius: 8px;
    overflow: hidden;
    cursor: pointer;
    background: none;
    padding: 0;
}

.rcm-thumbnail.active {
    border-color: #007cba;
}

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

/* Vehicle Details Styles */
.rcm-vehicle-details {
    max-width: 45%;
    flex: 1 1 45%;
}

.rcm-vehicle-specs h3,
.rcm-vehicle-description h3,
.rcm-vehicle-features h3 {
    color: #333;
    margin-bottom: 15px;
    font-size: 1.5rem;
}

.rcm-specs-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

.rcm-spec-item {
    background: #f8f8f8;
    padding: 15px;
    border-radius: 6px;
    position: relative;
}
.rcm-spec-item:not(:last-child)::before {
    content: '';
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1px;
    height: 20px;
    background: rgba(43, 45, 66, 0.50);
}
.rcm-vehicle-single .rcm-vehicle-specs {
    padding-top: 0;
    padding: 0px;
    justify-content: flex-start;
}
.rcm-spec-label {
    font-weight: 600;
    color: rgba(43, 45, 66, 0.50);
}

.rcm-spec-value {
    color: rgba(43, 45, 66, 0.50);
    margin-left: 8px;
}

.rcm-vehicle-content {
    line-height: 1.6;
    color: #444;
}

.rcm-features-content {
    background: #FFF;
    padding: 25px;
    border-radius: 18px;
}
.rcm-features-content .rcm-features-list li {
    list-style: none;
    color: #2B2D42;
}
.rcm-features-content .rcm-features-list li::before {
    content: "\f00c";
    font-family: "Font Awesome 6 Pro";
    font-weight: 600;
    color: #2B2D42;
    margin-right: 8px;
}
.rcm-features-content .rcm-features-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
}
.rcm-vehicle-booking {
    margin-top: 30px;
    text-align: center;
}

.rcm-book-vehicle-btn {
    display: inline-block;
    background: #FFCB0E;
    color: #2B2D42;
    padding: 15px 30px;
    text-decoration: none;
    border-radius: 6px;
    font-weight: 600;
    font-size: 1.1rem;
    transition: background-color 0.2s;
}

.rcm-book-vehicle-btn:hover {
    background: #005a87;
    color: white;
}

/* Vehicle Card Styles */
.rcm-vehicle-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 30px;
    margin: 30px 0;
}

.rcm-vehicle-card {
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    overflow: hidden;
    transition: transform 0.2s, box-shadow 0.2s;
}

.rcm-vehicle-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.rcm-vehicle-card-image {
    position: relative;
    height: 200px;
    overflow: hidden;
}

.rcm-vehicle-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.rcm-image-count {
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
}

.rcm-vehicle-card-content {
    padding: 20px;
}

.rcm-vehicle-card-title {
    margin: 0 0 8px 0;
    font-size: 1.3rem;
}

.rcm-vehicle-card-title a {
    text-decoration: none;
    color: #333;
}

.rcm-vehicle-card-title a:hover {
    color: #007cba;
}

.rcm-vehicle-card-subtitle {
    color: #666;
    margin: 0 0 15px 0;
    font-size: 0.9rem;
}

.rcm-vehicle-card-specs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 15px;
}

.rcm-spec-badge {
    background: #e8f4f8;
    color: #007cba;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.rcm-vehicle-card-excerpt {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
    margin-bottom: 20px;
}

.rcm-vehicle-card-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.rcm-btn {
    padding: 10px 20px;
    border-radius: 5px;
    text-decoration: none;
    font-size: 0.9rem;
    font-weight: 500;
    border: none;
    cursor: pointer;
    transition: all 0.2s;
    flex: 1;
    text-align: center;
    min-width: 100px;
}

.rcm-btn-primary {
    background: #007cba;
    color: white;
}

.rcm-btn-primary:hover {
    background: #005a87;
    color: white;
}

.rcm-btn-secondary {
    background: #f8f8f8;
    color: #333;
    border: 1px solid #ddd;
}

.rcm-btn-secondary:hover {
    background: #e8e8e8;
    color: #333;
}

/* Compact card variant */
.rcm-vehicle-card--compact {
    max-width: 280px;
}

.rcm-vehicle-card--compact .rcm-vehicle-card-image {
    height: 150px;
}

.rcm-vehicle-card--compact .rcm-vehicle-card-content {
    padding: 15px;
}

/* No vehicles message */
.rcm-no-vehicles {
    text-align: center;
    padding: 60px 20px;
    color: #666;
    font-size: 1.1rem;
}

/* Icons */
.rcm-icon-person::before {
    content: "👤";
}

.rcm-icon-luggage::before {
    content: "🧳";
}

/* Responsive Design */
@media (max-width: 800px) {
    .rcm-vehicle-single {
        flex-direction: column;
    }
    .rcm-vehicle-images {
        flex: 1 1 100%;
        max-width: 100%;
    }
    .rcm-vehicle-details {
        max-width: 100%;
        flex: 1 1 100%;
    }
    .rcm-slider-main {
        max-height: 300px;
        margin-bottom: 40px;
    }
    
    .rcm-slider-btn {
        width: 40px;
        height: 40px;
        font-size: 18px;
    }
    .rcm-btn {
        flex: none;
    }
}

@media (max-width: 600px) {
    .rcm-features-content .rcm-features-list li {
        font-size: 16px;
    }
    .container {
        width: 90%;
    }
}
@media (max-width: 450px) {
    .rcm-features-content .rcm-features-list {
        grid-template-columns: 1fr;
    }
}