/*
 * peptilab/coa-button — frontend styles.
 *
 * 1. The "View COA" button, sized/placed like the card Add-to-Cart button.
 * 2. The shared report modal shell (mirrors assets/css/single-product.css
 *    `.pl-report-modal*`, which is only loaded on product pages — so we
 *    re-declare it here for the catalog page).
 * 3. The multi-report grid shown inside the modal.
 */

/* ============================================================
   1. Button — bottom of the card body, full-width accent pill
   ============================================================ */
.pl-coa {
	margin-top: auto;
	padding:    0 24px 24px;
	width:      100%;
	box-sizing: border-box;
}

.pl-coa-btn {
	display:         block;
	width:           100%;
	padding:         13px;
	background:      var(--pl-accent, #537FF4);
	color:           #fff;
	text-align:      center;
	border:          none;
	border-radius:   var(--pl-border-radius, 50px);
	font-family:     var(--pl-font-body, Inter, sans-serif);
	font-size:       16px;
	line-height:     1.63;
	font-weight:     600;
	text-decoration: none;
	cursor:          pointer;
	box-sizing:      border-box;
	transition:      background var(--pl-transition, .2s ease),
	                 box-shadow var(--pl-transition, .2s ease),
	                 transform var(--pl-transition-fast, .1s ease);
}

.pl-coa-btn:hover {
	background: var(--pl-accent-dark, #3560D3);
	box-shadow: var(--pl-shadow-card-atc, 0 4px 14px rgba(83, 127, 244, 0.25));
	transform:  translateY(-1px);
}

.pl-coa-btn--empty {
	background: #E7EAEF;
	color:      #8A94A6;
	cursor:     not-allowed;
}

.pl-coa-btn--empty:hover {
	background: #E7EAEF;
	box-shadow: none;
	transform:  none;
}

/* ============================================================
   2. Report modal (same shell + classes as the single product page)
   ============================================================ */
.pl-report-modal {
	position:        fixed;
	inset:           0;
	z-index:         9999;
	display:         none;
	align-items:     center;
	justify-content: center;
	padding:         20px;
}

.pl-report-modal.is-open {
	display: flex;
}

.pl-report-modal__backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, 0.6);
}

.pl-report-modal__dialog {
	position:       relative;
	z-index:        1;
	width:          min(95vw, 1200px);
	height:         92vh;
	max-height:     92vh;
	padding:        0;
	background:     #fff;
	box-shadow:     0 14px 40px rgba(0, 0, 0, 0.24);
	display:        flex;
	flex-direction: column;
}

.pl-report-modal__close {
	position:      absolute;
	top:           8px;
	right:         10px;
	width:         32px;
	height:        32px;
	border:        0;
	border-radius: 50%;
	background:    #eef1f5;
	color:         #1a1a1a;
	font-size:     24px;
	line-height:   1;
	cursor:        pointer;
	z-index:       2;
}

.pl-report-modal__body {
	display:        flex;
	flex-direction: column;
	gap:            12px;
	flex:           1 1 auto;
	min-height:     0;
	max-height:     100%;
	padding:        48px 24px 24px;
	box-sizing:     border-box;
}

.pl-report-modal__thumb {
	flex:            1 1 auto;
	min-height:      0;
	display:         flex;
	align-items:     center;
	justify-content: center;
	background:      #f5f6f8;
	border-radius:   8px;
	padding:         24px;
	overflow:        hidden;
}

.pl-report-modal__thumb img {
	max-width:    100%;
	max-height:   100%;
	width:        auto;
	height:       auto;
	object-fit:   contain;
	box-shadow:   0 4px 20px rgba(0, 0, 0, 0.12);
	border-radius: 4px;
	display:      block;
}

