/*
Theme Name:     GPS Hello Child
Theme URI:
Description:    Hello-elementor child theme.
Author:         TecGuru
Author URI:
Template:       hello-elementor
Version:        0.2.0
*/

/* ==========================================================================
   Global Prayer Storm — "storm chaser" brand system
   Dark navy/near-black base, gold accent site-wide, plus a per-section storm
   color: Enlist/Crisis = navy, Educate = teal, Empower = crimson,
   Engage = purple (matching the client's page-banner mockups). Every hue has
   a "fill" token (backgrounds/thick borders/buttons) and a "-bright" token
   (text/thin borders/links — lightened for contrast on the dark background).
   ========================================================================== */

:root {
	/* Surfaces */
	--gps-bg: #03040d;
	--gps-bg-raised: #0a162f;
	--gps-surface: rgba(16, 37, 74, 0.55);
	--gps-surface-solid: #0a162f;
	--gps-surface-border: rgba(201, 162, 39, 0.25);
	--gps-surface-glow: 0 0 0 1px var(--gps-surface-border), 0 8px 30px rgba(0, 0, 0, 0.55);
	--gps-surface-glow-hover: 0 0 0 1px rgba(201, 162, 39, 0.45), 0 14px 44px rgba(0, 0, 0, 0.65), 0 0 26px rgba(230, 198, 92, 0.18);

	/* Text */
	--gps-text: #e6e9f0;
	--gps-muted: #9aa5bb;

	/* Gold — primary accent, already dark-safe */
	--gps-gold: #c9a227;
	--gps-gold-light: #e6c65c;

	/* Enlist / sitewide navy */
	--gps-navy: #0b1f3a;
	--gps-navy-light: #16345e;
	--gps-navy-bright: #6f97d6;

	/* Educate teal */
	--gps-teal: #0d5c63;
	--gps-teal-bright: #2fb8c4;

	/* Empower crimson */
	--gps-crimson: #7a2430;
	--gps-crimson-bright: #d85f6e;

	/* Engage purple */
	--gps-purple: #4a1f6b;
	--gps-purple-bright: #a888d6;

	/* Crisis-alert danger red */
	--gps-danger: #8f1f19;
	--gps-danger-bright: #e8746c;

	--gps-card-shadow: var(--gps-surface-glow);
	--gps-card-shadow-hover: var(--gps-surface-glow-hover);
	--gps-radius: 10px;
}

/* !important on background: the parent Hello Elementor theme's reset.css
   sets body{background-color:#fff} and is enqueued AFTER this stylesheet,
   so it wins the cascade on load order at equal specificity without this.
   reset.css also sets body{color:#333} the same way, so the selector here
   is bumped to `html body` (still just element selectors, so any
   per-widget/global-kit class-level color override elsewhere stays more
   specific and still wins) rather than adding !important, which would
   have beaten those overrides too. */
html body {
	background: var(--gps-bg) !important;
	color: var(--gps-text);
	font-family: 'Inter', sans-serif;
	font-size: 18px;
	line-height: 1.7;
}

/* ==========================================================================
   Readability pass — the audience skews older, so text runs larger than a
   typical modern site's default across the board. This block specifically
   targets Elementor's OWN default/un-styled output: heading widgets and
   text-editor paragraphs that were left with no explicit size in the page
   editor render at plain browser defaults (~16px) unless caught here, and
   Elementor's "sm" button preset doesn't set a font-size at all (only
   min-height), so it inherits the button base of 15px. Selectors below are
   deliberately scoped to element+class (or !important where the equal-
   specificity Elementor stylesheet loads after ours) so they win without
   disturbing any page's own explicit per-widget font-size overrides, which
   are always more specific and take precedence as intended. */

h1.elementor-heading-title { font-size: 48px; }
h2.elementor-heading-title { font-size: 34px; }
h3.elementor-heading-title { font-size: 26px; }
h4.elementor-heading-title,
h5.elementor-heading-title,
h6.elementor-heading-title { font-size: 22px; }
.elementor-heading-title { line-height: 1.35; }

