/* ============================================================================
   template.css — site-wide template stylesheet for templates/delivery.
   (Generated minified output: template.min.css + template.min.css.gz —
   produced by the com_deliveryplus admin "Minify & Gzip" button.)

   Loaded on every page (registered by templates/delivery/index.php). Holds
   only genuinely site-wide chrome + shared widgets. View-specific and
   component-specific styles live in their own registered web assets:

     media/com_deliveryplus/css/restaurants.css           — list view
     media/com_deliveryplus/css/menu.css                  — single-restaurant menu + cart
     media/com_deliveryplus/css/orders.css                — orders history
     media/com_deliveryplus/css/order-details.css         — OD slide-out (paired w/ panel JS)
     media/com_deliveryplus/css/active-order-banner.css   — AOB
     media/com_deliveryplus/css/share-pay.css             — public share-pay surface
     media/com_deliveryplus/css/coupons.css               — /coupons view
     media/com_deliveryplus/css/redeem.css                — /redeem (rewards) view
     media/mod_smartrestaurants/css/main.css              — Smart Restaurants module
     media/mod_smartcuisines/css/main.css                 — Smart Cuisines module
     media/mod_smartsearch/css/main.css                   — Smart Search module

   Section guide (skim from the top to find what you need):
      1.   Reset + base typography
      3a.  Header — top bar (logo, nav, login button)
      3b.  Footer
      3c.  Bottom bar (sub-footer with legal links / etc.)
      4.   Material form fields (floating-label inputs)
      5.   Bottom notification banner
      6a.  Login form modal
      6b.  Registration form (modal + standalone regform)
      6c.  Account form
      7.   Popup "change address"
      8a.  Ripple effect
      8b.  More animations (keyframes)
      9.   Restaurants View — shared selectors that remain after migration
     10.   Shared slide-out chrome — `.close-btn-outer` + `.add-star-rating`
     11.   Fade-in keyframe (used by .mainmenu)
     12.   Search Address popup
     13.   Modal popup dialog box
     14.   Order Block popup
     15.   SVG animations — clock + valid / not-valid checkmarks
     16.   Loading indicator
     17.   Responsive breakpoints (≤1200 / ≤992 / ≤768 / ≤680 / ≤550 / ≤480 / ≤390)
     18.   General utilities (.hidden / .mb-0)
     19.   Languages module (mod_languages)
     Bottom: sitewide pulse keyframe + .mb-0 + utility classes
   ============================================================================ */


/* ============================================================================
   1. Reset + base typography
   ============================================================================ */
html{
    scrollbar-width: none;
    -ms-overflow-style: none;
}
html::-webkit-scrollbar {
    width: 0;
    height: 0;
}

body,
div,
dl,
dt,
dd,
ul,
ol,
li,
h1,
h2,
h3,
h4,
h5,
h6,
pre,
code,
form,
fieldset,
legend,
input,
textarea,
p,
blockquote,
th,
td{
    /*font-family:Arial;*/
    margin:0;
    padding:0;
}
table {
    border-collapse:collapse;
    border-spacing:0;
}
fieldset,
img {
    border:0;
}

address,
caption,
cite,
code,
dfn,
em,
strong,
th,
var {
    font-style:normal;
    font-weight:normal;
}

li {
    list-style:none;
}

caption,
th {
    text-align:left;
}
h1,
h2,
h3,
h4,
h5,
h6 {
    font-size:100%;
    font-weight:normal;
}
q:before,
q:after {
    content:'';
}
abbr,
acronym {
    border:0;
    font-variant:normal;
}

sup {
    vertical-align:text-top;
}
sub {
    vertical-align:text-bottom;
}
input,
textarea,
select {
    font-size:inherit;
    font-weight:inherit;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
input[type=number] {
    -moz-appearance: textfield;
}

/* make all text unselectable */
div,span{
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: moz-none;
    -ms-user-select: none;
    -o-user-select: none;
    user-select: none;
}

/* fix for chrome and safari when ui autocomplete dropdown */
.ui-helper-hidden-accessible { display: none !important; }

.article_padding{
    padding: 45px 15px 15px 15px;
}

.componentheading {
    font-size: 1.5em;
    font-weight: bold;
    margin: 0 0 10px;
    padding-left: 0;
    text-align: left;
}

html{
    overflow-y: auto;
}

strong{
    font-weight:bold;
}

a {
    color: var(--links-color);
    text-decoration:none;
    transition: all 0.15s linear;
}
a:hover {
    color: var(--links-hover-color);
}

a:any-link {
    text-decoration-line: none;
}

select{color:#444;}/* make default color fix ios devices */

.noscroll { height:100%;overflow: hidden; }

#blockOnCustom,#blockOnCustom2,#blockOnCustom3{
    z-index:55550;background:rgba(0,0,0,0.4);display: block;position: fixed;left: 0;top: 0;width: 100%;height: 100%;opacity: 0;
    will-change: opacity;pointer-events: none;transition: opacity 0.3s cubic-bezier(0,0,0.3,1);
}

#blockOnCustom2{
    z-index:55554;
}

#blockOnCustom3{
    z-index:55605;
}

.enableOpacity#blockOnCustom, .enableOpacity#blockOnCustom2 , .enableOpacity#blockOnCustom3{
    opacity: 1;
    pointer-events: auto;
}

#body{
    width:100%;
    font-size:0.9375rem;
    line-height: 1.7rem;
    color:#444;
    background: #ffffff;
    margin:0 auto;
    overflow:hidden;
}

#body.startpage, #body.com_deliveryplus_restaurants{
    background: #f2f2f2;
}

.container{
    padding-right:15px;
    padding-left:15px;
    margin-right:auto;
    margin-left:auto
}
@media (min-width:768px) {
    .container{
        width:750px;
    }
}
@media (min-width:992px) {
    .container{
        width:970px;
    }
}
@media (min-width:1200px) {
    .container{
        width:1170px;
    }
}
@media (min-width:1400px) {
    .container{
        width:1366px;
    }
}
@media (min-width:1920px) {
    .container{
        width:1600px;
    }
}

.ui-autocomplete {
    z-index:999 !important;
}

.main-general {
    margin: 115px 0;
}

.main-landing{
    position: relative;
    height: var(--main-home-slide-height);
    overflow: hidden;
}

