.px-3 {
    padding-right: 3rem!important
}

.py-3 {
    padding-top: 3rem!important;
    padding-bottom: 3rem!important
}

.px-1 {
    padding-right: 1rem !important;
}
.pl-1, .px-1 {
    padding-left: 1rem !important;
}

.bg-menu {
    background-color: #95c129 !important;
}

/* =============================================
   SHOPPING CART HEADER INDICATOR
   ============================================= */

/* Hide the floating badge - quantity shown in text */
.blockcart.shopping_cart_style_1 a.st_shopping_cart .ajax_cart_bag .ajax_cart_quantity.amount_circle {
    display: none !important;
}

/* Flex container alignment */
.blockcart.shopping_cart_style_1 a.st_shopping_cart .flex_container {
    display: flex !important;
    align-items: center !important;
}

/* Hide original cart bag styling completely */
.blockcart.shopping_cart_style_1 a.st_shopping_cart .ajax_cart_bag {
    display: flex !important;
    align-items: center !important;
    position: relative;
    background: none !important;
    border: none !important;
    width: auto !important;
    height: auto !important;
}

/* Hide the original bag shape (the CSS-drawn shopping bag) */
.blockcart.shopping_cart_style_1 a.st_shopping_cart .ajax_cart_bag::before,
.blockcart.shopping_cart_style_1 a.st_shopping_cart .ajax_cart_bag::after {
    display: none !important;
    content: none !important;
}

/* Hide the handle element and its pseudo-elements */
.blockcart.shopping_cart_style_1 a.st_shopping_cart .ajax_cart_bag .ajax_cart_bg_handle {
    display: none !important;
}

/* Add cart icon as ::before on the bag container */
.blockcart.shopping_cart_style_1 a.st_shopping_cart .ajax_cart_bag::before {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #333 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.52 2.64L3.96 4.72C3.65102 5.13198 3.49652 5.33797 3.50011 5.51039C3.50323 5.66044 3.57358 5.80115 3.69175 5.89368C3.82754 6 4.08503 6 4.6 6H19.4C19.915 6 20.1725 6 20.3083 5.89368C20.4264 5.80115 20.4968 5.66044 20.4999 5.51039C20.5035 5.33797 20.349 5.13198 20.04 4.72L18.48 2.64M5.52 2.64C5.696 2.40533 5.784 2.288 5.89552 2.20338C5.9943 2.12842 6.10616 2.0725 6.22539 2.03845C6.36 2 6.50667 2 6.8 2H17.2C17.4933 2 17.64 2 17.7746 2.03845C17.8938 2.0725 18.0057 2.12842 18.1045 2.20338C18.216 2.288 18.304 2.40533 18.48 2.64M5.52 2.64L3.64 5.14666C3.40254 5.46328 3.28381 5.62159 3.1995 5.79592C3.12469 5.95062 3.07012 6.11431 3.03715 6.28296C3 6.47301 3 6.6709 3 7.06666L3 18.8C3 19.9201 3 20.4802 3.21799 20.908C3.40973 21.2843 3.71569 21.5903 4.09202 21.782C4.51984 22 5.07989 22 6.2 22L17.8 22C18.9201 22 19.4802 22 19.908 21.782C20.2843 21.5903 20.5903 21.2843 20.782 20.908C21 20.4802 21 19.9201 21 18.8V7.06667C21 6.6709 21 6.47301 20.9628 6.28296C20.9299 6.11431 20.8753 5.95062 20.8005 5.79592C20.7162 5.62159 20.5975 5.46328 20.36 5.14667L18.48 2.64M16 10C16 11.0609 15.5786 12.0783 14.8284 12.8284C14.0783 13.5786 13.0609 14 12 14C10.9391 14 9.92172 13.5786 9.17157 12.8284C8.42143 12.0783 8 11.0609 8 10' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M5.52 2.64L3.96 4.72C3.65102 5.13198 3.49652 5.33797 3.50011 5.51039C3.50323 5.66044 3.57358 5.80115 3.69175 5.89368C3.82754 6 4.08503 6 4.6 6H19.4C19.915 6 20.1725 6 20.3083 5.89368C20.4264 5.80115 20.4968 5.66044 20.4999 5.51039C20.5035 5.33797 20.349 5.13198 20.04 4.72L18.48 2.64M5.52 2.64C5.696 2.40533 5.784 2.288 5.89552 2.20338C5.9943 2.12842 6.10616 2.0725 6.22539 2.03845C6.36 2 6.50667 2 6.8 2H17.2C17.4933 2 17.64 2 17.7746 2.03845C17.8938 2.0725 18.0057 2.12842 18.1045 2.20338C18.216 2.288 18.304 2.40533 18.48 2.64M5.52 2.64L3.64 5.14666C3.40254 5.46328 3.28381 5.62159 3.1995 5.79592C3.12469 5.95062 3.07012 6.11431 3.03715 6.28296C3 6.47301 3 6.6709 3 7.06666L3 18.8C3 19.9201 3 20.4802 3.21799 20.908C3.40973 21.2843 3.71569 21.5903 4.09202 21.782C4.51984 22 5.07989 22 6.2 22L17.8 22C18.9201 22 19.4802 22 19.908 21.782C20.2843 21.5903 20.5903 21.2843 20.782 20.908C21 20.4802 21 19.9201 21 18.8V7.06667C21 6.6709 21 6.47301 20.9628 6.28296C20.9299 6.11431 20.8753 5.95062 20.8005 5.79592C20.7162 5.62159 20.5975 5.46328 20.36 5.14667L18.48 2.64M16 10C16 11.0609 15.5786 12.0783 14.8284 12.8284C14.0783 13.5786 13.0609 14 12 14C10.9391 14 9.92172 13.5786 9.17157 12.8284C8.42143 12.0783 8 11.0609 8 10' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    transition: background-color 0.3s ease;
}

