/* ========================================
   ASHKER STUDIO REDESIGN - COMPONENT STYLES
   Premium Professional Theme
   ======================================== */

/* ========================================
   BASE STYLES & RESETS
   ======================================== */

body {
    font-family: 'Inter', sans-serif;
    line-height: 1.6;
}

html {
    scroll-behavior: smooth;
}

/* ========================================
   TYPOGRAPHY
   ======================================== */

h1, h2, h3, h4, h5, h6 {
    font-family: 'Sohne', 'Inter Display', sans-serif;
    font-weight: 600;
    line-height: 1.2;
}

h1 {
    font-size: clamp(2rem, 8vw, 4rem);
    font-weight: 700;
}

h2 {
    font-size: clamp(1.75rem, 6vw, 2.5rem);
}

h3 {
    font-size: clamp(1.5rem, 5vw, 2rem);
}

code, pre {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.95em;
}

/* ========================================
   BUTTONS & LINKS
   ======================================== */

/* Primary Button */
.btn-primary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 bg-teal-primary text-white font-semibold rounded-lg hover:bg-teal-600 focus:outline-none focus:ring-2 focus:ring-teal-primary focus:ring-offset-2 transition-all duration-300 shadow-card hover:shadow-glow-teal disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Secondary Button */
.btn-secondary {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 border-2 border-slate-200 text-slate-700 font-semibold rounded-lg hover:border-teal-primary hover:text-teal-primary focus:outline-none focus:ring-2 focus:ring-teal-primary focus:ring-offset-2 transition-all duration-300 disabled:opacity-50 disabled:cursor-not-allowed;
}

/* Tertiary Button (Text only) */
.btn-tertiary {
    @apply inline-flex items-center justify-center gap-2 text-teal-primary font-semibold hover:text-teal-600 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-teal-primary rounded transition-colors duration-300;
}

/* Button Sizes */
.btn-sm {
    @apply px-4 py-2 text-sm;
}

.btn-lg {
    @apply px-8 py-4 text-lg;
}

/* Full Width */
.btn-full {
    @apply w-full;
}

/* Links with underline animation */
a.link-underline {
    position: relative;
    text-decoration: none;
    color: #0EA5E9;
}

a.link-underline::after {
    content: '';
    position: absolute;
    bottom: -4px;
    left: 0;
    width: 0;
    height: 2px;
    background-color: #0EA5E9;
    transition: width 0.3s ease;
}

a.link-underline:hover::after {
    width: 100%;
}

/* ========================================
   CARDS & CONTAINERS
   ======================================== */

/* Basic Card */
.card {
    @apply bg-white border border-slate-200 rounded-lg p-6 shadow-card hover:shadow-md transition-shadow duration-300;
}

/* Card with lift effect on hover */
.card-hover {
    @apply card hover:border-teal-primary/30 hover:-translate-y-1 transition-all duration-300;
}

/* Feature Card */
.feature-card {
    @apply card space-y-4;
}

.feature-card .icon {
    @apply w-12 h-12 rounded-lg bg-teal-primary/10 flex items-center justify-center text-teal-primary;
}

.feature-card h3 {
    @apply text-xl font-bold text-slate-900 mt-4;
}

.feature-card p {
    @apply text-slate-600 text-base leading-relaxed;
}

/* Glass Effect Card */
.card-glass {
    @apply backdrop-blur-md bg-white/80 border border-white/30 rounded-xl p-6 shadow-glass hover:shadow-md transition-all duration-300;
}

/* ========================================
   FORMS & INPUTS
   ======================================== */

input[type="text"],
input[type="email"],
input[type="phone"],
input[type="number"],
textarea,
select {
    @apply w-full px-4 py-3 border border-slate-200 rounded-lg font-base text-slate-900 placeholder-slate-400 focus:outline-none focus:border-teal-primary focus:ring-2 focus:ring-teal-primary/20 transition-all duration-300;
    background-color: #f8fafc;
}

label {
    @apply block text-sm font-semibold text-slate-700 mb-2;
}

.form-group {
    @apply space-y-2 mb-4;
}

/* Form error state */
input:invalid,
textarea:invalid {
    @apply border-rose-500 focus:ring-rose-500/20 focus:border-rose-500;
}

.form-error {
    @apply text-sm text-rose-500 font-medium mt-1;
}

.form-success {
    @apply text-sm text-emerald-500 font-medium mt-1;
}

/* Checkbox & Radio custom */
input[type="checkbox"],
input[type="radio"] {
    @apply w-4 h-4 text-teal-primary rounded focus:ring-2 focus:ring-teal-primary/20 cursor-pointer;
}

/* ========================================
   NAVIGATION COMPONENTS
   ======================================== */

nav {
    @apply bg-white border-b border-slate-200/50;
}

.nav-link {
    @apply text-slate-600 font-medium hover:text-slate-900 hover:text-teal-primary transition-colors duration-300;
}

.nav-link.active {
    @apply text-teal-primary border-b-2 border-teal-primary pb-2;
}

/* Breadcrumb */
.breadcrumb {
    @apply flex items-center gap-2 text-sm text-slate-600;
}

.breadcrumb a {
    @apply hover:text-teal-primary transition-colors;
}

.breadcrumb span {
    @apply text-slate-400;
}

/* ========================================
   BADGES & TAGS
   ======================================== */

.badge {
    @apply inline-block px-3 py-1 rounded-full text-xs font-semibold;
}

.badge-primary {
    @apply badge bg-teal-primary/10 text-teal-primary;
}

.badge-secondary {
    @apply badge bg-slate-200 text-slate-700;
}

.badge-success {
    @apply badge bg-emerald-500/10 text-emerald-600;
}

