/* Services list + tooltip styles extracted from templates/index.html */
.services-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.service-item{background:rgba(255,255,255,0.02);border:1px solid rgba(255,255,255,.04);padding:12px;border-radius:12px;cursor:pointer;transition:transform .08s ease,background .12s ease;display:inline-block}
.service-item:focus,.service-item:hover{transform:translateY(-4px);background:linear-gradient(180deg,rgba(82,45,128,.12),rgba(82,45,128,.06));outline:none}
.service-item h4{margin:0 0 6px 0;font-size:1rem}
.service-item p{margin:0;color:var(--muted);font-size:.92rem}

.tooltip-pop{position:fixed;z-index:1200;max-width:320px;background:linear-gradient(180deg,var(--panel),var(--panel-2));color:var(--text);padding:12px;border-radius:10px;box-shadow:0 12px 30px rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.06);pointer-events:none;opacity:0;transform:translateY(6px) scale(.98);transition:opacity .12s ease,transform .12s ease}
.tooltip-pop.visible{opacity:1;transform:translateY(0) scale(1);pointer-events:auto}

/* Modal / overlay styles for inline work-order form - increased contrast */
#modal-overlay, .modal-overlay{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(0,0,0,0.78);z-index:1400;backdrop-filter:blur(3px)}
/* When JS hides via inline style display:none the overlay will be hidden; this class defines visible state */
.modal-overlay.hidden, #modal-overlay.hidden{display:none}

