/* CSS Custom Properties for Animation */
:root {
  --anim-banner-fade: 300ms;
  --anim-video-shimmer: 1.5s;
  --anim-section-height: 400ms;
  --anim-gallery-stagger: 100ms;
  --anim-easing-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --anim-easing-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);  
  /* Glass controls for the main planner container */
  --glass-bg: rgba(26, 26, 26, 0.28);   /* transparency */
  --glass-blur: 12px;                   /* blur strength */
  --glass-border: rgba(212, 175, 55, 0.28); /* subtle gold border */
}

/* Reset and Base Styles */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  background: #000;
  color: var(--color-text-primary);
  line-height: 1.6;
}

/* Fallback for CSS custom properties */
@supports not (--css: variables) {
  .template-banner-image {
    transition: opacity 300ms ease-out;
  }
  
  .skeleton-shimmer {
    animation-duration: 1.5s;
  }
  
  .gallery-item {
    animation-duration: 400ms;
    animation-delay: 0s;
  }
}

/* Fallback for backdrop-filter (vendor-aware) */
@supports not ((-webkit-backdrop-filter: blur(10px)) or (backdrop-filter: blur(10px))) {
  /* Keep these dark for readability */
  .template-video-error,
/* MIGRATION REMOVED: .landing-footer (now in footer.css) */

  /* Allow the planner container to remain glassy even without blur */
  .planner-container {
    background: var(--glass-bg);           /* use your glass variable */
    border: 1px solid var(--glass-border);
    /* no blur here because it’s unsupported in this @supports */
  }
}


/* Transform fallback for older browsers */
@supports not (transform: translate3d(0, 0, 0)) {
  .template-banner-image {
    transform: translateX(0) translateY(0) scale(1);
  }
  
  .gallery-item {
    transform: translateX(0) translateY(0);
  }
  

}

/* Flexbox fallbacks for really old browsers */
.no-flexbox .templates-grid {
  display: table;
  width: 100%;
}

.no-flexbox .grid-cell {
  display: table-cell;
  width: 25%;
  vertical-align: top;
}
/* Utility Classes */
.hidden {
  display: none !important;
}

.container {
  max-width: 1600px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Navigation */




/* Floating Admin Panel */
.floating-admin-panel {
  position: fixed;
  top: 20px;
  right: 20px;
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  z-index: 999;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

.floating-admin-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 20px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 0.95rem;
  transition: all 0.3s ease;
  width: 100%;
}

.floating-admin-toggle:hover {
  background: linear-gradient(135deg, #f7931e, #ff6b35);
  transform: translateY(-1px);
}

.floating-panel-content {
  padding: 10px;
  border-top: 1px solid #444;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 200px;
}

.floating-btn {
  padding: 10px 15px;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  text-align: left;
  display: flex;
  align-items: center;
  gap: 8px;
}

.floating-btn:hover {
  background: var(--color-primary);
  color: #000;
  transform: translateX(2px);
}

.floating-btn.logout {
  background: rgba(220, 53, 69, 0.2);
  border-color: var(--color-danger);
  color: var(--color-danger);
}

.floating-btn.logout:hover {
  background: var(--color-danger);
  color: white;
}

.floating-admin-panel.expanded {
  box-shadow: 0 8px 24px var(--color-primary-light);
}

@keyframes pulse {
  0% { opacity: 1; }
  50% { opacity: 0.7; }
  100% { opacity: 1; }
}

/* Views */
.view {
  min-height: 100vh;
  padding: 2rem 0;
}

.view.active {
  display: block;
}

/* Planner and admin views: sign without the tagline box */
.view {
  background-image: url('../images/planner-background_desktop.webp?v=1'), 
                    url('../images/planner-background_desktop.jpeg?v=1');
  background-size: 100% auto;
  background-size: min(1820px, 100%) auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: #000;
}

/* Hero Section */
.hero {
  display: none; /* Hide the hero section as it's not in the new design */
}

/* Landing page: hero sign with tagline box */
#landingView {
  padding: 0;
  margin: 0;
  min-height: 100vh;
  position: relative;
  background-image: url('../images/hero-neon-background_desktop.webp?v=5'), 
                    url('../images/hero-neon-background_desktop.jpeg?v=5');
  background-size: 100% auto;
  background-size: min(1820px, 100%) auto;
  background-position: center top;
  background-repeat: no-repeat;
  background-attachment: scroll;
  background-color: #000;
}

/* Fallback for older browsers */
#landingView {
  background-image: url('../images/hero-neon-background_desktop.jpeg');
}

/* Modern browsers will use WebP */
@supports (background-image: url('../images/hero-neon-background_desktop.webp')) {
  #landingView {
    background-image: url('../images/hero-neon-background_desktop.webp');
  }
}

/* Hide the navigation on landing and planner pages */
#landingView ~ .navbar,
.view.active#landingView ~ .navbar,
#plannerView ~ .navbar,
.view.active#plannerView ~ .navbar {
  display: none;
}

/* Modern browsers will use WebP */
@supports (background-image: url('../images/hero-neon-background_desktop.webp')) {
  .hero-header {
    background-image: url('../images/hero-neon-background_desktop.webp');
  }
}

/* Content Wrapper - scrolls under the header */
.content-wrapper {
  position: relative;
  margin-top: 0px; /* Same as hero-header height */
  /* Remove black background to show the fixed background behind */
  background: transparent;
  min-height: calc(100vh - 300px);
  z-index: 50;
}
/* Templates Section */
.templates-section {
  /* Remove black background to show the fixed background behind */
  background: transparent;
  padding: 2rem 0 4rem 0;
  position: relative;
}

.templates-grid-container {
  max-width: 1400px;
  margin: 0 auto;
  padding: 0 20px;
}

/* Templates Grid */
.templates-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-top: 275px;
  margin-bottom: 3rem;
  padding: 0 20px;
}

/* Mobile Portrait - 2 Column Layout */
@media screen and (max-width: 767px) and (orientation: portrait) {
  .templates-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 200px;
    padding: 0 15px;
  }
  
  .templates-title {
    font-size: 2rem;
    margin-top: 1rem;
  }
  
  .action-title-box,
  .featured-title-box {
    max-width: 100%;
    font-size: 0.8rem;
  }
  
  .cell-info-box {
    padding: 6px 8px;
  }
  
  .info-line-1,
  .info-line-2 {
    font-size: 0.75rem;
  }
  
  .info-box-btn {
    padding: 3px 6px;
    font-size: 0.65rem;
    min-width: 40px;
  }
}


@media screen and (max-width: 480px) and (orientation: portrait) {
  .templates-grid {
    gap: 10px;
    margin-top: 180px;
  }
  
  .templates-title {
    font-size: 1.5rem;
  }
}

/* Tablet Portrait - 3 Columns */
@media screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .templates-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 230px;
  }
}

/* Landscape - Keep 4 Columns */
@media screen and (max-width: 1024px) and (orientation: landscape) {
  .templates-grid {
    gap: 18px;
    margin-top: 180px;
  }
}

/* Action Item Wrapper */
.action-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10;
  align-items: center;
}

/* Action Title Box */
.action-title-box {
  width: 100%;
  max-width: 230px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--color-primary);
  padding: 5px 5px;
  margin-bottom: 10px;
  text-align: center;
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.action-title-box:hover {
  background: var(--color-primary);
  color: #000;
}
/* Featured Item Wrapper */
.featured-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 10;
  align-items: center;
}

/* Featured Title Box */
.featured-title-box {
  width: 100%;
  max-width: 230px;
  background: rgba(0, 0, 0, 0.9);
  border: 1px solid var(--color-primary);
  border-left: 2px solid var(--color-primary);
  border-right: 2px solid var(--color-primary);
  border-bottom: 2px solid var(--color-primary);
  padding: 5px 5px;
  margin-bottom:10px;
  text-align: center;
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  cursor: pointer;
  transition: all 0.3s ease;
}

.featured-title-box:hover {
  background: var(--color-primary);
  color: #000;
}

/* Adjust featured cell when it has a separate title */
.featured-item-wrapper .featured-cell {
  margin-top: 0;
  border-top: 2px solid var(--color-primary);
}

/* Admin controls on Featured tiles */
.featured-cell { position: relative; }

.featured-admin-controls {
  position: absolute;
  top: 8px;
  right: 8px;
  display: flex;
  gap: 6px;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 26;
}
.featured-cell:hover .featured-admin-controls {
  opacity: 1;
}

/* Remove title from action cells that have separate title boxes */
.action-item-wrapper .action-cell {
  margin-top: 0;
}

/* Add title above grid */
.templates-title {
  text-align: center;
  font-size: 3rem;
  font-weight: bold;
  color: var(--color-primary);
  letter-spacing: 0.2em;
  margin-bottom: 2rem;
  text-shadow: 0 0 20px rgba(212, 175, 55, 0.5);
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 1rem;
  margin-top: 2rem;
}

.grid-cell {
  background: var(--color-bg-surface);
  border: 1px solid #333;
  width: 100%;
  aspect-ratio: 285 / 445;
  position: relative;
  cursor: pointer;
  transition: all 0.3s ease;
  overflow: hidden;
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  align-self: start; /* Prevent stretching */
}
.grid-cell:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  border-color: var(--color-primary);
}

/* Action Cells (Create New, Load Plans) */
.action-cell {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1a1a1a, #0a0a0a);
}

.cell-title {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  z-index: 10;
  background: rgba(0, 0, 0, 0.9);
  padding: 8px 5px;
  border-bottom: 1px solid var(--color-primary);
}

/* Hide cell-title in wrappers since we have separate title boxes */
.action-item-wrapper .cell-title,
.featured-item-wrapper .cell-title {
  display: none;
}
.cell-icon {
  font-size: 4rem;
  color: var(--color-primary);
  opacity: 0.7;
  transition: all 0.3s ease;
}

.action-cell:hover .cell-icon {
  opacity: 1;
  transform: scale(1.1);
}
/* Create New Image Styling */
.create-new-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.action-cell:hover .create-new-image {
  transform: scale(1.05);
  filter: brightness(1.1);
}
/* Load Plans Image Styling */
.load-plans-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: all 0.3s ease;
}

.action-cell:hover .load-plans-image {
  transform: scale(1.05);
  filter: brightness(1.1);
}
/* Featured Cells */
.featured-cell {
  border: 2px solid var(--color-primary);
  box-shadow: 0 0 20px var(--color-primary-light);
}

/* Template Cells */
.template-cell {
  position: relative;
}

.template-image-main,
.template-image-hover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
  transition: opacity 0.3s ease;
}

.template-image-hover {
  opacity: 0;
}

.template-cell:hover .template-image-hover {
  opacity: 1;
}

.placeholder-image {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 4rem;
  color: #444;
  background: #0a0a0a;
}

/* Template Controls - REMOVED (moved to info box) */
/*
.template-controls {
  position: absolute;
  bottom: 10px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 10px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 15;
}

.grid-cell:hover .template-controls {
  opacity: 1;
}

.info-btn,
.template-controls .youtube-btn {
  background: rgba(0, 0, 0, 0.9);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 5px 15px;
  font-size: 0.8rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: lowercase;
}

.info-btn:hover,
.template-controls .youtube-btn:hover {
  background: var(--color-primary);
  color: #000;
}
*/
/* Template bottom info bar */
.template-bottom-info {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.9);
  color: white;
  padding: 8px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid var(--color-primary);
  z-index: 15;
}

.template-name {
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--color-primary);
}

.template-price-display {
  font-size: 0.9rem;
  font-weight: bold;
  color: var(--color-success);
}

.template-bottom-controls {
  display: flex;
  gap: 5px;
}

.template-bottom-controls .info-btn,
.template-bottom-controls .youtube-btn {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 4px 8px;
  font-size: 0.7rem;
  border-radius: 3px;
  cursor: pointer;
  transition: all 0.2s ease;
}

.template-bottom-controls .info-btn:hover,
.template-bottom-controls .youtube-btn:hover {
  background: var(--color-primary);
  color: #000;
}
/* Template Price - REMOVED (moved to info box) */
/*
.template-price {
  position: absolute;
  bottom: 50px;
  left: 0;
  right: 0;
  text-align: center;
  color: white;
  font-size: 1.1rem;
  font-weight: bold;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
  z-index: 10;
}
*/

/* Grid Separator */
.grid-separator {
  grid-column: 1 / -1;
  display: flex;
  align-items: center;
  margin: 2rem 0;
  padding: 1rem 0;
}

.separator-line {
  flex: 1;
  height: 1px;
  background: #444;
}

.separator-text {
  padding: 0 2rem;
  color: var(--color-primary);
  font-size: 1.2rem;
  letter-spacing: 0.2em;
  font-weight: 300;
}

/* Template Item Wrapper */
.template-item-wrapper {
  display: flex;
  flex-direction: column;
  gap: 0;
  align-items: center;
}
/* Cell Info Box - New component for template information */
.cell-info-box {
  width: 100%;
  background: transparent;
  border: 0px solid #333;
  border-top: none;
  padding: 8px 10px;
  margin-top: 10px;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  min-height: 45px;
  box-sizing: border-box;
  flex-shrink: 0; /* Prevent info box from shrinking */
}
/* Info Text Section (left side) */
.info-text {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 2px;
  text-align: left;
  overflow: hidden;
  min-width: 0;
}

/* Template name */
.info-line-1 {
  color: var(--color-primary);
  font-size: 0.85rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Template price */
.info-line-2 {
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: bold;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.2;
}

/* Info Buttons Section (right side) */
.info-buttons {
  display: flex;
  flex-direction: column;
  gap: 4px;
  flex-shrink: 0;
  margin-left: 10px;
  justify-content: space-between;
}

/* Button styling */
.info-box-btn {
  background: rgba(0, 0, 0, 0.9);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 3px 10px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
  text-transform: lowercase;
  white-space: nowrap;
  min-width: 45px;
  height: 18px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

.info-box-btn:hover {
  background: var(--color-primary);
  color: #000;
}

/* Disabled YouTube button when no URL */
.info-box-btn.disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

/* YouTube button specific */
.info-box-btn.youtube-btn {
  font-size: 0.85rem;
}

/* Feature Button in Admin Controls */
.admin-btn.feature-btn {
  background: #6c757d;
  color: white;
  font-weight: bold;
}

.admin-btn.feature-btn.featured-a {
  background: #28a745;
}

.admin-btn.feature-btn.featured-b {
  background: #17a2b8;
}

.admin-btn.feature-btn:hover {
  background: #5a6268;
  transform: scale(1.1);
}

.admin-btn.feature-btn.featured-a:hover {
  background: #218838;
}

.admin-btn.feature-btn.featured-b:hover {
  background: #138496;
}

/* Feature Selection Modal */
.feature-selection-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1003;
  animation: fadeIn 0.3s ease;
}

.feature-selection-content {
  background: var(--color-bg-elevated);
  padding: 30px;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: slideIn 0.3s ease;
  border: 1px solid var(--color-primary-light);
}

.feature-selection-content h3 {
  margin: 0 0 15px 0;
  color: var(--color-primary);
}

.feature-selection-content p {
  color: var(--color-text-primary);
  margin-bottom: 25px;
}

.feature-options {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 20px;
}

.feature-option-btn {
  padding: 12px 20px;
  border: 2px solid #444;
  background: rgba(26, 26, 26, 0.8);
  color: var(--color-text-primary);
  border-radius: 6px;
  cursor: pointer;
  font-size: 1rem;
  font-weight: 500;
  transition: all 0.3s ease;
}

.feature-option-btn:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-lighter);
}

.feature-option-btn.active {
  background: var(--color-primary);
  color: #000;
  border-color: var(--color-primary);
}

/* Template Info Overlay */
.template-info-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  animation: fadeIn 0.3s ease;
}

.template-info-content {
  background: #2a2a2a;
  border: 2px solid var(--color-primary);
  border-radius: 10px;
  max-width: 1000px;
  width: 90%;
  max-height: 80vh;
  display: flex;
  overflow: hidden;
  animation: slideIn 0.3s ease;
}

.info-images {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 20px;
  background: #1a1a1a;
}

.info-images img {
  width: 100%;
  height: auto;
  border-radius: 5px;
  border: 1px solid #444;
}

