/**
 * Product Info Sidebar Component
 * 438px width sidebar with category, title, price, tags, color, dates, quantity, add to cart
 * EXACT Figma design specifications - node-id=91-7099 (desktop)
 */

/* ============================================
   Product Info Container
   ============================================ */

.product-info {
	width: 438px;
	display: flex;
	flex-direction: column;
	gap: 24px;
}

/* ============================================
   1. Header: Category + Title
   ============================================ */

.product-info__header {
	display: flex;
	flex-direction: column;
	gap: 4px;
}

/* Category link - Figma: 14px Light, line-height 2 */
.product-info__category {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	text-decoration: none;
	transition: opacity 0.3s ease;
}

.product-info__category:hover {
	opacity: 0.7;
}

/* Product Title - Figma: 36px Regular (400), line-height 1.28 */
.product-info__title {
	font-family: var(--font-primary, 'Outfit');
	font-size: 36px;
	font-weight: 400;
	line-height: 1.28;
	color: var(--color-black, #2C2C34);
	margin: 0;
}

/* Product SKU - small gray text under title */
.product-info__sku {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
}

/* ============================================
   2. Price Block (Price + Regular Price + Deposit)
   ============================================ */

.product-info__price-block {
	display: flex;
	flex-direction: column;
	gap: 4px;
	margin-bottom: 8px;
}

.product-info__price {
	display: flex;
	align-items: baseline;
	gap: 4px;
}

.product-info__price-current,
.product-info__price-sale {
	font-family: var(--font-primary, 'Outfit');
	font-size: 36px;
	font-weight: 400;
	line-height: 1.28;
	color: var(--color-black, #2C2C34);
}

/* Sale price is red */
.product-info__price-sale {
	color: #B82D2D;
}

.product-info__price-unit {
	font-family: var(--font-primary, 'Outfit');
	font-size: 20px;
	font-weight: 400;
	line-height: 1.29;
	color: var(--color-black, #2C2C34);
}

/* +PVN (VAT) indicator next to price */
.product-info__price-vat {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.5;
}

/* Regular price (crossed out, shown separately when on sale) */
.product-info__price-regular {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
	text-decoration: line-through;
}

/* 3. Security Deposit (shown right under price) */
.product-info__deposit {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.8;
}

/* ============================================
   4. Product Tags - Figma: border only, no colored backgrounds
   border: 0.5px solid rgba(44,44,52,0.6), padding: 2px 16px
   ============================================ */

.product-info__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 16px;
}

.product-tag {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 2px 16px;
	border-radius: 222px;
	background: transparent;
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: rgba(44, 44, 52, 0.6);
	border: 0.5px solid rgba(44, 44, 52, 0.6);
}

.product-tag i {
	font-size: 12px;
}

.product-tag span {
	/* Text within tag */
}

/* ============================================
   5. Short Description
   ============================================ */

.product-info__description {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.8;
	margin-bottom: 4px;
}

.product-info__description p {
	margin: 0 0 8px 0;
}

.product-info__description p:last-child {
	margin-bottom: 0;
}

.product-info__description ul,
.product-info__description ol {
	padding-left: 20px;
	margin: 0 0 8px 0;
}

.product-info__description ul {
	list-style-type: disc;
}

.product-info__description ol {
	list-style-type: decimal;
}

.product-info__description strong,
.product-info__description b {
	font-weight: 600;
}

.product-info__description em,
.product-info__description i {
	font-style: italic;
}

/* ============================================
   6. Color Selector (20px outer, 12px inner)
   ============================================ */

.product-info__colors {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-bottom: 4px;
}

.product-info__colors-label {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-black, #2C2C34);
}

.product-info__colors-selected {
	font-weight: 600;
}

.color-selector {
	display: flex;
	gap: 12px;
	flex-wrap: wrap;
}

.color-selector__option {
	display: flex;
	align-items: center;
	gap: 8px;
	cursor: pointer;
	transition: all 0.3s ease;
}

.color-selector__option input[type="radio"] {
	display: none;
}

.color-selector__circle {
	width: 20px;
	height: 20px;
	border-radius: 50%;
	border: 1px solid var(--color-border, #E0E0E0);
	display: flex;
	align-items: center;
	justify-content: center;
	transition: all 0.3s ease;
}

.color-selector__inner {
	width: 12px;
	height: 12px;
	border-radius: 50%;
	transition: all 0.3s ease;
}

.color-selector__label {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	line-height: 2;
	color: var(--color-text-secondary, #6B6B6B);
}

.color-selector__option:hover .color-selector__circle,
.color-selector__option--active .color-selector__circle {
	border-color: var(--color-black, #2C2C34);
	box-shadow: 0 0 0 2px rgba(44, 44, 52, 0.1);
}

.color-selector__option--active .color-selector__label {
	color: var(--color-black, #2C2C34);
	font-weight: 600;
}

/* Disabled state for incompatible attribute options */
.color-selector__option--disabled {
	opacity: 0.25;
	cursor: not-allowed;
}

.color-selector__option--disabled .color-selector__circle {
	border-color: var(--color-border, #E0E0E0);
	box-shadow: none;
}

/* Attribute Selectors (Variable Products) - same visual style as simple product color selector */
.product-info__attributes {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-info__attribute {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.product-info__attribute-label {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-black, #2C2C34);
}

.product-info__attribute-label-text {
	font-weight: 400;
}

.product-info__attribute-selected {
	font-weight: 600;
}

.attribute-selector__select {
	width: 100%;
	padding: 4px 0;
	border: none;
	border-bottom: 0.5px solid #2C2C34;
	border-radius: 0;
	background: transparent;
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M3 4.5L6 7.5L9 4.5' stroke='%232C2C34' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 0 center;
}

.attribute-selector__select:focus {
	outline: none;
}

/* Disabled options inside select — greyed out but visible */
.attribute-selector__select option:disabled {
	color: rgba(44, 44, 52, 0.3);
}

/* ============================================
   7. Rental Dates Inputs - Figma: 1 COLUMN, gap 16px
   ============================================ */

.product-info__rental-dates {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.rental-dates__field {
	display: flex;
	flex-direction: column;
	width: 100%;
}

.rental-dates__field label {
	font-family: var(--font-primary, 'Outfit');
	font-size: 10px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.5;
}

.rental-dates__input-wrapper {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 4px 0;
	border-bottom: 0.5px solid #2C2C34;
}

.rental-dates__input {
	flex: 1;
	border: none;
	background: transparent;
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	cursor: pointer;
	padding: 0;
}

.rental-dates__input::placeholder {
	color: var(--color-black, #2C2C34);
	opacity: 0.5;
}

.rental-dates__input:focus {
	outline: none;
}

.rental-dates__icon {
	font-size: 14px;
	color: var(--color-black, #2C2C34);
}

/* ============================================
   8. Quantity Row - Figma: Counter + Availability in ONE ROW, gap 9px
   ============================================ */

.product-info__quantity-row {
	display: flex;
	align-items: center;
	gap: 9px;
}

/* Availability - Figma: 14px Light, opacity 0.8, box icon */
.product-info__availability {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 0 4px;
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.8;
}

.product-info__availability i {
	font-size: 14px;
}

.product-info__availability--out {
	color: var(--color-text-secondary, #6B6B6B);
}

/* ============================================
   9. Quantity Counter - Figma: 40px height, inline layout
   bg: #FCFDFF, border: 1px rgba(44,44,52,0.1), gap 16px inside
   ============================================ */

.quantity-counter {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 16px;
	height: 40px;
	padding: 4px 16px;
	background: var(--color-white, #FCFDFF);
	border: 1px solid rgba(44, 44, 52, 0.1);
}

.quantity-counter__btn {
	background: transparent;
	border: none;
	padding: 0;
	cursor: pointer;
	font-size: 12px;
	color: var(--color-black, #2C2C34);
	opacity: 0.5;
	transition: opacity 0.3s ease;
}

.quantity-counter__btn:hover {
	opacity: 1;
}

.quantity-counter__value {
	font-family: var(--font-primary, 'Outfit');
	font-size: 14px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	text-align: center;
	min-width: 20px;
	width: 40px;
	border: none;
	background: transparent;
	padding: 0;
	-moz-appearance: textfield;
	-webkit-appearance: none;
	appearance: none;
}

.quantity-counter__value::-webkit-inner-spin-button,
.quantity-counter__value::-webkit-outer-spin-button {
	-webkit-appearance: none;
	margin: 0;
}

.quantity-counter__value:focus {
	outline: none;
}

/* ============================================
   10. Actions: Add to Cart + Wishlist + Rental Period Info
   Figma: gap 24px, btn padding 4px 24px, wishlist 48px
   ============================================ */

.product-info__actions {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.product-info__actions-row {
	display: flex !important;
	flex-direction: row !important;
	gap: 24px;
	align-items: center;
	width: 437px;
	max-width: 100%;
}

/* Add to Cart - Figma: flex-1, bg #2C2C34, padding 4px 24px */
.product-info__actions-row .btn--add-to-cart,
.product-info__actions-row #addToCartBtn,
#addToCartBtn {
	flex: 1 1 0% !important;
	min-width: 0 !important;
	width: calc(100% - 48px - 24px) !important; /* fallback: full width minus wishlist minus gap */
	max-width: none !important;
	padding: 4px 24px;
	background: var(--color-black, #2C2C34);
	border: none;
	border-radius: 0;
	font-family: var(--font-primary, 'Outfit');
	font-size: 16px;
	font-weight: 400;
	line-height: 2;
	color: var(--color-white, #FCFDFF);
	cursor: pointer;
	transition: all 0.3s ease;
	display: flex !important;
	align-items: center;
	justify-content: center;
	gap: 16px;
	box-sizing: border-box;
}

.product-info__actions-row .btn--add-to-cart:hover {
	background: #1a1a1f;
}

.product-info__actions-row .btn--add-to-cart:active {
	transform: translateY(1px);
}

/* Disabled state - not available for selected dates */
.product-info__actions-row .btn--add-to-cart:disabled,
.product-info__actions-row .btn--add-to-cart.disabled {
	background: rgba(44, 44, 52, 0.3) !important;
	color: rgba(252, 253, 255, 0.7) !important;
	cursor: not-allowed !important;
}

.product-info__actions-row .btn--add-to-cart:disabled:hover,
.product-info__actions-row .btn--add-to-cart.disabled:hover {
	background: rgba(44, 44, 52, 0.3) !important;
	transform: none;
}

/* Wishlist - Figma: 48px круг, bg #FCFDFF */
.product-info__actions-row .btn--wishlist,
.btn--wishlist {
	flex: 0 0 48px !important;
	width: 48px !important;
	height: 48px;
	border-radius: 50%;
	background: var(--color-white, #FCFDFF);
	border: none;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	font-size: 24px;
	color: var(--color-black, #2C2C34);
	transition: all 0.3s ease;
}

.btn--wishlist:hover {
	transform: scale(1.1);
}

.btn--wishlist:hover i {
	color: #B82D2D;
}

.btn--wishlist.active {
	color: #B82D2D;
}

.btn--wishlist.active:hover {
	transform: scale(1.1);
}

.btn--wishlist.active:hover i {
	color: var(--color-black, #2C2C34);
}

/* ============================================
   11. Rental Period Info - Figma: 12px Light, opacity 0.8
   ============================================ */

.product-info__rental-period {
	font-family: var(--font-primary, 'Outfit');
	font-size: 12px;
	font-weight: 300;
	line-height: 2;
	color: var(--color-black, #2C2C34);
	opacity: 0.8;
}

/* ============================================
   Responsive: Tablet (1024px)
   ============================================ */

@media (max-width: 1024px) {
	.product-info {
		width: 100%;
		max-width: 600px;
	}

	.product-info__actions-row {
		width: 100%;
	}
}

/* ============================================
   Responsive: Mobile (768px)
   ============================================ */

@media (max-width: 768px) {
	.product-info {
		gap: 20px;
	}

	.product-info__quantity-row {
		flex-wrap: wrap;
	}
}

/* ============================================
   Responsive: Mobile (375px) - Figma: node-id=112-5941
   ============================================ */

@media (max-width: 375px) {
	.product-info {
		width: 343px;
		max-width: 100%;
	}

	/* Title still 36px on mobile per Figma */
	.product-info__title {
		font-size: 36px;
	}

	/* Price still 36px on mobile per Figma */
	.product-info__price-current,
	.product-info__price-sale {
		font-size: 36px;
	}

	.product-info__price-unit {
		font-size: 20px;
	}

	.product-info__actions-row {
		width: 100%;
	}
}