@import 'tailwindcss';

@theme {
    --color-blue: #2563eb;
    --color-blue-200: #bfdbfe;
    --color-blue-400: #60a5fa;
    --color-blue-500: #3b82f6;
    --color-blue-600: #145aff;
    --color-gray-50: #f9fafb;
    --color-gray-100: #f3f4f6;
    --color-gray-200: #e5e7eb;
    --color-gray-300: #d1d5db;
    --color-gray-400: #4b5563;
    --color-gray-500: #6b7280;
    --color-gray-600: #4b5563;
    --color-gray-700: #374151;
    --color-gray-800: #1f2937;
    --color-gray-900: #111827;
    --color-slate-950: #020617;
    --color-black-900: #040a16;
    --color-black: #040e22;
}

@layer components {
    .btn-one {
        @apply bg-[#F3F4F6] text-[#0F172A] text-[15px] font-medium px-11 py-3 rounded-full inline-block text-center;
    }

    .btn-two {
        @apply bg-[#2563EB] text-[#fff] text-[15px] font-medium px-8 py-3 rounded-full inline-block text-center;
    }

    .btn-three {
        @apply bg-white text-slate-950 text-[14px] font-medium px-5 py-2 rounded border border-gray-200 inline-block duration-300;
        @apply hover:bg-blue hover:text-white transition-colors duration-300;
    }

    .s-feature-tabs {
        @apply bg-[#1B2437] px-6 py-3 inline-block rounded-full text-white text-base;
    }

    .price-btn {
        @apply inline-block w-full border border-blue-400 rounded-full py-4 text-blue-600 font-medium cursor-pointer;
    }

    .plan-selected {
        @apply bg-linear-to-r from-[#145AFF] to-[#0C3699] text-gray-200;
    }

    .bg-gradient {
        @apply bg-linear-to-b from-[#F6F7FB] to-[#F4F3F2];
    }

    .shipping-card {
        @apply border-2 border-gray-100 p-8 rounded-lg hover:bg-blue-600 transition duration-200;
    }

    .mega-menu-link {
        @apply bg-[#1D2330] py-2.5 px-4 text-gray-400 w-full flex items-center justify-between hover:bg-white hover:text-gray-900 hover:font-semibold duration-100;
    }

    .wp-direct-success {
        @apply bg-green-100 text-green-700 border border-green-300 rounded p-4 mb-4;
    }

    .wp-direct-error {
        @apply bg-red-100 text-red-700 border border-red-300 rounded p-4 mb-4;
    }

}