/* Outpost — flyout drawer. Ported from the original Location Drawer, tokenized. */

#outpost-overlay {
	position: fixed; inset: 0; z-index: 2147483646;
	background: rgba( 0, 0, 0, .45 ); backdrop-filter: blur( 3px );
	opacity: 0; pointer-events: none; transition: opacity .3s ease;
}
#outpost-overlay.is-active { opacity: 1; pointer-events: all; }

#outpost-drawer {
	--_primary: var( --outpost-primary, #0061ff );
	--_primary-dark: var( --outpost-primary-dark, #0082e5 );
	--_accent: var( --outpost-accent, #0053c9 );
	--_accent-dark: var( --outpost-accent-dark, #0028dd );
	--_tag-bg: var( --outpost-tag-bg, #e5f1ff );
	--_tag-text: var( --outpost-tag-text, #0053c9 );
	--_primary-text: var( --outpost-primary-text, #fff );
	--_accent-text: var( --outpost-accent-text, #fff );
	--_primary-dark-text: var( --outpost-primary-dark-text, #fff );
	--_accent-dark-text: var( --outpost-accent-dark-text, #fff );
	position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 480px;
	background: #fff; z-index: 2147483647; display: flex; flex-direction: column;
	transform: translateX( 100% ); transition: transform .35s cubic-bezier( .4, 0, .2, 1 );
	box-shadow: -8px 0 40px rgba( 0, 0, 0, .18 ); font-family: inherit;
}
#outpost-drawer.is-open { transform: translateX( 0 ); }

.op-photo {
	position: relative; height: 220px; flex-shrink: 0;
	background: linear-gradient( 135deg, var( --_primary-dark ), var( --_primary ) );
	background-size: cover; background-position: center;
}
.op-close {
	position: absolute; top: 14px; right: 14px; width: 34px; height: 34px;
	background: rgba( 0, 0, 0, .55 ); border: none; border-radius: 50%; color: #fff;
	display: flex; align-items: center; justify-content: center; cursor: pointer; z-index: 2;
	transition: background .2s;
}
.op-close:hover { background: rgba( 0, 0, 0, .75 ); }
.op-photo-badge { position: absolute; bottom: 14px; left: 14px; z-index: 2; }
.op-kiosk-tag {
	display: inline-flex; align-items: center; gap: 5px;
	background: color-mix( in srgb, var( --_primary ) 85%, transparent );
	border: 1px solid rgba( 255, 255, 255, .3 ); color: #fff; font-size: 11px; font-weight: 700;
	padding: 5px 10px; border-radius: 6px; backdrop-filter: blur( 4px ); letter-spacing: .3px;
}
.op-kiosk-tag.is-soon { background: #fce7f3; border-color: rgba( 251, 207, 232, .6 ); color: var( --_primary ); }
.op-kiosk-tag img { height: 14px; width: auto; }

.op-body { flex: 1; overflow-y: auto; padding: 0 0 16px; -webkit-overflow-scrolling: touch; }
.op-body::-webkit-scrollbar { width: 4px; }
.op-body::-webkit-scrollbar-thumb { background: #d1d5db; border-radius: 2px; }

.op-section { padding: 20px 24px; border-bottom: 1px solid #f0f0f5; }
.op-section:last-child { border-bottom: none; }
.op-section-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.8px; color: #9ca3af; margin-bottom: 14px; }

.op-city { font-size: 24px; font-weight: 800; color: var( --_primary ); margin: 0 0 4px; letter-spacing: -.3px; line-height: 1.15; }
.op-address { font-size: 14px; color: #6b7280; margin-bottom: 10px; line-height: 1.5; }

.op-rating-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.op-stars { color: #f59e0b; font-size: 15px; letter-spacing: 1px; }
.op-rating-num { font-size: 14px; font-weight: 700; color: #111827; }
.op-google-logo { font-size: 12px; line-height: 1; vertical-align: middle; opacity: .75; }

.op-service-tags { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.op-service-tag {
	display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
	padding: 5px 11px; border-radius: 6px; background: var( --_tag-bg ); color: var( --_tag-text );
	border: 1px solid rgba( 0, 97, 255, .2 );
}
.op-service-tag.is-soon { background: #fce7f3; border-color: #fbcfe8; color: var( --_primary ); text-transform: uppercase; font-weight: 700; }
.op-service-tag.is-soon img { height: 14px; width: auto; }
.op-service-tag .outpost-ico,
.op-kiosk-tag .outpost-ico { width: 15px; height: 15px; flex-shrink: 0; }
.op-service-tag .outpost-ico-img,
.op-kiosk-tag .outpost-ico-img { width: 15px; height: 15px; object-fit: contain; }

.op-contact-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.op-contact-row:last-child { margin-bottom: 0; }
.op-contact-icon {
	width: 36px; height: 36px; flex-shrink: 0; background: var( --_tag-bg ); border-radius: 9px;
	display: flex; align-items: center; justify-content: center; color: var( --_primary ); font-size: 14px;
}
.op-contact-label { font-size: 11px; color: #9ca3af; font-weight: 500; margin-bottom: 1px; }
.op-contact-value { font-size: 14px; font-weight: 600; color: #111827; text-decoration: none; }
.op-contact-value:hover { color: var( --_primary ); }
.op-kiosk-badge {
	margin-left: auto; flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px;
	background: var( --_tag-bg ); border: 1px solid rgba( 0, 97, 255, .2 ); color: var( --_primary );
	font-size: 11px; font-weight: 600; padding: 4px 9px; border-radius: 6px;
}

.op-hours-status { display: flex; align-items: center; gap: 6px; margin-bottom: 10px; font-size: 13px; color: #6b7280; }
.op-hours-dot { width: 8px; height: 8px; border-radius: 50%; background: #39a935; flex-shrink: 0; }
.op-hours-dot.is-closed { background: #dc2626; }
.op-hours-row { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 10px 0; border-bottom: 1px solid #f3f4f6; font-size: 14px; }
.op-hours-row:last-child { border-bottom: none; }
.op-day-name { color: var( --_primary ); font-weight: 500; }
.op-hours-time { color: var( --_primary ); font-weight: 500; text-align: right; }
.op-hours-row.is-today .op-day-name, .op-hours-row.is-today .op-hours-time { color: #39a935; font-weight: 700; }
.op-today-pill { display: inline-flex; align-items: center; background: #dff5d7; color: #39a935; font-size: 10px; font-weight: 700; padding: 2px 7px; border-radius: 4px; margin-left: 8px; }

.op-map { width: 100%; height: 180px; border: 0; border-radius: 12px; display: block; }

.op-manager-card { display: flex; align-items: center; gap: 16px; }
.op-manager-photo { width: 56px; height: 56px; flex-shrink: 0; border-radius: 50%; overflow: hidden; background: linear-gradient( 135deg, var( --_primary-dark ), var( --_primary ) ); border: 2.5px solid var( --_primary ); display: flex; align-items: center; justify-content: center; color: rgba( 255, 255, 255, .7 ); }
.op-manager-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.op-manager-name { font-size: 16px; font-weight: 700; color: #111827; margin-bottom: 5px; }
.op-manager-phone { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; font-weight: 500; color: var( --_primary ); text-decoration: none; }
.op-manager-phone:hover { text-decoration: underline; }

.op-reviews-frame { width: 100%; min-height: 360px; border: 0; border-radius: 12px; display: block; background: #fff; }

.op-footer { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px 16px; border-top: 1px solid #e2e2ea; background: #fff; flex-shrink: 0; }
.op-footer--single { grid-template-columns: 1fr; }
.op-btn { display: flex; align-items: center; justify-content: center; gap: 7px; padding: 13px 10px; border-radius: 10px; font-size: 14px; font-weight: 700; text-decoration: none; transition: all .2s; white-space: nowrap; }
.op-btn-primary { background: #f1f3f5; color: #1d2327; box-shadow: inset 0 0 0 1px #dfe3e8; }
.op-btn-primary:hover { background: #e6eaee; color: #1d2327; transform: translateY( -1px ); }
.op-btn-accent { background: var( --_accent ); color: var( --_accent-text ); }
.op-btn-accent:hover { background: var( --_accent-dark ); color: var( --_accent-dark-text ); transform: translateY( -1px ); }
.op-btn[hidden] { display: none; }

@media ( max-width: 500px ) { #outpost-drawer { max-width: 100%; } }

/* Luxe preset — carried into the shared location flyout. */
#outpost-drawer.outpost-drawer--luxe {
	--_luxe-ink: #171717;
	--_luxe-muted: #706b63;
	--_luxe-line: #d8d2c8;
	--_luxe-surface: #fbfaf7;
	background: var( --_luxe-surface ); box-shadow: -18px 0 60px rgba( 23, 23, 23, .18 );
}
#outpost-drawer.outpost-drawer--luxe .op-close { border-radius: 0; background: rgba( 23, 23, 23, .82 ); }
#outpost-drawer.outpost-drawer--luxe .op-kiosk-tag,
#outpost-drawer.outpost-drawer--luxe .op-service-tag,
#outpost-drawer.outpost-drawer--luxe .op-kiosk-badge,
#outpost-drawer.outpost-drawer--luxe .op-contact-icon,
#outpost-drawer.outpost-drawer--luxe .op-today-pill,
#outpost-drawer.outpost-drawer--luxe .op-map,
#outpost-drawer.outpost-drawer--luxe .op-reviews-frame,
#outpost-drawer.outpost-drawer--luxe .op-manager-photo,
#outpost-drawer.outpost-drawer--luxe .op-btn { border-radius: 0; }
#outpost-drawer.outpost-drawer--luxe .op-section { padding: 26px 28px; border-bottom-color: var( --_luxe-line ); }
#outpost-drawer.outpost-drawer--luxe .op-section-label {
	color: var( --_luxe-muted ); font-size: 9px; font-weight: 600; letter-spacing: .18em;
}
#outpost-drawer.outpost-drawer--luxe .op-city {
	color: var( --_luxe-ink ); font-size: 28px; font-weight: 500; letter-spacing: .01em;
}
#outpost-drawer.outpost-drawer--luxe .op-address,
#outpost-drawer.outpost-drawer--luxe .op-hours-status { color: var( --_luxe-muted ); }
#outpost-drawer.outpost-drawer--luxe .op-service-tag,
#outpost-drawer.outpost-drawer--luxe .op-kiosk-badge {
	background: transparent; border-color: var( --_luxe-line );
	font-size: 9px; font-weight: 600; letter-spacing: .11em; text-transform: uppercase;
}
#outpost-drawer.outpost-drawer--luxe .op-contact-icon { background: transparent; border: 1px solid var( --_luxe-line ); }
#outpost-drawer.outpost-drawer--luxe .op-hours-row { border-bottom-color: var( --_luxe-line ); }
#outpost-drawer.outpost-drawer--luxe .op-manager-photo { border-width: 1px; }
#outpost-drawer.outpost-drawer--luxe .op-footer { gap: 0; padding: 0; border-top-color: var( --_luxe-line ); background: var( --_luxe-surface ); }
#outpost-drawer.outpost-drawer--luxe .op-btn {
	padding: 17px 12px; font-size: 9px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
}
#outpost-drawer.outpost-drawer--luxe .op-btn-primary { background: var( --_luxe-surface ); box-shadow: inset 0 0 0 1px var( --_luxe-line ); }
#outpost-drawer.outpost-drawer--luxe .op-btn:hover { transform: none; }