.main-landing .main-landing-bg{
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAAAAAAAAP/sABFEdWNreQABAAQAAABkAAD/7gAmQWRvYmUAZMAAAAABAwAVBAMGCg0AAAH2AAACKwAAAn0AAALU/9sAhAABAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAgICAgICAgICAgIDAwMDAwMDAwMDAQEBAQEBAQIBAQICAgECAgMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwMDAwP/wgARCAAKABQDAREAAhEBAxEB/8QApgAAAQUAAAAAAAAAAAAAAAAAAQQFBgcIAQACAwAAAAAAAAAAAAAAAAAEBgIDBRAAAQIEBQUAAAAAAAAAAAAAAwEEABECEhAhMUEyIjNDFBURAAEBBgcAAAAAAAAAAAAAAAABETFRAkIDcSKCEzNDBBIAAwEBAAAAAAAAAAAAAAAAACAhEWETAAICAQMFAQAAAAAAAAAAAAABETFBIWGREPBRgbFx/9oADAMBAAIRAxEAAAHEk84M2PACL3RBZVZ6tVrQX//aAAgBAQABBQL6L0AUenIKY/bBwe9nyf/aAAgBAgABBQKk1V4nF6Tzhlh//9oACAEDAAEFArOlaEnsThRrH//aAAgBAgIGPwLhi//aAAgBAwIGPwKkX//aAAgBAQEGPwJtq4qriLP6JsyxNxonLqcVOpO0/9oACAEBAwE/IY54+A8hDrIwiZv30CpD9Pdn/9oACAECAwE/IV5yF6gyDplnfT//2gAIAQMDAT8hT0msiKl5Z0//2gAMAwEAAhEDEQAAEByGP//aAAgBAQMBPxBqRSHK3vTJ9xOROq3Z+omrOuznlzK9jsFV9O72Qf/aAAgBAgMBPxBweCMiGcI8o3dYs5nJzR//2gAIAQMDAT8QkHEaWUeObSsG7vJjB//Z');
    background-repeat: no-repeat;
    background-size: cover;
}

.main-landing .main-landing-bg img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    opacity: 0;
    object-position: var(--main-home-slide-image-position);
    top: var(--main-home-slide-image-push);
}

.main-landing .main-landing-bg img.main-landing-bg-img-mobile{display: none;}

.main-landing .main-landing-shape
{position: absolute;bottom: 0;width: 100%;height:var(--main-landing-shape-height);filter:var(--main-landing-shape-filter);}
/* .mainmenu-body .main-landing-shape (desktop base + inner + svg) moved to menu.css */

.main-landing .main-landing-shape .main-landing-shape-inner
{ width:100%;display: flex;height: 100%; }

.main-landing .main-landing-shape svg{ width: 100%; }

.modul-header{
    font-size: 1.5rem;
    display:block;
    margin:25px 0;
    text-align:center;
    color:#2a292e;
}

/* ============================================================================
   3a. Header — top bar (logo, nav, login button)
   ============================================================================ */
.top-header-outer {
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 9999;
    background-color:var(--top-header-bgcolor);
    box-shadow:var(--top-header-boxshadow);
    transition: background .2s linear;

}

.top-header-outer.scrolled{background-color:var(--top-header-bgcolor-scrolled);}

.top-header{
    height: var(--top-header-height);
    display: flex;
    align-items: center;
    flex-direction: row;
    flex-wrap: nowrap;
}

.top-header-middle{
    flex: 1;
    display: flex;
    justify-content: center;
}

.top-header-left{
    display: flex;
    align-items: center;
}

.header-top-left-before-login > div{margin-right: 15px;}

.top-header a,.top-header span,.top-header div.mod-languages .dropdown-toggle{color: var(--top-header-textcolor);}

.startpage #top-head-text,
.startpage #go-to-previous{
    display: none;
}

#go-to-previous {
    display: block;
    padding: 20px;
    border-radius: 50%;
}
#go-to-previous-arrow{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 0 3px 3px;
    transform: rotate(45deg);
}

#header-logo svg,#header-logo img{display: flex;pointer-events: none;height: var(--header-logo-height);}

/* logo only on startpage */
#header-logo{display: none;}
.startpage #header-logo{display: block;}


.width12{
    width: 12.5%;
}

.width14{
    width: 14.28%;
}

.width16{
    width: 16.66%;
}

.width20{
    width: 20%;
}

.width25{
    width: 25%;
}

.width33{
    width: 33.33%;
}

.width50{
    width: 50%;
}

.width100{
    width: 100%;
}

/* ============================================================================
   3b. Footer
   ============================================================================ */

#footer{
    width:100%;
    background-color:#444;
    color:#fff;
    margin-top:10px;
    overflow: auto;
}

#footer .mod-menu .nav-item{
    display: block;
}

#footer .mod-menu .nav-item a{
    display: block;
    padding: 5px 0;
}

#footer-inner{
    overflow: auto;
}

#footer-inner a{
    color: #fff;
}

#footer-inner a:hover{
    text-decoration: underline;
}

#footer-top{
    width:96%;
    padding: 1% 2% 0 2%;
}

#footer-left, #footer-right{
    width:46%;
    padding: 0 2% 2% 2%;
    float: left;
}

#footer-right ul{
    columns: 2;
    -webkit-columns: 2;
    -moz-columns: 2;
}

/* ============================================================================
   3c. Bottom bar (sub-footer with legal links / etc.)
   ============================================================================ */

#bottom{
    width:100%;
    background-color:#000;
    overflow: auto;
}

#bottom-inner{
    overflow: auto;
}

/* ============================================================================
   4. Material form fields — Joomla-style floating-label inputs used across
      every form (login / register / address / cart contact block).
   ============================================================================ */