.elementor-widget-text-editor,
.elementor-widget-text-editor p { font-size: 18px; line-height: 1.7; }

.elementor-button.elementor-size-sm { font-size: 16px !important; padding: 10px 22px !important; }
.elementor-button.elementor-size-md { font-size: 18px !important; }
.elementor-button.elementor-size-lg { font-size: 20px !important; }

/* ==========================================================================
   Typography — Anton for display/headlines, Oswald for UI chrome, Inter for
   body copy. Loaded in functions.php via gps_enqueue_brand_fonts().
   ========================================================================== */

h1,
.site-header .site-title a,
.site-footer .site-title a {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}

h2, h3, h4,
.site-navigation ul.menu > li > a,
.wpcf7-form input[type="submit"],
.gps-account-form input[type="submit"],
.gps-guide-download,
.gps-structure-pdf,
.gps-four-e-link,
.gps-account-remove,
.gps-day-tab {
	font-family: 'Oswald', sans-serif;
}

/* ==========================================================================
   Site header / navigation
   ========================================================================== */

.site-header {
	background: var(--gps-navy);
	padding-inline: 32px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
	position: relative;
	z-index: 100;
}

.site-header .site-title a {
	color: var(--gps-gold);
	font-weight: 400;
	font-size: 2rem;
	text-decoration: none;
}
.site-header .site-title a:hover {
	color: var(--gps-gold-light);
}

/* The theme's base CSS never constrains .custom-logo, so an uploaded image
   renders at its native pixel size (our source logo is 1000x1000). Cap it
   to a sane header height. */
.site-header .custom-logo,
.site-footer .custom-logo {
	max-height: 48px;
	width: auto;
	height: auto;
}

.site-navigation ul.menu > li > a {
	color: var(--gps-text);
	font-weight: 600;
	font-size: 18px;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	transition: color 0.2s ease;
}
.site-navigation ul.menu > li > a:hover,
.site-navigation ul.menu > li.current-menu-item > a,
.site-navigation ul.menu > li.current-menu-ancestor > a {
	color: var(--gps-gold);
}
.site-navigation ul.menu li.menu-item-has-children:after {
	color: var(--gps-gold);
}

/* Dropdown submenus (e.g. Prayer Hub → Educate/Empower/Engage) */
.site-navigation ul.menu li ul {
	/* !important: the parent Hello Elementor theme's header-footer.css sets
	   an identical-specificity `background:#fff` on this same selector, and
	   wins the load-order tie — leaving our light submenu text unreadable
	   on white. */
	background: var(--gps-surface-solid) !important;
	border-top: 3px solid var(--gps-gold);
	border-radius: 0 0 var(--gps-radius) var(--gps-radius);
	box-shadow: var(--gps-card-shadow-hover);
	padding: 6px 0 !important;
}
.site-navigation ul.menu li ul li {
	border-block-end: 1px solid rgba(255, 255, 255, 0.06);
}
.site-navigation ul.menu li ul li a {
	color: var(--gps-text);
	font-weight: 600;
}
.site-navigation ul.menu li ul li a:hover {
	color: var(--gps-gold);
	background: rgba(201, 162, 39, 0.1);
}

/* Mobile menu toggle + dropdown panel */
.site-navigation-toggle-holder .site-navigation-toggle {
	background: var(--gps-navy-light);
	color: var(--gps-gold);
}
.site-navigation-dropdown ul.menu {
	background: var(--gps-navy);
}
.site-navigation-dropdown ul.menu li a {
	background: var(--gps-navy);
	color: var(--gps-text);
	box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.08);
}
.site-navigation-dropdown ul.menu li a:hover,
.site-navigation-dropdown ul.menu li.current-menu-item a {
	background: var(--gps-navy-light);
	color: var(--gps-gold);
}
.site-navigation-dropdown ul.menu li ul li a {
	padding-inline-start: 36px;
}

