/**
 * Job Bookers Routing — Frontend widget styles
 *
 * Scoped entirely to .jbr-widget. No !important. No generic element
 * selectors outside the wrapper. Fully overridable by theme CSS.
 *
 * Colours and spacing use CSS custom properties so a theme can override
 * the entire look with a single rule block:
 *
 *   .jbr-widget {
 *     --jbr-color-primary: #your-brand-colour;
 *   }
 *
 * @since 1.0.0
 */

/* ---------------------------------------------------------------------------
   Custom properties (design tokens)
   --------------------------------------------------------------------------- */

.jbr-widget {
	--jbr-color-primary:     #1a73e8;
	--jbr-color-primary-hover: #1558b0;
	--jbr-color-error:       #d93025;
	--jbr-color-success:     #188038;
	--jbr-color-text:        #202124;
	--jbr-color-text-muted:  #5f6368;
	--jbr-color-border:      #dadce0;
	--jbr-color-bg:          #ffffff;
	--jbr-color-bg-result:   #f8f9fa;
	--jbr-radius:            6px;
	--jbr-spacing:           12px;
	--jbr-font-size:         15px;
}

/* ---------------------------------------------------------------------------
   Widget wrapper
   --------------------------------------------------------------------------- */

.jbr-widget {
	background-color: var( --jbr-color-bg );
	border: 1px solid var( --jbr-color-border );
	border-radius: var( --jbr-radius );
	box-sizing: border-box;
	font-size: var( --jbr-font-size );
	max-width: 480px;
	padding: calc( var( --jbr-spacing ) * 2 );
}

.jbr-widget *,
.jbr-widget *::before,
.jbr-widget *::after {
	box-sizing: inherit;
}

/* Admin-only notice state (shown when no API key is set, admins only) */
.jbr-widget--notice {
	border-color: #f0c33c;
	background-color: #fefbe7;
}

.jbr-widget--notice p {
	color: var( --jbr-color-text );
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Form
   --------------------------------------------------------------------------- */

.jbr-form {
	margin: 0;
	padding: 0;
}

/* ---------------------------------------------------------------------------
   Field groups
   --------------------------------------------------------------------------- */

.jbr-field {
	margin-bottom: var( --jbr-spacing );
}

.jbr-field:last-of-type {
	margin-bottom: 0;
}

/* ---------------------------------------------------------------------------
   Labels
   --------------------------------------------------------------------------- */

.jbr-widget .jbr-label {
	color: var( --jbr-color-text );
	display: block;
	font-size: 13px;
	font-weight: 600;
	margin-bottom: 4px;
}

/* ---------------------------------------------------------------------------
   Inputs
   --------------------------------------------------------------------------- */

.jbr-widget .jbr-input {
	background-color: var( --jbr-color-bg );
	border: 1px solid var( --jbr-color-border );
	border-radius: var( --jbr-radius );
	color: var( --jbr-color-text );
	display: block;
	font-size: var( --jbr-font-size );
	padding: 8px 12px;
	text-transform: uppercase;
	transition: border-color 0.15s ease;
	width: 100%;
}

.jbr-widget .jbr-input::placeholder {
	color: var( --jbr-color-text-muted );
	text-transform: none;
}

.jbr-widget .jbr-input:focus {
	border-color: var( --jbr-color-primary );
	outline: 2px solid var( --jbr-color-primary );
	outline-offset: 1px;
}

/* ---------------------------------------------------------------------------
   Actions row
   --------------------------------------------------------------------------- */

.jbr-actions {
	margin-top: var( --jbr-spacing );
}

/* ---------------------------------------------------------------------------
   Submit button
   --------------------------------------------------------------------------- */

.jbr-widget .jbr-button {
	background-color: var( --jbr-color-primary );
	border: none;
	border-radius: var( --jbr-radius );
	color: #ffffff;
	cursor: pointer;
	font-size: var( --jbr-font-size );
	font-weight: 600;
	padding: 10px 20px;
	transition: background-color 0.15s ease;
}

.jbr-widget .jbr-button:hover {
	background-color: var( --jbr-color-primary-hover );
}

.jbr-widget .jbr-button:focus {
	outline: 2px solid var( --jbr-color-primary );
	outline-offset: 2px;
}

.jbr-widget .jbr-button:disabled {
	cursor: not-allowed;
	opacity: 0.65;
}

/* ---------------------------------------------------------------------------
   Loading state
   --------------------------------------------------------------------------- */

.jbr-widget.jbr-loading .jbr-button::after {
	content: '';
	border: 2px solid rgba( 255, 255, 255, 0.4 );
	border-top-color: #ffffff;
	border-radius: 50%;
	display: inline-block;
	height: 12px;
	margin-left: 8px;
	animation: jbr-spin 0.7s linear infinite;
	vertical-align: middle;
	width: 12px;
}

@keyframes jbr-spin {
	to { transform: rotate( 360deg ); }
}

/* ---------------------------------------------------------------------------
   Result panel
   --------------------------------------------------------------------------- */

.jbr-result {
	background-color: var( --jbr-color-bg-result );
	border: 1px solid var( --jbr-color-border );
	border-radius: var( --jbr-radius );
	margin-top: var( --jbr-spacing );
	padding: var( --jbr-spacing );
}

.jbr-result p {
	color: var( --jbr-color-text );
	font-size: var( --jbr-font-size );
	margin: 0 0 6px;
}

.jbr-result p:last-child {
	margin-bottom: 0;
}

.jbr-result .jbr-time {
	font-size: 20px;
	font-weight: 700;
}

.jbr-result .jbr-distance {
	color: var( --jbr-color-text-muted );
	font-size: 14px;
}

.jbr-result .jbr-street {
	color: var( --jbr-color-text-muted );
	font-size: 13px;
}

/* ---------------------------------------------------------------------------
   Error panel
   --------------------------------------------------------------------------- */

.jbr-error {
	border: 1px solid var( --jbr-color-error );
	border-radius: var( --jbr-radius );
	margin-top: var( --jbr-spacing );
	padding: var( --jbr-spacing );
}

.jbr-error p {
	color: var( --jbr-color-error );
	font-size: 14px;
	margin: 0;
}

/* ---------------------------------------------------------------------------
   Attribution footer
   --------------------------------------------------------------------------- */

.jbr-attribution {
	border-top: 1px solid var( --jbr-color-border );
	color: var( --jbr-color-text-muted );
	font-size: 11px;
	line-height: 1.5;
	margin-top: var( --jbr-spacing );
	padding-top: var( --jbr-spacing );
}

.jbr-attribution a {
	color: var( --jbr-color-text-muted );
}

.jbr-attribution a:hover {
	color: var( --jbr-color-primary );
}

/* Hidden attribution — HTML always present in DOM for licence compliance,
   visibility controlled by the jbr_show_attribution setting */
.jbr-attribution--hidden {
	display: none;
}