.info-images .placeholder {
  width: 100%;
  aspect-ratio: 285/445;
  background: #333;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #666;
  border-radius: 5px;
}

.info-details {
  flex: 1;
  padding: 30px;
  color: white;
}

.info-details h2 {
  color: var(--color-primary);
  margin-bottom: 20px;
  font-size: 2rem;
}

.info-details .description {
  color: var(--color-text-primary);
  line-height: 1.6;
  margin-bottom: 20px;
}

.info-details .price {
  font-size: 1.5rem;
  color: var(--color-success);
  margin-bottom: 10px;
}

.info-details .sold-out {
  color: #ff0000;
  font-weight: bold;
  font-size: 1.2rem;
}

.info-actions {
  margin-top: 30px;
  display: flex;
  gap: 15px;
  flex-wrap: wrap;
}

/* Admin Options Modal */
.admin-options-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1004;
  animation: fadeIn 0.3s ease;
}

/* Quick Login Modal */
.admin-quick-login-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1004;
  animation: fadeIn 0.3s ease;
}

.admin-quick-login-content {
  background: #2a2a2a;
  border: 2px solid var(--color-primary);
  padding: 30px;
  border-radius: 12px;
  max-width: 300px;
  width: 90%;
  text-align: center;
  animation: slideIn 0.3s ease;
}

.admin-quick-login-content h3 {
  margin: 0 0 20px 0;
  color: var(--color-primary);
  font-size: 1.3rem;
}

.admin-quick-login-content input {
  width: 100%;
  padding: 10px;
  margin-bottom: 15px;
  background: #1a1a1a;
  border: 1px solid #444;
  color: white;
  border-radius: 6px;
  font-size: 1rem;
}

.admin-quick-login-content input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.admin-quick-login-content .btn {
  width: 100%;
  margin-bottom: 10px;
}

.admin-quick-login-content .btn:last-child {
  margin-bottom: 0;
}

/* Shake animation for wrong password */
.shake-error {
  animation: shake 0.5s ease;
  border-color: var(--color-danger) !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
  20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Discreet Notification */
.discreet-notification {
  position: fixed;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(212, 175, 55, 0.95);
  color: #000;
  padding: 12px 24px;
  border-radius: 25px;
  font-size: 0.9rem;
  font-weight: 500;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 1005;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

.discreet-notification.show {
  opacity: 1;
  transform: translateX(-50%) translateY(-10px);
}

.admin-options-content {
  background: #2a2a2a;
  border: 2px solid var(--color-primary);
  padding: 30px;
  border-radius: 12px;
  max-width: 400px;
  width: 90%;
  text-align: center;
  animation: slideIn 0.3s ease;
}

.admin-options-content h3 {
  margin: 0 0 15px 0;
  color: var(--color-primary);
  font-size: 1.5rem;
}

.admin-options-content p {
  color: var(--color-text-primary);
  margin-bottom: 25px;
}

.admin-options-buttons {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.admin-options-buttons .btn {
  width: 100%;
  padding: 12px;
  font-size: 1rem;
}

/* Ensure footer stays at bottom */
#landingView,
#plannerView {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#landingView .content-wrapper,
#plannerView .planner-content-wrapper {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 100vh;
}

#plannerView .planner-container {
  flex: 1;
}
/* Admin: Save as Default button (visual twin of Save as Template) */
.save-as-default-btn {
  border: 1px solid var(--color-primary);
  background: rgba(0,0,0,0.85);
  color: var(--color-primary);
  margin-right: 8px;
}
.save-as-default-btn:hover {
  background: var(--color-primary);
  color: #000;
  transform: translateY(-1px);
}

/* Planner-specific footer adjustments */
.planner-footer {
  margin-top: 2rem;
  position: relative;
  z-index: 2;
  background: var(--color-bg-surface);
  border-top: 1px solid var(--color-primary);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* ==========================================
   IMAGE GALLERY STYLES - DARK THEME
   ========================================== */
/* Ensure items become visible even if animations don't run */
.gallery-item-visible {
  opacity: 1 !important;
  transform: none !important;
  animation: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .gallery-item {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

.planner-main-content {
  display: grid;
  grid-template-columns: minmax(700px, 3fr) minmax(300px, 1fr);
  gap: 1.5rem;
  align-items: start;
}

/* For very wide screens, cap the gallery width */
@media (min-width: 1600px) {
  .planner-main-content {
    grid-template-columns: 1fr minmax(300px, 400px);
  }
}

.planner-left {
  min-width: 0;
}

.planner-right {
  position: sticky;
  top: 100px;
}
/* Sidebar placement – smaller card above the gallery */
.planner-right .template-video-container{
  max-width: none;
  margin: 0 0 1rem 0;
  border-radius: 8px;
}

/* Ensure 16:9 keeps working inside the narrow column */
.planner-right .template-video-wrapper{
  padding-bottom: 56.25%;
}

/* Let the iframe fade in when JS adds .loaded */
.template-video-iframe.loaded { opacity: 1; }

/* Image Gallery Container - Dark Theme */
.image-gallery {
  background: var(--color-bg-elevated);
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 6px rgba(0,0,0,0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: all 0.3s ease;
  display: block;
  animation: galleryFadeIn 0.5s ease;
}

@keyframes galleryFadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.image-gallery:hover {
  box-shadow: 0 6px 12px rgba(212, 175, 55, 0.2);
}

.gallery-title {
  margin: 0 0 1.25rem 0;
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 600;
  text-align: center;
  border-bottom: 2px solid var(--color-primary);
  padding-bottom: 0.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

/* Gallery Grid - Base */
.gallery-grid {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, 1fr); /* default; layout classes below will override */
  grid-auto-rows: minmax(90px, auto);
  max-height: calc(100vh - 300px);
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.25rem;
  position: relative;
  padding-top: 10px;         /* keep breathing room for hero hover */
  scroll-padding-top: 10px;
}

/* Grid handles sizing; explicit widths cause column issues */
.gallery-grid > .gallery-item:not(.gallery-item-hero) {
  margin: 0; /* let grid gap handle spacing */
}


/* Re-apply grid for wrapper if using one */
.gallery-items-wrapper {
  display: grid;
  gap: 0.75rem;
  grid-template-columns: repeat(3, 1fr);
  width: 100%;
}

/* Empty Gallery Grid */
.gallery-empty-grid {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 200px;
}

/* Dynamic Grid Layouts - Fixed to prevent overlap */
.gallery-single-image {
  grid-template-columns: 1fr;
  grid-auto-rows: minmax(200px, 1fr);
}

.gallery-single-image .gallery-item {
  max-width: 100%;
  aspect-ratio: 1;
  max-height: 350px;
}

.gallery-two-images {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(150px, auto);
}

.gallery-four-images {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(120px, auto);
}

.gallery-six-images {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: minmax(100px, auto);
}

.gallery-many-images {
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: minmax(90px, auto);
}

/* Gallery Empty Message */
.gallery-empty-message {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem 2rem;
  text-align: center;
  color: #666;
  height: 100%;
  min-height: 200px;
}

.empty-message-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
  color: var(--color-primary);
}

.empty-message-text {
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
  color: var(--color-text-muted);
}

.empty-message-hint {
  font-size: 0.9rem;
  opacity: 0.7;
  font-style: italic;
  color: #666;
}

/* Custom scrollbar - Dark Theme */
.gallery-grid::-webkit-scrollbar {
  width: 8px;
}

.gallery-grid::-webkit-scrollbar-track {
  background: rgba(26, 26, 26, 0.5);
  border-radius: 4px;
}

.gallery-grid::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 4px;
  opacity: 0.7;
}

.gallery-grid::-webkit-scrollbar-thumb:hover {
  background: var(--color-primary-dark);
  opacity: 1;
}

/* Gallery Items - Dark Theme */
.gallery-item {
  border-radius: 8px;
  overflow: hidden;
  cursor: pointer;
  transition: all 0.3s ease;
  position: relative;
  background: rgba(26, 26, 26, 0.5);
  animation: galleryItemAppear 0.4s ease forwards;
  opacity: 0;
  min-height: 0;
  min-width: 0;
}

/* Maintain aspect ratio for gallery items */
.gallery-item-inner {
  position: relative;
  width: 100%;
  height: 0;
  padding-bottom: 100%; /* 1:1 aspect ratio */
  overflow: hidden;
}

.gallery-item-inner img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@keyframes galleryItemAppear {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

/* GPU-Accelerated Gallery Item Animation */
@keyframes galleryItemAppear {
  from {
    opacity: 0;
    transform: translate3d(0, 10px, 0) scale(0.95);
  }
  to {
    opacity: 1;
    transform: translate3d(0, 0, 0) scale(1);
  }
}

/* Stagger animation for gallery items with CSS variables */
.gallery-item {
  animation: galleryItemAppear var(--anim-banner-fade) var(--anim-easing-out) forwards;
  will-change: transform, opacity;
}

.gallery-item:nth-child(1) { animation-delay: calc(var(--anim-gallery-stagger) * 0); }
.gallery-item:nth-child(2) { animation-delay: calc(var(--anim-gallery-stagger) * 1); }
.gallery-item:nth-child(3) { animation-delay: calc(var(--anim-gallery-stagger) * 2); }
.gallery-item:nth-child(4) { animation-delay: calc(var(--anim-gallery-stagger) * 3); }
.gallery-item:nth-child(5) { animation-delay: calc(var(--anim-gallery-stagger) * 4); }
.gallery-item:nth-child(6) { animation-delay: calc(var(--anim-gallery-stagger) * 5); }
.gallery-item:nth-child(n+7) { animation-delay: calc(var(--anim-gallery-stagger) * 6); }

.gallery-item.with-image {
  box-shadow: 0 2px 4px rgba(0,0,0,0.3);
  border: 1px solid transparent;
}

.gallery-item:hover {
  transform: translateY(-3px) scale(1.02);
  box-shadow: 0 6px 16px var(--color-primary-light);
  z-index: 10;
}

.gallery-item.with-image:hover {
  border-color: var(--color-primary);
}

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

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

/* Gallery Item Label */
.gallery-item-label {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.9), rgba(0,0,0,0.6) 60%, transparent 80%);
  color: var(--color-primary);
  padding: 1.5rem 0.5rem 0.5rem;
  font-size: 0.8rem;
  font-weight: 500;
  text-align: center;
  text-shadow: 0 1px 3px rgba(0,0,0,0.8);
  line-height: 1.2;
  opacity: 0;
  transition: all 0.3s ease;
  z-index: 2;
}

/* Show label on hover */
.gallery-item:hover .gallery-item-label {
  opacity: 1;
}

/* Parts without images count indicator */
.gallery-parts-without-images-count {
  grid-column: 1 / -1;
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(26, 26, 26, 0.5);
  border-radius: 6px;
  text-align: center;
  font-size: 0.85rem;
  color: var(--color-text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  border: 1px solid #444;
}

/* Render Guitar Button Section */
.render-guitar-section {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
  padding: 1rem;
  background: rgba(26, 26, 26, 0.8);
  border-radius: 8px;
  border: 1px solid #444;
  text-align: center;
  transition: all 0.3s ease;
}

.render-guitar-section.disabled {
  opacity: 0.7;
}

.render-guitar-btn {
  width: 100%;
  padding: 1rem 2rem;
  font-size: 1.1rem;
  font-weight: 600;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #000;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 0.5rem;
}
/* Refine toggle: smaller and styled like description fields.
   This selector outranks global .btn / .btn-primary. */
.render-guitar-section .refine-toggle-btn,
.render-guitar-section .refine-toggle-btn.btn.btn-primary {
  box-sizing: border-box;
  width: auto;                 /* not full width */
  padding: 0.35rem 0.75rem;    /* smaller height */
  font-size: 0.9rem;
  font-weight: 600;

  /* match description field look */
  background: #111;
  color: var(--color-text);
  border: 1px solid #555;
  border-radius: 6px;

  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.05s ease;

  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.5rem;    /* sits snug under the Render button */
}

.render-guitar-section .refine-toggle-btn:hover {
  background: #121212;
  border-color: #666;
}

.render-guitar-section .refine-toggle-btn:active {
  transform: translateY(1px);
}

.render-guitar-section .refine-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}

/* Smaller refine toggle, styled like part description fields */
.refine-toggle-btn {
  /* size */
  width: auto;                 /* no longer full width */
  padding: 0.35rem 0.75rem;    /* smaller height */
  font-size: 0.9rem;
  font-weight: 600;

  /* color to match description fields */
  background: #111;            /* same as textareas used in parts */
  color: var(--color-text);
  border: 1px solid #555;      /* same border as description fields */
  border-radius: 6px;

  /* behavior */
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.05s ease;

  /* layout */
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0.25rem 0 0.5rem;    /* a bit of breathing room under Render button */
}

.refine-toggle-btn:hover {
  background: #121212;
  border-color: #666;
}

.refine-toggle-btn:active {
  transform: translateY(1px);
}

.refine-toggle-btn:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.08);
}


/* Collapsible refine panel */
.refine-prompt-panel {
  border: 1px solid #444;
  border-radius: 8px;
  padding: 0.75rem;
  background: rgba(26, 26, 26, 0.75);
  margin: 0.25rem 0 0.5rem;
}

.refine-prompt-panel textarea {
  width: 100%;
  resize: vertical;
  min-height: 90px;
  border-radius: 6px;
  border: 1px solid #555;
  padding: 0.5rem;
  background: #111;
  color: var(--color-text);
}

.refine-file-hint {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-left: 0.5rem;
}

.render-guitar-btn:hover:not(:disabled) {
  background: linear-gradient(135deg, var(--color-primary-dark), #9c7a19);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(212, 175, 55, 0.4);
}

.render-guitar-btn:disabled {
  background: #666;
  color: var(--color-text-muted);
  cursor: not-allowed;
  transform: none;
}

.required-parts-status {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  margin-top: 0.5rem;
}

.required-parts-status.success {
  color: var(--color-success);
  font-weight: 500;
}

.count-icon {
  font-size: 1rem;
  opacity: 0.7;
  color: var(--color-primary);
}

/* Gallery Image Overlay */
.gallery-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.95);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1005;
  animation: fadeIn 0.3s ease;
  cursor: pointer;
  padding: 20px;
}

.gallery-overlay-content {
  max-width: 90%;
  max-height: 90%;
  position: relative;
  animation: zoomIn 0.3s ease;
}

.gallery-overlay img {
  max-width: 100%;
  max-height: 90vh;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 8px;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
  border: 2px solid var(--color-primary);
}

