/* ─────────────────────────────────────────────────────────────────────────
   WETRIPER — Open trips archive & single
   ───────────────────────────────────────────────────────────────────────── */

/* ── Trip request / edit form page ──────────────────────────────────────── */
.catm-request-layout {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var(--sp-10);
	align-items: start;
	max-width: 1080px;
	margin-inline: auto;
	padding: var(--sp-10) var(--sp-6) var(--sp-14);
}

.catm-request-form {
	display: grid;
	gap: var(--sp-6);
}

.catm-request-form__header { display: grid; gap: var(--sp-3); }

.catm-request-form__header h1 {
	font-size: var(--text-4xl);
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0;
}

.catm-request-form__header p {
	font-size: var(--text-base);
	color: var(--c-muted);
	margin: 0;
}

/* Activity / country choice pills */
.catm-choice-pill {
	display: inline-flex;
	align-items: center;
	padding: 0.4rem 0.9rem;
	border: 1.5px solid var(--c-line);
	border-radius: var(--r-pill);
	font-size: var(--text-sm);
	font-weight: 500;
	color: var(--c-ink);
	cursor: pointer;
	transition: border-color 120ms, background 120ms, color 120ms;
	user-select: none;
}

.catm-choice-pill:hover { border-color: var(--c-ink); }

.catm-choice-pill input[type="checkbox"] { display: none; }

.catm-choice-pill:has(input:checked) {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-white);
}

/* People / Days / Max — 3-col row */
.catm-request-form__split {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-4);
}

.catm-counter-field {
	display: grid;
	gap: var(--sp-2);
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--c-ink);
}

.catm-counter-field span em {
	font-style: normal;
	font-weight: 400;
	color: var(--c-muted);
}

.catm-counter-field input {
	width: 100%;
	padding: 0.6rem 0.75rem;
	border: 1.5px solid var(--c-line);
	border-radius: var(--r-lg);
	font-size: var(--text-base);
	background: var(--c-white);
	-moz-appearance: textfield;
}

.catm-counter-field input:focus { outline: none; border-color: var(--c-ink); }

/* Submit button */
.catm-request-form__submit {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-2);
	padding: var(--sp-4) var(--sp-6);
	background: var(--c-ink);
	color: var(--c-white);
	border: none;
	border-radius: var(--r-pill);
	font-size: var(--text-base);
	font-weight: 600;
	cursor: pointer;
	transition: opacity 150ms;
}

.catm-request-form__submit:hover { opacity: 0.85; }

/* Sticky "How it works" aside */
.catm-request-steps {
	position: sticky;
	top: calc(var(--header-h) + var(--sp-6));
	padding: var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
}

.catm-request-steps h2 {
	font-size: var(--text-lg);
	font-weight: 700;
	letter-spacing: -0.02em;
	margin: 0 0 var(--sp-5);
}

.catm-request-steps ol {
	display: grid;
	gap: var(--sp-5);
	list-style: none;
	padding: 0;
	margin: 0;
}

.catm-request-steps li {
	display: grid;
	grid-template-columns: 1.75rem 1fr;
	column-gap: var(--sp-3);
	row-gap: var(--sp-1);
}

.catm-request-steps li span {
	grid-row: 1 / 3;
	font-size: 1.1rem;
	line-height: 1.5;
}

.catm-request-steps li strong {
	font-size: var(--text-sm);
	font-weight: 600;
	line-height: 1.4;
}

.catm-request-steps li p {
	font-size: var(--text-xs);
	color: var(--c-muted);
	margin: 0;
	line-height: 1.5;
}

/* Mobile */
@media (max-width: 780px) {
	.catm-request-layout {
		grid-template-columns: 1fr;
		padding-inline: var(--sp-4);
		gap: var(--sp-8);
	}

	.catm-request-steps { position: static; }

	.catm-request-form__split { grid-template-columns: 1fr 1fr; }
}

/* ── Archive grid ────────────────────────────────────────────────────────── */
.trip-card-grid {
	display: grid;
	gap: var(--sp-5);
	grid-template-columns: repeat(4, minmax(0, 1fr));
}

@media (max-width: 1024px) { .trip-card-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 680px)  { .trip-card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 420px)  { .trip-card-grid { grid-template-columns: 1fr; } }

