/* ========================================================================
   Find & Bind · seek_request_display.css
   - Public seek-request details
   - Responsive gallery, summary sidebar, attributes, and dark theme
   ======================================================================== */

.request-display-page{
	--request-display-accent:var(--red);
	--request-display-accent-dark:var(--red-dark);
	--request-display-accent-light:var(--red-special);
	--request-display-soft:#fff1f2;
	--request-display-soft-border:#fecaca;
	--owner-listing-display-accent:var(--green);
	--owner-listing-display-accent-dark:var(--green-dark);

	/*
		Allow the main content to expand while keeping the standard
		footer at the bottom on short pages.
	*/
	display:flex;
	flex-direction:column;
	min-height:100vh;
	min-height:100dvh;
}

.request-display-main{
	flex:1 0 auto;
	min-height:0;
	padding:22px 0 42px;
	background:
			radial-gradient(800px 320px at 5% 0, rgba(225,6,0,.07), transparent 58%),
			radial-gradient(800px 320px at 95% 0, rgba(0,161,20,.05), transparent 58%),
			linear-gradient(180deg, #f8fafc, #f4f6f9);
}

.request-display-wrap{
	display:flex;
	flex-direction:column;
	gap:14px;
}

.request-display-breadcrumbs{
	display:flex;
	align-items:center;
	gap:8px;
	overflow-x:auto;
	padding:2px 2px 0;
	color:var(--muted);
	font-size:13px;
	white-space:nowrap;
}

.request-display-breadcrumbs a{
	color:var(--muted);
	text-decoration:none;
}

.request-display-breadcrumbs a:hover{
	color:var(--request-display-accent);
}

.request-display-breadcrumbs i{
	font-size:9px;
}

.request-display-hero{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:24px;
	padding:24px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	box-shadow:var(--shadow);
}

.request-display-hero__copy{
	min-width:0;
}

.request-display-hero__badges{
	display:flex;
	align-items:center;
	gap:8px;
	flex-wrap:wrap;
	margin-bottom:10px;
}

.request-display-type-badge,
.request-display-urgency{
	display:inline-flex;
	align-items:center;
	gap:7px;
	min-height:30px;
	padding:5px 10px;
	border-radius:999px;
	font-size:12px;
	font-weight:700;
}

.request-display-type-badge{
	color:#b91c1c;
	background:var(--request-display-soft);
	border:1px solid var(--request-display-soft-border);
}

.request-display-urgency{
	color:#475569;
	background:#f8fafc;
	border:1px solid var(--line);
}

.request-display-urgency--high,
.request-display-urgency--urgent{
	color:#b91c1c;
	background:#fef2f2;
	border-color:#fecaca;
}

.request-display-hero h1{
	margin:0;
	color:var(--navy);
	font-size:clamp(26px, 4vw, 40px);
	line-height:1.15;
	overflow-wrap:anywhere;
}

.request-display-hero__meta{
	display:flex;
	align-items:center;
	gap:9px 16px;
	flex-wrap:wrap;
	margin-top:14px;
	color:var(--muted);
	font-size:13px;
}

.request-display-hero__meta span{
	display:inline-flex;
	align-items:center;
	gap:7px;
}

.request-display-hero__meta i{
	color:var(--request-display-accent);
}

.request-display-hero__actions{
	display:flex;
	align-items:center;
	justify-content:flex-end;
	gap:9px;
	flex-wrap:wrap;
	flex:0 0 auto;
}

.request-display-hero__actions .btn,
.request-display-action-stack .btn,
.request-display-not-found .btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:8px;
	min-height:42px;
	font-weight:700;
}

.request-display-share-btn{
	background:var(--request-display-accent);
	border-color:var(--request-display-accent-dark);
	color:#fff;
}

/* Favorite is a passive page utility, separate from transactional actions. */
.request-display-favorite-btn{
	background:#fff;
	border-color:#fecdd3;
	color:#be123c;
	transition:
			background .15s ease,
			border-color .15s ease,
			color .15s ease,
			transform .15s ease;
}

.request-display-favorite-btn:hover{
	background:#fff1f2;
	border-color:#fda4af;
	color:#be123c;
	transform:translateY(-1px);
}

.request-display-favorite-btn.is-favorited{
	background:#ffe4e6;
	border-color:#fb7185;
	color:#be123c;
}

.request-display-favorite-btn.is-loading{
	cursor:wait;
	opacity:.7;
	pointer-events:none;
}