.gallery-overlay-close {
  position: absolute;
  top: -50px;
  right: 0;
  background: rgba(212, 175, 55, 0.2);
  backdrop-filter: blur(10px);
  border: 1px solid var(--color-primary);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  font-size: 28px;
  color: var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.gallery-overlay-close:hover {
  background: var(--color-primary);
  color: #000;
  transform: rotate(90deg);
}

.gallery-overlay-info {
  position: absolute;
  bottom: -60px;
  left: 0;
  right: 0;
  text-align: center;
  color: var(--color-primary);
  font-size: 1.1rem;
  font-weight: 500;
  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
}

@keyframes zoomIn {
  from {
    transform: scale(0.85);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

/* Generated Guitar Comparison View */
.generated-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.comparison-image {
  text-align: center;
  flex: 1;
  min-width: 250px;
}

.comparison-image h3 {
  margin: 0 0 15px 0;
  color: var(--color-primary);
  font-size: 1rem;
}

.comparison-image img {
  max-width: 100%;
  max-height: 400px;
  width: auto;
  height: auto;
  border: 2px solid #444;
  border-radius: 8px;
  background: #1a1a1a;
}

.comparison-arrow {
  font-size: 2rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .generated-comparison {
    flex-direction: column;
  }
  
  .comparison-arrow {
    transform: rotate(90deg);
    margin: 10px 0;
  }
  
  .comparison-image img {
    max-height: 250px;
  }
}

/* ==========================================
   PHASE 5: GALLERY HERO IMAGE STYLES
   ========================================== */

/* Hero-specific grid layouts */
.gallery-hero-only {
  grid-template-columns: 1fr;
}

.gallery-hero-only .gallery-item-hero {
  max-width: 500px;
  margin: 0 auto;
}

.gallery-hero-with-few {
  grid-template-columns: 1fr;
  grid-auto-rows: auto; /* Override any minmax constraints */
}

.gallery-hero-with-few .gallery-item-hero {
  grid-column: 1 / -1;
  max-width: 100%;
  margin-bottom: 1rem;
  grid-row: 1; /* Ensure hero is first row */
}

.gallery-hero-with-several {
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: auto; /* Override any minmax constraints */
}

.gallery-hero-with-several .gallery-item-hero {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
  grid-row: 1; /* Ensure hero is first row */
}

.gallery-hero-with-many {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
}

/* no width/flex hacks needed in grid */
.gallery-hero-with-many > .gallery-item:first-child { }


.gallery-hero-with-many .gallery-item-hero {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
  grid-row: 1; /* Ensure hero is first row */
}
/* Ensure regular items after hero maintain square aspect ratio */
.gallery-hero-with-few .gallery-item:not(.gallery-item-hero),
.gallery-hero-with-several .gallery-item:not(.gallery-item-hero),
.gallery-hero-with-many .gallery-item:not(.gallery-item-hero) {
  aspect-ratio: 1;
}
/* Hero Image Styling */
.gallery-item-hero {
  position: relative;            /* was: sticky */
  top: auto;                     /* was: 0 */
border: 3px solid var(--color-primary) !important;
  box-shadow: 0 5px 16px rgba(212, 175, 55, 0.5) !important;
  background: linear-gradient(135deg, var(--color-primary-lighter), rgba(184, 148, 31, 0.1));
  /* Force natural height */
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: visible !important;
  z-index: auto;                 /* was: 100 (this was causing overlap) */
  margin-bottom: 1rem;
}

/* HERO: show full image, no cropping */
.gallery-item-hero .gallery-item-inner {
  position: relative !important;
  width: 100% !important;
  height: auto !important;        /* natural height */
  padding-bottom: 0 !important;   /* kills the 1:1 square */
  overflow: visible !important;
}

.gallery-item-hero .gallery-item-inner.no-aspect img,
.gallery-item-hero img.gallery-hero-image {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}


/* Hero Badge */
.hero-badge {
  position: absolute;
  top: 10px;
  left: 10px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #000;
  padding: 6px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 6px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
  z-index: 3;
}

.hero-icon {
  font-size: 1rem;
}

.hero-text {
  font-size: 0.85rem;
  letter-spacing: 0.5px;
}

/* Hero Label */
.gallery-item-hero .hero-label {
  background: linear-gradient(to top, rgba(0,0,0,0.95), rgba(0,0,0,0.7) 60%, transparent 80%);
  padding: 2rem 0.5rem 0.75rem;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--color-primary);
  text-transform: uppercase;
  letter-spacing: 1px;
  opacity: 1; /* Always visible for hero */
}

/* HERO: keep natural aspect, never crop */
.gallery-item-hero img {
  position: relative !important;
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  object-position: center;
  display: block;
  background: #111; /* subtle letterbox behind transparent/letterboxed edges */
}

/* Ensure render button section works with hero */
.gallery-hero-only .render-guitar-section,
.gallery-hero-with-few .render-guitar-section,
.gallery-hero-with-several .render-guitar-section,
.gallery-hero-with-many .render-guitar-section {
  grid-column: 1 / -1;
  margin-bottom: 1rem;
}

/* Count indicator positioning with hero */
.gallery-hero-with-few .gallery-parts-without-images-count,
.gallery-hero-with-several .gallery-parts-without-images-count,
.gallery-hero-with-many .gallery-parts-without-images-count {
  grid-column: 1 / -1;
}

/* Compression Notification */
.compression-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--color-success);
  color: white;
  padding: 16px 20px;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(76, 175, 80, 0.3);
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.3s ease;
  z-index: 1001;
  max-width: 320px;
}

.compression-notification.show {
  opacity: 1;
  transform: translateY(0);
}

.compression-info {
  display: flex;
  align-items: center;
  gap: 12px;
}

.compression-icon {
  font-size: 1.5rem;
}

.compression-details {
  flex: 1;
}

.compression-title {
  font-weight: 600;
  margin-bottom: 4px;
}

.compression-stats {
  font-size: 0.85rem;
  opacity: 0.9;
}

/* Special styling for featured wrapper info boxes */
.featured-item-wrapper .cell-info-box {
  margin-top: 10;
}

/* Loading State */
.loading {
  text-align: center;
  padding: 4rem;
  color: #666;
  font-size: 1.1rem;
}
/* Offline mode indicator */
.offline-indicator {
  position: fixed;
  bottom: 20px;
  left: 20px;
  background: #6c757d;
  color: white;
  padding: 10px 20px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 10px;
  z-index: 1010;
  animation: slideInLeft 0.3s ease;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

@keyframes slideInLeft {
  from {
    transform: translateX(-100%);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.offline-indicator::before {
  content: '⚠️';
  font-size: 1.2rem;
}

/* Cached content indicator */
.cached-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(108, 117, 125, 0.9);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  font-weight: 600;
  z-index: 15;
}

.cached-indicator::before {
  content: '💾 ';
}

/* Slow network warning */
.slow-network-warning {
  background: rgba(255, 193, 7, 0.1);
  border: 1px solid rgba(255, 193, 7, 0.3);
  color: var(--color-warning);
  padding: 10px;
  margin: 10px 0;
  border-radius: 6px;
  text-align: center;
  font-size: 0.9rem;
}

.slow-network-warning::before {
  content: '🐌 ';
}

/* Retry button styling */
.retry-btn {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.3s ease;
  margin: 10px auto;
  display: inline-block;
}

.retry-btn:hover {
  background: var(--color-primary);
  color: #000;
  transform: translateY(-1px);
}

.retry-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.retry-btn.retrying::after {
  content: '';
  display: inline-block;
  width: 12px;
  height: 12px;
  margin-left: 8px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}

/* Ensure other views show the navbar */
.view:not(#landingView) ~ .navbar {
  display: block !important;
}

/* Hide navbar on landing and planner pages */
body:has(#landingView.active) #navbar,
body:has(#plannerView.active) #navbar {
  display: none !important;
}

/* Ensure navbar is visible on other pages */
body:has(#adminView.active) #navbar {
  display: block !important;
}

/* Loading State */
.loading {
  text-align: center;
  padding: 2rem;
  color: var(--color-text-primary);
}

/* ==========================================
   PLANNER VIEW - DARK THEME
   ========================================== */

/* Planner View Specific Background Fix */
#plannerView {
  position: relative;
  /* Override the scroll attachment to fixed for planner only */
  background-attachment: fixed !important;
}

/* Add fade to black overlay for planner view only */
#plannerView::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    transparent 40%, 
    rgba(0,0,0,0.2) 60%, 
    rgba(0,0,0,0.6) 80%, 
    rgba(0,0,0,0.9) 90%, 
    #000 100%);
  z-index: 0;
  pointer-events: none;
}



/* ==========================================
   TEMPLATE MEDIA SECTION - Banner & Video
   ========================================== */

/* Media Section Wrapper with Height Animation */
.template-media-section {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  z-index: 1;
  /* Height animation setup */
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height var(--anim-section-height) var(--anim-easing-in-out),
              opacity var(--anim-banner-fade) var(--anim-easing-out);
  will-change: max-height, opacity;
}

.template-media-section.active {
  max-height: 2000px; /* Large enough for content */
  opacity: 1;
}

/* Banner Container - 3:1 Aspect Ratio */
.template-banner-container {
  position: relative;
  /* max-width: 1500px; */  /* Removed to match parent container width */
  width: 100%;
  margin: 0 auto;
  overflow: hidden;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.2);
  background: #1a1a1a;
/* Maintain 10:1 aspect ratio */
padding-bottom: 10%;
min-height: 100px; /* safety so it never gets too tiny */

  /* GPU optimization */
  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}
/* Banner Loading State Animation */
.template-banner-container.loading {
  animation: containerPulse var(--anim-video-shimmer) var(--anim-easing-in-out) infinite;
}

@keyframes containerPulse {
  0%, 100% {
    opacity: 0.7;
  }
  50% {
    opacity: 1;
  }
}
/* Banner Image with Parallax and Ken Burns */
.template-banner-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
height: 100%; /* Static image fills the visible banner exactly */

  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  /* GPU-accelerated transforms */
transform: none;
  transition: opacity var(--anim-banner-fade) var(--anim-easing-out);
  opacity: 0;
}
/* Fallback banner with gradient background */
.template-banner-image.fallback {
  background: linear-gradient(135deg, 
    #1a1a1a 0%, 
    #2a2a2a 25%, 
    #1a1a1a 50%, 
    #0a0a0a 100%),
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 750"><rect fill="%23000" width="1500" height="750"/><path fill="%23111" d="M0 375L50 400L100 375L150 425L200 375L250 400L300 375L350 425L400 375L450 400L500 375L550 425L600 375L650 400L700 375L750 425L800 375L850 400L900 375L950 425L1000 375L1050 400L1100 375L1150 425L1200 375L1250 400L1300 375L1350 425L1400 375L1450 400L1500 375V750H0V375Z"/></svg>');
  background-size: cover, 100% 100%;
  background-blend-mode: overlay;
}

/* Error state banner */
.template-banner-image.error {
  background: linear-gradient(135deg, 
    var(--color-bg-elevated) 0%, 
    var(--color-bg-surface) 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: none;
}

.template-banner-image.error::after {
  content: '🎸';
  font-size: 4rem;
  opacity: 0.2;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.template-banner-image.loaded {
  opacity: 1;
}

/* Ken Burns Effect - Subtle zoom and pan */


/* Enhanced Skeleton Loader for Banner */
.template-banner-skeleton {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    rgba(42, 42, 42, 0.8) 0%, 
    rgba(42, 42, 42, 0.5) 20%, 
    rgba(42, 42, 42, 0.8) 40%, 
    rgba(42, 42, 42, 0.8) 100%);
  z-index: 1;
  overflow: hidden;
}

/* Timeout state for skeleton */
.template-banner-skeleton.timeout {
  background: var(--color-bg-elevated);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 1rem;
}

.template-banner-skeleton.timeout::after {
  content: 'Image loading slowly...';
  color: var(--color-text-muted);
  font-size: 0.9rem;
}

/* Skeleton with error state */
.template-banner-skeleton.error {
  background: var(--color-bg-elevated);
  border: 2px dashed #444;
}

.template-banner-skeleton.error .skeleton-shimmer {
  display: none;
}

.template-banner-image.loaded ~ .template-banner-skeleton {
  display: none;
}

.skeleton-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--color-primary-lighter) 50%, 
    transparent 100%);
  animation: shimmer 2s infinite;
}

@keyframes shimmer {
  0% {
    transform: translate3d(-100%, 0, 0);
  }
  100% {
    transform: translate3d(200%, 0, 0);
  }
}

.skeleton-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, 
    transparent 0%, 
    var(--color-primary-lighter) 50%, 
    transparent 100%);
  animation: shimmer var(--anim-video-shimmer) infinite;
  will-change: transform;
}

/* Banner Overlay for Better Text Readability (if needed) */
.template-banner-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    transparent 0%, 
    transparent 60%, 
    rgba(0, 0, 0, 0.3) 100%);
  pointer-events: none;
  z-index: 2;
}

/* Z-index layering for proper stacking */
.template-media-section {
  z-index: 1;
}

.planner-main-content {
  position: relative;
  z-index: 2;
  background: transparent;
}

/* Ensure toolbar stays above banner */
.toolbar {
  position: relative;
  z-index: 3;
}
/* ==========================================
   YOUTUBE VIDEO SECTION
   ========================================== */

/* Video Container */
.template-video-container {
  position: relative;
  width: 100%;
  max-width: 1500px;
  margin: 2rem auto;
  background: #1a1a1a;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid rgba(212, 175, 55, 0.2);
  transition: opacity 0.3s ease;
}

/* Video Wrapper - Maintains 16:9 Aspect Ratio */
.template-video-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  background: #000;
}

/* Video Placeholder */
.template-video-placeholder {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: linear-gradient(135deg, #1a1a1a 0%, #0a0a0a 100%);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.template-video-placeholder:hover {
  background: linear-gradient(135deg, #2a2a2a 0%, #1a1a1a 100%);
}

.template-video-placeholder:hover .video-play-button {
  transform: scale(1.1);
}



/* Video Loading Skeleton */
.video-loading-skeleton {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  z-index: 2;
  position: relative;
}

/* YouTube Play Button */
.video-play-button {
  width: 68px;
  height: 48px;
  transition: transform 0.3s ease;
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.5));
}

.video-placeholder-text {
  color: var(--color-text-primary);
  font-size: 0.9rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.8;
}

/* Video Thumbnail */
.video-thumbnail {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.7;
}

.template-video-placeholder:hover .video-thumbnail {
  opacity: 0.8;
}

/* YouTube Iframe */
.template-video-iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}
/* Video Facade for Performance */
.video-facade {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  cursor: pointer;
  background: #000;
}

.video-facade-thumbnail {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.video-facade-playbutton {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 68px;
  height: 48px;
  background: none;
  border: none;
  cursor: pointer;
  transition: transform 0.2s ease;
}

.video-facade:hover .video-facade-playbutton {
  transform: translate(-50%, -50%) scale(1.1);
}

.video-facade-playbutton svg {
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.7));
}

/* Video Loading State */
.video-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-primary);
}

.video-loading .loading-spinner {
  font-size: 2rem;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.video-loading .loading-text {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Banner Progressive Loading States */
.template-banner-image.placeholder-loaded {
  transition: filter 0.8s ease, transform 0.8s ease;
}

/* Skeleton Loading for Banner */
.banner-skeleton-loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    90deg,
    rgba(42, 42, 42, 0.8) 0%,
    rgba(42, 42, 42, 0.5) 20%,
    rgba(42, 42, 42, 0.8) 40%,
    rgba(42, 42, 42, 0.8) 100%
  );
  background-size: 200% 100%;
  animation: bannerShimmer 2s infinite;
}

@keyframes bannerShimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

/* Performance-optimized parallax */
.template-banner-image {
  will-change: auto; /* Only set to 'transform' when actively scrolling */
  backface-visibility: hidden;
  perspective: 1000px;
  transform-style: preserve-3d;
}
.template-video-iframe.loaded {
  opacity: 1;
}

/* Video Error State - Enhanced */
.template-video-error {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: var(--color-danger);
  padding: 2rem;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 8px;
  border: 1px solid rgba(220, 53, 69, 0.3);
  width: 90%;
  max-width: 400px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Video network error specific */
.template-video-error.network-error {
  color: var(--color-warning);
  border-color: rgba(255, 193, 7, 0.3);
}

.template-video-error.network-error .error-icon::before {
  content: '📡';
}

/* Video blocked/restricted */
.template-video-error.blocked {
  color: #6c757d;
  border-color: rgba(108, 117, 125, 0.3);
}

.template-video-error.blocked .error-icon::before {
  content: '🔒';
}

/* Fallback link styling */
.video-fallback-link {
  display: inline-block;
  margin-top: 1rem;
  padding: 0.5rem 1rem;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
  text-decoration: none;
  border-radius: 4px;
  transition: all 0.3s ease;
}

.video-fallback-link:hover {
  background: var(--color-primary);
  color: #000;
  transform: translateY(-2px);
}

.template-video-error .error-icon {
  font-size: 2rem;
  display: block;
  margin-bottom: 0.5rem;
}

.template-video-error .error-message {
  font-size: 1rem;
  color: var(--color-text-primary);
}
/* Ad blocker / content blocker detection */
.content-blocked-notice {
  background: rgba(255, 193, 7, 0.1);
  border: 2px solid rgba(255, 193, 7, 0.3);
  padding: 1rem;
  border-radius: 8px;
  text-align: center;
  margin: 1rem 0;
}

.content-blocked-notice .notice-icon {
  font-size: 2rem;
  margin-bottom: 0.5rem;
  display: block;
}

.content-blocked-notice .notice-title {
  color: var(--color-warning);
  font-weight: 600;
  margin-bottom: 0.5rem;
}

.content-blocked-notice .notice-message {
  color: var(--color-text-primary);
  font-size: 0.9rem;
  line-height: 1.4;
}

.content-blocked-notice .alternative-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--color-primary);
  text-decoration: underline;
}

