/**
 * Save 4 L8ter — Front-end Styles
 *
 * All selectors are namespaced under .s4l-* to prevent any conflict with the
 * active WooCommerce theme. The stylesheet is enqueued only on the cart page.
 *
 * Layout overview
 * ───────────────
 * .s4l-saved-section          Outer wrapper, below the WC cart totals.
 *   .s4l-section-header       Heading row + pagination nav (flex, space-between).
 *   .s4l-grid                 CSS grid: 4 cols desktop / 3 tablet / 2 mobile.
 *     .s4l-card               Individual product card (flex column).
 *       .s4l-card-delete      Absolute ✕ button (top-right of card).
 *       .s4l-card-image-link  Linked image wrapper.
 *         .s4l-card-image     Holds the WC thumbnail (square crop).
 *       .s4l-card-body        Name, attrs, price, CTA (flex column).
 *   .s4l-dots-wrapper         Dot page-indicator row (built by JS).
 *
 * @package Save4L8ter
 */

/* ============================================================
   1. "Save for Later" inline link (under cart item name)
   ============================================================ */

.s4l-save-link {
	display:      inline-block;
	margin-top:   0.35em;
	font-size:    0.8em;
	color:        #0073aa;
	text-decoration: none;
	transition:   color 0.15s ease;
}

.s4l-save-link:hover,
.s4l-save-link:focus {
	color:           #005177;
	text-decoration: underline;
}

/* ============================================================
   2. Section wrapper
   ============================================================ */

.s4l-saved-section {
	margin-top:  3em;
	padding-top: 2em;
	border-top:  2px solid #e2e2e2;
	clear:       both;
}

/* ============================================================
   3. Section header (heading + pagination nav on one line)
   ============================================================ */

.s4l-section-header {
	display:         flex;
	align-items:     center;
	justify-content: space-between;
	flex-wrap:       wrap;
	gap:             0.75rem;
	margin-bottom:   1.25rem;
}

.s4l-heading {
	font-size:   1.25em;
	font-weight: 600;
	margin:      0;
}

/* ============================================================
   4. Pagination nav (prev / page-info / next)
   ============================================================ */

.s4l-pagination-nav {
	display:     flex;
	align-items: center;
	gap:         0.5rem;
}

.s4l-btn-prev,
.s4l-btn-next {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           34px;
	height:          34px;
	border:          1px solid #d0d0d0;
	border-radius:   50%;
	background:      #fff;
	cursor:          pointer;
	font-size:       1.3rem;
	line-height:     1;
	color:           #333;
	transition:      background 0.15s ease, border-color 0.15s ease;
	padding:         0;
}

.s4l-btn-prev:hover,
.s4l-btn-next:hover {
	background:    #f5f5f5;
	border-color:  #aaa;
}

.s4l-btn-prev:disabled,
.s4l-btn-next:disabled {
	opacity: 0.3;
	cursor:  default;
}

.s4l-page-info {
	font-size:   0.85rem;
	color:       #767676;
	min-width:   3.5em;
	text-align:  center;
}

/* ============================================================
   5. Product card grid
   ============================================================ */

.s4l-grid {
	display:               grid;
	grid-template-columns: repeat( 8, 1fr );
	gap:                   0.75rem;
}

/* Tablet */
@media ( max-width: 1023px ) {
	.s4l-grid {
		grid-template-columns: repeat( 4, 1fr );
		gap:                   0.875rem;
	}
}

/* Mobile */
@media ( max-width: 767px ) {
	.s4l-grid {
		grid-template-columns: repeat( 2, 1fr );
		gap:                   0.75rem;
	}
}

/* ============================================================
   6. Individual product card
   ============================================================ */

.s4l-card {
	position:        relative;
	background:      #fff;
	border:          1px solid #e4e4e4;
	border-radius:   6px;
	overflow:        hidden;
	display:         flex;
	flex-direction:  column;
	transition:      box-shadow 0.2s ease;
}

