/**
 * EasePick Custom Styles
 * 
 * Reference: https://easepick.com/css/customize_sample.css
 * This file customizes the EasePick date picker for MaticAssist.
 * 
 * CSS variables based on EasePick customize_sample.css
 */

/* CSS Variables for EasePick customization */
:host {
    --color-bg-default: #3f51b5;
    --color-fg-primary: #ffc107;
    --color-fg-default: #fff;
    --color-fg-accent: #ff9800;
    --color-bg-inrange: #333;
    --day-width: 35px;
    --day-height: 30px;
}

/* Increase start and end date styling */
.container.range-plugin .calendar>.days-grid>.day.start,
.container.range-plugin .calendar>.days-grid>.day.end {
    font-weight: bold;
    transform: scale(1.2);
    z-index: 1;
}

.easepick-wrapper .container.amp-plugin.lock-plugin.range-plugin.show {
    left: -435px;
}

/* Price display styling for EasePick */
.calendar>.days-grid>.day .day-price {
    display: block;
    font-size: 11px;
    font-weight: 600;
    margin-top: 2px;
    line-height: 1.2;
    opacity: 0.9;
}