/*
 * ARB Customer Booking Widget — v2 styles.
 *
 * Tablein-inspired clean design: white card on light grey,
 * red/orange accent color for primary actions, generous
 * spacing, professional typography. Stays self-contained
 * (.arb-v2 prefix on everything) so it won't bleed into
 * a host theme's other elements.
 */

.arb-v2-widget {
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	color: #1f2937;
	/* Widened from 480→560 so steps 2-4 (time slots, contact
	   form, success) read as squares rather than tall portraits.
	   At 560px wide and ~520px min-height the card sits very
	   close to a 1:1 ratio on every step. */
	max-width: 560px;
	margin: 0 auto;
}

.arb-v2-loading {
	padding: 40px 20px;
	text-align: center;
	color: #94a3b8;
	font-size: 14px;
}

.arb-v2 {
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

/* ─── Header (restaurant name + step icons) ─────────────── */

.arb-v2-header {
	padding: 20px 24px 16px;
	background: #f9fafb;
	border-bottom: 1px solid #e5e7eb;
}
.arb-v2-title {
	margin: 0 0 12px 0;
	font-size: 18px;
	font-weight: 600;
	color: #111827;
}
.arb-v2-steps {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 8px;
}
.arb-v2-step {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px;
	background: #e5e7eb;
	border-radius: 8px;
	color: #9ca3af;
	transition: all .15s ease;
	cursor: default;
}
.arb-v2-step.is-active {
	background: #fff;
	color: #ef4444;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.arb-v2-step.is-done {
	color: #ef4444;
}
/* Clickable completed steps render as <button> instead of <div>.
   Reset the browser's default button styling so they visually
   match the non-clickable div siblings — they should ONLY differ
   in cursor and hover behavior, not in background/padding/font. */
.arb-v2-step.is-clickable {
	border: none;
	font: inherit;
	cursor: pointer;
}
@media (hover: hover) and (pointer: fine) {
	.arb-v2-step.is-clickable:hover {
		background: #f3f4f6;
		color: #dc2626;
	}
}
.arb-v2-step.is-clickable:focus-visible {
	outline: 2px solid #fca5a5;
	outline-offset: 2px;
}
.arb-v2-step-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.arb-v2-step-icon svg {
	width: 20px;
	height: 20px;
}

/* ─── Body ──────────────────────────────────────────────── */

.arb-v2-body {
	padding: 20px 24px;
	/* Content-aware height. Previously this had a flat
	   min-height: 520px which made step 1 (calendar — naturally
	   tall) look great but left a 100-150px dead white-space gap
	   under step 2's time grid, step 3's contact form, and step 4's
	   success message. With the floor lowered, step 1 still renders
	   at its natural calendar-driven height, step 2 grows or shrinks
	   based on how many slots a restaurant exposes, and steps 3-4
	   sit tight against their content. The remaining 320px floor
	   keeps step 4 from collapsing to a thumbnail when it's just a
	   one-line success message. */
	min-height: 320px;
}
/* On step 2 specifically, give the time grid room to breathe and
   let it grow vertically without any internal scrolling — a busy
   shift with 30+ slots should expand the widget downward, not
   force the customer into a nested scroll context. The footer
   stays anchored at the widget bottom because the widget itself
   is a flex column. */
.arb-v2-body .arb-v2-slot-grid {
	/* Auto-rows naturally accommodate however many slots the
	   restaurant publishes; no max-height clipping. */
	grid-auto-rows: minmax(44px, auto);
}
.arb-v2-section {
	display: flex;
	flex-direction: column;
	gap: 18px;
}
.arb-v2-section-title {
	margin: 0;
	font-size: 14px;
	font-weight: 600;
	color: #6b7280;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}
.arb-v2-label {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	margin: 0;
}
.arb-v2-label svg {
	width: 18px;
	height: 18px;
	color: #6b7280;
}

/* ─── Area selector ─────────────────────────────────────── */

.arb-v2-area-wrap {
	position: relative;
}
.arb-v2-area-btn {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 12px 14px;
	background: #fff;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	font-size: 14px;
	color: #6b7280;
	cursor: pointer;
	transition: border-color .15s ease;
	font-family: inherit;
}
.arb-v2-area-btn:hover { border-color: #9ca3af; }
.arb-v2-area-label {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}
.arb-v2-area-chev {
	display: inline-flex;
	color: #9ca3af;
}
.arb-v2-area-popup {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	right: 0;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 10px;
	box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
	z-index: 1000;
	max-height: 280px;
	overflow-y: auto;
}
.arb-v2-area-opt {
	display: block;
	width: 100%;
	text-align: left;
	padding: 11px 16px;
	background: transparent;
	border: none;
	font-size: 14px;
	color: #374151;
	cursor: pointer;
	font-family: inherit;
	transition: background .12s ease;
}
.arb-v2-area-opt:hover { background: #f3f4f6; }
.arb-v2-area-opt.is-selected {
	color: #ef4444;
	font-weight: 600;
}

/* ─── Party-size pills ──────────────────────────────────── */

.arb-v2-party-grid {
	display: grid;
	grid-template-columns: repeat(8, 1fr);
	gap: 6px;
}
.arb-v2-party-btn {
	padding: 10px 0;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	transition: all .12s ease;
	font-family: inherit;
}
/* Hover styles only fire when the user actually has a hover-capable
   input device (mouse/trackpad). On touchscreens, :hover styles
   "stick" after a tap until the user taps somewhere else — which
   left the previously-tapped pill looking selected even after the
   user picked a different one. Gating with hover:hover prevents
   that touch-sticky state entirely.

   We also explicitly exclude :active/:focus cases so a freshly
   selected pill doesn't pick up the hover background and override
   the dark "selected" look. */
@media (hover: hover) and (pointer: fine) {
	.arb-v2-party-btn:hover:not(.is-active) {
		border-color: #d1d5db;
		background: #f9fafb;
	}
}
.arb-v2-party-btn.is-active {
	background: #1f2937;
	color: #fff;
	border-color: #1f2937;
}
.arb-v2-party-more {
	color: #6b7280;
}

/* ─── Calendar ──────────────────────────────────────────── */

.arb-v2-calendar {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.arb-v2-cal-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
}
.arb-v2-cal-arrow {
	background: transparent;
	border: none;
	padding: 4px 8px;
	cursor: pointer;
	color: #6b7280;
	border-radius: 6px;
	transition: background .12s ease;
	display: inline-flex;
	align-items: center;
}
.arb-v2-cal-arrow:hover { background: #f3f4f6; }
.arb-v2-cal-title {
	min-width: 140px;
	text-align: center;
	text-transform: capitalize;
	font-weight: 500;
}
.arb-v2-cal-week {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 2px;
}
.arb-v2-cal-weekday {
	text-align: center;
	font-size: 12px;
	font-weight: 600;
	color: #6b7280;
	padding: 8px 0 4px;
}
.arb-v2-cal-grid {
	display: grid;
	grid-template-columns: repeat(7, 1fr);
	gap: 4px;
}
.arb-v2-cal-cell {
	aspect-ratio: 1 / 1;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 6px;
	font-size: 14px;
	font-weight: 500;
	color: #374151;
	cursor: pointer;
	transition: all .12s ease;
	font-family: inherit;
}
/* Same hover gating as party pills: only fire on devices with a
   real pointer, and never override the :is-selected/:is-disabled
   visual treatments. The combined :not() guards stop hover from
   "leaking" pink onto:
     - disabled past/future dates (no pointer/cursor)
     - the currently selected date (already red, hover would muddy it)
     - today's date (the red-border treatment must stay visible) */
@media (hover: hover) and (pointer: fine) {
	.arb-v2-cal-cell:not(.is-disabled):not(.is-selected):hover {
		border-color: #ef4444;
		background: #fef2f2;
	}
}
.arb-v2-cal-cell.is-empty {
	visibility: hidden;
	border: none;
}
.arb-v2-cal-cell.is-disabled {
	color: #d1d5db;
	background: #fff;
	cursor: default;
	border-color: #f3f4f6;
}
.arb-v2-cal-cell.is-today:not(.is-selected) {
	border-color: #ef4444;
	color: #ef4444;
	font-weight: 700;
}
.arb-v2-cal-cell.is-selected {
	background: #ef4444;
	color: #fff;
	border-color: #ef4444;
	font-weight: 700;
}

/* ─── Step 2: Time slots ────────────────────────────────── */

.arb-v2-summary {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	padding: 12px 14px;
	background: #f9fafb;
	border-radius: 10px;
	font-size: 13px;
}
.arb-v2-summary-item {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	color: #374151;
}
.arb-v2-summary-icon {
	display: inline-flex;
	color: #9ca3af;
}
.arb-v2-summary-icon svg {
	width: 16px;
	height: 16px;
}
.arb-v2-slot-grid {
	display: grid;
	/* 5 columns on desktop: a 5-hour shift with 15-min slots
	   (21 slots) wraps to a tidy 5-row block instead of the
	   tall 11-row strip the original 2-col layout produced.
	   Pairs nicely with the 560px widget shell. */
	grid-template-columns: repeat(5, 1fr);
	gap: 8px;
}
.arb-v2-slot {
	padding: 12px 0;
	background: #fff;
	border: 1px solid #e5e7eb;
	border-radius: 8px;
	font-size: 14px;
	font-weight: 600;
	color: #374151;
	cursor: pointer;
	transition: all .12s ease;
	font-family: inherit;
}
/* Slot hover only on hover-capable devices, and never on selected
   or disabled slots — same logic as party pills and calendar cells. */
@media (hover: hover) and (pointer: fine) {
	.arb-v2-slot:hover:not(.is-disabled):not(.is-selected) {
		border-color: #ef4444;
		color: #ef4444;
	}
}
.arb-v2-slot.is-selected {
	background: #ef4444;
	border-color: #ef4444;
	color: #fff;
}
.arb-v2-slot.is-disabled {
	color: #d1d5db;
	cursor: not-allowed;
	background: #f9fafb;
}
.arb-v2-loading-text,
.arb-v2-empty,
.arb-v2-error {
	padding: 24px 16px;
	text-align: center;
	color: #6b7280;
	font-size: 14px;
}
.arb-v2-empty-title {
	margin: 0 0 4px 0;
	color: #374151;
	font-weight: 600;
}
.arb-v2-empty-sub {
	margin: 0;
	color: #9ca3af;
	font-size: 13px;
}
.arb-v2-error {
	background: #fef2f2;
	border: 1px solid #fca5a5;
	color: #991b1b;
	border-radius: 8px;
	padding: 12px 14px;
	text-align: left;
}

/* ─── Step 3: Contact ───────────────────────────────────── */

.arb-v2-review {
	background: #f9fafb;
	border-radius: 10px;
	overflow: hidden;
}
.arb-v2-review-row {
	display: flex;
	justify-content: space-between;
	padding: 10px 14px;
	border-bottom: 1px solid #f3f4f6;
	font-size: 13px;
}
.arb-v2-review-row:last-child { border-bottom: none; }
.arb-v2-review-label {
	color: #6b7280;
	font-weight: 500;
}
.arb-v2-review-value {
	color: #111827;
	font-weight: 600;
}
.arb-v2-form {
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.arb-v2-field {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.arb-v2-field label {
	font-size: 13px;
	font-weight: 600;
	color: #374151;
}
.arb-v2-field input {
	padding: 11px 14px;
	font-size: 14px;
	font-family: inherit;
	border: 1px solid #d1d5db;
	border-radius: 10px;
	color: #111827;
	background: #fff;
	width: 100%;
	box-sizing: border-box;
	transition: border-color .12s ease, box-shadow .12s ease;
}
.arb-v2-field input:focus {
	outline: none;
	border-color: #ef4444;
	box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

/* ─── Step 4: Done ──────────────────────────────────────── */

.arb-v2-section-done {
	align-items: center;
	text-align: center;
	gap: 16px;
}
.arb-v2-done-icon {
	width: 80px;
	height: 80px;
	border-radius: 999px;
	background: #ecfdf5;
	color: #10b981;
	display: flex;
	align-items: center;
	justify-content: center;
}
.arb-v2-done-title {
	margin: 0;
	font-size: 22px;
	font-weight: 700;
	color: #065f46;
}
.arb-v2-done-sub {
	margin: 0;
	color: #6b7280;
	font-size: 14px;
}

/* ─── Footer ────────────────────────────────────────────── */

.arb-v2-footer {
	display: flex;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 24px;
	background: #fff;
	border-top: 1px solid #f3f4f6;
}
.arb-v2-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	padding: 12px 20px;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	font-family: inherit;
	cursor: pointer;
	border: none;
	transition: all .12s ease;
}
.arb-v2-btn-ghost {
	background: transparent;
	color: #6b7280;
}
.arb-v2-btn-ghost:hover:not(.is-disabled) {
	background: #f3f4f6;
	color: #111827;
}
.arb-v2-btn-primary {
	background: #ef4444;
	color: #fff;
	padding: 12px 28px;
}
.arb-v2-btn-primary:hover:not(.is-disabled):not(:disabled) {
	background: #dc2626;
}
.arb-v2-btn.is-disabled,
.arb-v2-btn:disabled {
	opacity: 0.5;
	cursor: not-allowed;
}

/* ─── Mobile ─────────────────────────────────────────────── */

@media (max-width: 500px) {
	.arb-v2-widget { max-width: 100%; }
	.arb-v2 { border-radius: 12px; }
	.arb-v2-header { padding: 16px 16px 12px; }
	.arb-v2-body { padding: 16px; }
	.arb-v2-footer { padding: 14px 16px; }
	.arb-v2-party-grid { grid-template-columns: repeat(6, 1fr); }
	.arb-v2-slot-grid { grid-template-columns: repeat(3, 1fr); }
	.arb-v2-cal-cell { font-size: 13px; }
}

/* ─── Touch-device hover reset ──────────────────────────────────
   Belt-and-suspenders: even if a :hover rule above wasn't wrapped
   in (hover: hover), this block neutralizes it on touch devices.
   Without this, tap-and-leave would leave a "stuck" hover state
   visible until the user tapped somewhere else. */
/* ─── Touch-device hover reset (booking widget) ────────────────
   On touch devices, :hover persists after a tap. Instead of
   setting properties back to `initial` (which evaluates to the
   browser's BUILT-IN <button> styling — that's where the pink/
   grey "system default" background was coming from), we set
   them to the same values these elements use in their resting
   state. That way a tap-and-release doesn't leave any visual
   mark at all on touch devices. */
@media (hover: none) {
	.arb-v2-area-btn:hover {
		background: #fff;
		border-color: #d1d5db;
		color: #6b7280;
	}
	.arb-v2-area-opt:hover {
		background: transparent;
		color: #374151;
	}
	.arb-v2-cal-arrow:hover {
		background: transparent;
	}
	.arb-v2-btn-ghost:hover,
	.arb-v2-btn-primary:hover {
		filter: none;
		transform: none;
	}
}

/* ─── Area dropdown — explicit hover gating ────────────────────
   Wrap the trigger button and option hovers in (hover: hover)
   so they only fire on mouse-capable devices. Without this,
   tapping an option on mobile left the option highlighted in
   grey until the user tapped somewhere else, looking like a
   second selected state alongside .is-selected. */
.arb-v2-area-btn {
	/* Explicit !important to beat any cascade override. The
	   button must always paint white at rest — only the border
	   color changes on hover. */
	background: #fff !important;
}
@media (hover: hover) and (pointer: fine) {
	.arb-v2-area-btn:hover {
		border-color: #9ca3af !important;
		background: #fff !important;
	}
	.arb-v2-area-opt:not(.is-selected):hover {
		background: #f3f4f6;
	}
}

/* ─── Definitive focus/active reset (v3.14.8) ─────────────────
   Same fix as admin.css: kill browser-default focus outlines
   and only show a visible ring on keyboard navigation. Stops
   touch and post-click stuck-hover states from leaving party
   pills, calendar cells, slots, and footer buttons looking
   half-selected after the user moved on. */
.arb-v2-step,
.arb-v2-party-btn,
.arb-v2-cal-cell,
.arb-v2-cal-arrow,
.arb-v2-area-btn,
.arb-v2-area-opt,
.arb-v2-slot,
.arb-v2-btn-ghost,
.arb-v2-btn-primary,
.arb-v2-btn {
	outline: none;
}
.arb-v2-step.is-clickable:focus-visible,
.arb-v2-party-btn:focus-visible,
.arb-v2-cal-cell:focus-visible,
.arb-v2-cal-nav-btn:focus-visible,
.arb-v2-area-btn:focus-visible,
.arb-v2-slot:focus-visible,
.arb-v2-btn-ghost:focus-visible,
.arb-v2-btn-primary:focus-visible {
	outline: 2px solid #1f2937;
	outline-offset: 2px;
}

/* Explicit non-active resting state — party pills should never
   show a "ghosted" appearance unless they have the .is-active
   class. Same defensive reset as the dashboard date pills. */
.arb-v2-party-btn:not(.is-active),
.arb-v2-party-btn:not(.is-active):focus,
.arb-v2-party-btn:not(.is-active):active {
	background: #fff;
	color: #374151;
	border-color: #e5e7eb;
	opacity: 1;
}
.arb-v2-cal-cell:not(.is-selected):not(.is-disabled),
.arb-v2-cal-cell:not(.is-selected):not(.is-disabled):focus,
.arb-v2-cal-cell:not(.is-selected):not(.is-disabled):active {
	background: #fff;
	color: #374151;
	opacity: 1;
}
.arb-v2-slot:not(.is-selected):not(.is-disabled),
.arb-v2-slot:not(.is-selected):not(.is-disabled):focus,
.arb-v2-slot:not(.is-selected):not(.is-disabled):active {
	background: #fff;
	color: #374151;
	border-color: #e5e7eb;
}

/* ─── Theme override protection (v3.14.10) ─────────────────────
   Some host themes apply aggressive button:hover styles, e.g.
   `button:hover { color: #fff; background: #888 }`, which beats
   any rule we wrote without !important and turns the dropdown
   trigger text invisible (white on white) and option labels
   unreadable (white on grey). Lock the critical colors with
   !important so theme rules cannot win the cascade. */
.arb-v2-area-btn,
.arb-v2-area-btn:hover,
.arb-v2-area-btn:focus,
.arb-v2-area-btn:active {
	color: #6b7280 !important;
	background: #fff !important;
}
.arb-v2-area-btn .arb-v2-area-label,
.arb-v2-area-btn:hover .arb-v2-area-label,
.arb-v2-area-btn:focus .arb-v2-area-label {
	color: #6b7280 !important;
}
.arb-v2-area-opt,
.arb-v2-area-opt:focus,
.arb-v2-area-opt:active {
	color: #374151 !important;
	background: transparent !important;
}
.arb-v2-area-opt.is-selected,
.arb-v2-area-opt.is-selected:hover,
.arb-v2-area-opt.is-selected:focus {
	color: #ef4444 !important;
	background: transparent !important;
}
@media (hover: hover) and (pointer: fine) {
	.arb-v2-area-opt:not(.is-selected):hover {
		color: #374151 !important;
		background: #f3f4f6 !important;
	}
}


/* ═══════════════════════════════════════════════════════════════
   MANAGE-BOOKING WIDGET
   Shares the .arb-v2 visual language from the customer booking
   widget so a guest going from "book" → "manage" feels at home.
   Adds chips, action buttons, status badges, and contact card
   on top of the same shell.
   ═══════════════════════════════════════════════════════════════ */

.arb-manage-host {
	display: block;
	width: 100%;
}

.arb-manage-v2 {
	max-width: 600px;
	margin: 0 auto;
}

.arb-manage-header {
	flex-direction: column;
	align-items: flex-start;
	gap: 6px;
}

.arb-manage-subtitle {
	margin: 0;
	font-size: 14px;
	color: #64748b;
	line-height: 1.5;
}

.arb-manage-body {
	min-height: 480px;
	display: flex;
	flex-direction: column;
	gap: 20px;
}

.arb-manage-section {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.arb-manage-section-title {
	margin: 0;
	font-size: 16px;
	font-weight: 700;
	color: #0f172a;
}

/* ─── Status badge ─────────────────────────────────────────── */

.arb-manage-status-row {
	display: flex;
	align-items: center;
	justify-content: flex-start;
}

.arb-manage-status {
	display: inline-flex;
	align-items: center;
	padding: 5px 12px;
	border-radius: 999px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	background: #e2e8f0;
	color: #1e293b;
}

.arb-manage-status-confirmed { background: #dbeafe; color: #1e40af; }
.arb-manage-status-pending   { background: #fef3c7; color: #92400e; }
.arb-manage-status-seated    { background: #d1fae5; color: #065f46; }
.arb-manage-status-completed { background: #ede9fe; color: #5b21b6; }
.arb-manage-status-no_show   { background: #fee2e2; color: #991b1b; }
.arb-manage-status-cancelled { background: #f1f5f9; color: #475569; }

/* ─── Chips (date / time / guests) ─────────────────────────── */

.arb-manage-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.arb-manage-chip {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 8px 14px;
	border-radius: 999px;
	background: #f1f5f9;
	font-size: 14px;
	color: #334155;
	font-weight: 600;
}

.arb-manage-chip svg {
	color: #64748b;
}

/* ─── Restaurant contact card ──────────────────────────────── */

.arb-manage-restaurant-card {
	padding: 16px 18px;
	background: #f8fafc;
	border: 1px solid #e2e8f0;
	border-radius: 12px;
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.arb-manage-rcard-title {
	margin: 0;
	font-size: 13px;
	font-weight: 700;
	color: #475569;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.arb-manage-contact-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
	gap: 12px;
}

.arb-manage-contact-item {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.arb-manage-contact-label {
	font-size: 11px;
	font-weight: 700;
	color: #94a3b8;
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

.arb-manage-contact-value {
	font-size: 14px;
	color: #0f172a;
	font-weight: 600;
	word-break: break-word;
}

a.arb-manage-contact-value {
	color: #1d4ed8;
	text-decoration: none;
}

a.arb-manage-contact-value:hover {
	text-decoration: underline;
}

/* ─── Action buttons ───────────────────────────────────────── */

.arb-manage-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 4px;
}

.arb-manage-actions .arb-v2-btn {
	flex: 1 1 auto;
	min-width: 140px;
	justify-content: center;
}

.arb-v2-btn-danger {
	background: #ef4444 !important;
	color: #fff !important;
}

.arb-v2-btn-danger:hover:not(:disabled) {
	background: #dc2626 !important;
}

.arb-v2-btn-ghost.arb-v2-btn-danger {
	background: transparent !important;
	color: #b91c1c !important;
	border: 1px solid #fecaca !important;
}

.arb-v2-btn-ghost.arb-v2-btn-danger:hover:not(:disabled) {
	background: #fef2f2 !important;
	color: #991b1b !important;
}

/* ─── Notice strips ────────────────────────────────────────── */

.arb-manage-notice {
	padding: 12px 14px;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	border: 1px solid transparent;
}

.arb-manage-notice-success {
	background: #ecfdf5;
	border-color: #a7f3d0;
	color: #065f46;
}

.arb-manage-notice-error {
	background: #fef2f2;
	border-color: #fecaca;
	color: #991b1b;
}

.arb-manage-notice-info {
	background: #eff6ff;
	border-color: #bfdbfe;
	color: #1e40af;
}

/* ─── Cancel confirmation ──────────────────────────────────── */

.arb-manage-confirm-msg {
	margin: 0;
	font-size: 15px;
	color: #475569;
	line-height: 1.5;
}

/* ─── Done screen ──────────────────────────────────────────── */

.arb-manage-done {
	align-items: center;
	text-align: center;
	gap: 16px;
	padding: 20px 0;
}

.arb-manage-done-icon {
	width: 72px;
	height: 72px;
	border-radius: 50%;
	background: #ecfdf5;
	color: #10b981;
	display: flex;
	align-items: center;
	justify-content: center;
}

.arb-manage-done .arb-manage-section-title,
.arb-manage-done-title {
	margin: 0;
	font-size: 20px;
	font-weight: 700;
	color: #0f172a;
}

.arb-manage-done .arb-manage-chips {
	justify-content: center;
}

/* When the done screen is for a cancellation, swap to red icon */
.arb-manage-section.arb-manage-done:has(.arb-manage-done-title:not(:empty)) {
	/* default green is correct for both cases; cancel uses an X icon */
}

/* Optional: tweak icon background for cancel state via a modifier
   if we want it to look red instead. Keeping it simple and uniform
   is acceptable too. */

.arb-manage-cannot-modify {
	margin: 0;
	padding: 14px 16px;
	background: #f1f5f9;
	border-radius: 10px;
	font-size: 14px;
	color: #475569;
	text-align: center;
}

/* ─── Mobile tweaks ────────────────────────────────────────── */

@media (max-width: 480px) {
	.arb-manage-v2 {
		max-width: 100%;
	}
	.arb-manage-actions .arb-v2-btn {
		flex: 1 1 100%;
		min-width: 0;
	}
	.arb-manage-contact-grid {
		grid-template-columns: 1fr;
	}
}