/* ===== Базовые ===== */
:root{
  --bg:#f9f9f9; --fg:#111; --brand:#2563eb; --muted:#64748b; --line:#e5e7eb;
  --shadow:0 3px 10px rgba(0,0,0,.05);
  --radius:11px;
}
*,:before,:after{ box-sizing:border-box }
html{ scroll-behavior:smooth }
body{ margin:0; font-family:'Roboto', system-ui, -apple-system, "Segoe UI", "Helvetica Neue", Arial; background:var(--bg); color:var(--fg); line-height:1.6 }
img{ display:block; max-width:100%; height:auto }

/* ===== Контейнер ===== */
.container{ max-width:880px; min-width:320px; margin:0 auto; padding:0.9rem }

/* ===== Верхняя шапка ===== */
.site-header{ background:#fff; border-bottom:1px solid #eef2f7; position:relative; z-index:20; overflow:visible; }
.site-header__row{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.6rem 0; flex-wrap:wrap; }
.site-logo{ display:inline-flex; align-items:center; gap:.5rem; text-decoration:none; color:#111; font-weight:800; }
.site-logo i{ color:var(--brand); font-size:1.1rem }
.site-logo span{ font-size:1.05rem }

.site-nav{ list-style:none; margin:0; padding:0; display:flex; gap:.6rem; flex-wrap:wrap; }
.site-nav a{ display:inline-block; text-decoration:none; color:#111; padding:.45rem .65rem; border-radius:10px; }
.site-nav a:hover{ background:#f1f5f9 }

.site-actions{ display:flex; align-items:center; gap:.5rem }

/* соц-иконки */
.social-icons{ display:flex; align-items:center; gap:.35rem; }
.si{ display:inline-flex; align-items:center; justify-content:center; width:32px; height:32px; border-radius:8px; text-decoration:none; color:var(--brand); background:#fff; border:1px solid var(--line); box-shadow:var(--shadow); transition:transform .15s, box-shadow .15s, border-color .15s, background-color .15s; }
.si:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.1); border-color:var(--brand); background:#f8fbff; }
.si i{ font-size:16px }

/* ===== Header ===== */
.header{ text-align:center; padding:1.7rem 1rem }
.header-top{ display:flex; justify-content:center; align-items:center; gap:.45rem }
.header-icon{ font-size:1.9rem; color:var(--brand) }
.header-title{ font-weight:700; font-size:1.85rem; color:var(--brand) }
.header-subtitle{ font-size:.98rem; color:#333; margin-top:.4rem }

/* ===== Upload & site styles (kept) ===== */
.upload-section{ border:2px dashed var(--brand); border-radius:12px; padding:1.7rem; text-align:center; cursor:pointer; transition:background-color .25s, border-color .25s; display:flex; flex-direction:column; align-items:center; justify-content:center; margin-top:1.6rem; background:#fff; }
.upload-section.dragover{ background:rgba(37,99,235,.05); border-color:#10b981 }
.upload-btn{ display:inline-block; background:var(--brand); color:#fff; padding:.7rem 1.8rem; border-radius:9px; cursor:pointer; font-weight:700; transition:background-color .25s; text-align:center; margin-bottom:.85rem; }
.upload-btn:hover{ background:#1e40af }

.progress-container{ width:100%; max-width:380px; margin-top:.8rem; height:18px; background:#e5e7eb; border-radius:9px; overflow:hidden; display:none }
.progress-bar{ height:100%; width:0%; background:#10b981; transition:width .25s }
.status-text{ margin-top:.45rem; display:none; font-size:.9rem }

.important-info{ background:#fef3c7; border-left:4px solid #f59e0b; padding:.9rem 1.3rem; border-radius:10px; margin-top:1.6rem; font-size:.95rem; color:#92400e; }
.important-info h2{ margin:0 0 .45rem; color:#b45309; font-size:1.1rem }

.warning-box{ display:flex; align-items:flex-start; gap:.9rem; padding:1rem 1.2rem; border-radius:11px; margin:1rem 0; background:#fffbeb; border:1px solid #fcd34d; box-shadow:var(--shadow); }
.warning-box i{ font-size:1.2rem; color:#f59e0b; flex-shrink:0; margin-top:.15rem }
.warning-content h3{ margin:0 0 .45rem; color:#b45309; font-size:1.03rem }
.warning-content p{ margin:.4rem 0; color:#92400e; line-height:1.5 }
.warning-content ul{ margin:.4rem 0; padding-left:1.25rem; color:#92400e }
.faq-link{ color:var(--brand); font-weight:600; text-decoration:underline }
.faq-link:hover{ color:#1e40af }
.hidden{ display:none }

.promo-cameras{ margin-top:1.6rem }
.promo-cameras h2{ margin-bottom:.45rem; color:var(--brand); font-size:1.1rem }
.camera-grid{ display:flex; flex-wrap:wrap; gap:.65rem }
.camera-item{ background:var(--brand); color:#fff; padding:.55rem .95rem; border-radius:10px; font-weight:700; font-size:.9rem; text-align:center; flex:1 1 100px }

.results{ margin-top:1.6rem; display:none }
.results h2{ font-size:1.2rem; margin:0 0 .55rem }
.metadata-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:.6rem; margin-top:.6rem }
.metadata-item{ background:#fff; border-radius:11px; padding:.7rem; box-shadow:var(--shadow); border:1px solid var(--line); transition:transform .2s, box-shadow .2s; display:flex; flex-direction:column; font-size:.92rem; line-height:1.5; }
.metadata-item:hover{ transform:translateY(-1px); box-shadow:0 7px 16px rgba(0,0,0,.09) }
.metadata-item.shutter-count{ grid-column:1 / -1; background:linear-gradient(135deg,var(--brand) 0%,#1e40af 100%); color:#fff; padding:1.2rem; text-align:center }
.metadata-item.shutter-count .meta-label{ color:#fff; font-size:1.05rem; margin-bottom:.4rem }
.metadata-item.shutter-count .meta-value{ color:#fff; font-size:1.8rem; font-weight:800 }

.download-btn{ margin-top:.85rem; padding:.55rem 1.3rem; border-radius:10px; border:0; background:#10b981; color:#fff; font-weight:800; cursor:pointer; transition:background-color .25s }
.download-btn:hover{ background:#059669 }

/* FAQ styling */
.faq{ margin-top:1.8rem }
.faq h2{ text-align:center; color: var(--brand); margin-bottom:1rem; font-size:1.35rem }
.faq-grid{ display:grid; gap:.75rem }
.faq-card{ background:#fff; border-radius:11px; box-shadow:var(--shadow); border:1px solid var(--line); overflow:hidden; transition: box-shadow .25s }
.faq-card:hover{ box-shadow:0 8px 18px rgba(0,0,0,.08) }
.faq-question{ padding:.85rem 1.1rem; font-weight:700; font-size:1rem; cursor:pointer; display:flex; justify-content:space-between; align-items:center; user-select:none }
.faq-toggle i{ transition:transform .25s }
.faq-answer{ max-height:0; overflow:hidden; padding:0 1.1rem; font-size:.95rem; line-height:1.5; color:#333; transition:max-height .3s ease, padding .3s ease }
.faq-card.active .faq-answer{ padding:.65rem 1.1rem .85rem; max-height:480px }

.socials{ margin-top:1.6rem }
.socials h2{ margin:0 0 .6rem; color:var(--brand); font-size:1.125rem }
.socials-list{ list-style:none; padding:0; margin:0; display:grid; grid-template-columns:repeat(2,1fr); gap:10px; }
@media (max-width:560px){ .socials-list{ grid-template-columns:1fr } }

.partner-chip{ display:flex; align-items:center; gap:10px; width:100%; text-decoration:none; background:#fff; border:1px solid var(--line); border-radius:12px; padding:.65rem .85rem; box-shadow:var(--shadow); transition:transform .18s, box-shadow .18s, border-color .18s; }
.partner-chip:hover{ transform:translateY(-1px); box-shadow:0 8px 18px rgba(0,0,0,.1); border-color:var(--brand) }
.partner-chip img{ width:48px; height:48px; border-radius:10px; object-fit:cover; flex:0 0 48px }
.partner-badge{ width:48px; height:48px; flex:0 0 48px; border-radius:10px; display:grid; place-items:center; font-weight:800; letter-spacing:.45px; color:#fff; background:linear-gradient(135deg,#27a7e7 0%, #2563eb 100%); }
.partner-text{ display:grid; line-height:1.5 }
.partner-name{ font-weight:700; color:#111; font-size:1rem }
.partner-note{ font-size:.9rem; color:var(--muted) }

/* Footer */
footer.footer{ text-align:center; color:#6b7280; font-size:.9rem; margin-top:10px; padding:1rem 1rem 1.7rem }
.footer .footer-wrap{ display:inline-flex; align-items:center; gap:.6rem; padding:.45rem .65rem; border:1px solid var(--line); border-radius:999px; background:#fff; box-shadow:var(--shadow); }
.footer .copyright{ margin:0; color:#6b7280 }

/* Responsive tweaks */
@media (max-width:768px){
  .site-header__row{ justify-content:center; gap:.6rem; }
  .site-nav{ justify-content:center; gap:.45rem; }
  .site-actions{ gap:.45rem; }
  .si{ width:30px; height:30px; }
  .si i{ font-size:15px }

  .metadata-grid{ grid-template-columns:1fr }
  .metadata-item.shutter-count{ grid-column:1 }
  .camera-grid{ justify-content:space-between }
  .upload-section{ padding:1.3rem }
  .warning-box{ flex-direction:column; align-items:center; text-align:center }
  .warning-box i{ margin-bottom:.4rem }
}

/* Animation */
@keyframes fadeInUp{ to{ opacity:1; transform:translateY(0) } }
.metadata-item.fade-in{ opacity:0; transform:translateY(8px); animation:fadeInUp .35s forwards }

/* ===== Glass-style language dropdown ===== */
.lang-switch { position: relative; display: inline-flex; align-items: center; z-index: 400; }

/* toggle */
.lang-toggle {
  display:inline-flex;
  align-items:center;
  gap:.5rem;
  padding:.36rem .7rem;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.18);
  background: linear-gradient(180deg, rgba(255,255,255,0.78), rgba(250,250,255,0.65));
  color:var(--fg);
  font-weight:800;
  cursor:pointer;
  box-shadow: 0 6px 22px rgba(16,24,40,.08);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  transition: transform .12s ease, box-shadow .12s;
}
.lang-toggle:active { transform: translateY(1px); }
.lang-toggle .lang-current { letter-spacing:.6px; }
.lang-chevron { color:var(--muted); font-size:.9rem; transition:transform .18s ease; }

/* panel */
.lang-panel {
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:180px;
  max-width:360px;
  background: linear-gradient(180deg, rgba(255,255,255,0.62), rgba(245,248,255,0.46));
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.18);
  box-shadow: 0 26px 80px rgba(16,24,40,.16);
  padding:.4rem;
  z-index:420;
  opacity:0;
  transform: translateY(-8px) scale(.99);
  transition: opacity .18s cubic-bezier(.2,.9,.2,1), transform .18s cubic-bezier(.2,.9,.2,1);
  max-height:340px;
  overflow:auto;
  pointer-events:none;
  backdrop-filter: blur(10px) saturate(120%);
  -webkit-backdrop-filter: blur(10px) saturate(120%);
}

/* visible */
.lang-switch.open .lang-panel {
  opacity:1;
  transform: translateY(0) scale(1);
  pointer-events:auto;
}
.lang-switch.open .lang-toggle .lang-chevron { transform: rotate(180deg); }

/* items */
.lang-panel .lang {
  display:flex;
  align-items:center;
  padding:.6rem .8rem;
  border-radius:10px;
  text-decoration:none;
  color:rgba(17,17,17,0.95);
  font-weight:800;
  margin:0;
  outline:none;
}
.lang-panel .lang + .lang { margin-top:.28rem; }
.lang-panel .lang:hover { background: linear-gradient(90deg, rgba(255,255,255,0.88), rgba(245,250,255,0.84)); color:var(--brand); transform: translateY(-1px); }

/* current (non-clickable style) */
.lang-panel [aria-current="true"] {
  background: linear-gradient(90deg, var(--brand), #1e40af);
  color:#fff;
  box-shadow: inset 0 -1px 0 rgba(0,0,0,.06);
}
.lang-panel [aria-current="true"]::after { content:"✓"; margin-left:auto; font-size:.92rem; }

/* accessible focus */
.lang-panel .lang:focus { outline: 3px solid rgba(37,99,235,.12); outline-offset:2px; }

/* scrollbar */
.lang-panel::-webkit-scrollbar { width:10px; }
.lang-panel::-webkit-scrollbar-thumb { background: linear-gradient(180deg, rgba(37,99,235,.12), rgba(37,99,235,.18)); border-radius:10px; border:2px solid transparent; background-clip:padding-box; }

/* MOBILE: sheet-like panel under header — hidden by default until .open */
@media (max-width:520px) {
  .lang-panel {
    position: fixed !important;
    top: 64px;
    left: 10px !important;
    right: 10px !important;
    width: auto !important;
    max-width: calc(100vw - 20px) !important;
    min-width: auto !important;
    border-radius: 12px;
    padding: .45rem;
    max-height: calc(100vh - 96px);
    box-shadow: 0 28px 80px rgba(16,24,40,.22);

    /* hidden by default */
    transform: translateY(-8px) scale(.99);
    opacity: 0;
    pointer-events: none;

    transition: opacity .18s cubic-bezier(.2,.9,.2,1), transform .18s cubic-bezier(.2,.9,.2,1);
  }

  .lang-switch.open .lang-panel {
    transform: translateY(0) scale(1);
    opacity: 1;
    pointer-events: auto;
  }

  .lang-panel .lang { padding: .8rem 1rem; font-size: 1rem; }
}