/* Custom styles for Linitext */

/* Smooth scrolling */
html {
    scroll-behavior: smooth;
}

/* Custom animations */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes pulse {

    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.5;
    }
}

.fade-in-up {
    animation: fadeInUp 0.6s ease-out;
}

.animate-pulse {
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

.animation-delay-2000 {
    animation-delay: 2s;
}

.animation-delay-4000 {
    animation-delay: 4s;
}

/* Custom button styles */
.btn-primary {
    @apply bg-gradient-to-r from-green-600 to-green-700 text-white px-6 py-3 rounded-lg font-semibold transition duration-300 hover:from-green-700 hover:to-green-800 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
}

.btn-secondary {
    @apply border-2 border-green-600 text-green-600 px-6 py-3 rounded-lg font-semibold transition duration-300 hover:bg-green-50 focus:outline-none focus:ring-2 focus:ring-green-500 focus:ring-offset-2;
}

/* Enhanced form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg text-gray-900 placeholder-gray-500 bg-white transition duration-200 ease-in-out;
    @apply focus:ring-2 focus:ring-green-500 focus:border-green-500 focus:outline-none;
    @apply hover:border-gray-400;
    font-size: 16px;
    /* Prevents zoom on iOS */
    line-height: 1.5;
}

.form-input:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
    border-color: #22c55e;
}

.form-input.error {
    @apply border-red-500 focus:ring-red-500 focus:border-red-500;
}

.form-input.error:focus {
    box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1);
}

.form-input.success {
    @apply border-green-500 focus:ring-green-500 focus:border-green-500;
}

.form-input.success:focus {
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.1);
}

/* Form label styles */
.form-label {
    @apply block text-sm font-semibold text-gray-700 mb-2;
    letter-spacing: 0.025em;
}

/* Select input styles */
select.form-input {
    @apply appearance-none bg-white;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
    background-position: right 0.75rem center;
    background-repeat: no-repeat;
    background-size: 1.5em 1.5em;
    padding-right: 2.5rem;
}

select.form-input:focus {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%2322c55e' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e");
}

/* Checkbox and radio styles */
input[type="checkbox"],
input[type="radio"] {
    @apply h-4 w-4 text-green-600 border-gray-300 rounded transition duration-200;
    @apply focus:ring-2 focus:ring-green-500 focus:ring-offset-0;
}

input[type="checkbox"]:checked,
input[type="radio"]:checked {
    @apply bg-green-600 border-green-600;
}

input[type="checkbox"]:focus,
input[type="radio"]:focus {
    @apply ring-2 ring-green-500 ring-offset-2;
}

/* Input group styles */
.input-group {
    @apply relative;
}

.input-group .input-icon {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 pointer-events-none;
}

.input-group .form-input {
    @apply pl-10;
}

.input-group .input-icon.right {
    @apply left-auto right-3;
}

.input-group .form-input.has-icon-right {
    @apply pr-10 pl-4;
}

/* Currency input styles */
.currency-input {
    @apply relative;
}

.currency-input .currency-symbol {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600 font-semibold pointer-events-none;
    font-size: 14px;
}

.currency-input .form-input {
    @apply pl-12;
}

/* Phone input styles */
.phone-input {
    @apply relative;
}

.phone-input .country-code {
    @apply absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-600 font-medium pointer-events-none;
    font-size: 14px;
}

.phone-input .form-input {
    @apply pl-16;
}

/* Password input styles */
.password-input {
    @apply relative;
}

.password-toggle {
    @apply absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 hover:text-gray-600 cursor-pointer transition duration-200;
    @apply focus:outline-none focus:text-green-600;
}

.password-toggle:hover {
    @apply text-gray-600;
}

.password-toggle:focus {
    @apply text-green-600 outline-none;
}

/* Form validation styles */
.form-error {
    @apply text-red-600 text-sm mt-1 flex items-center;
}

.form-error i {
    @apply mr-1 text-xs;
}

.form-success {
    @apply text-green-600 text-sm mt-1 flex items-center;
}

.form-success i {
    @apply mr-1 text-xs;
}

.form-help {
    @apply text-gray-500 text-xs mt-1;
}

/* Loading spinner */
.spinner {
    border: 2px solid #f3f3f3;
    border-top: 2px solid #16a34a;
    border-radius: 50%;
    width: 20px;
    height: 20px;
    animation: spin 1s linear infinite;
}

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

