@font-face {
    font-family: 'Gilroy-Medium';
    font-display: swap;
    src: url('../../fonts/Gilroy-Medium.ttf') ;
  }


  @font-face {
    font-family: 'Gilroy-Bold'; 
    font-display: swap;
    src: url('../../fonts/Gilroy-Bold.ttf') ; 
  }
  @font-face {
    font-family: 'Gilroy-Regular'; 
    font-display: swap;
    src: url('../../fonts/Gilroy-Regular.ttf') ; 
  }
body {
    overflow: hidden;
}
.pointer{
    cursor: pointer;
}

.landingmain {
    margin: 0 !important;
    padding: 0 !important;
    position: relative;
    overflow: hidden;
    height: 100vh;
}

.background-gif {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: -1;

 

}

.custumoverflow{
    overflow-x: hidden;

}
.landingflex{
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: #f5f5f5;
    overflow: hidden;
    font-family: Arial, sans-serif;
}

.my-button {
    font-family: 'Gilroy-Medium', sans-serif !important;
    display: inline-block;
    padding: 5px 20px;
    background-color: #e0e0e0;
    color: black;
    text-decoration: none;
    border: none;
    border-radius: 5px;
    font-size: 20px;
    cursor: pointer;
    text-align: center;

}

.my-button:hover {
    background-color: #d0d0d0;
    text-decoration: none;
    
}



.landing_footer{
    position: absolute;
    bottom: 20px;
    width: 280px;
    height: 50px;
    
}

.landing_footer a{
    cursor: pointer;

}

@media (max-width: 700px) {
    .landing_footer{
        position: absolute;
        bottom: 5px;
        width: 220px;
        height: 50px;
        
        
    }
  }

  .valetheader{
    font-family: 'Gilroy-Medium', sans-serif !important;
    font-size: 28px !important;
  }


  .valet_form{
    height: auto;
    width: 40%;
  }

  @media (max-width: 700px) {
    .valet_form{
        height: auto;
        width: 83%;
      }
  }


  .formtextvalet{
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-size: 14px;
    color: black;
    margin-bottom: 3px !important;

  }

  .my-styled-input {
    padding: 10px 15px;
    background-color: #D9D9D9;
    border: none;
    border-radius: 10px;
    font-size: 16px;
    font-family: sans-serif;
    text-align: center;
    width: 100%;
    height: 60px;
    display: block;
    font-family: 'Gilroy-Bold', sans-serif !important;
    color: black;
    font-weight: bold;
    font-size: 30px;
}

.my-styled-input::placeholder {
    font-family: 'Gilroy-Bold', sans-serif !important;
    color: rgb(104, 103, 103);
    font-weight: bold;
    font-size: 30px;
}

.my-styled-input:focus {
    outline: 1px dashed #aaa;
}

.black-button {
    font-family: 'Gilroy-Regular', sans-serif !important;
    display: inline-block;
    padding: 5px 50px;
    background-color: #111;
    color: white;
    text-decoration: none;
    border: none;
    border-radius: 8px;
    font-size: 20px;
    
    cursor: pointer;

    text-align: center;
    transition: background-color 0.3s ease;
}
.toast-container {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
}

.my-toast {
    background-color: #333;
    padding-left:20px ;
    color: #0f0;
    border-radius: 25px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    animation: showToast 3s forwards;  
}

.my-toast .check-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-color: #0f0;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.my-toast .check-icon::before {
    content: "\2713";
    color: black;
    font-size: 10px;
    font-weight: bold;
}

