@charset "ISO-8859-1";

/****** Font Size Override for SYA Pages *********/
/* Override WordPress theme font sizes for better readability */
body {
	font-size: var(--wp--preset--font-size--small, 14px) !important;
}

/* Specific overrides for SYA car detail page */
#sya-container {
	font-size: var(--wp--preset--font-size--small, 14px);
}

#sya-container h3 {
	font-size: var(--wp--preset--font-size--medium, 18px);
}

#sya-container h4 {
	font-size: var(--wp--preset--font-size--small, 16px);
}

.sya-car-details-feature-table {
	font-size: var(--wp--preset--font-size--small, 14px);
}

.sya-car-detail-description {
	font-size: var(--wp--preset--font-size--small, 14px);
}

/****** main content *********/

#sya-container{
	margin-top:30px;
	width:100%;
}

#sya-screen, 
#sya-search-filter-screen{
	display:none;
	position: fixed;
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: #000000;
	z-index:100;
	opacity: 0.9;
    filter: alpha(opacity=90); /* For IE8 and earlier */
	
}


/*********Page Top*************/
#sya-page-top-left, #sya-page-top-right{
	display: inline-block;
	/* removed legacy star-hack props */
	vertical-align: top;
	width:49%;
}
#sya-page-top-right{
	text-align: right;
}

/* Full-width override for better "My Cars" display */
#sya-offer-a-car-user-cars{
	width: 100% !important;
	display: block !important;
}
#sya-offer-a-car-user-photos{
	width: 100% !important;
	display: block !important;
}
@media (max-width: 769px) {
	#sya-page-top-left, #sya-page-top-right{
		display: block;
		width:100%;
	}
	#sya-page-top-right{
		text-align: left;
	}
}

.sya-how-this-works{
	font-size: 1.2em;
}


#no-cars{
	text-align: center;
	margin: 10px;
}
.qq-upload-drag-drop-msg{
	text-align: right;
}

#results-header-offer-car{
	text-align: center;
	font-weight: bold;
	margin-top: 40px;
}


.sya-sub-heading{
	text-align: center;
	margin: 10px;
}
.sya-sub-heading h4{
	margin: 0;
	
}





/****** Search Cars *********/
#sya-search-col1,#sya-search-col2{
	display: inline-block;
	/* removed legacy star-hack props */
	vertical-align: top;
}

#sya-search-col1{
	width:70%;
}

#sya-search-col2{
	width:29%;
}

#sya-user-car-list{
	list-style: none;
	margin-left: 0;
}

#sya-user-car-list li a{
	text-decoration: underline;
}
.sya-car-image-main{
	width:100%;

}
@media (max-width: 769px) {
	.sya-car-image-main{
		margin:0;
	}
	.car_card{
		padding: 30px 0 30px 0;
	}
}
.sya-car-text-part{
	display: inline-block;
	/* removed legacy star-hack props */
	width:33%;
	vertical-align: top;
	margin-top: 10px;
}

@media (max-width: 769px) {
	.sya-car-text-part{
		display: block;
		width:100%;
	}
}

.sya-car-text-description-label{
	width:100px;
}
.sya-car-text-description{
	font-weight: bold;
}



.car_card{
	margin-bottom: 20px;
	background: #dcdcdc;
    padding: 30px;
    border: 1px solid #c5c5c5;
    position: relative;
    list-style: none;
}





/****** Car Detail *********/

#sya-car-detail-text, #sya-car-detail-picture{
	display: inline-block;
	vertical-align: top;
}

#sya-car-detail-text{
	width:30%;
}

#sya-car-detail-picture{
	width:66%;
}

.sya-car-detail-description{
	margin-top: 20px;
	text-transform: lowercase; /* Convert to lowercase first */
}

.sya-car-detail-description::first-letter {
	text-transform: uppercase; /* Capitalize only the first letter */
}
.sya-car-detail-img-container{
	padding: 20px;
}

/* Fix image sizing - constrain to container width */
.sya-car-detail-img-container img {
	width: 100%;
	max-width: 100%;
	height: auto;
	display: block;
	margin-bottom: 10px;
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.sya-car-details-feature-table th{
	text-align: left;
	font-size: 1.3em;
}
.sya-car-details-feature-table th span{

	font-size: .8em;
}

.sya-car-details-feature-table td{
	vertical-align: top;
}
.sya-car-details-feature-table td:first-child{
	width:120px;
	padding-left: 20px;
	font-weight: normal; /* Categories - normal weight */
}
.sya-car-details-feature-table td:last-child{
	font-weight: bold; /* Details - bold */
}

@media (max-width: 769px) {
	#sya-car-detail-text, #sya-car-detail-picture{
		display: block;
		width: 100%;
	}
	
	.sya-car-detail-img-container{
		padding: 20px 0 20px 0;
	}
}


/****** Private Message Stuff *********/
#sya-private-message-container{
	margin: 0;
}
#sya-private-message-container li{
	list-style: none;
	padding-bottom: 10px;
}
#sya-private-message-container .sya-textarea,
.sya-three-way-message-popup .sya-textarea {
	background: #d0d0d0;
	width:85%;
	color: #000000 !important;
	height:100px;
}
.sya-private-message-popup, .sya-three-way-message-popup{
	display:none;
}
#sya-private-msg-responce, .msg-reponce{
	display:none;
}


/****** Sign In Log in Stuff *********/

#sya-sign-in-container{
	text-align: right;
	margin-bottom:10px;
	margin-top: -56px;
	/* Phase 2 Fix: Ensure login buttons are not clipped */
	overflow: visible !important;
	width: auto !important;
	min-width: 200px;
	white-space: nowrap;
	position: relative;
	z-index: 10;
	/* Phase 2 Fix: Allow vertical stacking to prevent header clipping */
	line-height: 1.2;
	min-height: 40px;
}

