/**
 * Pawsitive Placements - Component Styles
 *
 * Extracted from inline styles in monetization and utility templates.
 * Loaded after main.css so these classes can override base styles.
 */

/* ==========================================================================
   Amazon Affiliate Card  (blog/post.php)
   ========================================================================== */

.amazon-affiliate-card {
    background: #fffbf0;
    border: 1px solid #ffe082;
}

.amazon-affiliate-card .card-title {
    color: #b45309;
}

.amazon-affiliate-card .fa-amazon {
    color: #FF9900;
}

.btn-amazon {
    background: #FF9900;
    border-color: #FF9900;
    color: #fff;
}

.btn-amazon:hover {
    background: #e88a00;
    border-color: #e88a00;
    color: #fff;
}

.affiliate-disclaimer {
    font-size: 0.7rem;
    color: #9ca3af;
}

/* ==========================================================================
   Insurance CTA Card  (application/adoption_checklist.php)
   ========================================================================== */

.insurance-cta-card {
    background: linear-gradient(135deg, #fff8f0 0%, #fff3e8 100%);
    border: 1px solid #fde8d0;
    border-left: 4px solid #fd7e14;
}

/* ==========================================================================
   Confirmation Info Card  (application/confirmation.php)
   ========================================================================== */

.confirmation-info-card {
    background: linear-gradient(135deg, #f0f7ff 0%, #e8f4fd 100%);
    border-left: 4px solid #0d6efd;
}

/* ==========================================================================
   Icon Size Utilities
   ========================================================================== */

.icon-xl {
    font-size: 2.5rem;
}

/* ==========================================================================
   Loading Button State
   ========================================================================== */

.btn-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}

.btn-loading .btn-text {
    visibility: hidden;
}

.btn-loading::after {
    content: "";
    position: absolute;
    inset: 0;
    margin: auto;
    width: 1.25rem;
    height: 1.25rem;
    border: 2px solid currentColor;
    border-right-color: transparent;
    border-radius: 50%;
    animation: btn-spin 0.6s linear infinite;
}

@keyframes btn-spin {
    to { transform: rotate(360deg); }
}

/* ==========================================================================
   Skeleton Loading Placeholder
   ========================================================================== */

.skeleton {
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: skeleton-pulse 1.5s ease-in-out infinite;
    border-radius: var(--pp-radius-sm, 8px);
}

@keyframes skeleton-pulse {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.skeleton-text {
    height: 1rem;
    margin-bottom: 0.5rem;
}

.skeleton-title {
    height: 1.5rem;
    width: 60%;
    margin-bottom: 0.75rem;
}

.skeleton-img {
    height: 200px;
}