.s4l-card:hover {
	box-shadow: 0 4px 16px rgba( 0, 0, 0, 0.09 );
}

/* Hidden state — toggled by JS pagination */
.s4l-hidden {
	display: none !important;
}

/* ============================================================
   7. Delete ( ✕ ) button
   ============================================================ */

.s4l-card-delete {
	position:        absolute;
	top:             8px;
	right:           8px;
	z-index:         2;
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	width:           26px;
	height:          26px;
	border-radius:   50%;
	background:      rgba( 0, 0, 0, 0.42 );
	color:           #fff;
	font-size:       1rem;
	line-height:     1;
	text-decoration: none;
	transition:      background 0.15s ease;
}

.s4l-card-delete:hover,
.s4l-card-delete:focus {
	background: rgba( 0, 0, 0, 0.72 );
	color:      #fff;
}

/* ============================================================
   8. Product image
   ============================================================ */

.s4l-card-image-link {
	display: block;
}

.s4l-card-image img {
	display:      block;
	width:        100%;
	aspect-ratio: 1 / 1;
	object-fit:   cover;
}

/* ============================================================
   9. Card body (name, attrs, price, CTA)
   ============================================================ */

.s4l-card-body {
	display:        flex;
	flex-direction: column;
	flex:           1;
	padding:        0.5rem;
	gap:            0.28rem;
}

.s4l-card-name {
	display:            -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow:           hidden;
	font-size:          0.78rem;
	font-weight:        600;
	color:              inherit;
	text-decoration:    none;
	line-height:        1.3;
}

.s4l-card-name:hover,
.s4l-card-name:focus {
	text-decoration: underline;
}

/* Product options — output of wc_get_formatted_cart_item_data() */
.s4l-card-options {
	font-size:   0.7rem;
	color:       #666;
	line-height: 1.4;
}

/* Strip margin/padding from WC's <dl>, <dt>, <dd> option markup */
.s4l-card-options dl {
	margin:  0;
	padding: 0;
}

.s4l-card-options dt,
.s4l-card-options dd {
	display:     inline;
	margin:      0;
	padding:     0;
}

.s4l-card-options dt::after {
	content: ': ';
}

.s4l-card-options dd::after {
	content: '\A';    /* line break between option pairs */
	white-space: pre;
}

/* Fallback for themes that output options as <p> tags */
.s4l-card-options p {
	margin:    0;
	font-size: inherit;
}

.s4l-card-price {
	font-size:   0.82rem;
	font-weight: 600;
}

/* "Move to Cart" CTA — inherits .button from the active WC theme */
.s4l-card-cta {
	display:    block;
	text-align: center;
	width:      100%;
	margin-top: auto;   /* push CTA to card bottom regardless of content height */
	padding:    0.4em 0.5em;
	font-size:  0.75rem;
	box-sizing: border-box;
}

/* ============================================================
   10. Dot page indicators (built by JS)
   ============================================================ */

.s4l-dots-wrapper {
	display:         flex;
	justify-content: center;
	align-items:     center;
	gap:             0.5rem;
	margin-top:      1.25rem;
	min-height:      1.25rem; /* prevents layout shift when dots are absent */
}

.s4l-dot {
	display:       block;
	width:         8px;
	height:        8px;
	border-radius: 50%;
	background:    #ccc;
	border:        none;
	padding:       0;
	cursor:        pointer;
	transition:    background 0.2s ease, transform 0.2s ease;
}

.s4l-dot.active {
	background: #333;
	transform:  scale( 1.3 );
}

.s4l-dot:hover {
	background: #999;
}

/* ============================================================
   11. Reduced-motion: disable transitions for users who prefer it
   ============================================================ */

@media ( prefers-reduced-motion: reduce ) {
	.s4l-save-link,
	.s4l-btn-prev,
	.s4l-btn-next,
	.s4l-card,
	.s4l-card-delete,
	.s4l-dot {
		transition: none;
	}
}