#sya-login-form-container, #sya-signin-form-container, #sya-signin-feedback-container, #sya-how-this-works-container{
	display:none;
	position: absolute;
	left: 50%;
	margin-left: -330px;
	top: 75px;
	z-index: 101;
	width:675px;
}
@media (max-width: 769px) {
	#sya-login-form-container, #sya-signin-form-container, #sya-signin-feedback-container, #sya-how-this-works-container{
			 width:95%;
			 left: auto;
			margin-left: auto;
	}
}

#sya-login-submit, #sya-signup-submit{
	color: #fede00 !important; 
}
#sya-login-submit:hover{
	color: #000000 !important;
}

.log-in-table th, .log-in-table td{
	padding:3px;
	width: 244px;
}

#sya-signup-form-email, #sya-signup-form-password, #sya-signup-form-fname{
	width:459px;
}
@media (max-width: 769px) {
	#sya-signup-form-email, #sya-signup-form-password, #sya-signup-form-fname{
			 width: 75%;
	}
}


.sya-form-bknd{
	color: #dad5d5;
}

.sya-form-bknd{
	background: #4e4e4e;
	padding:10px;
}
.sya-form-bknd h4,.sya-form-bknd h3{
	color:#dad5d5;
}
.sya-form-bknd h4{
	display: inline;
	margin-right: 10px;
}

.sya-form-bknd a:hover {
    color: #fff4aa;
}
.sya-form-bknd a {
    color: #fede00;
}
.sya-error{
	color:#ffd3b7;
}
#sign-up-container-right, #sign-up-container-left{
	display: inline-block;
	vertical-align: middle;
	padding:10px;
}
#sign-up-container-left{
	width: 495px;
}
#sign-up-container-right{
	width: 100px;
}
@media (max-width: 769px) {
	
	#sign-up-container-left{
	width: 100%;
	}
	#sign-up-container-right{
		width: 100%;
	}
}
@media (max-width: 769px) {
	#sya-login-form-container, #sya-signin-form-container, #sya-signin-feedback-container {
		width: 100%;
		right:auto;
		top:auto;
		margin: 0 auto;
	}
	#sign-in-table tr, #sign-in-table td {
		display:block;
	}
	.log-in-table{
		width:100%;	
	}
}



/********Match Flags**************/

.match_flag_container{
	position: absolute;
	
	top: 10px;
	right: 10px;
	
	
}
@media (max-width: 769px) {
	.match_flag_container{
		position: static;

	}
	
}
.match_flag{
    padding: 8px 35px 3px 3px;
	color: white;
	background-color: rgba(0, 0, 0, 0.6); 
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
	margin-bottom: 4px;
}

.three-way-btn{
	margin-top:10px;
}


.trade_car_icon{
	display:inline-block;
}
.trade_car_list{
	display:inline-block;
}



/****** Find Cars Filter Settings*********/
/* Modern styling overrides - updated to match find-a-car design */
#sya-search-filter-container {
	background: white !important;
	border-radius: 12px !important;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1) !important;
	padding: 30px !important;
	margin-bottom: 30px !important;
	border: 1px solid #e0e0e0 !important;
	color: #000000;
}

.sya-search-filter-container-sub {
	background: #f8f9fa !important;
	border-radius: 8px !important;
	padding: 20px !important;
	margin-bottom: 20px !important;
	display: block;
	width: 100%;
	box-sizing: border-box;
}

.sya-search-select-box,
.sya-search-select-box-callback {
	margin-bottom: 20px !important;
}

.sya-search-select-box label,
.sya-search-select-box-callback label {
	display: block !important;
	margin-bottom: 8px !important;
	color: #333 !important;
	font-weight: 600 !important;
	font-size: 14px !important;
}

.sya-search-select-box select,
.sya-search-select-box-callback select,
.sya-search-select-box input[type="number"],
.sya-search-select-box-callback input[type="number"] {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 2px solid #e9ecef !important;
	border-radius: 6px !important;
	background: white !important;
	font-size: 14px !important;
	color: #333 !important;
	transition: all 0.2s ease !important;
	box-sizing: border-box;
}

.sya-search-select-box select:hover,
.sya-search-select-box-callback select:hover,
.sya-search-select-box input[type="number"]:hover,
.sya-search-select-box-callback input[type="number"]:hover {
	border-color: #017CBF !important;
}

.sya-search-select-box select:focus,
.sya-search-select-box-callback select:focus,
.sya-search-select-box input[type="number"]:focus,
.sya-search-select-box-callback input[type="number"]:focus {
	outline: none !important;
	border-color: #017CBF !important;
	box-shadow: 0 0 0 3px rgba(1, 124, 191, 0.2) !important;
}

.sya-search-select-box textarea,
.sya-search-select-box-callback textarea {
	width: 100% !important;
	padding: 12px 16px !important;
	border: 2px solid #e9ecef !important;
	border-radius: 6px !important;
	background: white !important;
	font-size: 14px !important;
	color: #333 !important;
	transition: all 0.2s ease !important;
	min-height: 100px !important;
	resize: vertical !important;
	box-sizing: border-box;
}

.sya-search-select-box textarea:hover,
.sya-search-select-box-callback textarea:hover {
	border-color: #017CBF !important;
}

.sya-search-select-box textarea:focus,
.sya-search-select-box-callback textarea:focus {
	outline: none !important;
	border-color: #017CBF !important;
	box-shadow: 0 0 0 3px rgba(1, 124, 191, 0.2) !important;
}

/* Removed conflicting ID-based offer-a-car button styles (use .sya-btn classes) */

/* Search and settings legacy button widths retained */
#sya-search-button, #sya-settings-button {
	margin: 0 auto 10px auto;
	display: block;
	width: 200px;
	font-size: 1.2em;
	text-align: center;
}

