/**
 * Whop WooCommerce Gateway Frontend Styles
 *
 * @package    Whop_WooCommerce
 * @version    3.6.1
 */

/* Reset container */
#payment div.payment_box.payment_method_whop,
.woocommerce-checkout #payment div.payment_box.payment_method_whop {
  background: #ffffff !important;
  border: 1px solid #e4e4e7 !important;
  border-radius: 8px !important;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.05) !important;
  padding: 12px 16px !important;
  margin: 10px 0 !important;
  color: #27272a !important;
  font-size: 13px !important;
}

/* Hide pointer */
#payment div.payment_box.payment_method_whop::before,
#payment div.payment_box.payment_method_whop::after,
.woocommerce-checkout #payment div.payment_box.payment_method_whop::before,
.woocommerce-checkout #payment div.payment_box.payment_method_whop::after {
  display: none !important;
  content: none !important;
  border: none !important;
}

/* Styling */
.whop-payment-card {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.whop-payment-card .whop-card-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #0f172a !important;
  margin: 0 0 2px 0 !important;
  line-height: 1.4 !important;
}

.whop-payment-card .whop-card-description {
  font-size: 12px !important;
  color: #64748b !important;
  margin: 0 !important;
  line-height: 1.5 !important;
}

/* Badge */
.whop-payment-card .whop-sandbox-badge {
  display: inline-flex !important;
  align-self: flex-start !important;
  align-items: center !important;
  background: #fef3c7 !important;
  color: #92400e !important;
  border: 1px solid #fde68a !important;
  border-radius: 4px !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  padding: 2px 8px !important;
  margin-top: 6px !important;
}

/* Overlay */
.whop-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(15, 23, 42, 0.65); /* Sleek slate dark background */
  backdrop-filter: blur(12px); /* Glassmorphism frosted blur */
  -webkit-backdrop-filter: blur(12px);
  z-index: 999999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

