/*
 * Farrows Custom CSS
 * Custom styles for Avani Solutions theme
 * Version: 1.0.0
 */

/* Add your custom CSS here */

.woocommerce .cart-collaterals .cross-sells, .woocommerce-page .cart-collaterals .cross-sells {
    width: 100%;
}

/* Header Image Responsive Classes */
.farrows-header-desktop {
    display: none;
}

.farrows-header-mobile {
    display: block;
}

@media (min-width: 768px) {
    .farrows-header-desktop {
        display: block;
    }
    
    .farrows-header-mobile {
        display: none;
    }
}

/* Hero Overlay Classes */
.farrows-hero-overlay::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: black;
    opacity: var(--overlay-opacity, 0.25); /* Use CSS variable with fallback */
}
.farrows-hero-overlay img {
    height: 100% !important;
}

/* Header Search Form Classes */
.header-search-form {
    bottom: -72px;
    z-index: 1;
}
#header-search-mobile{
    padding-left: 0.5rem;
    padding-right: 0.5rem;
}
.header-search-mobile-form {
    bottom: -72px;
    z-index: 1;
    max-width: 100%;
}
#header-search-mobile input{
    border-bottom: 1px solid #0aa4a6;
}

/* Header Logo Classes */
.header-logo-mobile {
    @media screen and (max-width: 1023px) {
            max-height: 2.5rem !important;
    }
}

/* Post Classes */
.post-content .size-full {
    max-width: 100% !important;
    width: inherit !important;
}

/* Coming Soon Classes */
.wp-block-woocommerce-coming-soon{
    padding: 0 30px;
}

/* WooCommerce Coupon Message Container */
.wc_coupon_message_container {
    margin-top: 1rem;
}
.woocommerce table.shop_table_responsive tr.cart-discount td::before, .woocommerce-page table.shop_table_responsive.cart-discount tr td::before{
    content: attr(data-coupon) "\00a0";
}
@media only screen and (max-width: 768px) {
.woocommerce table.shop_table_responsive tr.cart-discount td::after, .woocommerce-page table.shop_table_responsive tr.cart-discount td::after{
    content: attr(data-title)"";
    font-weight: 700;
    float: left;
    color: #0aa4a6;

}
}
@media only screen and (max-width: 360px) {
.woocommerce table.shop_table_responsive tr.woocommerce-shipping-totals, .woocommerce-page table.shop_table_responsive tr.woocommerce-shipping-totals{
    margin-top: 10px;
}
}

/* Enquire Now Button */
.enquire-now-button {
    position: fixed;
    z-index: 50;
    transition: opacity 0.3s;
    /* Mobile: Fixed to bottom left corner */
    bottom: 0;
    left: 0;
}

.enquire-now-button:hover {
    opacity: 0.9;
}

/* Desktop: Fixed to right side, vertically centered */
@media (min-width: 1024px) {
    .enquire-now-button {
        right: 0;
        left: auto;
        top: 50%;
        bottom: auto;
        transform: translateY(-100%);
    }
}

.enquire-now-desktop {
    display: none;
    height: 180px !important;
    width: auto;
}

@media (min-width: 1024px) {
    .enquire-now-desktop {
        display: block;
    }
}

.enquire-now-mobile {
    display: block;
    height: 100px !important;
    width: auto;
}

@media (min-width: 1024px) {
    .enquire-now-mobile {
        display: none;
    }
}

/* Footer Mobile Padding */
@media (max-width: 767px) {
    .avani-footer {
        padding-bottom: 6rem !important;
    }
}

.avani-blue{
    color: #0aa4a6;
}
.bold {
    font-weight: bold;
}

.mobile-image-only {
  display: none;
}
@media (max-width: 767px) {
  .mobile-image-only {
    display: inline;
  }
}
  
