/* Customer tender-post wizard styling. Reuses the .reg-step / step-dot
   conventions established by register.js/subscribe.js's wizards. */

.post-a-tender-content {
	flex: 1;
	overflow-y: auto;
	background: var(--bg-page);
}

/* ── Hero ── */
.pat-hero {
	max-width: 720px;
	margin: 0 auto;
	padding: 52px 2rem 36px;
	text-align: center;
}
.pat-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 14px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 100px;
	font-size: 12px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: var(--text-muted);
	font-weight: 500;
	margin-bottom: 24px;
}
.pat-hero h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: clamp(32px, 4.5vw, 52px);
	font-weight: 500;
	line-height: 1.1;
	letter-spacing: -.02em;
	color: var(--text-primary);
	margin-bottom: 16px;
}
.pat-hero h1 em {
	font-style: italic;
	color: var(--accent);
	font-weight: 400;
}
.pat-hero p {
	font-size: 17px;
	color: var(--text-muted);
	max-width: 520px;
	margin: 0 auto 28px;
	line-height: 1.6;
}

/* ── CTA button (shared: hero + cta card) ── */
.pat-cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	background: var(--primary);
	color: #fff;
	font-weight: 600;
	font-size: 15px;
	padding: 13px 26px;
	border-radius: 10px;
	text-decoration: none;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0,102,204,.3);
	transition: background .15s, box-shadow .15s, transform .15s;
}
.pat-cta svg {
	width: 14px;
	height: 14px;
}
.pat-cta:hover {
	background: var(--primary-hover);
	box-shadow: 0 6px 20px rgba(0,102,204,.4);
	transform: translateY(-1px);
	color: #fff;
}

/* Listing fee shown under the hero CTA, so the price is visible before the
   customer starts the wizard rather than only at Step 5. */
.pat-price-note {
	font-size: 14px;
	color: var(--text-muted);
	margin: 14px auto 0;
	max-width: 460px;
	line-height: 1.55;
}
.pat-price-note strong {
	color: var(--text-primary);
	font-weight: 600;
}

/* ── How it works ── */
.pat-steps-wrap {
	max-width: 1000px;
	margin: 0 auto;
	padding: 24px 2rem 56px;
}
.pat-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 20px;
}
.pat-step {
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 24px 20px;
}
.pat-step-num {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 28px;
	font-weight: 500;
	color: var(--accent);
	opacity: .55;
	margin-bottom: 10px;
}
.pat-step h3 {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 6px;
}
.pat-step p {
	font-size: 13px;
	color: var(--text-muted);
	line-height: 1.55;
	margin: 0;
}

/* ── CTA card ── */
.pat-cta-section {
	max-width: 900px;
	margin: 0 auto;
	padding: 0 2rem 80px;
}
.pat-cta-card {
	background: var(--bg-active);
	border: 1px solid var(--border-focus);
	border-radius: 12px;
	padding: 40px 32px;
	text-align: center;
	position: relative;
	overflow: hidden;
}
.pat-cta-card::before {
	content: '';
	position: absolute;
	top: 0; left: 0; right: 0;
	height: 3px;
	background: linear-gradient(90deg, var(--accent) 0%, var(--primary) 100%);
}
.pat-cta-card h2 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 26px;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 10px;
	letter-spacing: -.01em;
}
.pat-cta-card h2 em {
	font-style: italic;
	color: var(--accent);
	font-weight: 400;
}
.pat-cta-card p {
	color: var(--text-muted);
	font-size: 15px;
	max-width: 480px;
	margin: 0 auto 24px;
}