/* ── Open-trip filter bar ─────────────────────────────────────────────────── */
.open-trip-filter {
	display: grid;
	gap: var(--sp-5);
	padding: var(--sp-5) var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
}

.open-trip-filter form { display: contents; }

.open-trip-filter__grid {
	display: grid;
	gap: var(--sp-4);
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
}

/* ── Single open-trip ────────────────────────────────────────────────────── */
.request-single {
	display: grid;
	gap: var(--sp-6);
	padding-bottom: var(--sp-10);
	max-width: 720px;
	margin-inline: auto;
}

.request-single__hero {
	display: grid;
	gap: var(--sp-4);
	padding-bottom: var(--sp-2);
}

.request-single__hero h1 {
	font-size: var(--text-4xl);
	letter-spacing: -0.04em;
	line-height: 1.05;
	margin: 0;
}

/* Poster byline — avatar + name + time */
.request-single__poster {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
}

.request-single__poster img {
	width: 28px;
	height: 28px;
	border-radius: var(--r-pill);
	object-fit: cover;
	flex-shrink: 0;
}

.request-single__poster span {
	font-size: var(--text-sm);
	color: var(--c-muted);
}

/* Edit link — inline with poster byline */
.request-single__edit-link {
	margin-left: auto;
	font-size: var(--text-xs);
	color: var(--c-muted);
	text-decoration: underline;
	flex-shrink: 0;
}

.request-single__edit-link:hover { color: var(--c-ink); }

/* Success notice after save */
.request-single__notice {
	padding: var(--sp-3) var(--sp-5);
	background: color-mix(in srgb, var(--c-accent) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--c-accent) 30%, transparent);
	border-radius: var(--r-xl);
	font-size: var(--text-sm);
	color: var(--c-ink);
}

/* Cancel link on edit form */
.catm-request-form__actions {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
}

.catm-request-form__cancel {
	font-size: var(--text-sm);
	color: var(--c-muted);
	text-decoration: underline;
}

.catm-request-form__cancel:hover { color: var(--c-ink); }

/* Details copy block */
.request-single__copy {
	font-size: var(--text-base);
	line-height: 1.7;
	color: var(--c-ink-2);
}

/* Meta list inside request detail */
.request-meta {
	display: grid;
	gap: var(--sp-3);
}

.request-meta__row {
	display: flex;
	gap: var(--sp-3);
	align-items: baseline;
	padding-bottom: var(--sp-3);
	border-bottom: 1px solid var(--c-line);
	font-size: var(--text-sm);
}

.request-meta__row:last-child { border-bottom: none; }

.request-meta__label {
	font-weight: 600;
	color: var(--c-ink-2);
	min-width: 120px;
	flex-shrink: 0;
}

.request-meta__val { color: var(--c-muted); }

/* ─────────────────────────────────────────────────────────────────────────
   Traveler-to-traveler chat & join system
   ───────────────────────────────────────────────────────────────────────── */

/* ── Interaction section wrapper ─────────────────────────────────────────── */
.request-interaction {
	display: grid;
	gap: var(--sp-5);
}

/* ── Generic panel card (join box, traveler-first note, owner list) ───────── */
.request-interaction__panel {
	padding: var(--sp-5) var(--sp-6);
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	display: grid;
	gap: var(--sp-4);
}

.request-interaction__panel h2 {
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0;
}

.request-interaction__panel > p {
	font-size: var(--text-sm);
	color: var(--c-ink-2);
	margin: 0;
	line-height: 1.6;
}

/* ── Owner view: list of join requests ───────────────────────────────────── */
.join-request-list {
	display: grid;
	gap: var(--sp-4);
}

.join-request-card {
	display: grid;
	grid-template-columns: 52px 1fr;
	gap: var(--sp-4);
	align-items: start;
	padding: var(--sp-5);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
}

.join-request-card__avatar img {
	width: 52px;
	height: 52px;
	border-radius: var(--r-pill);
	object-fit: cover;
}

.join-request-card h3 {
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: -0.02em;
	margin: 0;
}

