<?php

$shortcode_id = $params['id'];

$header_text_color = esc_attr(get_post_meta( $shortcode_id, 'header_text_color', true ));
$header_background_color = esc_attr(get_post_meta( $shortcode_id, 'header_background_color', true ));
$body_text_color = esc_attr(get_post_meta( $shortcode_id, 'body_text_color', true ));
$body_background_color = esc_attr(get_post_meta( $shortcode_id, 'body_background_color', true ));
$user_area_text_color = esc_attr(get_post_meta( $shortcode_id, 'user_area_text_color', true ));
$user_area_background_color = esc_attr(get_post_meta( $shortcode_id, 'user_area_background_color', true ));

$keypoints_color = esc_attr(get_post_meta( $shortcode_id, 'keypoints_color', true ));

$primary_color = esc_attr(get_post_meta( $shortcode_id, 'primary_color', true ));
$primary_text_color = esc_attr(get_post_meta( $shortcode_id, 'primary_text_color', true ));
$primary_dark_color = esc_attr(get_post_meta( $shortcode_id, 'primary_dark_color', true ));
$alternative_color = esc_attr(get_post_meta( $shortcode_id, 'alternative_color', true ));
$alternative_light_color = esc_attr(get_post_meta( $shortcode_id, 'alternative_light_color', true ));
$icons_color = esc_attr(get_post_meta( $shortcode_id, 'icons_color', true ));
$show_border = esc_attr(get_post_meta( $shortcode_id, 'show_border', true ));
$border_color = esc_attr($show_border) != 'hide' ? esc_attr(get_post_meta( $shortcode_id, 'border_color', true )) : 'transparent';

$vehicle_type_border = esc_attr(get_post_meta( $shortcode_id, 'vehicle_type_border', true ));

$text_color = '#171717';
$white = '#FFFFFF';
$black = '#000000';

// $placeholder_color = '#AAAAAA';
$placeholder_color = '#959595';
$green_color = '#7CD992';
$error_border = '#EB6060';
$error_bg = '#FBE1E1';
$offer_bg = '#FBBA22';

?>


<style id="shortcode-<?php echo $shortcode_id; ?>-css" type="text/css">

