/* ==========================================
   STREAMPARK LANDING PAGE - VLOGGER SERVICES
   Page-specific styles.
   Shared header / toggle / footer styles are
   reused from landingPage.css for consistency.
   ========================================== */

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700;800&family=Open+Sans:wght@400;600;700&display=swap');

/* ==========================================
   HEADER / TOGGLE / FOOTER - EXACT PARITY LOCK
   These are verbatim copies of the rules in
   landingPage.css. Because this stylesheet is
   loaded last, they win any specificity tie
   against output.css (Tailwind) and guarantee
   the header, toggle, and footer render pixel-
   identical to landingPage.php regardless of
   what utility classes Tailwind applies.
   ========================================== */

/* ── TOP HEADER (white bar w/ search + login) ── */
.top-header {
  background: #ffffff;
  border-bottom: 1px solid #eee;
}

.top-header-inner {
  max-width: 1600px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 14px 40px;
}

.top-header-brand {
  display: flex;
  align-items: center;
  gap: 8px;
  text-decoration: none;
  flex-shrink: 0;
}

.top-header-brand span {
  font-family: 'Poppins', sans-serif;
  font-weight: 700;
  font-size: 1.3rem;
  color: #000000;
}

.top-header-search {
  flex: 1;
  max-width: 760px;
  display: flex;
  align-items: stretch;
}

.top-header-search input {
  flex: 1;
  border: 1px solid #ccc;
  border-right: none;
  border-radius: 4px 0 0 4px;
  padding: 8px 14px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  outline: none;
  color: #000000;
}

.top-header-search button {
  background: #000;
  border: none;
  padding: 0 16px;
  border-radius: 0 4px 4px 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.top-header-search button svg {
  width: 16px;
  height: 16px;
  stroke: #fff;
  fill: none;
  stroke-width: 2.2;
}

.top-header-actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}

.top-header-help {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid #999;
  color: #999;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  text-decoration: none;
}