.form__group_two_column{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.form__group_two_column .form__group{
    width: 48%;
}

.form__group {
    position: relative;
    padding: 15px 0 0;
    margin-top: 10px;
}

.form__field {
    font-family: inherit;
    width: 100%;
    border: 0;
    border: 1px solid #d2d2d2;
    border-radius: 4px;
    outline: 0;
    font-size: 1rem;
    color: #212121;
    padding: 12px 14px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 54px;
    background: transparent;
    transition: border-color 0.2s;
}

.form__field::placeholder {
    color: transparent;
}

.form__field:placeholder-shown ~ .form__label {
    font-size: 1rem;
    cursor: text;
    top: 26px;
}

.form__group label,
.form__field:focus ~ .form__label {
    position: absolute;
    top: 0;
    left: 9px;
    display: block;
    transition: 0.2s;
    font-size: 0.75rem;
    color: #9b9b9b;
    background: #ffffff;
    padding: 0 5px;
}

.form__field:focus ~ .form__label {
    color: var(--form-field-color);
}

.form__field:focus {
    border: 2px solid var(--form-field-color);
}

.error.form__field{
    border-color: #d93025;
}

.error.form__field ~ .form__label {
    color: #d93025;
}


/* ============================================================================
   5. Bottom notification banner — site-wide toast pinned to viewport bottom.
   ============================================================================ */
#bottom-notification {
    display:block;
    position: fixed;
    width: auto;
    color:#fff;
    background: #2c2c2c;
    border-radius: 6px;
    bottom: 0px;
    opacity: 0;
    visibility: hidden;
    right: 50px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.3);
    padding: 25px;
    z-index: 99999;
}

.bottom-notification-in{
    animation-fill-mode: forwards;
}

.bottom-notification-in.short{
    animation:moveOpen 1.8s;
}

.bottom-notification-in.medium{
    animation:moveOpen 2.5s;
}

.bottom-notification-in.long{
    animation:moveOpen 4s;
}

@keyframes moveOpen
{
    from {-webkit-transform: translate(0,100px);opacity: 0; visibility: hidden;}
    10% {-webkit-transform: translate(0,-50px);opacity: 1; visibility: visible;}
    12% {-webkit-transform: translate(0,-55px);opacity: 1; visibility: visible;}
    16% {-webkit-transform: translate(0,-50px);opacity: 1; visibility: visible;}
    80% {-webkit-transform: translate(0,-50px);opacity: 1; visibility: visible;}
    85% {-webkit-transform: translate(0,-55px);opacity: 1; visibility: visible;}
    to {-webkit-transform: translate(0,100px);opacity: 0; visibility: hidden;}
}

@media (max-width : 768px){
    #bottom-notification {
        right: 50%;
    }

    @keyframes moveOpen
    {
        from {transform: translate(50%,100px);opacity: 0; visibility: hidden;}
        10% {transform: translate(50%,-50px);opacity: 1; visibility: visible;}
        12% {transform: translate(50%,-55px);opacity: 1; visibility: visible;}
        16% {transform: translate(50%,-50px);opacity: 1; visibility: visible;}
        80% {transform: translate(50%,-50px);opacity: 1; visibility: visible;}
        85% {transform: translate(50%,-55px);opacity: 1; visibility: visible;}
        to {transform: translate(50%,100px);opacity: 0; visibility: hidden;}
    }
}

@media (max-width : 480px){
    #bottom-notification {
        width: 80%;
    }
}

/* ============================================================================
   6a. Login form modal — opened via the header's login button; rendered by
       templates/delivery/index.php so it's always in the DOM.
   ============================================================================ */
/* .list-restaurants-filter-block + .cart-outer arms moved to restaurants.css + menu.css */
.login-form.login-form--visible .login-form-inner::before{
    content: " ";
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: -60px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 50%;
    width: 20px;
    height: 20px;
    background-color: #fff;
    opacity: 0;
    -webkit-animation: fadeInOpacity 0.7s ease-out forwards;
    -moz-animation: fadeInOpacity 0.7s ease-out forwards;
    -o-animation: fadeInOpacity 0.7s ease-out forwards;
    animation: fadeInOpacity 0.7s ease-out forwards;
    color: #707070;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cline stroke='%23707070' stroke-miterlimit='10'%0Astroke-width='10px' linecap='round' x1='0' y1='0' x2='100' y2='100'%3E%3C/line%3E%3Cline stroke='%23707070' stroke-miterlimit='10'%0Astroke-width='10px' linecap='round' x1='100' y1='0' x2='0' y2='100'%3E%3C/line%3E%3C/svg%3E");
    background-size: 15px;
    background-repeat: no-repeat;
    background-position: center;
    padding: 10px;
}

.login-form-title{
    font-size: 1.5rem;
    text-align: center;
}

.login-form{
    top: 0; left: 0;
    position: fixed;
    height: 100%;
    width: 100%;
    margin: 0;
    z-index: 55555;
    pointer-events: none;
}

.login-form--visible {
    pointer-events: auto;
}

.login-form-inner {
    top: 0; left: 0;
    position: relative;
    height: 300px;
    width: 600px;
    margin: 35vh auto;
    padding: 30px 40px;
    background-color:#ffffff;
    border: 1px solid #dadce0;
    border-radius: 4px;
    z-index: 55556;
    -webkit-transform: translateY(-245%);
    transform: translateY(-245%);
    display: flex;
    justify-content: center;
    flex-direction: column;
    will-change: transform;
    pointer-events: auto;
}

.login-form--visible .login-form-inner {
    -webkit-transform: none;
    transform: none;
}

.login-form--animatable .login-form-inner {
    transition: all 130ms ease-in;
}

.login-form--visible.login-form--animatable  .login-form-inner {
    transition: all 330ms ease-out;
}

.lostpassword_btn_outer_wrapper{
    display: flex;
    align-items: center;
    margin-top: 10px;
}

.lostpassword_btn_outer{
    flex: 1;
}
#lostpassword_btn{
    padding: 9px 8px;
    margin: 6px 0;
    border-radius: 4px;
    color: inherit;
}

#lostpassword_btn:hover{
    background: #174ea614;
}

@media screen and (max-width : 768px){
    .login-form-inner {
        width: 85%;
        padding: 5%;
        margin: 25vh auto;
    }
}

@media screen and (min-height : 1450px){
    .login-form-inner {
        -webkit-transform: translateY(-345%);
        transform: translateY(-345%);
    }
}

.login_buttons_outer{
    display: flex;
    align-items: center;
    margin-top: 26px;
}

.login_buttons_outer .registration_button_outer{
    flex: 1;
}

.login_buttons_outer .registration_button{
    padding: 9px 8px;
    margin: 6px 0;
    border-radius: 4px;
    color: inherit;
}