.blockcart.shopping_cart_style_1 a.st_shopping_cart:hover .ajax_cart_bag::before {
    background-color: #95c129 !important;
}

/* Cart text alignment */
.blockcart.shopping_cart_style_1 a.st_shopping_cart .cart_text {
    display: inline-flex !important;
    align-items: center !important;
}

/* =============================================
   USER/LOGIN ICON
   ============================================= */

/* User link alignment */
a[href*="el-meu-compte"] {
    display: inline-flex !important;
    align-items: center !important;
}

a[href*="el-meu-compte"] .header_icon_btn_icon {
    display: inline-flex !important;
    align-items: center !important;
}

/* Custom SVG icon for user */
a[href*="el-meu-compte"] .header_icon_btn_icon i.fto-user {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 20px !important;
    height: 20px !important;
}

a[href*="el-meu-compte"] .header_icon_btn_icon i.fto-user::before {
    content: '' !important;
    display: block !important;
    width: 20px !important;
    height: 20px !important;
    background-color: #333 !important;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 21C20 19.6044 20 18.9067 19.8278 18.3389C19.44 17.0605 18.4395 16.06 17.1611 15.6722C16.5933 15.5 15.8956 15.5 14.5 15.5H9.5C8.10444 15.5 7.40665 15.5 6.83886 15.6722C5.56045 16.06 4.56004 17.0605 4.17224 18.3389C4 18.9067 4 19.6044 4 21M16.5 7.5C16.5 9.98528 14.4853 12 12 12C9.51472 12 7.5 9.98528 7.5 7.5C7.5 5.01472 9.51472 3 12 3C14.4853 3 16.5 5.01472 16.5 7.5Z' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    -webkit-mask-size: contain !important;
    mask-size: contain !important;
    -webkit-mask-repeat: no-repeat !important;
    mask-repeat: no-repeat !important;
    -webkit-mask-position: center !important;
    mask-position: center !important;
    transition: background-color 0.3s ease;
}

a[href*="el-meu-compte"]:hover .header_icon_btn_icon i.fto-user::before {
    background-color: #95c129 !important;
}

/* User text alignment */
a[href*="el-meu-compte"] .header_icon_btn_text {
    display: inline-flex !important;
    align-items: center !important;
}

/* =============================================
   REGISTRATION PAGE
   ============================================= */

.registration-intro {
    margin-bottom: 20px;
}

.registration-intro a {
    color: #95c129;
    text-decoration: underline;
}

/* =============================================
   PRICING CARDS - REGISTRATION FORM
   ============================================= */

#customer-form > section .row {
    display: flex;
    flex-wrap: wrap;
}

#customer-form > section .col-md-6 {
    margin-bottom: 20px;
}

/* Header styling */
.pricing-heading .bg-menu {
    background-color: #95c129 !important;
    padding: 25px 15px !important;
    text-align: center;
}

.pricing-heading .bg-menu h1.display-1 {
    font-size: 2.5rem;
    font-weight: 400;
    color: #fff;
    margin-bottom: 10px;
}

.pricing-heading .bg-menu .hint-text {
    color: #fff;
    font-size: 13px;
    line-height: 1.5;
    opacity: 0.95;
}

/* Quota section */
.pricing-heading .bg-master-light {
    background-color: #f5f5f5 !important;
    padding: 15px !important;
    border: 1px solid #e0e0e0;
    border-top: none;
}

.pricing-heading .bg-master-light .block-title {
    font-size: 14px;
    font-weight: 600;
    text-transform: uppercase;
    color: #666;
    margin-bottom: 15px;
    text-align: center;
    letter-spacing: 0.5px;
}

