/* ==========================================================================
   YLIPS In-Bio (Public Profile) Styles
   Based on Figma Template Design
   ========================================================================== */

/* ============================================
   CSS VARIABLES - DESIGN TOKENS
   ============================================ */
:root {
  /* Primary Colors */
  --color-primary: #2F6BFF;
  --color-primary-dark: #1A4FD9;
  --color-primary-light: #5A8CFF;

  /* Accent Colors */
  --color-purple: #7c3aed;
  --color-purple-border: #d9c4ff;
  --color-yellow: #fbbf24;
  --color-amber: #92400e;

  /* Neutral Colors */
  --color-text-primary: #1f2933;
  --color-text-secondary: #6b7280;
  --color-text-tertiary: #9ca3af;
  --color-text-muted: #4b5563;

  /* Background Colors */
  --color-bg-white: #ffffff;
  --color-bg-page: #f8f8f8;
  --color-bg-pink-light: rgba(239, 244, 255, 0.9);
  --color-bg-pink: #E0ECFF;
  --color-bg-pink-gradient-start: #D6E4FF;
  --color-bg-pink-gradient-end: #CCDCFF;
  --color-bg-menu: #E8F0FF;
  --color-bg-booked: #ffeec4;

  /* Border Colors */
  --color-border-pink: #C4D8F5;
  --color-border-pink-light: #B8D0F5;
  --color-border-card: #D0DEF5;
  --color-border-gray: #d9d9d9;

  /* Shadows */
  --shadow-card: 0px 18px 40px rgba(15, 23, 42, 0.08);
  --shadow-button: 0px 6px 18px rgba(26, 79, 217, 0.08);
  --shadow-avatar: 0px 12px 30px rgba(26, 79, 217, 0.15);
  --shadow-primary: 0px 12px 28px rgba(47, 107, 255, 0.3);
  --shadow-product: 0px 8px 16px rgba(26, 79, 217, 0.04);

  /* Border Radius */
  --radius-full: 999px;
  --radius-card: 28px;
  --radius-button: 16px;
  --radius-product: 18px;
  --radius-menu: 12px;
  --radius-avatar: 48px;

  /* Font Family */
  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

  /* Font Sizes */
  --font-size-xs: 10.3px;
  --font-size-sm: 11px;
  --font-size-base: 13px;
  --font-size-md: 14.8px;
  --font-size-lg: 15px;
  --font-size-xl: 22px;

  /* Spacing */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-2xl: 24px;

  /* Legacy variables for compatibility */
  --inbio-primary: var(--color-primary);
  --inbio-bg: var(--color-bg-white);
  --inbio-text: var(--color-text-primary);
}

/* ============================================
   RESET & BASE
   ============================================ */
.inbio-page {
  max-width: 390px;
  margin: 0 auto;
  min-height: 100vh;
  background: var(--color-bg-page);
  font-family: var(--font-family);
}

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

.inbio-body {
  background: var(--color-bg-page);
  color: var(--color-text-primary);
  font-family: var(--font-family);
  min-height: 100vh;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* ============================================
   HEADER
   ============================================ */
.inbio-header-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 12px 0;
  position: relative;
  z-index: 10;
}

.inbio-logo-badge {
  background: var(--color-bg-pink-light);
  border: 1px solid var(--color-border-pink);
  border-radius: var(--radius-full);
  padding: 7px 13px;
  text-decoration: none;
  display: inline-block;
}

.inbio-logo-text {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-primary);
  letter-spacing: 1.32px;
  text-transform: uppercase;
}

.inbio-logo-link {
  display: inline-block;
}

.inbio-logo-img {
  height: 22px;
  width: auto;
}

.inbio-logo-svg {
  height: 22px;
  width: auto;
  color: var(--color-text-primary);
}

.inbio-menu-toggle {
  width: 34px;
  height: 34px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-pink);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-button);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  color: var(--color-text-primary);
}

.inbio-menu-toggle:hover {
  background: var(--color-bg-pink-light);
}

/* Header Right Container */
.inbio-header-right {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* Language Toggle */
.inbio-lang-toggle {
  display: flex;
  align-items: center;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-pink);
  border-radius: var(--radius-full);
  padding: 6px 12px;
  box-shadow: var(--shadow-button);
  font-size: var(--font-size-sm);
}

.inbio-lang-link {
  color: var(--color-text-secondary);
  text-decoration: none;
  font-weight: 500;
  padding: 2px 4px;
  transition: color 0.2s ease;
}

.inbio-lang-link:hover {
  color: var(--color-primary);
}

.inbio-lang-link.active {
  color: var(--color-primary);
  font-weight: 600;
}

.inbio-lang-separator {
  color: var(--color-border-gray);
  margin: 0 2px;
}

/* Footer language toggle - smaller, muted */
.inbio-footer-lang {
  background: transparent;
  border: none;
  box-shadow: none;
  padding: 4px 8px;
  margin-top: 8px;
}

.inbio-footer-lang .inbio-lang-link {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
}

.inbio-footer-lang .inbio-lang-link:hover,
.inbio-footer-lang .inbio-lang-link.active {
  color: var(--color-primary);
}

.inbio-footer-lang .inbio-lang-separator {
  color: var(--color-text-muted);
  opacity: 0.5;
}

/* ============================================
   PROFILE CARD
   ============================================ */