/* Responsive design for modern form styling */
@media (max-width: 768px) {
	#sya-search-filter-container {
		padding: 20px !important;
		margin-bottom: 20px !important;
	}
	.sya-search-filter-container-sub {
		padding: 15px !important;
	}
}

/* =================================================================
   FIND-A-CAR SPECIFIC STYLING
   ================================================================= */

/* Removed legacy #search_selector_row layout/label overrides (now handled by .sya-toolbar) */

/* Saved search selector styling moved to .sya-select in design system */

/* =================================================================
   OFFER-A-CAR SPECIFIC STYLING
   ================================================================= */

/* Offer-a-car buttons now use design system classes (sya-btn...) */
/* Removed ID-based Find a Match styles; use .sya-btn-primary .sya-btn-lg */

/* Removed legacy #search_selector_row form-actions alignment (now via .sya-toolbar/.sya-form-actions) */


.sya-search-select-box label, .sya-search-select-box-callback label{
	font-weight: bold;
}
.sya-range-label{
	width:100px;
}

.sya-search-filter-container-sub select, .sya-search-filter-container-sub table, .sya-search-filter-container-sub input[type="number"]{
	width:96%;
}

@media (max-width: 769px) {
	.sya-search-filter-container-sub{
		display: block;
		width:	100%;
	}
}

#sya-search-filter-container{
	border: 1px solid #b7b4b4;
	-webkit-box-shadow: 6px 6px 7px -3px rgba(50, 50, 50, 0.73);
	-moz-box-shadow:    6px 6px 7px -3px rgba(50, 50, 50, 0.73);
	box-shadow:         6px 6px 7px -3px rgba(50, 50, 50, 0.73);
	
}

#sya-filter-trigger{
	display:block; 
	text-align:center;
	font-size: 1.2em;
}

.main-holder .sya-search-select-box input[type="text"], 
.main-holder .sya-search-select-box-callback input[type="text"], 
.sya-search-select-box textarea,
.sya-search-select-box-callback textarea,
.main-holder .sya-input-half input[type="text"],
.main-holder .sya-input-half input[type="tel"],
.main-holder .sya-input-full input[type="text"],
.main-holder .sya-input-full input[type="password"],
.main-holder .sya-input-full select
{
	 background: #ffffff;
	 padding: 4px !important;
	 margin:10px !important;
	 width:90%;
	 color: #000000 !important;
}

#keyword-callback ul div{
	cursor: pointer;
	background: #ffffff;
	width:75%;
	padding-left:5px;
}


.sya-filter-callback ul li div{
	background: #ededed;
	display: inline;
	cursor: pointer;
	padding: 2px 4px 2px 4px;
	list-style-type: '-';
	-webkit-box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.75);
	-moz-box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.75);
	box-shadow: 2px 2px 5px -1px rgba(0,0,0,0.75);
}

/****** Find A Car Search Control *********/
.sya-search-control-buttons{
	width: 130px;
    display: none;
    padding: 3px;
}
#search_controls{
	text-align: center;
	padding:5px;
}
.sya-delete-icon{
	margin: 0 10px 3px 0;
	cursor: pointer;
}
#saved-searches ul{
	list-style: none;
	margin-left: 5px;
}




/****** Find A Car Photo Gallery *********/
#sya-photo-gallery-container{
	display:none;
	position: fixed;
	right: 50%;
	margin-right: -580px;
	top: 75px;
	z-index: 101;
	width:1160px;
	height: 90%;
    overflow-y: scroll;
    overflow-x: hidden;
}

@media (max-width: 1170px) {
	#sya-photo-gallery-container{
		width:100%;
		right: 0;
		margin: 0 auto;
	}
	
}


#sya-result-car-photos{
	width:98%;
}
.sya-close{
	text-align: center;
	font-size: 1.5em;
	z-index: 109;
	position: fixed;
	right: 50%;
}
.sya-close a{
	color: white;
	padding: 5px 40px 5px 40px;
	background: #000000;
	border: 1px solid #696767;
	-webkit-box-shadow: 6px 6px 7px -3px rgba(50, 50, 50, 0.73);
	-moz-box-shadow:    6px 6px 7px -3px rgba(50, 50, 50, 0.73);
	box-shadow:         6px 6px 7px -3px rgba(50, 50, 50, 0.73);
}

#sya-waiting{
	text-align: center;
	color:#ffffff;
	z-index: 104;
}







/***************Offer A Car Photo Box***************/
#sya-photo-box{
	display:none;
	position: relative;

	margin: 0 auto;
}
#sya-photo-box-trigger{
	font-size: 1.5em;
	cursor: pointer;
}
#sya-car-description textarea{
	background: #ffffff;
	width:85%;
	color: #000000 !important;
	height:100px;
}

#sya-offer-a-car-user-panel, #sya-find-a-car-user-panel{
	padding:10px;
}
#sya-offer-a-car-user-cars, #sya-offer-a-car-user-photos{
	display: inline-block;
	/* removed legacy star-hack props */
	vertical-align: top;
	padding: 5px;
}
#sya-offer-a-car-user-cars{
	width:25%;
}

/* Full-width override for better "My Cars" display */
#sya-offer-a-car-user-cars{
	width: 100% !important;
	display: block !important;
}
#sya-offer-a-car-user-photos{
	width:70%;
}




/***************Settings Page***************/

#sya-settings-box{
	width:750px;
	margin: 0 auto;
}
.sya-settigs-sub{
	margin: 10px;
}

.sya-input-half{
	display: inline-block;
	vertical-align: top;
	width: 48%;
}

.sya-input-half-center{
	margin:0 auto;
	width:200px;
}
input#sya-settings-button{
	padding: 2px;
	font-size: 18px;
}