@keyframes showToast {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
.notification-area {
    position: fixed;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 1050;
}

.custom-toast {
    background-color: #800000;
    padding-left: 20px;
    color: white;
    border-radius: 25px;
    display: flex;
    align-items: center;
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
    animation: appearToast 10s forwards;
}

.custom-toast .alert-icon {
    width: 18px;
    height: 18px;
    margin-right: 10px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.custom-toast .alert-icon::before {
    content: "!";
    color: #800000;
    font-size: 14px;
    font-weight: bold;
}

@keyframes appearToast {
    0% { opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { opacity: 0; }
}
.requestmain {
    display: flex; 
    overflow-x: auto; 
    white-space: nowrap; 
    width:100% !important;
    height: 90px;
    margin: 10px auto;
}

.boxrequest {
    width: 70px;
    height: 50px;
    background-color: #D9D9D9;
    margin-right: 10px;  
    flex-shrink: 0; 
    box-sizing: border-box;
    border-radius: 15px;
}

.boxrequest p{
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-size: 10px;
    text-transform: uppercase;


}

.boxrequest small{
    position: relative;
    top: -42px;
    font-family: 'Gilroy-Regular', sans-serif !important;
    font-size: 12px;
    text-transform: uppercase;


}

.bg-warning-valet{
    background-color: black !important;

}
.bg-success-valet{
    background-color: black !important;

}
.landingmain { background: transparent; isolation: isolate; }
@media (orientation: landscape) and (max-height: 600px) {
    body.menu-page {
        overflow-y: auto;
    }

    .menu-page .landingmain {
        height: auto;
        min-height: 100vh;
        min-height: 100dvh;
        padding-bottom: 16px !important;
    }

    .menu-page .landingmain .landing_footer {
        position: static;
        margin-top: 20px;
    }
}

/* Collection carousel: same white-panel design as the menus and basket. */
body.menu-page.collection-page { overflow-y: auto; }
.collection-landing { visibility: visible; display: flex; flex-direction: column; height: auto; min-height: 100vh; min-height: 100dvh; font-family: 'Gilroy-Medium',sans-serif; color: #202522; }
.collection-header { flex-shrink: 0; display: grid; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); align-items: center; gap: 18px; min-height: 90px; margin: 0 clamp(16px,2.4vw,64px); }
.collection-intro { text-align: center; padding: 26px 16px 22px; }
.collection-intro h1 { font-family: 'Gilroy-Bold',sans-serif; font-size: clamp(20px,2vw,28px); line-height: 1.2; margin: 0 0 10px; }
.collection-header > a { grid-column: 2; }
.collection-header > div { grid-column: 3; justify-self: end; }
.collection-header > a > img { width: clamp(160px,25vw,260px); height: auto; display: block; }
.collection-carousel { overflow: hidden; padding: 10px 0; }
.collection-landing .stack-container { position: relative; width: clamp(270px,43vw,720px); height: clamp(380px,56vh,650px); height: clamp(380px,56dvh,650px); margin: auto; touch-action: pan-y; }
.collection-landing .stack-card { display: grid; grid-template-rows: minmax(0,1fr) auto; position: absolute; inset: 0; width: 100%; height: 100%; border: 1px solid #e5eae5; border-radius: 24px; padding: 9px; background: #fff; overflow: hidden; isolation: isolate; cursor: pointer; transition: transform 140ms ease-out; backface-visibility: hidden; contain: layout paint; }
.collection-landing .stack-card > img { display: block; width: 100%; height: 100%; min-height: 0; border-radius: 17px; background: #f5f7f3; object-fit: cover; opacity: 0; transition: opacity 180ms ease; }
.collection-landing .stack-card > img.is-loaded { opacity: 1; }
.collection-landing .stack-card::after { content: ''; position: absolute; inset: 9px 9px auto; height: calc(100% - 190px); border-radius: 17px; background: linear-gradient(0deg,rgba(0,0,0,.18),transparent 68%); background: linear-gradient(0deg,color-mix(in srgb,var(--slide-accent) 58%,transparent),transparent 68%); pointer-events: none; }
.collection-landing .stack-card > img { filter: saturate(1.06); }
.collection-landing .stack-card:is([data-position="0"],[data-position="1"],[data-position="2"]) { will-change: transform; }
.collection-landing .collection-card-floor { color: var(--slide-accent); }
.collection-landing .collection-card-arrow { color: #fff; background: var(--slide-accent); }
.collection-landing .collection-card-caption { display: flex; flex-direction: column; height: 170px; padding: 18px 14px 9px; }
.collection-card-floor { display: block; font-size: 10px; line-height: 1.3; color: #738078; }
.collection-card-caption h2 { color: #202522; font-family: 'Gilroy-Bold',sans-serif; font-size: clamp(22px,2.5vw,32px); line-height: 1.2; margin: 6px 0; overflow-wrap: anywhere; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.collection-card-link { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 11px; color: #738078; margin-top: auto; }
.collection-card-arrow { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #f2f5f0; color: #202522; }
.collection-card-arrow svg { width: 19px; height: 19px; }
html[dir="rtl"] .collection-card-arrow svg { transform: rotate(180deg); }
.collection-landing .stack-card:not([data-position]):nth-child(1), .collection-landing .stack-card[data-position="0"] { transform: translateX(calc(-100% - 8px)) scale(.94); transform-origin: right center; z-index: 1; pointer-events: none; }
.collection-landing .stack-card:not([data-position]):nth-child(2), .collection-landing .stack-card[data-position="1"] { transform: translateX(0); z-index: 3; pointer-events: auto; }
.collection-landing .stack-card:not([data-position]):nth-child(3), .collection-landing .stack-card[data-position="2"] { transform: translateX(calc(100% + 8px)) scale(.94); transform-origin: left center; z-index: 1; pointer-events: none; }
.collection-landing .stack-card:not([data-position]):nth-child(n+4), .collection-landing .stack-card[data-position="3"], .collection-landing .stack-card[data-position="4"], .collection-landing .stack-card[data-position="5"] { transform: translateX(calc(200% + 16px)) scale(.9); z-index: 0; visibility: hidden; pointer-events: none; }
.carousel-controls { display: flex; direction: ltr; align-items: center; justify-content: center; gap: 16px; margin: 18px auto 22px; }
.carousel-controls > button { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #e5eae5; border-radius: 13px; background: #fff; color: #202522; cursor: pointer; }
.carousel-controls > button svg { width: 20px; height: 20px; }
.carousel-previous svg { transform: rotate(180deg); }
.carousel-pagination { display: flex; }
.carousel-pagination button { display: grid; place-items: center; width: 24px; height: 32px; padding: 0; border: none; background: transparent; cursor: pointer; }
.carousel-pagination button::before { content: ''; display: block; width: 6px; height: 6px; border-radius: 8px; background: #d8dfd8; }
.carousel-pagination button[aria-current="true"]::before { width: 18px; background: #202522; }
.collection-landing :is(button,[role="link"],a):focus-visible { outline: 2px solid #304939; outline-offset: 3px; }
.collection-footer { flex-shrink: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; padding: 18px 0 26px; margin: auto clamp(16px,2.4vw,64px) 0; }
.collection-social { display: flex; align-items: center; gap: 22px; }
.collection-social button { background: transparent; padding: 0; border: none; }
.collection-credit { color: #738078; font-size: 11px; line-height: 1.6; text-align: center; }
.collection-credit a { color: inherit; text-decoration: none; white-space: nowrap; }
.collection-credit a:hover { text-decoration: underline; }
@media (max-width:600px) {
    .collection-header { min-height: 76px; grid-template-columns: minmax(0,1fr) auto minmax(0,1fr); gap: 8px; }
    .collection-header > a > img { width: clamp(130px,44vw,210px); }
    .collection-intro { padding: 24px 16px 18px; }
    .collection-intro h1 { font-size: 22px; }
    .collection-landing .stack-container { width: 78vw; height: clamp(350px,53vh,500px); height: clamp(350px,53dvh,500px); }
    .collection-landing .stack-card { border-radius: 21px; }
    .collection-landing .stack-card > img { border-radius: 14px; }
    .collection-landing .stack-card::after { height: calc(100% - 168px); border-radius: 14px; }
    .collection-landing .collection-card-caption { height: 148px; padding: 17px 9px 8px; }
    .collection-card-caption h2 { font-size: 22px; }
    .collection-card-link { font-size: 10px; }
    .carousel-controls { gap: 10px; margin: 14px auto 20px; }
    .collection-footer { flex-direction: column; gap: 22px; padding: 20px 0 max(20px, env(safe-area-inset-bottom)); }
    .collection-social { gap: 24px; }
    .collection-credit { max-width: 100%; padding: 0 8px; }
}
@media (orientation:landscape) and (max-height:600px) { .collection-landing .stack-container { width: 52vw; height: 360px; } .collection-header { min-height: 66px; } .collection-intro { padding: 20px 16px; } }
@media (prefers-reduced-motion:reduce) { .collection-landing .stack-card, .collection-landing .stack-card > img { transition: none; } }

/* Native contact panel, matching the menu and basket. */
.menu-contact { width:min(580px,calc(100vw - 28px)); max-width:none; max-height:calc(100dvh - 28px); margin:auto; padding:0; border:1px solid #e5eae5; border-radius:24px; background:#fff; color:#202522; font-family:'Gilroy-Medium',sans-serif; overflow:auto; overscroll-behavior:contain; }
.menu-contact::backdrop { background:rgb(15 22 18 / 58%); }
.menu-contact-header { position:sticky; top:0; z-index:1; background:#fff; display:flex; align-items:start; justify-content:space-between; gap:16px; padding:24px; border-bottom:1px solid #edf0ed; }
.menu-contact-header span { font-size:10px; color:#738078; text-transform:uppercase; letter-spacing:.1em; }
.menu-contact-header h2 { font-family:'Gilroy-Bold',sans-serif; font-size:27px; color:#202522; margin:6px 0 0; }
.menu-contact-header button { flex:0 0 38px; width:38px; height:38px; border:1px solid #e5eae5; border-radius:50%; background:#f6f8f6; color:#202522; font-size:25px; cursor:pointer; display: inline-grid; place-items: center; padding: 0; line-height: 0; -webkit-appearance: none; appearance: none; }
.menu-contact-intro { color:#738078; font-size:13px; line-height:1.6; margin:0; padding:20px 24px 8px; }
.menu-contact-list { padding:0 24px 14px; }
.menu-contact-row { display:flex; align-items:center; justify-content:space-between; gap:18px; padding:20px 0; color:#202522; text-decoration:none; border-bottom:1px solid #edf0ed; }
.menu-contact-row:last-child { border-bottom:none; }
.menu-contact-row > span:first-child { display:flex; flex-direction:column; gap:8px; min-width:0; }
.menu-contact-row strong { font-size:14px; font-weight:500; overflow-wrap:anywhere; }
.menu-contact-row bdi { display:block; color:#66756b; font-size:15px; font-variant-numeric:tabular-nums; user-select:text; }
.menu-contact-phone { display:grid; place-items:center; flex:0 0 42px; height:42px; border:1px solid #e5eae5; border-radius:13px; background:#f2f5f0; color:#304939; }
.menu-contact-phone svg { width:20px; height:20px; }
.menu-contact-row:hover .menu-contact-phone { background:#e4ece1; }
.menu-contact :is(a,button):focus-visible { outline:2px solid #304939; outline-offset:4px; }
@media(max-width:600px) { .menu-contact { border-radius:20px; } .menu-contact-header { padding:20px; } .menu-contact-intro { padding:16px 20px 6px; font-size:12px; } .menu-contact-list { padding:0 20px 10px; } .menu-contact-row { padding:18px 0; } }