.inbio-profile-card {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-pink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  margin: 16px 12px 0;
  padding: var(--spacing-2xl) var(--spacing-xl);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

/* Profile Header */
.inbio-profile-header {
  text-align: center;
}

.inbio-avatar-wrapper {
  width: 96px;
  height: 96px;
  margin: 0 auto 24px;
  border-radius: var(--radius-avatar);
  border: 3px solid var(--color-bg-white);
  box-shadow: var(--shadow-avatar);
  overflow: hidden;
}

.inbio-avatar-wrapper img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbio-avatar-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-pink);
  color: var(--color-primary);
  font-size: 2.5rem;
}

.inbio-profile-name {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 15px 0;
}

.inbio-profile-title {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 8px 0;
}

.inbio-profile-address {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
  line-height: 1.4;
}

.inbio-profile-address i {
  margin-right: 4px;
}

a.inbio-profile-address {
  text-decoration: none;
  transition: color 0.2s ease;
}

a.inbio-profile-address:hover {
  color: var(--color-primary);
}

.inbio-separator {
  margin: 0 6px;
  opacity: 0.5;
}

.inbio-profile-location {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   AVAILABILITY BANNER
   ============================================ */
.inbio-availability-banner {
  display: block;
  background: linear-gradient(to right, var(--color-bg-pink-gradient-start), var(--color-bg-pink-gradient-end));
  border-radius: var(--radius-full);
  padding: 5px 16px;
  text-align: center;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.inbio-availability-banner:hover {
  opacity: 0.85;
}

.inbio-availability-banner span {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-primary-dark);
}

/* ============================================
   ACTION BUTTONS
   ============================================ */
.inbio-action-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.inbio-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 43px;
  border-radius: var(--radius-full);
  font-size: var(--font-size-md);
  font-weight: 400;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  text-decoration: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
}

.inbio-btn:active {
  transform: scale(0.98);
}

.inbio-btn-primary {
  background: linear-gradient(to right, var(--color-primary), var(--color-primary-light));
  color: var(--color-bg-white);
  box-shadow: var(--shadow-primary);
  border: 1px solid transparent;
}

.inbio-btn-primary:hover {
  color: var(--color-bg-white);
  opacity: 0.95;
}

.inbio-btn-row {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.inbio-btn-row::-webkit-scrollbar {
  display: none;
}

.inbio-btn-row .inbio-btn {
  flex: 0 0 auto;
  min-width: max-content;
  padding: 0 16px;
  white-space: nowrap;
  scroll-snap-align: start;
}

.inbio-btn-outline-pink {
  flex: 1;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-pink-light);
  color: var(--color-primary-dark);
}

.inbio-btn-outline-pink:hover {
  background: var(--color-bg-pink-light);
  color: var(--color-primary-dark);
}

.inbio-btn-outline-purple {
  flex: 1;
  background: var(--color-bg-white);
  border: 1px solid var(--color-purple-border);
  color: var(--color-purple);
}

.inbio-btn-outline-purple:hover {
  background: rgba(124, 58, 237, 0.05);
  color: var(--color-purple);
}

/* ============================================
   REVIEWS
   ============================================ */
.inbio-reviews {
  display: flex;
  align-items: center;
  gap: 4px;
  flex-wrap: wrap;
}

.inbio-stars {
  display: flex;
  gap: 2px;
}

.inbio-star {
  color: var(--color-yellow);
  font-size: 14px;
}

.inbio-rating {
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  margin-left: 4px;
}

.inbio-review-count {
  font-size: 12px;
  color: var(--color-text-secondary);
}

.inbio-write-review {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-primary-dark);
  margin-left: auto;
  text-decoration: none;
}

.inbio-write-review:hover {
  color: var(--color-primary);
}

/* ============================================
   QUICK NAV
   ============================================ */
.inbio-quick-nav {
  display: flex;
  justify-content: space-between;
}

.inbio-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  width: 59px;
  text-decoration: none;
}

.inbio-nav-icon {
  width: 40px;
  height: 40px;
  background: var(--color-bg-pink);
  border-radius: var(--radius-button);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease;
  color: var(--color-primary);
}

.inbio-nav-item:hover .inbio-nav-icon {
  background: var(--color-bg-pink-gradient-start);
}

.inbio-nav-icon svg {
  width: 18px;
  height: 18px;
}

.inbio-nav-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
  text-align: center;
}

/* ============================================
   PRODUCTS SECTION
   ============================================ */
.inbio-products-section {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inbio-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inbio-section-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.inbio-see-all {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 11.8px;
  color: var(--color-text-secondary);
  text-decoration: none;
}

.inbio-see-all:hover {
  color: var(--color-primary);
}

.inbio-products-grid {
  display: flex;
  gap: 16px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding-bottom: 4px;
}

.inbio-products-grid::-webkit-scrollbar {
  display: none;
}

/* Shop page grid (2 columns, not scrollable) */
.inbio-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.inbio-shop-grid .inbio-product-card {
  flex: none;
}

.inbio-product-card {
  flex: 0 0 150px;
  scroll-snap-align: start;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-product);
  box-shadow: var(--shadow-product);
  padding: 10px;
  text-decoration: none;
  color: inherit;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}

.inbio-product-card:hover {
  transform: translateY(-2px);
  box-shadow: 0px 12px 24px rgba(26, 79, 217, 0.08);
}