.pl-report-modal__view-full {
	flex-shrink:     0;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	align-self:      center;
	min-width:       220px;
	padding:         14px 32px;
	background:      var(--pl-accent, #537FF4);
	color:           #fff !important;
	font-size:       15px;
	font-weight:     600;
	text-decoration: none !important;
	border-radius:   999px;
	transition:      background .15s ease, transform .15s ease;
}

.pl-report-modal__view-full:hover {
	background: var(--pl-accent-dark, #3560D3);
	color:      #fff !important;
}

.pl-report-modal__view-full:active {
	transform: scale(0.98);
}

/* Lock background scroll while the modal is open. */
body.pl-report-modal-open {
	overflow: hidden;
}

/* ============================================================
   3. Multi-report grid (when a product has >1 lab report)
   ============================================================ */
.pl-coa-modal-grid {
	flex:                  1 1 auto;
	min-height:            0;
	overflow-y:            auto;
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
	gap:                   16px;
	align-content:         start;
}

.pl-coa-modal-grid__item {
	position:        relative;
	display:         flex;
	align-items:     center;
	justify-content: center;
	aspect-ratio:    3 / 4;
	background:      #f5f6f8;
	border:          1px solid #E7EAEF;
	border-radius:   8px;
	overflow:        hidden;
	text-decoration: none;
	color:           #1a1a1a;
	transition:      border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.pl-coa-modal-grid__item:hover {
	border-color: var(--pl-accent, #537FF4);
	box-shadow:   0 8px 24px rgba(26, 26, 26, 0.1);
	transform:    translateY(-2px);
}

.pl-coa-modal-grid__item img {
	width:      100%;
	height:     100%;
	object-fit: cover;
	display:    block;
}

.pl-coa-modal-grid__name {
	padding:     16px;
	font-family: var(--pl-font-body, Inter, sans-serif);
	font-size:   14px;
	font-weight: 500;
	text-align:  center;
	word-break:  break-word;
}

.pl-coa-modal-grid__badge {
	position:      absolute;
	top:           8px;
	right:         8px;
	padding:       2px 8px;
	background:    var(--pl-accent, #537FF4);
	color:         #fff;
	font-family:   var(--pl-font-body, Inter, sans-serif);
	font-size:     11px;
	font-weight:   700;
	border-radius: 4px;
	letter-spacing: .04em;
}

/* ── Slider (>2 reports): 2 per view + arrows ── */
.pl-coa-modal-slider {
	flex:        1 1 auto;
	min-height:  0;
	display:     flex;
	align-items: center;
	gap:         12px;
}

.pl-coa-modal-slider__track {
	flex:             1 1 auto;
	min-width:        0;
	height:           100%;
	display:          flex;
	gap:              16px;
	overflow-x:       auto;
	overflow-y:       hidden;
	scroll-snap-type: x mandatory;
	scrollbar-width:  none;
	-ms-overflow-style: none;
}

.pl-coa-modal-slider__track::-webkit-scrollbar {
	display: none;
}

/* A slide — full width (one per view); inner layout matches the
   single-report view: pl-report-modal__thumb fills, pl-report-modal__view-full
   button below. Those classes are styled in the modal section above. */
.pl-coa-modal-slide {
	flex:              0 0 100%;
	width:             100%;
	height:            100%;
	min-height:        0;
	scroll-snap-align: start;
	display:           flex;
	flex-direction:    column;
	gap:               12px;
}

/* No-image fallback: centre the filename in the thumb area. */
.pl-coa-modal-slide__name {
	font-family: var(--pl-font-body, Inter, sans-serif);
	font-size:   16px;
	font-weight: 500;
	color:       #1a1a1a;
	text-align:  center;
	word-break:  break-word;
}

.pl-coa-modal-slider__nav {
	flex:            0 0 auto;
	width:           44px;
	height:          44px;
	display:         flex;
	align-items:     center;
	justify-content: center;
	border:          1px solid #E7EAEF;
	border-radius:   50%;
	background:      #fff;
	color:           #1a1a1a;
	font-size:       24px;
	line-height:     1;
	cursor:          pointer;
	transition:      background .15s ease, border-color .15s ease, opacity .15s ease;
}

.pl-coa-modal-slider__nav:hover:not(:disabled) {
	border-color: var(--pl-accent, #537FF4);
	background:    #f5f7ff;
}

.pl-coa-modal-slider__nav:disabled {
	opacity: .4;
	cursor:  default;
}

@media (max-width: 600px) {
	.pl-report-modal__dialog {
		height:     94vh;
		max-height: 94vh;
	}
	.pl-report-modal__body {
		padding: 44px 16px 16px;
	}
	.pl-coa-modal-grid {
		grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
	}
	.pl-coa-modal-slider__nav {
		width:  36px;
		height: 36px;
		font-size: 20px;
	}
}