/**
 * svcd-frontend.css
 *
 * Styles for the WooCommerce cart / checkout / order-view pages.
 * Covers the cart thumbnail, design label, "View Design" link,
 * design lightbox, and the customer order preview block.
 *
 * All selectors are prefixed with .svcd- to avoid theme conflicts.
 *
 * @package SafetyVestCustomDesigner
 * @since   1.0.0
 */

/* =========================================================================
   Cart thumbnail
========================================================================= */
.svcd-cart-thumbnail {
	display:       block;
	max-width:     80px;
	height:        auto;
	border:        1px solid #e0e0e0;
	border-radius: 4px;
	background:    #fafafa;
}

/* =========================================================================
   Design label + view-design link
========================================================================= */
.svcd-cart-design-label {
	display:     inline-block;
	margin-top:  4px;
	color:       #555;
	font-size:   12px;
}

a.svcd-view-design {
	display:          inline-block;
	margin-top:       4px;
	font-size:        12px;
	color:            #0073aa;
	text-decoration:  underline;
	cursor:           pointer;
}
a.svcd-view-design:hover {
	color: #005177;
}

/* =========================================================================
   Customer order design preview (order confirmation + My Account)
========================================================================= */
.svcd-customer-design-preview {
	margin-top:    12px;
	padding:       10px;
	background:    #f9f9f9;
	border:        1px solid #e5e5e5;
	border-radius: 4px;
}
.svcd-customer-design-preview p {
	margin: 0 0 8px;
	font-size: 13px;
}
.svcd-customer-design-preview img {
	max-width:     150px;
	height:        auto;
	border:        1px solid #ddd;
	border-radius: 3px;
	display:       block;
}

/* =========================================================================
   Lightbox overlay
========================================================================= */
.svcd-lightbox {
	position:        fixed;
	inset:           0;
	z-index:         999999;
	display:         flex;
	align-items:     center;
	justify-content: center;
}

.svcd-lightbox__backdrop {
	position:   absolute;
	inset:      0;
	background: rgba(0, 0, 0, .65);
	cursor:     pointer;
}

.svcd-lightbox__dialog {
	position:      relative;
	z-index:       1;
	background:    #fff;
	border-radius: 8px;
	padding:       24px;
	max-width:     90vw;
	max-height:    90vh;
	overflow-y:    auto;
	box-shadow:    0 8px 32px rgba(0, 0, 0, .25);
	width:         640px;
}

.svcd-lightbox__close {
	position:    absolute;
	top:         12px;
	right:       14px;
	background:  none;
	border:      none;
	font-size:   24px;
	line-height: 1;
	cursor:      pointer;
	color:       #555;
	padding:     4px;
}
.svcd-lightbox__close:hover { color: #000; }

.svcd-lightbox__title {
	margin:       0 0 16px;
	font-size:    18px;
	font-weight:  700;
	padding-right:30px;
}

.svcd-lightbox__images {
	display:   flex;
	gap:       16px;
	flex-wrap: wrap;
}

.svcd-lightbox__view {
	flex:           1;
	min-width:      120px;
	display:        flex;
	flex-direction: column;
	align-items:    center;
	gap:            6px;
}

.svcd-lightbox__label {
	font-size:   12px;
	font-weight: 600;
	color:       #666;
	text-transform: uppercase;
	letter-spacing: .05em;
}

.svcd-lightbox__front,
.svcd-lightbox__back {
	max-width:     100%;
	height:        auto;
	border:        1px solid #ddd;
	border-radius: 4px;
	background:    #f5f5f5;
	display:       block;
}