.inbio-product-image {
  height: 90px;
  border-radius: 14px;
  margin-bottom: 13px;
  overflow: hidden;
  background: linear-gradient(135deg, #fef3c7, #fed7aa);
}

.inbio-product-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbio-product-image-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-text-tertiary);
  font-size: 1.5rem;
}

.inbio-product-info {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbio-product-name {
  font-size: var(--font-size-base);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbio-product-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.inbio-price-block {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.inbio-product-price {
  font-size: var(--font-size-base);
  color: var(--color-text-muted);
  margin: 0;
}

.inbio-product-price-old {
  font-size: 10px;
  color: rgba(75, 85, 99, 0.3);
  text-decoration: line-through;
}

.inbio-buy-link {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-primary);
  text-decoration: none;
}

.inbio-buy-link:hover {
  color: var(--color-primary-dark);
}

/* ============================================
   BOOKED BANNER
   ============================================ */
.inbio-booked-banner {
  background: var(--color-bg-booked);
  border-radius: var(--radius-button);
  padding: 12px 13px;
  text-align: center;
}

.inbio-booked-banner span {
  font-size: var(--font-size-base);
  color: var(--color-amber);
  line-height: 1.6;
}

.inbio-booked-banner a {
  color: var(--color-amber);
  text-decoration: underline;
}

/* ============================================
   FOOTER
   ============================================ */
.inbio-footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 24px 12px;
  margin: 0 auto;
}

.inbio-powered-by {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 0;
}

.inbio-ylips-brand {
  color: var(--color-primary);
  text-decoration: none;
}

.inbio-ylips-brand:hover {
  text-decoration: underline;
}

.inbio-payment-methods {
  display: flex;
  gap: 6px;
}

.inbio-payment-icon {
  width: 36px;
  height: 25px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-gray);
  border-radius: 2.5px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.inbio-payment-icon-text {
  font-size: 8px;
  font-weight: 500;
  color: var(--color-text-primary);
}

/* ============================================
   MENU OVERLAY
   ============================================ */
.inbio-menu-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 30, 0.3);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
}

.inbio-menu-overlay.active {
  opacity: 1;
  visibility: visible;
}

.inbio-menu-panel {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(0.95);
  width: calc(100% - 24px);
  max-width: 380px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-pink);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  transition: transform 0.25s ease;
}

.inbio-menu-overlay.active .inbio-menu-panel {
  transform: translate(-50%, -50%) scale(1);
}

.inbio-menu-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  padding-bottom: 0;
}

.inbio-menu-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.inbio-menu-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  margin-left: auto;
  color: var(--color-text-tertiary);
  transition: color 0.15s ease;
}

.inbio-menu-close:hover {
  color: var(--color-text-primary);
}

.inbio-menu-body {
  padding: var(--spacing-lg);
}

.inbio-menu-actions {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-lg);
}

.inbio-menu-actions .inbio-btn {
  width: 100%;
  flex: none;
}

.inbio-menu-body .inbio-lang-toggle {
  justify-content: center;
  margin-top: var(--spacing-lg);
}

.inbio-menu-nav {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.inbio-menu-item {
  background: var(--color-bg-menu);
  border-radius: var(--radius-menu);
  padding: 12px 16px;
  font-size: 13.3px;
  font-weight: 500;
  color: var(--color-text-primary);
  text-decoration: none;
  transition: background 0.15s ease;
}

.inbio-menu-item:hover {
  background: var(--color-bg-pink);
  color: var(--color-text-primary);
}

/* ============================================
   SOCIAL LINKS (For menu/about)
   ============================================ */
.inbio-social-links {
  display: flex;
  justify-content: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg) 0;
}

.inbio-social-link {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-bg-pink);
  color: var(--color-primary);
  text-decoration: none;
  transition: background 0.15s ease, transform 0.15s ease;
}

.inbio-social-link:hover {
  background: var(--color-primary);
  color: var(--color-bg-white);
  transform: scale(1.05);
}

.inbio-social-link svg {
  width: 18px;
  height: 18px;
}

/* ============================================
   SERVICES SECTION (For about/services pages)
   ============================================ */
.inbio-services-section {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.inbio-service-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inbio-service-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-button);
  text-decoration: none;
}

.inbio-service-info {
  flex: 1;
  min-width: 0;
}

.inbio-service-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}

