/* ============================================================
   Asopadres – Listas Escolares | Frontend styles
   ============================================================ */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

/* ── Wrapper ─────────────────────────────────────────────────── */
.ale-comprar-lista {
	--ale-primary:    #1e6fa3;
	--ale-primary-dk: #14527a;
	--ale-accent:     #f0a500;
	--ale-radius:     10px;
	--ale-shadow:     0 4px 18px rgba(0,0,0,.10);

	font-family: 'Inter', sans-serif;
	max-width:   740px;
	margin:      0 auto 2rem;
}

/* ── Preview table ───────────────────────────────────────────── */
.ale-preview-table-wrapper {
	overflow-x:    auto;
	border-radius: var(--ale-radius);
	box-shadow:    var(--ale-shadow);
	margin-bottom: 1.25rem;
}

.ale-preview-table {
	width:           100%;
	border-collapse: collapse;
	font-size:       0.92rem;
	background:      #fff;
}

.ale-preview-table caption {
	font-size:     1.05rem;
	font-weight:   700;
	color:         var(--ale-primary);
	padding:       0.85rem 1rem 0.6rem;
	text-align:    left;
	border-bottom: 2px solid var(--ale-primary);
}

.ale-preview-table thead th {
	background:  var(--ale-primary);
	color:       #fff;
	padding:     0.6rem 1rem;
	font-weight: 600;
	text-align:  left;
}

.ale-preview-table tbody tr {
	transition: background .15s;
}
.ale-preview-table tbody tr:nth-child(even) {
	background: #f5f8fb;
}
.ale-preview-table tbody tr:hover {
	background: #e8f0f8;
}
.ale-preview-table td {
	padding:       0.55rem 1rem;
	border-bottom: 1px solid #e4e8ef;
	color:         #333;
	vertical-align: middle;
}

/* ── Variable product rows ───────────────────────────────────── */
.ale-row-variable {
	transition: background .2s, box-shadow .2s;
}

/* Badge "Elige opción" */
.ale-variable-badge {
	display:       inline-block;
	margin-left:   0.4rem;
	padding:       2px 7px;
	font-size:     0.72rem;
	font-weight:   600;
	color:         #1e6fa3;
	background:    #dbeafe;
	border-radius: 20px;
	vertical-align: middle;
	white-space:   nowrap;
}

/* Variation selector group */
.ale-variation-selects {
	display:        flex;
	flex-direction: column;
	gap:            6px;
}

.ale-attr-group {
	display:     flex;
	align-items: center;
	gap:         8px;
}

.ale-attr-label {
	font-size:   0.82rem;
	font-weight: 600;
	color:       #555;
	min-width:   56px;
	white-space: nowrap;
}

.ale-attr-select {
	flex:          1;
	padding:       5px 8px;
	font-size:     0.85rem;
	font-family:   'Inter', sans-serif;
	border:        1px solid #bdc6d0;
	border-radius: 6px;
	background:    #fff;
	color:         #222;
	cursor:        pointer;
	transition:    border-color .15s, box-shadow .15s;
	min-width:     110px;
}
.ale-attr-select:focus {
	outline:      none;
	border-color: var(--ale-primary);
	box-shadow:   0 0 0 2px rgba(30,111,163,.18);
}

/* Validation states */
.ale-variation-complete .ale-attr-select {
	border-color: #27ae60;
}

.ale-variation-incomplete {
	background: #fff8f0 !important;
}
.ale-variation-incomplete:nth-child(even) {
	background: #fff3e8 !important;
}

.ale-select-error {
	border-color: #e74c3c !important;
	box-shadow:   0 0 0 2px rgba(231,76,60,.18) !important;
	animation:    ale-shake .3s ease;
}

@keyframes ale-shake {
	0%,100% { transform: translateX(0); }
	25%      { transform: translateX(-4px); }
	75%      { transform: translateX(4px); }
}

/* No variation placeholder */
.ale-no-variation {
	color:      #aaa;
	font-style: italic;
	font-size:  0.85rem;
}

/* ── Add to cart button ──────────────────────────────────────── */
.ale-btn-add-to-cart {
	display:          inline-flex;
	align-items:      center;
	gap:              0.5rem;
	background:       linear-gradient(135deg, var(--ale-primary) 0%, var(--ale-primary-dk) 100%);
	color:            #fff !important;
	border:           none !important;
	padding:          0.75rem 1.75rem !important;
	font-size:        1rem !important;
	font-weight:      600 !important;
	font-family:      'Inter', sans-serif !important;
	border-radius:    50px !important;
	cursor:           pointer;
	transition:       transform .15s, box-shadow .15s, background .2s;
	box-shadow:       0 4px 14px rgba(30,111,163,.35);
	width:            100%;
	justify-content:  center;
	text-transform:   none !important;
	letter-spacing:   .01em;
}

.ale-btn-add-to-cart:hover:not(:disabled) {
	background:  linear-gradient(135deg, #2482c0 0%, #1a6490 100%);
	box-shadow:  0 6px 20px rgba(30,111,163,.45);
	transform:   translateY(-2px);
}

.ale-btn-add-to-cart:active:not(:disabled) {
	transform: translateY(0);
}

.ale-btn-add-to-cart:disabled {
	opacity: .7;
	cursor:  not-allowed;
}

/* Spinner state */
.ale-btn-add-to-cart .ale-btn-spinner {
	display: none;
}
.ale-btn-add-to-cart.ale-loading .ale-btn-text {
	display: none;
}
.ale-btn-add-to-cart.ale-loading .ale-btn-spinner {
	display:   inline;
	animation: ale-pulse 1s infinite;
}

@keyframes ale-pulse {
	0%,100% { opacity: 1; }
	50%      { opacity: .45; }
}

/* ── Notices ─────────────────────────────────────────────────── */
.ale-notices {
	margin-top: 1rem;
	font-size:  0.9rem;
}

.ale-success-msg {
	color:         #2a6e3b;
	background:    #e8f5ec;
	border-left:   4px solid #2a6e3b;
	border-radius: 6px;
	padding:       .65rem 1rem;
	margin:        0 0 .5rem;
	font-weight:   500;
}

.ale-error-msg {
	color:         #922;
	background:    #fdf3f3;
	border-left:   4px solid #c33;
	border-radius: 6px;
	padding:       .65rem 1rem;
	margin:        0 0 .5rem;
	font-weight:   500;
}

.ale-skipped-list {
	margin:    .35rem 0 0 1.1rem;
	padding:   0;
	color:     #7a5500;
	font-size: 0.84rem;
}
.ale-skipped-list li {
	margin-bottom: .25rem;
}

/* ── Shortcode error (list not found) ───────────────────────── */
.ale-error {
	color:         #922;
	padding:       .75rem 1rem;
	border:        1px solid #f5c6c6;
	border-radius: var(--ale-radius);
	background:    #fff5f5;
}