/* woo checkout fix */
.woocommerce-checkout .woocommerce-form-login .password-input{
    display: inline-flex;
    flex-direction: row;
    width: 100%;
}
.woocommerce-checkout .woocommerce-form-login .password-input .woocommerce-Input{
    height: min-content;
    margin-right: 2rem;
}
.woocommerce-checkout .woocommerce-form-login .password-input .show-password-input{
    margin-top: 1.15rem !important;
    margin-bottom: -2rem !important;
    align-items: center;
}

.woocommerce-checkout form .form-row label.checkbox, .woocommerce-page form .form-row label.checkbox {
    display: block;
}
.woocommerce .woocommerce-message .button{
    margin-top: 0 !important;
}
.woocommerce-checkout form .form-row label.checkbox, .woocommerce-page form .form-row label.checkbox{
    line-height: 1.4;
    margin-top: 20px;
}
.woocommerce-checkout form .woocommerce-shipping-fields{
    margin-left: 3px;
}
@media (max-width: 381px) {
    .woocommerce-checkout #payment div.payment_box{
        margin-top: 20px;
    }
}

.woocommerce-account .woocommerce-form-row .input-radio{
    margin-right: 10px;
}

.woocommerce-cart .woocommerce-cart-form .cart-collaterals .button,
.woocommerce-cart .woocommerce-cart-form .cart-collaterals button{
    margin-top: 0 !important;
}

.cart-voucher{
    --tw-border-opacity: 1;
    border-color: rgb(204 204 204 / var(--tw-border-opacity)) !important;
    --tw-bg-opacity: 1;
    background-color: rgb(245 245 245 / var(--tw-bg-opacity));
}
/* @media (min-width: 500px) {
.woocommerce-checkout .order-review-coupon-form{
    align-items: flex-start;
}
.woocommerce-checkout .order-review-coupon-form input[type=text]{
    margin-top: .5rem !important;
}
} */
/* section spacing */
.sect + .sect {
    margin-top: -1rem;
}
.sect + .sect-art,
.sect-img + .sect-art{
    margin-top: 4rem;
}
.g-typo ol, .g-typo ul {
    margin-left: 1.25rem;
}

.g-typo ul {
    list-style: none !important;
    list-style-type: none !important;
    padding-left: 0;
}

.g-typo ul li {
    position: relative;
}

.g-typo ul li::before {
    content: "•";
    margin-left: -1.3rem;
    position: absolute;
    font-size: 0.7em;
    top: 0.1rem;
}

@media (max-width: 767px) {
    .decimal{
        font-size: 25px !important;
    }
}