/* Modal Card */
.whop-overlay .whop-modal-card {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25), 0 0 40px rgba(255, 100, 35, 0.05);
  border: 1px solid rgba(226, 232, 240, 0.8);
  width: 100%;
  max-width: 440px;
  padding: 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: whopModalFadeIn 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes whopModalFadeIn {
  from {
    opacity: 0;
    transform: scale(0.95) translateY(10px);
  }
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

.whop-modal-header {
  margin-bottom: 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.whop-lock-icon {
  background: rgba(255, 100, 35, 0.08);
  color: #ff6423;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(255, 100, 35, 0.1);
  animation: whopPulseLock 2s infinite;
}

@keyframes whopPulseLock {
  0%, 100% {
    transform: scale(1);
    box-shadow: 0 4px 12px rgba(255, 100, 35, 0.1);
  }
  50% {
    transform: scale(1.05);
    box-shadow: 0 4px 20px rgba(255, 100, 35, 0.25);
  }
}

.whop-modal-header h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 20px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}

.whop-modal-body {
  margin-bottom: 28px;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
}

.whop-highlight-text {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
  margin: 0 0 8px 0;
}

.whop-sub-text {
  font-size: 13px;
  color: #64748b;
  line-height: 1.6;
  margin: 0 0 24px 0;
}

.whop-status-text {
  font-size: 13px;
  color: #475569;
  font-weight: 500;
  margin: 20px 0 0 0;
}

/* Animations */
.whop-loader-container {
  position: relative;
  width: 60px;
  height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whop-pulse-ring {
  border: 4px solid #ff6423;
  background-color: transparent;
  border-radius: 50%;
  height: 56px;
  width: 56px;
  animation: whopPulseRing 1.5s ease-out infinite;
  position: absolute;
}

.whop-pulse-dot {
  background-color: #ff6423;
  border-radius: 50%;
  height: 16px;
  width: 16px;
  position: absolute;
  box-shadow: 0 0 12px rgba(255, 100, 35, 0.6);
}

@keyframes whopPulseRing {
  0% {
    transform: scale(0.3);
    opacity: 1;
  }
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

/* Buttons */
.whop-modal-footer {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.whop-btn {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 24px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: all 0.2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.whop-btn-primary {
  background: #ff6423;
  color: #ffffff;
  box-shadow: 0 4px 14px rgba(255, 100, 35, 0.3);
}

.whop-btn-primary:hover:not(:disabled) {
  background: #f0520f;
  box-shadow: 0 6px 20px rgba(255, 100, 35, 0.4);
  transform: translateY(-1px);
}

.whop-btn-primary:active:not(:disabled) {
  transform: translateY(0);
}

.whop-btn-primary:disabled {
  background: #cbd5e1;
  color: #64748b;
  cursor: not-allowed;
  box-shadow: none;
}

.whop-btn-secondary {
  background: #f1f5f9;
  color: #475569;
}

.whop-btn-secondary:hover {
  background: #e2e8f0;
  color: #334155;
}

/* Success Checkmark */
.whop-success-icon-container {
  width: 72px;
  height: 72px;
  margin-bottom: 16px;
}

.whop-checkmark-circle {
  stroke-dasharray: 166;
  stroke-dashoffset: 166;
  stroke-width: 2;
  stroke-miterlimit: 10;
  stroke: #22c55e;
  fill: none;
  animation: stroke 0.6s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.whop-checkmark {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  display: block;
  stroke-width: 2;
  stroke: #fff;
  stroke-miterlimit: 10;
  box-shadow: inset 0px 0px 0px #22c55e;
  animation: fill .4s ease-in-out .4s forwards, scale .3s ease-in-out .9s forwards;
}

.whop-checkmark-check {
  transform-origin: 50% 50%;
  stroke-dasharray: 48;
  stroke-dashoffset: 48;
  animation: stroke 0.3s cubic-bezier(0.65, 0, 0.45, 1) 0.8s forwards;
}

@keyframes stroke {
  100% {
    stroke-dashoffset: 0;
  }
}
@keyframes scale {
  0%, 100% {
    transform: none;
  }
  50% {
    transform: scale3d(1.1, 1.1, 1);
  }
}
@keyframes fill {
  100% {
    box-shadow: inset 0px 0px 0px 40px #22c55e;
  }
}

/* Transition Mode */
.whop-overlay.whop-transition-mode .whop-transition-container {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  color: #ffffff;
  animation: whopModalFadeIn 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.whop-overlay.whop-transition-mode h3 {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #ffffff;
  margin: 24px 0 8px 0;
}

.whop-overlay.whop-transition-mode p {
  font-size: 14px;
  color: #94a3b8;
  margin: 0;
}


/* =========================================================================
   Embedded Checkout (v3.7.0)
   The official Whop embed lives inside the gateway's payment box. The
   wrapper stays visually neutral so the form inherits the page context and
   feels native to the active WordPress theme.
   ========================================================================= */

#payment div.payment_box.payment_method_whop .whop-embed-description {
	margin: 0 0 10px;
	font-size: 13px;
	line-height: 1.5;
	color: inherit;
}

.whop-embed-wrapper {
	position: relative;
	width: 100%;
	min-height: 220px;
	margin-top: 8px;
	border-radius: 10px;
	overflow: hidden;
	background: transparent;
}

.whop-embed-mount {
	width: 100%;
}

.whop-embed-mount > div,
.whop-embed-mount iframe {
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0 !important;
	border: 0;
	display: block;
}

/* Loading state */
.whop-embed-loading {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	min-height: 180px;
	padding: 24px 12px;
}

.whop-embed-loading p {
	margin: 0;
	font-size: 13px;
	opacity: .7;
}

.whop-embed-spinner {
	width: 32px;
	height: 32px;
	border: 3px solid rgba(128, 128, 128, .25);
	border-top-color: #ff6423;
	border-radius: 50%;
	animation: whop-embed-spin .8s linear infinite;
}

@keyframes whop-embed-spin { to { transform: rotate(360deg); } }

/* Error + retry state */
.whop-embed-error {
	display: none;
	padding: 16px;
	border: 1px solid #fca5a5;
	border-radius: 8px;
	background: #fef2f2;
	color: #991b1b;
	font-size: 13px;
	text-align: center;
}

.whop-embed-error p { margin: 0 0 10px; }

.whop-embed-error .button,
#whop-embed-retry {
	cursor: pointer;
}

/* "Order created — pay below" banner (Flow B) */
.whop-embed-banner {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 10px 0;
	padding: 10px 14px;
	border: 1px solid #bfdbfe;
	border-left: 4px solid #3b82f6;
	border-radius: 8px;
	background: #eff6ff;
	color: #1e40af;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.45;
}

.whop-embed-wrapper.whop-embed-awaiting {
	box-shadow: 0 0 0 2px #3b82f6, 0 8px 24px rgba(59, 130, 246, .18);
	transition: box-shadow .3s ease;
}

/* Finalizing lock overlay */
.whop-embed-lock {
	position: absolute;
	inset: 0;
	z-index: 20;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 12px;
	background: rgba(255, 255, 255, .88);
	backdrop-filter: blur(2px);
	border-radius: inherit;
}

.whop-embed-lock p {
	margin: 0;
	font-size: 13px;
	font-weight: 600;
	color: #16a34a;
}

/* Dark-scheme friendliness when the merchant picked the dark embed theme */
@media (prefers-color-scheme: dark) {
	.whop-embed-lock { background: rgba(17, 17, 17, .82); }
	.whop-embed-error { background: rgba(153, 27, 27, .12); }
}

/* Responsive */
@media (max-width: 480px) {
	.whop-embed-wrapper { min-height: 200px; border-radius: 8px; }
	.whop-embed-banner { font-size: 12px; padding: 9px 12px; }
}

/* =========================================================================
   v3.8.0 — Mobile responsiveness for the embedded form
   The theme's payment_box padding/background steals width on phones; strip
   it when the Whop embed is mounted so the form gets the full column width.
   ========================================================================= */

#payment div.payment_box.payment_method_whop.whop-embedded-box,
.woocommerce-checkout #payment div.payment_box.payment_method_whop.whop-embedded-box,
#payment ul.payment_methods li div.payment_box.payment_method_whop.whop-embedded-box {
	padding: 6px 0 0 0 !important;
	margin: 6px 0 0 0 !important;
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	width: 100% !important;
	max-width: 100% !important;
}

.whop-embedded-box .whop-embed-wrapper {
	margin: 0;
	border-radius: 12px;
}

#whop-embedded-checkout,
.whop-embed-mount > div {
	width: 100% !important;
	max-width: 100% !important;
	display: block;
}

.whop-embed-mount iframe {
	min-height: 380px;
}

@media (max-width: 480px) {
	.whop-embed-mount iframe { min-height: 420px; }
}