:root {
  --wf-bg: #09090b;
  --wf-card: #18181b;
  --wf-text: #fafafa;
  --wf-text-muted: #a1a1aa;
  --wf-accent: #06b6d4;
  --wf-accent-2: #8b5cf6;
  --wf-border: #3f3f46;
  
  /* Board Specific Colors */
  --board-bg: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
  --board-text: #ffffff;
  --board-highlight: #ffd700; /* Gold for emphasis */
}

body {
  margin: 0;
  padding: 20px;
  background-color: var(--wf-bg);
  color: var(--wf-text);
  font-family: 'Inter', sans-serif;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.preview-label {
  margin-bottom: 20px;
  color: var(--wf-text-muted);
  text-align: center;
}

/* The Main Board Container */
.flex-board {
  position: relative;
  width: 98vw; /* Full width of screen to maximize visibility */
  aspect-ratio: 105 / 19; /* The exact physical ratio requested */
  background: var(--board-bg);
  border: 4px solid var(--wf-border);
  border-radius: 12px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.5);
  overflow: hidden;
  display: grid;
  grid-template-columns: 20% 1fr 20%; /* Side images, main content, side images */
  padding: 1vw;
  box-sizing: border-box;
}

/* Side Image Columns */
.side-panel {
  display: flex;
  flex-direction: column;
  gap: 1vw;
  justify-content: space-between;
  height: 100%;
}

.product-img {
  width: 100%;
  height: 32%; /* Fit 3 images vertically */
  object-fit: contain; /* Don't crop, show full product */
  background: rgba(255,255,255,0.05);
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.1);
  padding: 0.5vw;
  box-sizing: border-box;
}

/* Center Content Area */
.center-panel {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  text-align: center;
  padding: 0 2vw;
  position: relative;
}

/* Top Contacts Row */
.top-contacts {
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 1.2vw; /* Responsive font size based on viewport width */
  font-weight: 700;
  color: var(--board-highlight);
  text-transform: uppercase;
  background: rgba(0,0,0,0.3);
  padding: 0.5vw 1vw;
  border-radius: 50px;
  margin-bottom: 1vw;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 0.5vw;
}

/* Main Shop Name */
.shop-name {
  font-family: 'Arial Black', 'Impact', sans-serif;
  font-size: 5vw; /* Huge text */
  line-height: 1.1;
  text-transform: uppercase;
  color: #fff;
  /* Double Shaded Effect */
  text-shadow: 
    0.3vw 0.3vw 0px var(--wf-accent),
    0.6vw 0.6vw 0px var(--wf-accent-2);
  margin: 0;
  letter-spacing: -0.02em;
  z-index: 2;
}

/* Description */
.shop-desc {
  font-size: 1.1vw;
  color: #fff;
  max-width: 95%;
  margin: 0.5vw 0 2.5vw 0; /* Add bottom margin for address bar space */
  font-weight: 500;
  background: rgba(0,0,0,0.4);
  padding: 0.5vw 1.5vw;
  border-radius: 8px;
  border-left: 4px solid var(--board-highlight);
}

/* Address Footer */
.address-bar {
  width: 100%;
  background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.1) 20%, rgba(255,255,255,0.1) 80%, transparent 100%);
  color: #fff;
  font-size: 1vw;
  padding: 0.5vw 0;
  margin-top: auto;
  font-weight: 600;
  border-top: 1px solid rgba(255,255,255,0.2);
}

.address-label {
  color: var(--board-highlight);
  margin-right: 0.5vw;
}

/* WhatsApp Icon Placeholder */
.whatsapp-icon {
  width: 2vw;
  height: 2vw;
  background-color: #25D366;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: bold;
  font-size: 1.2vw;
  box-shadow: 0 2px 5px rgba(0,0,0,0.3);
  margin-right: 0.5vw;
}

.center-panel {
  display: flex;
  flex-direction: column;
  justify-content: center; /* Center vertically better */
  align-items: center;
  text-align: center;
  padding: 0 2vw;
  position: relative;
  height: 100%; /* Force height to fill */
}

/* Tighter spacing for wide aspect ratio */
.shop-name {
  font-family: 'Arial Black', 'Impact', sans-serif;
  font-size: 5.5vw; 
  line-height: 1;
  text-transform: uppercase;
  color: #fff;
  /* Double Shaded Effect - more pronounced */
  text-shadow: 
    0.3vw 0.3vw 0px #ff0055,
    0.6vw 0.6vw 0px #0000ff;
  margin: 0.5vw 0;
  letter-spacing: -0.03em;
  z-index: 2;
  white-space: nowrap; /* Try to keep on one line if possible? No, user has long name */
}

.top-contacts {
  position: absolute;
  top: 0.5vw;
  width: 100%;
  display: flex;
  justify-content: space-between;
  font-size: 1.2vw;
  font-weight: 800;
  color: #fff;
  text-shadow: 1px 1px 2px #000;
  background: transparent; /* Remove bg to look cleaner on gradient */
  padding: 0;
  margin: 0;
}

.address-bar {
  position: absolute;
  bottom: 0.5vw;
  width: 100%;
  background: rgba(0,0,0,0.6);
  border-radius: 50px;
  color: #fff;
  font-size: 0.9vw;
  padding: 0.4vw 0;
  margin-top: 0;
  font-weight: 600;
  border: 1px solid rgba(255,255,255,0.3);
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Icon Placeholders */
.icon-ph {
  margin-right: 0.4vw;
}