/* Shared visual baseline for public-facing templates (landing/gallery/invitation). */

.ui-public-premium {
  --ui-public-radius-sm: 10px;
  --ui-public-radius-md: 14px;
  --ui-public-radius-lg: 18px;
  --ui-public-border: rgba(165, 199, 227, 0.56);
  --ui-public-shadow-sm: 0 10px 24px rgba(56, 111, 161, 0.12);
  --ui-public-shadow-md: 0 18px 36px rgba(56, 111, 161, 0.18);
  --ui-public-focus: 0 0 0 0.18rem rgba(51, 185, 232, 0.32);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

.ui-public-premium a {
  transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.ui-public-premium img {
  max-width: 100%;
  height: auto;
}

.ui-public-premium .section {
  padding-top: clamp(2.8rem, 7vw, 4.8rem);
  padding-bottom: clamp(2.8rem, 7vw, 4.8rem);
}

.ui-public-premium .btn,
.ui-public-premium button,
.ui-public-premium [type='submit'] {
  border-radius: var(--ui-public-radius-sm);
  font-weight: 600;
  letter-spacing: 0.01em;
  transition: transform 0.18s ease, box-shadow 0.2s ease, background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ui-public-premium .btn:hover,
.ui-public-premium button:hover,
.ui-public-premium [type='submit']:hover {
  transform: translateY(-1px);
}

.ui-public-premium .btn-sm {
  border-radius: 9px;
  font-weight: 600;
}

.ui-public-premium .btn:focus-visible,
.ui-public-premium button:focus-visible,
.ui-public-premium .form-control:focus,
.ui-public-premium .form-select:focus {
  box-shadow: var(--ui-public-focus) !important;
}

.ui-public-premium .btn-primary {
  border: none;
  background-image: linear-gradient(135deg, #2a9be5, #167bc6);
  box-shadow: 0 8px 20px rgba(50, 128, 187, 0.26);
}

.ui-public-premium .btn-primary:hover {
  background-image: linear-gradient(135deg, #228fdd, #126db4);
  box-shadow: 0 10px 24px rgba(50, 128, 187, 0.32);
}

.ui-public-premium .btn-outline-primary {
  color: #1268a8;
  border-color: #9bc8e8;
  background: rgba(255, 255, 255, 0.7);
}

.ui-public-premium .btn-outline-primary:hover {
  color: #0f5f9f;
  border-color: #84bcdf;
  background: rgba(236, 246, 255, 0.95);
  box-shadow: 0 8px 18px rgba(56, 111, 161, 0.14);
}

.ui-public-premium .card,
.ui-public-premium .invite-hero,
.ui-public-premium .invite-rsvp-card,
.ui-public-premium .video-wrap,
.ui-public-premium .gallery-item,
.ui-public-premium .price-image,
.ui-public-premium [class*='gallery-item-'],
.ui-public-premium [class*='feature-card'],
.ui-public-premium [class*='contact-form'] {
  border-radius: var(--ui-public-radius-md);
}

.ui-public-premium .card,
.ui-public-premium .invite-rsvp-card,
.ui-public-premium .contact-form,
.ui-public-premium .video-wrap {
  border: 1px solid var(--ui-public-border);
  box-shadow: var(--ui-public-shadow-sm);
  background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(237, 247, 255, 0.62));
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform 0.22s ease, box-shadow 0.22s ease, border-color 0.22s ease;
}

.ui-public-premium .card:hover,
.ui-public-premium .invite-rsvp-card:hover,
.ui-public-premium .contact-form:hover,
.ui-public-premium .video-wrap:hover {
  transform: translateY(-2px);
  box-shadow: var(--ui-public-shadow-md);
  border-color: rgba(139, 184, 217, 0.66);
}

.ui-public-premium .invite-hero,
.ui-public-premium [class*='hero-content'],
.ui-public-premium [class*='banner-overlay'] {
  border-radius: var(--ui-public-radius-lg);
}

.ui-public-premium .invite-title {
  letter-spacing: 0.04em;
}

.ui-public-premium .invite-meta-item,
.ui-public-premium .invite-hero-badge {
  font-weight: 500;
}

.ui-public-premium.ui-invite-wedding .invite-rsvp-card {
  border-color: rgba(190, 24, 93, 0.24);
}

.ui-public-premium.ui-invite-birthday .invite-rsvp-card {
  border-color: rgba(37, 99, 235, 0.24);
}

.ui-public-premium.ui-invite-corporate .invite-rsvp-card {
  border-color: rgba(16, 185, 129, 0.24);
}

.ui-public-premium .form-control,
.ui-public-premium .form-select,
.ui-public-premium textarea {
  border-radius: 10px;
  border-color: rgba(150, 191, 223, 0.75);
  font-weight: 500;
  background: rgba(255, 255, 255, 0.84);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.ui-public-premium .form-control:hover,
.ui-public-premium .form-select:hover,
.ui-public-premium textarea:hover {
  border-color: rgba(129, 178, 213, 0.86);
  background: rgba(255, 255, 255, 0.93);
}

.ui-public-premium .form-control:focus,
.ui-public-premium .form-select:focus,
.ui-public-premium textarea:focus {
  border-color: rgba(111, 170, 211, 0.96);
  background: #fff;
}

.ui-public-premium .form-control::placeholder,
.ui-public-premium textarea::placeholder {
  color: rgba(71, 85, 105, 0.9);
}

.ui-public-premium .navbar,
.ui-public-premium .showcase-header,
.ui-public-premium .studio-navbar,
.ui-public-premium .boto-header,
.ui-public-premium .pf-header {
  backdrop-filter: blur(10px) saturate(130%);
  -webkit-backdrop-filter: blur(10px) saturate(130%);
}

.ui-public-premium .ui-main-content {
  padding-top: 1.8rem;
  padding-bottom: 2rem;
}

/* Utility replacements for inline styles in public templates */
.ui-public-form-limit-480 {
  max-width: 480px;
}

.ui-public-btn-accent {
  background: var(--color-accent, #1c86d3);
  color: #fff;
  border: none;
}

.ui-public-btn-accent:hover {
  color: #fff;
  filter: brightness(0.95);
}

.ui-public-btn-warm {
  background: var(--color-warm, #8b7355);
  color: #fff;
  border: none;
}

.ui-public-btn-warm:hover {
  color: #fff;
  filter: brightness(0.94);
}

.ui-public-min-vh-100 {
  min-height: 100vh;
}

.ui-public-bg-white {
  background: #fff;
}

.ui-public-aspect-square {
  aspect-ratio: 1;
}

.ui-public-heading-font {
  font-family: var(--font-heading);
}

.ui-public-showcase-logo-fallback {
  background: rgba(255, 255, 255, 0.9);
  color: #114669;
  font-size: 0.875rem;
}

.ui-public-studio-logo-fallback {
  background: rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #114669;
  font-weight: 600;
}

.ui-public-hidden {
  display: none;
}

.ui-public-studio-main-placeholder {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #d9edff 0%, #c4e2fb 100%);
}

@media (max-width: 768px) {
  .ui-public-premium .section {
    padding-top: clamp(2.2rem, 6vw, 3.2rem);
    padding-bottom: clamp(2.2rem, 6vw, 3.2rem);
  }
}