/* ==========================================================
   Submission form
   ========================================================== */
.esy-va-wrap { max-width: 640px; margin: 0 auto; font-family: inherit; }
.esy-va-price-box { text-align: center; margin-bottom: 24px; }
.esy-va-price { font-size: 2rem; font-weight: 700; margin: 6px 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 4px 14px; }
.esy-va-price span { font-size: 1rem; font-weight: 400; color: #666; }
.esy-va-price-line small { font-size: 0.95rem; font-weight: 400; color: #666; margin-left: 4px; }
.esy-va-price-duration { font-size: 1rem; font-weight: 400; color: #666; width: 100%; }
.esy-va-sub { color: #555; }
.esy-va-pay-methods { display: flex; flex-wrap: wrap; gap: 20px; justify-content: center; margin-bottom: 28px; }
.esy-va-pay-card { border: 1px solid #e2e2e2; border-radius: 10px; padding: 18px; text-align: center; width: 260px; background: #fafafa; }
.esy-va-pay-card h4 { margin: 0 0 10px; }
.esy-va-qr { display: block; margin: 0 auto 10px; border-radius: 6px; background: #fff; }
.esy-va-upi-id { margin: 4px 0; }
.esy-va-note { font-size: 0.85rem; color: #777; }
.esy-va-form { border-top: 1px solid #eee; padding-top: 20px; }
.esy-va-field { display: flex; flex-direction: column; gap: 4px; margin-bottom: 14px; }
.esy-va-field input, .esy-va-field select, .esy-va-field textarea { padding: 8px 10px; border: 1px solid #ccc; border-radius: 6px; font-size: 1rem; font-family: inherit; }
.esy-va-field-inline { flex-direction: row; gap: 14px; flex-wrap: wrap; }
.esy-va-field-inline > span { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; }
.esy-va-btn { background: #16a34a; color: #fff; border: none; border-radius: 6px; padding: 12px 18px; font-size: 1rem; cursor: pointer; width: 100%; }
.esy-va-btn:hover { background: #128a3e; }
.esy-va-status { margin-top: 12px; font-weight: 600; min-height: 1.2em; }
.esy-va-status.error { color: #c62828; }
.esy-va-status.success { color: #16a34a; }

/* PayPal blocked/slow-load fallback */
.esy-va-paypal-fallback { margin-top: 10px; padding-top: 10px; border-top: 1px dashed #ddd; }
#esy-va-paypal-loading { color: #777; font-weight: 400; }
.esy-va-adkey-box {
	margin-top: 10px;
	padding: 12px 14px;
	background: #f0fdf4;
	border: 1px solid #bbf7d0;
	border-radius: 8px;
}
.esy-va-adkey-label { font-size: 0.85rem; color: #14532d; margin-bottom: 6px; }
.esy-va-adkey-value {
	display: inline-block;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: 0.05em;
	background: #fff;
	padding: 6px 10px;
	border-radius: 6px;
	border: 1px dashed #16a34a;
	user-select: all;
}

/* Advertiser "check my ad" dashboard */
.esy-va-manage-result { margin-top: 16px; }
.esy-va-badge {
	display: inline-block;
	padding: 3px 10px;
	border-radius: 999px;
	font-size: 0.8rem;
	font-weight: 700;
	text-transform: capitalize;
	background: #e5e7eb;
	color: #111;
}
.esy-va-badge-active { background: #dcfce7; color: #14532d; }
.esy-va-badge-pending { background: #fef9c3; color: #713f12; }
.esy-va-badge-rejected,
.esy-va-badge-expired { background: #fee2e2; color: #7f1d1d; }
.esy-va-badge-paused { background: #fef3c7; color: #78350f; }

/* "1 / 3" pill shown while multiple ads are queued one after another */
.esy-va-queue-indicator {
	position: absolute;
	right: 8px;
	bottom: 8px;
	z-index: 3;
	background: rgba(0, 0, 0, .6);
	backdrop-filter: blur(2px);
	color: rgba(255, 255, 255, .85);
	font-size: 10px;
	font-weight: 600;
	letter-spacing: .02em;
	padding: 3px 8px;
	border-radius: 999px;
}

/* Bigger, easier-to-tap Skip control on phones */
.esy-va-player.is-mobile .esy-va-skip-btn {
	height: 32px;
	padding: 0 12px;
	font-size: 12px;
}
.esy-va-terms { font-size: 0.8rem; color: #999; margin-top: 20px; }

.esy-va-format-switch { margin-bottom: 18px; }
.esy-va-format-options { display: flex; flex-wrap: wrap; gap: 8px; }
.esy-va-format-pill { position: relative; }
.esy-va-format-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.esy-va-format-pill span { display: inline-block; padding: 8px 16px; border: 1px solid #ccc; border-radius: 999px; cursor: pointer; font-size: 0.9rem; }
.esy-va-format-pill input:checked + span { background: #16a34a; border-color: #16a34a; color: #fff; }
.esy-va-format-pill input:focus-visible + span { outline: 2px solid #16a34a; outline-offset: 2px; }

@media (max-width: 480px) {
	.esy-va-pay-card { width: 100%; }
}

/* ==========================================================
   Site-wide floating ad player
   - Responsive across mobile / tablet / laptop / desktop
   - Sits above a sticky mobile bottom nav via --esy-va-offset
     plus the device's own safe-area (notch / home-bar) inset
   - Every close/minimize control uses a >=40px tap target
   ========================================================== */
.esy-va-player {
	position: fixed;
	z-index: 999999;
	background: linear-gradient(165deg, #16181d 0%, #0a0a0c 100%);
	border-radius: 16px;
	overflow: hidden;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .42), 0 2px 8px rgba(0, 0, 0, .3), 0 0 0 1px rgba(255, 255, 255, .06);
	animation: esy-va-slide-in .4s cubic-bezier(.2, .9, .3, 1.1);
	transition: box-shadow .25s ease, transform .25s ease;
	--esy-va-offset: 16px;
}
.esy-va-player:hover {
	box-shadow: 0 16px 42px rgba(0, 0, 0, .48), 0 2px 10px rgba(0, 0, 0, .32), 0 0 0 1px rgba(255, 255, 255, .1);
}

@keyframes esy-va-slide-in {
	from { opacity: 0; transform: translateY(18px) scale(.97); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes esy-va-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}
.esy-va-player-inner { animation: esy-va-fade-in .25s ease-out; }

/* --- Desktop / laptop sizing & corner positions ---
   Width is driven by the site-wide "Ad size" preset (Settings > Ad Spots)
   rather than a single fixed value, so Small/Medium/Large all keep their
   own reasonable width for video vs. image/text cards. Medium matches the
   plugin's original fixed 320px size. */
.esy-va-player.is-desktop.size-small  { width: 240px; max-width: 30vw; }
.esy-va-player.is-desktop.size-medium { width: 320px; max-width: 30vw; }
.esy-va-player.is-desktop.size-large  { width: 420px; max-width: 34vw; }

.esy-va-player.is-desktop.size-small.format-image,
.esy-va-player.is-desktop.size-small.format-text  { width: 220px; }
.esy-va-player.is-desktop.size-medium.format-image,
.esy-va-player.is-desktop.size-medium.format-text { width: 300px; }
.esy-va-player.is-desktop.size-large.format-image,
.esy-va-player.is-desktop.size-large.format-text  { width: 380px; }

.esy-va-player.pos-bottom-right { right: 16px; }
.esy-va-player.pos-bottom-left  { left: 16px; }
.esy-va-player.pos-top-right    { right: 16px; }
.esy-va-player.pos-top-left     { left: 16px; }
.esy-va-player.pos-bottom-center { left: 50%; transform: translateX(-50%); }

.esy-va-player.pos-bottom-right,
.esy-va-player.pos-bottom-left,
.esy-va-player.pos-bottom-center {
	bottom: calc(var(--esy-va-offset) + env(safe-area-inset-bottom, 0px));
}
.esy-va-player.pos-top-right,
.esy-va-player.pos-top-left {
	top: calc(var(--esy-va-offset) + env(safe-area-inset-top, 0px));
}

/* --- Top Banner spot: a slim, full-width strip anchored to the very
       top of the viewport. Sized differently from the corner cards so
       several distinct spot styles can run at the same time without
       looking like duplicates of each other. --- */
.esy-va-player.pos-top-bar {
	top: env(safe-area-inset-top, 0px);
	left: 0;
	right: 0;
	width: 100%;
	max-width: 100%;
	border-radius: 0;
	box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}
.esy-va-player.pos-top-bar .esy-va-media-video { max-width: 480px; margin: 0 auto; }
.esy-va-player.pos-top-bar.size-small .esy-va-media-video  { max-width: 360px; }
.esy-va-player.pos-top-bar.size-large .esy-va-media-video  { max-width: 600px; }
.esy-va-player.pos-top-bar.format-image .esy-va-media-image,
.esy-va-player.pos-top-bar.format-text .esy-va-media-text,
.esy-va-player.pos-top-bar.format-affiliate .esy-va-media-affiliate {
	display: flex;
	align-items: center;
	gap: 16px;
	max-width: 900px;
	margin: 0 auto;
	padding: 10px 60px;
}
.esy-va-player.pos-top-bar .esy-va-media-image img,
.esy-va-player.pos-top-bar .esy-va-affiliate-image-wrap img { max-width: 120px; max-height: 64px; margin-bottom: 0; }
.esy-va-player.pos-top-bar .esy-va-affiliate-image-wrap { min-height: 0; margin-bottom: 0; }
.esy-va-player.pos-top-bar .esy-va-card-text { margin-bottom: 0; flex: 1; }

/* --- Inline "in-content" spot: sits statically in the flow of a post's
       content (via [esyconnect_ad_spot]) instead of floating. --- */
.esy-va-player-root.esy-va-inline-spot { margin: 22px auto; max-width: 640px; }
.esy-va-player.esy-va-player-inline {
	position: static;
	width: 100%;
	max-width: 100%;
	animation: esy-va-fade-in .3s ease-out;
}
.esy-va-player.esy-va-player-inline.size-small  { max-width: 420px; margin: 0 auto; }
.esy-va-player.esy-va-player-inline.size-medium { max-width: 560px; margin: 0 auto; }
.esy-va-player.esy-va-player-inline.size-large  { max-width: 720px; margin: 0 auto; }
.esy-va-player.esy-va-player-inline.format-image .esy-va-media-image img,
.esy-va-player.esy-va-player-inline.format-affiliate .esy-va-affiliate-image-wrap img { max-height: 260px; }

/* --- Mobile sizing: full-width-ish card, always above the safe area
       AND above the theme/app's own sticky bottom menu (--esy-va-offset
       is set from the "Mobile bottom clearance" setting). --- */
.esy-va-player.is-mobile {
	width: calc(100vw - 24px);
	left: 12px;
	right: 12px;
}
.esy-va-player.is-mobile.size-small  { max-width: 320px; }
.esy-va-player.is-mobile.size-medium { max-width: 380px; }
.esy-va-player.is-mobile.size-large  { max-width: 440px; }
.esy-va-player.is-mobile.pos-bottom-center { left: 12px; right: 12px; transform: none; margin: 0 auto; }
.esy-va-player.is-mobile.pos-bottom-right  { left: auto; margin: 0; }
.esy-va-player.is-mobile.pos-bottom-left   { right: auto; margin: 0; }

.esy-va-player-inner { position: relative; }

/* Video ads keep a 16:9 stage; image/text ads size to their content */
.esy-va-media-video { position: relative; padding-top: 56.25%; background: #000; }
.esy-va-media-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.esy-va-media-image, .esy-va-media-text {
	background: #16181c;
	color: #fff;
	padding: 14px 14px 16px;
}
.esy-va-media-image img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: cover; border-radius: 8px; margin-bottom: 10px; }

/* --- Affiliate / Product card: light, "storefront" card treatment
       (rather than the dark video/image card) so it visually reads as a
       product listing at a glance, and a distinct orange price tag +
       Buy button that echo familiar marketplace styling. --- */
.esy-va-media-affiliate {
	background: #ffffff;
	color: #16181c;
	padding: 14px 14px 16px;
}
.esy-va-affiliate-image-wrap {
	background: #fff;
	border-radius: 8px;
	overflow: hidden;
	margin-bottom: 10px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 120px;
}
.esy-va-affiliate-image-wrap img { display: block; width: 100%; height: auto; max-height: 160px; object-fit: contain; }
.esy-va-media-affiliate .esy-va-card-headline { color: #16181c; }
.esy-va-media-affiliate .esy-va-card-description { color: #5b5f66; }
.esy-va-affiliate-price {
	display: inline-block;
	margin: 2px 0 6px;
	font-weight: 800;
	font-size: 1.05rem;
	color: #b12704; /* the familiar marketplace "deal price" red */
}

.esy-va-card-text { margin-bottom: 8px; }
.esy-va-card-headline { font-weight: 700; font-size: 0.98rem; line-height: 1.3; margin-bottom: 4px; }
.esy-va-card-description { font-size: 0.85rem; line-height: 1.35; color: #d6d6d9; }

.esy-va-cta {
	display: inline-block;
	margin-top: 4px;
	padding: 10px 18px;
	background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
	color: #fff !important;
	text-decoration: none;
	border-radius: 9px;
	font-weight: 700;
	font-size: 0.9rem;
	text-align: center;
	letter-spacing: .01em;
	box-shadow: 0 2px 10px rgba(22, 163, 74, .4);
	transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.esy-va-cta:hover { filter: brightness(1.08); transform: translateY(-1px) scale(1.02); box-shadow: 0 4px 16px rgba(22, 163, 74, .5); }
.esy-va-cta:active { transform: translateY(0) scale(.99); }
.esy-va-media-image .esy-va-cta,
.esy-va-media-text .esy-va-cta,
.esy-va-media-affiliate .esy-va-cta { width: 100%; box-sizing: border-box; }

/* Amazon-style "Buy Now" orange button for affiliate/product ads —
   intentionally distinct from the green CTA elsewhere on the site so it
   reads as a familiar marketplace buy button rather than a generic ad. */
.esy-va-cta-affiliate {
	background: linear-gradient(135deg, #f7ca5e 0%, #f0a83c 55%, #e67e22 100%);
	color: #111 !important;
	box-shadow: 0 2px 10px rgba(230, 126, 34, .45);
}
.esy-va-cta-affiliate:hover { filter: brightness(1.05); box-shadow: 0 4px 16px rgba(230, 126, 34, .55); }



.esy-va-cta-overlay {
	position: absolute;
	left: 10px;
	bottom: 10px;
	z-index: 2;
	margin-top: 0;
}

.esy-va-player-label {
	position: absolute;
	left: 8px;
	top: 8px;
	background: rgba(0, 0, 0, .6);
	backdrop-filter: blur(2px);
	color: #eee;
	font-size: 9.5px;
	letter-spacing: .06em;
	text-transform: uppercase;
	font-weight: 600;
	padding: 4px 8px;
	border-radius: 5px;
	z-index: 3;
}

.esy-va-player-controls {
	position: absolute;
	top: 6px;
	right: 6px;
	z-index: 3;
	display: flex;
	align-items: center;
	gap: 6px;
}

/* "Skip" control — hidden until skipAfterSeconds elapses, shows a live
   countdown, then becomes clickable. Kept visually distinct from the
   close/minimize round buttons so it reads as an action, not a dismissal. */
.esy-va-skip-btn {
	height: 28px;
	padding: 0 10px;
	border-radius: 999px;
	background: rgba(0, 0, 0, .55);
	color: rgba(255, 255, 255, .75);
	border: 1px solid rgba(255, 255, 255, .18);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: .01em;
	cursor: default;
	white-space: nowrap;
	transition: background .15s ease, color .15s ease, transform .15s ease;
}
.esy-va-skip-btn.is-ready {
	cursor: pointer;
	background: rgba(255, 255, 255, .95);
	color: #111;
	border-color: transparent;
}
.esy-va-skip-btn.is-ready:hover { transform: scale(1.05); }
.esy-va-skip-btn.is-ready:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }

.esy-va-player-minimize,
.esy-va-player-close {
	width: 32px;
	height: 32px;
	min-width: 32px;
	min-height: 32px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .92);
	color: #111;
	border: none;
	font-size: 16px;
	line-height: 1;
	cursor: pointer;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .4);
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.esy-va-player-close { font-size: 18px; }
.esy-va-player-minimize:hover,
.esy-va-player-close:hover { background: #fff; }
.esy-va-player-minimize:focus-visible,
.esy-va-player-close:focus-visible { outline: 2px solid #16a34a; outline-offset: 2px; }

/* Bigger, easier-to-tap controls on phones */
.esy-va-player.is-mobile .esy-va-player-minimize,
.esy-va-player.is-mobile .esy-va-player-close {
	width: 40px;
	height: 40px;
	min-width: 40px;
	min-height: 40px;
	font-size: 20px;
}

.esy-va-player.is-minimized .esy-va-player-inner { display: none; }
.esy-va-player.is-minimized { background: transparent; box-shadow: none; }

.esy-va-reopen {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 10px 16px;
	min-height: 40px;
	border-radius: 999px;
	background: #16a34a;
	color: #fff;
	border: none;
	font-weight: 600;
	font-size: 0.85rem;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, .3);
}
.esy-va-reopen:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }