/* ============================================================================
   K-12Buddy Unified Professional Styling
   Consistent rounded corners, spacing, and professional appearance
   ============================================================================ */

/* === GLOBAL BUTTON STYLES === */
button, .btn, a.btn {
    border-radius: 0.5rem !important; /* 8px rounded corners */
    transition: all 0.3s ease !important;
}

/* Primary Buttons */
button.bg-blue-600, .btn-primary {
    border-radius: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 600 !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important;
}

button.bg-blue-600:hover, .btn-primary:hover {
    transform: translateY(-1px) !important;
    box-shadow: 0 4px 12px rgba(59,130,246,0.3) !important;
}

/* Secondary Buttons */
button.bg-white, button.border-blue-600, .btn-secondary {
    border-radius: 0.5rem !important;
    padding: 0.625rem 1.25rem !important;
    font-weight: 600 !important;
}

/* Gradient Buttons */
.bg-gradient-to-r, .btn-gradient {
    border-radius: 0.75rem !important; /* 12px for gradient buttons */
    padding: 0.75rem 1.5rem !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
}

.bg-gradient-to-r:hover, .btn-gradient:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.2) !important;
}

/* === CARD STYLES === */
.bg-white.rounded-xl, .card, [class*="rounded-"] {
    border-radius: 1rem !important; /* 16px */
    box-shadow: 0 2px 8px rgba(0,0,0,0.08) !important;
    transition: all 0.3s ease !important;
}

.bg-white.rounded-xl:hover, .card:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
    transform: translateY(-2px) !important;
}

/* === FEATURE CARDS === */
.feature-card, div[class*="shadow-lg"] {
    border-radius: 1rem !important;
    overflow: hidden !important;
}

/* === INPUT FIELDS === */
input, textarea, select {
    border-radius: 0.5rem !important;
    border: 1px solid #e5e7eb !important;
    transition: all 0.2s ease !important;
}

input:focus, textarea:focus, select:focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.1) !important;
    outline: none !important;
}

/* === PRICING CARDS === */
.pricing-card, [class*="pricing"] {
    border-radius: 1.5rem !important; /* 24px for pricing */
    border: 2px solid #e5e7eb !important;
    transition: all 0.3s ease !important;
}

.pricing-card:hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 12px 32px rgba(59,130,246,0.15) !important;
    transform: translateY(-4px) scale(1.02) !important;
}

/* === BADGES === */
.badge, span[class*="badge"], span[class*="bg-"][class*="px-"] {
    border-radius: 9999px !important; /* Full rounded */
    padding: 0.25rem 0.75rem !important;
    font-size: 0.75rem !important;
    font-weight: 600 !important;
}

/* === SECTIONS === */
section {
    padding: 4rem 1rem !important;
}

@media (min-width: 768px) {
    section {
        padding: 5rem 1rem !important;
    }
}

/* === MODALS === */
.modal, [id*="modal"] > div {
    border-radius: 1.5rem !important;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important;
}

/* === NAVIGATION LINKS === */
nav a {
    border-radius: 0.5rem !important;
    padding: 0.5rem 0.75rem !important;
    transition: all 0.2s ease !important;
}

nav a:hover {
    background-color: rgba(59,130,246,0.1) !important;
}

/* === HERO SECTION === */
.hero-animated-gradient, [class*="hero"] {
    border-radius: 0 !important; /* No rounding on full-width hero */
}

/* === CTA BUTTONS === */
.cta-button, button[class*="glow"], a[class*="glow"] {
    border-radius: 0.75rem !important;
    padding: 1rem 2rem !important;
    font-size: 1.125rem !important;
    font-weight: 700 !important;
}

/* === FORM GROUPS === */
.form-group, div:has(> input), div:has(> textarea) {
    margin-bottom: 1rem !important;
}

/* === TAGS === */
.tag, span[class*="text-"][class*="bg-"] {
    border-radius: 0.375rem !important;
    padding: 0.125rem 0.5rem !important;
}

/* === INTERACTIVE ELEMENTS === */
.interactive-card {
    border-radius: 1rem !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.interactive-card:hover {
    transform: translateY(-4px) scale(1.02) !important;
    box-shadow: 0 12px 32px rgba(0,0,0,0.12) !important;
}

/* === TRUST INDICATORS === */
.trust-indicator {
    border-radius: 9999px !important;
    padding: 0.5rem 1rem !important;
    background: rgba(255,255,255,0.2) !important;
    backdrop-filter: blur(10px) !important;
}

/* === PROFESSIONAL OVERRIDES === */
/* Ensure all rounded elements are consistent */
[class*="rounded-2xl"] {
    border-radius: 1rem !important;
}

[class*="rounded-lg"] {
    border-radius: 0.5rem !important;
}

[class*="rounded-xl"] {
    border-radius: 0.75rem !important;
}

/* === ACCESSIBILITY === */
*:focus-visible {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
    border-radius: 0.25rem !important;
}

/* === SMOOTH TRANSITIONS === */
* {
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important;
}

/* === CONSISTENT SHADOWS === */
.shadow-sm {
    box-shadow: 0 1px 2px rgba(0,0,0,0.05) !important;
}

.shadow {
    box-shadow: 0 1px 3px rgba(0,0,0,0.1), 0 1px 2px rgba(0,0,0,0.06) !important;
}

.shadow-md {
    box-shadow: 0 4px 6px rgba(0,0,0,0.07), 0 2px 4px rgba(0,0,0,0.06) !important;
}

.shadow-lg {
    box-shadow: 0 10px 15px rgba(0,0,0,0.1), 0 4px 6px rgba(0,0,0,0.05) !important;
}

.shadow-xl {
    box-shadow: 0 20px 25px rgba(0,0,0,0.1), 0 10px 10px rgba(0,0,0,0.04) !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px rgba(0,0,0,0.15) !important;
}

/* === RESPONSIVE SPACING === */
@media (max-width: 768px) {
    button, .btn {
        padding: 0.5rem 1rem !important;
        font-size: 0.875rem !important;
    }

    .cta-button {
        padding: 0.75rem 1.5rem !important;
        font-size: 1rem !important;
    }
}

/* === PROFESSIONAL POLISH === */
/* Remove sharp corners from all elements */
* {
    border-radius: inherit;
}

/* Ensure consistent button heights */
button, .btn, a.btn {
    min-height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* === ICON BUTTONS === */
button:has(> i:only-child), button:has(> svg:only-child) {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0 !important;
    border-radius: 0.5rem !important;
}

/* === MOBILE OPTIMIZATIONS === */
@media (max-width: 640px) {
    .shadow-xl, .shadow-2xl {
        box-shadow: 0 10px 20px rgba(0,0,0,0.1) !important;
    }

    section {
        padding: 2rem 1rem !important;
    }
}