/* Entre Widget Base Styles */

.entre-widget-container {
  max-width: 42rem;
  padding: 1.5rem;
  background-color: #ffffff;
  border-radius: 0.5rem;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
  box-sizing: border-box;
  scroll-margin-top: 1.5rem;
  scroll-margin-bottom: 1.5rem;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Apply border-box to all elements within widget */
.entre-widget-container *,
.entre-widget-container *::before,
.entre-widget-container *::after {
  box-sizing: border-box;
}

/* Label styling to match Stripe */
.entre-widget-container label {
  display: block;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  color: #1f2937;
  margin-bottom: 6px;
}

/* Default Button Style (only applied when using entre-btn-default class) */
.entre-btn-default {
  display: inline-block;
  width: 100%;
  padding: 12px 16px;
  font-size: 16px;
  font-weight: 600;
  line-height: 24px;
  text-align: center;
  color: #ffffff;
  background-color: #2563eb;
  border: none;
  border-radius: 4px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: background 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.entre-btn-default:hover {
  background-color: #1d4ed8;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.08), 0px 4px 8px 0px rgba(0, 0, 0, 0.04);
}

.entre-btn-default:focus {
  background-color: #1d4ed8;
  outline: none;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.entre-btn-default:active {
  background-color: #1e40af;
  transform: scale(0.98);
}

.entre-btn-default:disabled {
  background-color: #d9d9d9;
  color: #8d8d8d;
  cursor: not-allowed;
  opacity: 1;
}

/* Default Input Style (only applied when using entre-input-default class) */
.entre-input-default {
  display: block;
  width: 100%;
  padding: 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #1f2937;
  background-color: #ffffff;
  border: 1px solid #d7dce6;
  border-radius: 4px;
  box-sizing: border-box;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.entre-input-default:hover {
  border-color: #c1c9d2;
}

.entre-input-default:focus {
  color: #1f2937;
  background-color: #ffffff;
  border-color: #2563eb;
  outline: none;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(37, 99, 235, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
}

.entre-input-default:disabled {
  background-color: #f2f2f2;
  border-color: #e6e6e6;
  color: #a3a3a3;
  cursor: not-allowed;
  opacity: 1;
}

.entre-input-default[readonly] {
  background-color: #fafafa;
  border-color: #e6e6e6;
  cursor: default;
}

.entre-input-default::placeholder {
  color: #737a84;
  opacity: 1;
}

/* Select elements - match Stripe style */
.entre-widget-container select.entre-input-default {
  cursor: pointer;
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%235f6976' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 12px;
}

.entre-widget-container select.entre-input-default:hover {
  background-image: url("data:image/svg+xml,%3Csvg width='12' height='8' viewBox='0 0 12 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1.5L6 6.5L11 1.5' stroke='%231f2937' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Number input - remove spinner */
.entre-widget-container input[type="number"].entre-input-default::-webkit-inner-spin-button,
.entre-widget-container input[type="number"].entre-input-default::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.entre-widget-container input[type="number"].entre-input-default {
  -moz-appearance: textfield;
}

/* Quantity controls (- / input / +) */
.entre-widget-container .entre-qty-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.entre-widget-container .entre-qty-btn {
  width: 34px;
  height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  font-weight: 600;
  line-height: 1;
  color: #111827;
  background-color: #ffffff;
  border: 1px solid #d7dce6;
  border-radius: 6px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.entre-widget-container .entre-qty-btn:hover {
  background-color: #f9fafb;
  border-color: #c1c9d2;
}

.entre-widget-container .entre-qty-btn:focus {
  outline: none;
  border-color: #2563eb;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.entre-widget-container .entre-qty-btn:active {
  background-color: #f3f4f6;
  transform: scale(0.98);
}

.entre-widget-container .entre-qty-btn:disabled {
  background-color: #f2f2f2;
  border-color: #e6e6e6;
  color: #a3a3a3;
  cursor: not-allowed;
  box-shadow: none;
  transform: none;
}

.entre-widget-container .entre-qty-input {
  width: 52px;
  height: 34px;
  padding: 0 10px;
  font-size: 16px;
  font-weight: 400;
  line-height: 1.45;
  color: #1f2937;
  background-color: #ffffff;
  border: 1px solid #d7dce6;
  border-radius: 6px;
  text-align: center;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02);
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: textfield;
}

.entre-widget-container .entre-qty-input:hover {
  border-color: #c1c9d2;
}

.entre-widget-container .entre-qty-input:focus {
  color: #1f2937;
  background-color: #ffffff;
  border-color: #2563eb;
  outline: none;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(37, 99, 235, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.08);
}

.entre-widget-container .entre-qty-input:disabled {
  background-color: #f2f2f2;
  border-color: #e6e6e6;
  color: #a3a3a3;
  cursor: not-allowed;
  opacity: 1;
}

.entre-widget-container .entre-qty-input::-webkit-inner-spin-button,
.entre-widget-container .entre-qty-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Validation messages styling */
.entre-widget-container .entre-pass-code-message,
.entre-widget-container .entre-discount-code-message,
.entre-widget-container .entre-stripe-card-errors {
  font-size: 13px;
  line-height: 16px;
  font-weight: 400;
  margin-top: 8px;
}

/* Success message color */
.entre-widget-container [style*="color: #10b981"],
.entre-widget-container [style*="color:#10b981"] {
  color: #30b130 !important;
}

/* Error message color */
.entre-widget-container [style*="color: #ef4444"],
.entre-widget-container [style*="color:#ef4444"] {
  color: #df1b41 !important;
}

/* Warning message color */
.entre-widget-container [style*="color: #f59e0b"],
.entre-widget-container [style*="color:#f59e0b"] {
  color: #f7870f !important;
}

/* Default Table Style (only applied when using entre-table-default class) */
.entre-table-default {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  line-height: 20px;
}

.entre-table-default tbody {
  background-color: #ffffff;
}

.entre-table-default tbody tr {
  border-bottom: 1px solid #f2f2f2;
}

.entre-table-default tbody tr:last-child {
  border-bottom: none;
}

.entre-table-default td {
  padding: 10px 0;
  text-align: left;
  color: #1f2937;
  vertical-align: top;
}

.entre-table-default td:last-child {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Secondary Button Style (for back button etc.) */
.entre-widget-container .entre-btn-secondary {
  display: inline-block;
  padding: 10px 16px;
  font-size: 14px;
  font-weight: 500;
  line-height: 20px;
  text-align: center;
  color: #1f2937;
  background-color: #ffffff;
  border: 1px solid #d7dce6;
  border-radius: 4px;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02);
  cursor: pointer;
  transition: background 0.15s ease, border 0.15s ease, box-shadow 0.15s ease, color 0.15s ease;
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.entre-widget-container .entre-btn-secondary:hover {
  background-color: #f9fafb;
  border-color: #c1c9d2;
}

.entre-widget-container .entre-btn-secondary:focus {
  border-color: #2563eb;
  outline: none;
  box-shadow: 0px 1px 1px 0px rgba(0, 0, 0, 0.03), 0px 3px 6px 0px rgba(0, 0, 0, 0.02), 0 0 0 3px rgba(37, 99, 235, 0.2);
}

.entre-widget-container .entre-btn-secondary:active {
  background-color: #f3f4f6;
  transform: scale(0.98);
}

/* Icon button style (for apply discount button etc.) */
.entre-widget-container .entre-discount-code-apply-btn, .entre-widget-container .entre-pass-code-verify-btn, .entre-widget-container .entre-pass-code-clear-btn {
  width: auto;
  min-width: 44px;
  padding: 10px;
  flex-shrink: 0;
}

/* Flex container for discount code input + button */
.entre-widget-container .entre-discount-code-container .flex {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

.entre-widget-container .entre-discount-code-container .flex-1 {
  flex: 1 1 0%;
}

.entre-widget-container .entre-donation-amount-group {
  position: relative;
  display: block;
}

.entre-widget-container .entre-donation-amount-input {
  width: 100%;
  padding-right: 2.75rem;
  -moz-appearance: textfield;
}

.entre-widget-container .entre-donation-currency {
  position: absolute;
  top: 50%;
  right: 12px;
  transform: translateY(-50%);
  font-size: 14px;
  font-weight: 500;
  line-height: 1;
  color: #6b7280;
  pointer-events: none;
  user-select: none;
}

.entre-widget-container .entre-donation-amount-input::-webkit-inner-spin-button,
.entre-widget-container .entre-donation-amount-input::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Default utility classes (scoped to widget container to avoid conflicts) */

.entre-widget-container .mb-2 { margin-bottom: 0.5rem; }
.entre-widget-container .mb-4 { margin-bottom: 1rem; }
.entre-widget-container .mb-6 { margin-bottom: 1.5rem; }
.entre-widget-container .mt-1 { margin-top: 0.25rem; }

.entre-widget-container .px-4 { padding-left: 1rem; padding-right: 1rem; }
.entre-widget-container .px-6 { padding-left: 1.5rem; padding-right: 1.5rem; }
.entre-widget-container .py-2 { padding-top: 0.5rem; padding-bottom: 0.5rem; }
.entre-widget-container .py-3 { padding-top: 0.75rem; padding-bottom: 0.75rem; }
.entre-widget-container .p-6 { padding: 1.5rem; }

.entre-widget-container .block { display: block; }
.entre-widget-container .inline-block { display: inline-block; }
.entre-widget-container .flex { display: flex; }
.entre-widget-container .flex-1 { flex: 1 1 0%; }

.entre-widget-container .gap-2 > * + * { margin-left: 0.5rem; }

.entre-widget-container .w-full { width: 100%; }
.entre-widget-container .max-w-2xl { max-width: 42rem; }

.entre-widget-container .mx-auto { margin-left: auto; margin-right: auto; }

.entre-widget-container .text-sm { font-size: 0.875rem; line-height: 1.25rem; }
.entre-widget-container .text-base { font-size: 1rem; line-height: 1.5rem; }
.entre-widget-container .text-lg { font-size: 1.125rem; line-height: 1.75rem; }

.entre-widget-container .font-normal { font-weight: 400; }
.entre-widget-container .font-medium { font-weight: 500; }
.entre-widget-container .font-semibold { font-weight: 600; }
.entre-widget-container .font-bold { font-weight: 700; }

.entre-widget-container .uppercase { text-transform: uppercase; }

.entre-widget-container .leading-tight { line-height: 1.25; }

.entre-widget-container .text-right { text-align: right; }

.entre-widget-container .text-white { color: #ffffff; }
.entre-widget-container .text-gray-500 { color: #6b7280; }
.entre-widget-container .text-gray-700 { color: #374151; }
.entre-widget-container .text-blue-600 { color: #2563eb; }
.entre-widget-container .text-blue-800 { color: #1e40af; }
.entre-widget-container .text-red-500 { color: #ef4444; }

.entre-widget-container .bg-white { background-color: #ffffff; }
.entre-widget-container .bg-blue-600 { background-color: #2563eb; }
.entre-widget-container .bg-blue-700 { background-color: #1d4ed8; }
.entre-widget-container .bg-blue-800 { background-color: #1e40af; }
.entre-widget-container .bg-clip-padding { background-clip: padding-box; }

.entre-widget-container .border { border-width: 1px; }
.entre-widget-container .border-b { border-bottom-width: 1px; }
.entre-widget-container .border-solid { border-style: solid; }
.entre-widget-container .border-gray-200 { border-color: #e5e7eb; }
.entre-widget-container .border-gray-300 { border-color: #d1d5db; }
.entre-widget-container .border-blue-600 { border-color: #2563eb; }
.entre-widget-container .divide-y > * + * { border-top: 1px solid #e5e7eb; }
.entre-widget-container .divide-gray-200 > * + * { border-top-color: #e5e7eb; }

.entre-widget-container .rounded { border-radius: 0.25rem; }
.entre-widget-container .rounded-lg { border-radius: 0.5rem; }

.entre-widget-container .shadow-sm { box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); }
.entre-widget-container .shadow-md { box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); }
.entre-widget-container .shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

.entre-widget-container .transition { transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform; }
.entre-widget-container .duration-150 { transition-duration: 150ms; }
.entre-widget-container .ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1); }

.entre-widget-container .focus\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
.entre-widget-container .focus\:ring-0:focus { box-shadow: none; }
.entre-widget-container .focus\:bg-white:focus { background-color: #ffffff; }
.entre-widget-container .focus\:text-gray-700:focus { color: #374151; }
.entre-widget-container .focus\:border-blue-600:focus { border-color: #2563eb; }
.entre-widget-container .focus\:bg-blue-700:focus { background-color: #1d4ed8; }
.entre-widget-container .focus\:shadow-lg:focus { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

.entre-widget-container .hover\:text-blue-800:hover { color: #1e3a8a; }
.entre-widget-container .hover\:bg-blue-700:hover { background-color: #1d4ed8; }
.entre-widget-container .hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

.entre-widget-container .active\:bg-blue-800:active { background-color: #1e40af; }
.entre-widget-container .active\:shadow-lg:active { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05); }

.entre-widget-container .min-w-full { min-width: 100%; }