.login_buttons_outer .registration_button:hover{
    background: #174ea614;
}

.login_buttons_outer .login_button{
    white-space: nowrap;
    background-color: var(--login-btn-color);
    color: var(--login-btn-text-color);
    font-weight: 500;
    border: none;
    border-radius: 4px;
    font-size: .975rem;
    padding: .782rem;
    line-height: 1.34;
    float: right;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}

.login-form-info,
.address-form-info,
.dp-alert {
    display: flex;
    align-items: center;
    position: relative;
    top: 10px;
    color: #d93025;
}

.dp-alert {top:0;}

.error.login-form-info,
.error.address-form-info,
.error.dp-alert{
    color: #d93025;
}


/* ============================================================================
   6b. Registration form — modal counterpart to login (and standalone form
       rendered by tmpl/general/regform.php for the deliveryplus regform).
   ============================================================================ */
#reg-submit-button{
    margin-top: 15px;
    background-color: var(--login-btn-color);
    color: var(--login-btn-text-color);
}
#strengthSection{
    position: absolute;
    bottom: 1px;
    width: 100%;
    border-radius: 8px;
    margin: 0px 1px;
    z-index: -1;
}
#strengthSection #strength{
    height: 5px;
    background: transparent;
    width: 0%;
    pointer-events: none;
    border-radius: 0 0 0px 4px;
    transition: all .3s ease-in-out;
}

#strengthSection #strength.weak{
    background: #ff0000;
    width: 25%;
}

#strengthSection #strength.medium{
    background: #ff8000;
    width: 50%;
}

#strengthSection #strength.good{
    background: #bfff00;
    width: 75%;
}

#strengthSection #strength.strong{
    background: #40ff00;
    width: 100%;
    border-radius: 0px 0 4px 4px;
}

#password_message{
    position: absolute;
    background: #474747;
    z-index: 1;
    border-radius: 8px;
    padding: 8px 10px;
    color: #fff;
    right: 0;
    bottom: calc(100% + 2px);
}

#password_message span{
    white-space: nowrap;
}
/* Add a green text color and a checkmark when the requirements are right */
.password_message_valid {
    color: #00be00;
}

/* Add a red text color and an "x" when the requirements are wrong */
.password_message_invalid {
    color: #f66;
}


/* ============================================================================
   6c. Account form — header dropdown / account settings inputs.
   ============================================================================ */
.acc-submit-button-outer,
.delete-acc-submit-button-outer{
    margin-top: 20px;
}

#change_pwd_btn{
    padding: 10px;
    border: 1px solid #999;
    display: inline-flex;
    border-radius: 4px;
    margin-top: 20px;
    cursor: pointer;
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

#change_pwd_btn .edit_icon{
    display: flex;
    margin-left: 6px;
}

.hideAccPwdField{
    display: none;
}


/* ============================================================================
   7. Popup "change address" — slide-up modal for address picker / search.
   ============================================================================ */
.addresses_top{
    overflow: auto;
    margin: 0 10px;
    display: flex;
    flex-direction: row;
}

.addresses_top.center{
    justify-content: center;
}

.addresses_topleft,.addresses_list_content_left{
    display: block;
    flex-grow: 0;
    flex-basis: 60%;
    flex-shrink: 1;
}

#addresses_top_header{
    text-align: center;
    font-size: 1.25125rem;
}

#addresses_topleft_text{
    color:#9b9b9b;
}

.addresses_topright, .addresses_list_content_right{
    display: flex;
    flex: 1;
    justify-content: flex-end;
    align-items: flex-start;
}

.addresses_list{
    margin:0 10px;
}

.addresses_list_item{
    display: block;
    overflow: auto;
    padding: 10px 0;
}

.addresses_list_content {
    display: flex;
    overflow: auto;
    flex-direction: row;
    border-bottom: 1px solid #ddd;
    padding-bottom: 15px;
}

.delete_address,.order-again-btn{
    width: 100%;
}

.hr-sect {
    display: flex;
    flex-basis: 100%;
    align-items: center;
    color: rgba(0, 0, 0, 0.35);
    margin: 8px 0;
}
.hr-sect::before,
.hr-sect::after {
    content: "";
    flex-grow: 1;
    background: rgba(0, 0, 0, 0.35);
    height: 1px;
    font-size: 0;
    line-height: 0;
    margin: 0 8px;
}
/*SEARCH FOR ADDRESS AND ADD NEW ADDRESS*/
#search-address-btn{
    display: block;
    width: 100%;
    margin: 10px;
    padding: 10px 0;
    background-color: var(--search-submit-btn-color);
    color: var(--search-submit-btn-text-color);
    font-weight: 500;
    border: 1px solid #dfdfdf;
    border-radius: .25rem;
    font-size: .875rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

#search-address-btn:hover{
    cursor: pointer;
}

.add_new_address{
    background-color: var(--search-submit-btn-color);
    color: var(--search-submit-btn-text-color);
    font-weight:500;border: 1px solid #dfdfdf;
    border-radius:.25rem; font-size: .875rem;
    padding:.782rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.add_new_address:hover{
    cursor: pointer;
    background-color: #ffb000;
}
.change_address_add_new_address{
    margin-top: 0;
    background-color:#fff;
    font-weight:500;
    border: 1px solid #dfdfdf;
    border-radius:.25rem;
    font-size: .875rem;
    padding:.782rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}
.change_address_add_new_address:hover{
    cursor: pointer;
    background-color: #ececec;
}

.change_address_list_items{
    margin:0 10px;
}

#mso-new-change-addr-btn{
    position: absolute;
    margin-top: 45px;
    margin-bottom:0;
    padding: 10px 20px 10px 10px;
    border-radius: 4px;
    background-color: unset;
    color:#fff;
    border: none;
    order:0;
}

#mso-new-change-addr-btn:hover{
    cursor: pointer;
}