/* Modal / overlay styles use the project's trust-oriented palette defined in `trustedpro.css` */
#modal-content, .modal-content{max-width:760px;width:92%;margin:auto;background:var(--color-bg-card, #ffffff);color:var(--color-text-primary, #333);border-radius:12px;box-shadow:0 30px 80px rgba(0,0,0,0.6);border:1px solid rgba(0,0,0,0.06);padding:18px}
.modal-inner{position:relative}
.modal-close{position:absolute;right:8px;top:8px;background:transparent;border:0;color:var(--color-primary, #2B6CB0);font-size:28px;cursor:pointer;padding:6px;line-height:1}

/* Make modal body scrollable on small screens */
#modal-body{max-height:70vh;overflow:auto;padding-top:6px}

/* Form elements inside the modal follow global form styles */
#modal-content label, #modal-content .form-label{color:var(--color-text-primary, #333);display:block;margin-bottom:6px;font-weight:600}
#modal-content input[type="text"],
#modal-content input[type="email"],
#modal-content input[type="tel"],
#modal-content select{background:var(--color-bg-card, #ffffff);color:var(--color-text-primary, #333);border:1px solid #ccc;padding:8px 10px;border-radius:6px;width:100%;box-sizing:border-box;margin-bottom:10px;transition:border-color .3s,box-shadow .3s}
#modal-content input:focus,
#modal-content textarea:focus,
#modal-content select:focus{border-color:var(--color-border, #5DA9A6);box-shadow:0 0 4px var(--color-border, #5DA9A6)}

/* textarea uses the same style as other inputs by default */
#modal-content textarea{background:var(--color-bg-card, #ffffff);color:var(--color-text-primary, #333);border:1px solid #ccc;padding:8px 10px;border-radius:6px;width:100%;box-sizing:border-box;margin-bottom:10px;min-height:100px}

/* Buttons inside modal use primary/secondary variables from the palette */
#modal-content button[type="submit"],
#modal-content .btn, 
#modal-content input[type="submit"]{background:var(--color-primary, #2B6CB0);color:var(--color-bg-card, #fff);border:none;padding:10px 14px;border-radius:8px;cursor:pointer;font-weight:700}
#modal-content button[type="submit"]:hover,
#modal-content .btn:hover,
#modal-content input[type="submit"]:hover{background:var(--color-secondary, #6CA870);transform:translateY(-2px);opacity:0.98}

/* Slightly raise tooltip z so it doesn't overlap modal chrome */
.tooltip-pop{z-index:1200}

/* ===== Modal design tuned to match attached UI (dark purple gradient card, neon outline, dark inputs, orange CTA) ===== */
#modal-content.card-hero, .modal-content.card-hero{padding:26px}
/* Deep-blue modal background to match requested visual (deep navy -> indigo) */
#modal-content, .modal-content{background:linear-gradient(180deg,#071025 0%,#0f1b3a 55%,#171f44 100%);border-radius:14px;position:relative;overflow:visible;color:#f6f7fb}

/* Strong neon outline + layered glow to match the attached design */
#modal-content, .modal-content{border:2px solid rgba(180,75,255,0.95);box-shadow:0 10px 40px rgba(25,10,30,0.6),0 0 16px rgba(180,75,255,0.22),0 0 36px rgba(180,75,255,0.12)}

/* Animated outer halo using a pseudo-element for a crisp neon edge */
#modal-content::after, .modal-content::after{
	content: "";
	position: absolute;
	inset: -8px; /* extend beyond card to form halo */
	border-radius: inherit;
	background: linear-gradient(90deg, rgba(180,75,255,0.95), rgba(120,50,240,0.85));
	filter: blur(6px);
	opacity: 0.85;
	z-index: -1;
	pointer-events: none;
	transition: opacity 0.3s ease;
	animation: neonPulse 3.2s ease-in-out infinite;
}

@keyframes neonPulse{
	0%{transform: scale(1);filter: blur(6px);opacity:0.8}
	50%{transform: scale(1.03);filter: blur(10px);opacity:1}
	100%{transform: scale(1);filter: blur(6px);opacity:0.8}
}

.modal-title{font-size:1.6rem;margin:0 0 14px 0;font-weight:800;color:#ffffff}
.modal-label{display:block;margin-bottom:6px;color:#ffffff;font-weight:700}

.modal-input{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:#000;color:#fff;box-shadow:inset 0 2px 6px rgba(0,0,0,0.6);margin-bottom:12px}
.modal-input::placeholder{color:rgba(255,255,255,0.55)}
.modal-textarea{width:100%;padding:12px;border-radius:10px;border:1px solid rgba(255,255,255,0.06);background:#000;color:#fff;box-shadow:inset 0 2px 6px rgba(0,0,0,0.6);margin-bottom:12px;min-height:120px}

.modal-options-title{font-weight:700;margin-bottom:8px;color:rgba(255,255,255,0.92)}
.modal-option{display:block;margin-bottom:8px;color:#ffffff;font-weight:700}
.modal-consent{display:flex;align-items:center;gap:8px;margin-top:8px}
.modal-consent-label{color:#ffffff;font-weight:700}

/* Ensure any native label tag inside the modal is bold white */
#modal-content label{color:#ffffff;font-weight:700}

.modal-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:18px}
.modal-submit{background:linear-gradient(180deg,#ff7a3b,#F56600);color:#fff;border:none;padding:14px 18px;border-radius:14px;cursor:pointer;font-weight:800;font-size:1rem;min-width:200px;transition:transform .18s ease,box-shadow .18s ease,filter .18s ease;box-shadow:0 6px 18px rgba(245,102,0,0.18)}
.modal-submit:hover{transform:translateY(-3px);filter:brightness(1.03);box-shadow:0 18px 48px rgba(245,102,0,0.32),0 8px 24px rgba(245,102,0,0.18)}

/* High-specificity selector to force the primary button inside the modal actions to be Clemson orange */
/* Primary submit button inside the modal — match attached visual: full-width, tall, rounded orange CTA with glow */
#workOrderForm > div.modal-actions > button,
#workOrderForm > .modal-actions > button{
	display:block !important;
	width:100% !important;
	background: linear-gradient(180deg,#ff7a3b 0%, #F56600 100%) !important;
	color: #ffffff !important;
	border: none !important;
	padding: 16px 20px !important;
	height:56px !important;
	line-height:24px !important;
	border-radius: 12px !important;
	box-shadow: 0 12px 36px rgba(245,102,0,0.28), inset 0 -3px 10px rgba(0,0,0,0.18) !important;
	min-width: 0 !important;
	font-weight: 800 !important;
	font-size: 1.05rem !important;
	text-align:center !important;
	letter-spacing: 0.4px !important;
	transition: transform .16s ease, box-shadow .16s ease, filter .16s ease !important;
}
#workOrderForm > div.modal-actions > button:hover,
#workOrderForm > .modal-actions > button:hover{
	transform: translateY(-3px) !important;
	box-shadow: 0 24px 64px rgba(245,102,0,0.36), inset 0 -3px 12px rgba(0,0,0,0.22) !important;
	filter: brightness(1.03) !important;
}
.modal-actions .btn-outline{background:transparent;border:1px solid rgba(255,255,255,0.08);color:rgba(255,255,255,0.9);padding:10px 14px;border-radius:10px}

.modal-result .success-message{background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.02));border:1px solid rgba(180,75,255,0.6);color:#fff;padding:12px;border-radius:8px;margin-top:12px}

/* Make form elements larger on small viewports and center actions */
@media (max-width:560px){
	.modal-actions{flex-direction:column-reverse;align-items:stretch}
	.modal-submit{width:100%;min-width:0}
	.modal-actions .btn-outline{width:100%}
}