@media (max-width: 900px) {
	.pat-steps { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 560px) {
	.pat-steps { grid-template-columns: 1fr; }
	.pat-hero { padding: 36px 1.25rem 28px; }
	.pat-cta-card { padding: 28px 20px; }
}

/* ── Dark mode ── */
body.dark-mode .pat-eyebrow {
	background: #0e0e11;
	border-color: rgba(255,255,255,.1);
}
body.dark-mode .pat-step {
	background: #0e0e11;
	border-color: rgba(255,255,255,.08);
}
body.dark-mode .pat-cta-card {
	background: rgba(0,102,204,.08);
	border-color: rgba(0,102,204,.3);
}

.tender-post-wizard {
	max-width: 640px;
	margin: 0 auto;
	padding: 24px 16px 64px;
}

.wizard-steps-nav {
	display: flex;
	justify-content: center;
	gap: 8px;
	margin-bottom: 24px;
}

.wizard-steps-nav .step-dot {
	width: 10px;
	height: 10px;
	border-radius: 50%;
	background: var(--border);
	display: inline-block;
}

.wizard-steps-nav .step-dot.active {
	background: var(--primary);
}

.reg-step label {
	display: block;
	margin-bottom: 16px;
	font-weight: 600;
	color: var(--text-primary);
}

.reg-step input[type="text"],
.reg-step input[type="email"],
.reg-step input[type="date"],
.reg-step select,
.reg-step textarea {
	display: block;
	width: 100%;
	margin-top: 4px;
	padding: 10px 12px;
	border: 1px solid var(--border);
	border-radius: 6px;
	font-weight: normal;
	background: var(--bg-input);
	color: var(--text-primary);
}

.reg-step textarea {
	min-height: 120px;
	resize: vertical;
}

/* ── Rich text (Quill) description control ── */
.tp-rich-editor {
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
}
.tp-rich-editor .tooltip-content {
	/* Bootstrap tooltip text node frappe.ui.form.make_control always renders
	   (base_control.js) -- only meant to show via a Bootstrap tooltip trigger
	   we never initialize standalone here, so it would otherwise sit as
	   stray visible text above the toolbar. */
	display: none;
}
.tp-rich-editor .ql-toolbar.ql-snow {
	border: none;
	border-bottom: 1px solid var(--border);
	background: var(--bg-input-alt);
}
.tp-rich-editor .ql-container.ql-snow {
	border: none;
	font-family: inherit;
	font-size: 14px;
}
.tp-rich-editor .ql-editor {
	min-height: 120px;
	color: var(--text-primary);
	background: var(--bg-input);
}
.tp-rich-editor .ql-editor.ql-blank::before {
	color: var(--text-secondary);
	font-style: normal;
}
.tp-rich-editor.error {
	border-color: #ef4444;
	box-shadow: 0 0 0 3px rgba(239,68,68,.1);
}

body.dark-mode .tp-rich-editor {
	border-color: rgba(255,255,255,0.1);
}
body.dark-mode .tp-rich-editor .ql-toolbar.ql-snow {
	border-bottom-color: rgba(255,255,255,0.1);
	background: #111114;
}
body.dark-mode .tp-rich-editor .ql-editor {
	background: #0e0e11;
	color: var(--text-primary);
}
body.dark-mode .tp-rich-editor .ql-snow .ql-stroke {
	stroke: var(--text-secondary);
}
body.dark-mode .tp-rich-editor .ql-snow .ql-picker {
	color: var(--text-secondary);
}

.wizard-next,
.wizard-prev,
#wizard-submit {
	padding: 10px 24px;
	border-radius: 6px;
	border: none;
	font-weight: 600;
	cursor: pointer;
}

.wizard-next,
#wizard-submit {
	background: var(--primary);
	color: #fff;
}

.wizard-prev {
	background: var(--bg-input-alt);
	color: var(--text-secondary);
	margin-right: 8px;
}

/* ── Telebirr payment QR ──────────────────────────────────────────────
   Sized to be scannable from a phone held at arm's length. The previous
   140px render was too small to focus reliably -- QR scanning degrades
   sharply once the modules fall below roughly 2px each, and a dense
   Telebirr payload at 140px is right at that edge. 260px is comfortable
   on desktop, and the min() keeps it inside narrow viewports. */
#payment-qr-wrap {
	text-align: center;
	margin-bottom: 1.25rem;
}
.payment-qr-hint {
	font-size: 12px !important;
	color: var(--text-muted) !important;
	margin: 0 0 8px;
}
#payment-qr {
	/* 520px: 260 was still too small to scan reliably in practice. This is
	   about as large as the wizard card allows (860px minus its padding),
	   and min() keeps it inside narrow viewports -- on a phone the code
	   fills nearly the full screen width, which is the easiest case to
	   scan from a second device. */
	width: min(520px, 88vw);
	height: auto;
	aspect-ratio: 1 / 1;
	display: block;
	margin: 0 auto;
	/* White plate + quiet-zone padding: scanners need the light margin
	   around the code, and a dark-mode page background behind a
	   transparent PNG would otherwise invert it and break detection. */
	background: #fff;
	padding: 20px;
	border: 1px solid var(--border);
	border-radius: 12px;
	object-fit: contain;
	/* Keep the modules crisp when the browser scales the source image --
	   smoothing blurs module edges and costs scan reliability. */
	image-rendering: pixelated;
}

