/* Shoot 360 — chip, dropdown panel, confirmation card, picker modal */

/* ------------------------------------------------------------- chip */

.s360-chip-wrap {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.s360-chip,
.s360-chip:link,
.s360-chip:visited,
.s360-chip:hover,
.s360-chip:focus,
.s360-chip:active {
	display: inline-flex;
	align-items: center;
	line-height: 1.1;
	padding: 4px 6px;
	border-radius: 6px;
	transition: background 0.15s ease;
	/* The chip is a control, not a nav link, so header link styling
	   (underlines, link colors) is suppressed. */
	text-decoration: none !important;
	border-bottom: 0 !important;
	box-shadow: none !important;
	color: inherit;
}

.s360-chip:hover { background: rgba(0, 0, 0, 0.05); }

/* Label colors. Both default to the header's own text color. Override
   either one from theme CSS, for example:
     .s360-chip { --s360-chip-place: #ef001d; --s360-chip-name: #ffffff; } */
.s360-chip .s360-chip__place { color: var(--s360-chip-place, inherit); }
.s360-chip .s360-chip__name { color: var(--s360-chip-name, inherit); }

.s360-chip__labels {
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	min-width: 0;
}

.s360-chip__place {
	font-size: 16px;
	font-weight: 800;
	text-transform: uppercase;
	letter-spacing: 0.03em;
	white-space: nowrap;
}

.s360-chip__name {
	font-size: 11.5px;
	opacity: 0.85;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 220px;
}

.s360-chip__pin {
	background: #ef001d;
	color: #fff;
	border: 0;
	border-radius: 50%;
	width: 38px;
	height: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.15s ease;
	flex-shrink: 0;
}

.s360-chip__pin:hover { background: #c40018; transform: scale(1.05); }

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

.s360-chip__panel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	width: 270px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.16);
	padding: 16px;
	z-index: 9999;
	text-align: left;
}

.s360-chip__panel-address {
	margin: 0 0 8px;
	font-size: 14px;
	line-height: 1.45;
	color: #111;
}

.s360-chip__panel-phone {
	display: inline-block;
	margin: 0 0 12px;
	color: #ef001d;
	font-weight: 700;
	font-size: 14px;
	text-decoration: none;
}