/* Footer */
.site-footer {
	background: var(--gps-bg-raised);
	color: var(--gps-text);
	padding-inline: 32px;
}
.site-footer .site-title a,
.site-footer a {
	color: var(--gps-text);
}
.site-footer .site-title a:hover,
.site-footer a:hover {
	color: var(--gps-gold);
}
.site-footer .copyright p {
	color: var(--gps-muted);
	font-size: 15px;
}

h1, h2, h3, h4 {
	color: var(--gps-text);
}

/* Section heading rhythm inside plain page content (About, Prayer Hub blurbs) */
.elementor-widget-text-editor h2 {
	font-size: 36px;
	margin-top: 48px;
	margin-bottom: 18px;
	padding-bottom: 10px;
	border-bottom: 3px solid var(--gps-gold);
	display: inline-block;
}

.elementor-widget-text-editor h1 + h2,
.elementor-widget-text-editor > .elementor-widget-container > h2:first-child {
	margin-top: 0;
}

.elementor-widget-text-editor h3 {
	color: var(--gps-teal-bright);
	font-size: 26px;
	margin-top: 28px;
}

/* ==========================================================================
   Card grid — shared by every gps-core shortcode list
   ========================================================================== */

/* flex, not grid: with auto-fill/1fr grid tracks, a partial last row's items
   stay pinned to the left column instead of centering (the empty tracks are
   still reserved, just unfilled). Flex-wrap + justify-content:center lets a
   short last row center itself; flex-basis/max-width on the items keeps
   card width roughly matching the old minmax(260px, 1fr) columns. */
.gps-video-list,
.gps-guide-list,
.gps-structure-list,
.gps-partner-list,
.gps-crisis-alert-list,
.gps-initiative-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 28px;
	margin: 24px 0 40px;
}

.gps-video-item,
.gps-guide-item,
.gps-structure-item,
.gps-partner-item,
.gps-crisis-alert-item,
.gps-initiative-item {
	background: var(--gps-surface);
	backdrop-filter: blur(6px);
	border: 1px solid var(--gps-surface-border);
	border-radius: var(--gps-radius);
	box-shadow: var(--gps-card-shadow);
	padding: 22px 24px;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
	display: flex;
	flex-direction: column;
	flex: 1 1 260px;
	max-width: 320px;
}

.gps-video-item:hover,
.gps-guide-item:hover,
.gps-structure-item:hover,
.gps-partner-item:hover,
.gps-crisis-alert-item:hover,
.gps-initiative-item:hover {
	box-shadow: var(--gps-card-shadow-hover);
	transform: translateY(-3px);
}

.gps-video-item h4,
.gps-guide-item h4,
.gps-structure-item h4,
.gps-partner-item h4,
.gps-crisis-alert-item h4,
.gps-initiative-item h4 {
	color: var(--gps-text);
	font-size: 21px;
	margin: 12px 0 8px;
}

/* Video cards */
.gps-video-item img {
	width: 100%;
	height: 160px;
	object-fit: cover;
	border-radius: calc(var(--gps-radius) - 4px);
	display: block;
}
.gps-video-runtime {
	display: inline-block;
	background: var(--gps-navy);
	color: #fff;
	font-size: 13px;
	font-weight: 600;
	padding: 3px 10px;
	border-radius: 20px;
	margin-bottom: 6px;
	width: fit-content;
}
.gps-video-summary {
	color: var(--gps-muted);
	font-size: 17px;
	line-height: 1.6;
}
.gps-video-summary p {
	margin: 0;
}
.gps-video-item.gps-video-pending {
	opacity: 0.72;
}
.gps-video-item.gps-video-pending img {
	filter: grayscale(35%);
}
.gps-video-item.gps-video-pending .gps-video-runtime {
	background: var(--gps-muted);
}
.gps-video-library-link {
	text-align: center;
	margin: -8px 0 32px;
}
.gps-video-library-link a {
	display: inline-block;
	color: var(--gps-gold-light);
	font-weight: 700;
	font-size: 16px;
	text-decoration: none;
	border: 2px solid var(--gps-gold);
	padding: 10px 24px;
	border-radius: 20px;
	transition: background 0.2s ease, color 0.2s ease;
}
.gps-video-library-link a:hover {
	background: var(--gps-gold);
	color: var(--gps-bg);
}

