/* ============================================================
   RAAS RAMZAT – GARBA SELFIE
   Theme: Deep Red, Maroon, Gold, Orange & Festive Cream
   ============================================================ */

:root {
  --garba-red: #a80f1f;
  --garba-red-dark: #720914;
  --garba-red-light: #cf2636;

  --garba-orange: #f28a17;

  --garba-gold: #efbd51;
  --garba-gold-dark: #b57a17;

  --garba-green: #438748;

  --white: #ffffff;

  --dark: #351718;
  --dark-2: #4a2020;

  --bg-light: #fffaf3;
  --bg-cream: #fff2de;
  --garba-cream: #fff7e9;

  --text-gray: #705e5b;

  --border: #ead9c6;

  --shadow: 0 12px 34px rgba(95, 25, 28, 0.12);

  --font-display: "Noto Sans Gujarati", "Mukta", sans-serif;

  --font-body: "Mukta", "Noto Sans Gujarati", sans-serif;

  /*
   * Compatibility aliases.
   * These prevent older gallery/pages from breaking
   * while the whole site moves to the Garba theme.
   */
  --saffron: var(--garba-red);
  --saffron-deep: var(--garba-red-dark);
  --saffron-light: var(--garba-orange);
  --green: var(--garba-gold-dark);
  --green-light: var(--garba-gold);
  --gold: var(--garba-gold);
}

/* ============================================================
   RESET
   ============================================================ */

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  font-family: var(--font-body);
  background:
    radial-gradient(
      circle at 10% 15%,
      rgba(239, 189, 81, 0.08),
      transparent 25%
    ),
    radial-gradient(
      circle at 90% 80%,
      rgba(168, 15, 31, 0.05),
      transparent 25%
    ),
    var(--bg-light);

  color: var(--dark);

  line-height: 1.6;

  font-size: 16px;
}

a {
  color: inherit;
  text-decoration: none;
}

ul {
  list-style: none;
}

img {
  max-width: 100%;
  display: block;
}

button,
input {
  font: inherit;
}

/* ============================================================
   CONTAINER
   ============================================================ */

.container {
  width: 100%;
  max-width: 1200px;

  margin: 0 auto;

  padding: 0 24px;
}

/* ============================================================
   HERO
   ============================================================ */

.hero-banner {
  position: relative;

  overflow: hidden;

  display: flex;

  align-items: center;

  justify-content: center;

  text-align: center;

  background-color: var(--garba-red-dark);
}

/* Desktop */

.hero-banner {
  height: 450px;
}

/* Wide screens */