/* Radio buttons and rates */
.pricing-heading .mx-2 {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

.pricing-heading .radio-inline {
    display: flex !important;
    align-items: center;
    padding: 8px 0;
    margin: 0;
    border-bottom: 1px dotted #ccc;
}

.pricing-heading .radio-inline:last-of-type {
    border-bottom: none;
}

.pricing-heading .label-rate {
    display: flex;
    align-items: center;
    flex: 1;
    font-size: 14px;
    color: #333;
}

.pricing-heading .label-rate span:first-child {
    white-space: nowrap;
}

.pricing-heading .label-rate hr.dashed {
    flex: 1;
    border: none;
    border-bottom: 1px dashed #ccc;
    margin: 0 10px;
    height: 0;
}

.pricing-heading .radio-inline > span:last-child:not(.custom-radio):not(.label-rate) {
    font-weight: 600;
    color: #333;
    white-space: nowrap;
}

.pricing-heading .small.hint-text {
    font-size: 11px;
    color: #888;
    margin-top: 10px;
}

/* Benefits section */
.pricing-details.bg-master-lighter {
    background-color: #fff !important;
    padding: 20px 15px !important;
    border: 1px solid #e0e0e0;
    border-top: none;
}

.pricing-details h4 {
    font-size: 14px;
    font-weight: 600;
    color: #333;
    margin-bottom: 15px;
}

.pricing-details ul.list-unstyled {
    margin: 0;
    padding: 0;
}

.pricing-details ul.list-unstyled li {
    display: flex;
    align-items: flex-start;
    padding: 6px 0;
    font-size: 13px;
    color: #555;
    line-height: 1.4;
}

.pricing-details ul.list-unstyled li i.material-icons {
    font-size: 0;
    width: 16px;
    height: 16px;
    margin-right: 8px;
    flex-shrink: 0;
    margin-top: 3px;
    display: inline-block;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2395c129'%3E%3Cpath d='M8.59 16.59L13.17 12 8.59 7.41 10 6l6 6-6 6-1.41-1.41z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.pricing-details ul.list-unstyled li a {
    color: #95c129;
    text-decoration: none;
}

.pricing-details ul.list-unstyled li a:hover {
    text-decoration: underline;
}

/* Custom radio button styling */
.pricing-heading .custom-radio {
    margin-right: 10px;
}

.pricing-heading .custom-radio input[type="radio"] {
    width: 16px;
    height: 16px;
}

/* Responsive adjustments */
@media (max-width: 767px) {
    .pricing-heading .bg-menu h1.display-1 {
        font-size: 2rem;
    }

    #customer-form > section .col-md-6 {
        margin-bottom: 30px;
    }
}

/* =============================================
   DATETIME PICKER - PRODUCT VARIANTS
   ============================================= */

/* Hide main product price when datetime picker is active */
.datetime-picker-wrapper ~ .product-prices,
.js-product-container:has(.datetime-picker-wrapper) .product-prices {
    display: none !important;
}

.datetime-picker-wrapper {
    padding: 10px 0;
}

/* Login notice for guests */
.datetime-login-notice {
    margin-bottom: 10px;
    font-size: 14px;
}

.datetime-login-notice a {
    color: #95c129;
    font-weight: 600;
    text-decoration: underline;
}

/* Guest mode - available slots disabled but visible */
.datetime-timeslot-guest-disabled {
    cursor: not-allowed;
    opacity: 0.6;
    pointer-events: none;
}

.datetime-timeslot-guest-disabled:hover,
.datetime-timeslot-guest-disabled:focus,
.datetime-timeslot-guest-disabled:active {
    border-color: #ddd !important;
    background-color: #fff !important;
}

.datetime-timeslot-guest-disabled .datetime-checkbox-visual {
    border-color: #ccc !important;
    background-color: #f5f5f5 !important;
}

.datetime-timeslot-guest-disabled .datetime-checkbox-visual::after {
    display: none !important;
}

.datetime-loading {
    text-align: center;
    padding: 20px;
    color: #666;
}

.datetime-loading i {
    margin-right: 8px;
}

/* Date Block */
.datetime-date-block {
    margin-bottom: 0;
    border: 1px solid #e0e0e0;
    border-bottom: none;
    border-radius: 0;
    overflow: hidden;
    transition: border-color 0.2s ease;
}

.datetime-date-block:first-child {
    border-radius: 4px 4px 0 0;
}

.datetime-date-block:last-child {
    border-bottom: 1px solid #e0e0e0;
    border-radius: 0 0 4px 4px;
}

.datetime-date-block:only-child {
    border-radius: 4px;
    border-bottom: 1px solid #e0e0e0;
}

.datetime-date-block:hover {
    border-color: #ccc;
}

.datetime-date-block-selected {
    border-color: #95c129 !important;
    border-bottom: 1px solid #95c129 !important;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

/* Date Header */
.datetime-date-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 12px;
    background-color: #f8f8f8;
    border-bottom: 1px solid #e0e0e0;
}

.datetime-date-label {
    font-weight: 600;
    font-size: 14px;
    color: #333;
}

.datetime-date-price {
    font-size: 13px;
    font-weight: 600;
    color: #333;
}

/* Time Slots Container */
.datetime-timeslots {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding: 10px 12px;
}

/* Individual Time Slot */
.datetime-timeslot {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 10px;
    border: 1px solid #ddd;
    border-radius: 3px;
    cursor: pointer;
    transition: all 0.2s ease;
    background-color: #fff;
    min-width: auto;
}

.datetime-timeslot:hover:not(.datetime-timeslot-unavailable) {
    border-color: #95c129;
    background-color: #f9fdf5;
}

.datetime-timeslot-selected {
    border-color: #95c129 !important;
    background-color: #95c129 !important;
    color: #fff;
    box-shadow: 0 2px 4px rgba(149, 193, 41, 0.3);
    transform: scale(1.02);
}

.datetime-timeslot-selected .datetime-time-label {
    color: #fff;
    font-weight: 600;
}

.datetime-timeslot-selected .datetime-checkbox-visual {
    border-color: #fff;
    background-color: #fff;
}

.datetime-timeslot-selected .datetime-checkbox:checked + .datetime-checkbox-visual::after {
    color: #95c129;
}

/* Unavailable Time Slot */
.datetime-timeslot-unavailable {
    cursor: not-allowed;
    opacity: 0.6;
    background-color: #f5f5f5;
}

.datetime-timeslot-unavailable:hover {
    border-color: #ddd;
    background-color: #f5f5f5;
}

.datetime-blocked-icon {
    color: #cc0000;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

/* Checkbox input */
.datetime-checkbox {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.datetime-checkbox-visual {
    width: 14px;
    height: 14px;
    border: 2px solid #ccc;
    border-radius: 2px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background-color: #fff;
}

.datetime-timeslot:hover:not(.datetime-timeslot-unavailable) .datetime-checkbox-visual {
    border-color: #95c129;
}

.datetime-checkbox:checked + .datetime-checkbox-visual {
    border-color: #95c129;
    background-color: #95c129;
}

.datetime-checkbox:checked + .datetime-checkbox-visual::after {
    content: '✓';
    font-size: 11px;
    font-weight: bold;
    color: #fff;
    line-height: 1;
}

/* Selection summary panel */
.datetime-selection-summary {
    margin-top: 12px;
    padding: 12px 15px;
    background-color: #f8f9fa;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    transition: all 0.3s ease;
}

.datetime-selection-summary.has-selection {
    background-color: #e8f5e9;
    border-color: #95c129;
}

.datetime-selection-status {
    display: flex;
    align-items: center;
    gap: 8px;
    color: #666;
    font-size: 13px;
}

.datetime-selection-icon {
    display: flex;
    align-items: center;
    color: #999;
}

.datetime-selection-icon svg {
    width: 18px;
    height: 18px;
}

.datetime-selection-count {
    display: flex;
    align-items: center;
    gap: 5px;
}

.datetime-count-number {
    font-size: 20px;
    font-weight: 700;
    color: #95c129;
}

.datetime-count-label {
    font-size: 14px;
    color: #333;
    font-weight: 500;
}

/* Warning message */
.datetime-warning {
    margin-bottom: 12px;
    padding: 10px 15px;
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    border-radius: 4px;
    color: #856404;
    font-size: 13px;
    display: flex;
    align-items: center;
    gap: 8px;
    transition: opacity 0.3s ease;
}

.datetime-warning i {
    font-size: 16px;
}

/* Custom Reserve Button */
.datetime-reserve-btn-container {
    margin-top: 15px;
    text-align: right;
}

.datetime-reserve-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 30px;
    font-size: 15px;
    font-weight: 600;
    background-color: #95c129;
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    transition: all 0.2s ease;
}

.datetime-reserve-btn:hover {
    background-color: #7da822;
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(149, 193, 41, 0.3);
}

.datetime-reserve-btn:disabled {
    background-color: #ccc;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

.datetime-reserve-btn i {
    font-size: 16px;
}

/* Hide reference for datetime products */
.datetime-picker-wrapper ~ .product-reference,
.datetime-picker-wrapper ~ .product-quantities,
.datetime-picker-wrapper + .product-reference {
    display: none !important;
}

/* Success confirmation modal */
.datetime-success-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    animation: fadeIn 0.2s ease;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.datetime-success-content {
    background: #fff;
    padding: 30px 40px;
    border-radius: 8px;
    text-align: center;
    max-width: 400px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
    animation: slideUp 0.3s ease;
}

@keyframes slideUp {
    from { transform: translateY(20px); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

.datetime-success-icon {
    width: 60px;
    height: 60px;
    background-color: #95c129;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 20px;
}

.datetime-success-icon svg {
    width: 30px;
    height: 30px;
    stroke: #fff;
    stroke-width: 3;
}

.datetime-success-title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 10px;
}

.datetime-success-message {
    font-size: 14px;
    color: #666;
    margin-bottom: 20px;
}

.datetime-success-buttons {
    display: flex;
    gap: 10px;
    justify-content: center;
}

.datetime-success-btn {
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    text-decoration: none;
    transition: all 0.2s ease;
}

.datetime-success-btn-secondary {
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    color: #333;
}

.datetime-success-btn-secondary:hover {
    background-color: #eee;
    color: #333;
    text-decoration: none;
}

.datetime-success-btn-primary {
    background-color: #95c129;
    border: 1px solid #95c129;
    color: #fff;
}

.datetime-success-btn-primary:hover {
    background-color: #7da822;
    color: #fff;
    text-decoration: none;
}

/* Reservation summary in success modal */
.datetime-success-reservations {
    background-color: #f8f9fa;
    border-radius: 6px;
    padding: 12px 15px;
    margin-bottom: 20px;
    text-align: left;
    max-height: 250px;
    overflow-y: auto;
}

.datetime-success-product-name {
    font-weight: 600;
    font-size: 14px;
    color: #333;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #e0e0e0;
}

.datetime-success-reservation-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 8px 0;
    border-bottom: 1px solid #e9ecef;
}

.datetime-success-reservation-item:last-child {
    border-bottom: none;
}

.reservation-date,
.reservation-time {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 13px;
    color: #333;
}

.reservation-date {
    flex: 1;
}

.reservation-date svg,
.reservation-time svg {
    color: #95c129;
    flex-shrink: 0;
}

.reservation-time {
    color: #666;
    font-weight: 500;
}

/* Cart datetime formatted display */
.cart-datetime-info {
    margin-top: 5px;
}

.cart-datetime-date,
.cart-datetime-time {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: #555;
}

.cart-datetime-date i,
.cart-datetime-time i {
    color: #999;
    font-size: 14px;
}

/* Mini cart (header dropdown) datetime styles */
.mini-cart-datetime {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    font-size: 12px;
}

.mini-cart-date,
.mini-cart-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    color: #555;
}

.mini-cart-date i,
.mini-cart-time i {
    font-size: 11px;
    color: #95c129;
}


/* Time Label */
.datetime-time-label {
    font-size: 13px;
    color: #333;
    white-space: nowrap;
}

/* Blocked icon smaller */
.datetime-blocked-icon svg {
    width: 14px;
    height: 14px;
}

/* Responsive */
@media (max-width: 576px) {
    .datetime-date-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    .datetime-timeslots {
        gap: 6px;
    }

    .datetime-timeslot {
        padding: 5px 8px;
    }
}

/* =============================================
   REGISTRATION FORM - FORM CONTENT
   ============================================= */

#customer-form .form_content {
    max-width: 700px;
    margin: 30px auto;
    padding: 20px;
}

#customer-form .form_content .form-group {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    margin-bottom: 15px;
}