.inbio-service-desc {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 8px 0;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.inbio-service-meta {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  font-size: var(--font-size-sm);
}

.inbio-service-duration {
  color: var(--color-text-tertiary);
}

.inbio-service-price {
  font-weight: 600;
  color: var(--color-primary);
}

.inbio-service-arrow {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* ============================================
   WORKING HOURS
   ============================================ */
.inbio-hours-section {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  padding: var(--spacing-lg);
}

.inbio-hours-row {
  display: flex;
  justify-content: space-between;
  padding: var(--spacing-sm) 0;
  border-bottom: 1px solid var(--color-border-gray);
}

.inbio-hours-row:last-child {
  border-bottom: none;
}

.inbio-hours-day {
  font-weight: 500;
  color: var(--color-text-primary);
}

.inbio-hours-time {
  color: var(--color-text-secondary);
}

.inbio-hours-closed {
  color: var(--color-text-tertiary);
}

/* ============================================
   ABOUT CONTENT
   ============================================ */
.inbio-about-content {
  font-size: var(--font-size-md);
  line-height: 1.7;
  color: var(--color-text-primary);
}

.inbio-about-content p {
  margin: 0 0 var(--spacing-lg) 0;
}

.inbio-about-content p:last-child {
  margin-bottom: 0;
}

/* ============================================
   LOCATION CARD
   ============================================ */
.inbio-location-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
}

.inbio-location-card svg {
  width: 24px;
  height: 24px;
  color: var(--color-primary);
  flex-shrink: 0;
}

.inbio-location-text {
  font-size: var(--font-size-md);
  color: var(--color-text-primary);
}

/* ============================================
   EMPTY STATE
   ============================================ */
.inbio-empty {
  text-align: center;
  padding: var(--spacing-2xl) var(--spacing-lg);
  color: var(--color-text-tertiary);
  background: var(--color-bg-page);
  border-radius: var(--radius-button);
}

.inbio-empty svg,
.inbio-empty i {
  font-size: 2.5rem;
  margin-bottom: var(--spacing-md);
  display: block;
  opacity: 0.5;
}

.inbio-empty p {
  margin: 0;
  font-size: var(--font-size-base);
}

.inbio-empty .inbio-btn {
  margin-top: var(--spacing-md);
}

/* ============================================
   BACK LINK
   ============================================ */
.inbio-back-link {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  text-decoration: none;
  padding: var(--spacing-sm) 0;
}

.inbio-back-link:hover {
  color: var(--color-primary);
}

/* ============================================
   PAGE TITLE (For sub-pages)
   ============================================ */
.inbio-page-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.inbio-page-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
}

/* ============================================
   SECTION SPACING
   ============================================ */
.inbio-section {
  margin: var(--spacing-xl) 12px;
}

.inbio-section-spaced {
  margin-top: var(--spacing-2xl);
}

/* ============================================
   COMPACT HEADER (For sub-pages, inside card)
   ============================================ */
.inbio-compact-header {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding-bottom: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-card);
}

.inbio-back-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-pink);
  border-radius: var(--radius-full);
  color: var(--color-primary);
  flex-shrink: 0;
  transition: background 0.15s ease;
}

.inbio-back-btn:hover {
  background: var(--color-bg-pink-gradient-start);
  color: var(--color-primary);
}

.inbio-compact-avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.inbio-compact-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbio-compact-info {
  flex: 1;
  min-width: 0;
}

.inbio-compact-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbio-compact-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ============================================
   SUBPAGE CARD
   ============================================ */
.inbio-subpage-card {
  /* Uses same margin as .inbio-profile-card (35px 12px 0) */
}

/* Cover Hero Image */
.inbio-cover-hero {
  position: relative;
  width: calc(100% + var(--spacing-xl) * 2);
  height: 180px;
  margin: calc(var(--spacing-xl) * -1);
  margin-bottom: var(--spacing-lg);
  overflow: hidden;
  border-radius: var(--radius-card) var(--radius-card) 0 0;
}

.inbio-cover-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbio-subpage-card.has-cover .inbio-compact-header {
  margin-top: 0;
}

.inbio-subpage-header {
  margin-bottom: var(--spacing-lg);
  padding-bottom: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-card);
}

.inbio-page-title {
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
}

.inbio-page-subtitle {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: var(--spacing-xs) 0 0 0;
}

.inbio-content-section {
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border-card);
}

.inbio-content-section:first-of-type {
  border-top: none;
  padding-top: 0;
  margin-top: var(--spacing-lg);
}

.inbio-cta-section {
  padding-top: var(--spacing-xl);
  margin-top: var(--spacing-xl);
  border-top: 1px solid var(--color-border-card);
}

.inbio-cta-section .inbio-btn {
  width: 100%;
  gap: var(--spacing-sm);
}

/* ============================================
   DISCOUNT MODAL
   ============================================ */
.inbio-discount-modal {
  display: none;
}

.inbio-discount-modal.active {
  display: block;
}

.inbio-discount-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.inbio-discount-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--spacing-lg);
  background: linear-gradient(135deg, var(--color-bg-pink-light) 0%, var(--color-bg-white) 100%);
  border: 1px dashed var(--color-primary);
  border-radius: var(--radius-button);
}

.inbio-discount-info {
  flex: 1;
}

.inbio-discount-code {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
  margin: 0 0 4px 0;
  font-family: monospace;
}

.inbio-discount-value {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0;
}

.inbio-discount-description {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
  margin: 4px 0 0 0;
  line-height: 1.4;
}

.inbio-discount-copy {
  background: var(--color-primary);
  color: var(--color-bg-white);
  border: none;
  border-radius: var(--radius-full);
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-size-sm);
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.inbio-discount-copy:hover {
  background: var(--color-primary-dark);
}

.inbio-discount-help {
  font-size: 12px;
  color: var(--color-text-tertiary);
  text-align: center;
  margin: var(--spacing-md) 0 0 0;
}

/* ============================================
   FAQ ACCORDION
   ============================================ */
.inbio-faq-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.inbio-faq-item {
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  overflow: hidden;
}

.inbio-faq-question {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-size: var(--font-size-md);
  font-weight: 500;
  color: var(--color-text-primary);
  font-family: inherit;
}

.inbio-faq-question:hover {
  background: var(--color-bg-page);
}

.inbio-faq-arrow {
  flex-shrink: 0;
  transition: transform 0.2s ease;
  color: var(--color-text-tertiary);
}

.inbio-faq-item.open .inbio-faq-arrow {
  transform: rotate(180deg);
}

.inbio-faq-answer {
  display: none;
  padding: 0 var(--spacing-lg) var(--spacing-lg);
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  line-height: 1.6;
}

