/* Webool Popup Styles - Bewool Theme Inspired - Hybrid Layout */

:root {
  --bewool-bg-light: #f8f5f0; /* Adjust this off-white/beige as needed */
  --bewool-text-dark: #4a4a4a; /* Adjust this dark grey as needed */
  --bewool-border-color: #dcdad5;
  --bewool-button-hover-bg: #edeae4;
  --bewool-button-active-bg: #e6e2dc; /* For a pressed state */
}

#webool-popup-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(40, 40, 40, 0.9); /* Slightly less opaque dark overlay */
  z-index: 9999;
  display: flex; /* Use flexbox for centering */
  justify-content: center;
  align-items: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; /* Default sans-serif */
}

#webool-popup-overlay.visible {
  opacity: 1;
  visibility: visible;
}

#webool-popup-container {
  background-color: var(--bewool-bg-light);
  padding: 0; /* Remove padding here, apply to children */
  border-radius: 4px; /* Slightly less rounded */
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  max-width: 1000px; /* Adjust max-width for two columns */
  width: 90%;
  position: relative;
  transform: scale(0.9);
  transition: transform 0.3s ease;
  color: var(--bewool-text-dark);
  /* text-align: center; Removed default center */
  overflow: hidden; /* Prevent content overflow before radius */
  display: flex; /* Use flex here for container structure */
}

#webool-popup-overlay.visible #webool-popup-container {
  transform: scale(1);
}

#webool-popup-close {
  position: absolute;
  top: 5px; /* Adjust position relative to container edge */
  right: 5px;
  background: rgba(255,255,255,0.7);
  border: none;
  border-radius: 50%;
  font-size: 20px;
  font-weight: bold;
  color: var(--bewool-text-dark);
  cursor: pointer;
  line-height: 1;
  width: 28px;
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: background-color 0.2s ease, color 0.2s ease;
  z-index: 10; /* Ensure it's above content */
}

#webool-popup-close:hover {
  background-color: rgba(230, 230, 230, 0.9);
  color: #000;
}

/* This is now the parent container inside #webool-popup-container */
.webool-popup-content {
  display: flex;
  flex-direction: row; /* Default: Image Left, Text Right */
  align-items: stretch; /* Make columns equal height */
  width: 100%; /* Take full width of parent */
  /* gap: 0; Remove gap, padding will handle space */
}

.webool-popup-image {
  flex: 0 0 40%; /* Image takes 40% width */
  position: relative; /* For potential overlay elements if needed */
  background-color: #eee; /* Fallback bg */
}

.webool-popup-image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; /* Fill height/width, crop as needed */
  /* border-radius: 0; Remove radius from image itself */
  /* margin: 0 auto; Remove centering */
  /* max-height: none; Remove max-height */
}

.webool-popup-text-form {
  flex: 1; /* Text/form takes remaining space */
  display: flex;
  flex-direction: column;
  padding: 30px 35px; /* Add padding here */
  text-align: left; /* Default left align for desktop */
  justify-content: center; /* Vertically center content */
}

.webool-popup-text {
  margin-bottom: 20px;
  line-height: 1.6;
}

.webool-popup-text h1,
.webool-popup-text h2,
.webool-popup-text h3 {
   font-family: Georgia, Times, 'Times New Roman', serif;
   color: var(--bewool-text-dark);
   margin-bottom: 0.7em;
   font-size: 1.6em;
   font-weight: normal;
}

.webool-popup-text p:first-child {
  margin-top: 0;
}

.webool-popup-text p:last-child {
  margin-bottom: 0;
}

/* Style for the basic form title if used */
.webool-popup-form > p {
  font-family: Georgia, Times, 'Times New Roman', serif;
  font-size: 1.2em;
  margin-bottom: 15px;
  color: var(--bewool-text-dark);
}

.webool-popup-form form {
  display: flex;
  flex-direction: column;
  gap: 15px;
  align-items: flex-start; /* Align form elements left on desktop */
}

.webool-popup-form input[type="email"],
.webool-popup-form input[type="text"],
.webool-popup-form .mailpoet_text /* Target MailPoet text/email inputs */ {
  padding: 12px 15px !important;
  border: 1px solid var(--bewool-border-color);
  border-radius: 3px;
  width: 100% !important; /* Override potential inline width */
  /* max-width: 320px; Remove max width */
  box-sizing: border-box !important; /* Override potential inline box-sizing */
  background-color: #fff;
  color: var(--bewool-text-dark);
  text-align: left; /* Left align text in input */
  margin: 0 !important; /* Override potential inline margin */
}