.join-request-card__meta {
	font-size: var(--text-sm);
	color: var(--c-muted);
	margin: var(--sp-1) 0 var(--sp-3);
}

.join-request-card__message {
	font-size: var(--text-sm);
	color: var(--c-ink-2);
	line-height: 1.6;
	margin-bottom: var(--sp-3);
}

.join-request-card__message p:last-child { margin: 0; }

/* ── Chat thread card ────────────────────────────────────────────────────── */
.proposal-thread {
	display: grid;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	overflow: hidden;
	margin-top: var(--sp-4);
}

.proposal-thread__header {
	padding: var(--sp-3) var(--sp-4);
	border-bottom: 1px solid var(--c-line);
	background: var(--c-surface);
}

.proposal-thread__header h3 {
	font-size: var(--text-xs);
	font-weight: 600;
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: 0.07em;
	margin: 0;
}

/* ── Message list ────────────────────────────────────────────────────────── */
.proposal-thread__messages {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-5);
	background: var(--c-surface-2);
}

.join-thread__empty {
	font-size: var(--text-sm);
	color: var(--c-muted);
	text-align: center;
	padding: var(--sp-2) 0;
}

/* ── Message bubble — avatar outside, bubble in middle ───────────────────── */
.proposal-message {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-3);
	max-width: 80%;
	align-self: flex-start;
}

/* Avatar column: image + name below */
.proposal-message__avatar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 4px;
	flex-shrink: 0;
	width: 40px;
}

.proposal-message__avatar img {
	width: 36px;
	height: 36px;
	border-radius: var(--r-pill);
	object-fit: cover;
}

.proposal-message__avatar span {
	font-size: 10px;
	font-weight: 500;
	color: var(--c-muted);
	text-align: center;
	white-space: nowrap;
	max-width: 52px;
	overflow: hidden;
	text-overflow: ellipsis;
}

/* Bubble */
.proposal-message__bubble {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
	padding: var(--sp-3) var(--sp-4);
	font-size: var(--text-sm);
	line-height: 1.6;
	color: var(--c-ink);
}

.proposal-message__bubble p:last-child { margin: 0; }

/* Own message — flipped to right side */
.proposal-message.is-mine {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.proposal-message.is-mine .proposal-message__bubble {
	background: var(--c-ink);
	border-color: var(--c-ink);
	color: var(--c-white);
	border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
}

/* ── Contact exchange / mutual approval ──────────────────────────────────── */
.contact-exchange {
	display: grid;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
	border-top: 1px solid var(--c-line);
	background: var(--c-surface);
}

.contact-exchange h4 {
	font-size: var(--text-sm);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

.contact-exchange > p {
	font-size: var(--text-sm);
	color: var(--c-ink-2);
	margin: 0;
	line-height: 1.6;
}

.contact-exchange__status {
	display: flex;
	align-items: center;
	gap: var(--sp-2);
	flex-wrap: wrap;
	font-size: var(--text-xs);
	font-weight: 500;
	color: var(--c-muted);
}

/* Revealed contacts — two columns */
.contact-exchange__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-4);
	padding: var(--sp-4);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg);
}

.contact-exchange__grid strong {
	display: block;
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--c-muted);
	text-transform: uppercase;
	letter-spacing: 0.06em;
	margin-bottom: var(--sp-1);
}

.contact-exchange__grid p { font-size: var(--text-sm); color: var(--c-ink); margin: 0; line-height: 1.5; }
.contact-exchange__grid a { color: var(--c-ink); font-weight: 600; }

/* ── Reply form — textarea + send button side by side ────────────────────── */
.proposal-message-form {
	display: flex;
	gap: var(--sp-3);
	align-items: flex-end;
	padding: var(--sp-4) var(--sp-5);
	border-top: 1px solid var(--c-line);
	background: var(--c-surface);
}

.proposal-message-form label {
	flex: 1;
	display: grid;
	gap: 0;
}

.proposal-message-form label > span { display: none; }

.proposal-message-form textarea {
	resize: none;
	min-height: 44px;
}


/* ── Initial join request form ───────────────────────────────────────────── */
.join-request-form {
	display: grid;
	gap: var(--sp-4);
}

.join-request-form label {
	display: grid;
	gap: var(--sp-2);
}