.inbio-faq-item.open .inbio-faq-answer {
  display: block;
}

.inbio-faq-answer p {
  margin: 0;
}

/* ============================================
   UTILITIES
   ============================================ */
.text-center {
  text-align: center;
}

.text-muted {
  color: var(--color-text-tertiary);
}

.mt-2 {
  margin-top: var(--spacing-sm);
}

.mt-3 {
  margin-top: var(--spacing-md);
}

.mt-4 {
  margin-top: var(--spacing-lg);
}

.mb-2 {
  margin-bottom: var(--spacing-sm);
}

.mb-3 {
  margin-bottom: var(--spacing-md);
}

.mb-4 {
  margin-bottom: var(--spacing-lg);
}

/* ============================================
   SHARE BUTTON FEEDBACK
   ============================================ */
.inbio-quick-nav-btn.shared svg {
  color: #10b981;
}

/* ============================================
   DISCOUNT MODAL BACKDROP
   ============================================ */
.discount-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 30, 0.3);
  z-index: 99;
}

.discount-modal-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 360px;
  max-height: 80vh;
  background: var(--color-bg-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  z-index: 100;
  overflow: hidden;
}

.discount-modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  border-bottom: 1px solid var(--color-border-card);
}

.discount-modal-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.discount-modal-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-text-tertiary);
  border-radius: var(--radius-full);
}

.discount-modal-close:hover {
  background: var(--color-bg-page);
}

.discount-modal-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  max-height: calc(80vh - 60px);
}

/* Terms Modal */
.inbio-terms-modal {
  position: fixed;
  inset: 0;
  z-index: 1050;
}

.inbio-terms-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 30, 0.4);
  backdrop-filter: blur(4px);
}

.inbio-terms-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: calc(100% - 32px);
  max-width: 480px;
  max-height: 80vh;
  background: var(--color-bg-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.inbio-terms-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  padding-bottom: 0;
  flex-shrink: 0;
}

.inbio-terms-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.inbio-terms-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  color: var(--color-text-tertiary);
  transition: color 0.15s ease;
}

.inbio-terms-close:hover {
  color: var(--color-text-primary);
}

.inbio-terms-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
  font-size: var(--font-size-sm);
  line-height: 1.6;
  color: var(--color-text-secondary);
}

.inbio-terms-body p {
  margin-bottom: var(--spacing-md);
}

.inbio-terms-body ul,
.inbio-terms-body ol {
  margin-bottom: var(--spacing-md);
  padding-left: var(--spacing-lg);
}

.discount-card-code {
  cursor: pointer;
  transition: opacity 0.15s ease;
}

.discount-card-code:hover {
  opacity: 0.8;
}

/* ============================================
   SHOP GRID
   ============================================ */
.inbio-shop-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.inbio-shop-grid .inbio-product-card {
  flex-direction: column;
}

.inbio-shop-grid .inbio-product-image {
  width: 100%;
  height: 120px;
}

/* ============================================
   SIMILAR STYLISTS
   ============================================ */
.inbio-stylists-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.inbio-stylist-card {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.inbio-stylist-card:hover {
  border-color: var(--color-primary);
  box-shadow: var(--shadow-button);
  color: inherit;
  text-decoration: none;
}

.inbio-stylist-avatar {
  width: 56px;
  height: 56px;
  border-radius: var(--radius-full);
  overflow: hidden;
  flex-shrink: 0;
}

.inbio-stylist-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.inbio-stylist-info {
  flex: 1;
  min-width: 0;
}

.inbio-stylist-name {
  font-size: var(--font-size-md);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 2px 0;
}

.inbio-stylist-tagline {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 4px 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.inbio-stylist-recommendation {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  font-style: italic;
  margin: 0 0 4px 0;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.inbio-stylist-location {
  font-size: var(--font-size-xs);
  color: var(--color-text-tertiary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 4px;
}

.inbio-stylist-rating {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-size-sm);
  color: var(--color-yellow);
  margin-top: 4px;
}

.inbio-stylist-arrow {
  color: var(--color-text-tertiary);
  flex-shrink: 0;
}

/* ============================================
   SERVICE SELECTED STATE
   ============================================ */
.inbio-service-selected {
  cursor: default;
  border-color: var(--color-primary);
  background: linear-gradient(135deg, var(--color-bg-pink-light) 0%, var(--color-bg-white) 100%);
}

.inbio-service-selected:hover {
  box-shadow: none;
}

/* ============================================
   BOOKING WIZARD
   ============================================ */
.booking-wizard {
  margin-top: var(--spacing-xl);
}

.booking-step {
  margin-bottom: var(--spacing-xl);
}

.booking-step .inbio-section-title {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-lg);
}

.step-number {
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-primary);
  color: var(--color-bg-white);
  border-radius: var(--radius-full);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.month-filter {
  margin-bottom: var(--spacing-lg);
}

.month-filter .form-select {
  font-size: var(--font-size-base);
  border-radius: var(--radius-button);
  border-color: var(--color-border-card);
  padding: var(--spacing-md) var(--spacing-lg);
}

.month-filter .form-select:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.2rem rgba(47, 107, 255, 0.15);
}

.date-grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
}

.date-month-label {
  font-size: var(--font-size-sm);
  font-weight: 600;
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-sm) 0;
}

.date-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
}

.date-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 60px;
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.date-btn:hover {
  border-color: var(--color-primary);
}

