/* Custom CSS for AutoP2P Landing Page */

/* Global Styles */
* {
    scroll-behavior: smooth;
}

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

/* Hero Section Background */
#hero {
    background: linear-gradient(135deg, var(--bg-primary) 0%, var(--bg-secondary) 50%, var(--color-primary) 100%);
    position: relative;
}

#hero::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url('../images/hero-bg.jpg') center/cover no-repeat;
    opacity: 0.1;
    z-index: 1;
}

/* Animated background particles */
#hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image:
        radial-gradient(circle at 20% 80%, rgba(30, 64, 175, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 80% 20%, rgba(16, 185, 129, 0.3) 0%, transparent 50%),
        radial-gradient(circle at 40% 40%, rgba(245, 158, 11, 0.2) 0%, transparent 50%);
    animation: float 6s ease-in-out infinite;
    z-index: 2;
}

@keyframes float {

    0%,
    100% {
        transform: translateY(0px) rotate(0deg);
    }

    50% {
        transform: translateY(-20px) rotate(180deg);
    }
}

/* Button Styles */
.btn-primary {
    @apply bg-primary hover:bg-blue-700 text-white font-semibold py-4 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
}

.btn-secondary {
    @apply bg-transparent border-2 border-secondary text-secondary hover:bg-secondary hover:text-dark font-semibold py-4 px-8 rounded-lg transition-all duration-300 transform hover:scale-105;
}

.btn-accent {
    @apply bg-accent hover:bg-green-600 text-white font-semibold py-4 px-8 rounded-lg transition-all duration-300 transform hover:scale-105 hover:shadow-lg;
}

/* Card Styles */
.feature-card {
    @apply bg-dark-light border border-gray-700 rounded-xl p-6 transition-all duration-300 hover:border-primary hover:shadow-xl hover:shadow-primary/20 hover:transform hover:scale-105;
}

.testimonial-card {
    @apply bg-dark border border-gray-700 rounded-xl p-8 transition-all duration-300 hover:border-accent hover:shadow-xl hover:shadow-accent/20;
}

/* Typography */
.hero-title {
    @apply text-5xl md:text-6xl lg:text-7xl font-bold leading-tight;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--text-secondary) 50%, var(--color-warning) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    text-shadow: 0 0 30px rgba(245, 158, 11, 0.3);
}

.section-title {
    @apply text-3xl md:text-4xl lg:text-5xl font-bold text-center mb-4;
    background: linear-gradient(135deg, var(--text-primary) 0%, var(--color-success) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.section-subtitle {
    @apply text-lg md:text-xl text-gray-medium text-center mb-12 max-w-3xl mx-auto;
}

/* Animations */
.fade-in {
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.6s ease-out;
}

.fade-in.visible {
    opacity: 1;
    transform: translateY(0);
}

.slide-in-left {
    opacity: 0;
    transform: translateX(-50px);
    transition: all 0.6s ease-out;
}

.slide-in-left.visible {
    opacity: 1;
    transform: translateX(0);
}

.slide-in-right {
    opacity: 0;
    transform: translateX(50px);
    transition: all 0.6s ease-out;
}

.slide-in-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Glow Effects */
.glow-primary {
    box-shadow: 0 0 20px rgba(30, 64, 175, 0.5);
}

.glow-accent {
    box-shadow: 0 0 20px rgba(16, 185, 129, 0.5);
}

.glow-secondary {
    box-shadow: 0 0 20px rgba(245, 158, 11, 0.5);
}

/* Comparison Table */
.comparison-table {
    @apply w-full bg-dark-light rounded-xl overflow-hidden border border-gray-700;
}

.comparison-table th {
    @apply bg-primary text-white font-semibold py-4 px-6 text-left;
}

.comparison-table td {
    @apply py-4 px-6 border-b border-gray-700;
}

.comparison-table tr:nth-child(even) {
    @apply bg-gray-800/30;
}

.comparison-table tr:hover {
    @apply bg-primary/10;
}

/* FAQ Accordion */
.faq-item {
    @apply border border-gray-700 rounded-lg mb-4 overflow-hidden;
}

.faq-question {
    @apply w-full text-left p-6 bg-dark-light hover:bg-gray-800 transition-colors duration-200 font-semibold text-lg;
}

.faq-answer {
    @apply p-6 bg-dark border-t border-gray-700 text-gray-light;
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out;
}

.faq-answer.open {
    max-height: 500px;
}

/* Progress Steps */
.step-connector {
    @apply w-full h-1 bg-gray-700 relative;
}

.step-connector::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-success));
    width: 0%;
    transition: width 1s ease-in-out;
}

