/* ============================================
   PRODUCT DETAILS - MODERN CSS OVERHAUL
   Home of Poi - 2024
   
   This file modernizes the product details page
   while maintaining compatibility with Bootstrap 2.x
   
   NOTE: The following elements are NOT styled 
   and kept completely original:
   - Product option dropdowns (select elements)
   - FlexSlider navigation arrows
   - Quantity selector
   - Add to Cart button
   - Shipping calculator button
   ============================================ */

/* ----------------------------------------
   CSS CUSTOM PROPERTIES (Variables)
   ---------------------------------------- */
:root {
	/* Colors */
	--hop-primary: #f47c20;
	--hop-primary-dark: #d96a15;
	--hop-primary-light: #ff9a4d;
	--hop-secondary: #222222;
	--hop-success: #28a745;
	--hop-success-light: #d4edda;
	--hop-info: #17a2b8;
	--hop-info-light: #d1ecf1;
	--hop-warning: #ffc107;
	--hop-danger: #dc3545;
	--hop-star: #f5a623;
	--hop-text: #333333;
	--hop-text-muted: #6c757d;
	--hop-text-light: #999999;
	--hop-border: #e0e0e0;
	--hop-border-light: #f0f0f0;
	--hop-bg: #ffffff;
	--hop-bg-light: #f8f9fa;
	--hop-bg-dark: #222222;
	
	/* Typography */
	--hop-font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
	--hop-font-size-xs: 11px;
	--hop-font-size-sm: 13px;
	--hop-font-size-base: 15px;
	--hop-font-size-lg: 17px;
	--hop-font-size-xl: 20px;
	--hop-font-size-2xl: 24px;
	--hop-font-size-3xl: 32px;
	
	/* Spacing */
	--hop-space-xs: 4px;
	--hop-space-sm: 8px;
	--hop-space-md: 16px;
	--hop-space-lg: 24px;
	--hop-space-xl: 32px;
	--hop-space-2xl: 48px;
	
	/* Borders */
	--hop-radius-sm: 4px;
	--hop-radius-md: 8px;
	--hop-radius-lg: 12px;
	--hop-radius-xl: 16px;
	--hop-radius-full: 9999px;
	
	/* Shadows */
	--hop-shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
	--hop-shadow-md: 0 4px 6px rgba(0,0,0,0.07);
	--hop-shadow-lg: 0 10px 15px rgba(0,0,0,0.1);
	--hop-shadow-xl: 0 20px 25px rgba(0,0,0,0.15);
	
	/* Transitions */
	--hop-transition-fast: 0.15s ease;
	--hop-transition-base: 0.25s ease;
	--hop-transition-slow: 0.4s ease;
}

/* ----------------------------------------
   BASE TYPOGRAPHY IMPROVEMENTS
   ---------------------------------------- */
.body-outer,
.body-inner,
.product_options,
.short_desc {
	font-family: var(--hop-font-family);
	color: var(--hop-text);
	line-height: 1.6;
}

/* ----------------------------------------
   HEADER BANNER (Product Title Area)
   ---------------------------------------- */