#customer-form .form_content .form-group > label:first-child {
    width: 180px;
    text-align: right;
    padding-right: 20px;
    padding-top: 8px;
    font-weight: 400;
    color: #555;
    flex-shrink: 0;
}

#customer-form .form_content .form-group .js-input-column {
    flex: 1;
    max-width: 350px;
}

#customer-form .form_content .form-group .form-control {
    width: 100%;
    border: 1px solid #ccc;
    border-radius: 0;
    padding: 8px 12px;
    font-size: 14px;
}

#customer-form .form_content .form-group .form-control:focus {
    border-color: #95c129;
    box-shadow: none;
    outline: none;
}

#customer-form .form_content .form-group .form-control-comment {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    font-style: italic;
}

/* Radio buttons inline */
#customer-form .form_content .form-control-valign {
    display: flex;
    align-items: center;
    padding-top: 8px;
}

#customer-form .form_content .form-control-valign .radio-inline {
    margin-right: 20px;
    display: flex;
    align-items: center;
}

/* Checkboxes */
#customer-form .form_content .st_form_item_optin .form-group,
#customer-form .form_content .st_form_item_psgdpr .form-group,
#customer-form .form_content .st_form_item_customer_privacy .form-group,
#customer-form .form_content .st_form_item_newsletter .form-group,
#customer-form .form_content [class*="st_form_item_"] .js-input-column:only-child {
    padding-left: 200px;
}