.required-label{
	color:red;
}



/***************How This Works***************/

#sya-how-this-works-container{
	font-size: 1.3em;
	overflow-y: scroll;
	overflow-x: hidden;
	position:fixed;
	height: 500px;
	cursor: grab;
}

#sya-how-this-works-container h4{
	margin-bottom: 20px;
	display: block;
}
.sya-close-HTW{
	float:right;
	cursor: pointer;
}


@media (max-width: 769px) {
	#sya-how-this-works-container{
		position:absolute;
	}
	
}

#sya-how-this-works {
	padding-bottom: 10px;
}
#sya-how-this-works dt{
	font-size: 1.2em;
}
#sya-how-this-works dd li{
	list-style: square;
}


/***************Privacy and User Agreement***************/
#sya-disclaimer-l1{
	list-style-type: upper-roman;
}
#sya-disclaimer-l1 h2, #sya-disclaimer-l1 li{
	font-size: 28px;
}
#sya-disclaimer-l1 p{
	font-size: 18px;
}

#sya-disclaimer-l2{
	list-style-type: upper-alpha;
}
#sya-disclaimer-l1 h3{
	font-size: 22px;
	font-weight: bold;
}
#sya-disclaimer-l2 li{
	font-size: 22px;
}

#sya-disclaimer-l2 p, #sya-disclaimer-l3 p{
	margin-left: 20px;
}