.white-btn {
    width: auto;
    color:#444;
    background-color: #fff;
    font-weight: 500;
    border: 1px solid #dfdfdf;
    border-radius: .25rem;
    font-size: .975rem;
    padding: .782rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.white-btn:hover {
    cursor: pointer;
    background-color: #ececec;
}

.clrd-btn{
    width: auto;
    color:var(--clrd-btns-text-color);
    background-color: var(--clrd-btns-color);
    font-weight: 500;
    border: 1px solid #dfdfdf;
    border-radius: .25rem;
    font-size: .975rem;
    padding: .782rem;
    line-height: 1.5;
    transition: color .15s ease-in-out,background-color .15s ease-in-out,border-color .15s ease-in-out,box-shadow .15s ease-in-out;
}

.clrd-btn:hover{
    cursor: pointer;
    /*    background-color: #ffb000;*/
}

.clrd-btn.blue{
    color:#fff;
    background-color: #009de0;
}

.clrd-btn.red{
    background: #e53935;
    color: #000;
}

.clrd-btn.red:hover{
    background: #dc2521;
}


/* popup confirm address */
.confirmAddress .form__field{
    height: 48px;
}


#add_new_address{
    display: flex;
    align-items: center;
    justify-content: center;
    white-space: nowrap;
    background-color: var(--search-submit-btn-color);
    color: var(--search-submit-btn-text-color);
    font-weight: 500;
    border: none;
    border: 1px solid #dfdfdf82;
    border-radius: 4px;
    font-size: .975rem;
    padding: .782rem 1.5rem;
    line-height: 1.34;
    float: right;
    overflow: hidden;
    position: relative;
    cursor: pointer;
    margin-top: 15px;
    min-height: 40px;
}

.add_new_address_note{
    text-align: center;
    font-size: 0.75rem;
    color: rgb(155, 155, 155);
    line-height: 1.4rem;
    margin-top: auto;
    margin-bottom: 1rem;
}

#add_new_address_title{
    font-size: 1.125rem;
    font-weight: 700;
    margin-top: 1rem;
}

#add_new_address_title_desc{
    font-size: 0.875rem;
    color: rgb(155, 155, 155);
    line-height: 1.3rem;
}

#set-custom-location-btn{
    display: block;
    width: 100%;
    font-weight: bold;
    border: 1px solid gray;
    border-radius: 4px;
    margin: 0;
    margin-top: 0px;
    padding: 6px 4px;
    background: #22a2ff;
    color: white;
    font-size: 0.8rem;
    margin-top: 5px;
    min-height: 28px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
}

/* ============================================================================
   8a. Ripple effect — Material-style touch feedback on buttons (.button-ripple).
   ============================================================================ */

.button-ripple {
    position: relative;
    overflow: hidden;
    transform: translate(0);
}
.button-ripple_content {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    pointer-events: none;
}