.date-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-white);
}

.date-btn.active .date-day,
.date-btn.active .date-num {
  color: var(--color-bg-white);
}

.date-btn .date-day {
  font-size: var(--font-size-xs);
  text-transform: uppercase;
}

.date-btn .date-num {
  font-size: var(--font-size-lg);
  font-weight: 600;
}

.show-next-month-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
  width: 100%;
  padding: var(--spacing-md);
  margin-top: var(--spacing-md);
  background: transparent;
  border: 1px dashed var(--color-border-card);
  border-radius: var(--radius-button);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease;
}

.show-next-month-btn:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.time-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.time-btn {
  padding: var(--spacing-md) var(--spacing-sm);
  background: var(--color-bg-white);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  font-size: var(--font-size-base);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}

.time-btn:hover {
  border-color: var(--color-primary);
}

.time-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-white);
}

.booking-summary {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
  padding: var(--spacing-lg);
  background: var(--color-bg-page);
  border-radius: var(--radius-button);
  margin-bottom: var(--spacing-lg);
}

.booking-summary-item {
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.booking-summary-item svg {
  color: var(--color-primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.booking-nav {
  display: flex;
  gap: var(--spacing-md);
  margin-top: var(--spacing-xl);
}

.booking-nav .inbio-btn {
  flex: 1;
  justify-content: center;
  gap: var(--spacing-sm);
}

/* Form controls for booking */
.booking-wizard .form-label {
  font-size: var(--font-size-base);
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: var(--spacing-xs);
}

.booking-wizard .form-control {
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  padding: var(--spacing-md);
  font-size: var(--font-size-base);
  transition: border-color 0.15s ease;
}

.booking-wizard .form-control:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(47, 107, 255, 0.1);
  outline: none;
}

.booking-wizard .form-text {
  font-size: var(--font-size-sm);
  color: var(--color-text-tertiary);
}

.booking-wizard .form-check-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

.booking-promo .booking-promo-applied-card {
  border: 1px solid var(--color-primary);
  background: linear-gradient(135deg, var(--color-bg-pink-light) 0%, var(--color-bg-white) 100%);
  border-radius: var(--radius-button);
  padding: var(--spacing-md);
}

.booking-promo .booking-promo-applied-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-sm);
}

.booking-promo .booking-promo-type {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: var(--radius-full);
  background: rgba(47, 107, 255, 0.12);
  color: var(--color-primary);
  font-size: var(--font-size-xs);
  font-weight: 600;
}

.booking-promo .booking-promo-change {
  border: 0;
  background: transparent;
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-decoration: underline;
  padding: 0;
}

.booking-promo .booking-promo-applied-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
}

.booking-promo .booking-promo-applied-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.booking-promo .booking-promo-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-secondary);
}

.booking-promo .booking-promo-applied-item strong {
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  word-break: break-word;
}

/* Terms checkbox - touch friendly hit area on booking step */
.booking-wizard .booking-terms-check.form-check {
  padding-left: 0;
  display: flex;
  align-items: flex-start;
  gap: var(--spacing-md);
}

.booking-wizard .booking-terms-check .form-check-input {
  float: none;
  margin: 0;
  width: 20px;
  height: 20px;
  cursor: pointer;
  flex-shrink: 0;
}

.booking-wizard .booking-terms-check .form-check-label {
  margin: 0;
  line-height: 1.45;
  cursor: pointer;
}

/* Gift card wizard refinements */
.gift-card-wizard {
  margin-top: var(--spacing-xl);
}

.gift-step-hint {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-md) 0;
}

.gift-step-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 64px;
  padding: 4px 12px;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-full);
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
}

.gift-mode-switch {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.gift-mode-btn {
  width: 100%;
  height: 48px;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, opacity 0.15s ease;
}

.gift-mode-btn:hover {
  border-color: var(--color-primary);
}

.gift-mode-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-white);
}

.gift-mode-btn:disabled {
  cursor: not-allowed;
  opacity: 0.55;
  background: var(--color-bg-page);
  color: var(--color-text-secondary);
}

.gift-amount-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-sm);
  margin-bottom: var(--spacing-md);
}

.gift-amount-btn {
  width: 100%;
  height: 52px;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  background: var(--color-bg-white);
  color: var(--color-text-primary);
  font-size: var(--font-size-md);
  font-weight: 600;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease;
}

.gift-amount-btn:hover {
  border-color: var(--color-primary);
}

.gift-amount-btn.active {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-bg-white);
}

.gift-custom-amount-wrap {
  margin-top: var(--spacing-sm);
}

.gift-service-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-sm);
}

.gift-service-option {
  display: block;
  margin: 0;
  cursor: pointer;
}

.gift-service-radio-input {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}

.gift-service-radio-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-sm);
  width: 100%;
  min-height: 52px;
  padding: 12px 14px;
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  background: var(--color-bg-white);
  transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.gift-service-option:hover .gift-service-radio-card {
  border-color: var(--color-primary);
}

.gift-service-radio-input:checked + .gift-service-radio-card {
  border-color: var(--color-primary);
  background: var(--color-bg-page);
}

.gift-service-radio-name {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  line-height: 1.3;
}

.gift-service-radio-price {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  font-weight: 600;
  white-space: nowrap;
}

.inbio-booked-banner.inbio-booked-banner-error {
  background: #fee2e2;
  border: 1px solid #fecaca;
  color: #b91c1c;
  text-align: left;
}