.content-blocked-notice .alternative-link:hover {
  color: #fff;
}
/* Loading Animation */
@keyframes videoShimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.template-video-placeholder.loading {
  background: linear-gradient(
    90deg,
    rgba(42, 42, 42, 0.8) 0%,
    rgba(42, 42, 42, 0.5) 20%,
    rgba(42, 42, 42, 0.8) 40%,
    rgba(42, 42, 42, 0.8) 100%
  );
  background-size: 200% 100%;
  animation: videoShimmer var(--anim-video-shimmer) infinite;
  will-change: background-position;
}

@keyframes videoShimmer {
  0% {
    background-position: -100% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.template-video-placeholder.loading .video-loading-skeleton {
  opacity: 0.5;
}

/* Accessibility */
.template-video-container:focus-within {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Planner Container */
.planner-container {
 margin-top: 250px;
  max-width: 100%;
  width: 100%;
  background: var(--glass-bg);                   /* ← transparency control */
  backdrop-filter: blur(var(--glass-blur));      /* ← blur control */
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border-radius: 12px;
  padding: 2rem;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.8);
  border: 1px solid var(--glass-border);         /* ← border control */
  position: relative;
  z-index: 1;
}

/* Override container width for planner view */
#plannerView .container {
  max-width: calc(100% - 40px);
  width: 80%;
}

/* Editable Build Title */
.editable-title {
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  transition: all 0.2s ease;
  position: relative;
  display: inline-block;
}

.editable-title:hover {
  background-color: var(--color-primary-lighter);
  transform: scale(1.02);
}

.editable-title:hover::after {
  content: '✏️';
  position: absolute;
  right: -30px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 0.8em;
  opacity: 0.7;
}

.inline-edit-title-input:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--color-primary-light) !important;
}

/* Enhanced toolbar with dark theme */
.toolbar {
  background: var(--color-bg-elevated);
  padding: 1rem;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: center;
  margin-bottom: 2rem;
  border: 1px solid rgba(212, 175, 55, 0.2);
  width: 100%;
}

.toolbar #backBtn {
  grid-column: 1;
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.toolbar #backBtn:hover {
  background: var(--color-primary);
  color: #000;
}

.toolbar #buildTitle {
  grid-column: 2;
  text-align: center;
  margin: 0;
  color: var(--color-primary);
  text-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
  font-size: clamp(1.4rem, 2.4vw, 3rem);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  /* One line only: JS shrinks the font first, ellipsis is the last resort */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

.toolbar > div {
  grid-column: 3;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.toolbar .save-build-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #000;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.toolbar .save-build-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark), #9c7a19);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px var(--color-primary-light);
}
.toolbar .build-book-btn {
  background: linear-gradient(135deg, #6B4C2A, #4a3520);
  color: #f5e6c8;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.toolbar .build-book-btn:hover {
  background: linear-gradient(135deg, #7d5a32, #6B4C2A);
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(107, 76, 42, 0.4);
  color: #fff;
}

/* ==========================================
   TOOLBAR EXPORT DROPDOWN
   ========================================== */
.export-menu {
  position: relative;
  display: inline-block;
}

.toolbar .export-menu-btn {
  background: linear-gradient(135deg, #6B4C2A, #4a3520);
  color: #f5e6c8;
  border: none;
  padding: 0.75rem 1.5rem;
  font-size: 1rem;
  font-weight: 600;
  transition: all 0.3s ease;
}

.toolbar .export-menu-btn:hover,
.toolbar .export-menu-btn[aria-expanded="true"] {
  background: linear-gradient(135deg, #7d5a32, #6B4C2A);
  color: #fff;
  box-shadow: 0 5px 15px rgba(107, 76, 42, 0.4);
}

.export-menu-list {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: var(--color-bg-elevated);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  padding: 0.35rem;
  z-index: 50;
}

.export-menu-list.open { display: block; }

.export-menu-item {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: none;
  border-radius: 6px;
  color: var(--color-text-primary);
  font-size: 0.95rem;
  padding: 0.6rem 0.75rem;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}

.export-menu-item:hover {
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-primary);
}

.export-menu-item:disabled {
  opacity: 0.6;
  cursor: default;
}

/* ==========================================
   CURRENCY ROW (moved into the totals panel)
   ========================================== */
.totals-currency-row {
  align-items: center;
  padding-bottom: 0.75rem;
  margin-bottom: 0.25rem;
}

.totals-currency-row label {
  color: var(--color-text-secondary, #aaa);
  font-size: 0.9rem;
}
/* Unsaved changes indicator */
.toolbar .save-build-btn.has-changes::after {
  content: '•';
  position: absolute;
  top: 0;
  right: 0;
  color: #ff6b35;
  font-size: 2rem;
  line-height: 0.5;
}

.toolbar label {
  color: var(--color-text-primary);
}

.currency-select {
  /* Remove native glossy look across browsers */
  -webkit-appearance: none;
  appearance: none;

  /* Size & padding (extra right space for the arrow) */
  width: 70px;
  padding: 0.5rem 1.7rem 0.5rem 0.5rem;

  /* App theme */
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 0.9rem;
  background: var(--color-bg-elevated);
  color: var(--color-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  /* Custom dropdown arrow (gold) */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'>\
<path d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 10px 10px;
}

.currency-select:hover {
  border-color: #777;
}

.currency-select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}


.currency-select:focus {
  outline: none;
  border-color: var(--color-primary);
}
/* Currency toggle buttons */
.currency-buttons {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  flex-wrap: wrap;
}

.currency-btn {
  appearance: none;
  border: 1px solid var(--color-primary);
  background: rgba(42,42,42,0.9);
  color: var(--color-primary);
  padding: 6px 10px;
  border-radius: 999px;
  font-size: 0.85rem;
  line-height: 1;
  cursor: pointer;
  transition: all 0.2s ease;
}

.currency-btn:hover {
  background: var(--color-primary);
  color: #000;
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(212,175,55,0.3);
}
/* Pending parts (from templates) */
.pending-parts-btn { position: relative; }
.pending-parts-btn .badge {
  background: var(--color-primary);
  color: #111;
  border-radius: 999px;
  padding: 2px 8px;
  font-weight: 700;
  min-width: 1.5em;
  display: inline-block;
  text-align: center;
  margin-left: 6px;
}

.pending-parts-section {
  background: rgba(26,26,26,0.95);
  border: 1px solid rgba(212,175,55,0.25);
  border-radius: 10px;
  padding: 12px;
  margin: 10px 0 14px 0;
}

.pending-parts-header {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 8px;
}
.pending-parts-list { display: flex; flex-direction: column; gap: 8px; }

.pending-parts-item {
  display: grid;
  grid-template-columns: 50px 1fr auto;
  gap: 10px;
  align-items: center;
  border-bottom: 1px dashed rgba(212,175,55,0.2);
  padding: 8px 0;
}
.pending-parts-item:last-child { border-bottom: none; }

.pending-thumb {
  width: 50px; height: 50px; object-fit: cover; border-radius: 6px;
  background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1);
}

.pending-title { font-weight: 600; color: #eee; }
.pending-sub { font-size: 0.85rem; color: #bbb; }

.pending-actions .btn { margin-left: 6px; }

.copy-to-build-btn {
  background: rgba(212,175,55,0.12);
  border: 1px solid rgba(212,175,55,0.38);
  color: #e7d79b;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  margin-right: .5rem;
}
.copy-to-build-btn:hover { background: rgba(212,175,55,0.2); }

.currency-btn.active {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #000;
  box-shadow: 0 2px 8px rgba(212,175,55,0.35);
  border-color: transparent;
}

.currency-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Parts Container */
.parts-container {
  background: var(--color-bg-elevated);
  border-radius: 8px;
  padding: 1.5rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  min-height: 400px;
  position: relative;
  border: 1px solid rgba(212, 175, 55, 0.2);
  width: 100%;
  z-index: 1;
}

/* Enhanced Parts Group System - Dark Theme */
.part-group {
  margin-bottom: 1rem;
  border: 1px solid #444;
  border-radius: 8px;
  overflow: hidden;
  background: var(--color-bg-surface);
  transition: all 0.3s ease;
  cursor: move;
  position: relative;
}

.part-group.custom-group {
  border-color: #444;
}

.part-group.dragging {
  opacity: 0.4;
  transform: scale(0.95);
}

.group-header {
  padding: 1rem;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  display: flex;
  justify-content: space-between;
  align-items: center;
  transition: background 0.3s ease;
}

.part-group.custom-group .group-header {
  background: linear-gradient(135deg, #ff6b35, #f7931e);
}
/* Conditional groups - more subdued styling */
.part-group.conditional-group {
  border-color: #666;
  opacity: 0.85;
}

.part-group.conditional-group .group-header {
  background: linear-gradient(135deg, #4a3a2a, #2a1a0a);  /* Bronze/brown */
  font-style: italic;
}

.part-group.conditional-group .group-header:hover {
  background: linear-gradient(135deg, #5a4a3a, #3a2a1a);
}

.part-group.conditional-group .group-content {
  background: rgba(30, 30, 30, 0.5);
}

.part-group.conditional-group.collapsed {
  opacity: 0.7;
}

.group-header:hover {
  filter: brightness(1.1);
}

.group-header-left {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.drag-handle {
  cursor: grab;
  font-size: 1.2rem;
  opacity: 0.6;
  transition: opacity 0.2s ease;
  user-select: none;
}

.drag-handle:hover {
  opacity: 1;
}

.dragging .drag-handle {
  cursor: grabbing;
}

.group-toggle {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
}

.group-header.collapsed .group-toggle {
  transform: rotate(-90deg);
}

.group-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.group-total {
  font-weight: bold;
  font-size: 1rem;
}

.delete-group-btn {
  background: rgba(255,255,255,0.2);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
  padding: 0.25rem 0.75rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  transition: all 0.2s ease;
}

.delete-group-btn:hover {
  background: rgba(220, 53, 69, 0.8);
  border-color: rgba(220, 53, 69, 0.9);
}

.group-content {
  padding: 0.75rem;
  background: rgba(42, 42, 42, 0.5);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  min-height: 60px;
  position: relative;
  transition: all 0.3s ease;
}

.group-content.drag-over {
  background: var(--color-primary-lighter);
  box-shadow: inset 0 0 0 2px var(--color-primary);
  padding: 1rem;
}

.part-group.collapsed .group-content {
  display: none;
}

.empty-group {
  color: #666;
  font-style: italic;
  padding: 2rem;
  text-align: center;
  background: rgba(26, 26, 26, 0.5);
  border-radius: 5px;
  border: 2px dashed #444;
  transition: all 0.3s ease;
}

.group-content.drag-over .empty-group {
  border-color: var(--color-primary);
  background: rgba(212, 175, 55, 0.05);
}

/* Part Component - Dark Theme */
.part {
  background: var(--color-bg-surface);
  border: 1px solid #444;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: move;
  position: relative;
  margin-bottom: 1rem;
}
/* Purchased state: single clear cue = green glow/border */
.part.purchased {
  border-color: #2ecc71 !important;
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.25), 0 8px 24px rgba(46, 204, 113, 0.15);
}

/* Purchased toggle button */
.mark-purchased-btn {
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: #b6f2cc;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
  margin-right: 0.5rem;
}
.mark-purchased-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 10px rgba(46, 204, 113, 0.2);
}
.part.purchased .mark-purchased-btn {
  background: linear-gradient(135deg, #2ecc71, #1e8449);
  color: #0d2217;
  border-color: #1e8449;
  font-weight: 700;
}

.part-in-group {
  background: var(--color-bg-surface);
  margin: 0;
}

.part.expanded {
  box-shadow: 0 2px 10px rgba(212, 175, 55, 0.2);
  border-color: var(--color-primary);
}

.part.dragging {
  opacity: 0.4;
  transform: scale(0.95) rotate(2deg);
}

.part-header {
  padding: 1rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  background: rgba(42, 42, 42, 0.5);
  transition: background 0.2s ease;
}

.part-header:hover {
  background: rgba(212, 175, 55, 0.05);
}

.part-header .drag-handle {
  color: #666;
  margin-right: 0.5rem;
  cursor: grab;
}

.part.dragging .part-header .drag-handle {
  cursor: grabbing;
}

.part-name {
  font-weight: 500;
  color: var(--color-primary);
  flex: 0 0 auto;
  margin-right: auto;
}

.part-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.part-total {
  font-weight: bold;
  color: var(--color-success);
  min-width: 80px;
  text-align: right;
}

/* Guitar Anatomy affiliate discount - totals row */
.ga-discount-row { color: var(--color-success); }
.ga-discount-row .ga-discount-value { font-weight: 600; }

/* Guitar Anatomy affiliate discount - per-part header */
.part-total.has-ga-discount {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  justify-content: flex-end;
}
.part-total .part-total-original {
  color: var(--color-text-muted);
  text-decoration: line-through;
  font-weight: 400;
  font-size: 0.85em;
}
.part-total .part-total-discounted {
  color: var(--color-success);
  font-weight: bold;
}
.part-total .ga-discount-tag {
  color: var(--color-primary);
  background: rgba(212, 175, 55, 0.15);
  border-radius: 4px;
  padding: 1px 5px;
  font-size: 0.7em;
  font-weight: 700;
  white-space: nowrap;
}

.delete-btn {
  background: rgba(212, 175, 55, 0.2);  /* Semi-transparent gold */
  color: var(--color-primary);  /* Gold text */
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: background 0.2s ease;
}

.delete-btn:hover {
  background: var(--color-primary);  /* Solid gold on hover */
  color: #000;  /* Black text on hover */
}

/* Duplicate Button Styling */
.duplicate-btn {
  background: rgba(255,255,255,0.2);
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 0.5rem;
}

.duplicate-btn:hover {
  background: #17a2b8;
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
}

.duplicate-btn:active {
  transform: translateY(0);
  background: #138496;
}

/* Editable Names Styling - Dark Theme */
.group-name, .part-name {
  cursor: pointer;
  padding: 2px 4px;
  border-radius: 3px;
  transition: all 0.2s ease;
  user-select: none;
  position: relative;
}

.group-name:hover {
  background-color: rgba(255, 255, 255, 0.2);
  text-decoration: underline;
  transform: scale(1.02);
}

.part-name:hover {
  background-color: var(--color-primary-lighter);
  text-decoration: underline;
  transform: scale(1.02);
}

/* Inline edit input styling */
.inline-edit-input {
  font-family: inherit;
  z-index: 10;
  position: relative;
}

.inline-edit-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px var(--color-primary-light);
}

/* Part Body - Dark Theme */
.part-body {
  padding: 1rem;
  background: rgba(42, 42, 42, 0.5);
  border-top: 1px solid #333;
}

.part-content {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}

.part-fields {
  flex: 1;
  min-width: 0;
}

.part-image-section {
  flex-shrink: 0;
  width: 220px;
  display: flex;
  flex-direction: column;
}

.part-image-section label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-primary);
  font-size: 0.9rem;
  text-align: center;
}

/* BEFORE YOU BUY CHECK LIST SECTION - Enhanced Dark Theme */
.reminders-section {
  margin-bottom: 1rem;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  background: rgba(42, 42, 42, 0.2);
  transition: all 0.5s ease;
  position: relative;
  overflow: hidden;
}

.reminders-section::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(45deg, 
    rgba(212, 175, 55, 0.05) 0%, 
    transparent 50%, 
    rgba(212, 175, 55, 0.05) 100%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.reminders-section.expanded::before {
  opacity: 1;
}

.reminders-section.all-checked {
  border-color: var(--color-success);
  background: rgba(76, 175, 80, 0.1);
}

.reminders-section.completion-animation {
  animation: completionPulse 1s ease;
}

@keyframes completionPulse {
  0% {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 0 rgba(212, 175, 55, 0.7);
  }
  50% {
    border-color: var(--color-success);
    box-shadow: 0 0 20px 10px rgba(76, 175, 80, 0.3);
  }
  100% {
    border-color: var(--color-success);
    box-shadow: 0 0 0 0 rgba(76, 175, 80, 0);
  }
}

.reminders-header {
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, var(--color-primary-light), rgba(184, 148, 31, 0.3));
  border-bottom: 2px solid var(--color-primary);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  user-select: none;
  color: var(--color-primary);
  font-weight: 500;
}

.reminders-section.all-checked .reminders-header {
  background: linear-gradient(135deg, rgba(76, 175, 80, 0.3), rgba(56, 142, 60, 0.3));
  border-bottom-color: var(--color-success);
  color: var(--color-success);
}

.reminders-header:hover {
  background: linear-gradient(135deg, rgba(212, 175, 55, 0.4), rgba(184, 148, 31, 0.4));
}

.reminders-icon {
  font-size: 1.1rem;
  margin-right: 0.5rem;
}

.reminders-label {
  font-weight: 600;
  font-size: 0.95rem;
  flex: 1;
  letter-spacing: 0.5px;
}

.reminders-toggle-icon {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  margin-left: auto;
}

.all-checked-badge {
  background: var(--color-success);
  color: white;
  padding: 2px 8px;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: bold;
  margin-left: 10px;
  animation: badgeAppear 0.5s ease;
}

@keyframes badgeAppear {
  from {
    transform: scale(0);
    opacity: 0;
  }
  to {
    transform: scale(1);
    opacity: 1;
  }
}

.reminders-content {
  padding: 1rem;
  background: rgba(26, 26, 26, 0.5);
  animation: slideDown 0.3s ease;
}

.checklist-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.reminder-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background: rgba(42, 42, 42, 0.5);
  border: 1px solid #444;
  border-radius: 6px;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.reminder-item.checked {
  background: rgba(76, 175, 80, 0.1);
  border-color: var(--color-success);
}

.reminder-item.checking-animation {
  animation: checkItem 0.6s ease;
}

@keyframes checkItem {
  0% {
    transform: translateX(0);
    background: rgba(42, 42, 42, 0.5);
  }
  25% {
    transform: translateX(-5px);
  }
  50% {
    transform: translateX(5px);
    background: rgba(76, 175, 80, 0.2);
  }
  75% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
    background: rgba(76, 175, 80, 0.1);
  }
}

.checklist-circle {
  width: 24px;
  height: 24px;
  border: 2px solid var(--color-primary);
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
  background: rgba(26, 26, 26, 0.8);
  position: relative;
}

.checklist-circle:hover {
  background: rgba(212, 175, 55, 0.2);
  transform: scale(1.1);
}

.checklist-circle.checked {
  background: var(--color-success);
  border-color: var(--color-success);
  animation: checkCircle 0.4s ease;
}

@keyframes checkCircle {
  0% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.3);
  }
  100% {
    transform: scale(1);
  }
}

.checkmark {
  color: white;
  font-weight: bold;
  font-size: 0.9rem;
  animation: checkmarkAppear 0.3s ease;
}

@keyframes checkmarkAppear {
  from {
    opacity: 0;
    transform: scale(0) rotate(-180deg);
  }
  to {
    opacity: 1;
    transform: scale(1) rotate(0);
  }
}

.reminder-text {
  flex: 1;
  color: var(--color-text-primary);
  line-height: 1.5;
  padding-top: 2px;
}

.reminder-item.checked .reminder-text {
  color: var(--color-success);
  position: relative;
}

.reminder-item.checked .reminder-text::after {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  height: 1px;
  background: rgba(76, 175, 80, 0.3);
  transform: scaleX(0);
  transform-origin: left;
  animation: strikethrough 0.3s ease 0.2s forwards;
}

@keyframes strikethrough {
  to {
    transform: scaleX(1);
  }
}

.reminder-item.no-reminders {
  justify-content: center;
  color: #666;
  font-style: italic;
}

.checklist-progress {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #444;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.progress-text {
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

.reset-checklist-btn {
  background: rgba(220, 53, 69, 0.2);
  border: 1px solid var(--color-danger);
  color: var(--color-danger);
  padding: 4px 12px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: all 0.2s ease;
}

.reset-checklist-btn:hover {
  background: var(--color-danger);
  color: white;
  transform: translateY(-1px);
}

/* Admin edit mode adjustments */
.checklist-items.admin-edit .reminder-item {
  background: rgba(212, 175, 55, 0.05);
  border: 1px dashed var(--color-primary);
}

.checklist-items.admin-edit .checklist-circle {
  opacity: 0.5;
  pointer-events: none;
}

.reminder-edit-input {
  flex: 1;
  padding: 0.4rem;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  background: rgba(42, 42, 42, 0.8);
  color: var(--color-text-primary);
  margin-right: 8px;
}

.reminder-edit-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.delete-reminder-btn {
  background: var(--color-danger);
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  transition: all 0.2s ease;
}

.delete-reminder-btn:hover {
  background: #c82333;
  transform: scale(1.1);
}

.add-reminder-btn {
  width: 100%;
  padding: 0.5rem;
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #000;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 0.75rem;
  transition: all 0.2s ease;
}

.add-reminder-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark), #9c7a19);
  transform: translateY(-1px);
}

/* SPECIFICATIONS / DESCRIPTION PANEL – Dark Green Theme */
.specifications-section {
  margin-bottom: 1rem;
  border: 1px solid #1e6b52;               /* dark green border */
  border-radius: 6px;
  background: rgba(14, 54, 43, 0.28);       /* discreet green tint */
  transition: all 0.3s ease;
}

.specifications-section.expanded {
  border-color: #1e6b52;
  box-shadow: 0 2px 8px rgba(30, 107, 82, 0.15);
}

.specifications-header {
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(30, 107, 82, 0.25), rgba(14, 54, 43, 0.25));
  border-bottom: 1px solid #1e6b52;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: all 0.3s ease;
  user-select: none;
  color: var(--color-primary);                           /* gold accent to match gallery main image vibe */
}