.wizard-error {
	color: var(--error);
	font-weight: 600;
	margin-bottom: 12px;
}

/* ── My BIDs page ── */
.mb-page {
	max-width: 860px;
	margin: 0 auto;
	padding: 44px 2rem 64px;
}
.mb-header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 32px;
	flex-wrap: wrap;
}
.mb-header h1 {
	font-family: 'Fraunces', Georgia, serif;
	font-size: 30px;
	font-weight: 500;
	color: var(--text-primary);
	margin-bottom: 4px;
}
.mb-header p {
	color: var(--text-muted);
	font-size: 14px;
	margin: 0;
}
.mb-new-btn {
	white-space: nowrap;
	padding: 11px 20px;
	font-size: 14px;
}

.mb-empty {
	text-align: center;
	padding: 64px 2rem;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 12px;
}
.mb-empty svg {
	width: 48px;
	height: 48px;
	stroke: var(--text-muted);
	opacity: .5;
	margin-bottom: 16px;
}
.mb-empty h2 {
	font-size: 18px;
	font-weight: 600;
	color: var(--text-primary);
	margin-bottom: 6px;
}
.mb-empty p {
	color: var(--text-muted);
	font-size: 14px;
	margin-bottom: 24px;
}

.mb-list {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.mb-card {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	background: var(--bg-card);
	border: 1px solid var(--border);
	border-radius: 12px;
	padding: 18px 20px;
	transition: border-color .15s, box-shadow .15s;
}
.mb-card:hover {
	border-color: var(--border-focus);
	box-shadow: 0 2px 10px rgba(0,0,0,.05);
}
.mb-card-main { min-width: 0; flex: 1; }
.mb-card-title-row {
	display: flex;
	align-items: center;
	gap: 8px;
	margin-bottom: 8px;
}
.mb-card-title {
	font-size: 15px;
	font-weight: 600;
	color: var(--text-primary);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.mb-card-meta {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
}
.mb-status-pill {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .03em;
	padding: 3px 10px;
	border-radius: 100px;
	color: #fff;
}
.mb-status-pill.status-approved { background: #10b981; }
.mb-status-pill.status-submitted { background: #f59e0b; }
.mb-status-pill.status-declined { background: #ef4444; }
.mb-status-pill.status-draft { background: #3b82f6; }
.mb-meta-item {
	font-size: 13px;
	color: var(--text-muted);
}
.mb-continue-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	font-size: 13px;
	font-weight: 600;
	color: var(--primary);
	text-decoration: none;
	flex-shrink: 0;
}
.mb-continue-link svg { width: 12px; height: 12px; }
.mb-continue-link:hover { color: var(--primary-hover); }

@media (max-width: 560px) {
	.mb-page { padding: 28px 1.25rem 48px; }
	.mb-card { flex-direction: column; align-items: flex-start; }
}

/* ── Dark mode overrides ── */
body.dark-mode .mb-empty,
body.dark-mode .mb-card {
	background: #0e0e11;
	border-color: rgba(255,255,255,.08);
}

body.dark-mode .wizard-steps-nav .step-dot {
	background: #0e0e11;
	border: 1px solid rgba(255,255,255,0.12);
}

body.dark-mode .wizard-steps-nav .step-dot.active {
	background: var(--primary);
	border-color: var(--primary);
}

body.dark-mode .reg-step input[type="text"],
body.dark-mode .reg-step input[type="email"],
body.dark-mode .reg-step input[type="date"],
body.dark-mode .reg-step select,
body.dark-mode .reg-step textarea {
	background: #0e0e11;
	border-color: rgba(255,255,255,0.1);
	color: var(--text-primary) !important;
}

body.dark-mode .reg-step input:focus,
body.dark-mode .reg-step select:focus,
body.dark-mode .reg-step textarea:focus {
	background: #111114;
	border-color: var(--accent);
}

body.dark-mode .wizard-prev {
	background: #111114;
	border: 1px solid rgba(255,255,255,0.12);
	color: var(--text-secondary) !important;
}

body.dark-mode .wizard-prev:hover {
	border-color: var(--accent);
	color: var(--accent-light) !important;
}

/* ── Single-column wizard ──────────────────────────────────────────────
   The post-a-tender wizard drops register.css's right-hand marketing panel
   so the description editor gets the full width -- a rich-text field in a
   half-width column is cramped for the multi-paragraph specs buyers write.

   Scoped to #tender-post-wizard rather than edited in register.css: that
   file is shared with /directory/register and /tenders/subscribe, which
   both still render .reg-right and would collapse to a dead empty column.  */
#tender-post-wizard.reg-body {
	grid-template-columns: 1fr;
}

#tender-post-wizard .reg-left {
	/* No adjacent panel to divide from, so the divider border goes. */
	border-right: none;
	/* Rounded card floating on --bg-page rather than a full-bleed white slab. */
	max-width: 860px;
	width: 100%;
	margin: 1.5rem auto 2.5rem;
	border: 1px solid var(--border);
	border-radius: 16px;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .04);
	/* The card is the scroll container's child now, not a full-height column;
	   overflow-y:auto would give it its own inner scrollbar. */
	overflow: visible;
	transition: max-width .2s ease;
}

/* register.css paints a 4px accent gradient down the left edge of .reg-left.
   That reads as a spine on a full-height two-column layout, but as a stray
   vertical line on a centred rounded card -- and it would also punch through
   the rounded corners. */
#tender-post-wizard .reg-left::before {
	display: none;
}

/* Wide mode: lets the customer stretch the card when writing a long spec.
   Toggled by the button below the description field (tender-post.js). */
#tender-post-wizard.tp-wide .reg-left {
	max-width: 1400px;
}