/* Custom shadows */
.shadow-custom {
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Gradient text */
.gradient-text {
    background: linear-gradient(135deg, #16a34a, #2563eb);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Card hover effects */
.card-hover {
    transition: all 0.3s ease;
}

.card-hover:hover {
    transform: translateY(-5px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
}

/* Form container styles */
.form-container {
    @apply bg-white rounded-2xl shadow-xl p-8 backdrop-blur-sm;
    background: rgba(255, 255, 255, 0.95);
}

.form-section {
    @apply border-t border-gray-200 pt-6 mt-6;
}

.form-section:first-child {
    @apply border-t-0 pt-0 mt-0;
}

/* Button loading state */
.btn-loading {
    @apply opacity-75 cursor-not-allowed;
}

.btn-loading .spinner {
    @apply inline-block mr-2;
}

/* Mobile responsive utilities */
@media (max-width: 640px) {
    .text-responsive {
        font-size: 1.5rem;
        line-height: 2rem;
    }

    .hero-title {
        font-size: 2.5rem;
        line-height: 1.2;
    }

    .form-input {
        font-size: 16px;
        /* Prevents zoom on iOS */
    }
}

/* Print styles */
@media print {
    .no-print {
        display: none !important;
    }
}

/* Custom scrollbar */
::-webkit-scrollbar {
    width: 8px;
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
    background: #16a34a;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #15803d;
}

/* Focus styles for accessibility */
.focus-visible:focus {
    outline: 2px solid #16a34a;
    outline-offset: 2px;
}

/* Custom transitions */
.transition-all {
    transition-property: all;
    transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
    transition-duration: 300ms;
}

/* Input floating label effect */
.floating-label {
    @apply relative;
}

.floating-label input {
    @apply pt-6 pb-2;
}

.floating-label label {
    @apply absolute left-4 top-4 text-gray-500 transition-all duration-200 pointer-events-none;
    transform-origin: left top;
}

.floating-label input:focus+label,
.floating-label input:not(:placeholder-shown)+label {
    @apply text-xs text-green-600;
    transform: translateY(-0.75rem) scale(0.85);
}

/* Investment calculator specific styles */
.calculator-container {
    @apply bg-white rounded-2xl shadow-2xl p-8 backdrop-blur-sm;
    background: rgba(255, 255, 255, 0.95);
}

.calculator-result {
    @apply bg-gradient-to-r from-green-50 to-blue-50 p-6 rounded-xl border border-green-200;
}

.calculator-result .result-item {
    @apply flex justify-between items-center py-2;
}

.calculator-result .result-item:not(:last-child) {
    @apply border-b border-green-100;
}

/* Form step indicator */
.step-indicator {
    @apply flex items-center justify-between mb-8;
}

.step-indicator .step {
    @apply flex items-center;
}

.step-indicator .step-number {
    @apply w-8 h-8 rounded-full flex items-center justify-center text-sm font-semibold mr-3;
}

.step-indicator .step.active .step-number {
    @apply bg-green-600 text-white;
}

.step-indicator .step.completed .step-number {
    @apply bg-green-100 text-green-600;
}

.step-indicator .step.inactive .step-number {
    @apply bg-gray-100 text-gray-400;
}

/* Password strength indicator */
.password-strength {
    @apply mt-2 space-y-1;
}

.password-strength .strength-item {
    @apply flex items-center text-xs;
}

.password-strength .strength-item.valid {
    @apply text-green-600;
}

.password-strength .strength-item.invalid {
    @apply text-red-500;
}

.password-strength .strength-item i {
    @apply mr-2 text-xs;
}

/* Responsive form grid */
.form-grid {
    @apply grid grid-cols-1 gap-6;
}

.form-grid.two-columns {
    @apply md:grid-cols-2;
}

.form-grid.three-columns {
    @apply md:grid-cols-3;
}

.form-grid .form-group.full-width {
    @apply md:col-span-2;
}

.form-grid.three-columns .form-group.full-width {
    @apply md:col-span-3;
}

/* Custom file input */
.file-input {
    @apply relative overflow-hidden inline-block cursor-pointer;
}

.file-input input[type="file"] {
    @apply absolute -left-full opacity-0;
}

.file-input .file-label {
    @apply inline-flex items-center px-4 py-2 border border-gray-300 rounded-lg bg-white text-gray-700 hover:bg-gray-50 transition duration-200;
}

.file-input .file-label i {
    @apply mr-2;
}

/* Toast notification positioning */
.toast-container {
    @apply fixed z-50 pointer-events-none;
}

.toast-container.top-right {
    @apply top-4 right-4;
}

.toast-container.top-left {
    @apply top-4 left-4;
}

.toast-container.bottom-right {
    @apply bottom-4 right-4;
}

.toast-container.bottom-left {
    @apply bottom-4 left-4;
}

/* Investment plan card styles */
.plan-card {
    @apply bg-white rounded-2xl shadow-lg hover:shadow-xl transition duration-300 p-8 border-2 border-transparent;
}

.plan-card.featured {
    @apply border-green-500 relative;
}

.plan-card.featured::before {
    content: "Most Popular";
    @apply absolute -top-4 left-1/2 transform -translate-x-1/2 bg-green-500 text-white px-4 py-1 rounded-full text-sm font-semibold;
}

.plan-card:hover {
    @apply border-green-200;
}

/* Status badges */
.status-badge {
    @apply inline-flex items-center px-2.5 py-0.5 rounded-full text-xs font-medium;
}

.status-badge.success {
    @apply bg-green-100 text-green-800;
}

.status-badge.warning {
    @apply bg-yellow-100 text-yellow-800;
}

.status-badge.error {
    @apply bg-red-100 text-red-800;
}

.status-badge.info {
    @apply bg-blue-100 text-blue-800;
}

.status-badge.gray {
    @apply bg-gray-100 text-gray-800;
}

.pagination>li>a,
.pagination>li>span {
    color: green; 
}

.pagination>.active>a,
.pagination>.active>a:focus,
.pagination>.active>a:hover,
.pagination>.active>span,
.pagination>.active>span:focus,
.pagination>.active>span:hover {
    background-color: green;
    border-color: green;
}