/*
 * PharmacyWire (theme override): ReOrder component styling
 * Removes width restrictions to allow drug cards to use maximum available width
 */

/* One prescription per row, each card full width. Prescriptions stack rather
 * than sitting side by side, so an open card already has the whole width for its
 * refill options and nothing has to reflow around it. */
.pwReOrderComponent .rx-results-outer-container .rx-results {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1.5rem;
	width: 100%;
	max-width: 100%;
}

@media (min-width: 768px) {
	.pwReOrderComponent .rx-results-outer-container .rx-results {
		gap: 2rem;
	}
}

@media (min-width: 1200px) {
	.pwReOrderComponent .rx-results-outer-container .rx-results {
		gap: 2.5rem;
	}
}

/* Ensure rx-item containers don't restrict width */
.pwReOrderComponent .rx-item {
	width: 100%;
	max-width: 100%;
	min-width: 0;
}

/* Refill options panel. Padding lives on the inner wrapper so the outer element
 * can animate from height 0 without padding leaving a visible sliver. */
.pwReOrderComponent .rx-item .rx-on-file .refill-options {
	width: 100%;
	max-width: 100%;
	padding: 0;
}

.pwReOrderComponent .refill-options-inner {
	padding: 0.5rem 1rem 1rem;
}

/* Ensure drug cards within refill options can expand */
.pwReOrderComponent .refill-options .pw-reorder-line-items {
	width: 100%;
	max-width: 100%;
}

/* Remove any max-width constraints on the outer container */
.pwReOrderComponent .rx-results-outer-container {
	width: 100%;
	max-width: 100%;
}

/* Ensure fieldset doesn't restrict width.
 * min-inline-size matters here: a fieldset defaults to min-content and will not
 * shrink below it, so in the multi column grid above a prescription card would
 * spill sideways over the card next to it. */
.pwReOrderComponent .rx-on-file {
	width: 100%;
	max-width: 100%;
	min-width: 0;
	min-inline-size: 0;
}

/* Let the contents shrink with the card instead of forcing it wider */
.pwReOrderComponent .rx-item > fieldset,
.pwReOrderComponent .refill-options,
.pwReOrderComponent .refill-options .last-ordered,
.pwReOrderComponent .refill-options .available-alternatives,
.pwReOrderComponent .pw-reorder-line-item-card,
.pwReOrderComponent .pw-reorder-card-content,
.pwReOrderComponent .pw-reorder-details,
.pwReOrderComponent .pw-reorder-detail-row,
.pwReOrderComponent .pw-reorder-select-wrapper {
	min-width: 0;
	min-inline-size: 0;
}

.pwReOrderComponent .pw-reorder-select {
	max-width: 100%;
}

/* Long manufacturer and product names should wrap rather than widen the card */
.pwReOrderComponent .pw-reorder-product-name,
.pwReOrderComponent .pw-reorder-value,
.pwReOrderComponent .pw-reorder-meta-value,
.pwReOrderComponent .drug-name,
.pwReOrderComponent .drug-ingredients {
	overflow-wrap: anywhere;
}

/* Loading state */
.pwReOrderComponent .pw-reorder-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.75rem;
	padding: 2.5rem 1rem;
	color: #4a5568;
	font-size: 0.9375rem;
}

.pwReOrderComponent .pw-reorder-spinner {
	width: 34px;
	height: 34px;
	border: 3px solid #dbe3ea;
	border-top-color: #0b4a6f;
	border-radius: 50%;
	animation: pw-reorder-spin 0.8s linear infinite;
}

@keyframes pw-reorder-spin {
	to { transform: rotate(360deg); }
}

.pwReOrderComponent .pw-reorder-loading-slow {
	max-width: 34rem;
	margin-top: 0.25rem;
	padding: 0.875rem 1rem;
	border: 1px solid #fde68a;
	border-radius: 8px;
	background: #fffbeb;
	color: #78350f;
	text-align: center;
	font-size: 0.875rem;
	line-height: 1.55;
}

.pwReOrderComponent .pw-reorder-loading-slow p {
	margin: 0 0 0.5rem;
}

.pwReOrderComponent .pw-reorder-loading-slow p:last-child {
	margin-bottom: 0;
}

.pwReOrderComponent .pw-reorder-loading-slow a {
	color: #92400e;
	font-weight: 600;
	text-decoration: underline;
	white-space: nowrap;
}

.pwReOrderComponent .pw-reorder-skeleton {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
	width: 100%;
	margin-top: 1rem;
}

/* Skeleton mirrors the real layout: one full width card per prescription */

.pwReOrderComponent .pw-reorder-skeleton-card {
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	padding: 1.25rem;
	background: #ffffff;
	min-width: 0;
}

