/* Vasudheva Projects — Design System (Minimal)
   Utility classes ONLY. All design tokens live in style.css.
   This file loads BEFORE style.css so style.css variables are authoritative.
   Conflicting/duplicated declarations removed — style.css is authoritative.
*/

/* Glass system — delegated to style.css */
/* Gold accents — delegated to style.css */
/* Buttons — delegated to style.css */
/* Section heading — delegated to style.css */
/* Grid — delegated to style.css */
/* Overlay — delegated to style.css */

/* Contact form — unique to this file */
.vp-contact-form {
  width: 100%;
  max-width: 100%;
  border-radius: var(--vp-radius-lg, 24px);
  border: 1px solid var(--vp-glass-border, rgba(255, 255, 255, 0.12));
  background: var(--vp-glass-bg, rgba(10, 14, 20, 0.55));
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-sizing: border-box;
}
.vp-contact-form input,
.vp-contact-form textarea,
.vp-contact-form select {
  width: 100%;
  padding: 0.875rem 1rem;
  border-radius: var(--vp-radius-sm, 8px);
  border: 1px solid var(--vp-glass-border, rgba(255, 255, 255, 0.12));
  background: rgba(255, 255, 255, 0.03);
  color: var(--vp-text-primary, #E7E3DA);
  font-family: var(--vp-font-body, 'Inter', system-ui, sans-serif);
  font-size: 0.9375rem;
  transition: 250ms ease;
}
.vp-contact-form input:focus,
.vp-contact-form textarea:focus,
.vp-contact-form select:focus {
  outline: none;
  border-color: var(--vp-glass-border-gold, rgba(201, 166, 107, 0.35));
  background: rgba(255, 255, 255, 0.04);
}

/* Gallery select button (admin meta box) */
.vp-gallery-select {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

/* Icon base */
.vp-icon {
  width: 1.5rem;
  height: 1.5rem;
  flex-shrink: 0;
}

/* Category selector scrollbar */
.vp-cat-selector::-webkit-scrollbar { height: 0; }
.vp-cat-selector {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

/* Reveal animations — buttery cinematic easing, GPU-friendly */
.vp-reveal {
  opacity: 0;
  transform: translate3d(0, 1.5rem, 0);
  transition: opacity 700ms var(--vp-ease-cinematic, cubic-bezier(0.22, 1, 0.36, 1)), transform 950ms var(--vp-ease-cinematic, cubic-bezier(0.22, 1, 0.36, 1));
  will-change: opacity, transform;
}
.vp-reveal.vp-revealed,
.vp-reveal.is-visible {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  will-change: auto;
}

/* Social links */
.vp-social-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  border: 1px solid var(--vp-border, rgba(255, 255, 255, 0.12));
  background: transparent;
  color: var(--vp-text-secondary, #A9A7A1);
  transition: all 0.3s ease;
}
.vp-social-link:hover {
  border-color: var(--vp-color-gold, #C9A66B);
  color: var(--vp-color-gold, #C9A66B);
  background: rgba(201, 166, 107, 0.08);
}

/* Header social links — compact, gold hover glow */
.vp-social-link--header {
  width: 2.125rem;
  height: 2.125rem;
  border-color: rgba(255, 255, 255, 0.10);
  color: var(--vp-text-secondary, #A9A7A1);
  background: rgba(255, 255, 255, 0.03);
  transition: all 420ms var(--vp-ease-cinematic, cubic-bezier(0.22, 1, 0.36, 1));
}
.vp-social-link--header:hover {
  color: #08090D;
  border-color: var(--vp-color-gold, #C9A66B);
  background: linear-gradient(135deg, #f3d089 0%, #e6ad5e 52%, #cf8f43 100%);
  box-shadow: 0 0 22px rgba(201, 166, 107, 0.45);
  transform: translateY(-2px);
}

/* SVG icon base */
.vp-svg-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1em;
  height: 1em;
}
.vp-svg-icon svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Widget areas (Elementor preview) */
.vp-widget-area {
  min-height: 100px;
  border: 1px dashed rgba(201, 166, 107, 0.2);
  border-radius: 12px;
  padding: 1rem;
}
.vp-widget-title {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--vp-color-gold, #C9A66B);
  margin-bottom: 0.75rem;
}

/* Contact info block */
.vp-contact-info {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--vp-text-secondary, #A9A7A1);
  line-height: 1.7;
}

/* Project card (shortcode fallback) */
.vp-project-card {
  border-radius: 16px;
  overflow: hidden;
  border: 1px solid var(--vp-border, rgba(255, 255, 255, 0.12));
  background: var(--vp-surface-card, #11141B);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vp-project-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 48px -12px rgba(0, 0, 0, 0.4);
}
.vp-project-image {
  width: 100%;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
.vp-project-status {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.25rem 0.75rem;
  border-radius: 9999px;
  background: rgba(201, 166, 107, 0.12);
  color: var(--vp-color-gold, #C9A66B);
}

/* Day/night toggle (shortcode fallback) */
.vp-daynight-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  border: 1px solid var(--vp-border, rgba(255, 255, 255, 0.12));
  background: rgba(10, 14, 20, 0.55);
  backdrop-filter: blur(12px);
  color: var(--vp-text-primary, #E7E3DA);
  cursor: pointer;
  transition: all 0.3s ease;
}
.vp-daynight-btn:hover {
  border-color: var(--vp-color-gold, #C9A66B);
}
.vp-icon-sun,
.vp-icon-moon {
  display: inline-flex;
  width: 1.125rem;
  height: 1.125rem;
}

/* ENQUIRE NOW button */
.vp-enquire-btn {
  font-family: 'Cinzel', Georgia, serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  background: linear-gradient(135deg, #f3d089 0%, #e6ad5e 52%, #cf8f43 100%);
  color: #08090D;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42);
  border: none;
  border-radius: 9999px;
  padding: 0.375rem 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
}
.vp-enquire-btn:hover {
  filter: brightness(110%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.42), 0 0 24px rgba(201, 166, 107, 0.4);
}

/* Nav list (header fallback) */
.vp-nav-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.vp-nav-item {
  list-style: none;
}
.vp-nav-link {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-radius: 9999px;
  padding: 0.375rem 0.875rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: #FFFFFF;
  transition: color 0.3s ease;
  position: relative;
}
.vp-nav-link:hover {
  color: var(--vp-color-gold, #C9A66B);
}
.vp-nav-link.vp-nav-active {
  color: var(--vp-color-gold, #C9A66B);
  text-shadow: 0 0 16px rgba(201, 166, 107, 0.4);
}
.vp-nav-link .vp-nav-indicator {
  position: absolute;
  bottom: -2px;
  left: 50%;
  transform: translateX(-50%);
  height: 2px;
  width: 1.25rem;
  border-radius: 9999px;
  background: var(--vp-color-gold, #C9A66B);
  transition: opacity 0.3s ease;
}
.vp-nav-link.vp-nav-active .vp-nav-indicator {
  opacity: 1;
  box-shadow: 0 0 10px rgba(201, 166, 107, 0.6);
}
.vp-nav-link:not(.vp-nav-active) .vp-nav-indicator {
  opacity: 0;
}

/* Contact form — reference look: dark card, grid glow top, orb icon */
.vp-form-shell {
  position: relative;
  overflow: hidden;
  border-radius: 28px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(180deg, #101319 0%, #0a0d13 100%);
  box-shadow: 0 30px 80px -30px rgba(0, 0, 0, 0.8);
  padding: 1.5rem 1.25rem 1.25rem;
}
.vp-form-gridbg {
  position: absolute;
  inset: 0 0 auto 0;
  height: 170px;
  pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
  -webkit-mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
  mask-image: linear-gradient(to bottom, black 0%, transparent 100%);
}
.vp-form-head {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  margin-bottom: 1.25rem;
}
.vp-form-orb {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 1rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.10), rgba(255, 255, 255, 0.02));
  color: #fff;
  box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.04), 0 0 34px rgba(255, 255, 255, 0.28), 0 12px 30px -10px rgba(0, 0, 0, 0.7);
}
.vp-form-title {
  margin: 0.9rem 0 0;
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
}
.vp-form-subtitle {
  margin: 0 0 1.25rem;
  font-size: 1rem;
  line-height: 1.6;
  text-align: left;
  color: var(--vp-color-gold, #C9A66B);
}
.vp-form-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}
@media (min-width: 640px) {
  .vp-form-row { grid-template-columns: 1fr 1fr; gap: 1.25rem; }
}
.vp-contact-form .vp-field { margin-bottom: 1rem; }
.vp-contact-form .vp-field > label {
  display: block;
  margin-bottom: 0.6rem;
  font-size: 1rem;
  color: #fff;
}
.vp-contact-form .vp-field input,
.vp-contact-form .vp-field select,
.vp-contact-form .vp-field textarea {
  width: 100%;
  box-sizing: border-box;
  padding: 0.8rem 1rem;
  border-radius: 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: rgba(255, 255, 255, 0.05);
  color: #fff;
  font-size: 1rem;
}
.vp-contact-form .vp-field input::placeholder,
.vp-contact-form .vp-field textarea::placeholder { color: rgba(255, 255, 255, 0.38); }
.vp-contact-form .vp-field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 3rem;
  cursor: pointer;
}
.vp-contact-form .vp-field select:invalid { color: rgba(255, 255, 255, 0.38); }
.vp-contact-form .vp-field select option { background: #14181f; color: #fff; }
.vp-select-wrap { position: relative; display: block; }
.vp-select-wrap::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 0.6rem;
  height: 0.6rem;
  border-right: 2px solid rgba(255, 255, 255, 0.55);
  border-bottom: 2px solid rgba(255, 255, 255, 0.55);
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.vp-contact-form button[type="submit"] {
  width: 100%;
  margin-top: 0.5rem;
}
@media (min-width: 640px) {
  .vp-form-shell { padding: 2rem 2rem 1.75rem; }
  .vp-form-title { font-size: 1.6rem; }
}

/* Contact submit — gold pill */
.vp-contact-form button[type="submit"] {
  position: relative;
  overflow: hidden;
  padding: 0.85rem 2rem;
  border: 0;
  border-radius: 9999px;
  background: linear-gradient(135deg, #f3d089 0%, #e6ad5e 52%, #cf8f43 100%);
  color: #08090D;
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow: 0 14px 34px -12px rgba(201, 166, 107, 0.55);
  transition: transform 300ms ease, filter 300ms ease, box-shadow 300ms ease;
}
.vp-contact-form button[type="submit"]:hover {
  transform: translateY(-1px);
  filter: brightness(1.06);
  box-shadow: 0 18px 44px -12px rgba(201, 166, 107, 0.65);
}
.vp-contact-form button[type="submit"]:disabled { cursor: default; }

/* Professional form detailing */
.vp-contact-form .vp-field > label {
  font-size: 0.8125rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: rgba(255, 255, 255, 0.68);
}
.vp-contact-form .vp-field > label .req { color: var(--vp-color-gold, #C9A66B); }
.vp-contact-form .vp-field input,
.vp-contact-form .vp-field select,
.vp-contact-form .vp-field textarea {
  min-height: 2.9rem;
  transition: border-color 250ms ease, background-color 250ms ease, box-shadow 250ms ease;
}
.vp-contact-form .vp-field textarea { min-height: 0; }
.vp-contact-form .vp-field input:hover,
.vp-contact-form .vp-field select:hover,
.vp-contact-form .vp-field textarea:hover { border-color: rgba(255, 255, 255, 0.2); }
.vp-contact-form .vp-field input:focus-visible,
.vp-contact-form .vp-field select:focus-visible,
.vp-contact-form .vp-field textarea:focus-visible {
  outline: none;
  border-color: var(--vp-glass-border-gold, rgba(201, 166, 107, 0.55));
  box-shadow: 0 0 0 3px rgba(201, 166, 107, 0.18);
  background: rgba(255, 255, 255, 0.06);
}
.vp-contact-form .vp-field input:user-invalid,
.vp-contact-form .vp-field select:user-invalid,
.vp-contact-form .vp-field textarea:user-invalid { border-color: rgba(220, 120, 120, 0.55); }
.vp-contact-form .vp-submit-row {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  margin-top: 0.5rem;
}
.vp-contact-form .vp-submit-row button[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 0;
}
.vp-contact-form .vp-submit-row button[type="submit"] svg { transition: transform 300ms ease; }
.vp-contact-form .vp-submit-row button[type="submit"]:hover svg { transform: translateX(4px); }
.vp-contact-form .vp-response-note {
  margin: 0;
  text-align: center;
  font-size: 0.82rem;
  color: rgba(255, 255, 255, 0.45);
}
.vp-contact-form .vp-success-note {
  margin: 1rem 0 0;
  padding: 0.9rem 1.1rem;
  border-radius: 0.8rem;
  border: 1px solid rgba(201, 166, 107, 0.35);
  background: rgba(201, 166, 107, 0.08);
  color: #E7E3DA;
  font-size: 0.9rem;
  text-align: center;
}