.specifications-header:hover {
  background: linear-gradient(135deg, rgba(30, 107, 82, 0.35), rgba(14, 54, 43, 0.35));
}

.specifications-section.expanded .specifications-header {
  background: linear-gradient(135deg, #1e6b52, #0e362b);
  color: var(--color-primary);
  border-bottom-color: #1e6b52;
}

.specifications-section.expanded .specifications-header:hover {
  background: linear-gradient(135deg, #195b45, #0c2e26);
}


.specs-icon {
  font-size: 1rem;
  margin-right: 0.5rem;
}

.specs-label {
  font-weight: 500;
  font-size: 0.95rem;
  flex: 1;
}

.specs-toggle-icon {
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  margin-left: auto;
}

.specifications-content {
  padding: 1rem;
  background: rgba(26, 26, 26, 0.5);
  border-top: 1px solid #444;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
  animation: slideDown 0.3s ease;
}
/* Make Description occupy the full width of the grid */
.specifications-content .description-field {
  grid-column: 1 / -1;
}
/* Admin textarea should behave like the Notes textarea */
.description-textarea {
  width: 100%;
  display: block;
  box-sizing: border-box;
  min-height: 140px;           /* similar to notes feel */
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.95rem;
  background: rgba(42, 42, 42, 0.8);  /* same family as other inputs */
  color: var(--color-text-primary);
}

/* Read-only user text block (keeps good spacing) */
.description-text {
  width: 100%;
  display: block;
  box-sizing: border-box;
  padding: 0.25rem 0;
  line-height: 1.5;
}

/* Per-part specifications admin controls */
.spec-input-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.delete-spec-btn {
  background: transparent;
  border: none;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  color: #bbb;
  padding: 0 6px;
  border-radius: 4px;
}
.delete-spec-btn:hover {
  color: #ff6b6b;
  background: rgba(220,53,69,0.15);
}
.spec-actions {
  grid-column: 1 / -1;
}
.add-spec-btn {
  width: 100%;
  padding: 0.5rem;
  border: 1px dashed #007bff;
  background: rgba(0,123,255,0.08);
  color: #cfe2ff;
  border-radius: 6px;
  cursor: pointer;
  font-weight: 600;
}
.add-spec-btn:hover {
  background: rgba(0,123,255,0.16);
}

@keyframes slideDown {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.spec-field {
  display: flex;
  flex-direction: column;
}

.spec-field label {
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--color-primary);
  margin-bottom: 0.25rem;
}

.spec-field input {
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  background: rgba(42, 42, 42, 0.8);
  color: var(--color-text-primary);
}

.spec-field input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 0 0 0 2px rgba(0, 123, 255, 0.1);
}

.spec-field input::placeholder {
  color: #666;
  font-style: italic;
}

/* Image Upload Area - Dark Theme */
.image-upload-area {
  border: 2px dashed #444;
  border-radius: 8px;
  padding: 15px;
  text-align: center;
  background: rgba(26, 26, 26, 0.5);
  cursor: pointer;
  transition: all 0.3s ease;
  margin-bottom: 8px;
  height: 180px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  overflow: hidden;
}

.image-upload-area:hover {
  border-color: var(--color-primary);
  background: rgba(212, 175, 55, 0.05);
  transform: translateY(-1px);
}

.image-upload-area.drag-over {
  border-color: #28a745;
  background: rgba(40, 167, 69, 0.1);
  transform: scale(1.02);
  border-style: solid;
}

.upload-icon {
  font-size: 3rem;
  margin-bottom: 8px;
  opacity: 0.6;
  color: var(--color-primary);
}

.upload-text {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  line-height: 1.3;
  font-weight: 500;
}

/* Image Preview */
.image-preview {
  width: 100%;
  height: 180px;
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  object-fit: cover;
  margin-bottom: 8px;
  background: #1a1a1a;
}
/* Wrapper for preview + corner remove */
.part-image-wrapper {
  position: relative;
  display: block;
}

.image-remove-x {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4);
  background: rgba(0,0,0,0.45);
  color: #fff;
  font-size: 14px;
  line-height: 18px;
  text-align: center;
  cursor: pointer;
  opacity: 0.85;
  display: none; /* shown when image present */
  transition: transform 0.15s ease, background 0.15s ease, opacity 0.15s ease;
}

.part-image-wrapper:hover .image-remove-x {
  opacity: 1;
}

.image-remove-x:hover {
  transform: scale(1.05);
  background: rgba(0,0,0,0.6);
}

/* Fully hide legacy remove button if it exists in DOM */
.remove-image-btn { display: none !important; }

.image-preview:hover {
  transform: scale(1.02);
  box-shadow: 0 4px 12px var(--color-primary-light);
}

/* Remove Image Button */
.remove-image-btn {
  width: 100%;
  padding: 8px;
  background: var(--color-danger);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.remove-image-btn:hover {
  background: #c82333;
  transform: translateY(-1px);
}

/* Admin Part Controls */
.admin-part-controls {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #333;
}

.admin-part-controls label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-primary);
  font-size: 0.9rem;
  text-align: center;
}

.part-youtube-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.part-youtube-input {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.85rem;
  background: rgba(42, 42, 42, 0.8);
  color: var(--color-text-primary);
}

.part-youtube-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.part-youtube-btn {
  background: #ff0000;
  color: white;
  border: none;
  padding: 0.5rem 1rem;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.25rem;
}

.part-youtube-btn:hover {
  background: #cc0000;
  transform: translateY(-1px);
}

.user-youtube-btn {
  width: 100%;
  margin-top: 1rem;
}
/* Hide the legacy user watch button (we use the thumbnail instead) */
.user-youtube-btn { display: none !important; }

/* Per-part video thumbnail — matches the part image WIDTH */
.part-video-thumb {
  display: block;
  width: 100%;
  position: relative;
  aspect-ratio: 16 / 9;      /* height derives from width */
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  overflow: hidden;
  background: #000;
  cursor: pointer;
  margin-top: 8px;
}
.part-video-thumb-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.play-badge {
  position: absolute;
  right: 8px;
  bottom: 8px;
  background: rgba(0,0,0,0.6);
  color: #fff;
  padding: 4px 8px;
  border-radius: 6px;
  font-size: 12px;
  pointer-events: none;
}
.field-hint {
  color: var(--color-text-muted);
  font-size: .8rem;
  text-align: center;
}

/* Modal for larger (not fullscreen) playback */
.part-video-modal {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2000;
}
.part-video-dialog {
  position: relative;
  width: min(900px, 90vw);
  background: rgba(26,26,26,0.95);
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 12px;
  box-shadow: 0 20px 40px rgba(0,0,0,0.7);
}
.part-video-aspect {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
}
.part-video-aspect .part-video-iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
/* ---- Video titles & actions ---- */
.main-video-title {
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.95rem;
  margin: 4px 0 6px 2px;
}

.main-video-title-input,
.extra-video-title-input {
  width: 100%;
  padding: 0.45rem 0.5rem;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 0.9rem;
  background: rgba(42, 42, 42, 0.8);
  color: #ddd;
  margin: 6px 0 6px 0;
}
.main-video-title-input:focus,
.extra-video-title-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.video-inline-actions {
  display: flex;
  gap: 8px;
  margin-top: 6px;
}

.extra-video-add-inline {
  background: rgba(212, 175, 55, 0.15);
  color: var(--color-primary);
  border: 1px solid var(--color-primary);
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
}
.extra-video-add-inline:hover {
  background: var(--color-primary);
  color: #000;
}

.main-video-remove-btn,
.extra-video-remove-btn {
  background: #631e1e;
  color: #fff;
  border: 1px solid #8b2a2a;
  padding: 0.45rem 0.7rem;
  border-radius: 6px;
  cursor: pointer;
  font-size: 0.85rem;
  align-self: center;
}
.main-video-remove-btn:hover,
.extra-video-remove-btn:hover {
  background: #8b2a2a;
}

.extra-video-block { margin-top: 10px; }
.extra-video-title { /* user-visible label for extras */
  color: var(--color-primary);
  font-weight: 600;
  font-size: 0.9rem;
  margin: 4px 0 6px 2px;
}
.extra-video-title-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
  align-items: center;
}

.part-video-thumb.extra { margin-top: 6px; }

.part-video-close {
  position: absolute;
  top: -14px;
  right: -14px;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--color-primary);
  color: #000;
  font-size: 20px;
  cursor: pointer;
}
@media (max-width: 768px) {
  .part-video-dialog { width: 95vw; }
}