.badge-warning {
    @apply badge bg-amber-500/10 text-amber-600;
}

.badge-error {
    @apply badge bg-rose-500/10 text-rose-600;
}

/* ========================================
   ALERTS & NOTIFICATIONS
   ======================================== */

.alert {
    @apply px-4 py-3 rounded-lg border font-medium;
}

.alert-success {
    @apply bg-emerald-50 border-emerald-200 text-emerald-800;
}

.alert-warning {
    @apply bg-amber-50 border-amber-200 text-amber-800;
}

.alert-error {
    @apply bg-rose-50 border-rose-200 text-rose-800;
}

.alert-info {
    @apply bg-slate-50 border-slate-200 text-slate-800;
}

/* ========================================
   LOADING & ANIMATIONS
   ======================================== */

/* Skeleton Loader */
.skeleton {
    @apply bg-slate-200 rounded animate-pulse;
}

/* Spinner */
.spinner {
    @apply inline-block w-5 h-5 border-2 border-teal-primary border-t-transparent rounded-full animate-spin;
}

/* Pulse animation */
.pulse-icon {
    @apply animate-pulse;
}

/* ========================================
   TABLES
   ======================================== */

.table-wrapper {
    @apply overflow-x-auto;
}

table {
    @apply w-full border-collapse;
}

th {
    @apply bg-slate-50 px-4 py-3 text-left text-sm font-bold text-slate-700 border-b border-slate-200;
}

td {
    @apply px-4 py-3 text-sm text-slate-600 border-b border-slate-200;
}

tbody tr:hover {
    @apply bg-slate-50;
}

/* ========================================
   MODALS & DROPDOWNS
   ======================================== */

.modal-overlay {
    @apply fixed inset-0 bg-black/50 backdrop-blur-sm z-50 flex items-center justify-center;
}

.modal {
    @apply bg-white rounded-2xl shadow-lg max-w-2xl w-full mx-4 max-h-[90vh] overflow-y-auto;
}

.modal-header {
    @apply sticky top-0 px-6 py-4 border-b border-slate-200 flex items-center justify-between bg-white;
}

.modal-body {
    @apply px-6 py-6 space-y-4;
}

.modal-footer {
    @apply sticky bottom-0 px-6 py-4 border-t border-slate-200 bg-white flex gap-3 justify-end;
}

/* ========================================
   TESTIMONIAL CAROUSEL
   ======================================== */

.testimonial-card {
    @apply bg-slate-50 border border-slate-200 rounded-xl p-6 space-y-4;
}

.testimonial-quote {
    @apply text-lg italic text-slate-700;
}

.testimonial-author {
    @apply flex items-center gap-3;
}

.testimonial-avatar {
    @apply w-12 h-12 rounded-full bg-gradient-primary;
}

.testimonial-info {
    @apply space-y-1;
}

.testimonial-name {
    @apply font-bold text-slate-900;
}

.testimonial-role {
    @apply text-sm text-slate-600;
}

/* ========================================
   PRICING TABLES
   ======================================== */

.pricing-table {
    @apply overflow-x-auto;
}

.pricing-tier {
    @apply bg-white border border-slate-200 rounded-xl p-6 space-y-6 relative;
}

.pricing-tier.featured {
    @apply border-teal-primary border-2 shadow-lg scale-105;
}

.pricing-tier.featured::before {
    content: 'MOST POPULAR';
    @apply absolute top-0 left-1/2 -translate-x-1/2 -translate-y-1/2 px-3 py-1 bg-teal-primary text-white text-xs font-bold rounded-full;
}

.pricing-title {
    @apply text-2xl font-bold text-slate-900;
}

.pricing-price {
    @apply text-4xl font-bold text-slate-900;
}

.pricing-period {
    @apply text-slate-600 text-base;
}

.pricing-description {
    @apply text-slate-600;
}

.pricing-features {
    @apply space-y-3 border-t border-b border-slate-200 py-6;
}

.pricing-feature {
    @apply flex items-start gap-3;
}

.pricing-feature-check {
    @apply w-5 h-5 text-emerald-500 flex-shrink-0 mt-0.5;
}

/* ========================================
   TIMELINE
   ======================================== */

.timeline {
    @apply space-y-8;
}

.timeline-item {
    @apply flex gap-6;
}

.timeline-marker {
    @apply flex-shrink-0 w-12 h-12 rounded-full bg-teal-primary/10 border-2 border-teal-primary flex items-center justify-center font-bold text-teal-primary;
}

.timeline-content {
    @apply pt-2;
}

.timeline-title {
    @apply text-xl font-bold text-slate-900;
}

.timeline-description {
    @apply text-slate-600 mt-2;
}

/* ========================================
   UTILITY CLASSES
   ======================================== */

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.focus:not-sr-only {
    position: static;
    width: auto;
    height: auto;
    padding: inherit;
    margin: inherit;
    overflow: visible;
    clip: auto;
    white-space: normal;
}

.container-max {
    @apply max-w-7xl mx-auto;
}

/* ========================================
   RESPONSIVE UTILITIES
   ======================================== */

@media (max-width: 640px) {
    h1 {
        @apply text-2xl;
    }

    h2 {
        @apply text-xl;
    }

    h3 {
        @apply text-lg;
    }

    .pricing-tier.featured {
        @apply scale-100;
    }
}

/* ========================================
   DARK MODE SUPPORT (optional)
   ======================================== */

@media (prefers-color-scheme: dark) {
    .card {
        @apply bg-slate-800 border-slate-700;
    }

    input, textarea, select {
        @apply bg-slate-800 border-slate-700 text-slate-100;
    }

    label {
        @apply text-slate-300;
    }
}