.button-ripple_ripples {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
.button-ripple_ripple{
    display: block;
    position: absolute;
    border-radius: 50%;
    width: 1em;
    height: 1em;
    margin: -0.5em 0 0 -0.5em;
    transform: scale(0);

    top: 0;
    left: 0;

    animation: ripple-animation 2s;
}

@keyframes ripple-animation {
    from {
        transform: scale3d(1,1,1);
        opacity: 0.8;
    }
    to {
        transform: scale3d(100,100,1);
        opacity: 0;
    }
}

/* ============================================================================
   8b. More animations — keyframes used site-wide (fade, pulse, slide).
   ============================================================================ */
@keyframes fadeInOpacity {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}


/* ============================================================================
   9. Select dropdown wrapper — generic select-with-chevron used in cart
      contact rows, addresses, sort, etc. (Lives here because it's shared
      across multiple views; the old "Restaurants View" section that used
      to wrap it is gone — its card chrome migrated to the per-view files.)
   ============================================================================ */

.list-select-outer{
    display: flex;
    position: relative;
}
.list-select-header{
    position: absolute;
    top: 3px;
    left: 25px;
    pointer-events: none;
}
.list-select-outer select{
    margin: 0 10px;
    border: 1px solid #bbb;
    background: #ffffff;
    border-radius: 4px;
    background-position: 95% 50%;
    background-repeat: no-repeat;
    background-size: 15px 15px;
    background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg viewBox='0 0 16.933333 16.933333' xmlns='http://www.w3.org/2000/svg' xmlns:svg='http://www.w3.org/2000/svg'%3e%3cg id='layer1' transform='translate(0 -280.067)'%3e%3cpath id='path828' d='m8.40625 281.12695a1.0584391 1.0584391 0 0 0 -.5742188.20899l-4.234375 3.17578a1.0587895 1.0587895 0 1 0 1.2714844 1.69336l3.5976563-2.69922 3.5976561 2.69922a1.0587897 1.0587897 0 1 0 1.271485-1.69336l-4.2343755-3.17578a1.0584391 1.0584391 0 0 0 -.6953125-.20899z' font-variant-ligatures='normal' font-variant-position='normal' font-variant-caps='normal' font-variant-numeric='normal' font-variant-alternates='normal' font-feature-settings='normal' text-indent='0' text-align='start' text-decoration-line='none' text-decoration-style='solid' text-decoration-color='rgb(0,0,0)' text-transform='none' text-orientation='mixed' white-space='normal' shape-padding='0' isolation='auto' mix-blend-mode='normal' solid-color='rgb(0,0,0)' solid-opacity='1' vector-effect='none'/%3e%3cpath id='path830' d='m12.722656 290.64062a1.0584391 1.0584391 0 0 0 -.658203.22266l-3.5976561 2.70508-3.5976563-2.70508a1.0584391 1.0584391 0 1 0 -1.2714844 1.69141l4.2324219 3.18359a1.0584391 1.0584391 0 0 0 1.2734375 0l4.2324224-3.18359a1.0584391 1.0584391 0 0 0 -.613282-1.91407z' font-variant-ligatures='normal' font-variant-position='normal' font-variant-caps='normal' font-variant-numeric='normal' font-variant-alternates='normal' font-feature-settings='normal' text-indent='0' text-align='start' text-decoration-line='none' text-decoration-style='solid' text-decoration-color='rgb(0,0,0)' text-transform='none' text-orientation='mixed' white-space='normal' shape-padding='0' isolation='auto' mix-blend-mode='normal' solid-color='rgb(0,0,0)' solid-opacity='1' vector-effect='none'/%3e%3c/g%3e%3c/svg%3e");
    -webkit-appearance: none;
    -moz-appearance: none;
    padding: 20px 20px 0px 10px;
    cursor: pointer;
    height: 54px;
    box-sizing: border-box;
}

.list-select-outer select[disabled='disabled']{
    background-image: unset;
}

/* All restaurant-card chrome (.img-container, .rest-cuisine, .rest-info, .isopen,
   .review-rest-outer, .review-more, .rest-right-col .add-review, .star-rating)
   migrated to per-view files. The .rest_coupon_header cluster lives in
   coupons.css + redeem.css (both views render the same header markup). */


/* ============================================================================
   10. Shared slide-out chrome — `.close-btn-outer` + `.close-btn` (used by
       reviews / moreinfo / order-details slide-outs), `.add-star-rating*`
       (used by menu page review popup + tmpl/general/rate.php standalone page)
   ============================================================================ */

.close-btn-outer {
    display: block;
    padding: 20px;
    border-radius: 50%;
    position: absolute;
    left: 15px;
    cursor: pointer;
}
.close-btn-outer .close-btn{
    content: "";
    display: block;
    width: 10px;
    height: 10px;
    border: solid currentColor;
    border-width: 0 0 3px 3px;
    transform: rotate(45deg);
}

/*Add Rate STARS -----*/
/* Source: https://codepen.io/rogie/pen/jgrIu  -----*/

.add-star-rating {
    font-size: 0;
    white-space: nowrap;
    display: inline-block;
    width: 250px;
    height: 50px;
    overflow: hidden;
    position: relative;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjREREREREIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
    background-size: contain;
}
.add-star-rating i {
    opacity: 0;
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    width: 20%;
    z-index: 1;
    background: url('data:image/svg+xml;base64,PHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IiB3aWR0aD0iMjBweCIgaGVpZ2h0PSIyMHB4IiB2aWV3Qm94PSIwIDAgMjAgMjAiIGVuYWJsZS1iYWNrZ3JvdW5kPSJuZXcgMCAwIDIwIDIwIiB4bWw6c3BhY2U9InByZXNlcnZlIj48cG9seWdvbiBmaWxsPSIjZjg5YjIzIiBwb2ludHM9IjEwLDAgMTMuMDksNi41ODMgMjAsNy42MzkgMTUsMTIuNzY0IDE2LjE4LDIwIDEwLDE2LjU4MyAzLjgyLDIwIDUsMTIuNzY0IDAsNy42MzkgNi45MSw2LjU4MyAiLz48L3N2Zz4=');
    background-size: contain;
}
.add-star-rating input {
    -moz-appearance: none;
    -webkit-appearance: none;
    opacity: 0;
    display: inline-block;
    width: 20%;
    height: 100%;
    margin: 0;
    padding: 0;
    z-index: 2;
    position: relative;
}
.add-star-rating input:hover + i,
.add-star-rating input:checked + i {
    opacity: 1;
}
.add-star-rating i ~ i {
    width: 40%;
}
.add-star-rating i ~ i ~ i {
    width: 60%;
}
.add-star-rating i ~ i ~ i ~ i {
    width: 80%;
}
.add-star-rating i ~ i ~ i ~ i ~ i {
    width: 100%;
}
/* Restaurant Info Tab + Menu Top Info clusters (.moreinfo-toggler / .moreinfo-wrapper* /
   .mainmenu-infocard-outer + bg) migrated to media/com_deliveryplus/css/menu.css */


/* ============================================================================
   11. Fade-in keyframe used by .mainmenu (only thing left in the old Menu
       Top Info section after .mainmenu-infocard* migrated to menu.css)
   ============================================================================ */
.fadeInBg{ animation: fadein 150ms forwards; }
@keyframes fadein{ from{opacity:0;} to{opacity:1;} }


/* ============================================================================
   12. Search Address popup — modal triggered when the user clicks the
       address bar to type/pick a new delivery address.
   ============================================================================ */
.search-address-title {
    font-size: 1.125rem;
    margin-top: .5rem;
    text-align: center;
    margin-bottom: 1.5rem;
}

.outer-search{
    padding: 10px 10px 10px 0;
    background: #fff;
    border-radius: 5px;
    border: 1px solid #ebebeb;
    box-shadow: 0 2px 4px 0 rgba(0,0,0,.13);
    margin: 0 0.5rem 0 0.5rem;
}
.inner-search{
    display: flex;
    align-items: center;
    flex-direction: row;
}
.search-address-input-outer{
    display: flex;
    flex: 1;
}
#search-address-input{
    font-family: inherit;
    display: flex;
    flex: 1;
    border: 0;
    outline: 0;
    font-size: 1rem;
    color: #212121;
    padding: 12px 14px;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    height: 54px;
    margin-left: -1px;
    width: 100%;
}
.outer-search-address-btn{
    display: flex;

}
#search-address-btn{
    white-space: nowrap;
    font-weight: 500;
    font-size: .975rem;
    padding: .782rem 1.5rem;
    line-height: 1.34;
    overflow: hidden;
    position: relative;
    cursor: pointer;
}


.tip_box_closebtn {
    margin-left: 15px;
    color: white;
    font-weight: bold;
    float: right;
    font-size:1.375rem;
    line-height: 20px;
    cursor: pointer;
    transition: 0.3s;
}

.tip_box_closebtn:hover {
    color: black;
}

.tip_box {
    padding: 20px;
    background-color: #46a7f5;
    color: white;
    margin-bottom: 15px;
}
.tip_box .tip_box_error_text, .tip_box.error .tip_box_info_text{display: none;}
.tip_box.error .tip_box_error_text{display: block;}
.tip_box.error{ background-color: #f44336; }


/* ============================================================================
   13. Modal popup dialog box — generic confirmation / message dialog.
   ============================================================================ */

.modal-window {
    position: fixed;
    background-color: rgba(0,0,0,0.4);
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 9999999;
    visibility: hidden;
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s;
}
.modal-window:target,.modal-window.open {
    visibility: visible;
    opacity: 1;
    pointer-events: auto;
}
.modal-window .modal-window-content-outer {
    width: 400px;
    max-width: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f9f9f9;
    border-radius: 4px;
}

.modal-window .modal-window-content-inner {
    padding: 2em;
}

.modal-window header {
    font-weight: bold;
}
.modal-window h1 {
    font-size: 150%;
    margin: 0 0 15px;
}

.modal-close {
    color: #aaa;
    line-height: 50px;
    font-size: 1.5rem;
    position: absolute;
    right: 0;
    text-align: center;
    top: 0;
    width: 70px;
    text-decoration: none;
    cursor: pointer;
}
.modal-close:hover {
    color: #000;
}


/* .coupons_table + .coupon_item* + .cannot-redeem cluster duplicated into
   media/com_deliveryplus/css/coupons.css + redeem.css. */

#acc-submit-button,#loadmore-orders-btn,#loadmore-reviews-btn{
    display: inline-flex;
    align-items: center;
}

