/* USED AT: page-home.html, cars-for-rent.php */

p.site-title a {
    text-decoration: none;
}

.icr-button-primary {
    border: none;
    background-color: #febc34;
    border-width: 0;
    color: white;
    white-space: normal;
    word-break: break-word;
    text-align: center;
    padding: calc(0.667em + 2px) calc(1.333em + 40px);
    cursor: pointer;
    font-size: 1em;
    font-family: Poppins, sans-serif;
    border-radius: 40px;
    text-decoration: none;
}
.woocommerce-cart-form__cart-item.cart_item .image img
{
object-fit: contain;
    max-width: 180px;
    width: 100%;
}
.wc-block-mini-cart__quantity-badge {

	display: none !important;
}

.wp-block-button.reservation-summary-link a {
    background: none;
    border-radius: 0px;
}

.wp-block-button.reservation-summary-link a:hover,
.wp-block-button.reservation-summary-link a:active,
.wp-block-button.reservation-summary-link a:focus
{
    text-decoration: underline;
    background: none !important;
}

span.required {
    color: #ff1515;
}

/* Used at: page-home.html */
/* Mobile First - základné štýly */
.search-result {
    display: grid;
    gap: 15px;
    padding: 20px;
    border: 1px solid #ddd;
    border-radius: 10px;
    margin-bottom: 20px;
}

/* Mobile - všetky pod sebou, okrem attributes vedľa seba */
.search-result {
grid-template-columns: 1fr 1fr;
grid-template-areas:
    "image image"
    "headline headline"
    "attributes-left attributes-right"
    "price price"
    "price-included price-included"
    "reservation-button reservation-button";
}

.search-result .image { 
    grid-area: image; 
}
.search-result .image img { 
    max-width: 100%; 
}
.headline {
    grid-area: headline; 
    align-content: center;
    background: #f1f1f1;
    padding: 10px;
}
.headline strong {
    font-size: 20px;
}
.search-result .attributes-left { 
    grid-area: attributes-left; 
}
.search-result .attributes-right { 
    grid-area: attributes-right; 
}
.attributes-left img,
.attributes-right img
{
    width: 25px;
    margin-right: 12px;
    margin-top: 12px;
    margin-bottom: -7px;
}
.search-result .price { 
    grid-area: price;
    position: relative;
    font-size: 16px;
}
.search-result .price > div:first-child { 
    display: inline-block;
    margin-right: 10px;
}
.search-result .price .amount {
    display: inline-block;
    font-size: 32px;
    font-weight: 600;
    color: #ff5e15;
}
.price-included { 
    grid-area: price-included;
    color: #12a738;
}
.search-result .reservation-button { 
    grid-area: reservation-button;
    text-align: center;
}

@media (max-width: 767px) {
    .search-result .price { 
        text-align: center;
        padding: 24px 0;
        margin: 20px 0;
        border-bottom: 1px solid #ddd;
        border-top: 1px solid #ddd;
    }
}

/* Tablet - grid 3x3 */
@media (min-width: 768px) {
.search-result {
    grid-template-columns: repeat(4, 1fr);
    grid-template-areas:
        "headline           headline        headline            headline"
        "image              image           attributes-left     attributes-right"
        "price-included     price-included  price               price"
        ".                  .               reservation-button  reservation-button";
    }
}


/* Desktop - grid 5x3 */
@media (min-width: 1024px) {
    .search-result {
        grid-template-columns: repeat(5, 1fr);
        grid-template-areas:
            "headline       headline        headline            headline            headline"
            "image          image           attributes-left     attributes-right    price"
            "price-included price-included  .                   reservation-button  reservation-button"
        
    }
    .search-result .price { 
        text-align: center;
    }
}

/* Design: Remove Quantity from Checkout Page #48 */
.wc-block-components-order-summary-item__quantity {
    display: none !important;
}


.icr-spinner {
    width: 21px;
    height: 21px;
    border: 3px solid #FFF;
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: rotation 1s linear infinite;
    }
    @keyframes rotation {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
}

@media (max-width: 480px) {

    .icr-header-column {
        flex-direction: column; 
    }
    
}