.sibooking-datecontainer {
    display: flex;
    width: 100%;
    align-items: center;
    margin-bottom:8px;
}

.sibooking-flex-label {
    margin-bottom: 3px;
    margin-top: 5px;
    margin-right: 10px;
    word-break: normal;
    width:24%;
}

.sitimepicker {
    width: 105px;
}

.sibooking-dates-text {
    margin-bottom:10px;
}

.sibooking-flex-time {
    width: 25%;
    margin-left:8px
}

.sibooking-from {
    margin-right: 8px;
    width:98%;
}

.sibooking-to {
    margin-right: 8px;
    width:98%;
}

.sidatepicker {
    width:40%;
}

.sibooking-datecontainer input {
    padding:.25em;
    margin-bottom:8px;
}

.single_add_to_cart_button.button.sibooking-addtocart {
    padding: 10px 40px;
    margin: 0 10px ;
}

#outofstockmodalinner {
    display: none;
}

#outofstockmodalinner p {
    padding-bottom: 10px;
}

#outofstockmodalinner input {
    margin-top: 10px;
    margin-bottom:10px;
}

.outofstockmodal.modal-popup .modal-inner-wrap {
    width:690px;
}

.pprinvalert.modal-popup .modal-inner-wrap {
    width:80%;
}



.product-info-price .price-box .pricing-ppr .old-price {
    text-decoration: line-through;
    font-size: 1.4rem;
}

.priceppr-old > .price {
    display: inline-block;
    text-decoration: line-through;
    margin-right: 7px;
}

._has-datepicker ~ .ui-datepicker-trigger:before {
    padding-left: 5px;
}

/* Fixed 2026-09-28: the legacy (Previous / jQuery UI) picker's calendar trigger had no layout
   rule at all on Luma -- it is a sibling of the From/To input inside .range-line.date
   (Block\Widget\CalendarWidget's $fromCal / $endCal, the same markup on the product page and the
   "Pick your rental dates" sidebar widget), and with the input at or near full width the trigger
   simply wrapped onto its own line below the field. Same fix as the admin create-order page
   (view/adminhtml/web/css/sirental.css, 2026-09-22): position the pair against each other so the
   icon sits inside the right end of the field, vertically centred. Verified with a real browser
   at 1280 and 390px: the trigger's bounding box now sits inside the input's, right-aligned and
   vertically centred, at both widths. */
.range-line.date {
    position: relative;
    display: block;
}
.range-line.date + .range-line.date {
    margin-top: 8px;
}
.range-line.date > .input-text._has-datepicker {
    padding-right: 30px;
    box-sizing: border-box;
}
.range-line.date > .ui-datepicker-trigger {
    position: absolute;
    top: 50%;
    right: 6px;
    left: auto;
    bottom: auto;
    transform: translateY(-50%);
    height: 24px;
    width: 24px;
    margin: 0;
    padding: 0;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
}
.range-line.date > .ui-datepicker-trigger:before {
    padding-left: 0;
}

.regular-rental-price {
    display: inline !important;
    float: none;
    color: #FE9400;
    padding-left: 17px;
    text-decoration-line: line-through;
}

.you-save-text {
    display: block;
    float: none;
    font-size: 100% !important;
}

.si-quantity-details {
    /*margin-top: -15px;*/
}

.pricing-ppr {
    width: auto;
}

.sirent-go {
    margin-top: 15px;
}

.hiddenDates {
    display: none !important;
}

.date input[name^="calendar_selector"] {
    width: 80%;
}

.day-detail td.available {
    cursor: pointer;
}
.day-detail td.busy {
    cursor: not-allowed;
}

.priceTablePpr {
    width: 70% !important;
}

.priceTablePpr tr {
    font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
    color: #4f6b72;
    border-right: 1px solid #C1DAD7;
    border-bottom: 1px solid #C1DAD7;
    border-top: 1px solid #C1DAD7;
    letter-spacing: 2px;
    text-transform: uppercase;
    text-align: left;
    padding: 6px 6px 6px 12px;
    background: #CAE8EA url(images/bg_header.jpg) no-repeat;
    width: 50px;
}

.priceTablePpr td {
    border: 1px solid #C1DAD7;
    background: #fff;
    padding: 6px 6px 6px 12px;
    color: #4f6b72;
}

.priceTablePpr .first {
    border-top: 0px;
    border-left: 0px;
}

.cart.table-wrapper .item-options dt:after {
    content: '';
}

.product-block .product-item-details .price-box {
    float: none;
}

.product-block .product-item-details .price-box .price {
    display: inline-block;
}

.ppr-ul-list {
    list-style: outside none none;
    padding: 0;
}

.ppr-ul-list li {
    margin: 0;
}

/*.sirent_calendar :after {
    content: "";
    display: table;
    clear: both;
}*/

.box-tocart.update {
    clear: both;
}

/*.rental_bundle_option .price-notice .price {*/
/*    display: none;*/
/*}*/

.aw-wvtav-container .product-item-details .rental_pricing {
    display: none;
}


/* ---------------------------------------------------------------------------
   A rental has no single price, so its own price box is hidden and the rental
   pricing card takes its place. This replaces
   Plugin\Catalog\Template::hideZeroPriceProductPage(), which used to re-parse
   the rendered HTML of every pricing amount block on the page and write
   style="display:none" into the two wrappers below.

   The body class is added by SalesIgniter\Rental\Block\Product\Price, which is
   already on every product page. Turning on
   salesigniter_rental/legacy_template_plugin/zero_price stops the class being
   added and puts the old code path back.

   !important and the long selector are deliberate. What is being replaced was an
   inline style="display:none" written into the element, which no ordinary
   stylesheet rule can lose to; Luma's own
   .product-info-main .product-info-price .price-box .price-container > span
   is more specific than the obvious short form and would otherwise win.
   --------------------------------------------------------------------------- */
.sirent-rental-product .price-box .price-container.price-final_price > .price-wrapper,
.sirent-rental-product .price-box .price-container.price-configured_price > .price-wrapper {
    display: none !important;
}

/* The legacy (Previous / jQuery UI) picker's "select both dates" / "not available" feedback
   (pprdatepicker.js _showPriceMessage()), written into the same price box _updatePriceBox()
   fills with the quoted total -- so it needs to read as a message, not a price. */
.sirent-price-message {
    font-size: 1.4rem;
    font-weight: 400;
    color: #6f6f6f;
}