/*
  Modern UI overrides for QR Menu
  - Non-breaking overrides on top of existing theme
  - Targets: drawer menu (hamburger), home status bar, buttons, inputs, search modal
*/

:root{
  --ui-bg: #0b0d12;
  --ui-bg-2: #0f1420;
  --ui-surface: rgba(255,255,255,.06);
  --ui-surface-2: rgba(255,255,255,.10);
  --ui-border: rgba(255,255,255,.12);
  --ui-text: #f2f5fb;
  --ui-muted: rgba(242,245,251,.72);
  --ui-accent: #f3c14b; /* warm gold */
  --ui-accent-2: #ff8a3d;
  --ui-radius: 18px;
  --ui-radius-sm: 12px;
  --ui-shadow: 0 18px 45px rgba(0,0,0,.45);
  --ui-shadow-soft: 0 10px 24px rgba(0,0,0,.28);
}

html, body{
  background: radial-gradient(1200px 700px at 20% -10%, rgba(243,193,75,.16), transparent 55%),
              radial-gradient(1100px 700px at 90% 0%, rgba(255,138,61,.10), transparent 50%),
              linear-gradient(180deg, var(--ui-bg), var(--ui-bg-2));
}

body{
  color: var(--ui-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ---------- Form inputs (fix "transparent / silik" look) ---------- */

.form_input{
  width: 100%;
  /* Force visible inputs on top of legacy theme rules */
  background: rgba(255,255,255,.10) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  outline: none;
}

.form_input::placeholder{
  color: var(--ui-muted);
  opacity: 1;
}

/* Some pages use form-control / plain inputs without .form_input */
input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
textarea,
select{
  background: rgba(255,255,255,.10) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

textarea{ min-height: 110px; resize: vertical; }

/* Ensure labels are not translucent */
.standart_label,
.form-group label{
  color: var(--ui-text) !important;
  opacity: 1 !important;
}

.form_input:focus{
  border-color: rgba(243,193,75,.55);
  box-shadow: 0 0 0 3px rgba(243,193,75,.18);
}

/* Ensure content doesn't jump under fixed header (if used by theme) */
.main_content{ padding-top: 8px; }

/* ---------- Top nav / hamburger area ---------- */

.top_navi,
.header,
.header_bar,
.menu_bar{
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.top_navi{
  border-bottom: 1px solid var(--ui-border);
  background: rgba(11,13,18,.62);
}

/* Icons/buttons in top area */
a, button{ -webkit-tap-highlight-color: transparent; }

button, .btn{
  border-radius: var(--ui-radius-sm);
}

/* ---------- Drawer (3 çizgi menü) ---------- */

.menu_large{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.menu_large_content{
  width: min(380px, 86vw) !important;
  max-width: 86vw;
  background: rgba(15,20,32,.92);
  border-right: 1px solid var(--ui-border);
  box-shadow: var(--ui-shadow);
  border-top-right-radius: 22px;
  border-bottom-right-radius: 22px;
  overflow: hidden;
}

.menu_large .menu_large_content .top_area{
  padding: 18px 16px 14px;
  border-bottom: 1px solid var(--ui-border);
  background: linear-gradient(180deg, rgba(255,255,255,.06), transparent);
}

.menu_large .menu_large_content .top_area .menu_close{
  width: 40px;
  height: 40px;
  border-radius: 14px;
  background: var(--ui-surface);
  border: 1px solid var(--ui-border);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.menu_large .menu_large_content .menu_list{
  max-height: calc(100vh - 110px);
  overflow-y: auto;
  padding: 10px 10px 18px;
}

.menu_large .menu_large_content .menu_list::-webkit-scrollbar{ width: 8px; }
.menu_large .menu_large_content .menu_list::-webkit-scrollbar-thumb{ background: rgba(255,255,255,.14); border-radius: 10px; }

.menu_large .menu_large_content .menu_list ul{ margin: 0; padding: 0; }
.menu_large .menu_large_content .menu_list ul li{ list-style: none; }

.menu_large .menu_large_content .menu_list ul li a{
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid transparent;
  color: var(--ui-text);
  background: transparent;
  transition: transform .12s ease, background .12s ease, border-color .12s ease;
}

.menu_large .menu_large_content .menu_list ul li a img{
  width: 22px;
  height: 22px;
  opacity: .95;
}

.menu_large .menu_large_content .menu_list ul li a span,
.menu_large .menu_large_content .menu_list ul li a strong,
.menu_large .menu_large_content .menu_list ul li a{
  font-weight: 600;
}

.menu_large .menu_large_content .menu_list ul li a:hover{
  background: var(--ui-surface);
  border-color: var(--ui-border);
  transform: translateX(2px);
}

/* Active item if theme adds .active */
.menu_large .menu_large_content .menu_list ul li a.active,
.menu_large .menu_large_content .menu_list ul li.active a{
  background: linear-gradient(90deg, rgba(243,193,75,.16), rgba(255,138,61,.08));
  border-color: rgba(243,193,75,.22);
}

/* ---------- Home status bar ---------- */

.restaurant_status{
  margin: 14px auto 8px;
  background: rgba(255,255,255,.06);
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius);
  box-shadow: var(--ui-shadow-soft);
  overflow: hidden;
}

.restaurant_status a{
  padding: 14px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.restaurant_status a h5,
.restaurant_status a h6{
  margin: 0;
  line-height: 1.15;
}

.restaurant_status a h5{ font-size: 15px; font-weight: 700; }
.restaurant_status a h6{ font-size: 12px; opacity: .75; }

.restaurant_status a img{
  width: 20px;
  height: 20px;
  opacity: .95;
}

/* ---------- Cards / sections / common ---------- */

.section_heading h2,
.section_heading h3{
  letter-spacing: .2px;
}

.single_favourite_item,
.single_item,
.single_product,
.item_details,
.cart_item{
  border-radius: var(--ui-radius);
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.05);
  box-shadow: var(--ui-shadow-soft);
}

/* ---------- Inputs & search ---------- */

input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
textarea,
select{
  background: rgba(255,255,255,.06) !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
  border-radius: 14px !important;
  box-shadow: none !important;
}

input::placeholder, textarea::placeholder{ color: rgba(242,245,251,.55); }

/* Search modal (#menu_box) */
#menu_box{ background: rgba(0,0,0,.65) !important; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }

#menu_box .content{
  background: rgba(15,20,32,.96) !important;
  border: 1px solid var(--ui-border);
  border-radius: 22px;
  box-shadow: var(--ui-shadow);
}

#menu_box .search_field{
  border: 1px solid var(--ui-border);
  background: rgba(255,255,255,.06);
  border-radius: 16px;
  padding: 10px 12px;
}

#menu_box .search_field input{ background: transparent !important; border: 0 !important; }

#menu_box .result_container{ padding-top: 6px; }

/* ---------- Buttons ---------- */

.btn, .button, button,
a.btn, a.button{
  border-radius: 14px;
}

.btn-primary,
.theme_btn,
button.theme_btn,
a.theme_btn{
  background: linear-gradient(135deg, var(--ui-accent), var(--ui-accent-2)) !important;
  border: 0 !important;
  color: #101114 !important;
  box-shadow: 0 12px 26px rgba(243,193,75,.22);
  font-weight: 800;
}

.btn-primary:hover,
.theme_btn:hover{
  filter: brightness(1.03);
  transform: translateY(-1px);
}

.btn-outline,
.btn-outline-primary{
  background: transparent !important;
  border: 1px solid var(--ui-border) !important;
  color: var(--ui-text) !important;
}

/* ---------- Small responsive tuning ---------- */

@media (max-width: 380px){
  .menu_large_content{ width: 90vw !important; }
  .restaurant_status a h5{ font-size: 14px; }
}

@media (min-width: 992px){
  .menu_large_content{ width: min(420px, 32vw) !important; }
}


/* CONTACT FORM VISIBILITY OVERRIDE */
.form_input, input.form_input, textarea.form_input, select.form_input {
  background-color: #ffffff !important;
  color: #111827 !important;
  border: 1px solid rgba(17,24,39,0.18) !important;
  opacity: 1 !important;
}
.form_input::placeholder { color: rgba(17,24,39,0.55) !important; }
.standart_label { color: rgba(17,24,39,0.9) !important; opacity: 1 !important; }


/* =========================
   Google-like Reviews UI
   ========================= */
.g-reviews{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:18px;
  overflow:hidden;
  box-shadow: 0 10px 28px rgba(0,0,0,.06);
}
.g-reviews__header{
  display:flex;
  gap:18px;
  padding:16px;
  background: linear-gradient(180deg, #ffffff 0%, #f7f7f7 100%);
  border-bottom:1px solid rgba(0,0,0,.06);
  align-items:stretch;
}
.g-reviews__summary{
  width:160px;
  flex:0 0 160px;
  border-radius:14px;
  background:#fff;
  border:1px solid rgba(0,0,0,.07);
  padding:14px 12px;
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  justify-content:center;
}
.g-reviews__avg{
  font-size:40px;
  font-weight:800;
  line-height:1;
  color:#111827;
}
.g-reviews__stars{
  margin-top:6px;
  display:flex;
  gap:2px;
  font-size:18px;
  color:#f59e0b; /* Google-ish amber */
}
.g-reviews__count{
  margin-top:6px;
  font-size:12px;
  color:#6b7280;
}
.g-reviews__bars{
  flex:1;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:6px;
  min-width:0;
}
.g-reviews__barRow{
  display:grid;
  grid-template-columns: 18px 1fr 34px;
  gap:10px;
  align-items:center;
}
.g-reviews__barLabel{ font-size:12px; color:#111827; text-align:right; }
.g-reviews__barTrack{
  height:10px;
  background:#eee;
  border-radius:999px;
  overflow:hidden;
  border:1px solid rgba(0,0,0,.06);
}
.g-reviews__barFill{
  height:100%;
  background:#9ca3af; /* grey fill like Google */
  border-radius:999px;
}
.g-reviews__barCount{ font-size:12px; color:#6b7280; text-align:left; }

.g-reviews__body{ padding:16px; }
.g-reviews__grid{
  display:grid;
  grid-template-columns: 1.3fr .7fr;
  gap:16px;
}
.g-reviews__title{
  font-size:15px;
  font-weight:800;
  color:#111827;
  margin-bottom:10px;
}
.g-reviews__empty{
  padding:14px;
  border:1px dashed rgba(0,0,0,.15);
  border-radius:14px;
  color:#6b7280;
  background:#fafafa;
}

.g-reviewCard{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px 12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.g-reviewCard + .g-reviewCard{ margin-top:12px; }
.g-reviewCard__top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  align-items:center;
}
.g-reviewCard__name{ font-weight:800; color:#111827; font-size:13px; }
.g-reviewCard__date{ color:#6b7280; font-size:12px; white-space:nowrap; }
.g-reviewCard__stars{
  margin-top:6px;
  display:flex;
  gap:2px;
  color:#f59e0b;
  font-size:16px;
}
.g-reviewCard__text{
  margin-top:8px;
  color:#374151;
  font-size:13px;
  line-height:1.45;
}

/* Form */
.g-reviewForm{
  background:#fff;
  border:1px solid rgba(0,0,0,.08);
  border-radius:16px;
  padding:12px;
  box-shadow: 0 8px 18px rgba(0,0,0,.05);
}
.g-field{ margin-bottom:10px; }
.g-field label{
  display:block;
  font-size:12px;
  color:#374151;
  font-weight:700;
  margin-bottom:6px;
}
.g-field input[type="text"],
.g-field textarea{
  width:100%;
  border:1px solid rgba(0,0,0,.12);
  border-radius:12px;
  padding:10px 10px;
  outline:none;
  background:#fff;
  font-size:13px;
}
.g-field textarea{ resize:vertical; min-height:96px; }

.g-btn{
  width:100%;
  border:none;
  border-radius:14px;
  padding:11px 12px;
  background: var(--primary, #009946);
  color:#fff;
  font-weight:800;
  letter-spacing:.2px;
}
.g-reviewForm__hint{
  margin-top:8px;
  font-size:12px;
  color:#6b7280;
  text-align:center;
}

/* Star input (Google-ish) */
.g-starInput{
  direction: rtl;
  unicode-bidi: bidi-override;
  display:inline-flex;
  gap:4px;
  font-size:22px;
  line-height:1;
}
.g-starInput input{ display:none; }
.g-starInput label{
  cursor:pointer;
  color:#d1d5db;
  padding:2px 1px;
}
.g-starInput label:hover,
.g-starInput label:hover ~ label{
  color:#f59e0b;
}
.g-starInput input:checked ~ label{
  color:#f59e0b;
}

/* Responsive */
@media (max-width: 991px){
  .g-reviews__header{ flex-direction:column; }
  .g-reviews__summary{ width:100%; flex:0 0 auto; align-items:center; text-align:center; }
  .g-reviews__bars{ width:100%; }
  .g-reviews__grid{ grid-template-columns:1fr; }
}