/* ============================================
   Rfts Utility Classes & Responsive
   ============================================ */

/* ============================================
   Loading States
   ============================================ */
.loading-spinner {
    display: inline-block;
    width: 20px;
    height: 20px;
    border: 3px solid rgba(255, 255, 255, 0.3);
    border-radius: 50%;
    border-top-color: #fff;
    animation: spin 1s ease-in-out infinite;
}

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

/* ============================================
   Spacing Utilities
   ============================================ */
.section-padding {
    padding: 4rem 0;
}

.section-padding-sm {
    padding: 2rem 0;
}

/* ============================================
   Shadow Utilities
   ============================================ */
.shadow-soft {
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
}

.shadow-hover {
    transition: box-shadow 0.3s ease;
}

.shadow-hover:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* ============================================
   Border Radius Utilities
   ============================================ */
.rounded-lg {
    border-radius: 1rem;
}

.rounded-xl {
    border-radius: 1.5rem;
}

/* ============================================
   Responsive Utilities
   ============================================ */
@media (max-width: 768px) {
    .hero-section {
        padding: 2rem 0;
    }

    .hero-section h1 {
        font-size: 2rem;
    }

    .section-padding {
        padding: 2rem 0;
    }

    .card-body {
        padding: 1rem;
    }

    .navbar-brand {
        font-size: 1.25rem;
    }
}

@media (max-width: 576px) {
    .btn {
        font-size: 0.875rem;
        padding: 0.5rem 1rem;
    }

    .card-title {
        font-size: 1.1rem;
    }

    .price-tag {
        font-size: 1rem;
    }
}

/* ============================================
   Print Styles
   ============================================ */
@media print {
    .navbar,
    .footer,
    .btn,
    .no-print {
        display: none !important;
    }

    body {
        font-size: 12pt;
    }

    a {
        text-decoration: underline;
    }
}