/* Prayer guide cards */
.gps-guide-item {
	border-top: 4px solid var(--gps-gold);
	text-align: center;
}
.gps-guide-summary {
	color: var(--gps-muted);
	font-size: 17px;
	flex-grow: 1;
}
.gps-guide-author {
	display: block;
	font-size: 14px;
	font-style: italic;
	color: var(--gps-muted);
	margin: 6px 0 12px;
}
.gps-guide-download {
	display: inline-block;
	align-self: center;
	background: var(--gps-gold);
	color: var(--gps-bg) !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none !important;
	padding: 10px 20px;
	border-radius: 20px;
	transition: background 0.2s ease;
}
.gps-guide-download:hover {
	background: var(--gps-gold-light);
}

/* Prayer structure cards (15/30/60 min) */
.gps-structure-item {
	border-top: 4px solid var(--gps-teal);
}
.gps-structure-item h4 {
	color: var(--gps-teal-bright);
}
.gps-structure-text ul {
	padding-left: 20px;
	font-size: 17px;
	color: var(--gps-text);
}
.gps-structure-text li {
	margin-bottom: 6px;
}
.gps-structure-pdf {
	align-self: flex-start;
	margin-top: auto;
	color: var(--gps-teal-bright) !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none !important;
	border: 2px solid var(--gps-teal-bright);
	padding: 8px 16px;
	border-radius: 20px;
}
.gps-structure-pdf:hover {
	background: var(--gps-teal);
	color: var(--gps-text) !important;
}

/* Crisis alerts */
.gps-crisis-alert-item {
	border-top: 4px solid var(--gps-danger);
}
.gps-crisis-alert-item time {
	font-size: 14px;
	color: var(--gps-muted);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* Ministry partner + initiative cards */
.gps-partner-item img {
	border-radius: 50%;
	width: 72px;
	height: 72px;
	object-fit: cover;
	margin-bottom: 10px;
}
.gps-initiative-item {
	border-top: 4px solid var(--gps-navy-light);
}
.gps-initiative-logo {
	max-width: 100%;
	max-height: 90px;
	width: auto;
	object-fit: contain;
	margin: 0 auto 12px;
	display: block;
}

/* Prayer focus list (About page) */
.gps-focus-list {
	list-style: none;
	margin: 24px 0 40px;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 18px;
}
.gps-focus-list li {
	background: var(--gps-surface);
	border-left: 4px solid var(--gps-gold);
	border-radius: 6px;
	padding: 16px 20px;
	font-size: 17px;
	color: var(--gps-text);
	flex: 1 1 280px;
	max-width: 340px;
}
.gps-focus-list li strong {
	display: block;
	color: var(--gps-text);
	font-size: 19px;
	margin-bottom: 4px;
	font-family: 'Oswald', sans-serif;
}

/* ==========================================================================
   Storm hero utility — apply the "gps-storm-hero" CSS class to an Elementor
   Section via Advanced → CSS Classes in the editor, and "gps-glow-heading"
   to its headline widget. The tint color defaults to navy and is overridden
   per section below.
   ========================================================================== */

.gps-storm-hero {
	position: relative;
	background-image: url('assets/img/storm-plate-mono.webp');
	background-size: cover;
	background-position: center;
	min-height: 420px;
	display: flex;
	align-items: center;
	justify-content: center;
	isolation: isolate;
	overflow: hidden;
}
.gps-storm-hero::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--gps-navy);
	mix-blend-mode: color;
	opacity: 0.85;
}
.gps-storm-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(3, 4, 13, 0.15) 0%, rgba(3, 4, 13, 0.8) 100%);
}
.gps-storm-hero > * {
	position: relative;
	z-index: 1;
}