.btn-loading-img{
    display: none;
    justify-content: center;
    align-items: center;
    margin-right: 7px;
    width: 20px;
}

/*.btn-loading-img.show{
	display: flex;
}*/

.btn-loading-img circle{
    stroke: currentColor;
}

.loadmore-outer{
    display: flex;
    justify-content: center;
}

/* ============================================================================
   14. Order Block popup — modal shown when ordering is blocked (closed
       restaurant / out-of-area / etc).
   ============================================================================ */

.order-modal.modal-window > div{
    width: 600px;
}

.order-modal .modal-text-header{
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-modal .modal-actions,
.order-modal .modal-text,
.order-modal.modal-window h1{
    text-align: center;
}

.order-modal .modal-text-header,
.order-modal .modal-text{
    margin-bottom: 15px;
}

.order-modal.modal-window .checkmark-svg-outer svg{
    width: 50px;
    height: 50px;
}

/* Loading-status toast — injected by deliveryplus.js (showLoadingStatusBlock)
   on EVERY page (order-status polling), so it must be styled globally here,
   not in the per-view menu.css. */
.so-loading-status-block {
    display: flex;
    position: fixed;
    right: 25px;
    bottom: 50px;
    width: auto;
    background: #f3f3f3;
    padding: 10px 10px;
    border-radius: 2px;
    color: #000;
    z-index: 999;
    border: 1px solid #000;
    white-space: nowrap;
    opacity: .85;
}
.so-loading-status-block-text {
    align-self: center;
    margin-left: 10px;
}
.so-loading-status-block-animation svg {
    height: 30px;
    width: 30px;
    display: block;
    filter: invert(1);
}
@media (max-width: 960px) {
    .so-loading-status-block { bottom: 60px; }
}
@media (max-width: 768px) {
    .so-loading-status-block {
        right: unset;
        bottom: unset;
        top: 70px;
        left: 0;
        font-size: .9375rem;
        width: 100%;
        height: 30px;
        opacity: .75;
        padding: 5px 0;
        justify-content: center;
    }
    .so-loading-status-block-animation svg { height: 30px; width: 30px; }
}

/* ============================================================================
   15. SVG animations — clock spinner + valid / not-valid checkmark.
   ============================================================================ */
/* CLOCK START CART BLOCK*/
.clock-svg-outer{
    margin-right: 15px;
}

.clock-svg-outer svg{
    width: 65px;
    height: 65px;
    display: block;
    overflow: visible;
    padding: 3px;
    /*filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(54deg) brightness(100%) contrast(97%);*/
    -webkit-animation: filter-animation 21s infinite;
    animation: filter-animation 21s infinite;
}

@keyframes filter-animation {
    0% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(0deg) brightness(100%) contrast(97%);
    }
    10% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(70deg) brightness(100%) contrast(97%);
    }
    20% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(140deg) brightness(100%) contrast(97%);
    }
    30% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(210deg) brightness(100%) contrast(97%);
    }
    40% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(280deg) brightness(100%) contrast(97%);
    }
    50% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(350deg) brightness(100%) contrast(97%);
    }
    60% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(280deg) brightness(100%) contrast(97%);
    }
    70% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(210deg) brightness(100%) contrast(97%);
    }
    80% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(140deg) brightness(100%) contrast(97%);
    }
    90% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(70deg) brightness(100%) contrast(97%);
    }
    100% {
        filter: invert(15%) sepia(51%) saturate(2878%) hue-rotate(0deg) brightness(100%) contrast(97%);
    }
}

/* CLOCK END CART BLOCK */

/* CHECK AND X SVG BLOCKS */
.checkmark-svg-outer{display: flex;}

.checkmark-svg-outer svg {
    width:65px;
    height:65px;
    margin-right:15px;
    overflow:visible
}

.cls-1 {
    fill:none;
    stroke:#25c682;
    stroke-miterlimit:10;
    stroke-width:10px
}
.cls-1.circle {
    stroke-dasharray:700;
    stroke-dashoffset:700
}
.cls-1.checkmark {
    stroke-dasharray:150;
    stroke-dashoffset:150
}
.run-animation .circle {
    animation:2.5s circleDraw forwards
}
.run-animation .checkmark {
    animation:.75s checkmarkDraw forwards;
    animation-delay:1s
}
.cls-2 {
    fill:none;
    stroke:#ce1743;
    stroke-miterlimit:10;
    stroke-width:10px
}
.cls-2.circle {
    stroke-dasharray:700;
    stroke-dashoffset:700
}
.run-animation-2 .circle {
    animation:2.5s circleDraw forwards
}
.cls-2.line {
    stroke-dasharray:150;
    stroke-dashoffset:150
}
.run-animation-2 .line {
    animation:.75s dashDraw forwards;
    animation-delay:1s
}
@keyframes circleDraw {
    from {
        stroke-dashoffset:700
    }
    to {
        stroke-dashoffset:0
    }
}
@keyframes checkmarkDraw {
    from {
        stroke-dashoffset:150
    }
    to {
        stroke-dashoffset:0
    }
}
@keyframes dashDraw {
    from {
        stroke-dashoffset:150
    }
    to {
        stroke-dashoffset:0
    }
}

/* ============================================================================
   16. Loading indicator — full-screen spinner used during route/AJAX waits.
   ============================================================================ */