@media (width > 1440px) {
  .campaign-hero,
  .default-hero,
  .gallery-hero,
  .result-hero {
    background-image: url("../images/1440x350raas.jpeg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
  }
}

/* Laptop */

@media (max-width: 1440px) {
  .hero-banner {
    height: 350px;
  }

  .campaign-hero,
  .default-hero,
  .gallery-hero,
  .result-hero {
    background-image: url("../images/1440x350raas.jpeg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
  }
}

/* Tablet */

@media (max-width: 1024px) {
  .hero-banner {
    height: 300px;
  }

  .campaign-hero,
  .default-hero,
  .gallery-hero,
  .result-hero {
    background-image: url("../images/1024x300raas.jpeg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
  }
}

/* Mobile */

@media (max-width: 768px) {
  .hero-banner {
    height: 250px;
  }

  .campaign-hero,
  .default-hero,
  .gallery-hero,
  .result-hero {
    background-image: url("../images/1730x450raas.jpeg");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
  }
}

/* Small mobile */

@media (max-width: 600px) {
  .campaign-hero,
  .default-hero,
  .gallery-hero,
  .result-hero {
    background-image: url("../images/425x250raas.png");

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;
  }
}

/* ============================================================
   HERO CONTENT
   ============================================================ */

.hero-overlay {
  position: absolute;

  inset: 0;

  background: linear-gradient(
    180deg,
    rgba(74, 4, 12, 0.08),
    rgba(74, 4, 12, 0.16)
  );

  pointer-events: none;
}

.hero-content {
  position: relative;

  z-index: 2;

  max-width: 760px;

  margin: 0 auto;

  padding: 20px 28px;

  border-radius: 18px;

  background: linear-gradient(
    135deg,
    rgba(114, 9, 20, 0.94),
    rgba(168, 15, 31, 0.92)
  );

  border: 1px solid rgba(239, 189, 81, 0.35);

  box-shadow: 0 18px 45px rgba(60, 5, 12, 0.25);

  backdrop-filter: blur(5px);
}

.hero-sub {
  font-family: var(--font-display);

  font-size: 0.92rem;

  font-weight: 700;

  color: var(--garba-gold);

  letter-spacing: 0.14em;

  text-transform: uppercase;

  margin-bottom: 8px;

  text-align: center;
}

.hero-title {
  font-family: var(--font-display);

  font-size: clamp(1.7rem, 3.5vw, 3rem);

  font-weight: 900;

  color: #fff;

  line-height: 1.2;

  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);

  margin-bottom: 8px;

  text-align: center;
}

.hero-slogan {
  font-family: var(--font-display);

  color: #fff5dc;

  font-size: 1.1rem;

  font-weight: 600;

  margin-bottom: 8px;
}

.hero-tag {
  font-size: 1rem;

  color: var(--garba-gold);

  font-weight: 700;

  text-align: center;
}

/* ============================================================
   SECTION HEADERS
   ============================================================ */

.section-header {
  text-align: center;

  margin-bottom: 38px;
}

.garba-kicker {
  display: inline-block;

  margin-bottom: 10px;

  font-size: 0.83rem;

  font-weight: 800;

  color: var(--garba-red);

  letter-spacing: 0.15em;

  text-transform: uppercase;
}

.section-badge {
  display: inline-block;

  background: linear-gradient(135deg, var(--garba-red), var(--garba-red-dark));

  color: #fff;

  padding: 7px 18px;

  border-radius: 50px;

  font-size: 0.8rem;

  font-weight: 700;

  letter-spacing: 0.08em;

  margin-bottom: 14px;
}

.section-title {
  font-family: var(--font-display);

  font-size: clamp(1.8rem, 3vw, 2.65rem);

  font-weight: 900;

  color: var(--dark);

  margin-bottom: 12px;

  line-height: 1.2;
}

.section-desc {
  color: var(--text-gray);

  font-size: 1.05rem;

  max-width: 600px;

  margin: 0 auto;
}

/* ============================================================
   FORM SECTION
   ============================================================ */

.form-section {
  position: relative;

  padding: 55px 0 75px;

  background:
    radial-gradient(
      circle at 20% 10%,
      rgba(239, 189, 81, 0.1),
      transparent 28%
    ),
    radial-gradient(
      circle at 85% 90%,
      rgba(168, 15, 31, 0.06),
      transparent 30%
    ),
    var(--bg-light);
}

.form-card {
  position: relative;

  overflow: hidden;

  max-width: 680px;

  margin: 0 auto;

  background: #fff;

  border-radius: 22px;

  padding: 44px;

  border: 1px solid rgba(181, 122, 23, 0.15);

  box-shadow: 0 24px 65px rgba(76, 24, 22, 0.12);
}

.form-card::before {
  content: "";

  position: absolute;

  top: 0;

  left: 0;

  right: 0;

  height: 6px;

  background: linear-gradient(
    90deg,
    var(--garba-red-dark),
    var(--garba-red),
    var(--garba-gold),
    var(--garba-orange),
    var(--garba-red)
  );
}

@media (max-width: 600px) {
  .form-card {
    padding: 30px 20px;
  }
}

/* ============================================================
   FORM
   ============================================================ */

.form-row {
  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 20px;

  margin-bottom: 28px;
}

@media (max-width: 560px) {
  .form-row {
    grid-template-columns: 1fr;
  }
}

.form-group {
  display: flex;

  flex-direction: column;

  gap: 7px;
}

.form-group label,
.photo-label {
  font-weight: 800;

  font-size: 0.87rem;

  color: var(--dark);

  text-transform: uppercase;

  letter-spacing: 0.045em;
}

.req {
  color: var(--garba-red);
}

.form-group input {
  width: 100%;

  border: 2px solid var(--border);

  border-radius: 11px;

  padding: 13px 15px;

  font-size: 1rem;

  font-family: var(--font-body);

  color: var(--dark);

  background: #fff;

  transition:
    border-color 0.2s,
    box-shadow 0.2s;

  outline: none;
}

.form-group input:hover {
  border-color: #dac0a4;
}

.form-group input:focus {
  border-color: var(--garba-red);

  box-shadow: 0 0 0 3px rgba(168, 15, 31, 0.09);
}

/* ============================================================
   PHOTO SECTION
   ============================================================ */

.photo-section {
  margin-bottom: 32px;
}

.photo-label {
  display: block;

  margin-bottom: 12px;
}

.photo-tabs {
  display: flex;

  gap: 7px;

  margin-bottom: 20px;

  background: var(--garba-cream);

  border: 1px solid rgba(181, 122, 23, 0.1);

  border-radius: 13px;

  padding: 5px;
}

.tab-btn {
  flex: 1;

  padding: 11px 15px;

  border: none;

  border-radius: 10px;

  font-size: 0.9rem;

  font-weight: 800;

  cursor: pointer;

  background: transparent;

  color: var(--text-gray);

  transition:
    background 0.2s,
    color 0.2s,
    box-shadow 0.2s,
    transform 0.2s;

  font-family: var(--font-body);
}

.tab-btn:hover {
  color: var(--garba-red);
}

.tab-btn.active {
  color: #fff;

  background: linear-gradient(135deg, var(--garba-red), var(--garba-red-dark));

  box-shadow: 0 5px 14px rgba(130, 13, 25, 0.2);
}

.photo-tab-content {
  display: none;
}

.photo-tab-content.active {
  display: block;
}

/* ============================================================
   UPLOAD PREVIEW
   ============================================================ */

.upload-preview-box,
.camera-area {
  margin-top: 18px;
}

.photo-preview-container {
  position: relative;

  text-align: center;
}

#cameraStream,
#capturedImg,
#uploadPreviewImg,
.photo-preview-container img {
  width: 100%;

  max-height: 360px;

  object-fit: cover;

  border-radius: 16px;

  display: block;

  background: #f7ead8;

  border: 2px solid #ecd5b6;
}

.remove-photo {
  margin-top: 12px;

  background: #fff0f0;

  color: #a80f1f;

  border: 1px solid rgba(168, 15, 31, 0.15);

  border-radius: 9px;

  padding: 9px 16px;

  font-size: 0.85rem;

  font-weight: 700;

  cursor: pointer;

  transition:
    background 0.2s,
    color 0.2s;
}

.remove-photo:hover {
  background: var(--garba-red);

  color: #fff;
}

/* ============================================================
   CAMERA
   ============================================================ */

.camera-area {
  text-align: center;
}

#cameraStream {
  display: none;

  margin-bottom: 14px;

  background: #160b0b;
}

.live-camera-wrap {
  margin-top: 14px;
}

.camera-controls {
  display: flex;

  gap: 10px;

  justify-content: center;

  flex-wrap: wrap;

  margin-top: 14px;
}

.btn-camera,
.btn-capture,
.btn-stop {
  border: none;

  border-radius: 50px;

  padding: 11px 21px;

  font-family: var(--font-body);

  font-weight: 800;

  cursor: pointer;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  gap: 7px;

  transition:
    transform 0.2s,
    box-shadow 0.2s;
}

.btn-camera,
.btn-capture {
  background: linear-gradient(135deg, var(--garba-gold), var(--garba-orange));

  color: #4a1d0c;

  box-shadow: 0 5px 15px rgba(223, 145, 25, 0.22);
}

.btn-stop {
  background: var(--garba-red);

  color: #fff;
}

.btn-camera:hover,
.btn-capture:hover,
.btn-stop:hover {
  transform: translateY(-2px);
}

/* ============================================================
   SUBMIT
   ============================================================ */

.btn-submit {
  width: 100%;

  background: linear-gradient(135deg, var(--garba-red), var(--garba-red-dark));

  color: #fff;

  border: none;

  padding: 18px 30px;

  border-radius: 14px;

  font-size: 1.08rem;

  font-weight: 800;

  font-family: var(--font-body);

  cursor: pointer;

  display: flex;

  align-items: center;

  justify-content: center;

  gap: 12px;

  transition:
    transform 0.2s,
    box-shadow 0.2s;

  box-shadow: 0 8px 24px rgba(129, 14, 25, 0.27);

  letter-spacing: 0.01em;
}

.btn-submit:hover {
  transform: translateY(-2px);

  box-shadow: 0 12px 32px rgba(129, 14, 25, 0.34);
}

.btn-submit:disabled {
  opacity: 0.7;

  cursor: not-allowed;

  transform: none;
}

.btn-icon {
  font-size: 1.25rem;
}

.btn-arrow {
  font-size: 1.3rem;
}

/* ============================================================
   ALERTS
   ============================================================ */

.alert {
  padding: 14px 18px;

  border-radius: 10px;

  margin-bottom: 20px;

  font-size: 0.9rem;
}

.alert-error {
  background: #fff0f0;

  border: 1px solid #efb7bb;

  color: #9c1723;
}

.alert-error ul {
  padding-left: 16px;
}

/* ============================================================
   RECENT GARBA MOMENTS
   ============================================================ */

.recent-section {
  padding: 65px 0;

  background: linear-gradient(180deg, #fff, #fff8ec);
}

.recent-header {
  margin-bottom: 30px;
}

.recent-grid {
  display: grid;

  grid-template-columns: repeat(4, minmax(0, 1fr));

  gap: 20px;
}

.recent-card {
  overflow: hidden;

  background: #fff;

  border-radius: 16px;

  border: 1px solid rgba(181, 122, 23, 0.16);

  box-shadow: 0 10px 28px rgba(65, 18, 19, 0.08);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.recent-card:hover {
  transform: translateY(-5px);

  box-shadow: 0 18px 35px rgba(65, 18, 19, 0.13);
}

.recent-card img {
  width: 100%;

  aspect-ratio: 4 / 5;

  object-fit: cover;
}

.recent-card p {
  padding: 12px;

  color: var(--dark);

  font-weight: 800;

  text-align: center;
}

@media (max-width: 900px) {
  .recent-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (max-width: 650px) {
  .recent-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============================================================
   PAGINATION
   ============================================================ */

.pagination-wrap {
  display: flex;

  justify-content: center;

  margin-top: 35px;
}

.custom-pagination {
  display: flex;

  align-items: center;

  justify-content: center;

  gap: 9px;

  flex-wrap: wrap;
}

.page-btn,
.page-number {
  min-width: 42px;

  height: 42px;

  padding: 0 14px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 10px;

  text-decoration: none;

  font-weight: 800;

  font-size: 15px;

  border: 1px solid #ead5bd;

  background: #fff;

  color: var(--dark);

  transition:
    background 0.2s,
    color 0.2s,
    border-color 0.2s,
    transform 0.2s;
}

.page-btn:hover,
.page-number:hover {
  background: var(--garba-red);

  color: #fff;

  border-color: var(--garba-red);

  transform: translateY(-1px);
}

.page-number.active {
  background: var(--garba-red);

  color: #fff;

  border-color: var(--garba-red);
}

.page-btn.disabled {
  opacity: 0.45;

  pointer-events: none;

  background: #f6f2ed;

  color: #999;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 768px) {
  .container {
    padding: 0 18px;
  }

  .form-section {
    padding: 40px 0 55px;
  }

  .section-header {
    margin-bottom: 28px;
  }

  .custom-pagination {
    gap: 6px;
  }

  .page-btn,
  .page-number {
    min-width: 36px;

    height: 36px;

    font-size: 14px;

    padding: 0 10px;
  }
}

@media (max-width: 480px) {
  .container {
    padding: 0 14px;
  }

  .photo-tabs {
    flex-direction: column;
  }

  .recent-grid {
    gap: 12px;
  }

  .recent-card {
    border-radius: 12px;
  }

  .btn-submit {
    padding: 16px 18px;

    font-size: 1rem;
  }
}