.header-outer {
	background: linear-gradient(135deg, var(--hop-secondary) 0%, #333 100%);
	padding: var(--hop-space-lg) 0;
	margin-bottom: var(--hop-space-xl);
	position: relative;
}

.header-outer h1 {
	font-family: var(--hop-font-family);
	font-size: clamp(20px, 4vw, 28px);
	font-weight: 700;
	color: #fff;
	margin: 0;
	letter-spacing: -0.02em;
	line-height: 1.3;
}

/* ----------------------------------------
   BREADCRUMBS - Keep Original
   ---------------------------------------- */
/* NOTE: Breadcrumbs kept as original design - no custom styling applied */

/* ----------------------------------------
   ALERT MESSAGES - Modern Cards
   ---------------------------------------- */
.alert {
	font-family: var(--hop-font-family);
	border: none;
	border-radius: var(--hop-radius-lg);
	padding: var(--hop-space-md) var(--hop-space-lg);
	margin-bottom: var(--hop-space-lg);
	font-size: var(--hop-font-size-sm);
	line-height: 1.6;
	position: relative;
	box-shadow: var(--hop-shadow-sm);
}

.alert-info {
	background: linear-gradient(135deg, #e8f4fc 0%, #d1ecf1 100%);
	color: #0c5460;
	border-left: 4px solid var(--hop-info);
}

.alert-success {
	background: linear-gradient(135deg, #e8f5e9 0%, #d4edda 100%);
	color: #155724;
	border-left: 4px solid var(--hop-success);
}

.alert-warning {
	background: linear-gradient(135deg, #fff8e1 0%, #fff3cd 100%);
	color: #856404;
	border-left: 4px solid var(--hop-warning);
}

.alert-danger,
.alert-error {
	background: linear-gradient(135deg, #ffebee 0%, #f8d7da 100%);
	color: #721c24;
	border-left: 4px solid var(--hop-danger);
}

.alert .close {
	opacity: 0.5;
	font-size: 20px;
	line-height: 1;
	transition: opacity var(--hop-transition-fast);
}

.alert .close:hover {
	opacity: 1;
}

/* ----------------------------------------
   PRODUCT IMAGE GALLERY
   ---------------------------------------- */
.product_image {
	background: var(--hop-bg);
	border-radius: var(--hop-radius-lg);
	overflow: hidden;
	box-shadow: var(--hop-shadow-md);
	margin-bottom: var(--hop-space-lg);
}

.product_image img.bigimage {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
	background: #fff;
}

/* FlexSlider - Only style container, NOT navigation */
.flexslider {
	border: none !important;
	border-radius: var(--hop-radius-lg);
	box-shadow: none !important;
	margin: 0 !important;
	background: transparent !important;
}

.flexslider .slides > li {
	border-radius: var(--hop-radius-md);
	overflow: hidden;
}

/* Thumbnail Navigation - Safe styling */
.flex-control-thumbs {
	margin-top: var(--hop-space-md) !important;
}

.flex-control-thumbs img {
	border-radius: var(--hop-radius-md);
	border: 2px solid var(--hop-border);
	opacity: 0.6;
	transition: all var(--hop-transition-fast);
}

.flex-control-thumbs img:hover {
	opacity: 0.9;
	border-color: var(--hop-text-muted);
}

.flex-control-thumbs img.flex-active {
	opacity: 1;
	border-color: var(--hop-primary);
}

/* ----------------------------------------
   PRODUCT TITLE & RATING
   ---------------------------------------- */
.short_desc h2 {
	font-family: var(--hop-font-family) !important;
	font-size: var(--hop-font-size-xl) !important;
	font-weight: 700 !important;
	color: var(--hop-text) !important;
	line-height: 1.3 !important;
	margin: 0 0 var(--hop-space-sm) 0 !important;
}

/* Star Rating */
.star-rating,
.rating-stars {
	display: inline-flex;
	align-items: center;
	gap: 2px;
}

.star-rating img,
.rating-stars img {
	width: 16px;
	height: 16px;
	/* Filter to change orange #e7711b to gold #f5a623 */
	filter: sepia(20%) saturate(200%) hue-rotate(-5deg) brightness(105%);
}

/* Star color override for SVG/font stars */
.star-rating .star,
.rating-stars .star,
.star-rating i,
.rating-stars i {
	color: #f5a623 !important;
}

/* Reviews Link */
#clickedreview,
a[href*="Reviews"] {
	color: var(--hop-text-muted);
	font-size: var(--hop-font-size-sm);
	text-decoration: none;
	transition: color var(--hop-transition-fast);
}

#clickedreview:hover,
a[href*="Reviews"]:hover {
	color: var(--hop-primary);
}

/* ----------------------------------------
   PRICE DISPLAY - Modern Style
   ---------------------------------------- */
.product_options table.table-condensed {
	border-collapse: separate;
	border-spacing: 0;
}

.product_options .size15 {
	font-family: var(--hop-font-family);
}

/* Main Price */
.product_options .size15 span[style*="font-size:24px"],
.product_options #radio1,
.product_options #radio10,
.product_options #radio100 {
	font-family: var(--hop-font-family) !important;
	font-size: var(--hop-font-size-3xl) !important;
	font-weight: 700 !important;
	color: var(--hop-text) !important;
	letter-spacing: -0.02em;
}

/* Price Unit */
.product_options .size15 span[style*="color:#777676"] {
	font-size: var(--hop-font-size-sm) !important;
	color: var(--hop-text-muted) !important;
}

/* Strikethrough Price */
.product_options span[style*="text-decoration:line-through"] {
	color: var(--hop-text-light) !important;
	font-size: var(--hop-font-size-base) !important;
}

/* Savings Text */
.product_options span[style*="color: #0000FF"],
.product_options span[style*="color:#0000FF"] {
	color: var(--hop-success) !important;
	font-weight: 600;
	font-size: var(--hop-font-size-sm) !important;
}

/* Seen it cheaper link */
a[href*="/price"] {
	color: var(--hop-text-muted);
	font-size: var(--hop-font-size-xs);
	text-decoration: none;
}

a[href*="/price"]:hover {
	color: var(--hop-primary);
}

/* Bulk Prices Toggle */
.bulkpriceshide a {
	color: var(--hop-info) !important;
	font-weight: 500;
}

/* Loyalty Benefits Link */
a[href*="hop-points"] {
	color: var(--hop-primary);
	font-size: var(--hop-font-size-sm);
	text-decoration: none;
}

/* ----------------------------------------
   PRODUCT OPTIONS LIST - Lines Between
   ---------------------------------------- */
.product_options_list > li {
	border-bottom: 1px solid var(--hop-border-light);
	padding-bottom: 12px;
	margin-bottom: 12px;
}

.product_options_list > li:last-child {
	border-bottom: none;
	padding-bottom: 0;
	margin-bottom: 0;
}

/* ----------------------------------------
   AVAILABILITY BADGE
   ---------------------------------------- */
span[style*="background-color:#40FF40"],
.in-stock-badge {
	display: inline-flex !important;
	align-items: center;
	gap: var(--hop-space-xs);
	padding: var(--hop-space-xs) var(--hop-space-sm) !important;
	font-family: var(--hop-font-family) !important;
	font-size: var(--hop-font-size-sm) !important;
	font-weight: 600 !important;
	color: var(--hop-success) !important;
	background: var(--hop-success-light) !important;
	border-radius: var(--hop-radius-full) !important;
}

/* ----------------------------------------
   BUTTONS - Only style category tags
   ---------------------------------------- */
/* NOTE: Add to Cart, Shipping Calculator buttons NOT styled */

/* Category Tag Buttons */
a.btn.btn-small.btn-brown.btn-padding,
.btn.btn-small.btn-brown {
	display: inline-flex;
	align-items: center;
	padding: var(--hop-space-sm) var(--hop-space-md);
	font-family: var(--hop-font-family);
	font-size: var(--hop-font-size-sm);
	font-weight: 500;
	color: #fff;
	background: var(--hop-secondary) !important;
	border: none;
	border-radius: var(--hop-radius-full);
	text-decoration: none;
	transition: all var(--hop-transition-fast);
	margin: var(--hop-space-xs);
}

a.btn.btn-small.btn-brown.btn-padding:hover {
	background: var(--hop-primary) !important;
	transform: translateY(-1px);
}

/* Back to Top Button */
a[onclick*="scrollTop"] {
	position: fixed;
	bottom: 20px;
	right: 20px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--hop-space-sm) var(--hop-space-md);
	font-family: var(--hop-font-family);
	font-size: var(--hop-font-size-sm);
	font-weight: 500;
	color: #fff;
	background: var(--hop-secondary);
	border-radius: var(--hop-radius-md);
	text-decoration: none;
	box-shadow: var(--hop-shadow-lg);
	transition: all var(--hop-transition-fast);
	z-index: 100;
}

a[onclick*="scrollTop"]:hover {
	background: var(--hop-primary);
	transform: translateY(-2px);
}

/* ----------------------------------------
   ACCORDION SECTIONS
   ---------------------------------------- */
.openbtntxt,
strong[style*="color:blue"],
strong[style*="color: blue"] {
	font-family: var(--hop-font-family) !important;
	font-size: var(--hop-font-size-lg) !important;
	font-weight: 600 !important;
	color: var(--hop-text) !important;
	cursor: pointer;
	transition: color var(--hop-transition-fast);
}

.openbtntxt:hover,
strong[style*="color:blue"]:hover {
	color: var(--hop-primary) !important;
}

/* Accordion Dividers */
.body-inner hr {
	border: none;
	border-top: 1px solid var(--hop-border-light);
	margin: var(--hop-space-lg) 0;
}

/* Accordion Content */
.viewtab {
	padding: var(--hop-space-md) 0;
}

.viewtab ul {
	padding-left: var(--hop-space-lg);
	margin: var(--hop-space-md) 0;
}

.viewtab ul li {
	margin-bottom: var(--hop-space-sm);
	line-height: 1.7;
	color: var(--hop-text);
}

/* ----------------------------------------
   AI PRODUCT SUMMARY BOX
   ---------------------------------------- */
.ai-product-summary {
	background: linear-gradient(135deg, var(--hop-bg-light) 0%, #fff 100%) !important;
	border: 1px solid var(--hop-border) !important;
	border-radius: var(--hop-radius-lg) !important;
	padding: var(--hop-space-lg) !important;
	margin: var(--hop-space-lg) 0 !important;
	box-shadow: var(--hop-shadow-sm);
}

.ai-product-summary > div:first-child {
	font-family: var(--hop-font-family) !important;
	font-size: var(--hop-font-size-xs) !important;
	font-weight: 600 !important;
	color: var(--hop-text-muted) !important;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--hop-space-md) !important;
}

/* ----------------------------------------
   FREQUENTLY BOUGHT TOGETHER - Product Cards
   ---------------------------------------- */
.related_products,
.related_slider {
	margin: var(--hop-space-xl) 0;
}

.related_products h3,
.related_slider h3 {
	font-family: var(--hop-font-family);
	font-size: var(--hop-font-size-lg);
	font-weight: 600;
	color: var(--hop-text);
	margin-bottom: var(--hop-space-lg);
}

/* Product Card in Carousel */
.related_slider .slides > li {
	padding: var(--hop-space-sm);
}

.related_slider .slides > li > a {
	display: block;
	text-decoration: none;
	background: var(--hop-bg);
	border-radius: var(--hop-radius-lg);
	border: 1px solid var(--hop-border-light);
	padding: var(--hop-space-md);
	transition: all var(--hop-transition-base);
	text-align: center;
}

.related_slider .slides > li > a:hover {
	border-color: var(--hop-border);
	box-shadow: var(--hop-shadow-md);
	transform: translateY(-4px);
}

/* Product Card Image */
.related_slider .slides img {
	max-width: 100%;
	height: auto;
	border-radius: var(--hop-radius-md);
	margin-bottom: var(--hop-space-sm);
}

/* Product Card Title */
.related_slider .slides .product-name,
.related_slider .slides a > span:first-of-type {
	display: block;
	font-family: var(--hop-font-family);
	font-size: var(--hop-font-size-sm);
	font-weight: 500;
	color: var(--hop-text);
	line-height: 1.4;
	margin-bottom: var(--hop-space-xs);
}

/* Product Card Price */
.related_slider .slides .product-price,
.related_slider .slides small {
	font-family: var(--hop-font-family);
	font-size: var(--hop-font-size-sm);
	font-weight: 600;
	color: var(--hop-primary);
}

/* ----------------------------------------
   VIDEO PLAYER
   ---------------------------------------- */
.video-js {
	border-radius: var(--hop-radius-lg);
	overflow: hidden;
	box-shadow: var(--hop-shadow-md);
}

.video-js .vjs-big-play-button {
	border-radius: 50%;
	width: 70px;
	height: 70px;
	line-height: 70px;
	border: none;
	background: rgba(244, 124, 32, 0.9);
}

.video-js:hover .vjs-big-play-button {
	background: var(--hop-primary);
}

/* ----------------------------------------
   HELP IMAGES (Poi Length Guide, etc.)
   ---------------------------------------- */
.option1help img,
.option2help img,
.option3help img,
.option4help img,
.optioncolorhelp img {
	border-radius: var(--hop-radius-md);
	box-shadow: var(--hop-shadow-sm);
	max-width: 100%;
	height: auto;
}

/* Help Links */
#help1, #help2, #help3, #help4, #helpcolor {
	color: var(--hop-info);
	font-size: var(--hop-font-size-sm);
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: var(--hop-space-xs);
}

#help1:hover, #help2:hover, #help3:hover, #help4:hover, #helpcolor:hover {
	color: var(--hop-primary);
}

/* ----------------------------------------
   CHECKBOX STYLING (Bulk Prices)
   ---------------------------------------- */
input[type="checkbox"].select_unit {
	width: 20px !important;
	height: 20px !important;
	accent-color: var(--hop-primary);
	cursor: pointer;
}

/* ----------------------------------------
   REVIEWS SECTION
   ---------------------------------------- */
.review-item,
.media {
	padding: var(--hop-space-lg);
	background: var(--hop-bg-light);
	border-radius: var(--hop-radius-lg);
	margin-bottom: var(--hop-space-md);
}

/* ----------------------------------------
   SHIPPING CALCULATOR DROPDOWN
   ---------------------------------------- */
/* NOTE: Shipping button kept as original design */

/* ----------------------------------------
   MOBILE RESPONSIVE ADJUSTMENTS
   ---------------------------------------- */
@media (max-width: 768px) {
	:root {
		--hop-font-size-3xl: 26px;
		--hop-font-size-2xl: 20px;
		--hop-font-size-xl: 18px;
	}
	
	.header-outer {
		padding: var(--hop-space-md) 0;
		margin-bottom: var(--hop-space-lg);
	}
	
	.header-outer h1 {
		font-size: var(--hop-font-size-xl);
		padding: 0 var(--hop-space-md);
	}
	
	.flex-control-thumbs img {
		width: 50px !important;
		height: 50px !important;
	}
	
	.related_slider .slides > li {
		padding: var(--hop-space-xs);
	}
	
	.ai-product-summary {
		padding: var(--hop-space-md) !important;
	}
}

@media (max-width: 480px) {
	.header-outer h1 {
		font-size: 16px;
	}
	
	.product_options .size15 span[style*="font-size:24px"],
	#radio1, #radio10, #radio100 {
		font-size: var(--hop-font-size-2xl) !important;
	}
	
	.alert {
		padding: var(--hop-space-sm) var(--hop-space-md);
		font-size: var(--hop-font-size-xs);
	}
	
	a[onclick*="scrollTop"] {
		bottom: 15px;
		right: 15px;
		padding: var(--hop-space-xs) var(--hop-space-sm);
		font-size: var(--hop-font-size-xs);
	}
}

/* ----------------------------------------
   PRINT STYLES
   ---------------------------------------- */
@media print {
	.header-outer,
	.flex-direction-nav,
	.flex-control-thumbs,
	.openbtn {
		display: none !important;
	}
	
	.body-inner {
		padding: 0;
	}
}

/* ----------------------------------------
   ANIMATIONS
   ---------------------------------------- */
@keyframes fadeIn {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

.product_options,
.short_desc,
.product_image {
	animation: fadeIn 0.4s ease-out;
}

/* Smooth transitions for all interactive elements */
* {
	-webkit-tap-highlight-color: transparent;
}

/* Remove default focus outline and add custom */
:focus {
	outline: none;
}

:focus-visible {
	outline: 2px solid var(--hop-primary);
	outline-offset: 2px;
}

/* ----------------------------------------
   UTILITY CLASSES
   ---------------------------------------- */
.hop-text-primary { color: var(--hop-primary) !important; }
.hop-text-success { color: var(--hop-success) !important; }
.hop-text-muted { color: var(--hop-text-muted) !important; }
.hop-bg-light { background: var(--hop-bg-light) !important; }
.hop-rounded { border-radius: var(--hop-radius-md) !important; }
.hop-shadow { box-shadow: var(--hop-shadow-md) !important; }