.inbio-booked-banner.inbio-booked-banner-error a {
  color: #b91c1c;
}

@media (hover: none), (pointer: coarse) {
  .booking-wizard .booking-terms-check.form-check {
    padding: var(--spacing-sm);
    margin-left: calc(var(--spacing-sm) * -1);
    margin-right: calc(var(--spacing-sm) * -1);
    border-radius: var(--radius-button);
  }

  .booking-wizard .booking-terms-check .form-check-input {
    width: 24px;
    height: 24px;
  }

  .booking-wizard .booking-terms-check .form-check-label {
    font-size: var(--font-size-base);
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }

  .booking-wizard .booking-terms-check .form-check-label a {
    display: inline-block;
    padding: 2px 0;
  }
}

@media (max-width: 576px) {
  .booking-promo .booking-promo-applied-grid {
    grid-template-columns: 1fr;
  }
}

/* ============================================
   GALLERY STYLES
   ============================================ */
.inbio-gallery-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--spacing-sm);
}

.inbio-gallery-item {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-card);
  cursor: pointer;
  background: var(--color-bg-page);
}

.inbio-gallery-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.3s ease;
}

.inbio-gallery-item:hover img {
  transform: scale(1.05);
}

.inbio-gallery-caption {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  padding: var(--spacing-sm) var(--spacing-md);
  background: linear-gradient(transparent, rgba(28, 28, 30, 0.7));
  color: var(--color-bg-white);
  font-size: var(--font-size-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Gallery Modal */
.inbio-gallery-modal {
  background: transparent;
  border: none;
  box-shadow: none;
}

.inbio-gallery-close {
  position: absolute;
  top: -40px;
  right: 0;
  z-index: 10;
  opacity: 0.9;
}

.inbio-gallery-close:hover {
  opacity: 1;
}

.inbio-gallery-modal-image {
  width: 100%;
  max-height: 80vh;
  object-fit: contain;
  border-radius: var(--radius-card);
}

.inbio-gallery-modal-caption {
  text-align: center;
  color: var(--color-bg-white);
  margin-top: var(--spacing-md);
  font-size: var(--font-size-base);
  text-shadow: 0 1px 3px rgba(28, 28, 30, 0.5);
}

/* ============================================
   ORDER MODAL (PRD-18)
   ============================================ */
.inbio-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28, 28, 30, 0.5);
  z-index: 100;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.25s ease, visibility 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--spacing-lg);
}

.inbio-overlay.active {
  opacity: 1;
  visibility: visible;
}

.inbio-overlay-content {
  background: var(--color-bg-white);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-card);
  width: 100%;
  max-width: 420px;
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
  transform: scale(0.95);
  transition: transform 0.25s ease;
}

.inbio-overlay.active .inbio-overlay-content {
  transform: scale(1);
}

.inbio-overlay-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-lg);
  padding-bottom: 0;
  flex-shrink: 0;
}

.inbio-overlay-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

.inbio-overlay-close {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none;
  border: none;
  cursor: pointer;
  margin-left: auto;
  color: var(--color-text-tertiary);
  transition: color 0.15s ease;
}

.inbio-overlay-close:hover {
  color: var(--color-text-primary);
}

.inbio-overlay-body {
  padding: var(--spacing-lg);
  overflow-y: auto;
  flex: 1;
}

/* Order Modal Content */
.inbio-order-modal {
  /* Uses header/body structure for consistent styling */
}

.inbio-order-product {
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  padding: var(--spacing-md);
  background: var(--color-bg-page);
  border-radius: var(--radius-button);
  margin-bottom: var(--spacing-lg);
}

.inbio-order-product-img {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: var(--radius-button);
  flex-shrink: 0;
}

.inbio-order-product-info h3 {
  font-size: var(--font-size-base);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 4px 0;
}

.inbio-order-product-price {
  font-size: var(--font-size-lg);
  font-weight: 700;
  color: var(--color-primary);
}

/* Order Form */
.inbio-order-form {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.inbio-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-xs);
}

.inbio-form-group label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-primary);
}

.inbio-input,
.inbio-textarea {
  width: 100%;
  padding: var(--spacing-md);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  font-size: var(--font-size-base);
  color: var(--color-text-primary);
  background: var(--color-bg-white);
  transition: border-color 0.15s ease;
}

.inbio-input:focus,
.inbio-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
}

.inbio-input::placeholder,
.inbio-textarea::placeholder {
  color: var(--color-text-tertiary);
}

/* Quantity Control */
.inbio-quantity-control {
  display: flex;
  align-items: center;
  gap: var(--spacing-sm);
  width: fit-content;
}

.inbio-qty-btn {
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-bg-page);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  cursor: pointer;
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  transition: background 0.15s ease;
}

.inbio-qty-btn:hover {
  background: var(--color-border-card);
}

.inbio-qty-input {
  width: 60px;
  text-align: center;
  padding: var(--spacing-sm);
  border: 1px solid var(--color-border-card);
  border-radius: var(--radius-button);
  font-size: var(--font-size-base);
  font-weight: 600;
}

.inbio-qty-input::-webkit-outer-spin-button,
.inbio-qty-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Form Error */
.inbio-form-error {
  padding: var(--spacing-md);
  background: var(--color-bg-error);
  color: var(--color-error);
  border-radius: var(--radius-button);
  font-size: var(--font-size-sm);
}