[data-shortcode="<?php echo $shortcode_id; ?>"] .primary-color {
	color: <?php echo $primary_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .primary-hover-color:hover {
	color: <?php echo $primary_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .primary-dark-color {
	color: <?php echo $primary_dark_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .primary-dark-hover-color:hover {
	color: <?php echo $primary_dark_color; ?>;
}

[data-shortcode="<?php echo $shortcode_id; ?>"] .search_form-header {
    background: <?php echo $header_background_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .search_form-header p {
    color: <?php echo $header_text_color; ?>;
}


[data-shortcode="<?php echo $shortcode_id; ?>"] .search_form-header.user-area-header {
    background: <?php echo $user_area_background_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .search_form-header.user-area-header:hover {
    background: darken(<?php echo $user_area_background_color; ?>,20%);
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .search_form-header.user-area-header p {
    color: <?php echo $user_area_text_color; ?>;
}


[data-shortcode="<?php echo $shortcode_id; ?>"] .search_form-body,
[data-shortcode="<?php echo $shortcode_id; ?>"] .horizontal-field-row {
    background: <?php echo $body_background_color; ?>;
}

[data-shortcode="<?php echo $shortcode_id; ?>"] .vehicles-group .label-button {
	background-color: <?php echo $white; ?>;
	color: <?php echo $primary_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .vehicles-group .label-button p {
	color: <?php echo $primary_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .vehicles-group .label-button.active {
	background-color: <?php echo $primary_color; ?>;
	border-color: <?php echo $primary_color; ?>;
	color: <?php echo $white; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .vehicles-group .label-button.active p {
	color: <?php echo $white; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .vehicles-group .label-button [class^="icon-"] {
	color: <?php echo $primary_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .vehicles-group .label-button.active [class^="icon-"] {
	color: <?php echo $white; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .vehicles-group {
	border-color: <?php echo $vehicle_type_border; ?>;
}
/* [data-shortcode="<?php // echo $shortcode_id; ?>"] .vehicle-field-form::before, .vehicle-field-form::after {
	background-color:<?php // echo $vehicle_type_border; ?>;
} */

[data-shortcode="<?php echo $shortcode_id; ?>"] .vehicle-field-form::after {
    background: linear-gradient(90deg, transparent, <?php echo $body_background_color; ?>);
}

[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form {
	color: <?php echo $text_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .form-label {
	color: <?php echo $body_text_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .form-control {
	color: <?php echo $text_color; ?>;
	border-color: <?php echo $border_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form select.form-control,
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .form-control.placeholder-color {
	border-color: <?php echo $border_color; ?>!important;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form select.form-control:focus,
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .form-control.placeholder-color:focus {
	border-color: <?php echo $primary_color; ?>!important;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .form-control.time-field {
	border-color: <?php echo $border_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .form-control.time-field:focus {
	border-color: <?php echo $primary_color; ?>!important;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .date-time-wrap {
	border-color: <?php echo $border_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .focused-border .date-time-wrap {
	border-color: <?php echo $primary_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .blur-effect .form-item {
	border-color: <?php echo $border_color; ?>;
}

[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form input[type="checkbox"] {
	accent-color: <?php echo $alternative_color; ?>;
}

[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .submit-button {
	color: <?php echo $primary_text_color; ?>;
	background: <?php echo $primary_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .submit-button:hover,
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .submit-button:focus {
	background: <?php echo $primary_dark_color; ?>;
}

[data-shortcode="<?php echo $shortcode_id; ?>"] .footer-form-wrap .icon-award {
	color: <?php echo $body_text_color; ?>;
}

[data-shortcode="<?php echo $shortcode_id; ?>"] .footer-form-wrap p {
	color: <?php echo $body_text_color; ?>;
}

[data-shortcode="<?php echo $shortcode_id; ?>"] .single-keypoint,
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .single-keypoint .icon-check {
	color: <?php echo $keypoints_color; ?>;
}

/* GENERAL */

[data-shortcode="<?php echo $shortcode_id; ?>"] .form-control.placeholder-color {
	color: <?php echo $placeholder_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .form-control::selection {
	color: #000;
	background: #FFF;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form [class^="icon-"], [data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form [class*=" icon-"] {
	color: <?php echo $icons_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] select option {
	color: <?php echo $text_color; ?>;
}

/* SELECT2 */

[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .select2-container .select2-selection--single .select2-selection__rendered {
	color: <?php echo $text_color; ?>;
}
.select2-container--default .select2-dropdown .select2-results__option--highlighted[aria-selected] {
    background: #ddd;
    color: <?php echo $text_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .select2-container.select2-container--open .select2-selection--single,
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .select2-container.select2-container--focus .select2-selection--single {
	border-color: <?php echo $primary_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .select2-container .select2-selection--single {
	border-color: <?php echo $border_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .form-control.placeholder-color ~ .select2-container .select2-selection--single .select2-selection__rendered {
	color: <?php echo $placeholder_color; ?>;
}

/* ERRORS */
[data-shortcode="<?php echo $shortcode_id; ?>"] .error-message-content {
	color: <?php echo $error_border; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .has-error-content .date-time-wrap {
	border-color: <?php echo $error_border; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].gc-search-form .form-control.has-error {
	border-color: <?php echo $error_border; ?>!important;
	background: <?php echo $error_bg; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"] .form-group.has-error ~ .select2-container .select2-selection--single,
[data-shortcode="<?php echo $shortcode_id; ?>"] .form-control.has-error ~ .select2-container .select2-selection--single,
[data-shortcode="<?php echo $shortcode_id; ?>"] .form-control.has-error-content ~ .select2-container .select2-selection--single,
[data-shortcode="<?php echo $shortcode_id; ?>"] .form-group.has-error-content ~ .select2-container .select2-selection--single {
	border-color: <?php echo $error_border; ?>;
	background: <?php echo $error_bg; ?>;
}


/* DATEPICKER */
/* header */
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-prev::after {
	border-color: <?php echo $primary_color; ?>;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-prev:hover::after,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-prev:focus::after,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-prev.ui-state-hover::after {
	border-color: <?php echo $primary_dark_color; ?>;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-next::after {
	border-color: <?php echo $primary_color; ?>;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-next:hover::after,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-next:focus::after,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-next.ui-state-hover::after {
	border-color: <?php echo $primary_dark_color; ?>;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-year {
	color: <?php echo $placeholder_color; ?>;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-month {
	color: <?php echo $primary_color; ?>;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] th span {
	color: <?php echo $placeholder_color; ?>!important;
}


/* body */
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .in-range-date::after,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .booking-first::after,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .booking-last::after,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .highlight::after,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-state-highlight,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-widget-content .ui-state-highlight,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-days-cell-over.ui-datepicker-current-day.ui-datepicker-today a {
	background: <?php echo $alternative_light_color; ?>;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-days-cell-over.ui-datepicker-current-day.ui-datepicker-today .ui-state-active,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-state-active,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-widget-content .ui-state-active,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-state-hover,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-widget-content .ui-state-hover {
	background: <?php echo $primary_color; ?>!important;
	border: 1px solid <?php echo $primary_dark_color; ?>!important;
	color: #fff!important;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] td:hover .ui-state-default {
	border-color: <?php echo $primary_dark_color; ?>!important;
	background: <?php echo $primary_color; ?>!important;
	color: #fff!important;
}

[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-widget-header .ui-state-highlight,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-widget-header .ui-state-active,
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-widget-header .ui-state-hover {
	background: transparent !important;
	border: none !important;
}

[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-today .ui-state-default {
	color: #000 !important;
	background: #f5f5f5 !important;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-today.booking-first .ui-state-default {
	background: transparent!important;
	color: #555!important;
}
[data-shortcode].options ~ #ui-datepicker-div[data-shortcode="<?php echo $shortcode_id; ?>"] .ui-datepicker-today.booking-first:hover .ui-state-default {
	background: <?php echo $primary_color; ?>!important;
	color: #fff!important;
}

/* MOBISCROLL MOBILE DATEPICKER */
[data-shortcode="<?php echo $shortcode_id; ?>"].options .datepicker-mobile-heading .close-datepicker-btn::before,
[data-shortcode="<?php echo $shortcode_id; ?>"].options .datepicker-mobile-heading .close-datepicker-btn::after {
	background: <?php echo $placeholder_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-calendar-week-day,
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-calendar-title,
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-calendar-button.mbsc-button {
	color: <?php echo $placeholder_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-range-control-wrapper .mbsc-segmented label .mbsc-range-control-value {
	background: #fff;
	border-color: <?php echo $placeholder_color; ?>;
	color: <?php echo $text_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-range-control-wrapper .mbsc-segmented label .mbsc-range-control-value.active {
	background: <?php echo $primary_color; ?>;
	border-color: <?php echo $primary_dark_color; ?>;
	color: #fff;
}

[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-calendar-today,
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-calendar-week-nr {
	color: <?php echo $text_color; ?>;
	background: <?php echo $alternative_light_color; ?>;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-selected .mbsc-calendar-cell-text,
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-hover .mbsc-calendar-cell-text {
	border-color:<?php echo $primary_dark_color; ?>;
	background: <?php echo $primary_color; ?>;
	color: #fff;
}
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-range-day::after,
[data-shortcode="<?php echo $shortcode_id; ?>"].options .mbsc-datepicker .mbsc-range-hover::before {
	background: <?php echo $alternative_light_color; ?>;
}
</style>