.counter-pill{
    background: #00A7A8;
    padding: .25rem 2rem;
    border-radius: 50px;
    margin-bottom: 20px;
    text-align: center;
    font-size: 27px;
    min-width: 162px;
}
.counter-info{
    padding: 0 10px;
}
.pint-block figure{
    width: 185px;
    min-width: 185px;
}
.pint-block .pint-base{
    width: 100%;
    z-index: 2;
}
.pint-block .pint-beer-base{
    z-index: 1;
    position: absolute;
    width: 86%;
    bottom: 0%;
    left: 7%;
}
.pint-block .pint-bubbles{
    z-index: 1;
    position: absolute;
    width: 54%;
    bottom: 7%;
    left: 24%;
    opacity: 0;
}
.pint-block .pint-animation{
    width: 98%;
    height: 10%;
    overflow: hidden;
    position: absolute;
    bottom: 2px;
    z-index: 1;
    left: 1%;
}
.pint-block .pint-orange{
    width: 100%;
    height: calc(100% - 40px);
    background-color: #E2873E;
    z-index: 1;
    position: absolute;
    bottom: 0;
}
.pint-block .beer{
    width: 100%;
    top: 4px;
    z-index: 3;
    height: 40px;
}
.pint-block .beer-blue{
    height: 40px;
    top: 0;
    position: absolute;
    width: 100%;
    background: #005665;
    z-index: 2;
}
.pint-container{
    min-height: 600px;
}
.pint-back{
    background: #005665;
}
@media only screen and (max-width: 1160px) {
.pint-container{
    min-height: 800px;
}
.pint-back > div{
    flex-wrap: wrap;
}
}
.total-pints-saved{
    overflow-wrap: break-word;
}
.stat-containter .stat{
    background: white;
    border: 1px solid #00A7A8;
    border-radius: 17px;
    padding: 4rem 0.5rem;
}
.stat-containter .stat h2{
    background: linear-gradient(144.47deg, #00A7A8 1.72%, #005665 60.52%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    overflow-wrap: break-word;
}
.stat-containter .stat h3 span{
    font-size: 14px;
}
.stat-containter .stat .icon{
    width: 100px;
    height: 100px;
    margin: auto;
    margin-bottom: 2rem;
}
.stat-containter .stat .stat-num{
    font-size: clamp(3.3125rem, 2.7255rem + 2.9348vw, 4rem);
}
.no-underline{
    text-decoration: none !important;
}
.tabular-nums {
  font-variant-numeric: tabular-nums;
  /* Optionally, set a monospace font for digits */
  font-feature-settings: 'tnum';
}
/* Global Payments Heartland Payment Method Customization */
.payment_method_globalpayments_gpapi .form-row label,
.payment_method_globalpayments_heartland .form-row label{
    color: #fff !important;
}
.payment_method_globalpayments_gpapi .form-row,
.payment_method_globalpayments_heartland .form-row{
    padding: 0 !important;
}
.payment_method_globalpayments_gpapi.payment_box,
.payment_method_globalpayments_heartland.payment_box{
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
}
#globalpayments_gpapi-card-submit,
#globalpayments_heartland-card-submit{
    margin-top: 2rem !important;
}
.payment_method_globalpayments_gpapi iframe,
.payment_method_globalpayments_heartland iframe{
    width: 100% !important;
}

.payment_method_globalpayments_gpapi .wc-credit-card-form,
.payment_method_globalpayments_heartland .wc-credit-card-form{
    margin-top: 0 !important;
}
.payment_method_globalpayments_gpapi .globalpayments-hpp-info,
.payment_method_globalpayments_heartland .globalpayments-hpp-info{
    padding-bottom: 12px !important;
}
.woocommerce-checkout #payment ul.payment_methods li.payment_method_globalpayments_gpapi > label{
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
}
.woocommerce-checkout #payment ul.payment_methods li.payment_method_globalpayments_gpapi .avani-payment-method-icons{
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}
.woocommerce-checkout #payment ul.payment_methods li.payment_method_globalpayments_gpapi .avani-payment-method-icon{
    height: 24px;
    width: auto;
    max-width: 56px;
    display: block;
    margin-left: 0;
}
#gpay-button-online-api-id iframe{
    margin-top: -12px !important;
}

/* Object Position Utility Classes for Hero Image Focus */
.object-focus-tl { object-position: top left !important; }
.object-focus-tc { object-position: top center !important; }
.object-focus-tr { object-position: top right !important; }
.object-focus-l  { object-position: center left !important; }
.object-focus-c  { object-position: center !important; }
.object-focus-r  { object-position: center right !important; }
.object-focus-bl { object-position: bottom left !important; }
.object-focus-bc { object-position: bottom center !important; }
.object-focus-br { object-position: bottom right !important; }
@media only screen and (max-width: 763px) {
.mobile-object.mobile-object-focus-tl { object-position: top left !important; }
.mobile-object.mobile-object-focus-tc { object-position: top center !important; }
.mobile-object.mobile-object-focus-tr { object-position: top right !important; }
.mobile-object.mobile-object-focus-l  { object-position: center left !important; }
.mobile-object.mobile-object-focus-c  { object-position: center !important; }
.mobile-object.mobile-object-focus-r  { object-position: center right !important; }
.mobile-object.mobile-object-focus-bl { object-position: bottom left !important; }
.mobile-object.mobile-object-focus-bc { object-position: bottom center !important; }
.mobile-object.mobile-object-focus-br { object-position: bottom right !important; }
}