.pwReOrderComponent .pw-reorder-skeleton-line {
	display: block;
	height: 12px;
	border-radius: 6px;
	margin-bottom: 0.75rem;
	background: linear-gradient(90deg, #eef1f5 25%, #e2e8f0 37%, #eef1f5 63%);
	background-size: 400% 100%;
	animation: pw-reorder-shimmer 1.4s ease infinite;
}

.pwReOrderComponent .pw-reorder-skeleton-title {
	height: 18px;
	width: 55%;
}

.pwReOrderComponent .pw-reorder-skeleton-short {
	width: 40%;
	margin-bottom: 0;
}

@keyframes pw-reorder-shimmer {
	0% { background-position: 100% 50%; }
	100% { background-position: 0 50%; }
}

@media (prefers-reduced-motion: reduce) {
	.pwReOrderComponent .pw-reorder-spinner,
	.pwReOrderComponent .pw-reorder-skeleton-line {
		animation: none;
	}
}

/* Per prescription refill options loading */
.pwReOrderComponent .pw-reorder-inline-loading {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	padding: 1rem 0;
	color: #4a5568;
	font-size: 0.875rem;
}

.pwReOrderComponent .pw-reorder-spinner-small {
	width: 18px;
	height: 18px;
	border-width: 2px;
}

/* Load failure state */
.pwReOrderComponent .pw-reorder-load-error .rx-content {
	padding: 1.25rem;
}

.pwReOrderComponent .pw-reorder-error-link {
	margin-left: 1rem;
	color: #0b4a6f;
	text-decoration: underline;
}

/* Prescription card header styling */
.pwReOrderComponent .rx-header {
	padding: 1.25rem 1.25rem 0.875rem 1.25rem;
	border-bottom: 1px solid #ddd;
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 1rem;
	background: #fafbfc;

	.drug-heading {
		flex: 1;
		min-width: 0;

		.drug-name {
			margin: 0 0 0.375rem 0;
			font-size: 1.125rem;
			font-weight: 600;
			color: #1a202c;
			line-height: 1.4;

			i.fa {
				color: #718096;
				margin-right: 0.5rem;
				opacity: 0.8;
			}
		}

		.drug-ingredients {
			font-size: 0.875rem;
			color: #718096;
			font-weight: 400;
			margin: 0;

			b {
				color: #4a5568;
				font-weight: 500;
			}
		}
	}

	.rx-controls {
		flex-shrink: 0;

		.rx-refill-button {
			background: #ff6b35;
			border: 1px solid #ff6b35;
			color: #ffffff;
			padding: 0.625rem 1rem;
			border-radius: 4px;
			font-weight: 500;
			font-size: 0.8125rem;
			transition: background-color 0.15s ease;
			cursor: pointer;

			&:hover {
				background: #ff6b35;
				border-color: #ff6b35;
			}

			&:focus {
				outline: none;
				box-shadow: 0 0 0 2px rgba(43, 108, 176, 0.3);
			}
		}
	}
}

/* Prescription content styling */
.pwReOrderComponent .rx-content:not(.rx-instructions) {
	padding: 1rem 1.25rem;
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;

	.rx-info {
		flex: 1;
		min-width: 180px;
		margin-bottom: 0.5rem;

		.rx-label {
			font-weight: 500;
			color: #4a5568;
			font-size: 0.8125rem;
			margin-bottom: 0.25rem;
			display: block;
		}

		.rx-detail {
			font-weight: 400;
			color: #2d3748;
			font-size: 0.9375rem;
			line-height: 1.4;
		}
	}

	.rx-expired .rx-detail {
		color: #c53030;
	}

	.rx-active .rx-detail {
		color: #38a169;
	}
}

/* Prescription instructions styling */
.pwReOrderComponent .rx-instructions {
	margin: 0.875rem 1.25rem;
	padding: 0.875rem;
	background: #f7fafc;
	border-radius: 6px;
	border-left: 2px solid #3182ce;
	border: 1px solid #e2e8f0;

	p {
		margin: 0;
		font-size: 0.875rem;
		line-height: 1.5;
		color: #4a5568;
		font-weight: 400;

		i.fa {
			color: #3182ce;
			margin-right: 0.5rem;
			opacity: 0.9;
		}
	}
}

/* Prescription footer styling */
.pwReOrderComponent .rx-footer {
	border-top: 1px solid #e2e8f0;
	padding: 0.875rem 1.25rem;
	margin: 0 1.25rem;
	background: #fdfdfe;

	.no-fill-remaining {
		font-size: 0.8125rem;
		color: #c53030;
		font-weight: 400;
		line-height: 1.5;
		margin: 0;

		.note {
			font-style: italic;
			color: #9b2c2c;
			opacity: 0.9;
		}
	}
}