.gps-glow-heading {
	font-family: 'Anton', sans-serif;
	text-transform: uppercase;
	color: var(--gps-text);
	letter-spacing: 0.02em;
	text-shadow: 0 0 18px rgba(111, 151, 214, 0.55), 0 0 40px rgba(201, 162, 39, 0.25);
}

/* ==========================================================================
   Homepage hero CTA row — Enlist / Educate / Empower / Engage, styled after
   the outlined gold boxes at the bottom of the "GPS 4-2" hero mockup.
   ========================================================================== */

.gps-hero-cta-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 16px;
	margin: 8px 0;
}
.gps-hero-cta-btn {
	display: inline-block;
	color: #FFFFFF !important;
	font-family: 'Oswald', sans-serif;
	font-weight: 600;
	font-size: 16px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	text-decoration: none !important;
	border: 2px solid var(--gps-gold);
	border-radius: 4px;
	padding: 12px 28px;
	transition: background 0.2s ease, color 0.2s ease;
}
.gps-hero-cta-btn:hover {
	background: var(--gps-gold);
	color: var(--gps-bg) !important;
}

/* ==========================================================================
   Per-section storm colors — Enlist (56) = navy, Educate (58) = teal,
   Empower (59) = crimson, Engage (60) = purple. Matches the client's own
   page-banner mockups.
   ========================================================================== */

.page-id-56 .gps-storm-hero::before {
	background: var(--gps-navy);
}
.page-id-56 .elementor-widget-text-editor h2 {
	border-bottom-color: var(--gps-navy);
}
.page-id-56 .gps-video-item h4 {
	color: var(--gps-navy-bright);
}

/* Enlist page content is one plain text-editor widget (H1 + H2s wrapping the
   prayer map / slot picker shortcodes), so these headings never get an
   Elementor per-widget "align: center" setting the way other pages' heading
   widgets do — center them explicitly instead. h2 keeps its inline-block
   gold underline (so the rule hugs the centered text, not the full column
   width), so it needs table-centering rather than plain text-align. */
.page-id-56 .elementor-widget-text-editor h1 {
	text-align: center;
}
.page-id-56 .elementor-widget-text-editor h2 {
	display: table;
	margin-left: auto;
	margin-right: auto;
}
/* Direct-child selector only — on the frontend Elementor renders this
   widget's own element (.elementor-widget-text-editor) as the immediate
   parent of its raw HTML, with no .elementor-widget-container in between
   (that wrapper only appears in the editor's inline-editing mode). The
   prayer map / slot picker / CF7 form shortcode output is inline in that
   same HTML too, but their own <p> tags (form labels, slot-picker
   instructions, etc.) sit deeper inside nested wrapper divs, not as direct
   children here, so they're untouched. */
.page-id-56 .elementor-widget-text-editor > p {
	text-align: center;
}

.page-id-58 .gps-storm-hero::before {
	background: var(--gps-teal);
}
.page-id-58 .elementor-widget-text-editor h2 {
	border-bottom-color: var(--gps-teal);
}
.page-id-58 .gps-video-item h4 {
	color: var(--gps-teal-bright);
}
.page-id-58 .elementor-widget-text-editor,
.page-id-58 .elementor-widget-heading {
	text-align: center;
}
/* Key Principles of Prayer: a numbered list reads better left-justified
   than centered, so it overrides the page-wide centering above. */
.page-id-58 .elementor-widget-text-editor.elementor-element-5ac5eca {
	text-align: left;
}
.page-id-58 .gps-video-item {
	align-items: center;
	text-align: center;
}