#customer-form .form_content .checkbox-inline {
    display: flex;
    align-items: flex-start;
}

#customer-form .form_content .checkbox-inline .flex_child {
    font-size: 14px;
    color: #555;
}

#customer-form .form_content .checkbox-inline .flex_child em {
    display: block;
    font-size: 12px;
    color: #888;
    margin-top: 5px;
    font-style: italic;
}

/* Password field with button */
#customer-form .form_content .input-group {
    display: flex;
}

#customer-form .form_content .input-group .form-control {
    flex: 1;
}

#customer-form .form_content .input-group .input-group-btn .btn {
    background-color: #666;
    color: #fff;
    border: none;
    border-radius: 0;
    padding: 8px 15px;
    font-size: 12px;
    text-transform: uppercase;
}

/* Optional text styling */
#customer-form .form_content .form-group > label:first-child::after {
    content: '';
}

/* Family form section */
#customer-form #family-form {
    max-width: 700px;
    margin: 20px auto;
    padding: 20px;
    background: #f9f9f9;
    border: 1px solid #e0e0e0;
}

#customer-form #family-form h4 {
    font-size: 16px;
    font-weight: 600;
    color: #333;
    margin-bottom: 20px;
}

#customer-form #family-form .form-group.row {
    display: flex;
    align-items: flex-start;
    margin-bottom: 15px;
}

#customer-form #family-form .form-control-label {
    width: 180px;
    text-align: right;
    padding-right: 20px;
    padding-top: 8px;
    font-weight: 400;
    color: #555;
}

/* Form footer */
#customer-form .form-footer {
    max-width: 700px;
    margin: 20px auto;
    text-align: right;
}