.request-display-primary-btn{
	background:var(--owner-listing-display-accent);
	border-color:var(--owner-listing-display-accent-dark);
	color:#fff;
}

.request-display-change-request-btn{
	background:var(--request-display-accent);
	border-color:var(--request-display-accent-dark);
	color:#fff;
}

.request-display-share-btn:hover,
.request-display-primary-btn:hover{
	filter:brightness(1.06);
}

/*
	Chat action uses a Telegram-inspired sky-blue appearance while
	remaining part of the Find & Bind interface.
*/
.request-display-chat-btn{
	background:#229ed9;
	border-color:#1687b7;
	color:#fff;
	box-shadow:0 6px 16px rgba(34,158,217,.22);
	transition:
			background .15s ease,
			border-color .15s ease,
			box-shadow .15s ease,
			transform .15s ease;
}

.request-display-chat-btn:hover{
	background:#1c8fc7;
	border-color:#1177a5;
	color:#fff;
	box-shadow:0 9px 20px rgba(34,158,217,.3);
	transform:translateY(-1px);
}

.request-display-chat-btn:focus-visible{
	outline:3px solid rgba(56,189,248,.35);
	outline-offset:2px;
}

.request-display-secondary-btn{
	background:#fff;
	border-color:#cbd5e1;
	color:var(--navy);
}

.request-display-secondary-btn:hover{
	background:#f8fafc;
	border-color:#94a3b8;
}

.request-display-message{
	display:none;
	padding:11px 13px;
	border-radius:12px;
	font-weight:700;
}

.request-display-message.is-success{
	display:block;
	color:#047857;
	background:#ecfdf5;
	border:1px solid #a7f3d0;
}

.request-display-message.is-error{
	display:block;
	color:#b91c1c;
	background:#fef2f2;
	border:1px solid #fecaca;
}

.request-display-shell{
	display:grid;
	grid-template-columns:minmax(0, 1fr) 340px;
	align-items:start;
	gap:14px;
}

.request-display-content,
.request-display-sidebar{
	display:flex;
	flex-direction:column;
	gap:14px;
	min-width:0;
}

.request-display-sidebar{
	position:sticky;
	top:82px;
}

.request-display-card{
	min-width:0;
	padding:18px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
	box-shadow:var(--shadow);
}

.request-display-card__head{
	display:flex;
	align-items:flex-start;
	justify-content:space-between;
	gap:16px;
	padding-bottom:13px;
	margin-bottom:15px;
	border-bottom:1px solid var(--line);
}

.request-display-card__head h2,
.request-display-summary-card h2,
.request-display-profile-card h2{
	margin:0;
	color:var(--navy);
	font-size:21px;
	line-height:1.25;
}

.request-display-card__head > span{
	color:var(--muted);
	font-size:12px;
	font-weight:700;
	white-space:nowrap;
}

.request-display-section-kicker,
.request-display-eyebrow{
	margin:0 0 4px;
	color:var(--request-display-accent-light);
	font-size:13px;
	font-weight:700;
	letter-spacing:.08em;
	text-transform:uppercase;
}

.request-display-gallery-main{
	position:relative;
	display:block;
	width:100%;
	aspect-ratio:16 / 9;
	overflow:hidden;
	padding:0;
	border:0;
	border-radius:15px;
	background:#eef2f7;
	cursor:zoom-in;
}

.request-display-gallery-main img{
	display:block;
	width:100%;
	height:100%;
	object-fit:contain;
	background:#f1f5f9;
}

.request-display-gallery-main__hint{
	position:absolute;
	right:12px;
	bottom:12px;
	display:inline-flex;
	align-items:center;
	gap:7px;
	padding:7px 10px;
	border-radius:999px;
	background:rgba(15,23,42,.78);
	color:#fff;
	font-size:12px;
	font-weight:700;
	box-shadow:0 4px 14px rgba(0,0,0,.2);
}

.request-display-thumbnails{
	display:grid;
	grid-template-columns:repeat(6, minmax(0, 1fr));
	gap:9px;
	margin-top:10px;
}

.request-display-thumbnail{
	position:relative;
	display:block;
	aspect-ratio:1 / 1;
	overflow:hidden;
	padding:0;
	border:2px solid transparent;
	border-radius:11px;
	background:#f1f5f9;
	cursor:pointer;
}

