/*
 * Modern UI for Instagram Video Downloader - Monochrome Theme
 */

:root {
  --black: #000000;
  --dark-grey: #333333;
  --grey: #666666;
  --light-grey: #999999;
  --lighter-grey: #CCCCCC;
  --lightest-grey: #F5F5F5;
  --white: #FFFFFF;
  --text: var(--black);
  --muted: var(--grey);
  --bg: var(--white);
  --light: var(--lightest-grey);
  --radius: 18px;
  --shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: 'Poppins', system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  color: var(--text);
  background: var(--bg);
  line-height: 1.6;
}

/* Global helpers */
.section { padding: 80px 0; }
.section-light { background: linear-gradient(180deg, var(--white) 0%, var(--white) 10%, var(--lightest-grey) 60%, var(--white) 100%); }
.section-title { font-weight: 700; }
.section-subtitle { color: var(--muted); }

/* Navigation */
.nav-glass {
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.navbar-dark .navbar-brand,
.navbar-dark .nav-link { color: var(--white); }
.navbar-dark .nav-link:hover { opacity: 0.85; }
.brand-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--dark-grey), var(--grey), var(--black));
  color: var(--white);
}

/* Hero */
.gradient-ig {
  background: linear-gradient(135deg, var(--dark-grey), var(--grey), var(--black), var(--grey), var(--dark-grey), var(--light-grey));
}
.hero {
  padding-top: 130px;
  padding-bottom: 80px;
  position: relative;
}
.hero .badge-ig {
  display: inline-block;
  background: rgba(255, 255, 255, 0.2);
  color: var(--white);
  border-radius: 999px;
  padding: 8px 14px;
  font-weight: 600;
}
.hero-subtitle { opacity: 0.95; }

.download-card {
  border-radius: var(--radius);
  padding: 18px;
  border: 1px solid var(--lighter-grey);
  box-shadow: var(--shadow);
  max-width: 880px;
}
.input-group .form-control {
  border-radius: 12px 0 0 12px;
  border: 0;
  background: var(--lightest-grey);
  padding-left: 46px;
  height: 58px;
}
.input-group .form-control:focus {
  box-shadow: none;
  border: 0;
  background: var(--lighter-grey);
}
.input-group .btn-ig {
  border-radius: 0 12px 12px 0;
  padding: 0 22px;
  height: 58px;
}
.input-icon {
  position: absolute;
  z-index: 4;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--grey);
}
.helper-text {
  color: var(--grey);
  font-size: 0.9rem;
  margin-top: 8px;
}

.hero-bullets .dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--white);
  margin-right: 6px;
}
.hero-bullets li {
  color: var(--white);
  opacity: 0.95;
}

/* Buttons */
.btn-ig {
  background: linear-gradient(135deg, var(--black), var(--dark-grey), var(--grey));
  color: var(--white);
  border: 0;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  font-weight: 600;
}
.btn-ig:hover {
  filter: brightness(0.95);
  color: var(--white);
}

/* Cards and icons */
.i-shadow { box-shadow: 0 10px 20px rgba(0, 0, 0, 0.25); }
.step-card {
  border: 1px solid var(--lighter-grey);
  border-radius: 16px;
  padding: 22px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.04);
}
.step-icon {
  width: 64px;
  height: 64px;
  border-radius: 16px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 4px auto;
}
.step-index {
  position: absolute;
  margin-top: -12px;
  margin-left: -12px;
  background: var(--dark-grey);
  color: var(--white);
  border-radius: 999px;
  font-size: 12px;
  padding: 6px 8px;
}

.feature-item { padding: 12px; }
.feature-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  color: var(--white);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.25);
}

.stats-card {
  border: 1px solid var(--lighter-grey);
  border-radius: 18px;
  padding: 20px 10px;
  background: var(--white);
}
.stat-value {
  font-weight: 700;
  font-size: 28px;
}
.stat-label {
  color: var(--muted);
  font-size: 0.9rem;
}

/* Why us */
.list-why {
  padding-left: 0;
  list-style: none;
}
.list-why li {
  padding: 8px 0;
  color: var(--dark-grey);
}
.trust-card {
  display: flex;
  align-items: center;
  border: 1px solid var(--lighter-grey);
  border-radius: 16px;
  padding: 16px;
  background: var(--white);
  box-shadow: var(--shadow);
}
.trust-icon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  margin-right: 14px;
}

/* FAQ */
.faq-card {
  border: 1px solid var(--lighter-grey);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 10px;
}
.faq-card .card-header { background: var(--white); }
.faq-card .btn-link {
  color: var(--text);
  text-decoration: none;
  font-weight: 600;
}
.faq-card .btn-link:hover { text-decoration: none; }

/* Footer */
.dark-footer {
  background: var(--black);
  color: var(--lighter-grey);
  padding-top: 48px;
}
.footer-title {
  color: var(--white);
  font-weight: 600;
  margin-bottom: 8px;
}
.footer-links a { color: var(--light-grey); }
.footer-links a:hover { color: var(--white); }
.security-box {
  display: flex;
  align-items: center;
  background: rgba(0, 0, 0, 0.6);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 12px;
}
.security-icon {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  background: var(--dark-grey);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 10px;
}
.footer-meta { border-top: 1px solid rgba(255, 255, 255, 0.08); }

/* Legacy classes retained to avoid breaking JS/backend */
.bg-pink { background-color: var(--black) !important; }
.bg-blue { background-color: var(--dark-grey) !important; }
.text-pink { color: var(--black); }
.btn-blue {
  color: var(--white);
  background-color: var(--dark-grey);
  border-color: var(--dark-grey);
}
.btn-blue:hover {
  color: var(--white);
  background-color: var(--dark-grey);
  border-color: var(--dark-grey);
}
.btn-pink {
  color: var(--white);
  background-color: var(--black);
  border-color: var(--black);
}
.btn-pink:hover {
  color: var(--white);
  background-color: var(--dark-grey);
  border-color: var(--black);
}
.footer-white-links a { color: var(--white); }
.footer-white-links a:hover { color: rgba(248, 249, 250, 0.705); }

/* Main card */
.download-card {
  background: var(--lightest-grey) !important;
  padding: 30px 25px;
  border-radius: 16px;
  max-width: 880px;
  width: 100%;
  text-align: center;
  transition: all 0.3s ease-in-out;
}

.download-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}

/* Input field */
.download-input .form-control {
  border-radius: 10px 0 0 10px;
  border: 1px solid var(--lighter-grey);
  padding: 14px 18px;
  font-size: 16px;
  outline: none;
  transition: border-color 0.2s;
}

.download-input .form-control:focus {
  border-color: var(--dark-grey);
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}

/* Button */
.btn-blue {
  background: var(--dark-grey);
  color: var(--white);
  border-radius: 0 10px 10px 0;
  border: none;
  padding: 0 20px;
  transition: background 0.3s ease;
}

.btn-blue:hover {
  background: var(--black);
}

/* Download box */
#downloadbox {
  margin-top: 20px;
  padding: 15px;
  border: 1px dashed var(--lighter-grey);
  border-radius: 10px;
  display: none; /* hidden until results appear */
  font-size: 15px;
  text-align: left;
}

/* Helper text */
.helper-text {
  margin-top: 18px;
  font-size: 14px;
  color: var(--grey);
  font-style: italic;
}

/* Responsive tweaks */
@media (max-width: 991.98px) {
  .hero { padding-top: 110px; }
}
@media (max-width: 575.98px) {
  .display-4 { font-size: 2rem; }
  .input-group .form-control { height: 52px; }
  .input-group .btn-ig { height: 52px; }
}