.page-id-59 .gps-storm-hero::before {
	background: var(--gps-crimson);
}
.page-id-59 .elementor-widget-text-editor h2 {
	border-bottom-color: var(--gps-crimson);
}
.page-id-59 .gps-video-item h4,
.page-id-59 .gps-guide-item h4 {
	color: var(--gps-crimson-bright);
}
.page-id-59 .gps-guide-item,
.page-id-59 .gps-structure-item {
	border-top-color: var(--gps-crimson);
}

.page-id-60 .gps-storm-hero::before {
	background: var(--gps-purple);
}
.page-id-60 .elementor-widget-text-editor h2 {
	border-bottom-color: var(--gps-purple);
}
.page-id-60 .gps-video-item h4,
.page-id-60 .gps-guide-item h4 {
	color: var(--gps-purple-bright);
}
.page-id-60 .gps-guide-item,
.page-id-60 .gps-structure-item {
	border-top-color: var(--gps-purple);
}

/* Engage page: center all text, in and out of card boxes. Card items are
   flex columns with no alignment set, so their title/summary/runtime text
   defaults to left; align-items centers the images/badges alongside it. */
.page-id-60 .elementor-widget-text-editor,
.page-id-60 .elementor-widget-heading {
	text-align: center;
}
.page-id-60 .gps-video-item,
.page-id-60 .gps-partner-item {
	align-items: center;
	text-align: center;
}

/* ==========================================================================
   CF7 form styling (Enlist page)
   ========================================================================== */