/*
Fancy Buttons
Constructor
http://livetools.uiparade.com/button-builder.html
*/
.sya-button, #sya-settings-button{
	margin:3px;
   border: 1px solid #807980;
   background: #949494;
   background: -webkit-gradient(linear, left top, left bottom, from(#a8a6a8), to(#949494));
   background: -webkit-linear-gradient(top, #a8a6a8, #949494);
   background: -moz-linear-gradient(top, #a8a6a8, #949494);
   background: -ms-linear-gradient(top, #a8a6a8, #949494);
   background: -o-linear-gradient(top, #a8a6a8, #949494);
   background-image: -ms-linear-gradient(top, #a8a6a8 0%, #949494 100%);
   padding: 3.5px 7px;
   -webkit-border-radius: 0px;
   -moz-border-radius: 0px;
   border-radius: 0px;
   -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(255,255,255,0.4) 0 1px 0;
   text-shadow: #66696b 0 1px 0;
   color: #575457;
   font-size: 14px;
   font-family: helvetica, serif;
   text-decoration: none;
   vertical-align: middle;
   }
.sya-button:hover, #sya-settings-button:hover {
   border: 1px solid #3b3b3b;
   text-shadow: #575757 0 1px 0;
   background: #a8a6a8;
   background: -webkit-gradient(linear, left top, left bottom, from(#949494), to(#a8a6a8));
   background: -webkit-linear-gradient(top, #949494, #a8a6a8);
   background: -moz-linear-gradient(top, #949494, #a8a6a8);
   background: -ms-linear-gradient(top, #949494, #a8a6a8);
   background: -o-linear-gradient(top, #949494, #a8a6a8);
   background-image: -ms-linear-gradient(top, #949494 0%, #a8a6a8 100%);
   color: #8c888c;
   }
.sya-button:active, #sya-settings-button:active {
   text-shadow: #4a4a4a 0 1px 0;
   border: 1px solid #3d3d3d;
   background: #688ba3;
   background: -webkit-gradient(linear, left top, left bottom, from(#3d5c70), to(#a8a6a8));
   background: -webkit-linear-gradient(top, #3d5c70, #688ba3);
   background: -moz-linear-gradient(top, #3d5c70, #688ba3);
   background: -ms-linear-gradient(top, #3d5c70, #688ba3);
   background: -o-linear-gradient(top, #3d5c70, #688ba3);
   background-image: -ms-linear-gradient(top, #3d5c70 0%, #688ba3 100%);
   color: #e0bb5e;
   }

/* Phase 2 Fix: Ensure header login buttons are always visible */
#sya-sign-in-container .sya-button {
	display: inline-block !important;
	margin: 2px !important;
	position: relative !important;
	z-index: 20 !important;
}

#sya-sign-in-container span {
	display: inline !important;
	margin-right: 5px !important;
}

/* Phase 2 Fix: Vertical layout for header login elements */
#sya-sign-in-container div {
	line-height: 1.3 !important;
	margin: 1px 0 !important;
}

/* Phase 2 Fix: Responsive header login on smaller screens */
@media (max-width: 768px) {
	#sya-sign-in-container {
		white-space: normal !important;
		min-width: auto !important;
	}
	
	#sya-sign-in-container span {
		display: inline-block !important;
		margin: 1px !important;
	}
	
	#sya-sign-in-container div {
		margin: 2px 0 !important;
	}
}

/* ===== SYA V2 LOGIN COMPONENT - HEADER OPTIMIZED ===== */
/* Designed specifically for fixed-height header positioning */

#sya-v2-login-container {
	/* Header positioning - center vertically in header */
	display: inline-block;
	vertical-align: middle;
	text-align: right;
	line-height: 1.3;
	font-size: 15px; /* Increased from 14px (+7%) */
	/* Removed explicit color to inherit from WordPress theme */
	max-width: none; /* was 280px; allow single-line layout */
	white-space: nowrap; /* prevent wrapping */
}

/* Single row layout for both logged in and logged out states */
.sya-v2-single-row {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0; /* Remove gap, use individual padding instead */
	flex-wrap: nowrap; /* force one line */
}

/* Welcome message as clickable link */
.sya-v2-welcome-link {
	color: #017CBF;
	text-decoration: none;
	font-size: 13px; /* Increased from 12px (+8%) */
	font-weight: normal;
	padding-right: 20px; /* Increased from 15px */
}

.sya-v2-welcome-link:hover {
	text-decoration: underline;
}

/* Logout link styling */
.sya-v2-logout {
	color: #017CBF;
	text-decoration: none;
	font-size: 14px; /* Increased from 13px (+8%) */
	font-weight: 500;
}

.sya-v2-logout:hover {
	text-decoration: underline;
}

/* V2 Button styling */
.sya-v2-btn {
	display: inline-block;
	padding: 5px 10px; /* Increased padding for better touch target */
	margin-right: 15px; /* Increased from 10px */
	border: 1px solid #017CBF;
	border-radius: 3px;
	text-decoration: none;
	font-size: 13px; /* Increased from 12px (+8%) */
	font-weight: 500;
	transition: all 0.2s ease;
}

/* Reset password link in single row */
.sya-v2-reset-link {
	color: inherit;
	text-decoration: none;
	font-size: 14px; /* Increased from 13px (+8%) */
	padding-left: 15px; /* Increased from 10px */
	display: inline-block; /* keep on one line with buttons */
	white-space: nowrap; /* ensure the text itself doesn't wrap */
}

/* Sign up - PRIMARY button (blue) */
.sya-v2-signup {
	background: #017CBF;
	color: white;
}

.sya-v2-signup:hover {
	background: #015a9f;
	color: white;
	text-decoration: none;
}

/* Log in - SECONDARY button (white) */
.sya-v2-login {
	background: white;
	color: #017CBF;
}

.sya-v2-login:hover {
	background: #f0f0f0;
	color: #015a9f;
	text-decoration: none;
}

/* Mobile responsiveness for V2 login */
@media (max-width: 768px) {
	#sya-v2-login-container {
		max-width: 200px; /* Increased from 180px */
		font-size: 13px; /* Increased from 12px */
	}
	
	.sya-v2-btn {
		padding: 4px 7px; /* Increased from 3px 6px */
		font-size: 12px; /* Increased from 11px */
		margin-right: 12px; /* Increased from 10px */
	}
	
	.sya-v2-welcome-link {
		font-size: 12px; /* Increased from 11px */
		padding-right: 15px; /* Increased from 12px */
	}
	
	.sya-v2-logout {
		font-size: 13px; /* Increased from 12px */
	}
	
	.sya-v2-reset-link {
		font-size: 13px; /* Increased from 12px */
		padding-left: 12px; /* Increased from 8px */
	}
}

/* Dark header compatibility - minimal overrides for readability */
.dark-header #sya-v2-login-container,
.header-dark #sya-v2-login-container {
	color: #fff;
}

.dark-header .sya-v2-welcome-link,
.header-dark .sya-v2-welcome-link {
	color: #ccc;
}

.dark-header .sya-v2-welcome-link:hover,
.header-dark .sya-v2-welcome-link:hover {
	color: #fff;
}

.dark-header .sya-v2-reset-link,
.header-dark .sya-v2-reset-link {
	color: #ccc;
}

.dark-header .sya-v2-reset-link:hover,
.header-dark .sya-v2-reset-link:hover {
	color: #fff;
}

/* Search Results Spinner */
.sya-search-spinner {
    text-align: center;
    padding: 40px;
    background: #f9f9f9;
    border-radius: 5px;
    margin: 20px 0;
}

.sya-spinner {
    border: 4px solid #f3f3f3;
    border-top: 4px solid #3498db;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 15px auto;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.sya-search-spinner p {
    color: #666;
    font-style: italic;
    margin: 0;
}

.sya-search-placeholder {
    background: #f9f9f9;
    border-radius: 5px;
    margin: 20px 0;
}

/* Delete Car Dialog Styling */
.sya-delete-dialog.no-close .ui-dialog-titlebar-close {
    display: none;
}

.sya-delete-dialog .ui-dialog-title {
    font-weight: bold;
    color: #d63638;
}

.sya-delete-dialog .ui-dialog-buttonpane {
    text-align: center;
    padding: 15px 20px;
    border-top: 1px solid #ddd;
}

.sya-delete-dialog .ui-dialog-buttonpane .ui-button {
    margin: 0 5px;
    padding: 8px 20px;
    font-size: 14px;
    font-weight: bold;
    border-radius: 5px;
    border: none;
    white-space: nowrap;
    min-width: 120px;
    display: inline-block;
}

.sya-delete-dialog .ui-button:first-child {
    background-color: #0073aa;
    color: white;
}

.sya-delete-dialog .ui-button:first-child:hover {
    background-color: #005a87;
}

.sya-delete-dialog .ui-button:last-child {
    background-color: #d63638;
    color: white;
}

.sya-delete-dialog .ui-button:last-child:hover {
    background-color: #a02a2a;
}

/* Ensure dialog doesn't get too narrow on mobile */
.sya-delete-dialog {
    min-width: 300px !important;
}

/* Responsive adjustments for smaller screens */
@media (max-width: 480px) {
    .sya-delete-dialog .ui-dialog-buttonpane .ui-button {
        display: block;
        width: 100%;
        margin: 5px 0;
        min-width: auto;
    }
    
    .sya-delete-dialog {
        width: 90% !important;
        max-width: 400px !important;
    }
}

/****** Admin User Table Header Styling *********/
.sya-table-header {
    background-color: #f9f9f9 !important;
    font-weight: bold;
    border-bottom: 2px solid #ddd;
    cursor: default !important;
}

.sya-table-header .sya_username {
    cursor: default !important;
    pointer-events: none;
}

.sya-table-header .sya_username:hover {
    background-color: #f9f9f9 !important;
    cursor: default !important;
}

/* Ensure all header columns are not clickable */
.sya-table-header .sya_usercolumn {
    cursor: default !important;
    pointer-events: none;
}

.sya-table-header .sya_usercolumn:hover {
    background-color: #f9f9f9 !important;
}

/* User row styling for clickable usernames */
.sya_username[data-id] {
    cursor: pointer !important;
    pointer-events: auto;
}

.sya_username[data-id]:hover {
    background-color: #f0f0f0 !important;
}

/* =================================================================
   DROPZONE.JS CUSTOM STYLING FOR SYA CAR PHOTO UPLOADS
   ================================================================= */

/* Main dropzone container */
#sya-photo-uploader.dropzone {
    border: 2px dashed #017CBF;
    border-radius: 8px;
    background: #fafafa;
    padding: 30px 20px;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    min-height: 200px;
    margin: 20px 0;
}

#sya-photo-uploader.dropzone:hover {
    background: #f0f8ff;
    border-color: #0056b3;
    transform: translateY(-1px);
}

#sya-photo-uploader.dropzone.dz-drag-hover {
    background: #e3f2fd;
    border-color: #1976d2;
    border-style: solid;
}

/* Dropzone message styling */
#sya-photo-uploader .dz-message {
    font-size: 18px;
    font-weight: 500;
    color: #017CBF;
    margin: 0;
    line-height: 1.4;
}

#sya-photo-uploader .dz-message small {
    font-size: 14px;
    color: #666;
    font-weight: normal;
    display: block;
    margin-top: 8px;
}

/* Preview styling */
#sya-photo-uploader .dz-preview {
    display: inline-block;
    margin: 15px 10px;
    border: 1px solid #ddd;
    border-radius: 8px;
    background: white;
    padding: 15px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    max-width: 200px;
    position: relative;
    transition: all 0.3s ease;
}

#sya-photo-uploader .dz-preview:hover {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Image thumbnails */
#sya-photo-uploader .dz-preview .dz-image {
    width: 150px;
    height: 150px;
    border-radius: 6px;
    overflow: hidden;
    margin: 0 auto 10px;
    background: #f8f9fa;
    display: flex;
    align-items: center;
    justify-content: center;
}

#sya-photo-uploader .dz-preview .dz-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.3s ease;
}

#sya-photo-uploader .dz-preview:hover .dz-image img {
    transform: scale(1.05);
}