.join-request-form label > span {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--c-ink-2);
}

/* ── Proposals list ──────────────────────────────────────────────────────── */
.proposal-list {
	display: grid;
	gap: var(--sp-4);
}

.proposal-card {
	padding: var(--sp-5);
	background: var(--c-surface-2);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	display: grid;
	gap: var(--sp-3);
}

.proposal-card__guide {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
}

.proposal-card__guide img {
	width: 42px;
	height: 42px;
	border-radius: var(--r-pill);
	object-fit: cover;
}

.proposal-card__guide-name {
	font-weight: 600;
	font-size: var(--text-sm);
	color: var(--c-ink);
}

.proposal-card > p {
	font-size: var(--text-sm);
	color: var(--c-muted);
	line-height: 1.6;
}

/* ── Join request form ───────────────────────────────────────────────────── */
.join-form {
	display: grid;
	gap: var(--sp-4);
}

/* ── "I'm interested" sidebar box ───────────────────────────────────────── */
.btn--full { width: 100%; justify-content: center; }

.trip-interest-note {
	font-size: var(--text-xs);
	color: var(--c-muted);
	text-align: center;
	margin: 0;
	line-height: 1.5;
}

.trip-interest-confirmed {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--c-ink);
	text-align: center;
	margin: 0;
}

/* ── Owner: interested travelers panel ───────────────────────────────────── */
.trip-interested-panel {
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	overflow: hidden;
}

.trip-interested-panel__head {
	padding: var(--sp-5) var(--sp-6);
	border-bottom: 1px solid var(--c-line);
}

.trip-interested-panel__head h2 {
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0 0 var(--sp-1);
}

.trip-interested-panel__head p {
	font-size: var(--text-sm);
	color: var(--c-muted);
	margin: 0;
}

.trip-interested-list {
	display: grid;
	gap: 0;
}

.trip-interested-card {
	display: flex;
	align-items: center;
	gap: var(--sp-4);
	padding: var(--sp-4) var(--sp-6);
	border-bottom: 1px solid var(--c-line);
}

.trip-interested-card:last-child { border-bottom: none; }

.trip-interested-card__avatar {
	width: 48px;
	height: 48px;
	border-radius: var(--r-pill);
	object-fit: cover;
	flex-shrink: 0;
}

.trip-interested-card__info {
	flex: 1;
	display: grid;
	gap: 2px;
	min-width: 0;
}

.trip-interested-card__info strong {
	font-size: var(--text-sm);
	font-weight: 600;
	color: var(--c-ink);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.trip-interested-card__info a {
	font-size: var(--text-sm);
	color: var(--c-muted);
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.trip-interested-card__info a:hover { color: var(--c-ink); }

.trip-interested-card__info span {
	font-size: var(--text-xs);
	color: var(--c-muted);
}

/* ── Forum join-intent card ──────────────────────────────────────────────── */
.forum-join-intent {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	align-self: flex-start;
	max-width: 80%;
}

.forum-join-intent img {
	width: 36px;
	height: 36px;
	border-radius: var(--r-pill);
	object-fit: cover;
	flex-shrink: 0;
}

.forum-join-intent p {
	font-size: var(--text-sm);
	color: var(--c-muted);
	margin: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-lg) var(--r-lg) var(--r-lg) 4px;
	padding: var(--sp-2) var(--sp-3);
	line-height: 1.5;
}

.forum-join-intent p strong {
	color: var(--c-ink);
	font-weight: 600;
}

.forum-join-intent.is-mine {
	align-self: flex-end;
	flex-direction: row-reverse;
}

.forum-join-intent.is-mine p {
	border-radius: var(--r-lg) var(--r-lg) 4px var(--r-lg);
}

/* ── Public discussion forum ─────────────────────────────────────────────── */
.trip-forum {
	display: grid;
	gap: 0;
	background: var(--c-surface);
	border: 1px solid var(--c-line);
	border-radius: var(--r-xl);
	overflow: hidden;
}

.trip-forum__head {
	padding: var(--sp-5) var(--sp-6);
	border-bottom: 1px solid var(--c-line);
}

.trip-forum__head h2 {
	font-size: var(--text-xl);
	font-weight: 700;
	letter-spacing: -0.03em;
	margin: 0 0 var(--sp-1);
}

.trip-forum__head p {
	font-size: var(--text-sm);
	color: var(--c-muted);
	margin: 0;
	line-height: 1.6;
}

.trip-forum__notice {
	font-size: var(--text-sm);
	color: var(--c-muted);
	padding: var(--sp-3) var(--sp-6);
	background: var(--c-surface-2);
	border-bottom: 1px solid var(--c-line);
	margin: 0;
}

.trip-forum__messages {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
	padding: var(--sp-5) var(--sp-6);
	background: var(--c-surface-2);
	min-height: 120px;
}

/* Forum uses same bubble classes as private threads */


/* ── Forum bottom: two stacked rows ─────────────────────────────────────── */
.trip-forum__bottom {
	display: flex;
	flex-direction: column;
	border-top: 1px solid var(--c-line);
	background: var(--c-surface);
}

/* Row 1 — avatar + pill input */
.trip-forum__reply-row {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5);
}


