.rental-product-link[data-rental-link="true"] {
pointer-events: auto !important;
cursor: pointer !important;
} .rental-product-link[data-rental-link="true"]:hover,
.rental-product-link[data-rental-link="true"]:focus,
.rental-product-link[data-rental-link="true"]:active {
text-decoration: none !important;
} .wc-block-components-notices-container:has(.wc-block-components-notice--success) {
display: none !important;
}    body.rental-product.single-product button[name="add-to-cart"],
body.rental-product.single-product .single_add_to_cart_button,
body.rental-product .wc-block-components-quantity-selector,
body.rental-product .wp-block-woocommerce-product-add-to-cart-form .wc-block-components-quantity-selector,
body.rental-product .wp-block-woocommerce-product-add-to-cart-form button[type="submit"],
body.rental-product form.cart .quantity,
body.rental-product form.cart button[name="add-to-cart"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
} body.rental-product .wp-block-woocommerce-product-price:empty,
body.rental-product .wc-block-components-product-price:empty,
body.rental-product .price:empty {
display: none !important;
} body.rental-product .price {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
} body.rental-product .price:has(del),
body.rental-product .price:has(ins),
body.rental-product .wc-block-components-product-price:has(del),
body.rental-product .wc-block-components-product-price:has(ins),
body.rental-product .wp-block-woocommerce-product-price:has(del),
body.rental-product .wp-block-woocommerce-product-price:has(ins) {
display: none !important;
}:root { --color-primary: var(--wp--preset--color--base);
--color-secondary: var(--wp--preset--color--contrast);
--color-primary-light: var(--wp--preset--color--accent-1);
--color-primary-medium: var(--wp--preset--color--accent-2);
--color-white: var(--wp--preset--color--base);
--color-white-light: var(--wp--preset--color--base);
--color-white-medium: var(--wp--preset--color--base);
--color-dark: var(--wp--preset--color--contrast);
--color-border: var(--wp--preset--color--contrast);
--color-shadow: var(--wp--preset--color--contrast); --text-primary: var(--wp--preset--color--contrast);
--text-secondary: var(--wp--preset--color--contrast);
--text-light: var(--wp--preset--color--contrast);
--text-white: var(--wp--preset--color--contrast); --color-success: var(--wp--preset--color--accent-1);
--color-error: red;
--success-text: var(--wp--preset--color--accent-1);
--error-text: var(--wp--preset--color--accent-2); --font-xs: 12px;
--font-sm: 14px;
--font-base: 16px;
--font-lg: 18px;
--font-xl: 20px;
--font-2xl: 24px;
--font-3xl: 30px; --space-1: 4px;
--space-2: 8px;
--space-3: 12px;
--space-4: 16px;
--space-5: 20px;
--space-6: 24px;
--space-8: 32px;
--space-10: 40px; --color-blur: none;
--color-radius: 8px;
--color-radius-sm: 4px;
--color-radius-lg: 12px; --shadow-glass: none;
--shadow-glass-lg: none;
--shadow-inner: none; --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --rental-related-image-size: 50px;
} * {
box-sizing: border-box;
} #rental-main-container {
background: var(--color-white);
backdrop-filter: var(--color-blur);
-webkit-backdrop-filter: var(--color-blur);  box-shadow: var(--shadow-glass-lg);
overflow: hidden;  position: relative;
width: 100%;
max-width: 100%;
box-sizing: border-box;
}
#rental-main-container::before {
display: none;
}
#rental-main-container:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glass-lg), 0 0 40px var(--color-primary-light);
border-color: var(--color-primary-medium);
} .rental-section {
padding: var(--space-4);
position: relative;
backdrop-filter: var(--color-blur);
-webkit-backdrop-filter: var(--color-blur);
}
.rental-section:not(:last-child) {
border-bottom: none;
}
.rental-section:not(:last-child)::after {
display: none;
} .rental-section-title {
font-size: var(--font-2xl);
font-weight: 700;
color: var(--text-primary);
margin: 0 0 var(--space-6) 0;
text-align: center;
padding-bottom: var(--space-4);
border-bottom: 2px solid var(--color-primary-medium);
position: relative;
letter-spacing: -0.025em;
}
.rental-section-title::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 2px;
background: var(--color-primary);
border-radius: 1px;
} .rental-dates-section,
.rental-related-products-section {
background: var(--color-white);
backdrop-filter: var(--color-blur);
-webkit-backdrop-filter: var(--color-blur);
border: none;
border-radius: var(--color-radius); box-shadow: var(--shadow-glass);
}
.rental-date-picker {
display: flex;
gap: var(--space-4);
margin-bottom: var(--space-8);
align-items: flex-end;
width: 100%;
flex-wrap: wrap;
} .rental-date-picker:has(#rental-end-date[style*="display: none"]) {
flex-direction: row;
}
.rental-date-picker:has(#rental-end-date[style*="display: none"]) .rental-date-input:first-child {
flex: 6;
}
.rental-date-picker:has(#rental-end-date[style*="display: none"]) .rental-quantity-input {
flex: 4;
} .rental-date-picker.single-day-booking {
flex-direction: row;
}
.rental-date-picker.single-day-booking .rental-date-input:first-child {
flex: 6;
}
.rental-date-picker.single-day-booking .rental-quantity-input {
flex: 4;
}
.rental-date-input {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 4;
min-width: 0;
align-items: stretch;
}
.rental-date-label {
font-size: var(--font-base);
font-weight: 600;
color: var(--text-secondary);
margin-bottom: var(--space-1);
letter-spacing: -0.01em;
white-space: nowrap;
}
.rental-date-field { background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--color-radius); color: var(--text-primary);
transition: var(--transition);
box-shadow: none; min-width: 0;
box-sizing: border-box;  display: flex;
align-items: center;
}
.rental-date-field:focus {
outline: none;
border: 1px solid var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-light);
background: var(--color-white);
} input[type="date"].rental-date-field { padding: var(--space-4) var(--space-4);
font-size: var(--font-base);
line-height: 1;
vertical-align: middle;
} @supports (-webkit-touch-callout: none) {
input[type="date"].rental-date-field {
display: block;
padding: var(--space-2) var(--space-3);
font-size: var(--font-base);
height: 44px;
min-height: 44px;
max-height: 48px;
line-height: 1.15;
}
input[type="date"].rental-date-field::-webkit-datetime-edit,
input[type="date"].rental-date-field::-webkit-datetime-edit-fields-wrapper,
input[type="date"].rental-date-field::-webkit-datetime-edit-text,
input[type="date"].rental-date-field::-webkit-datetime-edit-month-field,
input[type="date"].rental-date-field::-webkit-datetime-edit-day-field,
input[type="date"].rental-date-field::-webkit-datetime-edit-year-field {
padding: 0;
margin: 0;
line-height: 1.15;
}
input[type="date"].rental-date-field::-webkit-date-and-time-value {
min-height: auto;
line-height: 1.15;
}
} select.rental-date-field {
height: 48px;
padding: var(--space-4) var(--space-4);
font-size: var(--font-base);
line-height: 1;
vertical-align: middle;
} .rental-price-summary {
margin-top: var(--space-6);
} .rental-quantity-input {
display: flex;
flex-direction: column;
gap: var(--space-1);
flex: 3;
min-width: 0;
align-items: stretch;
}
.rental-quantity-control {
display: flex;
align-items: center;
gap: 0;
width: 100%;
min-width: 0;
box-sizing: border-box;
}
.rental-quantity-btn {
width: 40px;
height: 48px;
border: 1px solid var(--color-border);
background: var(--color-white);
color: var(--text-primary);
font-size: var(--font-lg);
font-weight: 700;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--color-radius) 0 0 var(--color-radius);
box-sizing: border-box;
user-select: none;
}
.rental-quantity-btn:last-child {
border-radius: 0 var(--color-radius) var(--color-radius) 0;
}
.rental-quantity-btn:hover:not(:disabled) {
background: var(--color-primary-light);
border-color: var(--color-primary);
color: var(--color-primary);
}
.rental-quantity-btn:active:not(:disabled) {
background: var(--color-primary);
color: var(--color-white);
}
.rental-quantity-btn:disabled {
background: var(--color-white-light);
color: var(--text-light);
cursor: not-allowed;
opacity: 0.5;
}
.rental-quantity-display {
flex: 1;
height: 48px;
border: 1px solid var(--color-border);
border-left: none;
border-right: none;
background: var(--color-white);
color: var(--text-primary);
font-size: var(--font-base);
font-weight: 600;
text-align: center;
padding: 0;
margin: 0;
box-sizing: border-box;
border-radius: 0;
}
.rental-price-breakdown {
display: none;
margin-top: var(--space-4);
} .rental-main-price-summary {
background: var(--color-white);
border: none;
border-radius: 0;
padding: var(--space-5);
box-shadow: none;
margin-bottom: var(--space-4);
border: 1px solid var(--color-border);
border-radius: var(--color-radius);
width: 100%;
box-sizing: border-box;
}
.rental-main-price-row {
display: flex;
justify-content: space-around;
align-items: flex-start;
gap: var(--space-4);
margin-bottom: var(--space-4);
flex-wrap: wrap;
}
.rental-main-price-row:last-child {
margin-bottom: 0;
}
.rental-main-price-row-secondary {
padding-top: var(--space-4);
border-top: none;
}
.rental-main-price-column {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center; }
.rental-main-price-label {
font-size: var(--font-sm);
font-weight: 600;
color: var(--text-secondary);
margin-bottom: var(--space-2);
line-height: 1.3;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-main-price-label i {
font-size: var(--font-xs);
opacity: 0.8;
}
.rental-main-price-value {
font-size: var(--font-lg);
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-main-price-value.rental-discount-value { color: #22c55e !important;
text-shadow: 0 0 1px rgba(34, 197, 94, 0.3) !important;
} .rental-main-price-value.rental-discount-value:has(+ .rental-main-price-summary[style*="background: green"]),
.rental-main-price-value.rental-discount-value:has(+ .rental-main-price-summary[style*="background-color: green"]),
.rental-main-price-value.rental-discount-value:has(+ .rental-main-price-summary[style*="background: #22c55e"]),
.rental-main-price-value.rental-discount-value:has(+ .rental-main-price-summary[style*="background-color: #22c55e"]) {
color: #dc2626 !important;
text-shadow: 0 0 1px rgba(220, 38, 38, 0.3) !important;
}
.rental-main-price-value.rental-total-value {
color: var(--text-primary);
font-size: var(--font-xl);
}
.rental-main-price-value.rental-deposit-value {
color: var(--text-primary);
font-size: var(--font-xl);
} #rental-days-count {
color: var(--text-primary) !important;
font-weight: 800 !important;
}
.rental-price-table {
width: 100%;
color: var(--wp--preset--color--contrast);
font-size: var(--font-lg);
border-collapse: separate;
border-spacing: 0;
}
.rental-price-table td {
padding: var(--space-2) 0;
border-bottom: 1px solid rgba(255, 255, 255, 0.15);
vertical-align: middle;
}
.rental-price-table tr:last-child td {
border-bottom: none;
} .rental-price-breakdown .rental-price-label {
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
font-size: var(--font-sm);
} .rental-related-product-card-horizontal .rental-price-label {
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
font-size: var(--font-sm);
}
.rental-price-value {
text-align: right;
font-weight: 700;
color: var(--wp--preset--color--contrast);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
font-variant-numeric: tabular-nums;
font-size: var(--font-xl);
}
.rental-discount-value {
color: var(--wp--preset--color--accent-1) !important;
font-weight: 700;
}
.rental-total-row,
.rental-deposit-row,
.rental-payment-row {
border-top: 1px solid rgba(255, 255, 255, 0.3) !important;
}
.rental-total-label,
.rental-total-value,
.rental-deposit-label,
.rental-deposit-value,
.rental-payment-label,
.rental-payment-value {
font-size: var(--font-xl);
font-weight: 800;  }
.rental-info-text {
padding-top: var(--space-5) !important;
text-align: center;
font-size: var(--font-base);
opacity: 0.9;
font-style: italic;
line-height: 1.5;
color: var(--wp--preset--color--contrast) !important;
font-weight: 500;
} .rental-related-section {
background: linear-gradient(135deg, var(--color-white), var(--color-white-light));
}
.rental-related-products-description {
text-align: center;
color: var(--text-secondary);
font-size: var(--font-base);
margin-bottom: var(--space-6);
font-style: italic;
opacity: 0.8;
}
.rental-loading-message {
text-align: center;
color: var(--text-light);
font-size: var(--font-base);
font-style: italic;
padding: var(--space-10);
}
.rental-related-products-grid {
display: flex;
flex-direction: column;
gap: var(--space-3);
margin-top: var(--space-5);
} .rental-related-product-card-new {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--color-radius-lg);
box-shadow: var(--shadow-glass);
transition: var(--transition);
position: relative;
width: 100%;
box-sizing: border-box;
overflow: hidden;
padding: var(--space-2);
}
.rental-related-product-card-new:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glass-lg);
border-color: var(--color-primary-medium);
}
.rental-related-product-card-new.selected {
border-color: var(--color-primary);
border-width: 2px;
background: var(--color-white); }
.rental-related-product-card-new.selected .rental-price-item.rental-discount .rental-price-value {
color: var(--text-primary) !important; font-weight: 700 !important;
} .rental-related-product-card-new.unavailable {
background: var(--color-white-light);
border-color: var(--color-error);
opacity: 0.7;
cursor: not-allowed;
}
.rental-related-product-card-new.unavailable:hover {
transform: none;
box-shadow: var(--shadow-glass);
border-color: var(--color-error);
} .rental-card-single-row {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
justify-content: space-between;
}
.rental-card-header {
display: flex;
align-items: center;
gap: var(--space-2);
flex: 1;
min-width: 0;
} .rental-card-title {
font-size: var(--font-sm);
font-weight: 600;
color: var(--text-primary);
margin: 0;
line-height: 1.3;
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .rental-card-image {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--color-radius);
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-white-medium);
box-shadow: var(--shadow-inner);
}
.rental-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
} .rental-card-prices {
display: flex;
gap: var(--space-2);
flex-shrink: 0;
align-items: center;
margin-left: auto;
margin-right: var(--space-3);
} .rental-price-item {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 50px;
}
.rental-price-item .rental-price-label {
font-size: 9px;
font-weight: 600;
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 2px;
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-price-item .rental-price-value {
font-size: var(--font-xs);
font-weight: 700;
color: var(--text-primary);
line-height: 1.1;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
} .rental-price-item.rental-discount .rental-price-value {
color: var(--text-secondary);
} .rental-price-item.rental-deposit .rental-price-value {
color: var(--text-secondary);
background: var(--color-primary-light);
padding: 2px 4px;
border-radius: var(--color-radius-sm);
} .rental-price-item.rental-balance .rental-price-value {
color: var(--text-secondary);
font-weight: 600;
} .rental-card-quantity-control {
display: flex;
align-items: center;
gap: 0;
flex-shrink: 0;
}
.rental-card-quantity-btn {
width: 24px;
height: 24px;
border: 1px solid var(--color-border);
background: var(--color-white);
color: var(--text-primary);
font-size: var(--font-xs);
font-weight: 700;
cursor: pointer;
transition: var(--transition);
display: flex;
align-items: center;
justify-content: center;
border-radius: var(--color-radius-sm) 0 0 var(--color-radius-sm);
box-sizing: border-box;
user-select: none;
}
.rental-card-quantity-btn:last-child {
border-radius: 0 var(--color-radius-sm) var(--color-radius-sm) 0;
}
.rental-card-quantity-btn:hover:not(:disabled) {
background: var(--color-primary-light);
border-color: var(--color-primary);
color: var(--color-primary);
}
.rental-card-quantity-btn:active:not(:disabled) {
background: var(--color-primary);
color: var(--color-white);
}
.rental-card-quantity-btn:disabled {
background: var(--color-white-light);
color: var(--text-light);
cursor: not-allowed;
opacity: 0.5;
}
.rental-card-quantity-display {
flex: 1;
height: 24px;
border: 1px solid var(--color-border);
border-left: none;
border-right: none;
background: var(--color-white);
color: var(--text-primary);
font-size: 9px;
font-weight: 600;
text-align: center;
padding: 0;
margin: 0;
box-sizing: border-box;
border-radius: 0;
min-width: 30px;
} .rental-card-info-button {
width: 24px;
height: 24px;
border: none;
border-radius: 50%;
background: rgba(203, 223, 255, 0.9);
color: #1e40af;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
box-shadow: var(--shadow-glass);
font-size: 9px;
font-weight: 700;
flex-shrink: 0;
}
.rental-card-info-button:hover {
background: rgba(147, 197, 253, 0.95);
color: #1e3a8a;
transform: scale(1.1);
box-shadow: var(--shadow-glass-lg);
}
.rental-card-info-button:active {
transform: scale(0.95);
} @media (min-width: 769px) {
.rental-related-product-card-new {
padding: var(--space-3);
}
.rental-card-single-row {
gap: var(--space-4);
}
.rental-card-title {
font-size: var(--font-base);
margin-left: var(--space-3);
}
.rental-card-image {
width: 50px;
height: 50px;
}
.rental-card-prices {
gap: var(--space-3);
margin-right: var(--space-4);
}
.rental-price-item {
min-width: 60px;
}
.rental-price-item .rental-price-label {
font-size: var(--font-xs);
}
.rental-price-item .rental-price-value {
font-size: var(--font-sm);
}
.rental-price-item.rental-deposit .rental-price-value {
font-size: var(--font-xs);
padding: var(--space-1) var(--space-2);
}
.rental-card-quantity-btn {
width: 28px;
height: 28px;
font-size: var(--font-sm);
}
.rental-card-quantity-display {
height: 28px;
font-size: var(--font-xs);
min-width: 40px;
}
.rental-card-info-button {
width: 28px;
height: 28px;
font-size: var(--font-xs);
}
}
@media (max-width: 768px) {
.rental-related-product-card-new {
padding: var(--space-3);
}
.rental-card-single-row {
flex-wrap: wrap;
align-items: flex-start;
gap: var(--space-2);
}
.rental-card-header {
flex: 1 1 100%;
display: flex;
align-items: center;
gap: var(--space-2);
}
.rental-card-image {
width: 48px;
height: 48px;
flex: 0 0 48px;
}
.rental-card-title {
font-size: var(--font-sm);
flex: 1 1 auto;
}
.rental-card-info-button {
margin: auto;
order: 2;
width: 28px;
height: 28px;
font-size: var(--font-xs);
}
.rental-card-prices {
flex: 1 1 100%;
display: flex;
gap: var(--space-2);
flex-wrap: wrap;
justify-content: space-evenly;
align-items: flex-start;
margin-top: var(--space-2);
}
.rental-price-item { min-width: 140px;
align-items: flex-start;
text-align: left;
}
.rental-price-item .rental-price-label {
font-size: var(--font-xs);
}
.rental-price-item .rental-price-value {
font-size: var(--font-sm);
}
.rental-card-quantity-control {
flex: 1 1 100%;
margin-top: var(--space-2);
}
.rental-card-quantity-btn {
width: 40px;
height: 44px;
font-size: var(--font-base);
}
.rental-card-quantity-display {
height: 44px;
font-size: var(--font-sm);
min-width: 60px;
}
}
@media (max-width: 480px) {
.rental-card-single-row {
gap: var(--space-2);
}
.rental-card-header {
flex: 1 1 100%;
}
.rental-card-title {
font-size: var(--font-sm);
flex: 1 1 auto;
}
.rental-card-image {
width: 44px;
height: 44px;
flex: 0 0 44px;
}
.rental-card-prices {
gap: var(--space-2);
}
.rental-price-item { min-width: 20px;
}
.rental-card-quantity-btn {
width: 36px;
height: 40px;
font-size: var(--font-sm);
}
.rental-card-quantity-display {
height: 40px;
font-size: var(--font-sm);
min-width: 56px;
}
.rental-card-info-button {
width: 26px;
height: 26px;
font-size: var(--font-xs);
}
} .rental-related-product-card-simple {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--color-radius);
box-shadow: var(--shadow-glass);
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-3);
transition: var(--transition);
position: relative;
width: 100%;
box-sizing: border-box;
}
.rental-related-product-card-simple:hover {
transform: translateY(-2px);
box-shadow: var(--shadow-glass-lg);
border-color: var(--color-primary-medium);
}
.rental-related-product-card-simple.selected {
border-color: var(--color-primary);
border-width: 2px;
box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
} .rental-related-product-card-simple.unavailable {
background: var(--color-white-light);
border-color: var(--color-error);
opacity: 0.7;
cursor: not-allowed;
}
.rental-related-product-card-simple.unavailable:hover {
transform: none;
box-shadow: var(--shadow-glass);
border-color: var(--color-error);
}
.rental-unavailable-label {
color: var(--color-error);
font-weight: 600;
font-size: var(--font-sm);
text-align: center;
flex: 1;
} .rental-related-first-row {
display: none;
} .rental-related-product-card-horizontal>.rental-related-quantity {
display: block;
}
.rental-related-product-card-horizontal>.rental-related-product-info {
display: flex;
} .rental-related-product-card-simple .rental-related-quantity {
flex-shrink: 0;
min-width: 50px;
}
.rental-related-product-card-simple .rental-related-product-quantity-selector {
width: 50px;
height: 32px;
margin: 0;
cursor: pointer;
border: 1px solid var(--color-border);
border-radius: var(--color-radius-sm);
background: var(--color-white);
font-size: var(--font-sm);
text-align: center;
padding: var(--space-1);
color: var(--text-primary);
font-weight: 600;
transition: var(--transition);
box-shadow: none;
}
.rental-related-product-card-simple .rental-related-product-quantity-selector:focus {
outline: none;
border-color: var(--color-primary);
box-shadow: 0 0 0 2px var(--color-primary-light);
}
.rental-related-product-card-simple .rental-related-product-quantity-selector:hover {
border-color: var(--color-primary-medium);
}
.rental-related-product-info {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1; } .rental-related-product-card-simple .rental-related-image {
flex-shrink: 0;
width: 40px;
height: 40px;
border-radius: var(--color-radius-sm);
overflow: hidden;
border: 1px solid var(--color-border);
background: var(--color-white-medium);
box-shadow: var(--shadow-inner);
}
.rental-related-product-card-simple .rental-related-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
border-radius: 0 !important;
box-shadow: none !important;
} .rental-related-product-card-simple .rental-related-title {
flex-shrink: 0;
min-width: 80px;
max-width: 120px;
display: flex;
align-items: center;
}
.rental-related-product-card-simple .rental-product-title {
color: var(--text-primary);
font-weight: 600;
font-size: var(--font-sm);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
}
.rental-related-name {
flex: 1; }
.rental-product-name {
color: var(--text-primary);
text-decoration: none;
font-weight: 600;
font-size: var(--font-base);
line-height: 1.3;
display: block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: help;
position: relative;
} .rental-product-name[title]:hover::after {
content: attr(title);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: var(--color-dark);
color: var(--color-white);
padding: var(--space-2) var(--space-3);
border-radius: var(--color-radius-sm);
font-size: var(--font-sm);
font-weight: normal;
white-space: normal;
max-width: 250px;
width: max-content;
text-align: center;
z-index: 1000;
box-shadow: var(--shadow-glass-lg);
border: 1px solid var(--color-border);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
}
.rental-product-name[title]:hover::before {
content: '';
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
border: 5px solid transparent;
border-top-color: var(--color-dark);
margin-bottom: -5px;
z-index: 1001;
}
.rental-related-days {
color: var(--text-secondary);
font-size: var(--font-sm);
font-weight: normal;
margin-left: 0;
display: block;
margin-top: var(--space-1);
white-space: nowrap;
} .rental-related-product-card-simple .rental-related-discount,
.rental-related-product-card-simple .rental-related-deposit,
.rental-related-product-card-simple .rental-related-balance {
flex-shrink: 0;
text-align: center;
min-width: 70px;
padding: var(--space-1);
}
.rental-related-product-card-simple .rental-price-label {
font-size: var(--font-xs);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: var(--space-1);
font-weight: 600;
white-space: nowrap;
text-align: center;
line-height: 1.2;
}
.rental-related-product-card-simple .rental-price-value {
font-size: var(--font-sm);
font-weight: 700;
line-height: 1.2;
color: var(--text-primary);
white-space: nowrap;
text-align: center;
} .rental-related-product-card-simple .rental-related-discount .rental-price-value {
color: var(--color-primary-light);
}
.rental-related-product-card-simple .rental-related-discount.empty .rental-price-value {
color: var(--text-secondary);
opacity: 0.6;
} .rental-related-product-card-simple .rental-related-deposit .rental-price-value {
color: var(--color-primary);
background: var(--color-primary-light);
padding: var(--space-1) var(--space-2);
border-radius: var(--color-radius-sm);
font-size: var(--font-xs);
} .rental-related-product-card-simple .rental-related-balance .rental-price-value {
color: var(--text-secondary);
font-weight: 600;
}
.rental-price-base {
color: var(--text-secondary);
text-decoration: line-through;
font-size: var(--font-xs);
}
.rental-price-discount {
color: var(--color-primary-light);
}
.rental-price-total {
color: var(--text-primary);
font-weight: 700;
}
.rental-price-deposit {
color: var(--color-primary);
background: var(--color-primary-light);
padding: var(--space-1) var(--space-2);
border-radius: var(--color-radius-sm);
font-size: var(--font-sm);
font-weight: 700;
}
.rental-price-balance {
color: var(--text-secondary);
font-size: var(--font-sm);
font-weight: normal;
} .rental-related-product-card-simple .rental-related-info-btn {
flex-shrink: 0;
margin-left: auto;
}
.rental-related-product-card-simple .rental-info-button {
width: 32px;
height: 32px;
border: none;
border-radius: 50%;
background: rgba(203, 223, 255, 0.9);
color: #1e40af;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: var(--transition);
box-shadow: var(--shadow-glass);
font-size: var(--font-sm);
font-weight: 700;
}
.rental-related-product-card-simple .rental-info-button:hover {
background: rgba(147, 197, 253, 0.95);
color: #1e3a8a;
transform: scale(1.1);
box-shadow: var(--shadow-glass-lg);
}
.rental-related-product-card-simple .rental-info-button:active {
transform: scale(0.95);
}
.rental-related-product-card-simple .rental-info-button i {
font-size: var(--font-sm);
line-height: 1;
} .rental-price-tooltip {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--color-radius);
box-shadow: var(--shadow-glass-lg);
padding: var(--space-3);
min-width: 200px;
max-width: 250px;
font-size: var(--font-sm);
z-index: 9999;
animation: tooltipFadeIn 0.2s ease-out;
}
@keyframes tooltipFadeIn {
from {
opacity: 0;
transform: translateY(-5px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.rental-tooltip-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-2);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--color-border);
}
.rental-tooltip-header strong {
color: var(--text-primary);
font-size: var(--font-sm);
font-weight: 600;
}
.rental-tooltip-days {
color: var(--text-secondary);
font-size: var(--font-xs);
background: var(--color-primary-light);
padding: 2px 6px;
border-radius: var(--color-radius-sm);
}
.rental-tooltip-content {
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.rental-tooltip-row {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
}
.rental-tooltip-row.total {
border-top: 1px solid var(--color-border);
padding-top: var(--space-2);
margin-top: var(--space-1);
font-weight: 600;
}
.rental-tooltip-label {
color: var(--text-secondary);
font-size: var(--font-xs);
}
.rental-tooltip-value {
color: var(--text-primary);
font-weight: 600;
font-size: var(--font-xs);
}
.rental-tooltip-value.discount {
color: var(--text-secondary);
}
.rental-tooltip-value.deposit {
color: var(--text-secondary);
background: var(--color-primary-light);
padding: 2px 4px;
border-radius: var(--color-radius-sm);
}
.rental-tooltip-value.balance {
color: var(--text-secondary);
} .rental-info-button.tooltip-active {
background: rgba(147, 197, 253, 0.95) !important;
color: #1e3a8a !important;
transform: scale(1.05);
} .rental-related-listino-mobile,
.rental-related-sconto-mobile {
display: none;
} .rental-cart-section {
background: linear-gradient(135deg, var(--color-white-light), var(--color-white-medium));
position: relative;
}
.rental-cart-section::before {
display: none;
}
.rental-cart-controls {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-4); width: 100%;
}
.rental-quantity-section {
display: flex;
align-items: baseline;
gap: var(--space-3);
}
.rental-quantity-label {
font-size: var(--font-lg);
font-weight: 600;
color: var(--text-primary);
letter-spacing: -0.01em;
}
.rental-quantity-selector {
padding: var(--space-3) var(--space-4);
background: var(--color-white);
border: none;
border-radius: 0;
font-size: var(--font-lg);
font-weight: 600;
color: var(--text-primary);
min-width: 80px;
transition: var(--transition);
cursor: pointer;
box-shadow: none;
}
.rental-quantity-selector:focus {
outline: none;
border: none;
box-shadow: none;
}
.rental-add-to-cart-btn {
background: var(--color-primary-light);
color: var(--wp--preset--color--contrast);
border: none;
padding: var(--space-4) var(--space-8);
font-size: var(--font-lg);
font-weight: 700;
border-radius: 0;
cursor: pointer;
transition: var(--transition);
display: none;
box-shadow: none;
letter-spacing: -0.025em;
position: relative;
overflow: hidden;
}
.rental-add-to-cart-btn::before {
display: none;
}
.rental-add-to-cart-btn:hover {
background: var(--color-primary-medium);
transform: none;
box-shadow: none;
}
.rental-add-to-cart-btn:hover::before {
display: none;
}
.rental-add-to-cart-btn:active {
background: var(--color-primary);
transform: none;
}
.rental-add-to-cart-btn:disabled {
background: var(--color-dark) !important;
color: var(--text-light) !important;
cursor: not-allowed !important;
transform: none !important;
opacity: 0.5 !important;
}
.rental-add-to-cart-btn:disabled::before {
display: none !important;
}
.rental-add-to-cart-btn:disabled:hover {
background: var(--color-dark) !important;
transform: none !important;
box-shadow: none !important;
} .rental-cart-summary {
background: var(--color-white);
border: 1px solid var(--color-border);
border-radius: var(--color-radius);
padding: var(--space-5);
box-shadow: none;
display: none; margin-bottom: var(--space-4);
width: 100%;
box-sizing: border-box;
}
.rental-cart-summary-title {
font-size: var(--font-lg);
font-weight: 700;
color: var(--text-primary);
margin-bottom: var(--space-4);
text-align: center;
letter-spacing: -0.01em;
}
.rental-cart-summary-row {
display: flex;
justify-content: space-around;
align-items: flex-start;
gap: var(--space-4);
}
.rental-cart-summary-column {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
min-width: 0;
margin: auto;
}
.rental-cart-summary-label {
font-size: var(--font-sm);
font-weight: 600;
color: var(--text-secondary);
margin-bottom: var(--space-2);
line-height: 1.3;
display: flex;
align-items: center;
justify-content: center;
gap: var(--space-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-cart-summary-label i {
font-size: var(--font-xs);
opacity: 0.8;
}
.rental-cart-summary-value {
font-size: var(--font-lg);
font-weight: 700;
color: var(--text-primary);
line-height: 1.2;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-cart-summary-value.rental-cart-summary-deposit {
color: var(--text-primary);
font-size: var(--font-xl);
} .rental-cart-message {
display: none;
padding-top: var(--space-5) !important;
text-align: center;
font-size: var(--font-base);
opacity: 0.9;
font-style: italic;
line-height: 1.5;
color: var(--text-secondary) !important;
font-weight: 500;
}
.rental-cart-message:not(:empty) {
display: block;
}
.rental-cart-message.success {
background: var(--color-success);
color: var(--text-secondary) !important;
border: 1px solid var(--success-text);
padding: var(--space-4);
border-radius: var(--color-radius-sm);
margin-top: var(--space-4);
}
.rental-cart-message.error {
background: var(--color-error);
color: var(--error-text) !important;
border: 1px solid var(--error-text);
padding: var(--space-4);
border-radius: var(--color-radius-sm);
margin-top: var(--space-4);
} .rental-error-message {
margin: 15px 0;
padding: 0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(220, 38, 38, 0.15);
animation: slideInError 0.3s ease-out;
}
.rental-error-content {
display: flex;
align-items: flex-start;
padding: 16px 20px;
background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%);
border-left: 4px solid #dc2626;
gap: 12px;
}
.rental-error-icon {
font-size: 20px;
flex-shrink: 0;
animation: pulse 2s infinite;
margin-top: 2px;
}
.rental-error-text-container {
flex: 1;
display: flex;
flex-direction: column;
gap: 8px;
}
.rental-error-main-text {
color: #dc2626;
font-size: 14px;
font-weight: 500;
line-height: 1.4;
}
.rental-error-available-dates {
color: #991b1b;
font-size: 13px;
font-weight: 400;
line-height: 1.3;
background: rgba(220, 38, 38, 0.1);
padding: 8px 12px;
border-radius: 6px;
border: 1px solid rgba(220, 38, 38, 0.2);
}
@keyframes slideInError {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes pulse {
0%, 100% {
opacity: 1;
}
50% {
opacity: 0.7;
}
} @media (max-width: 1000px) { #rental-main-container {
width: 100%;
max-width: 100%;
margin: var(--space-3) 0;
}
.rental-dates-section {
margin: var(--space-3) var(--space-3) 0 var(--space-3);
}
.rental-date-picker {
gap: var(--space-3);
width: 100%;
}
}
@media (max-width: 900px) {
#rental-main-container {
width: 100%;
max-width: 100%;
margin: var(--space-2) 0;
}
.rental-dates-section {
margin: var(--space-2) var(--space-2) 0 var(--space-2);
}
.rental-date-picker {
gap: var(--space-2);
}
.rental-date-field {
padding: var(--space-3) var(--space-3);
font-size: var(--font-sm);
}
.rental-date-label {
font-size: var(--font-sm);
} .rental-desktop-only {
display: none !important;
}
.rental-mobile-only {
display: flex !important;
} .rental-related-product-card-simple {
gap: var(--space-2);
padding: var(--space-2);
flex-wrap: wrap;
}
.rental-related-product-card-simple .rental-related-quantity {
min-width: 45px;
}
.rental-related-product-card-simple .rental-related-product-quantity-selector {
width: 45px;
height: 28px;
font-size: var(--font-xs);
}
.rental-related-product-card-simple .rental-related-image {
width: 35px;
height: 35px;
}
.rental-related-product-card-simple .rental-related-title {
min-width: 70px;
max-width: 100px;
}
.rental-related-product-card-simple .rental-product-title {
font-size: var(--font-xs);
}
.rental-related-product-card-simple .rental-related-discount,
.rental-related-product-card-simple .rental-related-deposit,
.rental-related-product-card-simple .rental-related-balance {
min-width: 60px;
padding: 2px;
}
.rental-related-product-card-simple .rental-price-label {
font-size: 9px;
margin-bottom: 2px;
}
.rental-related-product-card-simple .rental-price-value {
font-size: var(--font-xs);
}
.rental-related-product-card-simple .rental-info-button {
width: 28px;
height: 28px;
font-size: var(--font-xs);
background: rgba(203, 223, 255, 0.9);
color: #1e40af;
font-weight: 700;
}
.rental-related-first-row {
align-items: center;
gap: var(--space-3);
order: 1;
}
.rental-related-quantity {
flex-shrink: 0;
}
.rental-related-product-info {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 1;
min-width: 0;
} .rental-related-name {
flex: 1;
min-width: 0;
max-width: 120px; }
.rental-product-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
display: block;
font-size: var(--font-sm);
}
.rental-related-days {
white-space: nowrap;
font-size: 10px;
}
.rental-related-listino-mobile,
.rental-related-sconto-mobile {
flex-shrink: 0;
text-align: right;
min-width: 50px;
display: block;
} .rental-related-listino-mobile .rental-price-label,
.rental-related-sconto-mobile .rental-price-label {
color: var(--text-primary) !important;
font-size: 9px !important;
font-weight: 600 !important;
line-height: 1.2 !important;
white-space: normal;
word-break: break-word;
text-align: right;
} .rental-related-listino-mobile .rental-price-value,
.rental-related-sconto-mobile .rental-price-value {
font-size: 11px !important;
font-weight: 700 !important;
line-height: 1.2 !important;
white-space: normal;
word-break: break-word;
text-align: right;
} .rental-related-prices {
order: 2;
justify-content: space-between;
gap: var(--space-2);
padding-top: var(--space-2);
border-top: 1px solid var(--color-border);
}
.rental-price-column {
min-width: auto;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
} .rental-related-prices .rental-price-column:nth-child(1),
.rental-related-prices .rental-price-column:nth-child(2) {
display: none;
}
}
@media (max-width: 768px) {
:root {
--rental-related-image-size: 45px;
} .rental-error-content {
padding: 14px 16px;
gap: 10px;
}
.rental-error-icon {
font-size: 18px;
}
.rental-error-main-text {
font-size: 13px;
}
.rental-error-available-dates {
font-size: 12px;
padding: 6px 10px;
} .rental-product-name[title]:hover::after,
.rental-product-name[title]:hover::before {
display: none;
}
.rental-product-name {
cursor: default;
} .rental-card-header {
padding: var(--space-2) var(--space-3);
}
.rental-card-title {
font-size: var(--font-base);
}
.rental-card-header .rental-info-button {
width: 32px;
height: 32px;
font-size: var(--font-xs);
}
.rental-card-content {
padding: var(--space-3);
min-height: 80px;
gap: var(--space-3);
}
.rental-card-image {
width: 60px;
height: 60px;
}
.rental-card-footer {
padding: var(--space-2) var(--space-3);
}
.rental-card-quantity-btn {
width: 32px;
height: 32px;
font-size: var(--font-sm);
}
.rental-card-quantity-display {
height: 32px;
font-size: var(--font-xs);
}
#rental-main-container {
margin: var(--space-2) 0;
border-radius: var(--color-radius);
width: 100%;
max-width: 100%;
}
.rental-section {
padding: var(--space-4);
width: 100%;
}
.rental-dates-section {
margin: var(--space-2) var(--space-2) 0 var(--space-2);
}
.rental-date-picker {
flex-direction: column;
gap: var(--space-3);
width: 100%;
margin-bottom: var(--space-6);
} .rental-date-picker.single-day-booking {
flex-direction: column;
}
.rental-date-picker .rental-date-input,
.rental-date-picker .rental-quantity-input {
flex: none;
width: 100%;
min-width: 0;
}
.rental-date-field {
padding: var(--space-3) var(--space-3);
font-size: var(--font-base);
height: 48px;
min-height: 48px;
}
input[type="date"].rental-date-field {
height: 48px;
min-height: 48px;
}
select.rental-date-field {
height: 48px;
min-height: 48px;
}
.rental-quantity-btn {
width: 40px;
height: 48px;
font-size: var(--font-lg);
}
.rental-quantity-display {
height: 48px;
font-size: var(--font-base);
}
.rental-date-label {
font-size: var(--font-sm);
margin-bottom: var(--space-1);
}
.rental-cart-controls {
margin-top: var(--space-4);
}
.rental-cart-summary {
padding: var(--space-4);
margin-bottom: var(--space-3);
}
.rental-cart-summary-row {
gap: var(--space-2); }
.rental-cart-summary-label {
font-size: var(--font-xs);
margin-bottom: var(--space-1);
}
.rental-cart-summary-value {
font-size: var(--font-base);
}
.rental-cart-summary-value.rental-cart-summary-deposit {
font-size: var(--font-lg);
}
.rental-quantity-section {
justify-content: center;
}
.rental-add-to-cart-btn {
width: 100%;
text-align: center;
padding: var(--space-5) var(--space-6);
}
.rental-related-products-grid {
gap: var(--space-2);
}
.rental-section-title {
font-size: var(--font-xl);
}
.rental-quantity-label {
font-size: var(--font-base);
}
.rental-related-product-card-horizontal {
gap: var(--space-3);
padding: var(--space-3);
}
.rental-related-name {
max-width: 130px;
}
.rental-related-product-info {
gap: var(--space-3);
}
.rental-product-name {
font-size: var(--font-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-related-days {
font-size: var(--font-xs);
white-space: nowrap;
}
.rental-related-prices {
gap: var(--space-2);
}
.rental-price-column .rental-price-label {
color: var(--text-secondary);
font-size: 9px;
white-space: normal;
word-break: break-word;
text-align: center;
}
.rental-price-column .rental-price-value {
font-size: var(--font-xs);
white-space: normal;
word-break: break-word;
text-align: center;
}
.rental-price-deposit {
font-size: var(--font-xs);
padding: 3px 4px;
}
}
@media (max-width: 600px) {
#rental-main-container {
width: 100%;
max-width: 100%;
} .rental-related-product-card-simple {
padding: var(--space-2);
gap: var(--space-1);
flex-wrap: nowrap;
overflow-x: auto;
}
.rental-related-product-card-simple .rental-related-quantity {
min-width: 40px;
}
.rental-related-product-card-simple .rental-related-product-quantity-selector {
width: 40px;
height: 26px;
font-size: 10px;
}
.rental-related-product-card-simple .rental-related-image {
width: 30px;
height: 30px;
}
.rental-related-product-card-simple .rental-related-title {
min-width: 60px;
max-width: 80px;
}
.rental-related-product-card-simple .rental-product-title {
font-size: 10px;
}
.rental-related-product-card-simple .rental-related-discount,
.rental-related-product-card-simple .rental-related-deposit,
.rental-related-product-card-simple .rental-related-balance {
min-width: 55px;
padding: 1px;
}
.rental-related-product-card-simple .rental-price-label {
font-size: 8px;
margin-bottom: 1px;
}
.rental-related-product-card-simple .rental-price-value {
font-size: 10px;
}
.rental-related-product-card-simple .rental-info-button {
width: 26px;
height: 26px;
font-size: 10px;
background: rgba(203, 223, 255, 0.9);
color: #1e40af;
font-weight: 700;
}
.rental-related-name {
max-width: 110px;
}
.rental-product-name {
font-size: 13px;
}
.rental-related-days {
font-size: 11px;
}
.rental-related-listino-mobile,
.rental-related-sconto-mobile {
min-width: 48px;
}
.rental-related-listino-mobile .rental-price-label,
.rental-related-sconto-mobile .rental-price-label {
font-size: 9px !important;
white-space: normal;
word-break: break-word;
text-align: right;
}
.rental-related-listino-mobile .rental-price-value,
.rental-related-sconto-mobile .rental-price-value {
font-size: 11px !important;
white-space: normal;
word-break: break-word;
text-align: right;
}
.rental-related-prices {
gap: var(--space-1);
}
.rental-price-column .rental-price-label {
color: var(--text-secondary);
font-size: 8px;
white-space: normal;
word-break: break-word;
text-align: center;
}
.rental-price-column .rental-price-value {
font-size: 11px;
white-space: normal;
word-break: break-word;
text-align: center;
}
.rental-price-deposit {
font-size: 11px;
padding: 2px 3px;
}
}
@media (max-width: 600px) { .rental-dates-section {
margin: var(--space-1) var(--space-1) 0 var(--space-1);
}
.rental-section {
padding: var(--space-3);
}
.rental-date-picker {
gap: var(--space-2);
margin-bottom: var(--space-4);
}
.rental-date-field {
padding: var(--space-2) var(--space-3);
font-size: var(--font-sm);
height: 44px;
min-height: 44px;
}
input[type="date"].rental-date-field {
height: 44px;
min-height: 44px;
}
select.rental-date-field {
height: 44px;
min-height: 44px;
}
.rental-quantity-btn {
width: 36px;
height: 44px;
font-size: var(--font-base);
}
.rental-quantity-display {
height: 44px;
font-size: var(--font-sm);
}
.rental-date-label {
font-size: var(--font-xs);
margin-bottom: var(--space-1);
} .rental-main-price-summary {
padding: var(--space-3);
margin-bottom: var(--space-2);
}
.rental-main-price-row {
gap: var(--space-1);
margin-bottom: var(--space-2);
}
.rental-main-price-label {
font-size: var(--font-xs);
margin-bottom: var(--space-1);
}
.rental-main-price-value {
font-size: var(--font-sm);
}
.rental-main-price-value.rental-total-value,
.rental-main-price-value.rental-deposit-value {
font-size: var(--font-base);
}
}
@media (max-width: 480px) {
:root {
--rental-related-image-size: 40px;
} .rental-error-content {
padding: 12px 14px;
gap: 8px;
}
.rental-error-icon {
font-size: 16px;
}
.rental-error-main-text {
font-size: 12px;
}
.rental-error-available-dates {
font-size: 11px;
padding: 5px 8px;
}
#rental-main-container {
width: 100%;
max-width: 100%;
margin: var(--space-1) 0;
} .rental-card-header {
padding: var(--space-2);
}
.rental-card-title {
font-size: var(--font-sm);
}
.rental-card-header .rental-info-button {
width: 28px;
height: 28px;
font-size: var(--font-xs);
}
.rental-card-content {
padding: var(--space-2);
min-height: 70px;
gap: var(--space-2);
}
.rental-card-image {
width: 50px;
height: 50px;
}
.rental-price-item .rental-price-label {
font-size: var(--font-xs);
}
.rental-price-item .rental-price-value {
font-size: var(--font-sm);
}
.rental-card-footer {
padding: var(--space-2);
}
.rental-card-quantity-btn {
width: 28px;
height: 28px;
font-size: var(--font-xs);
}
.rental-card-quantity-display {
height: 28px;
font-size: var(--font-xs);
}
.rental-dates-section {
margin: var(--space-1) var(--space-1) 0 var(--space-1);
}
.rental-section {
padding: var(--space-2);
}
.rental-date-picker {
gap: var(--space-2);
margin-bottom: var(--space-3);
}
.rental-date-field {
padding: var(--space-2);
font-size: var(--font-sm);
height: 40px;
min-height: 40px;
}
input[type="date"].rental-date-field {
height: 40px;
min-height: 40px;
}
select.rental-date-field {
height: 40px;
min-height: 40px;
}
.rental-quantity-btn {
width: 32px;
height: 40px;
font-size: var(--font-sm);
}
.rental-quantity-display {
height: 40px;
font-size: var(--font-sm);
}
.rental-date-label {
font-size: var(--font-xs);
margin-bottom: var(--space-1);
} .rental-related-product-card-simple {
padding: var(--space-1);
gap: 2px;
min-height: 50px;
}
.rental-related-product-card-simple .rental-related-quantity {
min-width: 35px;
}
.rental-related-product-card-simple .rental-related-product-quantity-selector {
width: 35px;
height: 24px;
font-size: 9px;
}
.rental-related-product-card-simple .rental-related-image {
width: 25px;
height: 25px;
}
.rental-related-product-card-simple .rental-related-title {
min-width: 50px;
max-width: 70px;
}
.rental-related-product-card-simple .rental-product-title {
font-size: 9px;
}
.rental-related-product-card-simple .rental-related-discount,
.rental-related-product-card-simple .rental-related-deposit,
.rental-related-product-card-simple .rental-related-balance {
min-width: 50px;
padding: 1px;
}
.rental-related-product-card-simple .rental-price-label {
font-size: 7px;
margin-bottom: 1px;
line-height: 1;
}
.rental-related-product-card-simple .rental-price-value {
font-size: 9px;
line-height: 1;
}
.rental-related-product-card-simple .rental-info-button {
width: 24px;
height: 24px;
font-size: 9px;
background: rgba(203, 223, 255, 0.9);
color: #1e40af;
font-weight: 700;
}
.rental-unavailable-label {
font-size: var(--font-xs);
}
.rental-section {
padding: var(--space-4);
width: 100%;
}
.rental-section-title {
font-size: var(--font-lg);
}
.rental-date-label,
.rental-date-field {
font-size: var(--font-sm);
}
.rental-days-display {
font-size: var(--font-base);
padding: var(--space-4);
}
.rental-add-to-cart-btn {
font-size: var(--font-base);
}
.rental-cart-summary {
padding: var(--space-3);
}
.rental-cart-summary-title {
font-size: var(--font-base);
margin-bottom: var(--space-3);
}
.rental-cart-summary-row {
gap: var(--space-1);
display: flex;
flex-direction: column;
}
.rental-cart-summary-label {
font-size: var(--font-xs);
margin-bottom: var(--space-1);
}
.rental-cart-summary-value {
font-size: var(--font-sm);
}
.rental-cart-summary-value.rental-cart-summary-deposit {
font-size: var(--font-base);
} .rental-related-product-card-horizontal {
padding: var(--space-2) var(--space-3);
}
.rental-related-first-row {
gap: var(--space-2);
}
.rental-related-product-info {
gap: var(--space-2);
}
.rental-related-name {
max-width: 100px; }
.rental-product-name {
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-related-days {
font-size: 10px;
white-space: nowrap;
}
.rental-related-listino-mobile,
.rental-related-sconto-mobile {
min-width: 45px;
}
.rental-related-listino-mobile .rental-price-label,
.rental-related-sconto-mobile .rental-price-label {
font-size: 8px !important;
white-space: normal;
word-break: break-word;
text-align: right;
}
.rental-related-listino-mobile .rental-price-value,
.rental-related-sconto-mobile .rental-price-value {
font-size: 10px !important;
white-space: normal;
word-break: break-word;
text-align: right;
} .rental-price-column:first-child {
display: none;
}
.rental-related-prices {
gap: 2px;
}
.rental-price-column .rental-price-label {
font-size: 7px;
white-space: normal;
word-break: break-word;
text-align: center;
}
.rental-price-column .rental-price-value {
font-size: 9px;
white-space: normal;
word-break: break-word;
text-align: center;
}
.rental-price-deposit {
font-size: 9px;
padding: 1px 2px;
}
} .rental-related-product-card {
background: var(--color-white);
backdrop-filter: var(--color-blur);
-webkit-backdrop-filter: var(--color-blur);
border: 1px solid var(--color-border);
border-radius: var(--color-radius);
overflow: hidden;
transition: var(--transition);
box-shadow: var(--shadow-glass);
}
.rental-related-product-card:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-glass-lg);
border-color: var(--color-primary-medium);
}
.rental-related-product-card.selected {
border-color: var(--color-primary);
border-width: 2px;
box-shadow: 0 0 15px rgba(0, 123, 255, 0.3);
} .rental-desktop-only {
display: flex;
}
.rental-mobile-only {
display: none;
} @keyframes glassSlideIn {
from {
opacity: 0;
transform: translateY(20px) scale(0.95);
backdrop-filter: blur(0px);
}
to {
opacity: 1;
transform: translateY(0) scale(1);
backdrop-filter: var(--color-blur);
}
}
@keyframes glassShimmer {
0% {
background-position: -200% 0;
}
100% {
background-position: 200% 0;
}
}
.rental-price-breakdown,
.rental-related-section {
animation: glassSlideIn 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}
.rental-add-to-cart-btn {
animation: glassSlideIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}       ::-webkit-scrollbar {
width: 8px;
}
::-webkit-scrollbar-track {
background: var(--color-white-medium);
border-radius: 4px;
}
::-webkit-scrollbar-thumb {
background: var(--color-primary-medium);
border-radius: 4px;
border: 1px solid var(--color-border);
}
::-webkit-scrollbar-thumb:hover {
background: var(--color-primary);
} .rental-loading {
position: relative;
opacity: 0.7;
pointer-events: none;
}
.rental-loading::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 24px;
height: 24px;
margin: -12px 0 0 -12px;
border: 2px solid transparent;
border-top: 2px solid var(--color-primary);
border-radius: 50%;
animation: glassSpinner 1s linear infinite;
backdrop-filter: var(--color-blur);
-webkit-backdrop-filter: var(--color-blur);
}
@keyframes glassSpinner {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
} .rental-date-field:focus,
.rental-quantity-selector:focus,
.rental-add-to-cart-btn:focus {
outline: none;
box-shadow: 0 0 0 3px var(--color-primary-light);
} @media print {
#rental-main-container {
background: white !important;
border: 1px solid #ccc !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
}
} @media (max-width: 768px) {
.rental-price-table {
font-size: var(--font-base);
}
.rental-price-breakdown .rental-price-label {
font-size: var(--font-base);
} .rental-main-price-summary {
padding: var(--space-3);
margin-bottom: var(--space-2);
width: 100%;
}
.rental-main-price-row {
gap: var(--space-1);
margin-bottom: var(--space-2);
flex-wrap: wrap;
justify-content: space-between;
}
.rental-main-price-row-secondary {
padding-top: var(--space-2);
justify-content: space-between;
gap: var(--space-2);
flex-wrap: wrap;
}
.rental-main-price-column {
flex: 1;
min-width: 0;
max-width: calc(33.333% - var(--space-1));
}
.rental-main-price-label {
font-size: var(--font-xs);
margin-bottom: var(--space-1);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.rental-main-price-value {
font-size: var(--font-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
}
.rental-main-price-value.rental-total-value,
.rental-main-price-value.rental-deposit-value {
font-size: var(--font-base);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-main-price-label {
font-size: var(--font-xs);
margin-bottom: var(--space-2);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-main-price-value {
font-size: var(--font-lg);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-main-price-value.rental-total-value {
font-size: var(--font-xl);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.rental-related-product-card-horizontal .rental-price-column .rental-price-label {
color: var(--text-secondary) !important;
font-size: var(--font-base);
}
.rental-price-value {
font-size: var(--font-lg);
}
.rental-total-label,
.rental-total-value,
.rental-deposit-label,
.rental-deposit-value,
.rental-payment-label,
.rental-payment-value {
font-size: var(--font-xl);
}
.rental-info-text {
font-size: var(--font-sm);
}
}
@media (max-width: 480px) { .rental-main-price-summary {
padding: var(--space-2);
width: 100%;
}
.rental-main-price-row {
gap: var(--space-1);
margin-bottom: var(--space-1);
flex-wrap: wrap;
justify-content: space-between;
}
.rental-main-price-row-secondary {
padding-top: var(--space-1);
gap: var(--space-1);
flex-wrap: wrap;
justify-content: space-between;
}
.rental-main-price-column {
flex: 1;
min-width: 0;
max-width: calc(33.333% - 2px);
margin-bottom: var(--space-1);
}
.rental-main-price-label {
font-size: 9px;
margin-bottom: var(--space-1);
gap: 2px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
line-height: 1.2;
}
.rental-main-price-label i {
font-size: 8px;
}
.rental-main-price-value {
font-size: var(--font-xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
text-align: center;
line-height: 1.2;
}
.rental-main-price-value.rental-total-value,
.rental-main-price-value.rental-deposit-value {
font-size: var(--font-sm);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 700;
}
.rental-cart-summary-label {
gap: 2px;
}
.rental-cart-summary-label i {
font-size: 10px;
}
.rental-main-price-label {
font-size: var(--font-xs);
margin-bottom: var(--space-1);
}
.rental-main-price-value {
font-size: var(--font-base);
}
.rental-main-price-value.rental-total-value {
font-size: var(--font-lg);
font-weight: 800;
}
.rental-total-label,
.rental-total-value,
.rental-deposit-label,
.rental-deposit-value,
.rental-payment-label,
.rental-payment-value {
font-size: var(--font-lg);
}
}  body.rental-product.single-product .wc-block-components-quantity-selector,
body.rental-product.single-product .wp-block-woocommerce-product-add-to-cart-form,
body.rental-product.single-product .cart,
body.rental-product.single-product form.cart,
body.rental-product.single-product .quantity, body.rental-product.single-product button[name="add-to-cart"],
body.rental-product.single-product .single_add_to_cart_button,
body.rental-product .wc-block-components-quantity-selector,
body.rental-product .wp-block-woocommerce-product-add-to-cart-form .wc-block-components-quantity-selector,
body.rental-product .wp-block-woocommerce-product-add-to-cart-form button[type="submit"],
body.rental-product form.cart .quantity,
body.rental-product form.cart button[name="add-to-cart"] {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}  body.rental-product .wp-block-woocommerce-product-price:empty,
body.rental-product .wc-block-components-product-price:empty,
body.rental-product .price:empty {
display: none !important;
} body.rental-product .price {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
position: static !important;
} body.rental-product .price:has(del),
body.rental-product .price:has(ins),
body.rental-product .wc-block-components-product-price:has(del),
body.rental-product .wc-block-components-product-price:has(ins),
body.rental-product .wp-block-woocommerce-product-price:has(del),
body.rental-product .wp-block-woocommerce-product-price:has(ins) {
display: none !important;
}  .rental-related-product-card-horizontal.fixed-price .rental-related-prices {
display: flex;
justify-content: space-around;
align-items: flex-start;
gap: var(--space-4);
}
.rental-related-product-card-horizontal.fixed-price .rental-price-column {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
min-width: 70px;
} @media (max-width: 768px) {
.rental-related-product-card-horizontal.fixed-price .rental-related-prices {
gap: var(--space-2);
}
.rental-related-product-card-horizontal.fixed-price .rental-price-column {
min-width: 55px;
}
}
@media (max-width: 600px) {
.rental-related-product-card-horizontal.fixed-price .rental-related-prices {
gap: var(--space-1);
}
.rental-related-product-card-horizontal.fixed-price .rental-price-column {
min-width: 45px;
}
}  #rental-variations-section.rental-variations-hidden,
.rental-variations-section.rental-variations-hidden {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
height: 0 !important;
overflow: hidden !important;
margin: 0 !important;
padding: 0 !important;
} #rental-variations-section:not(.rental-variations-hidden),
.rental-variations-section:not(.rental-variations-hidden) {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
height: auto !important;
overflow: visible !important;
margin: var(--space-4) 0 0 0 !important;
padding: 0 var(--space-8) !important;
} #rental-variations-section,
.rental-variations-section {
background: var(--color-white);
backdrop-filter: var(--color-blur);
-webkit-backdrop-filter: var(--color-blur);
border-radius: var(--color-radius);
box-shadow: var(--shadow-glass);
} .rental-variation-group {
margin-bottom: var(--space-6);
}
.rental-variation-title {
font-size: var(--font-lg);
font-weight: 600;
color: var(--text-primary);
margin-bottom: var(--space-3);
}
.rental-variation-options {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
}
.rental-variation-badge {
display: flex;
flex-direction: column;
align-items: center;
padding: var(--space-3) var(--space-4);
background: var(--color-white);
cursor: pointer;
transition: var(--transition);
min-width: 80px;
text-align: center;
border: 1px solid var(--color-border);
border-radius: var(--color-radius);
}
.rental-variation-badge.available:hover {
background: var(--color-primary-medium);
border: none;
transform: none;
box-shadow: none;
}
.rental-variation-badge.selected {
background: var(--color-primary-light);
border: none;
color: var(--text-primary);
transform: none;
box-shadow: none;
font-weight: 700;
position: relative;
}
.rental-variation-badge.selected .variation-name {
color: var(--text-primary);
font-weight: 700;
}
.rental-variation-badge.selected .variation-quantity {
color: var(--text-primary);
opacity: 0.9;
font-weight: 600;
}
.rental-variation-badge.unavailable {
background: var(--color-error);
border: none;
color: var(--error-text);
cursor: not-allowed;
opacity: 0.6;
}
.rental-variation-badge.insufficient {
background: rgba(251, 146, 60, 0.15);
border: none;
color: #ea580c;
cursor: not-allowed;
opacity: 0.8;
position: relative;
}
.rental-variation-badge.insufficient::after {
content: "⚠️";
position: absolute;
top: -8px;
right: -8px;
font-size: 12px;
background: #ea580c;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
border: 2px solid white;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.variation-name {
font-weight: 600;
font-size: var(--font-base);
}
.variation-quantity {
font-size: var(--font-sm);
opacity: 0.8;
margin-top: var(--space-1);
}
.rental-variations-message {
text-align: center;
padding: var(--space-4);
margin: var(--space-4) 0 0 0;
border-radius: 0;
background: var(--color-white-light);
border: none;
font-size: var(--font-base);
}
.rental-variations-message.warning {
background: var(--color-error);
color: var(--error-text);
border: none;
}
.rental-variations-message.success {
background: var(--color-primary);
color: var(--text-primary);
border: none;
}
.rental-variations-message i {
margin-right: var(--space-2);
} .rental-add-to-cart-btn:disabled {
background: var(--text-primary) !important;
color: var(--color-primary) !important;
cursor: not-allowed !important;
transform: none !important;
opacity: 0.5 !important;
}
.rental-add-to-cart-btn:disabled::before {
display: none !important;
}
.rental-add-to-cart-btn:disabled:hover {
background: var(--color-dark) !important;
transform: none !important;
box-shadow: none !important;
} @media (max-width: 768px) {
.rental-variation-options {
gap: var(--space-2);
}
.rental-variation-badge {
min-width: 70px;
padding: var(--space-2) var(--space-3);
}
.variation-name {
font-size: var(--font-sm);
}
.variation-quantity {
font-size: var(--font-xs);
}
}
@media (max-width: 480px) {
.rental-variations-section.rental-variations-hidden .rental-variations-placeholder {
padding: var(--space-6);
font-size: var(--font-sm);
}
.rental-variation-badge {
min-width: 60px;
padding: var(--space-2);
}
.rental-variation-title {
font-size: var(--font-base);
}
}  .restore-dates-btn {
background: var(--color-success) !important;
color: var(--text-white) !important;
border: none !important;
padding: var(--space-2) var(--space-4) !important;
border-radius: var(--color-radius-sm) !important;
cursor: pointer !important;
font-size: var(--font-sm) !important;
font-weight: 600 !important;
margin-top: var(--space-2) !important;
transition: var(--transition) !important;
display: inline-flex !important;
align-items: center !important;
gap: var(--space-1) !important;
box-shadow: var(--shadow-glass) !important;
}
.restore-dates-btn:hover {
background: color-mix(in srgb, var(--color-success) 80%, var(--wp--preset--color--contrast) 20%) !important;
transform: translateY(-1px) !important;
box-shadow: var(--shadow-glass-lg) !important;
}
.restore-dates-btn:active {
transform: translateY(0) !important;
}
.restore-dates-btn.success {
background: #16a34a !important;
transform: scale(1.05) !important;
} .rental-stock-alert-main {
display: block;
width: 100%;
margin-bottom: var(--space-3);
margin-top: 0;
text-align: center;
font-size: var(--font-base);
color: var(--text-primary);
padding: var(--space-3) var(--space-4);
border-radius: var(--color-radius-sm);
background: var(--color-white-light);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-glass);
}
.rental-stock-alert-main.warning {
background: var(--color-primary);
color: var(--text-primary);
border-color: var(--text-primary);
}
.rental-stock-alert-main.success {
background: var(--color-success);
color: var(--success-text);
border-color: var(--success-text);
}
.rental-stock-alert-main i {
margin-right: var(--space-2);
} body.rental-product .wp-block-post-excerpt__excerpt {
display: none !important;
} .wp-block-post-excerpt{
display: none !important;
}