.mailpoet_form.mailpoet_form_form.mailpoet_form_shortcode {
  padding: 0 !important;
}

.mailpoet_paragraph {
  margin-bottom: 0 !important;
  width: 100% !important;
  display: block;
}

.mailpoet_paragraph.last {
  display: flex !important;
  justify-content: flex-end !important;
}

/* Ensure placeholder text aligns left too */
.webool-popup-form input[type="email"]::placeholder,
.webool-popup-form .mailpoet_text::placeholder {
  color: #999;
  text-align: left;
}

/* Button styling to match Bewool "SHOP NOW" */
/* Target basic submit, button elements, and MailPoet submit */
.webool-popup-form input[type="submit"],
.webool-popup-form button[type="submit"],
.webool-popup-form .mailpoet_submit {
  padding: 12px 30px !important;
  border: 1px solid var(--bewool-text-dark);
  background-color: var(--bewool-text-dark);
  color: var(--bewool-bg-light);
  border-radius: 3px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
  text-transform: uppercase;
  font-size: 0.95em;
  font-weight: 500;
  letter-spacing: 0.5px;
  min-width: 180px;
  width: auto !important; /* Override potential inline width like width:100% */
  max-width: 100%; /* Prevent overflow on small containers */
  box-sizing: border-box !important; /* Override potential inline box-sizing */
  margin: 0 !important; /* Override potential inline margin */
  /* align-self: flex-start; Already default for form */
}

/* Hover state for all targeted buttons */
.webool-popup-form input[type="submit"]:hover,
.webool-popup-form button[type="submit"]:hover,
.webool-popup-form .mailpoet_submit:hover {
  background-color: #5a5a5a;
  border-color: #5a5a5a;
  color: var(--bewool-bg-light);
}

/* Active state for all targeted buttons */
.webool-popup-form input[type="submit"]:active,
.webool-popup-form button[type="submit"]:active,
.webool-popup-form .mailpoet_submit:active {
  background-color: #3a3a3a;
  border-color: #3a3a3a;
  color: var(--bewool-bg-light);
  transform: translateY(1px);
}

/* Reset margin on MailPoet paragraphs inside the form container */
.webool-popup-form .mailpoet_paragraph {
    margin: 0 0 15px 0; /* Add bottom margin consistent with form gap */
}

.webool-popup-form .mailpoet_paragraph.last {
    margin-bottom: 0; /* Remove bottom margin from last paragraph */
}

#webool-form-message {
  margin-top: 12px;
  font-size: 0.9em;
  line-height: 1.4;
  width: 100%; /* Ensure message takes full width */
}

#webool-form-message.success {
  color: #5a8700;
}

#webool-form-message.error {
  color: #c04040;
}

/* Responsive adjustments */
@media (max-width: 768px) { /* Adjusted breakpoint */
  #webool-popup-container {
    flex-direction: column; /* Stack container elements */
    max-width: 500px; /* Revert max-width for single column */
    width: 90%;
  }

  .webool-popup-content {
    flex-direction: column; /* Stack image and text/form */
  }

  .webool-popup-image {
    flex-basis: auto; /* Reset basis */
    width: 100%;
    height: 180px; /* Fixed height for horizontal banner effect */
    order: -1; /* Ensure image is always first when stacked */
  }

  .webool-popup-image img {
     /* Styles already set correctly (width/height 100%, object-fit cover) */
  }

  .webool-popup-text-form {
    text-align: center; /* Center text on mobile */
    padding: 25px 30px; /* Adjust padding for mobile */
    justify-content: flex-start; /* Align content to top */
  }

  .webool-popup-text h1,
  .webool-popup-text h2,
  .webool-popup-text h3 {
    font-size: 1.4em;
  }

  .webool-popup-form form {
     align-items: center; /* Center form elements on mobile */
  }

  .webool-popup-form input[type="email"],
  .webool-popup-form input[type="text"],
  .webool-popup-form .mailpoet_text /* Target MailPoet on mobile */ {
    max-width: 100%;
    text-align: center;
  }
  .webool-popup-form input[type="email"]::placeholder,
  .webool-popup-form .mailpoet_text::placeholder /* Target MailPoet on mobile */ {
    text-align: center;
  }

  .webool-popup-form input[type="submit"],
  .webool-popup-form button[type="submit"],
  .webool-popup-form .mailpoet_submit /* Target MailPoet on mobile */ {
    width: 100% !important; /* Make button full width on mobile, override inline auto */
    max-width: 320px;
  }
}