#customer-form .form-footer .btn-primary {
    background-color: #95c129;
    border-color: #95c129;
    padding: 12px 30px;
    font-size: 14px;
    text-transform: uppercase;
}

#customer-form .form-footer .btn-primary:hover {
    background-color: #7da821;
    border-color: #7da821;
}

/* Hide form-control-comment that's not needed */
#customer-form .form_content .help-block-for-js {
    margin-top: 5px;
}

/* Responsive form */
@media (max-width: 767px) {
    #customer-form .form_content .form-group > label:first-child {
        width: 100%;
        text-align: left;
        padding-right: 0;
        padding-bottom: 5px;
    }

    #customer-form .form_content .form-group .js-input-column {
        max-width: 100%;
    }

    #customer-form .form_content .st_form_item_optin .form-group,
    #customer-form .form_content .st_form_item_psgdpr .form-group,
    #customer-form .form_content .st_form_item_customer_privacy .form-group,
    #customer-form .form_content .st_form_item_newsletter .form-group,
    #customer-form .form_content [class*="st_form_item_"] .js-input-column:only-child {
        padding-left: 0;
    }

    #customer-form #family-form .form-control-label {
        width: 100%;
        text-align: left;
        padding-right: 0;
        margin-bottom: 5px;
    }
}

/* =============================================
   EXPRESS TEMPLATE - RESERVA EXPRESS
   ============================================= */

/* Two-column layout: content left, sidebar right */
#express-template-form {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 30px;
}

.express-template-content {
    min-width: 0;
}

#express-template-form .products-express-template {
    width: 100%;
}

/* Sidebar column - stretches full grid row height for JS scroll logic */
.express-template-sidebar {
    align-self: stretch;
    position: relative;
}

/* Summary card - JS handles scroll-following and max-height on desktop */
.express-summary-card {
    z-index: 100;
    width: 100%;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 40px);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04);
    overflow: hidden;
}

.express-summary-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid #e0e0e0;
    background-color: #f8f9fa;
    border-radius: 8px 8px 0 0;
    flex-shrink: 0;
}

.express-summary-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Chevron hidden on desktop */
.express-summary-chevron {
    display: none;
}

.express-summary-title {
    font-size: 13px;
    font-weight: 700;
    color: #333;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.express-summary-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 22px;
    height: 22px;
    padding: 0 6px;
    background-color: #95c129;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    border-radius: 11px;
}

/* Counter bar between header and body */
.express-summary-count {
    padding: 8px 16px;
    font-size: 11px;
    font-weight: 600;
    color: #6a8a1a;
    background-color: #f0f4e4;
    border-bottom: 1px solid #e4ecc8;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.express-summary-body {
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 12px 16px;
    min-height: 50px;
    scrollbar-width: thin;
    scrollbar-color: #ddd transparent;
}

.express-summary-body::-webkit-scrollbar {
    width: 4px;
}

.express-summary-body::-webkit-scrollbar-track {
    background: transparent;
}

.express-summary-body::-webkit-scrollbar-thumb {
    background-color: #ddd;
    border-radius: 2px;
}

.express-summary-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    color: #aaa;
    font-size: 13px;
    text-align: center;
    padding: 15px 10px;
}

.express-summary-empty svg {
    flex-shrink: 0;
    color: #d0d0d0;
}

.express-summary-empty-hint {
    font-size: 11px;
    color: #bbb;
    line-height: 1.4;
}

/* Summary list items */
.express-summary-list {
    font-size: 13px;
}

.express-summary-product {
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #f0f0f0;
}

.express-summary-product:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.express-summary-product-name {
    font-size: 11px;
    font-weight: 700;
    color: #95c129;
    text-transform: uppercase;
    margin-bottom: 6px;
    letter-spacing: 0.4px;
    padding-bottom: 4px;
    border-bottom: 1px dashed #e8f0d0;
}

.express-summary-item {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 4px 6px;
    color: #444;
    line-height: 1.3;
    border-radius: 4px;
    margin: 1px -6px;
    transition: background-color 0.15s ease;
}

.express-summary-item:hover {
    background-color: #f5f5f5;
}

.express-summary-item-icon {
    flex-shrink: 0;
    color: #999;
    margin-top: 1px;
}

.express-summary-item-text {
    font-size: 12px;
}

/* Clan selection in summary */
.express-summary-clans {
    border-top: 1px solid #e0e0e0;
    padding-top: 12px;
    margin-top: 8px;
}

.express-summary-clans-title {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    color: #95c129;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    margin-bottom: 8px;
}

.express-summary-clans-icon {
    flex-shrink: 0;
}

.express-summary-clan-item {
    padding: 3px 0;
}

.express-summary-clan-label {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    padding: 6px 8px;
    border-radius: 4px;
    transition: background-color 0.15s ease;
    font-size: 13px;
    color: #444;
}

.express-summary-clan-label:hover {
    background-color: #f5f5f5;
}

.express-summary-clan-label input.clan-checkbox {
    display: none;
}

.express-summary-clan-check {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border: 2px solid #ccc;
    border-radius: 3px;
    flex-shrink: 0;
    transition: all 0.15s ease;
}