/* Save as Template Button */
.save-as-template-btn {
  background: linear-gradient(135deg, #28a745, #20c997) !important;
  color: white;
  border: none;
  font-weight: 500;
}

.save-as-template-btn:hover {
  background: linear-gradient(135deg, #218838, #1e7e34) !important;
  transform: translateY(-1px);
}

/* URL Input Row */
.url-input-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
  margin-bottom: 8px;
}

.url-input-row .input-url {
  flex: 1;
  margin-bottom: 0;
}

.open-url-btn {
  background: linear-gradient(135deg, #28a745, #218838);
  color: white;
  border: none;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 0.8rem;
  cursor: pointer;
  white-space: nowrap;
  font-weight: bold;
  transition: all 0.2s ease;
}

.open-url-btn:hover {
  background: linear-gradient(135deg, #218838, #1e7e34);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(40, 167, 69, 0.3);
}

/* ── Affiliate disclosure (discreet) ───────────────────────── */
.affiliate-wrap { margin: -2px 0 8px; }

.affiliate-note {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.72rem;
  line-height: 1.2;
  color: #9a9a9a;
  cursor: help;
}
.affiliate-note-label { letter-spacing: 0.2px; transition: color 0.15s ease; }
.affiliate-note:hover .affiliate-note-label,
.affiliate-note:focus .affiliate-note-label { color: #d4af37; }
.affiliate-note-info { font-size: 0.72rem; color: #777; }

/* Tooltip opens DOWNWARD: .part has overflow:hidden and the URL field
   is the first field in the card, so an upward tooltip would clip. */
.affiliate-note-tip {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 50;
  width: max-content;
  max-width: 320px;
  padding: 8px 10px;
  background: #1a1a1a;
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-radius: 6px;
  color: #ddd;
  font-size: 0.72rem;
  line-height: 1.4;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-3px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
  pointer-events: none;
}
.affiliate-note:hover .affiliate-note-tip,
.affiliate-note:focus .affiliate-note-tip {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Admin-only editable note */
.affiliate-admin {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  flex-wrap: wrap;
}
.affiliate-admin-status {
  font-size: 0.7rem;
  color: #8a8a8a;
  white-space: nowrap;
}
/* Site-wide affiliate statement in footer (Amazon Associates requirement) */
.footer-affiliate-note {
  font-size: 0.7rem;
  color: #666;
  max-width: 260px;
  line-height: 1.4;
}

.affiliate-note-input {
  flex: 1;
  min-width: 180px;
  font-size: 0.75rem;
  padding: 5px 8px;
  background: rgba(26, 26, 26, 0.6);
  border: 1px solid rgba(212, 175, 55, 0.25);
  border-radius: 4px;
  color: #ddd;
}


/* Editor's Choice Section */
.editor-choices-section {
  margin: 0.75rem 0;
  padding: 0.75rem;
  background: rgba(26, 26, 26, 0.3);
  border-radius: 6px;
  border-left: 3px solid var(--color-primary);
}

.editor-choices-section.admin-empty {
  opacity: 0.6;
  border-style: dashed;
}

.editor-choices-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.editor-label {
  color: var(--color-primary);
  font-weight: 500;
  font-size: 0.9rem;
  white-space: nowrap;
}

.editor-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  flex: 1;
}

.editor-choice-btn {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
  color: #000;
  border: none;
  padding: 6px 14px;
  border-radius: 4px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: all 0.2s ease;
  min-width: 80px;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.editor-choice-btn:hover {
  background: linear-gradient(135deg, var(--color-primary-dark), #9c7a19);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px var(--color-primary-light);
}

.no-choices-text {
  color: #666;
  font-style: italic;
  font-size: 0.85rem;
}

/* Admin Editor's Choice Controls */
.admin-editor-choices-controls {
  margin: 0.5rem 0;
  padding: 0.75rem;
  background: rgba(212, 175, 55, 0.05);
  border: 1px dashed var(--color-primary);
  border-radius: 6px;
}

.admin-choice-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
  align-items: center;
}

.admin-choice-row:last-child {
  margin-bottom: 0;
}

.admin-choice-name {
  width: 120px;
  padding: 0.4rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.85rem;
  background: rgba(42, 42, 42, 0.8);
  color: var(--color-text-primary);
}

.admin-choice-url {
  flex: 1;
  padding: 0.4rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.85rem;
  background: rgba(42, 42, 42, 0.8);
  color: var(--color-text-primary);
}

.admin-choice-name:focus,
.admin-choice-url:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.delete-choice-btn {
  background: var(--color-danger);
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1.2rem;
  line-height: 1;
  transition: all 0.2s ease;
}

.delete-choice-btn:hover {
  background: #c82333;
  transform: scale(1.1);
}

.admin-add-choice-section {
  margin: 0.5rem 0;
}

.add-editor-choice-btn {
  width: 100%;
  padding: 0.5rem;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 500;
  transition: all 0.2s ease;
}

.add-editor-choice-btn:hover {
  background: linear-gradient(135deg, #218838, #1e7e34);
  transform: translateY(-1px);
}

.part-field {
  margin-bottom: 1rem;
}

.part-field:last-child {
  margin-bottom: 0;
}

.part-field label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 500;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.part-field input,
.part-field textarea {
  width: 100%;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.95rem;
  transition: border-color 0.2s ease;
  background: rgba(42, 42, 42, 0.8);
  color: var(--color-text-primary);
}

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

.part-field textarea {
  min-height: 60px;
  /* let JS control height so all text is visible */
  resize: none;
  overflow: hidden;
}


.part-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

/* Currency Input - Dark Theme */
.currency-input {
  display: flex;
  gap: 0.5rem;
}

.currency-input select {
  -webkit-appearance: none;
  appearance: none;

  width: 70px;
  padding: 0.5rem 1.7rem 0.5rem 0.5rem;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 0.9rem;
  background: rgba(42, 42, 42, 0.9);
  color: var(--color-text-primary);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;

  /* Arrow for selects that don't use the .currency-select class */
  background-image: url("data:image/svg+xml;utf8,\
<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'>\
<path d='M1 1l5 5 5-5' stroke='%23d4af37' stroke-width='2' fill='none' stroke-linecap='round' stroke-linejoin='round'/>\
</svg>");
  background-repeat: no-repeat;
  background-position: right 0.45rem center;
  background-size: 10px 10px;
}

.currency-input select:hover {
  border-color: #777;
}

.currency-input select:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.2);
}


.currency-input input {
  flex: 1;
}

/* Drag Placeholder */
.drag-placeholder {
  margin: 0.5rem 0;
  padding: 0;
  border: 2px dashed var(--color-primary);
  border-radius: 8px;
  background: var(--color-primary-lighter);
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  animation: placeholderPulse 1s ease-in-out infinite;
}

@keyframes placeholderPulse {
  0% {
    opacity: 0.6;
    transform: scale(0.98);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0.6;
    transform: scale(0.98);
  }
}

.placeholder-inner {
  color: var(--color-primary);
  font-weight: 500;
  font-size: 0.9rem;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Action Buttons Container */
.action-buttons-container {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  flex-wrap: wrap;
}

.add-part-btn,
.add-group-btn {
  flex: 1;
  min-width: 200px;
  padding: 1rem;
  font-size: 1rem;
}

.add-group-btn {
  background: linear-gradient(135deg, #28a745, #20c997);
}

.add-group-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(40, 167, 69, 0.3);
}

/* Totals - Dark Theme */
.totals {
  background: var(--color-bg-elevated);
  border-radius: 8px;
  padding: 1.5rem;
  margin-top: 2rem;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.total-row {
  display: flex;
  justify-content: space-between;
  padding: 0.5rem 0;
  border-bottom: 1px solid #333;
  color: var(--color-text-primary);
}

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

.grand-total {
  font-weight: bold;
  font-size: 1.2rem;
  color: var(--color-primary);
  margin-top: 0.5rem;
  padding-top: 1rem;
  border-top: 2px solid #333;
}
/* Subtle helper text */
.subtle { color: var(--color-text-muted); font-size: 0.9rem; margin-left: 6px; }

/* Bought state for parts */
.part.bought {
  border-color: #2ecc71 !important;
  box-shadow: 0 0 0 2px rgba(46, 204, 113, 0.25), 0 8px 24px rgba(46, 204, 113, 0.15);
  position: relative;
  animation: buyGlow 600ms var(--anim-easing-out);
}

/* Small badge that appears when bought */
.part .bought-badge {
  display: none;
}
.part.bought .bought-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: linear-gradient(135deg, #2ecc71, #27ae60);
  color: #101010;
  border: 1px solid #1e8449;
  border-radius: 999px;
  padding: 2px 10px;
  font-size: 0.75rem;
  font-weight: 700;
  margin-right: 8px;
}

/* Header toggle button */
.mark-bought-btn {
  background: rgba(46, 204, 113, 0.12);
  border: 1px solid rgba(46, 204, 113, 0.35);
  color: #b6f2cc;
  padding: 6px 10px;
  border-radius: 6px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.mark-bought-btn:hover { transform: translateY(-1px); box-shadow: 0 2px 10px rgba(46, 204, 113, 0.2); }
.part.bought .mark-bought-btn {
  background: linear-gradient(135deg, #2ecc71, #1e8449);
  color: #0d2217;
  border-color: #1e8449;
  font-weight: 700;
}


@keyframes popCheck {
  0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.6); }
  40%  { opacity: 1; transform: translate(-50%, -50%) scale(1.1); }
  100% { opacity: 0; transform: translate(-50%, -50%) scale(0.9); }
}
@keyframes buyGlow {
  0%   { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.0); }
  60%  { box-shadow: 0 0 0 6px rgba(46, 204, 113, 0.18); }
  100% { box-shadow: 0 0 0 0 rgba(46, 204, 113, 0.0); }
}

/* Admin View - Dark Theme */
.admin-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 2rem;
  color: var(--color-primary);
}

.admin-login {
  background: var(--color-bg-elevated);
  border-radius: 8px;
  padding: 2rem;
  max-width: 400px;
  margin: 0 auto;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  border: 1px solid rgba(212, 175, 55, 0.2);
}

.admin-login h3 {
  margin-bottom: 1.5rem;
  color: var(--color-primary);
}

.admin-login input {
  width: 100%;
  padding: 0.75rem;
  margin-bottom: 1rem;
  border: 1px solid #444;
  border-radius: 5px;
  font-size: 1rem;
  background: rgba(26, 26, 26, 0.8);
  color: var(--color-text-primary);
}

.admin-login input:focus {
  outline: none;
  border-color: var(--color-primary);
}

.hint {
  color: var(--color-text-muted);
  font-size: 0.9rem;
  margin-bottom: 1rem;
}

/* Admin YouTube Management */
.admin-section {
  margin-bottom: 2rem;
}

.admin-section h4 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.template-youtube-management {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.template-youtube-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem;
  background: var(--color-bg-elevated);
  border-radius: 6px;
  border: 1px solid #444;
  transition: all 0.3s ease;
}

.template-youtube-row:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px var(--color-primary-lighter);
}

.template-info-mini {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-width: 200px;
  flex-shrink: 0;
  color: var(--color-text-primary);
}

.template-icon {
  font-size: 1.5rem;
}

.youtube-input-section {
  display: flex;
  gap: 0.5rem;
  flex: 1;
  align-items: center;
}

.youtube-input {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  background: rgba(26, 26, 26, 0.8);
  color: var(--color-text-primary);
}

.youtube-input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.test-btn {
  background: #28a745 !important;
  color: white;
}

.test-btn:hover {
  background: #218838 !important;
}
/* Template Save Loading Indicator */
.template-save-loading {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.template-save-loading .loading-content {
  background: #2a2a2a;
  padding: 30px;
  border-radius: 12px;
  text-align: center;
  border: 2px solid var(--color-primary);
}

.template-save-loading h3 {
  color: var(--color-primary);
  margin: 0 0 15px 0;
}

.template-save-loading p {
  color: var(--color-text-primary);
  margin: 0 0 20px 0;
}

.template-save-loading .loading-spinner {
  font-size: 2rem;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Enhanced progress tracking styles */
.progress-container {
  margin: 20px 0;
  width: 100%;
}

.progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(212, 175, 55, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.progress-stats {
  text-align: center;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  margin-bottom: 10px;
}

.template-save-loading .loading-content {
  min-width: 400px;
  max-width: 500px;
}

/* Enhanced Template Image Upload Modal */
.template-image-upload-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  animation: fadeIn 0.3s ease;
  padding: 20px;
}

.template-image-upload-content {
  background: rgba(42, 42, 42, 0.98);
  padding: 30px;
  border-radius: 12px;
  max-width: 1000px;
  width: 95%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideIn 0.3s ease;
  border: 2px solid var(--color-primary-light);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.7);
}

.template-image-upload-content h2 {
  margin: 0 0 15px 0;
  color: var(--color-primary);
  font-size: 1.5rem;
  text-align: center;
}

/* Upload Instructions */
.upload-instructions {
  background: var(--color-primary-lighter);
  border: 1px solid var(--color-primary-light);
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 25px;
}

.upload-instructions p {
  margin: 0 0 10px 0;
  color: var(--color-primary);
  font-weight: 500;
}

.upload-instructions ul {
  margin: 10px 0 0 0;
  padding-left: 20px;
  color: var(--color-text-primary);
}

.upload-instructions li {
  margin-bottom: 5px;
  line-height: 1.4;
}

/* Upload Progress Section */
.upload-progress-section {
  background: rgba(26, 26, 26, 0.8);
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 20px;
  border: 1px solid #444;
}

.upload-progress-bar {
  width: 100%;
  height: 8px;
  background: rgba(212, 175, 55, 0.2);
  border-radius: 4px;
  overflow: hidden;
  margin-bottom: 10px;
}

.upload-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark));
  border-radius: 4px;
  transition: width 0.3s ease;
  min-width: 2px;
}

.upload-progress-text {
  text-align: center;
  color: var(--color-primary);
  font-size: 0.9rem;
  font-weight: 500;
}

/* Template Image Upload Grid */
.template-image-uploads {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;
  margin-bottom: 25px;
}

.template-image-upload-box {
  background: rgba(26, 26, 26, 0.5);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 15px;
  transition: all 0.3s ease;
}

.template-image-upload-box:hover {
  border-color: var(--color-primary);
  box-shadow: 0 4px 12px rgba(212, 175, 55, 0.2);
}

.template-image-upload-box h3 {
  font-size: 1.1rem;
  margin: 0 0 5px 0;
  color: var(--color-primary);
  text-align: center;
}

.image-description {
  font-size: 0.85rem;
  color: var(--color-text-muted);
  text-align: center;
  margin: 0 0 15px 0;
  font-style: italic;
}

/* Enhanced Template Image Preview */
.enhanced-preview {
  position: relative;
  width: 100%;
  height: 220px;
  border: 2px dashed #444;
  border-radius: 8px;
  cursor: pointer;
  overflow: hidden;
  background: rgba(26, 26, 26, 0.8);
  transition: all 0.3s ease;
  margin-bottom: 10px;
}

.enhanced-preview:hover {
  border-color: var(--color-primary);
  background: rgba(212, 175, 55, 0.05);
  transform: translateY(-2px);
}

.enhanced-preview.drag-over {
  border-color: var(--color-success);
  background: rgba(76, 175, 80, 0.1);
  border-style: solid;
  transform: scale(1.02);
}

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

/* Upload Placeholder Enhanced */
.upload-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: #666;
  text-align: center;
  padding: 20px;
}

.upload-icon {
  font-size: 3rem;
  margin-bottom: 10px;
  color: var(--color-primary);
  opacity: 0.7;
}

.upload-text {
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 8px;
  line-height: 1.3;
}

.upload-specs {
  font-size: 0.75rem;
  color: #888;
  opacity: 0.8;
}

/* Image Overlay */
.image-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(to bottom, 
    rgba(0,0,0,0.7) 0%, 
    transparent 30%, 
    transparent 70%, 
    rgba(0,0,0,0.8) 100%);
  opacity: 0;
  transition: opacity 0.3s ease;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 10px;
}

.enhanced-preview:hover .image-overlay {
  opacity: 1;
}

.image-info {
  color: white;
  font-size: 0.8rem;
}

.image-name {
  font-weight: 500;
  margin-bottom: 3px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.image-size, .image-dimensions {
  font-size: 0.75rem;
  opacity: 0.9;
  margin-bottom: 2px;
}

.optimization-badge {
  background: var(--color-success);
  color: white;
  padding: 2px 6px;
  border-radius: 10px;
  font-size: 0.7rem;
  font-weight: bold;
  display: inline-block;
  margin-top: 4px;
}

.image-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
}

/* Upload Status */
.upload-status {
  min-height: 20px;
  font-size: 0.85rem;
  text-align: center;
  padding: 5px;
  border-radius: 4px;
  margin-top: 8px;
  transition: all 0.3s ease;
}

.upload-status.uploading {
  background: rgba(255, 193, 7, 0.2);
  color: var(--color-warning);
  border: 1px solid rgba(255, 193, 7, 0.3);
}

.upload-status.success {
  background: rgba(76, 175, 80, 0.2);
  color: var(--color-success);
  border: 1px solid rgba(76, 175, 80, 0.3);
}

.upload-status.error {
  background: rgba(244, 67, 54, 0.2);
  color: #f44336;
  border: 1px solid rgba(244, 67, 54, 0.3);
}

/* Upload Validation */
.upload-validation {
  background: rgba(26, 26, 26, 0.8);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 15px;
  margin-bottom: 25px;
}

.validation-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}

.validation-item:last-child {
  margin-bottom: 0;
}

.validation-item.valid {
  color: var(--color-success);
}

.validation-icon {
  font-size: 1.1rem;
  flex-shrink: 0;
}

.validation-text {
  font-size: 0.9rem;
  flex: 1;
}

/* Enhanced Upload Actions */
.template-upload-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  padding-top: 20px;
  border-top: 1px solid #444;
}

.template-upload-actions .btn {
  min-width: 150px;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 600;
}

