@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700;800;900&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

:root {
  --color-primary: #143d30;
  --color-primary-dark: #0c261e;
  --color-secondary: #059669;
  --color-secondary-light: #10b981;
  --color-accent: #d97706;
  --color-accent-light: #f59e0b;
  --color-bg: #f8faf7;
  --color-bg-card: #ffffff;
  --color-text-main: #1f2937;
  --color-text-muted: #4b5563;
  --font-heading: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-body: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

body, html {
  font-family: var(--font-body) !important;
  background-color: var(--color-bg);
  color: var(--color-text-main);
  scroll-behavior: smooth;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading) !important;
  letter-spacing: -0.02em;
}

/* Botanical Tree Leaves Background Patterns */
.bg-leaf-pattern {
  background-color: #f8faf7;
  background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%2310b981' fill-opacity='0.04' fill-rule='evenodd'%3E%3Cpath d='M28 20c0-11.046 8.954-20 20-20 0 11.046-8.954 20-20 20zm-8 40c0-11.046 8.954-20 20-20 0 11.046-8.954 20-20 20zm40 0c0-11.046 8.954-20 20-20 0 11.046-8.954 20-20 20zM8 0c0 11.046 8.954 20 20 20C16.954 20 8 11.046 8 0zm60 40c0 11.046 8.954 20 20 20-11.046 0-20-8.954-20-20z'/%3E%3C/g%3E%3C/svg%3E");
}

.bg-leaf-hero {
  position: relative;
  overflow: hidden;
  background: radial-gradient(circle at 10% 20%, rgba(16, 185, 129, 0.08) 0%, rgba(20, 61, 48, 0.03) 40%, rgba(248, 250, 247, 0.95) 100%),
              url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23059669' fill-opacity='0.045'%3E%3Cpath d='M60 15 C45 35, 40 55, 60 75 C80 55, 75 35, 60 15 Z'/%3E%3Cpath d='M15 75 C5 90, 5 105, 20 115 C35 105, 35 90, 15 75 Z'/%3E%3Cpath d='M105 75 C95 90, 95 105, 110 115 C125 105, 125 90, 105 75 Z'/%3E%3C/g%3E%3C/svg%3E");
}

.leaf-watermark-left {
  position: absolute;
  left: -40px;
  top: 10%;
  width: 260px;
  height: 260px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2310b981' fill-opacity='0.07' d='M45,-75C58.3,-69.3,69.2,-57.8,76.5,-44.4C83.8,-31,87.4,-15.5,86.2,-0.7C85,14.1,79,28.2,70.8,40.7C62.6,53.2,52.2,64.1,39.6,70.9C27,77.7,12.3,80.4,-2,83.9C-16.3,87.3,-30.5,91.5,-43.3,86.4C-56.1,81.3,-67.4,66.8,-74.6,51.2C-81.8,35.5,-84.8,17.8,-83.4,1.4C-82,-15,-76.2,-30,-67.5,-42.6C-58.8,-55.2,-47.2,-65.4,-34.5,-71.4C-21.8,-77.4,-8.1,-79.2,3.9,-85.9C15.8,-92.7,31.7,-80.7,45,-75Z' transform='translate(100 100)' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

.leaf-watermark-right {
  position: absolute;
  right: -50px;
  bottom: 5%;
  width: 320px;
  height: 320px;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23059669' fill-opacity='0.06' d='M47.7,-68.8C61.4,-61.2,71.8,-47.3,77.5,-31.8C83.2,-16.3,84.2,0.8,80.1,16.7C76.1,32.6,67,47.3,54.6,58.7C42.2,70.1,26.5,78.2,9.7,80.2C-7.1,82.2,-25,78.1,-40.4,69.5C-55.8,60.9,-68.7,47.8,-76.3,32.3C-83.9,16.8,-86.2,-1.1,-82.1,-17.4C-78,-33.7,-67.5,-48.4,-53.8,-56C-40.1,-63.6,-23.2,-64.1,-5.9,-65.1C11.4,-66.1,34,-66.4,47.7,-68.8Z' transform='translate(100 100)' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 0;
}

/* Subtle botanical foliage card decoration */
.card-botanical {
  background: #ffffff;
  border-radius: 1.25rem;
  border: 1px solid rgba(16, 185, 129, 0.15);
  box-shadow: 0 10px 25px -5px rgba(20, 61, 48, 0.05), 0 8px 10px -6px rgba(20, 61, 48, 0.02);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.card-botanical:hover {
  transform: translateY(-3px);
  box-shadow: 0 20px 30px -10px rgba(20, 61, 48, 0.1), 0 10px 15px -5px rgba(16, 185, 129, 0.08);
}

/* Order Form Card (Brand New Unique Modern Design) */
.order-card-modern {
  background: linear-gradient(145deg, #ffffff 0%, #f7faf7 100%);
  border: 2px solid #10b981;
  border-radius: 1.5rem;
  box-shadow: 0 20px 40px -15px rgba(20, 61, 48, 0.18), 0 0 0 6px rgba(16, 185, 129, 0.08);
  position: relative;
  overflow: hidden;
}

.order-card-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 6px;
  background: linear-gradient(90deg, #10b981, #d97706, #10b981);
  background-size: 200% 100%;
  animation: shimmerBorder 4s linear infinite;
}

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

/* Modern Input Styles */
.form-input-modern {
  width: 100%;
  padding: 1rem 1.125rem;
  border: 1.5px solid #d1d5db;
  border-radius: 0.875rem;
  background-color: #ffffff;
  color: #111827;
  font-size: 0.95rem;
  font-weight: 500;
  outline: none;
  transition: all 0.2s ease-in-out;
}

.form-input-modern:focus {
  border-color: #059669;
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.18);
  background-color: #ffffff;
}

.form-input-modern.is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15) !important;
}

.form-input-modern.is-valid {
  border-color: #10b981 !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.15) !important;
}

/* Modern CTA Submit Button */
.btn-submit-modern {
  width: 100%;
  padding: 1.15rem 1.5rem;
  background: linear-gradient(135deg, #143d30 0%, #059669 100%);
  color: #ffffff;
  font-family: var(--font-heading);
  font-weight: 800;
  font-size: 1.125rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  border-radius: 0.875rem;
  border: none;
  box-shadow: 0 10px 20px -5px rgba(5, 150, 105, 0.4);
  cursor: pointer;
  transition: all 0.25s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.btn-submit-modern:hover {
  background: linear-gradient(135deg, #0c261e 0%, #047857 100%);
  transform: translateY(-2px);
  box-shadow: 0 15px 25px -5px rgba(5, 150, 105, 0.5);
}

.btn-submit-modern:active {
  transform: translateY(0);
}

/* Floating leaves animation */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(4deg); }
}

.animate-float {
  animation: floatSlow 5s ease-in-out infinite;
}

/* Product Showcase Glow Frame */
.product-glow-frame {
  position: relative;
  background: radial-gradient(circle at center, rgba(16, 185, 129, 0.18) 0%, rgba(20, 61, 48, 0.02) 70%);
  border-radius: 2rem;
  padding: 2rem;
  border: 1px dashed rgba(16, 185, 129, 0.3);
}

/* Validation message */
.field-error-msg {
  font-size: 0.775rem;
  margin-top: 0.35rem;
  font-weight: 600;
  display: none;
}

.field-error-msg.show {
  display: block;
  color: #dc2626;
}

.field-error-msg.show.success {
  color: #059669;
}