.step-connector.active::after {
    width: 100%;
}

.step-number {
    @apply w-12 h-12 rounded-full flex items-center justify-center font-bold text-lg;
    background: linear-gradient(135deg, var(--color-primary), var(--color-success));
}

/* Enhanced Mobile Optimizations */
@media (max-width: 768px) {
    .hero-title {
        @apply text-3xl leading-tight;
    }

    .section-title {
        @apply text-2xl leading-tight;
    }

    .section-subtitle {
        @apply text-base px-4;
    }

    .btn-primary,
    .btn-secondary,
    .btn-accent {
        @apply py-3 px-6 text-sm w-full;
    }

    .feature-card {
        @apply p-4 mx-2;
    }

    .testimonial-card {
        @apply p-4 mx-2;
    }

    /* Mobile-specific spacing */
    .container {
        @apply px-4;
    }

    /* Mobile demo tabs */
    .demo-tab {
        @apply text-xs px-3 py-2;
    }

    /* Mobile comparison table */
    .comparison-table {
        @apply text-xs;
    }

    .comparison-table th,
    .comparison-table td {
        @apply px-2 py-3;
    }

    /* Mobile FAQ */
    .faq-question {
        @apply text-base p-4;
    }

    .faq-answer {
        @apply p-4 text-sm;
    }
}