/* The description editor is the reason for the extra width, so give it real
   height too -- .ql-editor is the scrolling area Quill actually grows, not
   the .tp-rich-editor wrapper. */
#tender-post-wizard .tp-rich-editor .ql-editor {
	min-height: 260px;
}

#tender-post-wizard.tp-wide .tp-rich-editor .ql-editor {
	min-height: 420px;
}

/* ── Full-width toggle ── */
.tp-width-toggle {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: .5rem;
	padding: 5px 12px;
	background: none;
	border: 1px solid var(--border);
	border-radius: 8px;
	cursor: pointer;
	font-family: inherit;
	font-size: 12px !important;
	color: var(--text-muted) !important;
	transition: border-color .15s, color .15s;
}
.tp-width-toggle:hover {
	border-color: var(--accent);
	color: var(--accent) !important;
}
.tp-width-toggle svg {
	width: 13px;
	height: 13px;
	stroke: currentColor;
	fill: none;
	stroke-width: 1.6;
}

@media (max-width: 900px) {
	/* Edge-to-edge on small screens: side margins plus a border would eat
	   width the form needs more than it needs a floating card. */
	#tender-post-wizard .reg-left {
		margin: 0;
		border: none;
		border-radius: 0;
		box-shadow: none;
	}
	#tender-post-wizard .tp-width-toggle {
		/* The card already spans the viewport; there is nothing to widen. */
		display: none;
	}
}

/* bd_mob_nav is position:fixed at bottom:0 from 768px down, so it floats over
   the page and swallows whatever sits at the end of the form -- which here is
   the Continue / Back / Submit row. Reserve its height (~46px of icon+label,
   plus its own 6px padding) plus the iOS home-indicator inset, so the buttons
   always clear it.

   The padding goes on .reg-left, and .reg-step gets the same treatment because
   register.css gives the active step `overflow-y: auto` -- it is its own scroll
   container, so padding on the ancestor alone would not move the last row out
   from under the nav when the step scrolls internally. */
@media (max-width: 768px) {
	#tender-post-wizard .reg-left {
		padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
	}
	#tender-post-wizard .reg-step {
		padding-bottom: calc(24px + env(safe-area-inset-bottom, 0px));
	}
	#tender-post-wizard .reg-actions {
		/* Keeps the row off the reserved strip when the step is short enough
		   not to scroll at all. */
		margin-bottom: 8px;
	}
}

body.dark-mode #tender-post-wizard .reg-left {
	border-color: rgba(255, 255, 255, .07);
	box-shadow: none;
}

/* register.css leaves .reg-steps with no bottom margin and relies on
   .reg-step-title's margin-top for clearance -- but the label sits above the
   title, so it collided with the step dots. Give the row real separation and
   drop the now-redundant title offset. */
#tender-post-wizard .reg-steps {
	margin-bottom: 1.75rem;
}
#tender-post-wizard .reg-step-title {
	margin-top: 0;
}
/* --accent-light is a pale background tint (#D1F3D1); as label text on white
   it is effectively unreadable. --text-muted is the intended label colour. */
#tender-post-wizard .reg-step-label {
	color: var(--text-muted) !important;
}