.trip-forum__form {
	display: flex;
	align-items: center;
	gap: var(--sp-3);
	flex: 1;
	min-width: 0;
}

/* Bordered pill input */
.trip-forum__input-pill {
	flex: 1;
	min-width: 0;
	height: 44px;
	border: 1.5px solid var(--c-line);
	border-radius: 999px;
	padding: 0 var(--sp-4);
	font-size: var(--text-sm);
	color: var(--c-ink);
	background: var(--c-surface);
	outline: none;
	box-shadow: none;
}

.trip-forum__input-pill::placeholder { color: var(--c-muted); }
.trip-forum__input-pill:focus { border-color: var(--c-ink); box-shadow: none; }

.trip-forum__send-btn {
	height: 44px;
	padding: 0 var(--sp-5);
	background: var(--c-ink);
	color: var(--c-white);
	border: none;
	border-radius: 999px;
	font-size: var(--text-sm);
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	transition: opacity 150ms;
}

.trip-forum__send-btn:hover { opacity: 0.8; }

/* Row 2 — I'm interested / confirmed state */
.trip-forum__join-row {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-3);
	padding: var(--sp-4) var(--sp-5) var(--sp-5);
	border-top: 1px solid var(--c-line);
}

/* Large centered interest button */
.trip-forum__interest-form { width: 100%; max-width: 420px; }

.trip-forum__interest-btn {
	width: 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-2);
	background: var(--c-ink);
	color: var(--c-white);
	border: none;
	border-radius: 999px;
	padding: var(--sp-4) var(--sp-6);
	font-size: var(--text-base);
	font-weight: 600;
	letter-spacing: -0.01em;
	cursor: pointer;
	transition: opacity 150ms;
}

.trip-forum__interest-btn:hover { opacity: 0.8; }

/* Confirmed state text */
.trip-forum__join-confirmed {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--c-ink);
	text-align: center;
	margin: 0;
}

/* Cancel link */
.trip-forum__join-cancel {
	background: none;
	border: none;
	padding: 0;
	font-size: var(--text-xs);
	color: var(--c-muted);
	cursor: pointer;
	text-decoration: underline;
}

.trip-forum__join-cancel:hover { color: var(--c-ink); }

/* Disclaimer / note */
.trip-forum__join-note {
	font-size: var(--text-xs);
	color: var(--c-muted);
	text-align: center;
	margin: 0;
	line-height: 1.5;
}

/* Trip full state */
.trip-forum__full {
	font-size: var(--text-base);
	font-weight: 700;
	color: var(--c-muted);
	text-align: center;
	margin: 0;
}

.trip-forum__login {
	padding: var(--sp-4) var(--sp-6);
	font-size: var(--text-sm);
	color: var(--c-muted);
	border-top: 1px solid var(--c-line);
	margin: 0;
}

.trip-forum__login a {
	color: var(--c-ink);
	font-weight: 600;
}

/* ── Responsive ──────────────────────────────────────────────────────────── */
@media (max-width: 960px) {
	.request-card-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 600px) {
	.request-card-grid {
		grid-template-columns: 1fr;
	}

	.open-trip-filter__grid {
		grid-template-columns: 1fr;
	}
}