/* File details */
#sya-photo-uploader .dz-preview .dz-details {
    text-align: center;
    margin-top: 10px;
}

#sya-photo-uploader .dz-preview .dz-filename {
    font-size: 12px;
    color: #333;
    margin-bottom: 5px;
    word-break: break-word;
    font-weight: 500;
}

#sya-photo-uploader .dz-preview .dz-size {
    font-size: 11px;
    color: #666;
    margin-bottom: 8px;
}

/* Progress bar */
#sya-photo-uploader .dz-preview .dz-progress {
    height: 6px;
    background: #e9ecef;
    border-radius: 3px;
    margin: 8px 0;
    overflow: hidden;
    position: relative;
}

#sya-photo-uploader .dz-preview .dz-progress .dz-upload {
    height: 100%;
    background: linear-gradient(90deg, #017CBF, #0056b3);
    border-radius: 3px;
    transition: width 0.3s ease;
    position: relative;
}

#sya-photo-uploader .dz-preview .dz-progress .dz-upload::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    animation: shimmer 1.5s infinite;
}

@keyframes shimmer {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(100%); }
}

/* Remove button */
#sya-photo-uploader .dz-preview .dz-remove {
    background: #dc3545;
    color: white;
    border: none;
    border-radius: 4px;
    padding: 6px 12px;
    font-size: 11px;
    cursor: pointer;
    margin-top: 8px;
    transition: all 0.3s ease;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

#sya-photo-uploader .dz-preview .dz-remove:hover {
    background: #c82333;
    transform: translateY(-1px);
}

/* Success and error states */
#sya-photo-uploader .dz-preview.dz-success {
    border-color: #28a745;
}

#sya-photo-uploader .dz-preview.dz-success::after {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #28a745;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

#sya-photo-uploader .dz-preview.dz-error {
    border-color: #dc3545;
}

#sya-photo-uploader .dz-preview.dz-error::after {
    content: '✕';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dc3545;
    color: white;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: bold;
}

#sya-photo-uploader .dz-preview.dz-error .dz-error-message {
    background: #f8d7da;
    color: #721c24;
    padding: 8px;
    border-radius: 4px;
    font-size: 11px;
    margin-top: 8px;
    border: 1px solid #f5c6cb;
}

/* Empty state styling */
#sya-photo-uploader:empty::before {
    content: '';
    display: block;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    #sya-photo-uploader .dz-preview {
        margin: 10px 5px;
        max-width: 160px;
        padding: 10px;
    }
    
    #sya-photo-uploader .dz-preview .dz-image {
        width: 120px;
        height: 120px;
    }
    
    #sya-photo-uploader .dz-message {
        font-size: 16px;
    }
}

/* Dark theme support */
@media (prefers-color-scheme: dark) {
    #sya-photo-uploader.dropzone {
        background: #2d3748;
        border-color: #4a5568;
    }
    
    #sya-photo-uploader.dropzone:hover {
        background: #374151;
    }
    
    #sya-photo-uploader .dz-preview {
        background: #374151;
        border-color: #4a5568;
    }
    
    #sya-photo-uploader .dz-preview .dz-filename {
        color: #e2e8f0;
    }
    
    #sya-photo-uploader .dz-preview .dz-size {
        color: #a0aec0;
    }
}

/* =================================================================
   MATCH LINKS STYLING FOR SEARCH RESULTS
   ================================================================= */

/* Match link container positioning */
.match_flag_container {
    position: absolute;
    top: 10px;
    right: 10px;
    z-index: 10;
}

@media (max-width: 769px) {
    .match_flag_container {
        position: static;
        margin: 10px 0;
        text-align: center;
    }
}