.top-header-signup,
.top-header-login {
  min-width: 90px;
  text-decoration: none;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 6px 14px;
  border-radius: 6px;
  white-space: nowrap;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.2s ease, box-shadow 0.2s ease;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.top-header-signup {
  background: transparent;
  color: #0F605C !important;
  border: 1.5px solid #0F605C;
}

.top-header-signup:hover {
  background: #E6FAE6;
  color: #0F605C !important;
  border-color: #0F605C;
  transform: translateY(-1px);
}

.top-header-login {
  background: var(--primary, #0F605C);
  color: #ffffff !important;
  border: 1.5px solid #0F605C;
}

.top-header-login:hover {
  background: #0b4a47;
  border-color: #0b4a47;
  color: #ffffff !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(15, 96, 92, 0.25);
}

@media (max-width: 768px) {
  .top-header-inner {
    padding: 10px 20px;
    gap: 12px;
  }

  .top-header-actions {
    gap: 10px;
  }

  .top-header-signup,
  .top-header-login {
    min-width: 80px;
    font-size: 0.82rem;
    padding: 5px 10px;
  }
}

@media (max-width: 520px) {
  .top-header-inner {
    padding: 10px 14px;
    gap: 8px;
    flex-wrap: wrap;
  }

  .top-header-brand span {
    font-size: 1.15rem;
  }

  .top-header-search {
    order: 3;
    width: 100%;
    max-width: 100%;
    margin-top: 4px;
  }

  .top-header-actions {
    gap: 8px;
  }

  .top-header-signup,
  .top-header-login {
    min-width: 72px;
    font-size: 0.78rem;
    padding: 4px 8px;
  }
}

/* ── PARK / VLOGGER TOGGLE (slim, Fiverr-style segmented switch) ── */
.park-tabs {
  background: #ffffff;
  border-bottom: 1px solid #eee;
}

.park-tabs-inner {
  max-width: 1600px;
  margin: 0 auto;
  padding: 2px 40px 0;
}

.toggle-switch {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border-radius: 0;
  padding: 0;
  gap: 24px;
}

.toggle-btn {
  border: none;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: #555;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 4px 2px 4px;
  border-radius: 0;
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.3s ease, border-color 0.3s ease;
}

.toggle-btn.active {
  background-color: transparent !important;
  color: var(--primary, #0F605C) !important;
  border-bottom-color: var(--primary, #0F605C);
  box-shadow: none;
}

.toggle-btn:not(.active):hover {
  color: #000000;
}

/* ── FOOTER ── */
.footer { background: var(--primary, #0F605C); color: #ffffff; padding: 48px 24px 20px; }
.footer-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; max-width: 1100px; margin: 0 auto 32px; }
.footer-col h4 { font-family: 'Poppins', sans-serif; font-size: 0.95rem; font-weight: 600; margin-bottom: 14px; }
.footer-col p, .footer-col a { font-size: 0.85rem; line-height: 1.7; color: rgba(255,255,255,0.85); text-decoration: none; }
.footer-social-link { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; color: rgba(255,255,255,0.85); text-decoration: none; font-size: 0.85rem; transition: color 0.3s ease; }
.footer-social-link:hover { color: #fff; }
.footer-social-icon { width: 30px; height: 30px; background: #3b5998; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.footer-social-icon svg { width: 16px; height: 16px; fill: #fff; }
.footer-divider { border: none; border-top: 1px solid rgba(255,255,255,0.2); max-width: 1100px; margin: 0 auto 20px; }
.footer-copy { text-align: center; font-size: 0.82rem; color: rgba(255,255,255,0.7); }

@media (max-width: 768px) {
  .footer-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── PAGE INTRO ROW (title + Book Now) ── */
.vlogger-intro {
  max-width: 1600px;
  margin: 0 auto;
  padding: 44px 40px 8px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.vlogger-intro h1 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #000000;
  max-width: 640px;
  line-height: 1.35;
}

/* ── BANNER GRID ── */
.vlogger-banners {
  max-width: 1600px;
  margin: 0 auto;
  padding: 20px 40px 0;
  display: grid;
  grid-template-columns: 1.62fr 1fr;
  gap: 16px;
}

.vlogger-banner-main {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  height: 340px;
  background: #2b1a5e;
}

.vlogger-banner-main img,
.vlogger-banner-side img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vlogger-banner-side {
  display: grid;
  grid-template-rows: 1fr 1fr;
  gap: 16px;
  height: 340px;
}

.vlogger-banner-side > div {
  border-radius: 12px;
  overflow: hidden;
}

.vlogger-banner-dots {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 16px;
  display: flex;
  align-items: center;
  gap: 6px;
  z-index: 2;
}

.vlogger-banner-dots span {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.55);
  cursor: pointer;
  transition: background 0.3s ease, transform 0.3s ease;
}

.vlogger-banner-dots span.active {
  background: #ffffff;
  transform: scale(1.15);
}

/* ── SERVICES ICON BOX ── */
.vlogger-services-box {
  max-width: 1600px;
  margin: 40px auto 0;
  padding: 0 40px;
}

.vlogger-services-panel {
  background: #ffffff;
  border: 1px solid #e6e6e6;
  border-radius: 12px;
  padding: 28px 32px 32px;
}

.vlogger-services-panel h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #000000;
  margin-bottom: 26px;
}

.vlogger-services-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 12px 16px;
}

.vlogger-service-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  text-align: center;
  text-decoration: none;
  color: #000000;
  cursor: pointer;
  transition: transform 0.25s ease;
}

.vlogger-service-item:hover { transform: translateY(-2px); }

.vlogger-service-item img {
  width: 34px;
  height: 34px;
  object-fit: contain;
}

.vlogger-service-item span {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #000000;
  line-height: 1.3;
}

/* ── SECTION HEAD (title + subtitle + Show All) ── */
.vlogger-section {
  max-width: 1600px;
  margin: 44px auto 0;
  padding: 0 40px;
}

.vlogger-section-boxed {
  max-width: 1600px;
  margin: 44px auto 0;
  padding: 0 40px;
}

.vlogger-section-boxed-inner {
  background: #F7F7F7;
  border-radius: 12px;
  padding: 32px 40px;
}

.vlogger-section-boxed .vlogger-section-head,
.vlogger-section-boxed .vlogger-card-grid {
  max-width: 1520px;
  margin-left: auto;
  margin-right: auto;
}

.vlogger-section-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

.vlogger-section-head h2 {
  font-family: 'Poppins', sans-serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #000000;
}

.vlogger-section-head p {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  color: #6b6b6b;
  margin-top: 4px;
}

.vlogger-show-all {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.9rem;
  font-weight: 400;
  color: #000000;
  text-decoration: underline;
  white-space: nowrap;
  margin-top: 2px;
}

.vlogger-show-all:hover { text-decoration: underline; }

/* ── CARD GRID ── */
.vlogger-card-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 20px;
}

/* ── GIG CARD ── */
.vlogger-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.vlogger-card-img {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: 8px;
  overflow: hidden;
  background: #eee;
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.vlogger-card:hover .vlogger-card-img {
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
  transform: translateY(-2px);
}

.vlogger-card-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vlogger-card-user {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 12px;
}

.vlogger-card-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  overflow: hidden;
  flex-shrink: 0;
}

.vlogger-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.vlogger-card-user span {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: #000000;
}

.vlogger-card-desc {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.83rem;
  color: #4a4a4a;
  line-height: 1.45;
  margin-top: 6px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  /* Reserve space for exactly 2 lines (0.83rem * 1.45 * 2) so short
     descriptions don't shrink the card and shift the rating/star row up */
  height: calc(0.83rem * 1.45 * 2);
}

.vlogger-card-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 8px;
  font-family: 'Open Sans', sans-serif;
  font-size: 0.85rem;
}

.vlogger-card-rating svg {
  width: 13px;
  height: 13px;
  fill: #000000;
}

.vlogger-card-rating strong {
  font-weight: 700;
  color: #000000;
}

.vlogger-card-rating span {
  color: #6b6b6b;
}

.vlogger-card-category {
  font-family: 'Open Sans', sans-serif;
  font-size: 0.83rem;
  font-weight: 600;
  color: rgba(0, 0, 0, 0.66);
  margin-top: 2px;
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .vlogger-card-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
  .vlogger-banners { grid-template-columns: 1fr; }
  .vlogger-banner-main { height: 260px; }
  .vlogger-banner-side { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; height: 140px; }
  .vlogger-services-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (max-width: 768px) {
  .vlogger-intro,
  .vlogger-banners,
  .vlogger-services-box,
  .vlogger-section,
  .vlogger-section-boxed {
    padding-left: 20px;
    padding-right: 20px;
  }
  .vlogger-section-boxed-inner {
    padding: 22px 20px 26px;
  }
  .vlogger-intro h1 { font-size: 0.95rem; }
  .vlogger-card-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
  .vlogger-banner-main { height: 200px; }
  .vlogger-banner-side { height: 110px; }
  .vlogger-services-panel { padding: 22px 18px 26px; }
  .vlogger-services-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .vlogger-card-grid { grid-template-columns: repeat(2, 1fr); }
}