.s360-chip__panel-actions {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.s360-chip__panel-btn {
	display: block;
	width: 100%;
	text-align: center;
	padding: 10px 12px;
	font-size: 12.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border-radius: 6px;
	border: 2px solid #ef001d;
	background: #fff;
	color: #ef001d;
	text-decoration: none;
	cursor: pointer;
	transition: background 0.15s ease;
}

.s360-chip__panel-btn:hover { background: #fdf3f4; }

.s360-chip__panel-btn--primary {
	background: #ef001d;
	color: #fff;
}

.s360-chip__panel-btn--primary:hover { background: #c40018; color: #fff; }

/* --------------------------------------------------- confirmation card */

.s360-confirm {
	position: fixed;
	left: 18px;
	bottom: 18px;
	width: 300px;
	background: #fff;
	border: 1px solid #e5e5e5;
	border-radius: 12px;
	box-shadow: 0 12px 34px rgba(0, 0, 0, 0.2);
	padding: 18px;
	z-index: 99998;
	animation: s360-rise 0.35s ease;
}

@keyframes s360-rise {
	from { opacity: 0; transform: translateY(14px); }
	to { opacity: 1; transform: none; }
}

.s360-confirm__close {
	position: absolute;
	top: 8px;
	right: 10px;
	border: 0;
	background: none;
	font-size: 20px;
	color: #999;
	cursor: pointer;
	line-height: 1;
}

.s360-confirm__eyebrow {
	margin: 0 0 4px;
	font-size: 11.5px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #ef001d;
}

.s360-confirm__name {
	margin: 0;
	font-size: 19px;
	font-weight: 800;
	text-transform: uppercase;
	line-height: 1.15;
	color: #111;
}

.s360-confirm__place {
	margin: 2px 0 12px;
	font-size: 13px;
	color: #666;
}

.s360-confirm__yes {
	display: block;
	width: 100%;
	padding: 11px;
	background: #ef001d;
	color: #fff;
	border: 0;
	border-radius: 6px;
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	cursor: pointer;
	transition: background 0.15s ease;
}

.s360-confirm__yes:hover { background: #c40018; }

.s360-confirm__other {
	display: block;
	width: 100%;
	margin-top: 8px;
	background: none;
	border: 0;
	color: #ef001d;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
}

.s360-confirm__alts { margin-top: 8px; border-top: 1px solid #eee; padding-top: 8px; }

.s360-confirm__alt {
	display: block;
	width: 100%;
	text-align: left;
	background: none;
	border: 0;
	padding: 8px 6px;
	font-size: 13.5px;
	color: #111;
	cursor: pointer;
	border-radius: 5px;
}

.s360-confirm__alt:hover { background: #f7f7f7; }

.s360-confirm__all {
	display: block;
	padding: 8px 6px 0;
	font-size: 12.5px;
	color: #ef001d;
	font-weight: 600;
	text-decoration: none;
}

@media (max-width: 600px) {
	.s360-confirm {
		left: 10px;
		right: 10px;
		bottom: 10px;
		width: auto;
	}
}

/* ---------------------------------------------------------- modal */

.s360-picker-overlay {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background: rgba(0, 0, 0, 0.55);
	display: flex;
	align-items: flex-start !important;
	justify-content: center;
	z-index: 99999;
	padding: 16px;
	box-sizing: border-box;
	overflow-y: auto;
}

.s360-picker {
	position: relative;
	width: 100%;
	max-width: 420px;
	height: auto !important;
	min-height: 0 !important;
	margin: 9vh auto 40px !important;
	display: block !important;
	background: #fff;
	border-radius: 12px;
	padding: 22px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
	animation: s360-rise 0.25s ease;
}

.s360-picker__close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: 0;
	background: none;
	font-size: 24px;
	color: #999;
	cursor: pointer;
	line-height: 1;
}

.s360-picker__title {
	margin: 0 0 12px;
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	color: #111;
}

.s360-picker__input {
	width: 100%;
	padding: 11px 13px;
	font-size: 15px;
	border: 1px solid #ddd;
	border-radius: 6px;
	margin-bottom: 10px;
}

.s360-picker__input:focus {
	outline: none;
	border-color: #ef001d;
	box-shadow: 0 0 0 3px rgba(239, 0, 29, 0.12);
}

.s360-picker__list {
	max-height: none;
	overflow: visible;
}

.s360-picker__row {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	/* Bleed to the modal edges so hover and dividers span full width. */
	width: calc(100% + 44px);
	margin: 0 -22px;
	padding: 10px 22px;
	box-sizing: border-box;
	text-align: left;
	background: none;
	border: 0;
	border-bottom: 1px solid #f0f0f0;
	cursor: pointer;
	border-radius: 0;
}

.s360-picker__row:hover { background: #fafafa; }

.s360-picker__row-name {
	font-size: 15px;
	font-weight: 700;
	color: #111;
}

.s360-picker__row-sub {
	font-size: 12.5px;
	color: #777;
}

.s360-picker__none {
	padding: 14px 6px;
	color: #777;
	font-size: 14px;
}

.s360-picker__all {
	display: block;
	margin-top: 10px;
	font-size: 13px;
	font-weight: 600;
	color: #ef001d;
	text-decoration: none;
}


/* --------------------------------------------------------- dialog picker */

dialog.s360-dialog {
	/* Every property is declared so browser defaults and any other plugin's
	   dialog styling cannot alter the picker's size or position. */
	position: fixed !important;
	top: 9vh !important;
	left: 50% !important;
	right: auto !important;
	bottom: auto !important;
	transform: translateX(-50%) !important;
	margin: 0 !important;
	width: calc(100vw - 32px) !important;
	max-width: 420px !important;
	height: auto !important;
	max-height: none !important;
	min-height: 0 !important;
	border: 0 !important;
	padding: 0 !important;
	background: transparent !important;
	box-shadow: none !important;
	overflow: visible !important;
	z-index: 2147483647 !important;
}

dialog.s360-dialog[open] { display: block !important; }

dialog.s360-dialog::backdrop {
	background: rgba(0, 0, 0, 0.55);
}

dialog.s360-dialog .s360-picker {
	margin: 0 !important;
	width: 100% !important;
	display: block !important;
	position: relative !important;
	height: auto !important;
	min-height: 0 !important;
	max-height: none !important;
	overflow: visible !important;
	background: #fff !important;
	border-radius: 12px !important;
	padding: 22px !important;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3) !important;
	animation: none !important;
	transform: none !important;
	float: none !important;
}

/* Holds the picker's children in normal flow so the box sizes to its
   content. Only the close button is positioned. */
dialog.s360-dialog .s360-picker > * {
	position: static !important;
	float: none !important;
	height: auto !important;
	max-height: none !important;
}

dialog.s360-dialog .s360-picker > .s360-picker__close {
	position: absolute !important;
}

.s360-picker__row--near .s360-picker__row-name { color: #ef001d; }
.s360-picker__row--near:disabled { opacity: 0.6; cursor: wait; }


/* ------------------------------------- confirmation card, chip-anchored */

.s360-confirm--anchored {
	position: fixed;
	right: auto;
	bottom: auto;
	max-width: none;
	z-index: 99998;
	/* Position and width are set in JS from the chip's location */
}

/* Pointer toward the chip above. */
.s360-confirm--anchored::before {
	content: "";
	position: absolute;
	top: -7px;
	right: 18px;
	width: 12px;
	height: 12px;
	background: #fff;
	border-left: 1px solid #e5e5e5;
	border-top: 1px solid #e5e5e5;
	transform: rotate(45deg);
}

@media (max-width: 600px) {
	.s360-confirm--anchored::before { display: none; }
}

/* ---------------------------------------------- picker place group */

/* Mapbox place suggestions sit beneath the visitor's own locations in a
   labelled group, so the two kinds of row are never confused. */
.s360-picker__group {
	margin: 4px -22px 0;
	border-top: 1px solid #f0f0f0;
}

.s360-picker__group-label {
	padding: 10px 22px 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #999;
}

/* The group already bleeds to the modal edges, so its rows must not bleed
   a second time. Without this they shift 22px left and overhang both sides
   of the modal. */
.s360-picker__group .s360-picker__row {
	width: 100%;
	margin: 0;
}

.s360-picker__row--place .s360-picker__row-name { color: #111; }
.s360-picker__row--place:disabled { opacity: 0.6; cursor: wait; }

/* ---------------------------------------------------- inquiry modal */

/* Wider than the picker so the GoHighLevel form has room, and tall enough
   that most forms fit without an inner scroll. The dialog element itself
   is positioned by the shared dialog.s360-dialog rules above. */
dialog.s360-inquiry-dialog {
	max-width: 560px !important;
	top: 5vh !important;
}

.s360-inquiry {
	position: relative;
	background: #fff;
	border-radius: 12px;
	padding: 22px 22px 18px;
	box-shadow: 0 18px 50px rgba(0, 0, 0, 0.3);
	animation: s360-rise 0.25s ease;
	/* The modal scrolls as a whole when the form inside is taller than the
	   viewport, so long forms are reachable even if the framed page does not
	   scroll on its own. */
	max-height: 90vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.s360-inquiry__close {
	position: absolute;
	top: 10px;
	right: 14px;
	border: 0;
	background: none;
	font-size: 24px;
	color: #999;
	cursor: pointer;
	line-height: 1;
	z-index: 1;
}

.s360-inquiry__title {
	margin: 0 0 2px;
	padding-right: 32px;
	font-size: 20px;
	font-weight: 800;
	text-transform: uppercase;
	color: #111;
}

.s360-inquiry__sub {
	margin: 0 0 14px;
	font-size: 13px;
	color: #777;
}

.s360-inquiry__frame {
	display: block;
	width: 100%;
	/* Tall enough for the longest form. Shorter forms leave space below,
	   which is the better trade against cutting a long one off. */
	height: 1100px;
	border: 0;
	border-radius: 8px;
	background: #f7f7f7;
}

.s360-inquiry__fallback {
	padding: 10px 0 4px;
	font-size: 15px;
	color: #333;
}

.s360-inquiry__fallback p { margin: 0 0 14px; }

.s360-inquiry__call,
.s360-inquiry__visit {
	display: block;
	text-align: center;
	padding: 11px 14px;
	margin-bottom: 8px;
	border-radius: 6px;
	font-weight: 700;
	text-decoration: none;
	border: 2px solid #ef001d;
}

.s360-inquiry__call { background: #ef001d; color: #fff; }
.s360-inquiry__call:hover { background: #c40018; color: #fff; }
.s360-inquiry__visit { background: #fff; color: #ef001d; }
.s360-inquiry__visit:hover { background: #fdf3f4; }

@media (max-width: 600px) {
	dialog.s360-inquiry-dialog { top: 2vh !important; }
	.s360-inquiry { padding: 18px 14px 14px; max-height: 94vh; }
	.s360-inquiry__frame { height: 1100px; }
}