/* Individual match links */
.match-link {
    display: inline-block !important;
    background: #017CBF;
    color: white !important;
    padding: 8px 12px;
    margin: 2px;
    text-decoration: none !important;
    border-radius: 4px;
    font-size: 0.9em;
    font-weight: bold;
    transition: all 0.3s ease;
    border: none;
    cursor: pointer;
    line-height: 1.2;
    text-align: center;
    min-width: 120px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.match-link:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    text-decoration: none !important;
    color: white !important;
}

.match-link:active {
    transform: translateY(0);
    box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

/* Different colors for different match types */
.match-link-3way {
    background: #017CBF !important;
}

.match-link-3way:hover {
    background: #015a9f !important;
}

.match-link-2way {
    background: #96BA34 !important;
}

.match-link-2way:hover {
    background: #7a9b2a !important;
}

/* Responsive design for match links */
@media (max-width: 600px) {
    .match-link {
        display: block !important;
        margin: 5px auto;
        max-width: 200px;
        font-size: 0.85em;
        padding: 10px 15px;
    }
}

/* Focus styles for accessibility */
.match-link:focus {
    outline: 2px solid #FEDE00;
    outline-offset: 2px;
}

/* ===== SYA SESSION EXPIRED MODAL STYLING ===== */
/* WordPress auth-check modal styling to match SYA branding */

/* Style the modal backdrop */
#wp-auth-check-wrap #wp-auth-check-bg {
    background: rgba(1, 124, 191, 0.8) !important;
}

/* Style the modal container */
#wp-auth-check-wrap #wp-auth-check {
    background: #ffffff !important;
    border-radius: 12px !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
    border: 3px solid #017CBF !important;
    padding: 0 !important;
    overflow: hidden !important;
}

/* Style the close button */
#wp-auth-check-wrap .wp-auth-check-close {
    background: #017CBF !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    width: 28px !important;
    height: 28px !important;
    right: 8px !important;
    top: 8px !important;
    z-index: 1000012 !important;
    transition: background-color 0.3s ease !important;
}

#wp-auth-check-wrap .wp-auth-check-close:hover {
    background: #008AD2 !important;
    transform: scale(1.1) !important;
}

/* Style the iframe to remove borders and ensure full coverage */
#wp-auth-check-wrap #wp-auth-check-form iframe {
    border: none !important;
    border-radius: 8px !important;
}

/* Fallback message styling */
#wp-auth-check-wrap .wp-auth-fallback {
    background: #f0f8ff !important;
    border: 2px solid #017CBF !important;
    border-radius: 8px !important;
    color: #017CBF !important;
    font-weight: 500 !important;
    text-align: center !important;
    margin: 20px !important;
    padding: 20px !important;
}

/* Add SYA logo to modal header (when fallback is shown) */
#wp-auth-check-wrap.fallback #wp-auth-check:before {
    content: "";
    display: block;
    width: 160px;
    height: 104px;
    background: url('../images/logo_sya.jpg') no-repeat center;
    background-size: 160px 104px;
    margin: 20px auto 10px;
}

/* WordPress Theme Override - Fix Column Layout Issues */
#sya-container {
    display: block !important;
}

/* Container as design-system card */
#sya-settings-box {
	/* Override old fixed width */
	width: 100% !important;
	max-width: 820px;
	margin: 0 auto;
	background: var(--sya-white);
	border: 1px solid var(--sya-border);
	border-radius: var(--sya-radius-lg);
	box-shadow: var(--sya-shadow-sm);
	padding: var(--sya-space-6);
	box-sizing: border-box;
}

/* Section spacing */
#sya-settings-box .sya-settigs-sub {
	margin: var(--sya-space-4) 0;
}

/* Field wrappers: keep existing half/full width behavior but use grid inside for label/input spacing */
#sya-settings-box .sya-input-half,
#sya-settings-box .sya-input-full,
#sya-settings-box .sya-input-half-center {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sya-space-2);
}

/* Labels mapped to design-system label */
#sya-settings-box label {
	display: block;
	font-weight: 600;
	margin-bottom: var(--sya-space-1);
	color: #333;
	font-size: 14px;
}

/* Inputs/selects mapped to design-system controls */
#sya-settings-box input[type="text"],
#sya-settings-box input[type="tel"],
#sya-settings-box input[type="password"],
#sya-settings-box select {
	width: 100%;
	height: 48px;
	padding: 0 var(--sya-space-4);
	font-size: var(--sya-font-size-base);
	line-height: var(--sya-line-height-base);
	color: var(--sya-dark);
	background-color: var(--sya-white);
	border: 1px solid var(--sya-border);
	border-radius: var(--sya-radius-md);
	box-sizing: border-box;
}

#sya-settings-box input[type="text"]:focus,
#sya-settings-box input[type="tel"]:focus,
#sya-settings-box input[type="password"]:focus,
#sya-settings-box select:focus {
	outline: none;
	border-color: var(--sya-secondary);
	box-shadow: 0 0 0 3px rgba(1, 124, 191, 0.1);
}

/* Centered single-column wrapper; expand from legacy 200px width */
#sya-settings-box .sya-input-half-center {
	width: 100% !important;
	max-width: 420px;
	margin: 0 auto;
}

/* SAVE button mapped to primary CTA */
#sya-settings-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 48px;
	padding: 0 var(--sya-space-6);
	border-radius: var(--sya-radius-md);
	border: 1px solid var(--sya-cta-primary-bg);
	background: var(--sya-cta-primary-bg);
	color: var(--sya-cta-primary-text);
	font-weight: var(--sya-cta-primary-weight);
	font-size: var(--sya-font-size-lg);
	cursor: pointer;
	text-decoration: none;
}
#sya-settings-button:hover {
	background: #e5c500;
	border-color: #e5c500;
}

