/**
 * Ataa — Component Styles
 * Buttons, Cards, Badges, Progress, Forms, Inputs
 *
 * @package Ataa
 */

/* ════════════════════════════════════════════
   BUTTONS
════════════════════════════════════════════ */
.ataa-btn {
	display:         inline-flex;
	align-items:     center;
	justify-content: center;
	gap:             var(--ataa-space-2);
	padding:         0.85rem 2rem;
	border-radius:   var(--ataa-rb);
	font-family:     var(--ataa-font-body);
	font-weight:     700;
	font-size:       var(--ataa-text-base);
	line-height:     1;
	cursor:          pointer;
	border:          2px solid transparent;
	text-decoration: none;
	white-space:     nowrap;
	transition:      var(--ataa-transition);
	user-select:     none;
}

.ataa-btn--primary {
	background:    var(--ataa-btn-bg);
	color:         var(--ataa-btn-text);
	border-color:  var(--ataa-btn-bg);
}

.ataa-btn--primary:hover {
	filter:        brightness(1.09);
	transform:     translateY(-1px);
	box-shadow:    var(--ataa-shadow-md);
	color:         var(--ataa-btn-text);
}

.ataa-btn--ghost {
	background:   transparent;
	color:        var(--ataa-inv);
	border-color: oklch(1 0 0 / 0.28);
}

.ataa-btn--ghost:hover {
	background: oklch(1 0 0 / 0.1);
	color:      var(--ataa-inv);
}

.ataa-btn--outline {
	background:   transparent;
	color:        var(--ataa-primary);
	border-color: var(--ataa-primary);
}

.ataa-btn--outline:hover {
	background: var(--ataa-primary);
	color:      var(--ataa-inv);
}

.ataa-btn--lg {
	padding:   1.1rem 2.75rem;
	font-size: var(--ataa-text-lg);
}

.ataa-btn--sm {
	padding:   0.5rem 1.2rem;
	font-size: var(--ataa-text-sm);
}

.ataa-btn--full {
	width: 100%;
}

/* ════════════════════════════════════════════
   CARDS
════════════════════════════════════════════ */
.ataa-card {
	background:    var(--ataa-surface);
	border-radius: var(--ataa-r);
	border:        1px solid var(--ataa-border);
	overflow:      hidden;
	transition:    var(--ataa-transition);
}

.ataa-card--hover:hover {
	transform:  translateY(-4px);
	box-shadow: var(--ataa-shadow-lg);
}

/* ════════════════════════════════════════════
   BADGES
════════════════════════════════════════════ */
.ataa-badge {
	display:       inline-flex;
	align-items:   center;
	gap:           var(--ataa-space-1);
	padding:       0.3rem 0.8rem;
	border-radius: var(--ataa-rpill);
	font-size:     var(--ataa-text-xs);
	font-weight:   700;
	white-space:   nowrap;
}

.ataa-badge--urgent {
	background: var(--ataa-urgent);
	color:      #fff;
}

.ataa-badge--gold {
	background: var(--ataa-gold);
	color:      var(--ataa-btn-text);
}

.ataa-badge--subtle {
	background: var(--ataa-bg2);
	color:      var(--ataa-muted);
	border:     1px solid var(--ataa-border);
}

.ataa-badge--primary {
	background: oklch(from var(--ataa-primary) l c h / 0.12);
	color:      var(--ataa-primary);
	border:     1px solid oklch(from var(--ataa-primary) l c h / 0.25);
}

/* ════════════════════════════════════════════
   PROGRESS BAR
════════════════════════════════════════════ */
.ataa-progress {
	height:        10px;
	background:    var(--ataa-border);
	border-radius: var(--ataa-rpill);
	overflow:      hidden;
}

.ataa-progress--lg {
	height: 14px;
}

.ataa-progress__fill {
	height:        100%;
	background:    var(--ataa-progress);
	border-radius: var(--ataa-rpill);
	transition:    width 1.2s ease;
}

/* ════════════════════════════════════════════
   FORM INPUTS
════════════════════════════════════════════ */
.ataa-field {
	display:       flex;
	flex-direction: column;
	gap:           var(--ataa-space-2);
}

.ataa-label {
	font-size:   var(--ataa-text-sm);
	font-weight: 700;
	color:       var(--ataa-text);
}

.ataa-input {
	width:         100%;
	padding:       0.85rem 1.1rem;
	border:        2px solid var(--ataa-border);
	border-radius: var(--ataa-rb);
	background:    var(--ataa-surface);
	color:         var(--ataa-text);
	font-family:   var(--ataa-font-body);
	font-size:     var(--ataa-text-base);
	transition:    border-color var(--ataa-transition);
}

.ataa-input:focus {
	outline:      none;
	border-color: var(--ataa-gold);
	box-shadow:   0 0 0 3px oklch(from var(--ataa-gold) l c h / 0.2);
}

/* ════════════════════════════════════════════
   SECTION HEADING
════════════════════════════════════════════ */
.ataa-section-tag {
	display:       block;
	font-size:     var(--ataa-text-xs);
	font-weight:   700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color:         var(--ataa-gold);
	margin-bottom: var(--ataa-space-2);
}

.ataa-section-title {
	font-size:     clamp(1.8rem, 3.5vw, 2.9rem);
	font-weight:   900;
	margin-bottom: var(--ataa-space-3);
	color:         var(--ataa-text);
}

.ataa-section-sub {
	color:       var(--ataa-muted);
	font-size:   var(--ataa-text-lg);
	max-width:   52ch;
	line-height: var(--ataa-lh-loose);
}

.ataa-section-head--center {
	text-align: center;
}

.ataa-section-head--center .ataa-section-sub {
	margin-inline: auto;
}

/* ════════════════════════════════════════════
   GRID UTILITIES
════════════════════════════════════════════ */
.ataa-grid-3 {
	display:               grid;
	grid-template-columns: repeat(auto-fill, minmax(285px, 1fr));
	gap:                   var(--ataa-space-6);
}

.ataa-grid-4 {
	display:               grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	gap:                   var(--ataa-space-6);
}

/* ════════════════════════════════════════════
   DIVIDER
════════════════════════════════════════════ */
.ataa-divider {
	border: none;
	border-top: 1px solid var(--ataa-border);
	margin-block: var(--ataa-space-8);
}

/* ════════════════════════════════════════════
   URGENT PULSE ANIMATION
════════════════════════════════════════════ */
@keyframes ataa-pulse {
	0%,  100% { box-shadow: 0 0 0 0   oklch(0.55 0.18 35 / 0.4); }
	50%        { box-shadow: 0 0 0 6px oklch(0.55 0.18 35 / 0); }
}

.ataa-pulse {
	animation: ataa-pulse 2s infinite;
}

/* ════════════════════════════════════════════
   COUNTER ANIMATION STATE
════════════════════════════════════════════ */
.ataa-counter[data-animated="false"] {
	opacity: 0.6;
}

/* ════════════════════════════════════════════
   MOBILE STICKY CTA
════════════════════════════════════════════ */
.ataa-sticky-cta {
	position:   fixed;
	bottom:     0;
	inset-inline: 0;
	z-index:    var(--ataa-z-nav);
	background: var(--ataa-bg);
	border-top: 1px solid var(--ataa-border);
	padding:    var(--ataa-space-4) var(--ataa-space-6);
	display:    none;
	gap:        var(--ataa-space-3);
	align-items: center;
}

@media (max-width: 768px) {
	.ataa-sticky-cta {
		display: flex;
	}
}