.request-display-thumbnail img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.request-display-thumbnail:hover,
.request-display-thumbnail.is-active{
	border-color:var(--request-display-accent);
}

.request-display-thumbnail.is-active::after{
	content:"";
	position:absolute;
	inset:0;
	box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);
	pointer-events:none;
}

.request-display-gallery-empty{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	min-height:340px;
	padding:28px;
	border:1px dashed #cbd5e1;
	border-radius:15px;
	background:linear-gradient(135deg, #fff1f2, #fee2e2);
	color:#b91c1c;
	text-align:center;
}

.request-display-gallery-empty i{
	margin-bottom:10px;
	font-size:45px;
}

.request-display-gallery-empty strong{
	font-size:17px;
}

.request-display-gallery-empty span{
	margin-top:4px;
	color:#7f1d1d;
}

.request-display-attachments{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:9px;
	margin-top:12px;
}

.request-display-attachments a{
	display:grid;
	grid-template-columns:38px minmax(0, 1fr) auto;
	align-items:center;
	gap:10px;
	padding:11px;
	border:1px solid var(--line);
	border-radius:12px;
	background:#f8fafc;
	color:var(--ink);
	text-decoration:none;
}

.request-display-attachments a:hover{
	background:#f1f5f9;
	border-color:#cbd5e1;
}

.request-display-attachments > a > i:first-child{
	font-size:23px;
	color:var(--request-display-accent);
	text-align:center;
}

.request-display-attachments > a > i:last-child{
	color:var(--muted);
}

.request-display-attachments strong,
.request-display-attachments small{
	display:block;
	overflow:hidden;
	text-overflow:ellipsis;
	white-space:nowrap;
}

.request-display-attachments small{
	color:var(--muted);
}

.request-display-description{
	color:#374151;
	font-size:15px;
	line-height:1.75;
	overflow-wrap:anywhere;
}

.request-display-attribute-grid{
	display:grid;
	grid-template-columns:repeat(2, minmax(0, 1fr));
	gap:10px;
	margin:0;
}

.request-display-attribute-grid > div{
	padding:12px;
	border:1px solid var(--line);
	border-radius:13px;
	background:#fbfdff;
}

.request-display-attribute-grid dt{
	margin-bottom:4px;
	color:var(--muted);
	font-size:11px;
	font-weight:700;
	letter-spacing:.05em;
	text-transform:uppercase;
}

.request-display-attribute-grid dd{
	margin:0;
	color:var(--ink);
	font-weight:700;
	line-height:1.4;
	overflow-wrap:anywhere;
}

.request-display-summary-card h2{
	margin-bottom:15px;
}

.request-display-budget{
	padding:15px;
	margin-bottom:12px;
	border:1px solid var(--request-display-soft-border);
	border-radius:14px;
	background:var(--request-display-soft);
}

.request-display-budget span,
.request-display-budget strong{
	display:block;
}

.request-display-budget span{
	color:#991b1b;
	font-size:11px;
	font-weight:700;
	letter-spacing:.06em;
	text-transform:uppercase;
}

.request-display-budget strong{
	margin-top:3px;
	color:#b91c1c;
	font-size:23px;
	line-height:1.25;
}

.request-display-summary-list{
	display:flex;
	flex-direction:column;
	gap:0;
	margin:0;
}

.request-display-summary-list > div{
	padding:11px 0;
	border-bottom:1px solid var(--line);
}

.request-display-summary-list > div:last-child{
	border-bottom:0;
}

.request-display-summary-list dt{
	display:flex;
	align-items:center;
	gap:7px;
	color:var(--muted);
	font-size:12px;
	font-weight:700;
}

.request-display-summary-list dt i{
	width:16px;
	color:var(--request-display-accent);
	text-align:center;
}

.request-display-summary-list dd{
	margin:4px 0 0 23px;
	color:var(--ink);
	font-weight:700;
	line-height:1.4;
}

.request-display-action-stack{
	display:grid;
	gap:8px;
	padding-top:14px;
	margin-top:4px;
	border-top:1px solid var(--line);
}

.request-display-action-stack .btn{
	width:100%;
}

.request-display-profile-card__identity{
	display:flex;
	align-items:center;
	gap:12px;
}

.request-display-profile-avatar{
	display:inline-grid;
	place-items:center;
	width:58px;
	height:58px;
	overflow:hidden;
	border:2px solid var(--request-display-soft-border);
	border-radius:999px;
	background:var(--request-display-soft);
	color:#b91c1c;
	font-size:20px;
	font-weight:900;
	flex:0 0 58px;
}

.request-display-profile-avatar img{
	display:block;
	width:100%;
	height:100%;
	object-fit:cover;
}

.request-display-profile-bio{
	margin:13px 0 0;
	color:#4b5563;
	line-height:1.6;
}

.request-display-privacy-note{
	display:flex;
	align-items:flex-start;
	gap:8px;
	padding:10px;
	margin:13px 0 0;
	border:1px solid var(--line);
	border-radius:12px;
	background:#f8fafc;
	color:var(--muted);
	font-size:12px;
	line-height:1.5;
}

.request-display-privacy-note i{
	margin-top:3px;
	color:var(--green-grass);
}

.request-display-not-found{
	display:flex;
	align-items:center;
	justify-content:center;
	flex-direction:column;
	min-height:520px;
	padding:34px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	box-shadow:var(--shadow);
	text-align:center;
}

.request-display-not-found__icon{
	display:grid;
	place-items:center;
	width:76px;
	height:76px;
	margin-bottom:14px;
	border-radius:22px;
	background:var(--request-display-soft);
	color:var(--request-display-accent);
	font-size:30px;
}

.request-display-not-found h1{
	margin:0;
	color:var(--navy);
	font-size:clamp(25px, 4vw, 35px);
}

.request-display-not-found > p:not(.request-display-eyebrow){
	max-width:560px;
	margin:9px 0 18px;
	color:var(--muted);
}

.request-display-lightbox.is-hidden{
	display:none;
}

.request-display-lightbox{
	position:fixed;
	inset:0;
	z-index:1000;
	display:grid;
	place-items:center;
	padding:24px;
}

.request-display-lightbox__overlay{
	position:absolute;
	inset:0;
	width:100%;
	height:100%;
	padding:0;
	border:0;
	background:rgba(2,6,23,.9);
	backdrop-filter:blur(4px);
	cursor:zoom-out;
}

.request-display-lightbox__dialog{
	position:relative;
	z-index:1;
	display:grid;
	grid-template-columns:minmax(0, 1fr);
	grid-template-rows:minmax(0, 1fr);
	place-items:center;
	width:min(1200px, 100%);
	height:min(820px, calc(100vh - 48px));
}

.request-display-lightbox__dialog img{
	display:block;
	width:100%;
	height:100%;
	min-width:0;
	min-height:0;
	max-width:100%;
	max-height:100%;
	object-fit:contain;
	border-radius:10px;
}

.request-display-lightbox__close,
.request-display-lightbox__nav{
	position:absolute;
	z-index:2;
	display:grid;
	place-items:center;
	width:44px;
	height:44px;
	padding:0;
	border:1px solid rgba(255,255,255,.25);
	border-radius:999px;
	background:rgba(15,23,42,.72);
	color:#fff;
	font-size:17px;
	cursor:pointer;
}

.request-display-lightbox__close{
	right:0;
	top:0;
}

.request-display-lightbox__nav{
	top:50%;
	transform:translateY(-50%);
}

.request-display-lightbox__nav--prev{
	left:0;
}

.request-display-lightbox__nav--next{
	right:0;
}

.request-display-lightbox__counter{
	position:absolute;
	left:50%;
	bottom:0;
	transform:translateX(-50%);
	padding:6px 10px;
	border-radius:999px;
	background:rgba(15,23,42,.72);
	color:#fff;
	font-size:12px;
	font-weight:700;
}

body.request-display-lightbox-open{
	overflow:hidden;
}

@media (max-width:1050px){
	.request-display-shell{
		grid-template-columns:minmax(0, 1fr) 310px;
	}

	.request-display-thumbnails{
		grid-template-columns:repeat(5, minmax(0, 1fr));
	}
}

@media (max-width:900px){
	.request-display-shell{
		grid-template-columns:1fr;
	}

	.request-display-sidebar{
		position:static;
		grid-row:auto;
	}

	.request-display-hero{
		flex-direction:column;
	}

	.request-display-hero__actions{
		justify-content:flex-start;
	}
}

@media (max-width:700px){
	.request-display-main{
		padding-top:14px;
	}

	.request-display-hero,
	.request-display-card{
		padding:15px;
		border-radius:15px;
	}

	.request-display-hero__actions{
		width:100%;
	}

	.request-display-hero__actions .btn{
		flex:1 1 auto;
	}

	.request-display-thumbnails{
		grid-template-columns:repeat(4, minmax(0, 1fr));
	}

	.request-display-attachments,
	.request-display-attribute-grid{
		grid-template-columns:1fr;
	}

	.request-display-gallery-empty{
		min-height:260px;
	}
}

@media (max-width:520px){
	.request-display-hero h1{
		font-size:27px;
	}

	.request-display-hero__actions{
		flex-direction:column;
	}

	.request-display-hero__actions .btn{
		width:100%;
	}

	.request-display-thumbnails{
		grid-template-columns:repeat(3, minmax(0, 1fr));
	}

	.request-display-lightbox{
		padding:12px;
	}

	.request-display-lightbox__dialog{
		height:calc(100vh - 24px);
	}

	.request-display-lightbox__nav{
		width:38px;
		height:38px;
	}
}

/* Dark theme */
[data-theme="dark"] .request-display-main{
	background:
		radial-gradient(800px 320px at 5% 0, rgba(225,6,0,.08), transparent 58%),
		radial-gradient(800px 320px at 95% 0, rgba(0,161,20,.05), transparent 58%),
		linear-gradient(180deg, #0c111b, #0b1220);
}

[data-theme="dark"] .request-display-hero,
[data-theme="dark"] .request-display-card,
[data-theme="dark"] .request-display-not-found{
	background:#0e1420;
	border-color:var(--line);
	box-shadow:0 10px 28px rgba(0,0,0,.34);
}

[data-theme="dark"] .request-display-hero h1,
[data-theme="dark"] .request-display-card__head h2,
[data-theme="dark"] .request-display-summary-card h2,
[data-theme="dark"] .request-display-profile-card h2,
[data-theme="dark"] .request-display-not-found h1,
[data-theme="dark"] .request-display-attribute-grid dd,
[data-theme="dark"] .request-display-summary-list dd{
	color:#e5e7eb;
}

[data-theme="dark"] .request-display-description,
[data-theme="dark"] .request-display-profile-bio{
	color:#cbd5e1;
}

[data-theme="dark"] .request-display-secondary-btn{
	background:#0b1220;
	border-color:#334155;
	color:#e5e7eb;
}

[data-theme="dark"] .request-display-secondary-btn:hover{
	background:#101827;
	border-color:#475569;
}

[data-theme="dark"] .request-display-favorite-btn{
	background:#0b1220;
	border-color:#881337;
	color:#fda4af;
}

[data-theme="dark"] .request-display-favorite-btn:hover{
	background:#4c0519;
	border-color:#9f1239;
	color:#fecdd3;
}

[data-theme="dark"] .request-display-favorite-btn.is-favorited{
	background:#4c0519;
	border-color:#e11d48;
	color:#fecdd3;
}

[data-theme="dark"] .request-display-urgency,
[data-theme="dark"] .request-display-privacy-note,
[data-theme="dark"] .request-display-attachments a,
[data-theme="dark"] .request-display-attribute-grid > div{
	background:#0b1220;
	border-color:#1f2937;
	color:#e5e7eb;
}

[data-theme="dark"] .request-display-gallery-main,
[data-theme="dark"] .request-display-gallery-main img,
[data-theme="dark"] .request-display-thumbnail{
	background:#0b1220;
}

[data-theme="dark"] .request-display-gallery-empty{
	background:linear-gradient(135deg, #2a0b0b, #1f1115);
	border-color:#7f1d1d;
	color:#fca5a5;
}

[data-theme="dark"] .request-display-gallery-empty span{
	color:#fecaca;
}

[data-theme="dark"] .request-display-budget{
	background:#2a0b0b;
	border-color:#7f1d1d;
}

[data-theme="dark"] .request-display-budget span,
[data-theme="dark"] .request-display-budget strong{
	color:#fca5a5;
}

[data-theme="dark"] .request-display-profile-avatar,
[data-theme="dark"] .request-display-not-found__icon{
	background:#2a0b0b;
	border-color:#7f1d1d;
	color:#fca5a5;
}

[data-theme="dark"] .request-display-message.is-success{
	background:#052e2b;
	border-color:#065f46;
	color:#a7f3d0;
}

[data-theme="dark"] .request-display-message.is-error{
	background:#2a0b0b;
	border-color:#7f1d1d;
	color:#fecaca;
}
