/* App layer for the Foodies template conversion.
   Loaded AFTER the template's main.css. Only adds phone / tablet app chrome (bottom tab bar,
   safe areas, install banner, touch tidy-ups) and changes nothing the template draws on a
   desktop with a mouse, where the design is exactly as delivered. */

:root {
  --app-tabbar-h: 64px;
  --app-accent: #FFC222;
  --app-green: #00833E;
  --app-ink: #1E1D23;
}

/* ---------------------------------------------------------------- tab bar */
.app-tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 99998;
  display: none; grid-template-columns: repeat(5, 1fr);
  background: rgba(255, 255, 255, .97);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(30, 29, 35, .1);
  padding-bottom: env(safe-area-inset-bottom);
  box-shadow: 0 -6px 24px rgba(0, 0, 0, .06);
}
.app-tabbar a {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  min-height: var(--app-tabbar-h); font-family: "Nunito", sans-serif; font-size: 11px; font-weight: 400;
  color: #76756D; text-decoration: none; -webkit-tap-highlight-color: transparent;
}
.app-tabbar a i { font-size: 21px; line-height: 1; }
.app-tabbar a.is-current { color: var(--app-green); }
.app-tabbar-count {
  position: absolute; top: 8px; left: calc(50% + 6px); min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: 9px; background: var(--app-accent); color: var(--app-ink); font-size: 12px; font-weight: 400; line-height: 18px; text-align: center;
}
[hidden] { display: none !important; }

/* The client's logo files are 2x pixels; the <img> width/height attributes (engine/tools/convert-template.mjs)
   give the template's rendered size, and this keeps the ratio when the template's CSS sets only a
   width (drawer 120px, phones 140px). The template itself puts no size attributes on images. */
img[width][height] { height: auto; }

/* phones and tablets by width, and any touch-only device (an iPad in landscape is 1024+ wide) */
@media (max-width: 991px), (hover: none) and (pointer: coarse) {
  .app-tabbar { display: grid; }
  /* ScrollSmoother sizes the document from #smooth-content, so the clearance goes there */
  #smooth-content { padding-bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom)); }
  .back-to-top { bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 16px); right: 16px; }
}

/* ------------------------------------------------ the desktop menu never shows on phones
   (the template leaves that to meanmenu's JS; this holds even when that init is late or missing) */
@media (max-width: 1199px) {
  .header-main .main-menu > #mobile-menu { display: none !important; }
}

/* ---------------------------------------------------------- touch devices */
@media (hover: none) {
  .mouseCursor { display: none !important; }
  a, button, .theme-btn { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
  /* phone and mail links in the top bar and contact blocks: a finger-sized hit area without moving the text */
  a[href^="tel:"], a[href^="mailto:"] { padding: 10px 0; }
}

/* ------------------------------------------------------ installed (standalone) */
@media (display-mode: standalone) {
  #header-sticky, .header-section { padding-top: env(safe-area-inset-top); }
  body { overscroll-behavior-y: contain; }
  .app-install { display: none !important; }
}

/* ---------------------------------------------------------- install banner */
.app-install {
  position: fixed; left: 12px; right: 12px; z-index: 99997;
  bottom: calc(var(--app-tabbar-h) + env(safe-area-inset-bottom) + 12px);
  display: flex; align-items: center; gap: 12px; padding: 10px 10px 10px 12px;
  background: #fff; border-radius: 14px; box-shadow: 0 10px 30px rgba(0, 0, 0, .18);
  font-family: "Nunito", sans-serif; font-size: 13px; line-height: 1.3; color: #76756D;
}
.app-install img { width: 44px; height: 44px; border-radius: 10px; }
.app-install > div { flex: 1; }
.app-install strong { display: block; color: var(--app-ink); font-size: 14px; }
.app-install .theme-btn { height: 40px; line-height: 40px; padding: 0 16px; font-size: 14px; }
.app-install button.close { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(30, 29, 35, .15); background: none; color: var(--app-ink); font-size: 16px; }
@media (min-width: 992px) { .app-install { left: auto; right: 24px; bottom: 96px; max-width: 420px; } }

/* --------------------------------------------------------------- toasts */
.app-toasts { position: fixed; left: 12px; right: 12px; top: 12px; z-index: 99999; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.app-toast { pointer-events: auto; background: var(--app-ink); color: #fff; padding: 12px 18px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.25); font-family: "Nunito", sans-serif; font-weight: 400; font-size: 15px; max-width: 480px; }
.app-toast a { color: var(--app-accent); text-decoration: underline; }

/* ------------------------------------------------------- touch tap targets */
/* The template's controls are sized for a mouse in places. On touch screens (and all phone /
   tablet widths) they get a 44px hit area. Padding with a matching negative margin keeps the
   line boxes where they are, so nothing moves visually. !important: this layer must win over
   the template's long selectors without editing main.css. */
@media (hover: none), (max-width: 991px) {
  .shop-icon-right .shop-icon { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  .social-icon a, .social-icon-list .social-icon a { width: 44px !important; height: 44px !important; line-height: 44px !important; }
  .mean-container .mean-nav ul li a.mean-expand { width: 44px !important; height: 44px !important; line-height: 44px !important; padding: 0 !important; text-align: center; }
  .offcanvas__close button { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; }
  .offcanvas__logo a, .footer-logo a { display: inline-block !important; padding: 11px 0 !important; margin: -11px 0 !important; }
  .offcanvas__content form button { width: 44px !important; height: 44px !important; }
  .footer-widget-items .list-items li a, .footer-widget-wrapper .list-items li a, .footer-widget-items .recent-title,
  .contact-items a, .details-info a, .breadcrumb-items li a, .news-content ul li a, .news-content h3 a, .news-content h4 a,
  .food-content h3 a, .food-menu-itemss .title a, .content .title a, .shop-category-items .title a, .product-title a, .info-items .number,
  .icon-item .content h2 a, .choose-button .content h3 a, .contact-booking-wrapper-3 p span a, .contact-booking-wrapper-3 h2 a, .footer-contentt a, .single-sideber-widget li a, .link-btn, .news-content .link-btn, h2 a, h3 a, h4 a, h5 a, h6 a {
    display: inline-block !important; padding-top: 12px !important; padding-bottom: 12px !important; margin-top: -12px !important; margin-bottom: -12px !important;
  }
  .tagcloud a { min-height: 44px !important; display: inline-flex !important; align-items: center !important; }
  .nav .nav-link, .nav-item .nav-link { min-height: 44px !important; min-width: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center; }
  .shop-category-items .icon a, .food-category-items-4 .icon a, .shop-list-inner .icon a, .product-icon a, .icon-items a, .shop-icon-items a, .icon-list a { min-width: 44px !important; min-height: 44px !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; }
  .single-sideber-widget .form input, .search-widget input, .form input[type=text], .form input[type=search], .shop-notices-wrapper form input { min-height: 44px !important; }
  .single-sideber-widget .form button, .search-widget button, .form button, .shop-notices-wrapper form button { min-width: 44px !important; min-height: 44px !important; display: inline-flex; align-items: center; justify-content: center; }
  .food-category-card-item .heart, .heart { display: inline-block !important; padding: 8px 14px !important; margin: -8px -14px !important; }
  .single-sideber-widget li a, .sidebar-widget li a { padding-top: 14px !important; padding-bottom: 14px !important; margin-top: -14px !important; margin-bottom: -14px !important; }
  .food-category-card-item .arrow, .arrow-button button, .btn-round { min-width: 44px !important; min-height: 44px !important; }
  .footer-bottom p a, .copyright a { display: inline-block !important; padding: 11px 4px !important; margin: -11px -4px !important; }
}