/* Root Variables for Modern styling */
:root {
  --angie-auth-primary: #3b82f6;
  --angie-auth-primary-hover: #2563eb;
  --angie-auth-bg: #ffffff;
  --angie-auth-text: #1f2937;
  --angie-auth-text-muted: #6b7280;
  --angie-auth-border: #e5e7eb;
}

/* Floating Trigger Button */
.angie-popup-trigger-34252ee9 {
  position: fixed;
  bottom: 24px;
  right: 24px;
  background-color: var(--angie-auth-primary);
  color: #fff;
  border: none;
  border-radius: 50px;
  padding: 12px 24px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15);
  display: flex;
  align-items: center;
  gap: 8px;
  z-index: 9999;
  transition: transform 0.2s ease, background-color 0.2s ease;
}

.angie-popup-trigger-34252ee9:hover {
  background-color: var(--angie-auth-primary-hover);
  transform: translateY(-2px);
}

/* Modal Overlay */
.angie-modal-overlay-34252ee9 {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10000;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Admin Bar Adjustments */
body.admin-bar .angie-modal-overlay-34252ee9 {
  top: var(--wp-admin--admin-bar--height, 32px);
  height: calc(100% - var(--wp-admin--admin-bar--height, 32px));
}

@media screen and (max-width: 782px) {
  body.admin-bar .angie-modal-overlay-34252ee9 {
    top: 46px;
    height: calc(100% - 46px);
  }
}

.angie-modal-overlay-34252ee9.active {
  opacity: 1;
  visibility: visible;
}

/* Modal Container */
.angie-modal-container-34252ee9 {
  background-color: var(--angie-auth-bg);
  border-radius: 12px;
  width: 90%;
  max-width: 400px;
  padding: 32px 24px;
  position: relative;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
  transform: translateY(-20px);
  transition: transform 0.3s ease;
}

.angie-modal-overlay-34252ee9.active .angie-modal-container-34252ee9 {
  transform: translateY(0);
}

/* Close Button */
.angie-modal-close-34252ee9 {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  font-size: 28px;
  color: var(--angie-auth-text-muted);
  cursor: pointer;
  line-height: 1;
}

.angie-modal-close-34252ee9:hover {
  color: var(--angie-auth-text);
}

/* Tabs Header */
.angie-modal-tabs-34252ee9 {
  display: flex;
  border-bottom: 2px solid var(--angie-auth-border);
  margin-bottom: 24px;
}

.angie-tab-btn-34252ee9 {
  flex: 1;
  background: none;
  border: none;
  padding: 12px;
  font-size: 16px;
  font-weight: 600;
  color: var(--angie-auth-text-muted);
  cursor: pointer;
  text-align: center;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  transition: color 0.2s ease, border-color 0.2s ease;
}

.angie-tab-btn-34252ee9.active {
  color: var(--angie-auth-primary);
  border-bottom-color: var(--angie-auth-primary);
}

/* Tab Content */
.angie-tab-content-34252ee9 {
  display: none;
}

.angie-tab-content-34252ee9.active {
  display: block;
}

.angie-tab-content-34252ee9 h3 {
  margin-top: 0;
  margin-bottom: 20px;
  font-size: 20px;
  color: var(--angie-auth-text);
}

/* Form Styles */
.angie-form-group-34252ee9 {
  margin-bottom: 16px;
  text-align: left;
}

.angie-form-group-34252ee9 label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  margin-bottom: 6px;
  color: var(--angie-auth-text);
}

.angie-form-group-34252ee9 input {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--angie-auth-border);
  border-radius: 6px;
  font-size: 14px;
  color: var(--angie-auth-text);
  box-sizing: border-box;
}

.angie-form-group-34252ee9 input:focus {
  outline: none;
  border-color: var(--angie-auth-primary);
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Submit Button */
.angie-submit-btn-34252ee9 {
  width: 100%;
  padding: 12px;
  background-color: var(--angie-auth-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.angie-submit-btn-34252ee9:hover {
  background-color: var(--angie-auth-primary-hover);
}

/* Message Box */
.angie-form-message-34252ee9 {
  padding: 10px;
  border-radius: 6px;
  margin-bottom: 16px;
  font-size: 13px;
  line-height: 1.4;
}

.angie-form-message-34252ee9.error {
  background-color: #fef2f2;
  color: #ef4444;
  border: 1px solid #fee2e2;
}

.angie-form-message-34252ee9.success {
  background-color: #f0fdf4;
  color: #15803d;
  border: 1px solid #dcfce7;
}

.angie-error-msg-34252ee9 {
  color: #ef4444;
  font-size: 14px;
}