/* Ensure active state uses design tokens, not legacy gradients */
#sya-settings-button:active {
	background: #d6b800 !important;
	border-color: #d6b800 !important;
	color: var(--sya-cta-primary-text) !important;
	text-shadow: none !important;
	box-shadow: none !important;
}

/* Center the action row */
#sya-settings-box .sya-input-half-center { display: flex; justify-content: center; }

/* Required/error label uses theme token if available */
#sya-settings-box .required-label { color: #dc3545; font-size: 12px; }

/* Responsive tweaks */
@media (max-width: 768px) {
	#sya-settings-box { padding: var(--sya-space-4); }
	#sya-settings-box .sya-input-half { width: 100% !important; }
}

/* SETTINGS — Final polish */
/* Remove inner card border to avoid double-border appearance */
#sya-settings-box { border: none !important; }

/* Keep label above field for Public/Private row (no flex row) */
#sya-settings-box .sya-input-half-center { display: grid !important; justify-content: initial !important; }

/* Center SAVE button without affecting other rows */
#sya-settings-button { display: block !important; margin: 0 auto !important; }

/* SETTINGS — Select consistency for Public/Private */
#sya-settings-box .sya-input-half-center select[name="public"] {
	width: 100% !important;
	height: 48px !important;
	padding: 0 var(--sya-space-4) !important;
	border: 1px solid var(--sya-border) !important;
	border-radius: var(--sya-radius-md) !important;
	background: var(--sya-white) !important;
	font-size: var(--sya-font-size-base) !important;
	line-height: var(--sya-line-height-base) !important;
	box-sizing: border-box !important;
}
#sya-settings-box .sya-input-half-center select[name="public"]:focus {
	outline: none !important;
	border-color: var(--sya-secondary) !important;
	box-shadow: 0 0 0 3px rgba(1,124,191,0.1) !important;
}

/* Ensure label belongs to the select row */
#sya-settings-box .sya-input-half-center > label { margin-bottom: var(--sya-space-1) !important; display:block !important; }

/* Flatten inner card to avoid extra border/shadow around form */
#sya-settings-box { border: none !important; box-shadow: none !important; }

/* SETTINGS — ensure left justification for the Public/Private row */
#sya-settings-box .sya-input-half-center { text-align: left !important; }
#sya-settings-box .sya-input-half-center select[name="public"] { text-align: left !important; }

/* SETTINGS — spacing tweaks to match other pages */
#sya-settings-box .sya-input-half,
#sya-settings-box .sya-input-full,
#sya-settings-box .sya-input-half-center {
	gap: var(--sya-space-1) !important; /* tighter label→field spacing */
	margin-bottom: var(--sya-space-4) !important; /* more space to next label */
}

/* SETTINGS — group sections with a subtle grey container */
#sya-settings-box .sya-settigs-sub {
	background: var(--sya-light) !important;
	border-radius: var(--sya-radius-lg) !important;
	padding: var(--sya-space-4) !important;
	margin: var(--sya-space-6) 0 !important;
}

/* Hide legacy separators now that groups are visually separated */
#sya-settings-box hr { display: none !important; }

/* SETTINGS — restore main white card styling (was flattened earlier) */
#sya-settings-box {
	background: var(--sya-white) !important;
	border: 1px solid var(--sya-border) !important;
	box-shadow: var(--sya-shadow-sm) !important;
}

/* SETTINGS — Save button belongs inside the main white card (no extra grey wrapper) */
#sya-settings-box .sya-settigs-sub:last-of-type {
	background: transparent !important;
	padding: 0 !important;
	margin: var(--sya-space-4) 0 0 !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Tighten spacing for the button row inside the flattened container */
#sya-settings-box .sya-settigs-sub:last-of-type .sya-input-half-center {
	margin-top: var(--sya-space-2) !important;
}

/* Ensure the button is centered within the main card without its own container */
#sya-settings-button {
	display: block !important;
	margin: 0 auto !important;
}

/* SETTINGS — remove unexpected outer wrapper border/shadow so only the main card shows */
#sya-container {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* If theme injects extra wrappers around the settings box, flatten them too */
#sya-container > *:not(#sya-settings-box) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}

/* Ensure the primary card stays visually above any flattened wrappers */
#sya-settings-box { position: relative; z-index: 1; }

/* SETTINGS — ensure no extra outer card appears around the main settings card */
/* Flatten any immediate wrapper that contains only #sya-settings-box */
div:has(> #sya-settings-box) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Guard: if the theme adds a sibling wrapper after the card, flatten it too */
#sya-settings-box + div {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Keep the primary card styling intact */
#sya-settings-box { background: var(--sya-white) !important; box-shadow: var(--sya-shadow-sm) !important; }

/* ROLLBACK: Restore outer card globally (undo previous #sya-container flattening) */
#sya-container { background: revert !important; border: revert !important; box-shadow: revert !important; }
#sya-container > *:not(#sya-settings-box),
#sya-settings-box + div,
div:has(> #sya-settings-box) {
	background: revert !important;
	border: revert !important;
	box-shadow: revert !important;
	padding: revert !important;
	margin: revert !important;
}

/* Scope flattening to Settings only */
#sya-container:has(#sya-settings-box) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}
#sya-container:has(#sya-settings-box) > *:not(#sya-settings-box) {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	padding: 0 !important;
	margin: 0 !important;
}

/* Restore design-system outer card globally (undo accidental flattening) */
#sya-container {
	background: var(--sya-white) !important;
	border: 1px solid var(--sya-border) !important;
	border-radius: var(--sya-radius-lg) !important;
	box-shadow: var(--sya-shadow-sm) !important;
	padding: var(--sya-space-6) !important;
}

/* Settings: use a single card — flatten inner settings box so only the outer card shows */
#sya-settings-box {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
}