/* Text Position Utility Classes for Hero Image Focus */
.text-position-tl { text-align: left !important; justify-content: flex-start; align-items: flex-start; }
.text-position-tc { text-align: center !important; justify-content: flex-start; align-items: center; }
.text-position-tr { text-align: right !important; justify-content: flex-start; align-items: flex-end; }
.text-position-l  { text-align: left !important; justify-content: center; align-items: flex-start; }
.text-position-c  { text-align: center !important; justify-content: center; align-items: center; }
.text-position-r  { text-align: right !important; justify-content: center; align-items: flex-end; }
.text-position-bl { text-align: left !important; justify-content: flex-end; align-items: flex-start; }
.text-position-bc { text-align: center !important; justify-content: flex-end; align-items: center; }
.text-position-br { text-align: right !important; justify-content: flex-end; align-items: flex-end; }

.small-header-text-container{
    padding: 80px 0px;
}
.small-header-text-container-mobile{
    padding: 40px 0px;
}
@media only screen and (max-width: 763px) {
    .desktop-header-banner{
        display: none !important;
    }
}
@media only screen and (min-width: 764px) {
    .mobile-header-banner{
        display: none !important;
    }
}
.square-image{
    padding-bottom: 100%;
}
.square{
    aspect-ratio: 1 / 1;
}
.min-tt{
    min-height: calc(100vh - 80px);
    display: flex;
    align-items: end;
}
.logged-in .min-tt{
    min-height: calc(100vh - 112px);
}
.splide__arrow{
    color: white;
    border: 2px solid white;
    background: transparent;
    padding: 10px;
    position: absolute;
    z-index: 10;
    top: calc(50% - 32px);
    border-radius: 50%;
    transition: all 0.3s ease;
    &:hover{
        background: white;
        svg path{
            fill: #0aa4a6;
        }
    }
    svg{
        width: 25px;
        height: 25px;
    }
}
.splide__arrow svg path{
    fill: white;
    transition: all 0.3s ease;
}
.splide__arrow.splide__arrow--prev{
    left: 20px;
    transform: rotate(180deg);
}
.splide__arrow.splide__arrow--next{
    right: 20px;
}

.hero-splide-slide{
    padding-bottom: 35% !important;
}
@media only screen and (max-width: 1023px) {
.hero-splide-slide{
    padding-bottom: 55% !important;
}
}
@media only screen and (max-width: 763px) {
.splide__pagination.custom{
--tw-text-opacity: 1;
    color: rgb(1 79 93 / var(--tw-text-opacity));
}
.hero-splide .splide__list{
    transition: all 0.2s ease !important;
}
}

/* footer */
.footer-logo-col{
    gap: 2rem;
    align-items: end;
}
.right-footer{
    display: flex;
    flex-direction: column;
    gap: 2.5rem;
}
.right-footer .footer-address{
    order: 2;
}
.right-footer .footer-socials{
    order: 3;
    display: flex;
    flex-direction: row-reverse;
    justify-content: left;
    flex-wrap: wrap;
}
.right-footer .footer-logos{
    order: 1;
}
@media only screen and (max-width: 1023px) {
    .footer-logo-col{
        flex-direction: column !important;
        gap: 1rem;
    }
}
@media only screen and (max-width: 767px) {
    .right-footer .footer-logos{
        order: 3;
    }
    .right-footer .footer-address{
        order: 1;
    }
    .right-footer .footer-socials{
        order: 2;
    }

}
@media only screen and (max-width: 400px) {
    .right-footer .footer-socials{
        flex-direction: column;
        gap: 3rem;
    }
    .right-footer .footer-address{
        flex-direction: column;
        gap: 3rem;
    }
}