.express-summary-clan-label input.clan-checkbox:checked ~ .express-summary-clan-check {
    background-color: #95c129;
    border-color: #95c129;
}

.express-summary-clan-label input.clan-checkbox:checked ~ .express-summary-clan-check::after {
    content: '';
    display: block;
    width: 5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-top: -1px;
}

.express-summary-clan-name {
    flex: 1;
    line-height: 1.3;
}

/* Submit button */
.express-summary-footer {
    padding: 12px 16px;
    border-top: 1px solid #e0e0e0;
    background-color: #fafafa;
    flex-shrink: 0;
}

#express-template-form .express-template-submit {
    background-color: #95c129;
    border: none;
    padding: 12px 20px;
    font-size: 14px;
    text-transform: uppercase;
    font-weight: 600;
    color: #fff;
    cursor: pointer;
    transition: background-color 0.2s ease;
    width: 100%;
    border-radius: 4px;
}

#express-template-form .express-template-submit:hover {
    background-color: #7da821;
}

#express-template-form .express-template-submit:disabled {
    background-color: #d9d9d9;
    cursor: not-allowed;
    opacity: 0.7;
}

/* Instructions section */
.products-selection {
    background: transparent;
    padding: 0 0 15px 0;
    margin-bottom: 15px;
    border-left: none;
}

.products-selection h4 {
    font-size: 14px;
    line-height: 1.8;
    color: #333;
    margin: 0 0 10px 0;
    font-weight: 600;
}

.products-selection.mb-0 h4 {
    font-weight: 400;
    color: #555;
}

.products-selection-button {
    text-align: left;
    padding: 20px 0;
    background: transparent;
    border: none;
}

.products-selection-button h5 {
    margin-bottom: 15px;
    color: #333;
}

.products-selection-button .express-template-init {
    background-color: #95c129;
    border-color: #95c129;
    padding: 12px 30px;
    font-size: 14px;
    text-transform: uppercase;
    color: #fff;
}

.products-selection-button .express-template-init:hover {
    background-color: #7da821;
    border-color: #7da821;
}

/* Products table */
.products-express-template {
    width: 100%;
    border-collapse: collapse;
}

.products-express-template > tbody > tr {
    border-bottom: 1px solid #e0e0e0;
}

.products-express-template > tbody > tr > td {
    padding: 20px 0;
    vertical-align: top;
}

/* Product title - uppercase green */
.products-express-template .product-title {
    font-size: 14px;
    font-weight: 700;
    color: #95c129;
    margin: 0 0 10px 0;
    text-transform: uppercase;
    border: none;
    padding: 0;
    letter-spacing: 0.3px;
}

.products-express-template .product-accessories-title {
    font-size: 14px;
    font-weight: 700;
    color: #95c129;
    margin-bottom: 15px;
    text-transform: uppercase;
}

/* Inner table cleanup */
.products-express-template table {
    width: 100%;
}

.products-express-template table td {
    padding: 0;
}

/* Checkboxes in express template */
.products-express-template .custom-checkbox {
    margin-bottom: 5px;
}

.products-express-template .custom-checkbox label {
    display: inline-flex;
    align-items: center;
    cursor: pointer;
    font-size: 14px;
    color: #333;
    margin: 0;
    font-weight: 400;
}

