/**
 * All of the CSS for your public-facing functionality should be included in this file.
 */

/* WooCommerce Food Delivery Styles */
#wfd-wrapper {
    width : 100%;
    margin-bottom: 20px;
}
#wfd-map {
    border : 1px solid black;
    width  : 100%;
    height : 500px;
    margin: 6px 0;
}

#wfd-input-address-wrapper {
    width     : 100%;
    position  : relative;
    margin    : 6px 0;
    box-sizing: border-box;
}
#wfd-input-address {
	box-sizing: border-box;
	position  : relative;
    padding   : 8px;
    font-size : 16px;
	z-index   : 9;
	display   : block;
    padding   : 8px;
    font-size:  16px;
}
#wfd-input-address.short-width {
    width     : calc(100% - 92px);
}
#wfd-input-address.long-width {
    width     : calc(100% - 41px);
}

#wfd-clear-address,
#wfd-geolocation {
    background-color: transparent;
    font-size       : medium;
    width           : 42px;
    height          : 42px;
    border          : 1px solid rgb(118, 118, 118);
    display         : block;
    position        : absolute;
    z-index         : 10;
    top             : 0;
    padding         : 0;
}

#wfd-clear-address {
	right: 0;
}
#wfd-geolocation {
	right: 46px;
}
#wfd-geolocation svg {
    width   : 22px;
    height  : 36px;
    fill    : black;
    top     : 2px;
    left    : 10px;
    position: absolute;
}

#wfd-clear-address:hover,
#wfd-geolocation:hover {
    cursor: pointer;
}

#wfd-validation-message,
#wfd-address-message {
    padding     : 10px;
    font-size   : 1em;
    font-weight : bold;
    text-align  : center;
    color       : white;
}

#wfd-validation-message.success {
    background-color : green;
}
#wfd-validation-message.fail {
    background-color : red;
}
#wfd-validation-message.warning {
    background-color : orange;
}
#wfd-address-message {
    margin-bottom   : 20px;
    background-color: darkslateblue;
}

#wfd-wrapper .hidden,
#wfd-wrapper.hidden,
#wfd-wc-wrapper.hidden {
    display: none;
}
#wfd-wrapper .leaflet-control-container .leaflet-routing-container {
    display: none;
}

/* Block checkout specific styles */
.wfd-block-checkout-wrapper #wfd-map,
.wfd-block-checkout-wrapper #wfd-wrapper #wfd-map {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
    min-height: 500px !important;
    height: 500px !important;
}

.wfd-block-checkout-wrapper #wfd-wrapper {
    display: block !important;
    visibility: visible !important;
    width: 100% !important;
}

/* Ensure Leaflet map container has dimensions */
.wfd-block-checkout-wrapper .leaflet-container {
    width: 100% !important;
    height: 500px !important;
    min-height: 500px !important;
}
#wfd-header-custom-message-wrapper,
#wfd-shop-custom-message-wrapper {
    padding         : 6px 0;
    text-decoration : none;
    text-align      : center;
    width           : 100%;
}
#wfd-header-custom-message-wrapper {
    top             : 0;
    left            : 0;
    z-index         : 999;
}

#wfd-softwall {
    position        : fixed;
    top             : 0;
    left            : 0;
    width           : 100%;
    height          : 100%;
    background-color: rgba(0, 0, 0, 0.8);
    color           : #fff;
    text-align      : center;
    vertical-align  : middle;
    z-index         : 9999;
}

#wfd-softwall h1 {
    margin-top: 20%;
}