/* Order Summary (Preview Step) */
.inbio-order-step-title {
  font-size: var(--font-size-lg);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-lg) 0;
}

.inbio-order-summary {
  background: var(--color-bg-page);
  border-radius: var(--radius-button);
  padding: var(--spacing-lg);
  margin-bottom: var(--spacing-lg);
}

.inbio-order-summary-row {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-md);
  padding: var(--spacing-sm) 0;
}

.inbio-order-summary-row span:first-child {
  color: var(--color-text-secondary);
}

.inbio-order-summary-row span:last-child {
  color: var(--color-text-primary);
  font-weight: 500;
  text-align: right;
}

.inbio-order-summary-total {
  font-size: var(--font-size-lg);
  padding-top: var(--spacing-md);
}

.inbio-order-summary-total span:last-child {
  font-weight: 700;
  color: var(--color-primary);
}

.inbio-order-summary hr {
  border: none;
  border-top: 1px solid var(--color-border-card);
  margin: var(--spacing-md) 0;
}

/* Order Actions */
.inbio-order-actions {
  display: flex;
  gap: var(--spacing-md);
}

.inbio-order-actions .inbio-btn {
  flex: 1;
}

/* Order Success */
.inbio-order-success {
  text-align: center;
  padding: var(--spacing-xl) 0;
}

.inbio-order-success i {
  font-size: 64px;
  color: var(--color-success);
  margin-bottom: var(--spacing-lg);
}

.inbio-order-success h3 {
  font-size: var(--font-size-xl);
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0 0 var(--spacing-sm) 0;
}

.inbio-order-success p {
  font-size: var(--font-size-base);
  color: var(--color-text-secondary);
  margin: 0 0 var(--spacing-xl) 0;
}

/* Full width button */
.inbio-btn-full {
  width: 100%;
}

/* ============================================
   COOKIE CONSENT
   ============================================ */
.cookie-consent {
  position: fixed;
  bottom: var(--space-4);
  right: var(--space-4);
  left: auto;
  z-index: 9999;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--transition-base), transform var(--transition-base);
  pointer-events: none;
}

.cookie-consent.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

.cookie-consent-container {
  background: var(--white);
  border: 1px solid var(--gray-200);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-card);
  padding: var(--space-5);
  width: 380px;
  max-width: calc(100vw - 2rem);
}

.cookie-consent-content {
  margin: 0;
}

.cookie-consent-header {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.cookie-consent-header h2 {
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  color: var(--gray-900);
  margin: 0;
}

.cookie-consent-icon {
  font-size: var(--text-2xl);
  color: var(--primary);
}

.cookie-consent-content > p {
  font-size: var(--text-sm);
  color: var(--gray-600);
  margin-bottom: var(--space-4);
  line-height: 1.6;
}

.cookie-options {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-bottom: var(--space-5);
}

.cookie-option {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  cursor: pointer;
}

.cookie-option input {
  display: none;
}

.cookie-option-check {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gray-100);
  border: 2px solid var(--gray-300);
  border-radius: var(--radius-sm);
  color: transparent;
  flex-shrink: 0;
  transition: var(--transition-fast);
}

.cookie-option input:checked + .cookie-option-check {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--white);
}

.cookie-option input:disabled + .cookie-option-check {
  background: var(--gray-200);
  border-color: var(--gray-300);
  color: var(--gray-500);
}

.cookie-option-text {
  flex: 1;
}

.cookie-option-text strong {
  display: block;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  color: var(--gray-900);
  margin-bottom: 2px;
}

.cookie-option-text small {
  font-size: var(--text-xs);
  color: var(--gray-500);
}

.cookie-consent-actions {
  display: flex;
  gap: var(--space-3);
  flex-wrap: wrap;
  margin-bottom: var(--space-4);
}

.cookie-consent-footer {
  text-align: center;
}

.cookie-consent-footer a {
  font-size: var(--text-sm);
  color: var(--gray-500);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  transition: var(--transition-fast);
}

.cookie-consent-footer a:hover {
  color: var(--primary);
}

@media (max-width: 640px) {
  .cookie-consent {
    left: var(--space-2);
    right: var(--space-2);
    bottom: calc(var(--space-2) + env(safe-area-inset-bottom));
  }

  .cookie-consent-container {
    width: 100%;
    max-width: none;
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    max-height: min(72vh, 560px);
    overflow-y: auto;
  }

  .cookie-consent-header {
    gap: var(--space-2);
    margin-bottom: var(--space-2);
  }

  .cookie-consent-header h2 {
    font-size: var(--text-base);
  }

  .cookie-consent-icon {
    font-size: var(--text-lg);
  }

  .cookie-consent-content > p {
    font-size: var(--text-xs);
    margin-bottom: var(--space-3);
    line-height: 1.45;
  }

  .cookie-options {
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .cookie-option {
    gap: var(--space-2);
  }

  .cookie-option-check {
    width: 20px;
    height: 20px;
  }

  .cookie-option-text strong {
    font-size: var(--text-xs);
  }

  .cookie-option-text small {
    font-size: 0.6875rem;
    line-height: 1.35;
  }

  .cookie-consent-actions {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--space-2);
    margin-bottom: var(--space-3);
  }

  .cookie-consent-actions .btn {
    width: 100%;
    padding: 0.5rem 0.75rem;
    font-size: var(--text-sm);
  }

  .cookie-consent-footer a {
    font-size: var(--text-xs);
  }
}