.wpcf7-form {
	background: var(--gps-surface-solid);
	border: 1px solid var(--gps-surface-border);
	border-radius: var(--gps-radius);
	padding: 32px;
	margin: 24px auto 40px;
	max-width: 640px;
}
.wpcf7-form p {
	margin-bottom: 16px;
	font-weight: 600;
	color: var(--gps-text);
}
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form select {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 6px;
	background: var(--gps-bg-raised);
	color: var(--gps-text);
	font-weight: 400;
	font-size: 17px;
	margin-top: 6px;
}
.wpcf7-form input[type="submit"] {
	background: var(--gps-gold);
	color: var(--gps-bg);
	font-weight: 700;
	border: none;
	padding: 14px 32px;
	border-radius: 24px;
	cursor: pointer;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.wpcf7-form input[type="submit"]:hover {
	background: var(--gps-gold-light);
}

@media (max-width: 600px) {
	.wpcf7-form {
		padding: 20px;
	}
}

/* ==========================================================================
   The Four E's card grid (About page)
   ========================================================================== */

.gps-four-e-list {
	list-style: none;
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
	gap: 24px;
	margin: 24px 0 40px;
	padding: 0;
}
.gps-four-e-item {
	background: var(--gps-surface);
	backdrop-filter: blur(6px);
	border: 1px solid var(--gps-surface-border);
	border-radius: var(--gps-radius);
	box-shadow: var(--gps-card-shadow);
	padding: 20px;
	text-align: center;
	transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.gps-four-e-item:hover {
	box-shadow: var(--gps-card-shadow-hover);
	transform: translateY(-3px);
}
.gps-four-e-item img {
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: calc(var(--gps-radius) - 4px);
	display: block;
}
/* Enlist artwork's focal subject (the praying crowd) sits at the very
   bottom of the portrait source image, so its square crop needs to anchor
   to the bottom instead of the default center (the other three read fine
   centered). */
.gps-four-e-list .gps-four-e-item:nth-child(1) img {
	object-position: center bottom;
}
.gps-four-e-item h3 {
	margin: 14px 0 4px;
	color: var(--gps-text);
	font-size: 22px;
}
.gps-four-e-item p {
	color: var(--gps-muted);
	font-size: 17px;
	margin: 0;
}
.gps-four-e-link {
	display: inline-block;
	margin-top: 12px;
	color: var(--gps-gold-light) !important;
	font-weight: 700;
	font-size: 16px;
	text-decoration: none !important;
	border: 2px solid var(--gps-gold);
	padding: 8px 18px;
	border-radius: 20px;
	transition: background 0.2s ease, color 0.2s ease;
}
.gps-four-e-link:hover {
	background: var(--gps-gold);
	color: var(--gps-bg) !important;
}

/* ==========================================================================
   Check In page — token/link check-in result states
   ========================================================================== */

.gps-checkin-result {
	background: var(--gps-surface-solid);
	border: 1px solid var(--gps-surface-border);
	border-radius: var(--gps-radius);
	padding: 28px 32px;
	margin: 24px 0 40px;
	max-width: 640px;
}
.gps-checkin-result h3 {
	margin-top: 0;
}
.gps-checkin-success h3 {
	color: var(--gps-teal-bright);
}
.gps-checkin-pending h3 {
	color: var(--gps-gold-light);
}
.gps-checkin-error h3 {
	color: var(--gps-danger-bright);
}
.gps-checkin-result p {
	color: var(--gps-muted);
}

/* ==========================================================================
   My Account — login form + logged-in commitment dashboard
   ========================================================================== */

.gps-account-login {
	max-width: 800px;
	margin: 0 auto;
}
.gps-account-form,
.gps-account-dashboard {
	background: var(--gps-surface-solid);
	border: 1px solid var(--gps-surface-border);
	border-radius: var(--gps-radius);
	padding: 32px;
	margin: 24px auto 40px;
	max-width: 800px;
}
.gps-account-login .gps-account-form {
	margin: 20px auto;
}
.gps-account-form p {
	margin-bottom: 16px;
	font-weight: 600;
	color: var(--gps-text);
}
.gps-account-form input[type="text"],
.gps-account-form input[type="email"],
.gps-account-form input[type="password"] {
	width: 100%;
	padding: 12px 14px;
	border: 1px solid rgba(201, 162, 39, 0.35);
	border-radius: 6px;
	background: var(--gps-bg-raised);
	color: var(--gps-text);
	font-weight: 400;
	font-size: 17px;
	margin-top: 6px;
}
.gps-account-form input[type="submit"] {
	background: var(--gps-gold);
	color: var(--gps-bg);
	font-weight: 700;
	border: none;
	padding: 14px 32px;
	border-radius: 24px;
	cursor: pointer;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 0.02em;
}
.gps-account-form input[type="submit"]:hover {
	background: var(--gps-gold-light);
}
.gps-account-error {
	background: rgba(143, 31, 25, 0.18);
	border-left: 4px solid var(--gps-danger-bright);
	color: var(--gps-danger-bright);
	padding: 12px 16px;
	border-radius: 6px;
	font-size: 16px;
	margin-bottom: 16px;
}

.gps-account-dashboard h3 {
	margin-top: 0;
}
#gps-account-empty {
	background: var(--gps-bg-raised);
	border-left: 4px solid var(--gps-gold);
	padding: 14px 18px;
	border-radius: 6px;
	font-size: 18px;
	color: var(--gps-text);
	margin-bottom: 24px;
}
.gps-account-commitment-list {
	list-style: none;
	margin: 0 0 24px;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 10px;
}
.gps-account-commitment-item {
	background: var(--gps-bg-raised);
	border-left: 4px solid var(--gps-gold);
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 18px;
	color: var(--gps-text);
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.gps-account-remove {
	background: transparent;
	border: 2px solid var(--gps-danger-bright);
	color: var(--gps-danger-bright);
	font-weight: 700;
	font-size: 14px;
	padding: 6px 16px;
	border-radius: 20px;
	cursor: pointer;
	white-space: nowrap;
	transition: background 0.2s ease, color 0.2s ease;
}
.gps-account-remove:hover {
	background: var(--gps-danger-bright);
	color: var(--gps-bg);
}
.gps-account-dashboard .gps-slot-picker {
	max-width: none;
	padding: 0;
	background: transparent;
	margin-bottom: 20px;
}

@media (max-width: 600px) {
	.gps-account-form,
	.gps-account-dashboard {
		padding: 20px;
	}
}