/*
 * Structural styling only. Deliberately does NOT set a background color,
 * base text color, or font-family on .asm-page — those are inherited
 * from whatever theme is active, so the page reads as part of the site.
 * The --asm-accent chain tries a few common theme/page-builder variables
 * first (Astra, Kadence, Elementor) and falls back to a sane blue if the
 * active theme doesn't expose one, so buttons/links pick up the site's
 * own brand color automatically when it's available.
 */
.asm-page {
	--asm-accent: var( --ast-global-color-0, var( --kb-color-1, var( --e-global-color-primary, #2271b1 ) ) );
	--asm-border: rgba( 0, 0, 0, 0.1 );
	--asm-muted: rgba( 0, 0, 0, 0.55 );
	--asm-surface: rgba( 0, 0, 0, 0.02 );
	max-width: 1100px;
	width: 100%;
	margin: 0 auto;
	padding: 3rem 1.5rem 5rem;
	box-sizing: border-box;
}

/* Guard against themes (Astra etc.) that reserve a sidebar column by
   default on pages using this template, which would otherwise push
   .asm-page off-center to the left. */
.asm-theme-content {
	width: 100%;
	max-width: 100%;
	float: none;
}

.asm-btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	padding: .7rem 1.4rem;
	border-radius: 6px;
	font-size: .9rem;
	font-weight: 600;
	cursor: pointer;
	border: 1px solid transparent;
	text-decoration: none;
}
.asm-btn-primary { background: var( --asm-accent ); color: #fff !important; }
.asm-btn-primary:hover { opacity: .9; color: #fff !important; }
.asm-btn-ghost { background: transparent; border: 1px solid var( --asm-accent ); color: var( --asm-accent ) !important; }
.asm-btn-ghost:hover { background: var( --asm-accent ); color: #fff !important; border-color: var( --asm-accent ); }
.asm-btn-ghost:visited,
.asm-btn-primary:visited { color: inherit; }
.asm-btn-disabled { opacity: .55; pointer-events: none; }

/* Hero */
.asm-hero { text-align: center; max-width: 720px; margin: 0 auto 3rem; }
.asm-eyebrow { font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var( --asm-accent ); margin-bottom: .8rem; }
.asm-hero h1 { margin: 0 0 1rem; }
.asm-hero-sub { color: var( --asm-muted ); margin: 0 0 1.6rem; }
.asm-hero-actions { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; }

/* Apps */
.asm-apps { margin-bottom: 4rem; }
.asm-section-label { text-align: center; font-size: .75rem; letter-spacing: .15em; text-transform: uppercase; color: var( --asm-muted ); margin-bottom: 1.6rem; }
.asm-cards { display: grid; grid-template-columns: repeat( auto-fit, minmax( 240px, 1fr ) ); gap: 1.2rem; }
.asm-card {
	display: flex; flex-direction: column; gap: .4rem;
	padding: 1.6rem; border: 1px solid var( --asm-border ); border-radius: 10px;
	background: var( --asm-surface );
	text-decoration: none; color: inherit;
}
.asm-card-tag { font-size: .68rem; letter-spacing: .1em; text-transform: uppercase; color: var( --asm-accent ); }
.asm-card-title { font-size: 1.15rem; font-weight: 700; }
.asm-card-desc { font-size: .87rem; color: var( --asm-muted ); line-height: 1.6; }

/* Pricing */
.asm-pricing h2 { text-align: center; margin-bottom: .4rem; }
.asm-pricing-sub { text-align: center; color: var( --asm-muted ); margin-bottom: 2.2rem; }
.asm-plans { display: grid; grid-template-columns: repeat( auto-fit, minmax( 250px, 1fr ) ); gap: 1.2rem; align-items: stretch; }
.asm-plan {
	position: relative; display: flex; flex-direction: column;
	padding: 1.8rem; border: 1px solid var( --asm-border ); border-radius: 10px; background: var( --asm-surface );
}
.asm-plan.is-featured { border-color: var( --asm-accent ); border-width: 2px; }
.asm-plan-flag {
	position: absolute; top: -10px; left: 50%; transform: translateX(-50%);
	background: var( --asm-accent ); color: #fff; font-size: .62rem; letter-spacing: .08em; text-transform: uppercase;
	padding: .3rem .7rem; border-radius: 20px; font-weight: 700;
}
.asm-plan-name { font-weight: 700; font-size: 1.05rem; margin: 0 0 .2rem; }
.asm-plan-price { font-size: 1.9rem; font-weight: 700; margin: 0 0 1.2rem; }
.asm-plan-period { font-size: .9rem; font-weight: 400; color: var( --asm-muted ); }
.asm-plan-features { list-style: none; margin: 0 0 1.4rem; padding: 0; display: flex; flex-direction: column; gap: .5rem; flex: 1; }
.asm-plan-features li { font-size: .85rem; padding-left: 1.3rem; position: relative; }
.asm-plan-features li::before { content: '✓'; position: absolute; left: 0; color: var( --asm-accent ); font-weight: 700; }
.asm-plan-features li.is-dim { color: var( --asm-muted ); }
.asm-plan-features li.is-dim::before { content: '—'; color: var( --asm-muted ); }
.asm-plan .asm-btn { justify-content: center; }
.asm-pricing-footnote { text-align: center; color: var( --asm-muted ); font-size: .82rem; margin-top: 2rem; }

/* Account */
.asm-account-guard { text-align: center; }
.asm-account-guard p { color: var( --asm-muted ); margin-bottom: 1rem; }
.asm-account-head { display: flex; align-items: center; gap: 1.1rem; margin-bottom: 2rem; }
.asm-avatar { border-radius: 50%; }
.asm-account-name { font-size: 1.4rem; font-weight: 700; margin: 0; }
.asm-account-email { color: var( --asm-muted ); margin: 0; font-size: .9rem; }
.asm-account-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 1.4rem; }
@media ( max-width: 700px ) { .asm-account-grid { grid-template-columns: 1fr; } }
.asm-account-card { border: 1px solid var( --asm-border ); border-radius: 10px; padding: 1.6rem; background: var( --asm-surface ); }
.asm-account-card h3 { margin: 0 0 1rem; font-size: 1rem; }
.asm-plan-badge { display: inline-block; font-size: .68rem; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; padding: .3rem .7rem; border-radius: 20px; margin-bottom: 1rem; background: var( --asm-accent ); color: #fff; }
.asm-days-left { font-size: 2.1rem; font-weight: 700; margin: 0; }
.asm-days-left span { font-size: .9rem; font-weight: 400; color: var( --asm-muted ); }
.asm-muted { color: var( --asm-muted ); font-size: .85rem; }
.asm-limit-list, .asm-detail-list { list-style: none; margin: 1rem 0 0; padding-top: 1rem; border-top: 1px solid var( --asm-border ); }
.asm-limit-list li, .asm-detail-list li { display: flex; justify-content: space-between; padding: .5rem 0; font-size: .87rem; gap: 1rem; }
.asm-detail-list li { border-bottom: 1px solid var( --asm-border ); }
.asm-detail-list li:last-child { border-bottom: none; }
.asm-limit-value { font-weight: 600; }
.asm-limit-value.is-good { color: #2a9d5c; }
.asm-limit-value.is-bad { color: #c0392b; }
.asm-account-actions { display: flex; gap: .7rem; flex-wrap: wrap; margin-top: 1.3rem; }

/* My Projects page */
.asm-projects-head { text-align: center; margin-bottom: 2.6rem; }
.asm-projects-head h1 { margin: 0 0 .4rem; }
.asm-project-section { margin-bottom: 3rem; }
.asm-project-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-bottom: 1.2rem; flex-wrap: wrap; }
.asm-project-section-head h2 { margin: 0; font-size: 1.2rem; }
.asm-project-grid { display: grid; grid-template-columns: repeat( auto-fill, minmax( 180px, 1fr ) ); gap: 1.1rem; }
.asm-project-loading, .asm-project-empty { color: var( --asm-muted ); font-size: .9rem; grid-column: 1 / -1; }
.asm-project-card { position: relative; border: 1px solid var( --asm-border ); border-radius: 10px; overflow: hidden; background: var( --asm-surface ); }
.asm-project-thumb { display: block; width: 100%; aspect-ratio: 16 / 10; background-size: cover; background-position: center; background-color: rgba( 0, 0, 0, 0.06 ); }
.asm-project-thumb-empty::after { content: '🎬'; display: flex; align-items: center; justify-content: center; height: 100%; font-size: 1.8rem; opacity: .35; }
.asm-project-name { display: block; padding: .7rem .8rem 0; font-weight: 600; font-size: .9rem; text-decoration: none; color: inherit; }
.asm-project-name:hover { color: var( --asm-accent ); }
.asm-project-meta { margin: .2rem 0 .8rem; padding: 0 .8rem; font-size: .76rem; color: var( --asm-muted ); }
.asm-project-delete {
	position: absolute; top: .5rem; right: .5rem; width: 24px; height: 24px; border-radius: 50%;
	border: none; background: rgba( 0, 0, 0, 0.55 ); color: #fff; font-size: 1rem; line-height: 1;
	cursor: pointer; display: flex; align-items: center; justify-content: center;
}
.asm-project-delete:hover { background: #c0392b; }