.loading {
    display: inline-block;
    position: fixed;
    width: 80px;
    height: 80px;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    visibility: hidden;
    opacity: 0;
    z-index: 99999;
}
.loading.show{
    visibility: visible;
    opacity: 1;
}
.loading div {
    position: absolute;
    border: 4px solid var(--loading-div-color);
    opacity: 1;
    border-radius: 50%;
    animation: loading 1s cubic-bezier(0, 0.2, 0.8, 1) infinite;
}
.loading div:nth-child(2) {
    animation-delay: -0.5s;
}
@keyframes loading {
    0% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    4.9% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 0;
    }
    5% {
        top: 36px;
        left: 36px;
        width: 0;
        height: 0;
        opacity: 1;
    }
    100% {
        top: 0px;
        left: 0px;
        width: 72px;
        height: 72px;
        opacity: 0;
    }
}

.bottom-inner-info{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
    margin: 3px 0;
}

#filter-bydelivery ul , #filter-byopen ul { display :none ; }

/* ============================================================================
   17. Responsive breakpoints — sitewide. Per-view mobile overrides live in
       each view's own CSS file; this section only carries chrome, utility
       classes, and landing-page responsive behavior.

       @media (max-width:1200px) — topping popup width (moved to menu.css)
       @media (max-width:992px)  — primary mobile breakpoint
       @media (max-width:768px)  — menu rules (moved to menu.css)
       @media (max-width:680px)  — autocomplete UI
       @media (max-width:550px)  — empty
       @media (max-width:480px)  — menu/cart rules (moved to menu.css)
       @media (max-width:390px)  — cart upperblock font (moved to menu.css)
   ============================================================================ */

@media (max-width : 992px) {
    input,
    textarea,
    button,
    select,
    a,
    div {
        -webkit-tap-highlight-color: rgba(0,0,0,0);
    }

    .main-landing{height: var(--main-home-slide-mobile-height);}

    #login_register_btns > a:not(#login_form_btn),
    #login_register_btns > span{display: none;}

    .main-landing .main-landing-bg img{
        object-position: var(--main-home-mobile-slide-image-position);
        top: var(--main-home-mobile-slide-image-push);
    }
    .main-landing .main-landing-bg img.main-landing-bg-img.hasmobileimg{display: none;}
    .main-landing .main-landing-bg img.main-landing-bg-img-mobile{display: block;}

    .main-landing .main-landing-shape{height:var(--main-landing-shape-mobile-height);}
    /* .mainmenu-body .main-landing-shape mobile moved to menu.css */

    .mwidth12{
        width: 12.5%;
    }

    .mwidth14{
        width: 14.28%;
    }

    .mwidth16{
        width: 16.66%;
    }

    .mwidth20{
        width: 20%;
    }

    .mwidth25{
        width: 25%;
    }

    .mwidth33{
        width: 33.33%;
    }

    .mwidth50{
        width: 50%;
    }

    .mwidth100{
        width: 100%;
    }


    /* .rest-right-col .add-review mobile size moved to menu.css */

    /* shared .isopen mobile override + .list-restaurants-body .tags.withtags
       split + mainmenu mobile reflow moved to restaurants.css + menu.css */

    /* .star-rating ≤992 mobile compact size duplicated to restaurants.css /
       menu.css / mod_smartrestaurants/main.css */

    /* .mso-rest-filter-btn mobile reveal moved to restaurants.css */


    /* .list-restaurants-filter .filter-tree .section li mobile padding moved to restaurants.css */

    /* Menublock / topping popup / cart slide-up reflow + restaurant_tip mobile
       moved to media/com_deliveryplus/css/menu.css */

    /* .order-again-btn mobile width moved to media/com_deliveryplus/css/orders.css */

    /* .coupons_table .coupon_item_outer ≤992 mobile width moved to coupons.css + redeem.css */

    #footer-left, #footer-right{
        width:96%;
        text-align: center;
    }
    #bottom-inner{text-align: center;}
    .bottom-inner-info{ flex-direction: column; }
    .bottom-inner-info a{ padding: 7px 0; }

    .addresses_top, .addresses_list_content{flex-direction: column;}
    .addresses_add_new_address{
        display: flex;
        flex: 1;
        justify-content: center;
        margin-top: 10px;
    }
    .addresses_list_content_right_actions{
        display: flex;
        flex-direction: column;
        flex: 1;
    }
    .show_address_restaurants{margin-top:10px;}
}
@media (max-width : 680px){

    /* autocomplete ui */
    .ui-widget-content{
        width: calc(100% - 64px) !important;
    }

    /* .mainmenu-body .mainmenu-infocard .mainmenu-infocard-inner mobile padding moved to menu.css */
}
@media (max-width : 550px){
    /* empty — placeholder for future site-wide ≤550 rules */
}


/* ============================================================================
   18. General utilities — small reusable single-purpose classes.
   ============================================================================ */

.hidden{ display: none !important; }
.mb-0  { margin-bottom: 0; }


/* ============================================================================
   19. Languages module — Joomla mod_languages dropdown styling.
   ============================================================================ */
div.mod-languages .btn-group .btn {
    font-size: .84rem;
}

div.mod-languages .dropdown-menu {
    position:absolute;
    z-index:1000;
    display:none;
    min-width:10rem;
    padding:.5rem 0;
    margin:0;
    font-size:1rem;
    color:#212529 !important;
    text-align:left;
    list-style:none;
    background-color:#fff;
    background-clip:padding-box;
    border:1px solid rgba(0,0,0,.15);
    border-radius:.25rem
}

div.mod-languages .dropdown-menu.show {
    display: flex;
    flex-direction: column;
}

div.mod-languages .dropdown-menu li a {
    color: #252525;
}

div.mod-languages .dropdown-toggle {
    white-space: nowrap;
    padding: .5rem;
    text-decoration: none;
    background: unset;
    border: unset;
    cursor: pointer;
}
div.mod-languages .dropdown-toggle img{ display: none !important;}

div.mod-languages .dropdown-toggle::after {
    display: inline-block;
    margin-left: .255em;
    vertical-align: .255em;
    content: "";
    border-top: .3em solid;
    border-right: .3em solid transparent;
    border-bottom: 0;
    border-left: .3em solid transparent;
}

div.mod-languages .visually-hidden{display: none;}
div.mod-languages a {padding: 0 .5rem !important;display: flex;align-items: center;text-indent: 7px;}

/* Sitewide pulse keyframe — used by the order-tracking spinner + a few
   other "attention" highlights. */
@keyframes dp-pulse{
    0%, 100% { opacity: 1; }
    50%      { opacity: 0; }
}