.template-upload-actions .btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  background: #666;
  color: var(--color-text-muted);
}

.template-upload-actions .btn:disabled:hover {
  transform: none;
  background: #666;
}

/* Upload Loading Animation */
.upload-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--color-primary);
}

.loading-spinner {
  font-size: 2rem;
  animation: spin 1s linear infinite;
  margin-bottom: 10px;
}

.loading-text {
  font-size: 0.9rem;
  opacity: 0.8;
}

/* Template Image Upload Modal */

/* ==========================================
   SAVE/LOAD FUNCTIONALITY STYLES - DARK THEME
   ========================================== */

/* Saved Builds Modal */
.saved-builds-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

.saved-builds-content {
  background: var(--color-bg-elevated);
  padding: 30px;
  border-radius: 8px;
  max-width: 600px;
  width: 90%;
  max-height: 80vh;
  overflow-y: auto;
  position: relative;
  animation: slideIn 0.3s ease;
  border: 1px solid var(--color-primary-light);
}

@keyframes slideIn {
  from {
    transform: translateY(-20px);
    opacity: 0;
  }
  to {
    transform: translateY(0);
    opacity: 1;
  }
}

.saved-builds-content h2 {
  margin-top: 0;
  color: var(--color-primary);
  font-size: 24px;
}

.close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  line-height: 1;
  padding: 5px;
  transition: color 0.3s ease;
}

.close-btn:hover {
  color: #fff;
}

.no-builds {
  text-align: center;
  color: #666;
  padding: 40px 0;
  font-size: 16px;
}
.autosave-notice {
    text-align: center;
    color: var(--color-text-muted);
    font-size: 0.9rem;
    margin: -10px 0 20px 0;
    font-style: italic;
    padding: 0 20px;
}
.builds-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.saved-build-item {
  border: 1px solid #444;
  padding: 20px;
  border-radius: 8px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;       /* was: center */
  transition: all 0.3s ease;
  background: rgba(26, 26, 26, 0.5);
}

.saved-build-item:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px rgba(212, 175, 55, 0.2);
  background: rgba(26, 26, 26, 0.8);
}

.build-info h3 {
  margin: 0 0 8px 0;
  color: var(--color-primary);
  font-size: 18px;
}

.build-meta {
  color: var(--color-text-primary);
  margin: 5px 0;
  font-size: 14px;
}

.build-date {
  color: var(--color-text-muted);
  font-size: 13px;
  margin: 5px 0 0 0;
}

.build-actions {
  display: flex;
  gap: 8px;                      /* was: 10px */
  flex-shrink: 0;
  flex-wrap: wrap;               /* allow wrapping so buttons never overflow */
  justify-content: flex-start;     /* keep them to the right on wide screens */
}
.load-btn, .delete-btn {
  padding: 6px 10px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.load-btn {
  background: var(--color-success);
  color: white;
}

.load-btn:hover {
  background: #45a049;
}

.delete-btn {
  background: #f44336;
  color: white;
}

.delete-btn:hover {
  background: #d32f2f;
}
/* Save/Load Options Modals */
.save-options-modal,
.load-options-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1001;
  animation: fadeIn 0.3s ease;
}

.save-options-content,
.load-options-content {
  background: var(--color-bg-elevated);
  padding: 30px;
  border-radius: 12px;
  max-width: 500px;
  width: 90%;
  position: relative;
  animation: slideIn 0.3s ease;
  border: 1px solid var(--color-primary-light);
}

.save-options-content h2,
.load-options-content h2 {
  margin: 0 0 25px 0;
  color: var(--color-primary);
  font-size: 1.4rem;
  text-align: center;
}

.save-options,
.load-options {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.save-option,
.load-option {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  background: rgba(26, 26, 26, 0.8);
  border: 2px solid #444;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
}

.save-option:hover,
.load-option:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-lighter);
  transform: translateY(-2px);
}

.save-option-icon,
.load-option-icon {
  font-size: 2.5rem;
  flex-shrink: 0;
}

.save-option-content,
.load-option-content {
  flex: 1;
}

.save-option-content h3,
.load-option-content h3 {
  margin: 0 0 8px 0;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.save-option-content p,
.load-option-content p {
  margin: 0;
  color: var(--color-text-primary);
  font-size: 0.9rem;
  line-height: 1.4;
}

/* Save Notification */
.save-notification {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background: var(--color-success);
  color: white;
  padding: 15px 20px;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 1001;
  font-size: 14px;
  font-weight: 500;
}

.save-notification.show {
  opacity: 1;
}

/* Button Styles */
.btn {
  padding: 0.75rem 1.5rem;
  border: none;
  border-radius: 5px;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.3s ease;
  text-decoration: none;
  display: inline-block;
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

.btn-primary {
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
}

.btn-secondary {
  background: rgba(212, 175, 55, 0.2);
  border: 1px solid var(--color-primary);
  color: var(--color-primary);
}

.btn-secondary:hover {
  background: var(--color-primary);
  color: #000;
}

.btn-small {
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
}

/* Admin Specifications Management - Dark Theme */
.part-data-management {
  display: grid;
  gap: 2rem;
  margin: 2rem 0;
}

.part-data-section {
  background: var(--color-bg-elevated);
  border: 1px solid #444;
  border-radius: 8px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.part-data-section:hover {
  border-color: var(--color-primary);
  box-shadow: 0 2px 8px var(--color-primary-lighter);
}

.part-data-section h4 {
  color: var(--color-primary);
  margin-bottom: 1rem;
  font-size: 1.1rem;
}

.part-data-section h5 {
  color: var(--color-text-primary);
  margin: 1rem 0 0.5rem 0;
  font-size: 0.95rem;
}

.specifications-editor {
  margin-bottom: 1.5rem;
}

.spec-editor-row {
  display: grid;
  grid-template-columns: 150px 1fr;
  gap: 1rem;
  align-items: center;
  margin-bottom: 0.5rem;
}

.spec-editor-row label {
  font-weight: 500;
  color: var(--color-primary);
  font-size: 0.9rem;
}

.spec-editor-row input {
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  transition: all 0.2s ease;
  background: rgba(26, 26, 26, 0.8);
  color: var(--color-text-primary);
}

.spec-editor-row input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.reminders-editor {
  padding-top: 1rem;
  border-top: 1px solid #333;
}

.reminders-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.reminder-editor-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
}

.reminder-editor-row textarea {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  min-height: 60px;
  resize: vertical;
  transition: all 0.2s ease;
  background: rgba(26, 26, 26, 0.8);
  color: var(--color-text-primary);
}

.reminder-editor-row textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.reminder-editor-row .delete-btn {
  flex-shrink: 0;
}

.admin-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 2px solid #333;
}

/* Admin edit mode for reminders in parts */
.reminders-text.admin-edit {
  background: rgba(212, 175, 55, 0.05);
  border: 1px dashed var(--color-primary);
  padding: 0.5rem;
  border-radius: 4px;
}

.reminder-edit-input {
  width: calc(100% - 40px);
  padding: 0.4rem;
  border: 1px solid var(--color-primary);
  border-radius: 4px;
  font-size: 0.9rem;
  font-family: inherit;
  background: rgba(42, 42, 42, 0.8);
  color: var(--color-text-primary);
  transition: all 0.2s ease;
}

.reminder-edit-input:focus {
  outline: none;
  box-shadow: 0 0 0 2px rgba(212, 175, 55, 0.2);
}

.delete-reminder-btn {
  background: var(--color-danger);
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 4px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  margin-left: 8px;
  transition: all 0.2s ease;
  vertical-align: middle;
}

.delete-reminder-btn:hover {
  background: #c82333;
  transform: scale(1.1);
}

.add-reminder-btn {
  width: 100%;
  padding: 0.5rem;
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 0.5rem;
  transition: all 0.2s ease;
}

.add-reminder-btn:hover {
  background: linear-gradient(135deg, #218838, #1e7e34);
  transform: translateY(-1px);
}

/* Editor Choices Editor in Admin Modal */
.editor-choices-editor {
  padding-top: 1rem;
  border-top: 1px solid #333;
  margin-top: 1rem;
}

.editor-choices-editor h5 {
  color: var(--color-text-primary);
  margin: 0 0 0.5rem 0;
  font-size: 0.95rem;
}

.editor-choices-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.editor-choice-editor-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.editor-choice-editor-row input[type="text"] {
  width: 120px;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  background: rgba(26, 26, 26, 0.8);
  color: var(--color-text-primary);
}

.editor-choice-editor-row input[type="url"] {
  flex: 1;
  padding: 0.5rem;
  border: 1px solid #444;
  border-radius: 4px;
  font-size: 0.9rem;
  background: rgba(26, 26, 26, 0.8);
  color: var(--color-text-primary);
}

.editor-choice-editor-row input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.editor-choice-editor-row .delete-btn {
  flex-shrink: 0;
}

/* Spec Editor Modal - Dark Theme */
.spec-editor-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  animation: fadeIn 0.3s ease;
  overflow-y: auto;
  padding: 20px;
}

.spec-editor-content {
  background: var(--color-bg-elevated);
  border-radius: 8px;
  width: 90%;
  max-width: 1200px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  animation: slideIn 0.3s ease;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
  border: 1px solid var(--color-primary-light);
}

.spec-editor-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 30px;
  border-bottom: 2px solid #333;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  border-radius: 8px 8px 0 0;
}

.spec-editor-header h2 {
  margin: 0;
  font-size: 1.5rem;
}

.spec-editor-header .close-btn {
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
}

.spec-editor-header .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.spec-editor-body {
  flex: 1;
  overflow-y: auto;
  padding: 30px;
  background: rgba(26, 26, 26, 0.5);
}

/* Spec Editor Button in Navbar */
.spec-editor-btn {
  background: linear-gradient(135deg, #17a2b8, #138496) !important;
  border: none !important;
  font-weight: 500;
}

.spec-editor-btn:hover {
  background: linear-gradient(135deg, #138496, #117a8b) !important;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(23, 162, 184, 0.3);
}

/* Hidden Template Indicator */
.template-cell.hidden-template {
  opacity: 0.6;
  filter: grayscale(50%);
}

/* Hidden Badge */
.hidden-badge {
  position: absolute;
  top: 20px;
  left: 10px;
  background: #6c757d;
  color: white;
  padding: 5px 10px;
  font-size: 0.7rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
  z-index: 20;
}

/* Admin Template Controls */
.admin-template-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  gap: 5px;
  opacity: 0;
  transition: opacity 0.3s ease;
  z-index: 25;
}

.grid-cell:hover .admin-template-controls {
  opacity: 1;
}

.admin-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  cursor: pointer;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.admin-btn.edit-btn {
  background: #17a2b8;
  color: white;
}

.admin-btn.edit-btn:hover {
  background: #138496;
  transform: scale(1.1);
}

.admin-btn.hide-btn {
  background: var(--color-warning);
  color: #333;
}

.admin-btn.hide-btn:hover {
  background: #e0a800;
  transform: scale(1.1);
}

.admin-btn.delete-btn {
  background: var(--color-danger);
  color: white;
}

.admin-btn.delete-btn:hover {
  background: #c82333;
  transform: scale(1.1);
}

/* Template Edit Modal - Dark Theme */
.template-edit-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1002;
  animation: fadeIn 0.3s ease;
  overflow-y: auto;
  padding: 20px;
}

.template-edit-content {
  background: var(--color-bg-elevated);
  border-radius: 12px;
  max-width: 800px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  animation: slideIn 0.3s ease;
  border: 1px solid var(--color-primary-light);
}

.template-edit-content h2 {
  margin: 0;
  padding: 20px 30px;
  background: linear-gradient(135deg, #ff6b35, #f7931e);
  color: white;
  border-radius: 12px 12px 0 0;
}

.template-edit-form {
  padding: 30px;
}

.edit-field {
  margin-bottom: 20px;
}

.edit-field label {
  display: block;
  margin-bottom: 8px;
  font-weight: 500;
  color: var(--color-primary);
}

.edit-field input[type="text"],
.edit-field input[type="number"],
.edit-field input[type="url"],
.edit-field textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #444;
  border-radius: 6px;
  font-size: 1rem;
  transition: border-color 0.2s ease;
  background: rgba(26, 26, 26, 0.8);
  color: var(--color-text-primary);
}

.edit-field input:focus,
.edit-field textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 2px var(--color-primary-lighter);
}

.edit-field textarea {
  resize: vertical;
  font-family: inherit;
}

.checkbox-field {
  display: flex;
  align-items: center;
}

.checkbox-field label {
  display: flex;
  align-items: center;
  margin: 0;
  cursor: pointer;
  color: var(--color-text-primary);
}

.checkbox-field input[type="checkbox"] {
  margin-right: 8px;
  cursor: pointer;
}

.template-edit-images {
  margin-top: 30px;
  padding-top: 20px;
  border-top: 1px solid #333;
}

.template-edit-images h3 {
  margin-bottom: 20px;
  color: var(--color-primary);
}

.edit-images-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.edit-image-box {
  text-align: center;
}

.edit-image-box label {
  font-weight: 500;
  color: var(--color-text-primary);
  margin-bottom: 10px;
}

.edit-image-preview {
  width: 100%;
  height: 150px;
  border: 2px dashed #444;
  border-radius: 8px;
  margin-bottom: 10px;
  overflow: hidden;
  background: rgba(26, 26, 26, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.edit-image-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.edit-image-preview .placeholder {
  color: #666;
  font-size: 0.9rem;
}

.template-edit-actions {
  display: flex;
  gap: 15px;
  justify-content: flex-end;
  margin-top: 30px;
  padding-top: 20px;
  border-top: 2px solid #333;
}

.template-edit-modal .close-btn {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 28px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  cursor: pointer;
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.template-edit-modal .close-btn:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

/* Empty Featured Slot */
.empty-featured-slot {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.5);
  color: #666;
  font-style: italic;
}

.popover-close {
  position: absolute;
  top: 5px;
  right: 5px;
  background: none;
  border: none;
  color: var(--color-primary);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
  padding: 5px;
  transition: transform 0.2s ease;
}

.popover-close:hover {
  transform: rotate(90deg);
}

.popover-content h3 {
  margin: 0 0 10px 0;
  color: var(--color-primary);
  font-size: 1.2rem;
}

.popover-content p {
  margin: 0 0 10px 0;
  color: var(--color-text-primary);
  line-height: 1.5;
  font-size: 0.9rem;
}

.template-price-info {
  color: var(--color-success) !important;
  font-weight: bold;
}

.popover-actions {
  margin-top: 15px;
  display: flex;
  gap: 10px;
  flex-direction: column;
}

.popover-actions .btn {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.85rem;
}

.template-info-popover.closing {
  animation: popoverFadeOut 0.3s ease;
}

@keyframes popoverFadeOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

.popover-actions .btn {
  width: 100%;
  padding: 8px 12px;
  font-size: 0.9rem;
}
    
 /* Generated Guitar Modal */
.generated-guitar-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1006;
  padding: 20px;
  animation: fadeIn 0.3s ease;
}

.generated-guitar-content {
  background: var(--color-bg-elevated);
  border: 2px solid var(--color-primary);
  border-radius: 12px;
  padding: 30px;
  max-width: 1200px;
  width: 90%;
  max-height: 90vh;
  overflow-y: auto;
  animation: slideIn 0.3s ease;
}

.generated-guitar-content h2 {
  margin: 0 0 20px 0;
  color: var(--color-primary);
  text-align: center;
  font-size: 1.5rem;
}

.generated-guitar-content .close-btn {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 28px;
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-primary);
  line-height: 1;
  padding: 5px;
  transition: all 0.3s ease;
}

.generated-guitar-content .close-btn:hover {
  color: #fff;
  transform: rotate(90deg);
}

.generated-comparison {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 30px;
  margin-bottom: 30px;
  flex-wrap: wrap;
}

.comparison-image {
  text-align: center;
  flex: 1;
  min-width: 300px;
}

.comparison-image h3 {
  margin: 0 0 15px 0;
  color: var(--color-primary);
  font-size: 1.1rem;
}

.comparison-image img {
  max-width: 100%;
  max-height: 500px;
  width: auto;
  height: auto;
  border: 2px solid #444;
  border-radius: 8px;
  background: #1a1a1a;
  transition: opacity 0.3s ease;
}

