/* Base & layout: reuse palette and navbar look from existing pages */
html, body { margin: 0; height: 100%; font-family: "Poppins", sans-serif; background: #f3eeee; overflow-x: hidden; overflow-y: auto; }
*, *::before, *::after { box-sizing: border-box; }

/* Dynamic layout variables (aligned with transcript page) */
:root { --nav-height: 64px; --subnav-height: 0px; --toast-offset: 8px; }
.app { min-height: 100%; display: flex; flex-direction: column; padding-top: calc(var(--nav-height) + var(--subnav-height)); }

.navbar-container { height: 64px; width: 100%; position: fixed; top: 0; left: 0; right: 0; z-index: 1100; }
.navbar { background-color: white; min-height: 64px; display: flex; flex-direction: row; justify-content: center; padding: 0 16px; align-items: center; box-shadow: 0 2px 3px rgba(0,0,0,.05); border-bottom: 1px solid #eee; }
.navbar-mid { display: flex; align-items: center; justify-content: center; }
.navbar-left { position: absolute; left: 16px; display: flex; align-items: center; gap: 8px; }
.navbar-right { position: absolute; right: 16px; display: flex; align-items: center; gap: 12px; }
.navbar-logo-title { display: flex; align-items: center; gap: 0; text-decoration: none; padding: 8px 12px; border-radius: 8px; transition: background-color 0.2s ease; color: #333; }
.navbar-logo-title:hover { background-color: #000000; color: #fff; }
.navbar-logo-image { width: 40px; height: 40px; object-fit: cover; margin-right: 6px; border-radius: 2px; }
.navbar-logo-text { font-size: 22px; font-weight: 500; }

.nav-button { background: white; border: 2px solid #000; color: #6b7280; padding: 12px 14px; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all .25s ease; }
.nav-button:hover { background: #000; color: #fff; transform: translateY(-1px); }

/* ===== Burger Menu (match index) ===== */
.burger-menu { padding: 8px; cursor: pointer; border-radius: 50%; position: relative; transition: background-color 0.2s ease; }
.burger-menu:hover:not(.dropdown-hovered) { background-color: #000000; }
.burger-menu:hover:not(.dropdown-hovered) .burger-menu-image { filter: brightness(0) invert(1); }
.burger-menu-image { width: 24px; height: 24px; display: block; transition: filter 0.2s ease; }
.burger-dropdown-menu { position: absolute; top: calc(100% + 4px); left: 0; background: white; border: 1px solid rgba(0,0,0,0.1); border-radius: 8px; box-shadow: 0 10px 25px rgba(0,0,0,0.15); min-width: 200px; z-index: 3300; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; }
.burger-dropdown-menu.show { opacity: 1; visibility: visible; transform: translateY(0); }
.burger-menu-item { display:block; padding:12px 16px; text-decoration:none; color:#333; cursor:pointer; transition: background-color .2s ease; font-size:14px; border-bottom:1px solid rgba(0,0,0,.05); }
.burger-menu-item:last-child { border-bottom:none; }
.burger-menu-item:hover { background:#000000; color:#fff; }
.burger-menu-item:first-child { border-radius: 8px 8px 0 0; }
.burger-menu-item:last-child { border-radius: 0 0 8px 8px; }

/* Page header */
.pricing-page { max-width: 1200px; width: 100%; margin: 32px auto; padding: 0 32px 48px; display: flex; flex-direction: column; gap: 24px; overflow-x: hidden; }
.pricing-page { min-height: 70vh; }
.pricing-header { text-align: center; }
.pricing-header .title { font-size: 38px; margin: 0; color: #1a1a1a; font-weight: 700; }
.pricing-header .subtitle { margin: 8px 0 0; color: #6b7280; font-size: 16px; }

/* Grid */
.pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; align-items: stretch; }
@media (max-width: 900px) { .pricing-grid { grid-template-columns: 1fr; } }

/* Desktop-only refinements: remove any stray scrollbars and enforce single-line feature items */
@media (min-width: 901px) {
	/* Ensure outer page handles scrolling only */
	html, body, .app, .pricing-page { overflow-y: visible; }
	.pricing-grid { overflow: visible !important; height: auto !important; max-height: none !important; }
	.plan-card { overflow: hidden; } /* hide any accidental overflow inside card */
	/* Feature list: keep each feature to one line with ellipsis */
	.plan-features li { 
		white-space: nowrap; 
		overflow: hidden; 
		text-overflow: ellipsis; 
		display: block; 
		width: 100%;
	}
	/* Provide full text on hover via title attribute styling fallback (title added via JS optional) */
	.plan-features li:hover { cursor: help; }
}

/* Cards */
.plan-card { background: white; border: 2px solid #000; border-radius: 12px; padding: 20px; display: flex; flex-direction: column; justify-content: space-between; box-shadow: 0 6px 18px rgba(0,0,0,0.08); position: relative; }
.plan-card .plan-header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 8px; }
.plan-name { font-size: 18px; font-weight: 700; color: #111827; }
.plan-coins { font-size: 18px; font-weight: 700; color: #111827; }
.coin { margin-left: 4px; }

/* Ensure coin image matches emoji size */
.coin-icon { width: 1.5em; height: 1.5em; object-fit: contain; vertical-align: middle; display: inline-block; }

.plan-price { margin: 10px 0 12px; color: #111827; display: inline-flex; align-items: flex-start; gap: 6px; }
.plan-price .currency { font-size: 22px; vertical-align: top; }
.plan-price .amount { font-size: 36px; font-weight: 800; letter-spacing: -0.5px; }

.plan-features { list-style: none; padding: 0; margin: 0 0 16px; display: flex; flex-direction: column; gap: 8px; color: #374151; }
.plan-features li::before { content: ""; display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 10px; box-shadow: 0 0 0 2px rgba(34,197,94,0.15); }

.plan-actions { display: flex; align-items: center; gap: 10px; }
.buy-button { padding: 12px 16px; border: none; border-radius: 8px; background: #000; color: #fff; font-weight: 600; cursor: pointer; box-shadow: 0 8px 18px rgba(0,0,0,0.15); }
.coming-soon { font-size: 12px; color: #6b7280; }

/* Popular (middle card) */
.plan-card.popular { border-width: 3px; transform: translateY(-6px); box-shadow: 0 14px 30px rgba(0,0,0,0.18); background: linear-gradient(180deg, #ffffff 0%, #fff8f8 100%); }
.popular .plan-price .amount { color: #c52323; }
.popular-badge { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: #000; color: #fff; border: 2px solid #fff; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 800; letter-spacing: 0.5px; box-shadow: 0 8px 20px rgba(0,0,0,0.15); text-transform: uppercase; }

/* Hover states */
.plan-card:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(0,0,0,0.12); transition: transform .2s ease, box-shadow .2s ease; }

/* Status banners */
.status-banner { max-width: 900px; margin: 0 auto; padding: 12px 16px; border-radius: 8px; border: 2px solid #000; background: #fff; display: none; font-weight: 600; }
.status-banner.show { display: block; }
.status-success { background: #ecfdf5; border-color: #065f46; color: #065f46; }
.status-cancel { background: #fffbeb; border-color: #92400e; color: #92400e; }

/* ===== Enhancements for pricing page ===== */
.nav-credits { display:flex; align-items:center; gap:6px; font-weight:700; color:#111827; border:2px solid #000; padding:6px 10px; border-radius:8px; margin-right:8px; background:#fff; }

.plan-price .was-price { margin-left: 10px; color: #6b7280; text-decoration: line-through; font-weight: 600; font-size: 16px; }
.plan-price .discount-badge { margin-left: 0px; background:#16a34a; color:#fff; font-size:12px; font-weight:800; padding:2px 8px; border-radius:999px; border:2px solid #fff; box-shadow:0 4px 10px rgba(22,163,74,.2); }

.plan-card { transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(0,0,0,0.14); border-color:#2563eb33; }
.plan-card.popular { border-color:#2563eb; box-shadow: 0 18px 36px rgba(37,99,235,0.18); background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); }
.plan-card.popular:hover { transform: translateY(-8px); box-shadow: 0 24px 44px rgba(37,99,235,0.24); }
.popular .plan-price .amount { color: #1d4ed8; }
.popular-badge { background:#2563eb; box-shadow:0 8px 20px rgba(37,99,235,0.2); }

.buy-button { padding: 12px 16px; border: 2px solid #1d4ed8; border-radius: 10px; background: #1d4ed8; color: #fff; font-weight: 700; cursor: pointer; box-shadow: 0 10px 22px rgba(29,78,216,0.25); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.buy-button:hover { background:#0b5cff; border-color:#0b5cff; box-shadow:0 14px 26px rgba(11,92,255,0.32); transform: translateY(-1px); }
.buy-button:active { transform: translateY(0); box-shadow:0 10px 22px rgba(11,92,255,0.28); }
.plan-card .buy-button[data-mode="login"] { background:#0f172a; border-color:#0f172a; color:#fff; }
.plan-card .buy-button[data-mode="login"]:hover { background:#111827; border-color:#111827; box-shadow:0 14px 26px rgba(17,24,39,0.25); }

/* --- Enhancements: hover emphasis, popular blue, and CTA hovers --- */
.plan-card { border-color: #0f172a0f; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; }
.plan-card:hover { transform: translateY(-4px); box-shadow: 0 16px 28px rgba(0,0,0,0.14); border-color: #2563eb33; }

.plan-card.popular { border: 3px solid #2563eb; box-shadow: 0 18px 36px rgba(37, 99, 235, 0.18); background: linear-gradient(180deg, #ffffff 0%, #f7fbff 100%); }
.popular .plan-price .amount { color: #1d4ed8; }
.popular-badge { background: #2563eb; box-shadow: 0 8px 20px rgba(37, 99, 235, 0.2); }

.buy-button { border: 2px solid #1d4ed8; border-radius: 10px; background: #1d4ed8; font-weight: 700; box-shadow: 0 10px 22px rgba(29, 78, 216, 0.25); transition: transform .15s ease, box-shadow .15s ease, background .15s ease, color .15s ease, border-color .15s ease; }
.buy-button:hover { background: #0b5cff; border-color: #0b5cff; box-shadow: 0 14px 26px rgba(11, 92, 255, 0.32); transform: translateY(-1px); }
.buy-button:active { transform: translateY(0); box-shadow: 0 10px 22px rgba(11, 92, 255, 0.28); }

/* Login-to-buy variant emphasis */
.plan-card .buy-button[data-mode="login"] { background: #0f172a; border-color: #0f172a; color: #fff; }
.plan-card .buy-button[data-mode="login"]:hover { background: #111827; border-color: #111827; box-shadow: 0 14px 26px rgba(17, 24, 39, 0.25); }

/* --- Requested styling changes --- */
/* Navbar coin indicator: mirror transcript page size/hover */
.nav-credits { display:flex; align-items:center; gap:8px; background:#fff; color:#6b7280; border:2px solid #000; padding:7px 12px; border-radius:8px; font-size:17px; font-weight:600; margin-right:8px; box-shadow:0 2px 6px rgba(0,0,0,0.1); transition: all 0.3s ease; }
.nav-credits:hover { background:#000; border-color:#000; color:#fff; transform: translateY(-1px); box-shadow:0 4px 12px rgba(0,0,0,0.2); }

/* Old price and discount badge adjusted diagonally for middle and right cards */
.plan-card.popular .plan-price,
.plan-card[data-pack-id="pro"] .plan-price { position: relative; display: inline-flex; align-items: flex-start; gap: 6px; }
.plan-card.popular .plan-price .was-price,
.plan-card[data-pack-id="pro"] .plan-price .was-price {
	color: #dc2626; /* red */
	font-size: 17px; /* slightly larger */
	text-decoration: line-through;
	text-decoration-color: #000; /* keep strike black */
	text-decoration-thickness: 1px; /* a bit thinner */
	transform: translate(-6px, -10px); /* diagonal up-left */
}
.plan-card.popular .plan-price .discount-badge,
.plan-card[data-pack-id="pro"] .plan-price .discount-badge {
	transform: translate(6px, -12px); /* diagonal up-right */
}

/* Add the word "discount" inside the green badge via CSS if not present */
.plan-price .discount-badge::after { content: ' discount'; font-weight: 700; font-size: 10px; margin-left: 4px; opacity: 0.9; }

/* Plan coinss badges: same structure/animation as navbar, but blue theme like Buy button */
.plan-coins { display:inline-flex; align-items:center; gap:6px; background:#fff; color:#1d4ed8; border:2px solid #1d4ed8; padding:8px 12px; border-radius:8px; font-size:20px; font-weight:700; box-shadow:0 2px 6px rgba(29,78,216,0.15); transition: all 0.3s ease; }
.plan-coins:hover { background:#1d4ed8; border-color:#1d4ed8; color:#fff; transform: translateY(-1px); box-shadow:0 4px 12px rgba(29,78,216,0.28); }
/* Disable selection for coin badges in pricing */
.nav-credits, .nav-credits *, .plan-coins, .plan-coins * {
	-webkit-user-select: none;
	-moz-user-select: none;
	-ms-user-select: none;
	user-select: none;
}

/* ======= Site Footer ======= */
.site-footer { margin-top: 64px; background: #0b1220; color: #a6b0c3; }
.site-footer .footer-inner { max-width: 1100px; margin: 0 auto; padding: 32px 20px; display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 24px; }
.site-footer a { color: #cbd5e1; text-decoration: none; }
.site-footer a:hover { color: #fff; }
.site-footer .footer-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; color: #fff; }
.site-footer .footer-logo img { width: 28px; height: 28px; }
.site-footer .footer-tagline { margin-top: 8px; font-size: 14px; color: #a6b0c3; }
.site-footer .links nav { display: flex; flex-direction: column; gap: 8px; }
.site-footer .meta { text-align: right; }
.site-footer .location { font-size: 14px; margin-bottom: 6px; }
.site-footer .copyright { font-size: 13px; color: #94a3b8; }
@media (max-width: 800px) {
	.site-footer .footer-inner { grid-template-columns: 1fr; text-align: left; }
	.site-footer .meta { text-align: left; }
}

/* Mobile-specific adjustments */
@media (max-width: 768px) {
	/* Navbar compact branding like other pages */
	.navbar-container { height: 56px; }
	.navbar { min-height: 56px; padding: 0 12px; }
	.navbar-right { gap: 8px; }
	.navbar-logo-image { width: 28px; height: 28px; margin-right: 6px; display: inline-block; }
	.navbar-logo-text { font-size: 0; line-height: 1; display: inline-block; }
	.navbar-logo-text::after { content: "YouTube Transcript Gen"; font-size: 16px; font-weight: 600; color: #333; }
	/* Keep coins, remove back button */
	.nav-back { display: none; }
	.nav-credits { font-size: 15px; padding: 6px 10px; }

	/* Page spacing */
	.pricing-page { margin: 16px auto; padding: 0 12px 32px; gap: 16px; }
	.pricing-header .title { font-size: 28px; }
	.pricing-header .subtitle { font-size: 14px; }
	.app { display: block !important; min-height: 0 !important; height: auto !important; flex: none !important; }
	.pricing-grid { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }
	.plan-card { display: block !important; height: auto !important; min-height: 0 !important; max-height: none !important; overflow: visible !important; }

	/* Cards compact but readable */
		.plan-card { padding: 16px; border-radius: 12px; margin-bottom: 18px; }
		.plan-card:last-child { margin-bottom: 0; }
	.plan-name, .plan-coins { font-size: 18px; }
	.plan-price .currency { font-size: 18px; }
	.plan-price .amount { font-size: 32px; }
	.plan-features { gap: 6px; }
	.popular-badge { top: -10px; }

	/* Footer full-width on mobile */
	.site-footer .footer-inner { width: 100%; max-width: none; margin: 0; padding-left: 12px; padding-right: 12px; }
}

/* ===== Mobile subnav (coins + back) like transcript page ===== */
.subnav-economy-row { position: fixed; top: var(--nav-height); left: 0; right: 0; background: #ffffff; border-bottom: 1px solid #eee; z-index: 1099; display: none; min-height: 48px; }
.subnav-economy-row .subnav-inner { max-width: 1100px; margin: 0 auto; padding: 8px 16px; display: flex; align-items: center; justify-content: center; gap: 12px; }
.subnav-left, .subnav-right { display: flex; align-items: center; gap: 12px; }

/* Only show subnav on mobile; desktop keeps items in top-right */
@media (max-width: 768px) {
	.subnav-economy-row { display: block; }
	/* Show only the left group so both items sit together centered */
	.subnav-economy-row .subnav-right { display: none; }
}

/* Prevent horizontal overflow from dropdowns/badges */
.burger-dropdown-menu, .popular-badge, .plan-card, .nav-credits { max-width: 100%; }
.pricing-page, .pricing-grid { overflow-x: hidden; }

/* Ensure only the whole page scrolls; cards/grid must not create inner scroll areas */
.pricing-page { overflow-y: visible; }
.pricing-grid { overflow-y: visible; height: auto; max-height: none; }
.plan-card { overflow: visible; height: auto; max-height: none; }

/* Mobile: hide back only in top navbar; show in subnav */
@media (max-width: 768px) {
	.navbar-right .nav-back { display: none !important; }
	.subnav-economy-row .nav-back { display: inline-flex !important; }
	.subnav-economy-row .nav-credits { margin: 0; }
	/* Make Coins and Go back the same size in the mobile subnav */
	.subnav-economy-row .nav-credits,
	.subnav-economy-row .nav-back {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		height: 40px;
		padding: 10px 14px;
		border-width: 2px;
		border-radius: 8px;
		font-size: 14px;
		font-weight: 600;
		line-height: 1;
		box-sizing: border-box;
		white-space: nowrap;
	}
	/* Ensure consistent borders/colors with current theme */
	.subnav-economy-row .nav-credits { border-color: #000; color: #6b7280; background: #fff; }
	.subnav-economy-row .nav-back { border-color: #000; color: #6b7280; background: #fff; }
	.subnav-economy-row .nav-back:hover { background: #000; color: #fff; }
		.pricing-page { display: block !important; overflow: visible !important; }
		.pricing-grid { display: block !important; overflow: visible !important; }
		.plan-card { display: block !important; overflow: visible !important; }
}