/* =====================================================================
   TABLE OF CONTENTS
   1. Variables & Base
   2. Scroll Reveal Animations
   3. Utilities
   4. Navbar
   5. Badges
   6. Buttons
   7. Section Backgrounds
   8. Hero
   9. Experience Cards
   10. Owl Carousel
   11. Workshop Cards
   12. Explore By Interest
   13. Curator of the Week
   14. People Testimonials
   15. Footer
   16. Misc (Breadcrumb, Modal, Table)
   17. Host / Curator Cards
   18. Activity Details & Gallery
   19. Login / Register Layout
   20. Register Form Elements
   21. Responsive Breakpoints
===================================================================== */

/* =====================================================================
   1. Variables & Base
===================================================================== */
:root {
  --bg:              #fff9f1;
  --text:            #131313;
  --muted:           #5d6470;
  --brand:           #3e065f;
  --brand-dark:      #25053c;
  --accent:          #fece00;
  --surface:         #ffffff;
  --surface-soft:    #fffaf2;
  --border:          #eceff5;
  --transition-base: 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  --transition-slow: 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Inter Tight', 'Segoe UI', sans-serif;
  color: var(--text);
  background: linear-gradient(180deg, var(--bg) 0%, #fff3de 100%);
  line-height: 1.5;
}

h1, .h1, h2, .h2, h3, .h3,
h4, .h4, h5, .h5, h6, .h6 { font-family: 'Besley', serif; }

a {
  color: inherit;
  text-decoration: none;
  transition: color var(--transition-base);
}
a:hover { color: var(--brand); }

button, input, select, textarea { font: inherit; }
img { max-width: 100%; height: auto; }

/* =====================================================================
   2. Scroll Reveal Animations
===================================================================== */
[data-reveal] {
  opacity: 0;
  transform: translateY(32px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
[data-reveal].revealed { opacity: 1; transform: translateY(0); }
[data-reveal="left"]           { transform: translateX(-40px); }
[data-reveal="left"].revealed  { transform: translateX(0); }
[data-reveal="right"]          { transform: translateX(40px); }
[data-reveal="right"].revealed { transform: translateX(0); }
[data-reveal="scale"]          { transform: scale(0.92); opacity: 0; }
[data-reveal="scale"].revealed { transform: scale(1); opacity: 1; }

[data-delay="1"] { transition-delay: 0.1s; }
[data-delay="2"] { transition-delay: 0.2s; }
[data-delay="3"] { transition-delay: 0.3s; }
[data-delay="4"] { transition-delay: 0.4s; }
[data-delay="5"] { transition-delay: 0.5s; }

/* =====================================================================
   3. Utilities
===================================================================== */
.fs-36 { font-size: 36px; }
.fs-20 { font-size: 20px; }
.fs-18 { font-size: 18px; }
.fs-16 { font-size: 16px; }
.fs-14 { font-size: 14px; }
.text-purple { color: #3D065F; }
.inter_tight { font-family: 'Inter Tight', 'Segoe UI', sans-serif; }
.p-32 { padding: 32px; }

.table > :not(caption) > * > * { background-color: transparent; }
.table-text-last tr td:nth-child(2) { text-align: end; }

/* =====================================================================
   4. Navbar
===================================================================== */
nav .nav-link {
  padding-right: 24px !important;
  padding-left: 24px !important;
  color: #fff;
  font-weight: 600;
  position: relative;
  transition: color var(--transition-base);
}

nav .nav-link::after {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 24px;
  right: 24px;
  height: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: center;
  transition: transform var(--transition-base);
}

nav .nav-link:hover::after,
nav .nav-link.active::after { transform: scaleX(1); }

.navbar {
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

.navbar.navbar-scrolled {
  background-color: #ffffff !important;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.navbar.navbar-scrolled .nav-link,
.navbar.navbar-dark-page .nav-link { color: var(--text) !important; }

.navbar.navbar-scrolled .btn-scroll-voilet,
.navbar.navbar-dark-page.navbar-scrolled .dropdown .dropdown-toggle {
  background-color: var(--brand);
  color: #fff;
}

.navbar-scrolled a.navbar-brand { max-width: 80px; }

.navbar.navbar-dark-page .navbar-toggler { border-color: rgba(0, 0, 0, 0.3); }

.navbar.navbar-dark-page .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0,0,0,0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.navbar.navbar-dark-page .dropdown .dropdown-toggle { background-color: #EFD9CE; }

/* =====================================================================
   5. Badges
===================================================================== */
.badge {
  padding: 8px;
  font-size: 12px;
  text-transform: uppercase;
  transition: transform var(--transition-base);
}
.badge:hover { transform: scale(1.05); }
.red_badge   { background: rgba(255, 166, 128, 0.5); color: #661800; }
.green_badge { background: rgba(186, 242, 74,  0.5); color: #013330; }
.blue_badge  { background: rgba(137, 176, 255, 0.5); color: #190066; }

/* =====================================================================
   6. Buttons
===================================================================== */
.btn-voilet, .btn-login, .host-card-btn {
  position: relative;
  overflow: hidden;
  z-index: 0;
}

.btn-voilet::before, .btn-login::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.12);
  transform: translateX(-100%) skewX(-12deg);
  transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn-voilet:hover::before,
.btn-login:hover::before { transform: translateX(0) skewX(-12deg); }

.btn-voilet {
  background-color: var(--brand);
  color: #ffffff;
  font-size: 14px;
  padding: 15px 24px;
  font-weight: bold;
  border: 2px solid transparent;
  transition: background-color var(--transition-base), transform var(--transition-base),
              box-shadow var(--transition-base), border-color var(--transition-base);
}

.btn-voilet:hover {
  background-color: var(--brand-dark);
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(62, 6, 95, 0.35);
  border-color: rgba(255, 255, 255, 0.15);
}

.btn-voilet:active {
  transform: translateY(0);
  box-shadow: 0 4px 10px rgba(62, 6, 95, 0.2);
}

.btn-voilet-outline {
  background-color: transparent;
  color: var(--brand);
  border: 2px solid var(--brand);
  font-size: 14px;
  padding: 13px 24px;
  font-weight: bold;
  position: relative;
  overflow: hidden;
  z-index: 0;
  transition: color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-voilet-outline::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--brand);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: -1;
}

.btn-voilet-outline:hover {
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(62, 6, 95, 0.25);
}

.btn-voilet-outline:hover::before { transform: scaleX(1); }

.btn-login {
  background: #4b0b67;
  color: #fff;
  height: 50px;
  border-radius: 10px;
  font-weight: 600;
  border: 2px solid transparent;
  transition: background var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}

.btn-login:hover {
  background: #3e0855;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(62, 6, 95, 0.35);
}

.btn-login:active {
  transform: translateY(0);
  box-shadow: 0 3px 8px rgba(62, 6, 95, 0.2);
}

/* =====================================================================
   7. Section Backgrounds
===================================================================== */
.light-gradient-bg     { background: url(/images/light-gradient-bg.svg) center bottom / cover; }
.light-gradient-bg-two { background: url(/images/gradient-bg.svg) bottom center; background-repeat: no-repeat; background-color: #fff; }
.bg-gradient-yellow    { background: linear-gradient(180deg, #fff 0%, #fff6e3 100%); }
.bg-yellow             { background: #FFF6E3; }

/* =====================================================================
   8. Hero
===================================================================== */
.home_hero { background-size: cover; background-position: center; }

.hero_h1 {
  font-size: 56px;
  color: #ffffff;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -2px;
}

.hero_h1 span { font-style: italic; color: var(--accent); }
.hero_search  { max-width: 80%; }

.hero_search i {
  right: 23px;
  font-size: 25px;
  top: calc(50% - 20px);
}

/* =====================================================================
   9. Experience Cards
===================================================================== */
.article_info ul li:nth-child(2) { margin-top: 5px; }

.experience { transition: transform var(--transition-base); }
.experience:hover { transform: translateY(-4px); }

.experience a img { aspect-ratio: 43/30; object-fit: cover; width: 100%; display: block; transition: transform 0.5s ease; overflow: hidden; }
.experience a:hover img { transform: scale(1.03); }

/* =====================================================================
   10. Owl Carousel — Global
===================================================================== */
.owl-carousel .item { padding: 8px; }

.owl-nav {
  position: absolute;
  top: calc(50% - 24px);
  right: -30px;
  left: -30px;
}

.owl-carousel .owl-nav button.owl-next,
.owl-carousel .owl-nav button.owl-prev {
  width: 35px; height: 35px;
  border-radius: 50%;
  background: #FF5C16;
  font-size: 24px;
  color: #fff;
  transition: background var(--transition-base), transform var(--transition-base);
}

.owl-carousel .owl-nav button.owl-next:hover,
.owl-carousel .owl-nav button.owl-prev:hover { background: #d94a0e; transform: scale(1.1); }

.owl-carousel .owl-nav button.owl-next { right: 0; left: auto; position: absolute; }

.owl-dots { text-align: center; }

.owl-dots .owl-dot {
  width: 8px; height: 8px;
  background: darkgrey !important;
  border-radius: 4px;
  margin: 3px;
  transition: background var(--transition-base), width var(--transition-base);
}

.owl-dots .owl-dot.active { background: #410A61 !important; width: 20px; }

.owl-theme .owl-dots .owl-dot span        { width: 10px; height: 10px; background: #ccc; }
.owl-theme .owl-dots .owl-dot.active span { background: #000; }

/* =====================================================================
   11. Workshop Cards
===================================================================== */
.workshop-card {
  position: relative;
  border-radius: 18px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  aspect-ratio: 2 / 3;
}

.workshop-card:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.16); }

.workshop-card img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform 0.5s ease;
}

.workshop-card:hover img   { transform: scale(1.05); }
.workshop-card:hover::after { opacity: 0.85; }

.workshop-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.45) 35%, rgba(0,0,0,0) 65%);
  transition: opacity var(--transition-base);
}

.card-content {
  position: absolute;
  bottom: 18px; left: 20px; right: 20px;
  color: #fff;
  z-index: 2;
  text-align: center;
  transition: transform var(--transition-base);
}

.workshop-card:hover .card-content { transform: translateY(-4px); }
.workshop-card .card-content h3    { font-size: 24px; line-height: 1.2; font-weight: 700; margin-bottom: 6px; }
.workshop-card .card-content p     { font-size: 16px; color: #f2f2f2; font-weight: 400; }

/* =====================================================================
   12. Explore By Interest
===================================================================== */
.explore-interest .bg-img {
  background-position: center;
  background-size: cover;
  height: 120px;
  overflow: hidden;
  position: relative;
  transition: transform var(--transition-base);
}

.explore-interest .bg-img:hover { transform: scale(1.02); }

.explore-interest a {
  line-height: 120px;
  font-weight: 600;
  font-size: 16px;
  text-shadow: 0 1px 4px rgba(0,0,0,0.5);
  transition: letter-spacing var(--transition-base);
  display: block;
}

.explore-interest .bg-img:hover a { letter-spacing: 0.5px; }

/* =====================================================================
   13. Curator of the Week
===================================================================== */
.cw-testimonial { background: #FFF6E3; }

.cw-testimonial .cw-box {
  position: relative;
  overflow: hidden;
  border-radius: 40px;
  background: #FDFBF1 url("images/testimonial-bg.jpg") right bottom no-repeat;
  background-size: cover;
  min-height: 520px;
}

.cw-testimonial .cw-left {
  max-width: 650px;
  padding: 85px 70px;
  position: relative;
  z-index: 2;
}

.cw-testimonial .cw-tag {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: #5B2A00;
}

.cw-testimonial .cw-tag span { color: #FF6618; font-size: 18px; line-height: 1; }

.cw-testimonial h2 {
  margin: 0 0 12px;
  font-size: 40px;
  line-height: 1.1;
  font-weight: 700;
  color: #3A116B;
}

.cw-testimonial .meta { margin-bottom: 20px; font-size: 17px; color: #767676; }
.cw-testimonial .desc { font-size: 20px; line-height: 1.5; color: #1E1E1E; }

.cw-testimonial .owl-carousel { position: relative; }

.cw-testimonial .owl-nav {
  display: flex;
  align-items: center;
  margin-top: 25px;
  position: relative;
  left: 0; top: auto; right: auto;
}

.cw-testimonial .owl-prev,
.cw-testimonial .owl-next {
  width: 48px !important; height: 48px !important;
  border: none !important; outline: none !important;
  border-radius: 50% !important;
  background: #FF6618 !important;
  color: #fff !important;
  font-size: 24px !important;
  transition: background var(--transition-base), transform var(--transition-base) !important;
  margin-right: 12px;
  position: relative !important;
}

.cw-testimonial .owl-prev:hover,
.cw-testimonial .owl-next:hover { background: #E75409 !important; transform: scale(1.1); }

.cw-testimonial .creator-wrapper {
  position: absolute;
  right: 0; bottom: 0;
  width: 46%; height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.cw-testimonial .creator-wrapper::before {
  content: "";
  position: absolute;
  width: 430px; height: 430px;
  background: #FFD329;
  border-radius: 50%;
  filter: blur(40px);
  bottom: -40px;
  z-index: 1;
}

.cw-testimonial .creator { position: relative; z-index: 2; max-height: 560px; width: auto; }

/* =====================================================================
   14. People Testimonials
===================================================================== */
.people_testimonials {
  background: url(/images/bg-gradient.svg) bottom center;
}

.people_testimonials h2 { font-size: 36px; font-style: italic; }
.testimonial-aurthor    { margin-top: 24px; }
.testimonial-aurthor img { margin-bottom: 24px; }

/* =====================================================================
   15. Footer
===================================================================== */
.footer {
  background: url('/images/footer-bg.svg') bottom center / cover;
  padding-top: 5rem;
}

.footer ul li a {
  color: #EAC3FF;
  font-size: 1rem;
  display: block;
  margin-bottom: 24px;
  transition: color var(--transition-base), padding-left var(--transition-base);
}

.footer ul li a:hover { color: #ffffff; padding-left: 6px; }

.copyrightcontent { margin-top: 5rem; }

.copyrightcontent ul li a {
  margin-bottom: 0;
  width: 50px; height: 50px;
  text-align: center;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 8px;
  line-height: 48px;
  display: block;
  transition: background var(--transition-base), transform var(--transition-base);
}

.copyrightcontent ul li a:hover { background: rgba(0,0,0,0.8); transform: translateY(-3px); }

/* =====================================================================
   16. Misc — Breadcrumb, Modal, Helpers
===================================================================== */
.breadchrumb { position: relative; }
.breadchrumb ul li::after      { content: "\F285"; font-family: bootstrap-icons; }
.breadchrumb ul li:last-child::after { display: none; }

.modal-body {
  background: url(/images/bg-gradient.svg) center / cover;
}

@media screen and (min-width: 992px) {
  .h-lg-100-vh { height: 100vh; }
}

/* =====================================================================
   17. Host / Curator Cards
===================================================================== */
.host-card {
  margin: auto;
  border-radius: 28px;
  overflow: hidden;
  position: relative;
  background: #fff url("images/curator-bg-gradient.svg") center/cover no-repeat;
  box-shadow: 0 12px 30px rgba(0,0,0,.08);
  transition: transform var(--transition-base), box-shadow var(--transition-base);
}

.host-card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(0,0,0,.14); }

.host-card-banner { height: 120px; overflow: hidden; }

.host-card-banner img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.5s ease;
}

.host-card:hover .host-card-banner img { transform: scale(1.06); }

.host-card-body { position: relative; padding: 65px 30px 35px; }

.host-card-avatar {
  width: 110px; height: 110px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid #fff;
  position: absolute;
  left: 50%; top: -55px;
  transform: translateX(-50%);
  box-shadow: 0 8px 20px rgba(0,0,0,.15);
  background: #fff;
  transition: box-shadow var(--transition-base);
}

.host-card:hover .host-card-avatar { box-shadow: 0 12px 28px rgba(0,0,0,.22); }
.host-card-avatar img { width: 100%; height: 100%; object-fit: cover; }

.host-card-name  { font-size: 20px; font-weight: 700; color: #2e2b2b; line-height: 1.2; }
.host-card-role  { color: #5d5d5d; font-size: 14px; font-weight: 500; }
.host-card-count { font-size: 14px; color: #444; font-weight: bold; }

.host-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 50px;
  padding: 12px 24px;
  font-weight: 600;
  color: #4c2476;
  transition: background var(--transition-base), color var(--transition-base),
              border-color var(--transition-base), transform var(--transition-base);
}

.host-card-btn:hover {
  background: #4c2476;
  color: #fff;
  border-color: #4c2476;
  transform: translateY(-2px);
}

.curator_stats li { position: relative; padding-right: 15px; }
.curator_stats li::after { content: "|"; position: absolute; right: 0; color: lightgrey; }
.curator_stats li:last-child::after { display: none; }

/* =====================================================================
   18. Activity Details & Gallery
===================================================================== */
.activity-details-hero .nav-item .nav-link {
  color: rgb(48, 48, 48);
  padding: 16px;
  transition: color var(--transition-base), border-bottom-color var(--transition-base);
}

.activity-details-hero .nav-item .nav-link.active,
.activity-details-hero .nav-item .nav-link:hover { color: #000; border-bottom-color: var(--brand); }

/* Desktop grid gallery */
.activity-gallery-desktop {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  height: 490px;
}

.activity-gallery-desktop a {
  display: block;
  overflow: hidden;
  position: relative;
  height: 100%;
}

.activity-gallery-desktop a:first-child { border-radius: 12px 0 0 12px; }
.activity-gallery-desktop a:last-child  { border-radius: 0 12px 12px 0; }

.activity-gallery-desktop img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transition: transform 0.4s ease, filter 0.4s ease;
}

.activity-gallery-desktop a:hover img { transform: scale(1.06); filter: brightness(0.8); }

.gallery-last { position: relative; }

.gallery-more-label {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 18px;
  pointer-events: none;
  transition: background 0.3s ease;
}

.gallery-last:hover .gallery-more-label { background: rgba(0,0,0,0.6); }

/* Mobile carousel gallery */
.activity-gallery-mobile .item img { height: 260px; object-fit: cover; }

.activity-gallery-mobile .owl-nav {
  position: absolute;
  top: calc(50% - 20px);
  left: 0; right: 0;
}

.activity-gallery-mobile .owl-prev { left: 8px; position: absolute; }
.activity-gallery-mobile .owl-next { right: 8px; position: absolute; left: auto; }

/* =====================================================================
   19. Login / Register Layout
===================================================================== */
.login-wrapper {
  padding: 16px;
  height: 100vh;
  overflow: hidden;
}

.register-row { height: 100%; }

/* Left panel — fixed height, never scrolls */
.left-panel {
  position: sticky;
  top: 16px;
  height: calc(100vh - 32px);
  border-radius: 0px;
  overflow: hidden;
  display: flex;
  background: url("images/login-bg.svg") center center / cover no-repeat;
}

.left-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.75), rgba(0,0,0,0.15), rgba(0,0,0,0.05));
}

.left-content {
  position: relative;
  z-index: 2;
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 24px;
  color: #fff;
}

.logo { width: 120px; }

.bottom-content h2 { font-size: 2rem; font-weight: 700; line-height: 1.15; margin-bottom: 30px; }
.feature           { gap: 12px; align-items: flex-start; }
.feature i         { font-size: 22px; }
.feature p         { margin: 6px 0 0; font-size: 14px; line-height: 1.3; }

.divider { height: 1px; background: rgba(255,255,255,0.5); margin: 28px 0 20px; }

.how-link { color: #fff; font-weight: 600; transition: letter-spacing var(--transition-base); }
.how-link:hover { letter-spacing: 0.5px; }

/* Right panel — scrollable content area */
.curator_register .col-lg-8 {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.right-panel {
  display: flex;
  /* justify-content: center; */
  align-items: center;
  flex-direction: column;
  flex: 1;
  padding: 48px 40px 24px;
  text-align: left;
  overflow-y: auto;
  min-height: 0; /* required for flex scroll */
}

/* Sticky footer bar */
.form-footer {
  flex-shrink: 0;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #e5e5e5;
  background: #ffffff;
  padding: 12px 40px;
  z-index: 10;
  box-shadow: 0 -4px 16px rgba(0, 0, 0, 0.05);
}

/* Login box (login.php) */
.login-box            { width: 100%; max-width: 400px; }
.login-box h1         { font-size: 40px; font-weight: 700; margin-bottom: 24px; }
.form-label           { font-weight: 600; }

.forgot { text-decoration: none; color: #4b0b67; font-weight: 600; transition: color var(--transition-base); }
.forgot:hover { color: #3e0855; }

.close-btn {
  position: absolute;
  top: 20px; right: 20px;
  width: 42px; height: 42px;
  border-radius: 50%;
  border: none;
  background: #e8dfd3;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 22px;
  cursor: pointer;
  z-index: 100;
  transition: background var(--transition-base), transform var(--transition-base);
}

.close-btn:hover { background: #d4c4b0; transform: rotate(90deg); }

/* =====================================================================
   20. Register Form Elements
===================================================================== */
.form-control {
  height: 45px;
  border-radius: 10px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.form-control:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(62, 6, 95, 0.1);
}

.register-box { max-width: 700px; width: 100%; margin: auto; }

.otp-wrapper { max-width: 450px; width: 100%; margin: auto; text-align: center; }
.otp-wrapper p { color: #666; margin-bottom: 24px; }
.otp-wrapper a { color: #4D0A72; font-weight: 600; }

.otp-inputs { display: flex; gap: 15px; justify-content: center; margin-bottom: 0; }

.otp-inputs input {
  width: 65px; height: 55px;
  text-align: center;
  font-size: 24px;
  border: 1px solid #ddd;
  border-radius: 8px;
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.otp-inputs input:focus {
  border-color: var(--brand);
  box-shadow: 0 0 0 3px rgba(62, 6, 95, 0.1);
  outline: none;
}

.upload-box {
  height: 220px;
  border: 2px dashed #ddd;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background: #fcfaf7;
  cursor: pointer;
  transition: border-color var(--transition-base), background var(--transition-base);
}

.upload-box:hover { border-color: var(--brand); background: #f5eefc; }
.upload-box i { font-size: 42px; color: #5d137b; transition: transform var(--transition-base); }
.upload-box:hover i { transform: translateY(-4px); }

/* =====================================================================
   21. Responsive Breakpoints
===================================================================== */

/* ── ≤1199px ── */
@media (max-width: 1199px) {
  .hero_h1              { font-size: 48px; }
  .cw-testimonial h2    { font-size: 36px; }
  .cw-testimonial .meta { font-size: 16px; }
  .cw-testimonial .desc { font-size: 18px; }
}

/* ── ≤991px (tablet landscape) ── */
@media (max-width: 991px) {
  /* Hero */
  .hero_h1     { font-size: 40px; letter-spacing: -1px; }
  .hero_search { max-width: 100%; }

  /* Typography */
  .fs-36 { font-size: 28px; }
  .fs-20 { font-size: 17px; }

  /* Carousel */
  .owl-nav { right: -15px; left: -15px; }

  /* Curator of week */
  .cw-testimonial .cw-box  { min-height: auto; border-radius: 28px; }
  .cw-testimonial .cw-left { max-width: 100%; padding: 50px 35px; }
  .cw-testimonial h2       { font-size: 32px; }
  .cw-testimonial .meta    { font-size: 15px; margin-bottom: 16px; }
  .cw-testimonial .desc    { font-size: 16px; line-height: 1.7; }
  .cw-testimonial .creator-wrapper { position: relative; width: 100%; height: auto; margin-top: 20px; }
  .cw-testimonial .creator-wrapper::before { width: 300px; height: 300px; }
  .cw-testimonial .creator { max-height: 420px; }

  /* Workshop cards */
  .workshop-card .card-content h3 { font-size: 20px; }

  /* Footer */
  .footer           { padding-top: 3rem; }
  .copyrightcontent { margin-top: 3rem; }

  /* Register / Login — hide left panel, allow right to scroll freely */
  .login-wrapper {
    height: auto;
    overflow: visible;
    padding: 0;
  }

  .register-row { height: auto; min-height: 100vh; }

  .left-panel { 
    height: 40vh;  
  }

  .bottom-content h2{
    text-align: center;
  }

  .bottom-content .row.text-white, .bottom-content .divider{
    display: none;
  }

  .bottom-content .how-link{
    display: block;
    text-align: center;
  }

  .curator_register .col-lg-8 {
    height: auto;
    overflow: visible;
    min-height: none;
    display: flex;
    flex-direction: column;
  }

  .right-panel {
    flex: 1;
    overflow-y: visible;
    padding: 32px 24px 80px; /* bottom padding to clear fixed footer */
    align-items: center;
    min-height: 0;
  }

  .form-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 12px 24px;
    border-top: 1px solid #e5e5e5;
    background: #ffffff;
    z-index: 100;
  }
}

/* ── ≤768px (tablet portrait) ── */
@media (max-width: 768px) {
  .hero_h1 { font-size: 34px; letter-spacing: -0.5px; }

  .explore-interest .bg-img { height: 100px; }
  .explore-interest a       { line-height: 100px; font-size: 15px; }

  .people_testimonials h2 { font-size: 26px; }

  .footer .col-lg-4 { margin-top: 2rem; }
  .footer .d-flex   { gap: 2rem; }

  /* Gallery */
  .activity-gallery-desktop {
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 160px 160px;
    height: auto;
  }

  .activity-gallery-desktop a:first-child { grid-column: 1 / 3; border-radius: 12px 12px 0 0; }
  .activity-gallery-desktop a:last-child  { border-radius: 0 0 12px 0; }

  /* OTP inputs smaller */
  .otp-inputs input { width: 54px; height: 50px; font-size: 20px; }

  /* Register form full width */
  .register-box { max-width: 100%; }
  .otp-wrapper  { max-width: 100%; }
}

/* ── ≤576px (mobile) ── */
@media (max-width: 576px) {
  /* Navbar */
  nav .nav-link { padding-right: 12px !important; padding-left: 12px !important; }

  /* Hero */
  .home_hero   { background-position: 70% center; text-align: center; }
  .hero_h1     { font-size: 32px; letter-spacing: 0; }
  .hero_search { max-width: 100%; }
  .hero_search i { font-size: 20px; top: calc(50% - 16px); }

  .container-fluid.px-5 { padding-left: 1rem !important; padding-right: 1rem !important; }

  .fs-36 { font-size: 24px; }
  .fs-20 { font-size: 16px; }

  /* Carousel */
  .owl-nav { display: none; }

  /* Curator of week */
  .cw-testimonial .cw-box {
    border-radius: 20px;
    padding-top: 265px;
    background-image: url(/images/mobile-testimonial-bg.jpg);
    background-size: contain;
    background-position: top;
  }
  .cw-testimonial .cw-left { padding: 32px 20px; }
  .cw-testimonial h2       { font-size: 26px; }
  .cw-testimonial .desc    { font-size: 15px; }
  .cw-testimonial .owl-nav { display: flex; }
  .cw-testimonial .owl-prev,
  .cw-testimonial .owl-next { width: 40px !important; height: 40px !important; font-size: 20px !important; }

  /* Workshop cards */
  .workshop-card .card-content h3 { font-size: 18px; }
  .workshop-card .card-content p  { font-size: 14px; }

  /* Explore */
  .explore-interest .bg-img { height: 90px; }
  .explore-interest a       { line-height: 90px; font-size: 14px; }

  /* Testimonials */
  .people_testimonials h2 { font-size: 22px; }

  /* Footer */
  .footer { padding-top: 2rem; background-image: url(/images/mobile-footer.svg); }
  .footer .col-lg-6,
  .footer .col-lg-4 { text-align: center; }
  .footer .d-flex   { justify-content: center !important; gap: 2rem; }
  .copyrightcontent { margin-top: 2rem; }

  /* Register */
  .right-panel  { padding: 24px 16px 80px; }
  .form-footer  { padding: 12px 16px; }
  .otp-inputs   { gap: 10px; }
  .otp-inputs input { width: 48px; height: 48px; font-size: 18px; }
}

/* ── ≤400px (small mobile) ── */
@media (max-width: 400px) {
  .hero_h1    { font-size: 28px; }
  .btn-voilet { padding: 12px 18px; font-size: 13px; }
  .cw-testimonial h2 { font-size: 22px; }
  .otp-inputs input  { width: 42px; height: 44px; font-size: 16px; }
}

/* =====================================================================
   22. Accessibility — Reduced Motion
===================================================================== */
@media (prefers-reduced-motion: reduce) {
  /* Disable scroll reveal animations */
  [data-reveal] {
    opacity: 1;
    transform: none;
    transition: none;
  }

  /* Disable button shimmer effect */
  .btn-voilet::before,
  .btn-login::before {
    display: none;
  }

  /* Preserve other functionality but reduce motion intensity */
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}


/* ============================================
   Superadmin Panel Styles
   ============================================ */
:root {
  --sidebar-width: 260px;
}

.superadmin-sidebar {
  position: fixed;
  top: 0;
  left: 0;
  width: var(--sidebar-width);
  height: 100vh;
  background: #fff;
  border-right: 1px solid #eee;
  flex-direction: column;
  z-index: 1000;
  overflow-y: auto;
}

.superadmin-main {
  margin-left: var(--sidebar-width);
  min-height: 100vh;
  background: #f8f9fa;
}

@media (max-width: 767.98px) {
  .superadmin-main {
    margin-left: 0;
  }
}

.superadmin-topbar {
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.sidebar-link {
  color: #555;
  transition: all 0.15s ease;
}

.sidebar-link:hover {
  background: #f8f9fa;
  color: var(--brand);
}

.sidebar-link--active {
  border-left: 4px solid var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, white);
  color: var(--brand);
  font-weight: 600;
}

.stat-card {
  border-top: 3px solid var(--brand);
}

.stat-card .stat-count {
  color: var(--brand);
  font-weight: 700;
}

.superadmin-hamburger {
  z-index: 1100;
  background: white;
  border: 1px solid #ddd;
}

/* =====================================================================
   22. City Selector Modal
===================================================================== */

/* Overlay backdrop — deep purple tint matching brand */
.city-selector-modal .modal-backdrop,
.city-selector-modal + .modal-backdrop {
    background-color: rgba(32, 2, 50, 0.82);
}

.city-modal-content {
    border: none;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 32px 80px rgba(32, 2, 50, 0.28);
}

.city-modal-body {
    padding: 40px 40px 32px;
    background: var(--bg);
}

/* Close button */
.city-modal-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: none;
    background: rgba(0, 0, 0, 0.06);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    z-index: 10;
    transition: background var(--transition-base), transform var(--transition-base);
}
.city-modal-close:hover {
    background: rgba(0, 0, 0, 0.14);
    transform: rotate(90deg);
}

/* Title */
.city-modal-title {
    font-family: 'Besley', serif;
    font-size: 26px;
    font-weight: 700;
    color: var(--brand);
    margin-bottom: 6px;
}
.city-modal-subtitle {
    font-size: 14px;
}

/* Search input */
.city-modal-search .position-relative { max-width: 420px; margin: 0 auto; }

.city-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--muted);
    font-size: 15px;
    pointer-events: none;
}

.city-search-input {
    padding-left: 38px;
    border-radius: 50px !important;
    border: 1.5px solid var(--border);
    height: 44px;
    font-size: 14px;
    background: #fff;
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}
.city-search-input:focus {
    border-color: var(--brand);
    box-shadow: 0 0 0 3px rgba(62, 6, 95, 0.1);
    outline: none;
}

/* Section label */
.city-section-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--muted);
    margin-bottom: 12px;
}

/* City chips grid */
.city-chips-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* Individual city chip */
.city-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    border-radius: 50px;
    border: 1.5px solid #e0d4eb;
    background: #fff;
    color: var(--text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background var(--transition-base), border-color var(--transition-base),
                color var(--transition-base), transform var(--transition-base),
                box-shadow var(--transition-base);
    white-space: nowrap;
}

.city-chip:hover,
.city-chip:focus {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(62, 6, 95, 0.22);
    outline: none;
}

.city-chip-icon {
    font-size: 12px;
    opacity: 0.7;
}
.city-chip:hover .city-chip-icon,
.city-chip:focus .city-chip-icon {
    opacity: 1;
}

/* View All button */
.city-view-all-btn {
    font-size: 13px;
    font-weight: 600;
    color: var(--brand);
    text-decoration: none;
    transition: color var(--transition-base);
}
.city-view-all-btn:hover { color: var(--brand-dark); text-decoration: underline; }

/* Skip link */
.city-skip-btn {
    font-size: 13px;
    color: var(--muted) !important;
    text-decoration: none;
    transition: color var(--transition-base);
}
.city-skip-btn:hover { color: var(--text) !important; text-decoration: underline; }

/* Navbar location picker button */
.location-picker-btn {
    font-size: 14px;
    white-space: nowrap;
}

/* ── Responsive ── */
@media (max-width: 575px) {
    .city-modal-body { padding: 28px 20px 24px; }
    .city-modal-title { font-size: 22px; }
    .city-chip { font-size: 13px; padding: 8px 14px; }
}

.form-select { min-width: 100px !important; }

/* ── Password visibility toggle ────────────────────────────────────────── */
.pw-wrapper {
  position: relative;
  display: block;
}
.pw-wrapper input[type="password"],
.pw-wrapper input[type="text"] {
  padding-right: 2.75rem;
}
.pw-toggle-btn {
  position: absolute;
  top: 50%;
  right: 0.75rem;
  transform: translateY(-50%);
  background: none;
  border: none;
  padding: 0;
  line-height: 1;
  color: #6c757d;
  cursor: pointer;
  z-index: 5;
}
.pw-toggle-btn:hover { color: #343a40; }

/* =====================================================================
   Pagination — matches site brand style
===================================================================== */
.pagination {
  gap: 6px;
  justify-content: flex-end;
  flex-wrap: wrap;
  margin-bottom: 0;
}

.page-item .page-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50% !important;
  border: 1.5px solid #e0d4ef;
  color: var(--brand);
  font-weight: 600;
  font-size: 0.9rem;
  background: #fff;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.2s;
  padding: 0;
  line-height: 1;
}

.page-item .page-link:hover {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  transform: translateY(-2px);
}

.page-item.active .page-link {
  background: var(--brand);
  color: #fff;
  border-color: var(--brand);
  box-shadow: 0 4px 12px rgba(76, 36, 118, 0.35);
}

.page-item.disabled .page-link {
  background: #f4f4f4;
  color: #bbb;
  border-color: #e8e8e8;
  cursor: not-allowed;
}

/* Prev / Next arrow items — slightly wider */
.page-item:first-child .page-link,
.page-item:last-child .page-link {
  width: 40px;
  height: 40px;
  font-size: 1rem;
}

/* Results summary text */
.pagination-summary {
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 12px;
}

/* =====================================================================
   Trending Badges — overlaid on activity card images
===================================================================== */
.trend-badge {
  position: absolute;
  top: 12px;
  left: 12px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 20px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  z-index: 2;
  pointer-events: none;
}

.trend-badge--trending {
  background: rgba(255, 255, 255, 0.88);
  color: #c0392b;
  border: 1px solid rgba(192, 57, 43, 0.25);
}

.trend-badge--loved {
  background: rgba(255, 255, 255, 0.88);
  color: #b7860b;
  border: 1px solid rgba(183, 134, 11, 0.25);
}

.trend-badge--filling {
  background: rgba(255, 255, 255, 0.88);
  color: #7d3c98;
  border: 1px solid rgba(125, 60, 152, 0.25);
}