.products-express-template .custom-checkbox input[type="checkbox"] {
    margin-right: 8px;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

.products-express-template .custom-checkbox .checkbox-checked {
    display: none;
}

.products-express-template .product-combination {
    margin-left: 0;
}

/* Hide material icons text, show SVG */
.products-express-template i.material-icons {
    font-size: 0;
    width: 18px;
    height: 18px;
    display: inline-block;
    vertical-align: middle;
    margin-right: 0;
    margin-left: -24px;
}

.products-express-template i.material-icons.text-primary {
    display: none;
}

/* Location info */
.products-express-template label.d-block.text-xs-left {
    font-size: 13px;
    color: #666;
    margin: 5px 0;
    min-width: auto !important;
}

/* Price labels */
.products-express-template label.text-xs-right {
    display: block;
    text-align: left;
    margin-top: 5px;
    font-size: 13px;
    color: #333;
}

.products-express-template label.text-xs-right strong {
    color: #333;
    font-weight: 600;
}

/* Product variants (family members) */
.products-express-template .product-variants-item {
    margin-bottom: 8px;
}

.products-express-template .product-variants-item .custom-checkbox label {
    font-size: 14px;
}

/* Exhausted icon - red circle with slash */
.products-express-template i.material-icons[style*="color:#cf1414"] {
    width: 16px;
    height: 16px;
    margin-right: 5px;
    margin-left: 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23cf1414'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zM4 12c0-4.42 3.58-8 8-8 1.85 0 3.55.63 4.9 1.69L5.69 16.9C4.63 15.55 4 13.85 4 12zm8 8c-1.85 0-3.55-.63-4.9-1.69L18.31 7.1C19.37 8.45 20 10.15 20 12c0 4.42-3.58 8-8 8z'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* Responsive - tablet and mobile */
@media (max-width: 991px) {
    /* Single column on tablet/mobile */
    #express-template-form {
        display: block;
    }

    .express-template-content {
        padding-bottom: 80px; /* space for collapsed drawer */
    }

    /* Sidebar becomes fixed bottom drawer */
    .express-template-sidebar {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 200;
    }

    .express-summary-card {
        position: relative;
        top: auto;
        max-height: none;
        border-radius: 12px 12px 0 0;
        border-bottom: none;
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    }

    .express-summary-header {
        border-radius: 12px 12px 0 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    /* Show chevron on mobile */
    .express-summary-chevron {
        display: flex;
        align-items: center;
        color: #999;
        transition: transform 0.3s ease;
    }

    /* Body hidden by default (drawer collapsed) */
    .express-summary-body {
        display: none;
        max-height: 50vh;
        padding: 0 15px;
        overflow: hidden;
        transition: max-height 0.3s ease, padding 0.3s ease;
    }

    /* Drawer open state */
    .express-summary-card.drawer-open .express-summary-body {
        display: block;
        padding: 12px 15px;
        overflow-y: auto;
    }

    .express-summary-card.drawer-open .express-summary-chevron {
        transform: rotate(180deg);
    }

    .express-summary-card.drawer-open .express-summary-header {
        border-bottom: 1px solid #e0e0e0;
    }

    /* Collapsed state: no border below header */
    .express-summary-card:not(.drawer-open) .express-summary-header {
        border-bottom: none;
    }

    /* Hide count bar on mobile - badge in header already shows count */
    .express-summary-count {
        display: none !important;
    }
}

@media (max-width: 767px) {
    .products-selection h4 {
        font-size: 13px;
    }

    .products-express-template > tbody > tr > td {
        padding: 15px 0;
    }

    .products-express-template .product-title {
        font-size: 13px;
    }

    .express-summary-body {
        max-height: 40vh;
    }
}

/* =============================================
   EXPRESS TEMPLATE - DATETIME PICKER STYLE
   ============================================= */

.express-datetime-wrapper {
    margin-top: 8px;
}

.express-datetime-wrapper .datetime-timeslot {
    position: relative;
}

/* CSS-only selection state (no JavaScript needed) */
.express-datetime-wrapper .datetime-timeslot:has(.datetime-checkbox:checked) {
    border-color: #95c129;
    background-color: #95c129;
    color: #fff;
    box-shadow: 0 2px 4px rgba(149, 193, 41, 0.3);
    transform: scale(1.02);
}

.express-datetime-wrapper .datetime-timeslot:has(.datetime-checkbox:checked) .datetime-time-label {
    color: #fff;
    font-weight: 600;
}

.express-datetime-wrapper .datetime-timeslot:has(.datetime-checkbox:checked) .datetime-checkbox-visual {
    border-color: #fff;
    background-color: #fff;
}

.express-datetime-wrapper .datetime-timeslot:has(.datetime-checkbox:checked) .datetime-checkbox-visual::after {
    color: #95c129;
}

/* Selected date block border */
.express-datetime-wrapper .datetime-date-block:has(.datetime-checkbox:checked) {
    border-color: #95c129 !important;
    border-bottom: 1px solid #95c129 !important;
    margin-bottom: -1px;
    position: relative;
    z-index: 1;
}

/* Product info lines below date blocks */
.express-product-info {
    margin-top: 5px;
    font-size: 13px;
    color: #333;
}

.express-info-label {
    color: #666;
    display: block;
}

.express-product-info strong {
    font-weight: 600;
}

/* =============================================
   PAYMENT STEP - INLINE ORDER SUMMARY
   ============================================= */

.payment-order-summary {
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 15px 20px;
    background-color: #fafafa;
}

.payment-order-summary h6 {
    margin-bottom: 15px;
}

.payment-order-summary hr {
    border-color: #e0e0e0;
    margin: 15px 0;
}

.summary-product-line {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 12px 0;
    border-bottom: 1px solid #eee;
}

.summary-product-line:last-child {
    border-bottom: none;
}

.summary-product-img {
    flex-shrink: 0;
    width: 65px;
}

.summary-product-img img {
    width: 100%;
    height: auto;
}

.summary-product-details {
    flex: 1;
    min-width: 0;
}

.summary-product-name {
    font-weight: 600;
    font-size: 14px;
    margin-bottom: 4px;
}

.summary-product-name a {
    color: #333;
    text-decoration: none;
}

.summary-product-name a:hover {
    color: #95c129;
}

.summary-product-attr {
    font-size: 13px;
    color: #666;
    line-height: 1.6;
}

.summary-product-attr i {
    margin-right: 5px;
    color: #999;
    font-size: 13px;
}

.summary-product-attr .attr-label {
    color: #888;
}

.summary-product-total {
    flex-shrink: 0;
    font-weight: 600;
    font-size: 15px;
    color: #333;
    white-space: nowrap;
    padding-top: 2px;
}

#conditions-to-approve {
    margin: 20px 0;
}

#payment-confirmation {
    text-align: center;
}