/*
 * This is a manifest file that'll be compiled into application.css, which will include all the files
 * listed below.
 *
 * Any CSS (and SCSS, if configured) file within this directory, lib/assets/stylesheets, or any plugin's
 * vendor/assets/stylesheets directory can be referenced here using a relative path.
 *
 * You're free to add application-wide styles to this file and they'll appear at the bottom of the
 * compiled file so the styles you add here take precedence over styles defined in any other CSS
 * files in this directory. Styles in this file should be added after the last require_* statement.
 * It is generally better to create a new file per style scope.
 *


 */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Fraunces:opsz,wght@9..144,700&display=swap');

:root {
	--ink: #3d2453;
	--muted: #8965a6;
	--lavender: #f8f0ff;
	--lavender-deep: #e7ccf3;
	--line: #e7d9ef;
	--white: #fefcff;
}

* { box-sizing: border-box; }

html, body { margin: 0; min-height: 100%; }

body {
	background: var(--lavender);
	color: var(--ink);
	font-family: 'DM Sans', sans-serif;
}

.application-shell { display: flex; flex-direction: column; min-height: 100vh; }

a { color: inherit; text-decoration: none; }

.welcome-page {
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 0;
	background: radial-gradient(circle at 50% 42%, #fffaff 0, var(--lavender) 48%, #f2e7fb 100%);
}

.site-header {
	align-items: center;
	border-bottom: 1px solid var(--line);
	display: flex;
	height: 68px;
	justify-content: space-between;
	padding: 0 clamp(24px, 8vw, 94px);
}

.brand, .site-nav, .site-nav a, .choice, .brand-copy { align-items: center; display: flex; }

.brand { gap: 9px; }
.brand-mark {
	align-items: center;
	background: var(--lavender-deep);
	border-radius: 12px;
	display: flex;
	font-size: 28px;
	height: 32px;
	justify-content: center;
	line-height: 0;
	width: 32px;
}
.brand-copy { flex-direction: column; align-items: flex-start; line-height: 1; }
.brand-copy strong { font-size: 16px; letter-spacing: -0.5px; }
.brand-copy small { color: var(--muted); font-size: 7px; font-weight: 700; letter-spacing: 1.5px; margin-top: 3px; }
.site-nav { gap: clamp(18px, 3vw, 37px); }
.site-nav a { color: #684982; font-size: 11px; gap: 6px; white-space: nowrap; }
.site-nav a span { font-size: 16px; }
.nav-action { background: transparent; border: 0; color: #684982; cursor: pointer; font: inherit; padding: 0; }
.flash-message { background: #fff; border-bottom: 1px solid var(--line); color: var(--ink); margin: 0; padding: 12px 20px; text-align: center; }
.flash-message.alert { color: #873e37; }
.site-nav a:hover, .site-nav a:focus-visible, .choice:hover, .choice:focus-visible { color: #7b42a1; }

.welcome-content { flex: 1; padding: 26px 20px 46px; }
.intro { text-align: center; }
.intro h1 { font-size: clamp(34px, 4vw, 48px); letter-spacing: -2.5px; margin: 0; }
.intro h1 em { color: #d7a8e8; font-style: normal; }
.intro p { color: var(--muted); font-size: 15px; font-style: italic; margin: 5px 0 28px; }

.companion-card {
	background: rgba(254, 252, 255, .86);
	border-radius: 20px;
	box-shadow: 0 18px 30px rgba(82, 49, 104, .16);
	margin: 0 auto;
	max-width: 370px;
	overflow: hidden;
}
.card-intro { padding: 26px 24px 27px; text-align: center; }
.paw-badge {
	background: #e1b9ef;
	border-radius: 50%;
	box-shadow: 0 4px 8px rgba(112, 64, 137, .18);
	height: 58px;
	margin: 0 auto 17px;
	position: relative;
	width: 58px;
}

.paw-badge .logo svg {
    width: 100%;
    height: 40px;
    margin-top: 7px;
}

.paw-badge span { background: var(--ink); border-radius: 50%; display: block; height: 9px; position: absolute; width: 9px; }
.paw-badge span:nth-child(1) { left: 18px; top: 19px; }
.paw-badge span:nth-child(2) { left: 31px; top: 14px; }
.paw-badge span:nth-child(3) { left: 14px; top: 31px; }
.paw-badge span:nth-child(4) { left: 29px; top: 30px; }
.card-intro h2 { font-size: 20px; letter-spacing: -.7px; margin: 0; }
.card-intro p { color: var(--muted); font-size: 14px; line-height: 1.45; margin: 5px 0 0; }
.choice-list { border-top: 1px solid #f7f0fa; padding: 24px 27px 15px; }
.choice { background: #faf1ff; border: 1px solid #edddf5; border-radius: 13px; color: #5b3c72; font-size: 16px; font-weight: 600; height: 55px; justify-content: center; margin-bottom: 12px; position: relative; transition: background .2s, transform .2s; }
.choice:hover, .choice:focus-visible { background: #f4e4fc; transform: translateY(-1px); }
.choice-icon { color: #ddb5eb; font-size: 16px; left: calc(50% - 61px); position: absolute; }
.choice-arrow { color: #b681ce; font-size: 21px; opacity: 0; position: absolute; right: 18px; transition: opacity .2s; }
.choice:hover .choice-arrow, .choice:focus-visible .choice-arrow { opacity: 1; }
.card-note { color: var(--muted); font-size: 11px; margin: 8px 0 25px; text-align: center; }
.card-note span { color: #b77ed0; font-size: 14px; }
.location-card { margin-top: 24px; }
.location-actions { padding: 27px; text-align: center; }
.location-actions form { margin: 0; }
.location-actions .primary-action, .location-actions .secondary-action { font-family: inherit; }
.location-status { color: var(--muted); font-size: 12px; min-height: 18px; }
.nearby-results { margin: 36px auto 0; max-width: 760px; }
.nearby-results h2 { font-size: 20px; margin: 0 0 14px; }
.nearby-list { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.nearby-pet { align-items: center; background: var(--white); border: 1px solid var(--line); border-radius: 8px; display: flex; gap: 14px; min-width: 0; padding: 12px; }
.nearby-pet img { aspect-ratio: 1; border-radius: 6px; flex: 0 0 72px; object-fit: cover; width: 72px; }
.nearby-pet h3 { font-size: 16px; margin: 0 0 4px; }
.nearby-pet p, .nearby-empty { color: var(--muted); font-size: 13px; margin: 0; }

.choice-list button.choice { cursor: pointer; font-family: inherit; padding: 0; width: 100%; }
.signup-card { padding-bottom: 25px; }
.signup-form { padding: 0 27px; }
.pawfile-form.signup-form { padding: 0; }
.form-field { margin-bottom: 18px; }
.form-field label { color: #5b3c72; display: block; font-size: 13px; font-weight: 600; margin-bottom: 7px; }
.form-field input { background: var(--white); border: 1px solid var(--line); border-radius: 8px; color: var(--ink); font: inherit; min-height: 44px; padding: 9px 11px; width: 100%; }
.form-field input:focus-visible { border-color: #b681ce; outline: 2px solid #e7ccf3; }
.form-errors { background: #fff2f1; border: 1px solid #efc5c1; border-radius: 8px; color: #873e37; font-size: 13px; margin-bottom: 18px; padding: 12px 14px; }
.form-errors p { margin: 0 0 6px; }
.form-errors ul { margin: 0; padding-left: 19px; }
.field-error { color: #a0443b; font-size: 13px; margin: -2px 0 10px; }
.wizard-actions { align-items: center; display: flex; gap: 12px; justify-content: space-between; margin-top: 25px; }
.primary-action, .secondary-action { align-items: center; border-radius: 8px; cursor: pointer; display: inline-flex; font: 600 14px 'DM Sans', sans-serif; justify-content: center; min-height: 44px; padding: 0 16px; }
.primary-action { background: var(--ink); border: 1px solid var(--ink); color: var(--white); }
.primary-action:hover, .primary-action:focus-visible { background: #684982; }
.secondary-action { background: transparent; border: 1px solid var(--line); color: #5b3c72; }
.review-list { border-top: 1px solid var(--line); margin: 0; padding: 6px 27px; }
.review-list div { align-items: baseline; border-bottom: 1px solid #f2eaf6; display: flex; justify-content: space-between; padding: 13px 0; }
.review-list dt { color: var(--muted); font-size: 13px; }
.review-list dd { color: var(--ink); font-size: 14px; font-weight: 600; margin: 0; }
.review-actions { padding: 0 27px; }
.review-actions form { margin: 0; }
.review-actions button { font-family: inherit; }

.site-footer { border-top: 1px solid var(--line); color: var(--muted); font-size: 12px; padding: 14px 20px 12px; text-align: center; }
.site-footer p { margin: 0 0 7px; }
.site-footer nav { align-items: center; display: flex; gap: 13px; justify-content: center; }
.site-footer a:hover, .site-footer a:focus-visible { color: var(--ink); }

@media (max-width: 680px) {
	.site-header { height: auto; padding: 18px 20px; }
	.site-nav { gap: 13px; }
	.site-nav a { font-size: 0; }
	.site-nav a span { font-size: 18px; }
	.welcome-content { padding-top: 35px; }
	.intro h1 { font-size: clamp(31px, 9vw, 40px); letter-spacing: -1.8px; }
	.intro p { margin-bottom: 31px; }
	.site-footer nav { flex-wrap: wrap; gap: 8px; }
}

.pawfile-page {
	background: #f7efff;
	flex: 1;
}
.pawfile-card {
	background: #fcfaff;
	border: 1px solid #e2d0f0;
	border-radius: 10px;
	box-shadow: 0 12px 24px rgba(82, 49, 104, .12);
	margin: 0 auto;
	max-width: 624px;
	overflow: hidden;
}
.pawfile-header { background: #f8f1ff; padding: 24px 24px 27px; text-align: center; }
.pawfile-mark { align-items: center; background: #ebe9ff; border-radius: 50%; display: flex; height: 56px; justify-content: center; margin: 0 auto 20px; width: 56px; }
.pawfile-mark svg { height: 35px; width: 35px; }
.pawfile-header h1 { color: #45295d; font-size: 30px; letter-spacing: -1.2px; margin: 0; }
.pawfile-header p { color: #8054ad; font-size: 18px; margin: 7px 0 0; }
.progress-panel { padding: 25px 24px 0; }
.progress-labels { color: #8054ad; display: flex; font-size: 12px; justify-content: space-between; letter-spacing: 1.4px; text-transform: uppercase; }
.progress-labels span { color: #d6acdF; font-weight: 700; }
.progress-track { background: #ecdaf5; border-radius: 10px; height: 8px; margin-top: 9px; overflow: hidden; }
.progress-track span { background: #e7d9fb; border-radius: inherit; display: block; height: 100%; }
.pawfile-content { padding: 32px 24px 24px; }
.step-heading { align-items: center; color: #45295d; display: flex; gap: 10px; margin-bottom: 28px; }
.step-heading span { color: #d7abe9; font-size: 27px; }
.step-heading h2 { font-size: 25px; letter-spacing: -.8px; margin: 0; }
.step-copy { color: #8054ad; font-size: 14px; font-style: italic; margin: -11px 0 30px; }
.pawfile-form .form-field { margin-bottom: 27px; }
.pawfile-form .form-field label, .option-field legend, .checkbox-field label { color: #45295d; display: block; font-size: 14px; margin-bottom: 9px; }
.pawfile-form input[type="text"], .pawfile-form input[type="number"], .pawfile-form input[type="url"], .pawfile-form select { background: #f8f0ff; border: 1px solid #e5d3f2; border-radius: 12px; color: #5e3979; font: inherit; min-height: 48px; padding: 11px 13px; width: 100%; }
.pawfile-form input[type="file"] { background: #f8f0ff; border: 1px dashed #cba9e3; border-radius: 12px; color: #8054ad; font: inherit; padding: 13px; width: 100%; }
.pawfile-form input::placeholder { color: #9463bd; opacity: 1; }
.pawfile-form input:focus-visible, .pawfile-form select:focus-visible { border-color: #b681ce; outline: 2px solid #eadbfa; }
.option-field { border: 0; margin: 0 0 27px; padding: 0; }
.option-field legend { font-weight: 600; padding: 0; }
.choice-grid { display: grid; gap: 8px 12px; }
.choice-grid.two-up { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.choice-grid.three-up { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.choice-grid label, .stacked-options label { align-items: center; background: #fcfaff; border: 1px solid #e3cef2; border-radius: 12px; color: #45295d; cursor: pointer; display: flex; gap: 9px; min-height: 44px; padding: 9px 12px; }
.choice-grid input, .stacked-options input, .checkbox-field input { accent-color: #8b68d9; height: 16px; margin: 10px; min-height: 16px; width: 16px; }
.stacked-options { display: grid; gap: 8px; }
.stacked-options label { min-height: 46px; }
.trait-grid { margin-top: 4px; }
.checkbox-field { align-items: center; display: flex; gap: 8px; margin: -7px 0 27px; }
.checkbox-field label { margin: 0; }
.wizard-actions { margin-top: 32px; }
.wizard-actions .primary-action, .wizard-actions .secondary-action { min-height: 56px; }
.wizard-actions .primary-action { background: #e7e6ff; border-color: #e7e6ff; color: #332c71; }
.wizard-actions .primary-action:hover, .wizard-actions .primary-action:focus-visible { background: #dcdafa; }
.review-list { border-top: 1px solid #e9ddf2; padding: 0; }
.review-list div { padding: 13px 0; }
.image-carousel { margin: 0 auto 24px; max-width: 380px; }
.image-carousel__viewport { min-width: 0; }
.carousel-slide { margin: 0; }
.carousel-slide[hidden] { display: none; }
.carousel-slide img { aspect-ratio: 4 / 3; border: 1px solid #e5d3f2; border-radius: 8px; display: block; object-fit: cover; width: 100%; }
.carousel-slide figcaption { color: #8054ad; font-size: 12px; margin-top: 5px; overflow-wrap: anywhere; }
.carousel-remove { align-items: center; color: #8054ad; display: flex; font-size: 12px; gap: 7px; margin-top: 9px; }
.carousel-remove input { accent-color: #8b68d9; height: 16px; margin: 0; min-height: 16px; width: 16px; }
.carousel-slide.is-marked-for-removal img { opacity: .45; }
.carousel-controls { align-items: center; color: #8054ad; display: flex; font-size: 12px; justify-content: space-between; margin-top: 12px; }
.carousel-arrow { align-items: center; background: #fcfaff; border: 1px solid #e3cef2; border-radius: 50%; color: #45295d; cursor: pointer; display: inline-flex; font: 24px/1 'DM Sans', sans-serif; height: 36px; justify-content: center; padding: 0; width: 36px; }
.carousel-arrow:disabled { cursor: default; opacity: .45; }
.pawfile-form .option-field { margin-bottom: 24px; }

@media (max-width: 480px) {
	.pawfile-content { padding: 28px 24px 22px; }
	.pawfile-header h1 { font-size: 28px; }
	.pawfile-header p { font-size: 16px; }
	.choice-grid.three-up { grid-template-columns: 1fr; }
}