/* Tablet Optimizations */
@media (min-width: 769px) and (max-width: 1023px) {
    .hero-title {
        @apply text-5xl;
    }

    .section-title {
        @apply text-3xl;
    }

    .feature-card {
        @apply p-5;
    }

    .testimonial-card {
        @apply p-6;
    }

    /* Tablet grid adjustments */
    .features-grid-tablet {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Large Desktop Optimizations */
@media (min-width: 1440px) {
    .hero-title {
        @apply text-7xl;
    }

    .section-title {
        @apply text-5xl;
    }

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

    .feature-card {
        @apply p-8;
    }

    .testimonial-card {
        @apply p-8;
    }
}

/* Touch-friendly improvements */
@media (hover: none) and (pointer: coarse) {

    .btn-primary,
    .btn-secondary,
    .btn-accent {
        @apply py-4 px-8 text-base;
        min-height: 44px;
        min-width: 44px;
    }

    .demo-tab {
        @apply py-3 px-4;
        min-height: 44px;
    }

    .faq-question {
        @apply py-5;
        min-height: 44px;
    }

    /* Larger touch targets */
    .feature-card,
    .testimonial-card {
        @apply cursor-pointer;
    }
}

/* High DPI displays */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {

    .hero-title,
    .section-title {
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {

    .fade-in,
    .slide-in-left,
    .slide-in-right,
    .animate-pulse,
    .animate-bounce,
    .animate-float {
        animation: none !important;
        transition: none !important;
    }

    .step-connector::after {
        transition: none !important;
    }
}

/* Dark mode support (if needed) */
@media (prefers-color-scheme: dark) {
    /* Already dark by default, but can add overrides here */
}

/* Print styles */
@media print {

    .btn-primary,
    .btn-secondary,
    .btn-accent,
    .demo-tab {
        @apply border border-gray-400 bg-transparent text-black;
    }

    .bg-dark,
    .bg-dark-light {
        @apply bg-white text-black;
    }

    .text-white {
        @apply text-black;
    }

    .fade-in,
    .slide-in-left,
    .slide-in-right {
        opacity: 1 !important;
        transform: none !important;
    }
}

/* Loading States */
.loading {
    @apply opacity-50 pointer-events-none;
}

.spinner {
    @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin;
}

/* Form Validation States */
input.error,
textarea.error,
select.error {
    @apply border-red-500 bg-red-500/10;
}

input.valid,
textarea.valid,
select.valid {
    @apply border-green-500 bg-green-500/10;
}

.field-error {
    @apply text-red-400 text-sm mt-1 animate-fade-in;
}

/* Enhanced Form Styles */
.form-group {
    @apply mb-6;
}

.form-label {
    @apply block text-sm font-medium text-gray-300 mb-2;
}

.form-input {
    @apply w-full px-4 py-3 bg-dark-light border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200;
}

.form-textarea {
    @apply w-full px-4 py-3 bg-dark-light border border-gray-600 rounded-lg text-white placeholder-gray-400 focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200 resize-vertical min-h-[120px];
}

.form-select {
    @apply w-full px-4 py-3 bg-dark-light border border-gray-600 rounded-lg text-white focus:border-primary focus:ring-2 focus:ring-primary/20 transition-all duration-200;
}

/* Progress Bars */
.progress-bar {
    @apply h-2 bg-gray-700 rounded-full overflow-hidden;
}

.progress-fill {
    @apply h-full bg-gradient-to-r from-primary to-accent rounded-full transition-all duration-1000 ease-out;
}

/* Lazy Loading Images */
img.lazy {
    @apply opacity-0 transition-opacity duration-300;
}

img:not(.lazy) {
    @apply opacity-100;
}

/* Keyboard Focus Styles */
*:focus {
    @apply outline-none;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    @apply ring-2 ring-primary ring-offset-2 ring-offset-dark;
}

/* Skip Link for Accessibility */
.skip-link {
    @apply absolute -top-10 left-4 bg-primary text-white px-4 py-2 rounded-lg z-50 transition-all duration-200;
}

.skip-link:focus {
    @apply top-4;
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {

    .btn-primary,
    .btn-secondary,
    .btn-accent {
        @apply border-2 border-white;
    }

    .feature-card,
    .testimonial-card {
        @apply border-2 border-gray-400;
    }
}

/* Reduced Data Mode */
@media (prefers-reduced-data: reduce) {

    .hero::after,
    .animate-float,
    .animate-pulse {
        animation: none !important;
    }

    img {
        @apply bg-gray-800;
    }
}

/* Demo Tabs */
.demo-tab {
    @apply bg-gray-800 text-gray-400 border border-gray-700;
}

.demo-tab.active {
    @apply bg-primary text-white border-primary;
}

.demo-tab:hover:not(.active) {
    @apply bg-gray-700 text-gray-200;
}

.demo-content {
    @apply transition-all duration-300;
}

.demo-content.active {
    @apply block;
}

/* Utility Classes */
.text-gradient-primary {
    background: linear-gradient(135deg, var(--color-primary), var(--color-success));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.text-gradient-secondary {
    background: linear-gradient(135deg, var(--color-warning), var(--danger-color));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.bg-gradient-card {
    background: linear-gradient(135deg, rgba(30, 64, 175, 0.1), rgba(16, 185, 129, 0.1));
}

/* Responsive Design Helpers */
.container {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8;
}

@media (min-width: 1440px) {
    .container {
        @apply max-w-8xl;
    }
}

/* Responsive Grid Classes */
.responsive-grid {
    @apply grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-4 sm:gap-6 lg:gap-8;
}

.responsive-grid-2 {
    @apply grid grid-cols-1 md:grid-cols-2 gap-6 lg:gap-8;
}

.responsive-grid-3 {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 sm:gap-6;
}

/* Responsive Text Classes */
.responsive-text-sm {
    @apply text-sm sm:text-base lg:text-lg;
}

.responsive-text-base {
    @apply text-base sm:text-lg lg:text-xl;
}

.responsive-text-lg {
    @apply text-lg sm:text-xl lg:text-2xl;
}

.responsive-text-xl {
    @apply text-xl sm:text-2xl lg:text-3xl;
}

/* Responsive Spacing Classes */
.responsive-py {
    @apply py-8 sm:py-12 lg:py-16 xl:py-20;
}

.responsive-px {
    @apply px-4 sm:px-6 lg:px-8 xl:px-12;
}

.responsive-mb {
    @apply mb-8 sm:mb-12 lg:mb-16;
}

.responsive-mt {
    @apply mt-8 sm:mt-12 lg:mt-16;
}

/* Responsive Button Classes */
.responsive-btn {
    @apply px-4 py-2 text-sm sm:px-6 sm:py-3 sm:text-base lg:px-8 lg:py-4 lg:text-lg;
}

.responsive-btn-lg {
    @apply px-6 py-3 text-base sm:px-8 sm:py-4 sm:text-lg lg:px-10 lg:py-5 lg:text-xl;
}

/* Responsive Card Classes */
.responsive-card {
    @apply p-4 sm:p-6 lg:p-8;
}

.responsive-card-sm {
    @apply p-3 sm:p-4 lg:p-6;
}

/* Responsive Flex Classes */
.responsive-flex {
    @apply flex flex-col sm:flex-row gap-4 sm:gap-6;
}

.responsive-flex-center {
    @apply flex flex-col sm:flex-row items-center justify-center gap-4 sm:gap-6;
}

/* Responsive Width Classes */
.responsive-w-full {
    @apply w-full sm:w-auto;
}

.responsive-w-auto {
    @apply w-auto sm:w-full md:w-auto;
}

/* Mobile-first Utilities */
.mobile-hidden {
    @apply hidden sm:block;
}

.mobile-only {
    @apply block sm:hidden;
}

.tablet-hidden {
    @apply hidden lg:block;
}

.tablet-only {
    @apply hidden sm:block lg:hidden;
}

.desktop-only {
    @apply hidden lg:block;
}

/* Responsive Image Classes */
.responsive-img {
    @apply w-full h-auto max-w-full;
}

.responsive-avatar {
    @apply w-12 h-12 sm:w-16 sm:h-16 lg:w-20 lg:h-20;
}

/* Responsive Table Classes */
.responsive-table {
    @apply text-xs sm:text-sm lg:text-base;
}

.responsive-table th,
.responsive-table td {
    @apply px-2 py-2 sm:px-4 sm:py-3 lg:px-6 lg:py-4;
}

/* Contact Integration Styles */
.purchase-option {
    @apply transform transition-all duration-300 hover:scale-105 hover:shadow-lg;
}

.purchase-option:hover {
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
}

.purchase-option:active {
    @apply scale-95;
}

/* Modal Styles */
.modal-backdrop {
    @apply fixed inset-0 bg-black bg-opacity-75 flex items-center justify-center z-50 p-4;
    backdrop-filter: blur(4px);
}

.modal-content {
    @apply bg-dark-light border border-gray-700 rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto;
    animation: modalSlideIn 0.3s ease-out;
}

@keyframes modalSlideIn {
    from {
        opacity: 0;
        transform: translateY(-50px) scale(0.95);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.modal-header {
    @apply flex justify-between items-center mb-6 pb-4 border-b border-gray-700;
}

.modal-close {
    @apply text-gray-400 hover:text-white text-2xl transition-colors duration-200 cursor-pointer;
}

.modal-close:hover {
    @apply transform scale-110;
}

/* Contact Button Styles */
.contact-btn {
    @apply inline-flex items-center justify-center gap-2 px-6 py-3 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-dark;
}

.contact-btn-whatsapp {
    @apply bg-green-600 hover:bg-green-700 text-white focus:ring-green-500;
}

.contact-btn-telegram {
    @apply bg-blue-600 hover:bg-blue-700 text-white focus:ring-blue-500;
}

.contact-btn-email {
    @apply bg-gray-600 hover:bg-gray-700 text-white focus:ring-gray-500;
}

/* Payment Method Styles */
.payment-method {
    @apply bg-gray-800/50 border border-gray-600 rounded-xl p-6 transition-all duration-300 hover:border-primary hover:bg-gray-800/70;
}

.payment-method:hover {
    @apply transform scale-105 shadow-lg;
}

.payment-method.selected {
    @apply border-primary bg-primary/10;
}

.payment-address {
    @apply font-mono text-sm bg-black p-3 rounded-lg border border-gray-600 break-all select-all;
}

.payment-address:hover {
    @apply bg-gray-900 border-primary;
}

/* Form Enhancement Styles */
.enhanced-form {
    @apply space-y-6;
}

.form-field {
    @apply relative;
}

.form-field label {
    @apply block text-sm font-medium text-gray-300 mb-2 transition-colors duration-200;
}

.form-field input:focus+label,
.form-field textarea:focus+label,
.form-field select:focus+label {
    @apply text-primary;
}

.form-field input,
.form-field textarea,
.form-field select {
    @apply w-full px-4 py-3 bg-gray-800 border border-gray-600 rounded-lg text-white placeholder-gray-400 transition-all duration-200;
}

.form-field input:focus,
.form-field textarea:focus,
.form-field select:focus {
    @apply border-primary ring-2 ring-primary/20 bg-gray-700;
}

.form-field input.error,
.form-field textarea.error,
.form-field select.error {
    @apply border-red-500 ring-2 ring-red-500/20 bg-red-900/10;
}

.form-field input.valid,
.form-field textarea.valid,
.form-field select.valid {
    @apply border-green-500 ring-2 ring-green-500/20 bg-green-900/10;
}

/* Notification Styles */
.notification {
    @apply fixed top-4 right-4 z-50 max-w-sm;
    animation: notificationSlideIn 0.3s ease-out;
}

@keyframes notificationSlideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }

    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.notification-content {
    @apply flex items-center gap-3 p-4 rounded-lg shadow-lg;
}

.notification-success {
    @apply bg-green-600 text-white;
}

.notification-error {
    @apply bg-red-600 text-white;
}

.notification-info {
    @apply bg-blue-600 text-white;
}

.notification-warning {
    @apply bg-yellow-600 text-white;
}

/* Security Badge Styles */
.security-badge {
    @apply inline-flex items-center gap-2 px-3 py-1 bg-green-900/20 border border-green-500/30 rounded-full text-green-400 text-sm;
}

.trust-indicator {
    @apply flex items-center gap-2 text-sm text-gray-400;
}

.trust-indicator .icon {
    @apply text-green-400;
}

/* Loading States */
.btn-loading {
    @apply opacity-75 cursor-not-allowed;
}

.btn-loading .spinner {
    @apply inline-block w-4 h-4 border-2 border-white border-t-transparent rounded-full animate-spin mr-2;
}

/* Responsive Contact Styles */
@media (max-width: 640px) {
    .modal-content {
        @apply mx-2 max-h-[95vh];
    }

    .contact-btn {
        @apply w-full justify-center py-4 text-base;
    }

    .payment-method {
        @apply p-4;
    }

    .payment-address {
        @apply text-xs p-2;
    }

    .notification {
        @apply left-4 right-4 max-w-none;
    }
}

/* Accessibility Improvements */
.sr-only {
    @apply absolute w-px h-px p-0 -m-px overflow-hidden whitespace-nowrap border-0;
}

.focus-visible {
    @apply outline-none ring-2 ring-primary ring-offset-2 ring-offset-dark;
}

/* High Contrast Mode */
@media (prefers-contrast: high) {

    .contact-btn,
    .payment-method,
    .modal-content {
        @apply border-2 border-white;
    }

    .notification {
        @apply border-2 border-white;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {

    .modal-content,
    .notification,
    .contact-btn,
    .payment-method {
        animation: none !important;
        transition: none !important;
    }

    .contact-btn:hover,
    .payment-method:hover {
        transform: none !important;
    }
}

/* Print Styles for Contact Info */
@media print {

    .modal-backdrop,
    .notification {
        @apply hidden;
    }

    .contact-btn {
        @apply border border-black bg-transparent text-black;
    }

    .payment-address {
        @apply bg-white border border-black text-black;
    }
}

/* Safe Area Support for Mobile */
@supports (padding: max(0px)) {
    .safe-area-inset {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }

    .safe-area-inset-top {
        padding-top: max(1rem, env(safe-area-inset-top));
    }

    .safe-area-inset-bottom {
        padding-bottom: max(1rem, env(safe-area-inset-bottom));
    }

    .notification {
        right: max(1rem, env(safe-area-inset-right));
    }

    .modal-content {
        margin-left: max(1rem, env(safe-area-inset-left));
        margin-right: max(1rem, env(safe-area-inset-right));
    }
}