.comparison-image img.loaded {
  animation: imageLoad 0.5s ease;
}

@keyframes imageLoad {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.comparison-arrow {
  font-size: 2rem;
  color: var(--color-primary);
  flex-shrink: 0;
}

.generated-guitar-actions {
  display: flex;
  gap: 15px;
  justify-content: center;
  flex-wrap: wrap;
}

.generated-guitar-actions .btn {
  min-width: 200px;
}
 
/* Banner Management Section in Edit Modal */
.banner-management-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: rgba(212, 175, 55, 0.05);
  border: 2px solid var(--color-primary-light);
  border-radius: 8px;
}

.banner-management-section h3 {
  margin: 0 0 1rem 0;
  color: var(--color-primary);
  font-size: 1.2rem;
}

.banner-requirements {
  display: flex;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.requirement-badge {
  background: var(--color-primary);
  color: #000;
  padding: 4px 12px;
  border-radius: 20px;
  font-weight: 600;
  font-size: 0.85rem;
}

.requirement-info {
  color: var(--color-text-muted);
  font-size: 0.85rem;
  font-style: italic;
  padding: 4px 0;
}

/* Banner Preview Container */
.banner-preview-container {
  margin: 1rem 0;
}

.current-banner-preview {
  border: 2px solid var(--color-primary);
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a1a;
}

.banner-preview-wrapper {
  position: relative;
  width: 100%;
  padding-bottom: 10%; /* 10:1 aspect ratio */
  overflow: hidden;
}

.banner-preview-image {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 200%; /* Extra height for parallax with 10:1 ratio */
  background-size: cover;
  background-position: center top;
  transition: transform 0.5s ease;
}

.banner-preview-wrapper:hover .banner-preview-image {
  transform: translateY(-10%); /* Simulate parallax on hover */
}

.parallax-indicator {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-primary);
  padding: 5px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  animation: bounce 2s infinite;
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

.banner-actions {
  display: flex;
  gap: 10px;
  padding: 10px;
  background: rgba(42, 42, 42, 0.5);
  justify-content: center;
}

.no-banner-placeholder {
  text-align: center;
  padding: 3rem;
  background: rgba(26, 26, 26, 0.5);
  border: 2px dashed #444;
  border-radius: 8px;
}

.no-banner-placeholder .placeholder-icon {
  font-size: 3rem;
  margin-bottom: 1rem;
  opacity: 0.5;
}

.no-banner-placeholder p {
  color: var(--color-text-muted);
  margin-bottom: 1rem;
}

/* Upload Status Message */
.upload-status-message {
  margin-top: 10px;
  padding: 10px;
  border-radius: 4px;
  text-align: center;
  font-size: 0.9rem;
}

.upload-status-message .error {
  color: #ff4444;
}

.upload-status-message .success {
  color: var(--color-success);
}

.upload-status-message .loading {
  color: #ffa500;
}

/* Media Status Section */
.media-status-section {
  margin: 1.5rem 0;
  padding: 1rem;
  background: rgba(26, 26, 26, 0.5);
  border-radius: 8px;
}

.media-status-section h4 {
  margin: 0 0 1rem 0;
  color: var(--color-primary);
  font-size: 1rem;
}

.media-status-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.status-item {
  text-align: center;
  padding: 10px;
  background: rgba(42, 42, 42, 0.5);
  border: 1px solid #444;
  border-radius: 6px;
  opacity: 0.5;
  transition: all 0.3s ease;
}

.status-item.active {
  opacity: 1;
  border-color: var(--color-success);
  background: rgba(76, 175, 80, 0.1);
}

.status-icon {
  display: block;
  font-size: 1.5rem;
  margin-bottom: 5px;
}

.status-label {
  font-size: 0.85rem;
  color: var(--color-text-primary);
}

/* Template Media Indicators */
.template-media-indicators {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  gap: 5px;
  z-index: 10;
}

.media-indicator {
  width: 28px;
  height: 28px;
  background: rgba(0, 0, 0, 0.8);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
}

.banner-indicator {
  border: 1px solid var(--color-primary);
}

.video-indicator {
  border: 1px solid #ff0000;
}

/* Quick Media Edit Modal */
.quick-media-modal {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1003;
  animation: fadeIn 0.3s ease;
}
/* Ensure modal appears above everything */
.quick-media-modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 9999 !important; /* Very high z-index */
  background: rgba(0, 0, 0, 0.85) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Ensure body doesn't interfere */
body.modal-open {
  overflow: hidden !important;
}

/* Ensure footer doesn't overlap */
.landing-footer,
.planner-footer {
  position: relative !important;
  z-index: 100 !important;
}
.quick-media-content {
  background: var(--color-bg-elevated);
  padding: 30px;
  border-radius: 12px;
  max-width: 700px;
  width: 90%;
  animation: slideIn 0.3s ease;
  border: 2px solid var(--color-primary-light);
}

.quick-media-content h2 {
  margin: 0 0 20px 0;
  color: var(--color-primary);
}

.quick-media-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
  margin-bottom: 20px;
}

.quick-media-section {
  padding: 15px;
  background: rgba(26, 26, 26, 0.5);
  border-radius: 8px;
  border: 1px solid #444;
}

.quick-media-section h3 {
  margin: 0 0 10px 0;
  color: var(--color-primary);
  font-size: 1rem;
}

.media-preview {
  height: 120px;
  margin-bottom: 10px;
  position: relative;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 6px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.media-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.media-preview .no-media {
  color: #666;
  font-style: italic;
}

.media-preview .video-url-display {
  padding: 10px;
  font-size: 0.8rem;
  color: var(--color-text-primary);
  word-break: break-all;
}

.remove-media-btn {
  position: absolute;
  top: 5px;
  right: 5px;
  background: rgba(220, 53, 69, 0.9);
  color: white;
  border: none;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.75rem;
  cursor: pointer;
  transition: all 0.2s ease;
}

.remove-media-btn:hover {
  background: var(--color-danger);
  transform: scale(1.1);
}

.quick-video-input {
  width: 100%;
  padding: 8px;
  margin-bottom: 10px;
  border: 1px solid #444;
  border-radius: 4px;
  background: rgba(42, 42, 42, 0.8);
  color: var(--color-text-primary);
  font-size: 0.9rem;
}

.quick-media-status {
  text-align: center;
  padding: 10px;
  border-radius: 4px;
  font-size: 0.9rem;
}

/* Media Edit Button in Admin Controls */
.admin-btn.media-btn {
  background: linear-gradient(135deg, #9c27b0, #7b1fa2);
  color: white;
}

.admin-btn.media-btn:hover {
  background: linear-gradient(135deg, #7b1fa2, #6a1b9a);
  transform: scale(1.1);
}
  
  /* No JavaScript fallbacks */
.no-js .template-media-section {
  max-height: none !important;
  opacity: 1 !important;
}

.no-js .template-banner-image {
  opacity: 1 !important;
  animation: none !important;
  height: 100% !important;
  transform: none !important;
}

.no-js .skeleton-shimmer,
.no-js .template-banner-skeleton,
.no-js .video-loading-skeleton {
  display: none !important;
}

.no-js .template-video-placeholder {
  pointer-events: none;
  opacity: 0.7;
}

.no-js .template-video-placeholder::after {
  content: 'JavaScript required for video playback';
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(0, 0, 0, 0.8);
  color: var(--color-text-muted);
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 0.8rem;
}

.no-js .gallery-item {
  opacity: 1 !important;
  animation: none !important;
}

.no-js .admin-template-controls,
.no-js .floating-admin-panel {
  display: none !important;
}

/* === HERO should show full image, never cropped === */
.gallery-item-hero .gallery-item-inner.no-aspect {
  height: auto !important;
  padding-bottom: 0 !important; /* kill the 1:1 square */
  overflow: visible !important;
}

.gallery-item-hero .gallery-item-inner.no-aspect img,
.gallery-item-hero img.gallery-hero-image {
  position: static !important;
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;
}
/* ============================================
   MOBILE RESPONSIVE LAYOUT
   Add this to the end of main.css
   ============================================ */

/* Mobile Portrait View - Two Column Layout */
@media (max-width: 767px) and (orientation: portrait) {
  
  /* Adjust background for mobile */
 #landingView,
  .view {
    background-attachment: scroll;
    background-size: 100% auto;
    background-size: min(1820px, 100%) auto;
    background-position: center top;
  }
  
  /* Two column grid for mobile portrait */
  .templates-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 15px;
    margin-top: 200px; /* Adjust to position under title in image */
    padding: 0 15px;
  }
  
  /* Adjust card aspect ratio slightly for mobile */
  .grid-cell {
    aspect-ratio: 285 / 445;
  }
  
  /* Title stays centered and visible */
  .templates-title {
    font-size: 2rem;
    margin-top: 1rem;
    margin-bottom: 1.5rem;
    padding-bottom: 0.75rem;
  }
  
  /* Info boxes remain readable */
  .cell-info-box {
    padding: 6px 8px;
    margin-top: 8px;
    margin-bottom: 12px;
  }
  
  .info-line-1,
  .info-line-2 {
    font-size: 0.75rem;
  }
  
  .info-box-btn {
    padding: 3px 8px;
    font-size: 0.7rem;
  }
  
  /* Title boxes above cards */
  .action-title-box,
  .featured-title-box {
    max-width: 100%;
    font-size: 0.85rem;
    padding: 4px;
  }
  
  /* Featured cards show side by side in portrait */
  .featured-item-wrapper {
    width: 100%;
  }
  
  /* Grid separator adjustments */
  .grid-separator {
    margin: 1.5rem 0;
  }
  
  .separator-text {
    font-size: 1rem;
    padding: 0 1rem;
  }
  
  /* Adjust footer for mobile */
  .footer-content {
    flex-direction: column;
    gap: 15px;
  }
  
  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
    text-align: center;
    justify-content: center;
    align-items: center;
  }
}

/* Tablet Portrait - Three Column Layout */
@media (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .templates-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 18px;
    margin-top: 230px;
  }
  
  .templates-title {
    font-size: 2.5rem;
  }
}

/* Mobile/Tablet Landscape - Keep Desktop Layout */
@media (max-width: 1024px) and (orientation: landscape) {
  .templates-grid {
    grid-template-columns: repeat(4, 1fr);
    gap: 18px;
    margin-top: 180px;
  }
  
  .templates-title {
    font-size: 2.5rem;
    margin-top: 1.5rem;
  }
}

/* Small mobile devices */
@media (max-width: 480px) and (orientation: portrait) {
  .templates-grid {
    gap: 12px;
    padding: 0 10px;
    margin-top: 180px;
  }
  
  .templates-title {
    font-size: 1.75rem;
    letter-spacing: 0.15em;
  }
  
  /* Adjust card info for very small screens */
  .cell-info-box {
    min-height: 40px;
  }
  
  .info-buttons {
    gap: 3px;
  }
  
  .info-box-btn {
    padding: 2px 6px;
    font-size: 0.65rem;
    min-width: 40px;
    height: 16px;
  }
}

/* Ensure action and featured cards are properly sized */
@media (max-width: 767px) {
  .action-item-wrapper,
  .featured-item-wrapper,
  .template-item-wrapper {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  
  /* Ensure cards fill their grid cell */
  .action-cell,
  .featured-cell,
  .template-cell {
    width: 100%;
  }
}

/* Modal adjustments for mobile */
@media (max-width: 767px) {
  .template-info-overlay,
  .saved-builds-modal,
  .save-options-modal,
  .load-options-modal {
    padding: 10px;
  }
  
  .template-info-content,
  .saved-builds-content,
  .save-options-content,
  .load-options-content {
    width: 95%;
    padding: 20px;
    max-height: 85vh;
  }
  
  .info-images,
  .info-details {
    padding: 15px;
  }
  
  .template-info-content {
    flex-direction: column;
  }
}

/* Planner view mobile adjustments */
@media (max-width: 767px) {
  .planner-container {
    margin-top: 150px;
    padding: 1rem;
  }
  
  .planner-main-content {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .planner-right {
    position: static;
  }
  
  .toolbar {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
  
  .toolbar #backBtn {
    grid-column: 1;
  }
  
  .toolbar #buildTitle {
    grid-column: 1;
    font-size: 1.2rem;
  }
  
  .toolbar > div {
    grid-column: 1;
    justify-content: center;
    flex-wrap: wrap;
  }

  /* Keep the export dropdown on-screen when the actions are centered */
  .export-menu-list {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
  }
}
  /* Render Progress Bar */
.render-progress-container {
  margin-top: 15px;
  padding: 10px;
  background: rgba(0, 0, 0, 0.2);
  border-radius: 8px;
  border: 1px solid #333;
  display: none; /* Hidden by default */
}

.render-progress-track {
  width: 100%;
  height: 10px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 8px;
}

.render-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--color-primary), #f7931e);
  width: 0%;
  transition: width 0.3s ease;
  box-shadow: 0 0 10px rgba(212, 175, 55, 0.5);
}

.render-status-message {
  font-size: 0.9rem;
  color: var(--color-primary);
  font-weight: 500;
  margin-bottom: 4px;
}

.render-time-warning {
  font-size: 0.8rem;
  color: var(--color-text-muted);
  font-style: italic;
}
 /* ==========================================
   SOLD OUT / AI DISABLED STYLES
   ========================================== */

/* Container adjustment to handle positioning */
.render-guitar-section.sold-out-mode {
  position: relative;
  border-color: #444; /* Darker border */
}

/* Disable interactions on the buttons */
.render-guitar-section.sold-out-mode .render-guitar-btn,
.render-guitar-section.sold-out-mode .refine-toggle-btn {
  pointer-events: none;
  filter: grayscale(100%) brightness(0.5);
  opacity: 0.5;
  cursor: not-allowed;
}

/* The Sticker Look */
.sold-out-sticker {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-12deg);
  z-index: 20;
  
  /* Visuals */
  background-color: #d32f2f; /* Deep Red */
  color: #fff;
  border: 4px solid #fff;
  padding: 10px 20px;
  border-radius: 4px;
  
  /* Typography */
  font-family: 'Arial Black', Impact, sans-serif;
  font-size: 1.8rem;
  text-transform: uppercase;
  letter-spacing: 2px;
  font-weight: 900;
  white-space: nowrap;
  
  /* Effects */
  box-shadow: 0 10px 20px rgba(0,0,0,0.5);
  text-shadow: 2px 2px 0px rgba(0,0,0,0.3);
  
  /* Animation to make it look like it was just slapped on */
  animation: stickerSlap 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
  pointer-events: none; /* Let clicks pass through (though button is disabled) */
}

/* Optional: Subtext below the sticker */
.sold-out-subtext {
  display: block;
  font-size: 0.7rem;
  font-weight: normal;
  text-align: center;
  margin-top: 5px;
  opacity: 0.9;
  letter-spacing: 0px;
  text-transform: none;
  font-family: sans-serif;
}

@keyframes stickerSlap {
  0% {
    transform: translate(-50%, -50%) scale(2) rotate(0deg);
    opacity: 0;
  }
  100% {
    transform: translate(-50%, -50%) scale(1) rotate(-12deg);
    opacity: 1;
  }
} 
//* Hero text is baked into the background image; this keeps real
   headline text on the page for search engines and screen readers */
.landing-tagline {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}
/* ===== One-time edit hint above the parts list ===== */
.edit-hint-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: rgba(212, 175, 55, 0.08);
  border: 1px solid rgba(212, 175, 55, 0.35);
  border-left: 3px solid var(--color-primary, #d4af37);
  color: #e8d5a3;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-size: 0.9rem;
  line-height: 1.4;
  animation: hintSlideIn 0.45s ease;
}

.edit-hint-close {
  background: none;
  border: none;
  color: #9e8b4b;
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0 4px;
  flex-shrink: 0;
  transition: color 0.2s;
}

.edit-hint-close:hover {
  color: var(--color-primary, #d4af37);
}

.edit-hint-bar.closing {
  opacity: 0;
  transform: translateY(-6px);
  transition: all 0.3s ease;
}

@keyframes hintSlideIn {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: translateY(0); }
}