/*!
Theme Name: sky-connect
Theme URI: http://underscores.me/
Author: Underscores.me
Author URI: http://underscores.me/
Description: Description
Version: 1.0.0
Tested up to: 5.4
Requires PHP: 5.6
License: GNU General Public License v2 or later
License URI: LICENSE
Text Domain: sky-connect
Tags: custom-background, custom-logo, custom-menu, featured-images, threaded-comments, translation-ready

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned.

sky-connect is based on Underscores https://underscores.me/, (C) 2012-2020 Automattic, Inc.
Underscores is distributed under the terms of the GNU GPL v2 or later.

Normalizing styles have been helped along thanks to the fine work of
Nicolas Gallagher and Jonathan Neal https://necolas.github.com/normalize.css/
*/

@import "tailwindcss";

@theme {
  /* Color Palette */
  --color-primary-50: #f0fdf4;
  --color-primary-100: #dcfce7;
  --color-primary-200: #bbf7d0;
  --color-primary-300: #86efac;
  --color-primary-400: #4ade80;
  --color-primary-500: #22c55e;
  --color-primary-600: #16a34a;
  --color-primary-700: #15803d;
  --color-primary-800: #166534;
  --color-primary-900: #14532d;

  --color-secondary-50: #fefce8;
  --color-secondary-100: #fef9c3;
  --color-secondary-200: #fef08a;
  --color-secondary-300: #fde047;
  --color-secondary-400: #facc15;
  --color-secondary-500: #eab308;
  --color-secondary-600: #ca8a04;
  --color-secondary-700: #a16207;
  --color-secondary-800: #854d0e;
  --color-secondary-900: #713f12;

  /* Gray Scale */
  --color-gray-50: #f9fafb;
  --color-gray-100: #f3f4f6;
  --color-gray-200: #e5e7eb;
  --color-gray-300: #d1d5db;
  --color-gray-400: #9ca3af;
  --color-gray-500: #6b7280;
  --color-gray-600: #4b5563;
  --color-gray-700: #374151;
  --color-gray-800: #1f2937;
  --color-gray-900: #0a0a0a;
  /* Deeper black for dark mode */

  /* Link Colors */
  --color-link-50: #eff6ff;
  --color-link-100: #dbeafe;
  --color-link-200: #bfdbfe;
  --color-link-300: #93c5fd;
  --color-link-400: #60a5fa;
  --color-link-500: #3b82f6;
  --color-link-600: #2563eb;
  --color-link-700: #1d4ed8;
  --color-link-800: #1e40af;
  --color-link-900: #1e3a8a;

  /* Spacing */
  --spacing-2xs: 0.25rem;
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 2.5rem;
  --spacing-3xl: 3rem;
  --spacing-4xl: 4rem;

  /* Typography - Use Kanit as primary font */
  --font-sans: "Kanit", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Kanit", Georgia, "Times New Roman", serif;
  --font-mono: "SF Mono", Monaco, Inconsolata, "Roboto Mono", monospace;

  /* Breakpoints */
  --breakpoint-xs: 475px;
  --breakpoint-sm: 640px;
  --breakpoint-md: 768px;
  --breakpoint-lg: 1024px;
  --breakpoint-xl: 1280px;
  --breakpoint-2xl: 1536px;
}

/* Base Styles */
html {
  transition: color 0.3s, background-color 0.3s;
}

body {
  @apply bg-black text-white transition-colors duration-300;
}

.light body {
  @apply bg-white text-gray-900;
}

/* Light mode hero section */
.light #hero-section {
  background-image: none !important;
}

/* Link Styles - Dark Mode (Default) */
a {
  @apply text-link-400 no-underline transition-colors duration-200;
}

a:visited {
  @apply text-purple-400;
}

a:hover,
a:focus {
  @apply text-link-300;
}

a:active {
  @apply text-link-100;
}

/* Link Styles - Light Mode */
.light a {
  @apply text-link-600;
}

.light a:visited {
  @apply text-purple-600;
}

.light a:hover,
.light a:focus {
  @apply text-link-700;
}

.light a:active {
  @apply text-link-800;
}

/* Focus Styles */
button:focus,
a:focus,
input:focus,
select:focus,
textarea:focus {
  @apply outline-none ring-2 ring-primary-500 ring-offset-2 ring-offset-gray-900;
}

.light button:focus,
.light a:focus,
.light input:focus,
.light select:focus,
.light textarea:focus {
  @apply ring-offset-gray-50;
}

/* Typography */
h1,
h2,
h3,
h4,
h5,
h6 {
  @apply font-bold clear-both;
}

h1 {
  @apply text-4xl md:text-5xl;
}

h2 {
  @apply text-3xl md:text-4xl;
}

h3 {
  @apply text-2xl md:text-3xl;
}

h4 {
  @apply text-xl md:text-2xl;
}

h5 {
  @apply text-lg md:text-xl;
}

h6 {
  @apply text-base md:text-lg;
}

p {
  @apply mb-4;
}

/* Forms */
input,
textarea,
select {
  @apply bg-gray-950 border border-gray-700 text-white px-3 py-2 rounded-md focus:border-primary-500 focus:ring-2 focus:ring-primary-500 transition-colors;
}

.light input,
.light textarea,
.light select {
  @apply bg-white border-gray-300 text-gray-900;
}

input::placeholder,
textarea::placeholder {
  @apply text-gray-400;
}

.light input::placeholder,
.light textarea::placeholder {
  @apply text-gray-500;
}

/* Buttons */
button,
input[type="button"],
input[type="reset"],
input[type="submit"] {
  @apply bg-primary-500 hover:bg-primary-600 text-white font-medium py-2 px-4 rounded-md transition-colors duration-200;
}

button:disabled,
input[type="button"]:disabled,
input[type="reset"]:disabled,
input[type="submit"]:disabled {
  @apply opacity-50 cursor-not-allowed;
}

/* Navigation */
.main-navigation {
  @apply hidden md:block w-full;
}

.main-navigation ul {
  @apply list-none m-0 p-0;
}

/* Mobile Menu Visibility */
.main-navigation.toggled {
  @apply block;
}

/* Mobile Menu Items */
.main-navigation ul {
  @apply flex flex-col;
}

.main-navigation li {
  @apply w-full;
}

.main-navigation a {
  @apply py-3 px-4 block;
}

/* Mobile Menu Toggle Button */
.menu-toggle {
  @apply p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500;
}

.menu-toggle:focus {
  @apply ring-2 ring-primary-500;
}

/* Mobile Menu */
.menu-toggle {
  @apply block md:hidden;
}

.main-navigation.toggled ul {
  @apply block;
}

@media (max-width: 767px) {
  .main-navigation ul {
    @apply flex-col;
  }

  .main-navigation li {
    @apply w-full;
  }

  .main-navigation a {
    @apply py-3 px-4;
  }

  .main-navigation ul ul {
    @apply absolute left-0 top-full w-full opacity-100 visible;
  }

  .main-navigation ul ul li:hover>ul,
  .main-navigation ul ul li.focus>ul {
    @apply opacity-100 visible;
  }

  .main-navigation ul ul a {
    @apply px-6 py-3 min-w-full;
  }
}

/* Mobile Menu Visibility */
.main-navigation {
  @apply hidden md:block;
}

.main-navigation.toggled {
  @apply block;
}

/* Mobile Menu Items */
.main-navigation ul {
  @apply flex flex-col;
}

.main-navigation li {
  @apply w-full;
}

.main-navigation a {
  @apply py-3 px-4 block;
}

/* Mobile Menu Toggle Button */
.menu-toggle {
  @apply p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500;
}

.menu-toggle:focus {
  @apply ring-2 ring-primary-500;
}

/* Mobile Menu Toggle Button */
.menu-toggle {
  @apply p-2 rounded-md focus:outline-none focus:ring-2 focus:ring-primary-500;
}

.menu-toggle:focus {
  @apply ring-2 ring-primary-500;
}

.main-navigation ul ul {
  @apply shadow-lg absolute left-0 top-full opacity-0 invisible transition-all duration-200 z-50;
}

.main-navigation ul ul li:hover>ul,
.main-navigation ul ul li.focus>ul {
  @apply opacity-100 visible;
}

.main-navigation ul ul a {
  @apply block px-4 py-2 min-w-[200px];
}

.main-navigation li {
  @apply relative;
}

.main-navigation a {
  @apply block py-2 px-4 no-underline transition-colors duration-200;
}

.main-navigation a:hover {
  @apply text-primary-400;
}

.light .main-navigation a:hover {
  @apply text-primary-600;
}

/* Mobile Menu */
.menu-toggle,
.main-navigation.toggled ul {
  @apply block;
}

@media (min-width: 768px) {
  .menu-toggle {
    @apply hidden;
  }

  .main-navigation ul {
    @apply flex;
  }
}

/* Posts and Pages */
.post,
.page {
  @apply mb-8;
}

.sticky {
  @apply block;
}

.updated:not(.published) {
  @apply hidden;
}

.page-content,
.entry-content,
.entry-summary {
  @apply mt-6;
}

.page-links {
  @apply clear-both mt-6;
}

/* Comments */
.comment-list {
  @apply list-none p-0;
}

.comment-body {
  @apply bg-gray-950 rounded-lg p-4 mb-4;
}

.light .comment-body {
  @apply bg-gray-950;
}

.comment-content a {
  @apply break-words;
}

.bypostauthor {
  @apply block;
}

/* Widgets */
.widget {
  @apply mb-6;
}

.widget select {
  @apply max-w-full;
}

.widget-title {
  @apply text-xl font-bold mb-4;
}

/* Media */
img {
  @apply max-w-full h-auto;
}

figure {
  @apply my-4;
}

/* Captions */
.wp-caption {
  @apply mb-6 max-w-full;
}

.wp-caption img[class*="wp-image-"] {
  @apply block mx-auto;
}

.wp-caption .wp-caption-text {
  @apply text-center text-sm text-gray-400 mt-2;
}

.light .wp-caption .wp-caption-text {
  @apply text-gray-600;
}

/* Galleries */
.gallery {
  @apply mb-6 grid gap-4;
}

.gallery-item {
  @apply text-center;
}

.gallery-columns-2 {
  @apply grid-cols-2;
}

.gallery-columns-3 {
  @apply grid-cols-3;
}

.gallery-columns-4 {
  @apply grid-cols-4;
}

.gallery-columns-5 {
  @apply grid-cols-5;
}

.gallery-columns-6 {
  @apply grid-cols-6;
}

.gallery-caption {
  @apply block text-sm mt-2;
}

/* Block Editor Styles */
.wp-block-button__link {
  @apply bg-primary-500 hover:bg-primary-600 text-white px-6 py-3 rounded-md font-medium no-underline transition-colors duration-200;
}

.wp-block-quote {
  @apply border-l-4 border-primary-500 pl-4 italic;
}

.wp-block-code {
  @apply bg-gray-950 text-gray-300 p-4 rounded-md font-mono text-sm;
}

.light .wp-block-code {
  @apply bg-gray-950 text-gray-800;
}

.wp-block-table {
  @apply w-full border-collapse;
}

.wp-block-table th,
.wp-block-table td {
  @apply border border-gray-700 px-4 py-2;
}

.light .wp-block-table th,
.light .wp-block-table td {
  @apply border-gray-300;
}

.wp-block-table th {
  @apply bg-gray-950 font-bold;
}

.light .wp-block-table th {
  @apply bg-gray-950;
}

/* Pagination */
.pagination {
  @apply flex justify-center items-center gap-2 mt-8;
}

.pagination a,
.pagination span {
  @apply px-4 py-2 rounded-md no-underline transition-colors duration-200;
}

.pagination a {
  @apply bg-gray-950 hover:bg-primary-500 hover:text-white text-gray-300;
}

.light .pagination a {
  @apply bg-gray-950 hover:bg-primary-500 hover:text-white text-gray-700;
}

.pagination .current {
  @apply bg-primary-500 text-white;
}

/* Search Form */
.search-form {
  @apply relative;
}

.search-field {
  @apply w-full px-4 py-2 bg-gray-950 border border-gray-700 text-white rounded-md focus:border-primary-500 focus:ring-2 focus:ring-primary-500 transition-colors;
}

.light .search-field {
  @apply bg-white border-gray-300 text-gray-900;
}

/* Accessibility */
.screen-reader-text {
  @apply absolute left-0 top-0 w-px h-px overflow-hidden clip-[rect(0, 0, 0, 0)];
}

.screen-reader-text:focus {
  @apply static w-auto h-auto overflow-visible clip-none bg-gray-950 text-gray-900 p-4 rounded-md shadow-lg;
}

/* Alignments */
.alignleft {
  @apply float-left mr-4 mb-4;
}

.alignright {
  @apply float-right ml-4 mb-4;
}

.aligncenter {
  @apply block mx-auto mb-4;
}

/* Responsive */
@media (max-width: 767px) {
  h1 {
    @apply text-3xl;
  }

  h2 {
    @apply text-2xl;
  }

  h3 {
    @apply text-xl;
  }
}

/* Print Styles */
@media print {

  .site-header,
  .site-footer,
  .navigation,
  .theme-toggle,
  .search-form {
    @apply hidden;
  }

  body {
    @apply bg-white text-black;
  }

  .post,
  .page {
    @apply break-inside-avoid border border-gray-300 mb-4 p-4;
  }
}

/* Enhanced Mobile Responsiveness */
@media (max-width: 767px) {
  .site-main {
    @apply px-4;
  }

  .main-navigation ul {
    @apply flex-col;
  }

  .main-navigation li {
    @apply w-full;
  }

  .main-navigation a {
    @apply py-3 px-4;
  }

  .main-navigation ul ul {
    @apply absolute left-0 top-full w-full opacity-100 visible;
  }

  .main-navigation ul ul li:hover>ul,
  .main-navigation ul ul li.focus>ul {
    @apply opacity-100 visible;
  }

  .main-navigation ul ul a {
    @apply px-6 py-3 min-w-full;
  }

  /* Adjust hero section for mobile */
  #hero-section {
    @apply py-12;
  }

  #hero-content h1 {
    @apply text-3xl;
  }

  #hero-content .stats {
    @apply flex-wrap gap-4 mb-6;
  }

  #hero-content .stats div {
    @apply text-xl;
  }

  #hero-content .cta-buttons {
    @apply flex-col gap-2;
  }

  #hero-content .badges {
    @apply gap-3;
  }

  #hero-content .badges div {
    @apply text-xs px-3 py-1.5 rounded-full;
  }

  /* Adjust search section for mobile */
  #search-section {
    @apply py-12;
  }

  #search-section h2 {
    @apply text-2xl;
  }

  #search-section .filters {
    @apply flex-col gap-2;
  }

  #search-section .filters select {
    @apply w-full;
  }

  /* Adjust content grid for mobile */
  .content-grid {
    @apply grid-cols-1 gap-4;
  }

  /* Adjust footer for mobile */
  #main-footer {
    @apply pt-8 pb-4;
  }

  #footer-content {
    @apply grid-cols-1 gap-4;
  }

  #footer-content h3 {
    @apply text-sm mb-2;
  }

  #footer-content ul {
    @apply space-y-1;
  }

  #footer-content li a {
    @apply text-xs;
  }

  #footer-about .flex {
    @apply gap-2;
  }

  #footer-about .flex a {
    @apply w-7 h-7;
  }

  #footer-about .flex a i {
    @apply w-3 h-3;
  }

  #footer-contact form {
    @apply flex-col gap-1;
  }

  #footer-contact input,
  #footer-contact button {
    @apply px-2 py-1 text-xs;
  }

  #footer-copyright {
    @apply flex-col gap-2 text-xs;
  }

  #footer-copyright .flex {
    @apply flex-col gap-1;
  }
}

/* Tablet responsiveness */
@media (min-width: 768px) and (max-width: 1023px) {
  #hero-content h1 {
    @apply text-4xl md:text-5xl;
  }

  #hero-content .stats {
    @apply gap-6;
  }

  #footer-content {
    @apply grid-cols-2 gap-8;
  }
}

/* Mobile Popup Menu Styles */
.mobile-nav-menu {
  @apply list-none m-0 p-0;
}

.mobile-nav-menu li {
  @apply w-full;
}

.mobile-nav-menu a {
  @apply text-white py-2 px-0 block transition-colors duration-200;
}

.light .mobile-nav-menu a {
  @apply text-gray-900;
}

.mobile-nav-menu a:hover {
  @apply text-[#F05A28];
}

.light .mobile-nav-menu a:hover {
  @apply text-[#DE007D];
}

/* Mobile menu sub-menus */
.mobile-nav-menu .sub-menu {
  @apply list-none pl-4 mt-2 space-y-2;
}

.mobile-nav-menu .sub-menu a {
  @apply text-gray-400 text-sm;
}

.light .mobile-nav-menu .sub-menu a {
  @apply text-gray-600;
}

.mobile-nav-menu .menu-item-has-children>a::after {
  content: '';
  @apply inline-block ml-2;
}

/* Desktop Submenu Styles - Multi-column Layout */
.main-navigation .menu-item-has-children {
  @apply relative;
}

.main-navigation .menu-item-has-children>div {
  @apply absolute top-full left-0 translate-y-2 mt-3 min-w-[600px] rounded-2xl opacity-0 invisible transition-all duration-300 z-[1000] shadow-[0_25px_50px_-12px_rgba(0, 0, 0, 0.5), 0_0_0_1px_rgba(255, 255, 255, 0.05)] backdrop-blur-md;
}

.main-navigation .menu-item-has-children:hover>div {
  @apply opacity-100 visible translate-y-0;
}

.main-navigation .sub-menu {
  @apply grid grid-cols-2 gap-1 p-3 list-none;
}

.main-navigation .sub-menu li {
  @apply w-full relative;
}

.main-navigation .sub-menu a {
  @apply block p-4 rounded-xl transition-all duration-200 border border-transparent;
}

/* Icon and text layout */
.main-navigation .sub-menu .flex-shrink-0 {
  @apply w-10 h-10 rounded-lg flex items-center justify-center transition-all duration-200;
}

/* Current/Active submenu item */
.main-navigation .sub-menu .current-menu-item>a,
.main-navigation .sub-menu .current_page_item>a {
  @apply border-[#F05A28]/30;
}

/* Mobile Submenu Styles */
.mobile-nav-menu .submenu-wrapper {
  @apply w-full;
}

.mobile-nav-menu .submenu {
  @apply list-none pl-4 mt-2 space-y-2 overflow-hidden transition-all duration-300 ease-in-out opacity-0;
  max-height: 0;
}

.mobile-nav-menu .submenu.show {
  @apply opacity-100;
  max-height: 500px;
}

.mobile-nav-menu .submenu a {
  @apply flex items-center px-4 py-3 text-gray-400 font-medium rounded-lg transition-all duration-200 text-sm border-l-2 border-transparent hover:text-white hover:pl-5;
}

.mobile-nav-menu .submenu-toggle {
  @apply flex items-center justify-between w-full px-4 py-3 font-medium text-gray-200 hover:text-white transition-colors duration-200;
}

.mobile-nav-menu .submenu-toggle .submenu-icon {
  @apply transition-transform duration-300;
}

.mobile-nav-menu .submenu-toggle.active .submenu-icon {
  @apply rotate-180 text-[#F05A28];
}

/* Current/Active mobile submenu item */
.mobile-nav-menu .submenu .current-menu-item>a,
.mobile-nav-menu .submenu .current_page_item>a {
  @apply text-[#F05A28] font-semibold border-l-[#F05A28];
}

/* Current menu item */
.mobile-nav-menu .current-menu-item>a,
.mobile-nav-menu .current_page_item>a {
  @apply text-[#F05A28] font-semibold;
}

.light .mobile-nav-menu .current-menu-item>a,
.light .mobile-nav-menu .current_page_item>a {
  @apply text-[#DE007D];
}

/* Authentication Page Styles */
.auth-page {
  @apply min-h-screen bg-black light:bg-gray-950;
}

.auth-card {
  @apply bg-gray-950 light:bg-white rounded-lg shadow-xl border border-gray-800 light:border-gray-200;
}

.auth-header {
  @apply px-8 py-6 border-b border-gray-800 light:border-gray-200;
}

.auth-form {
  @apply px-8 py-6;
}

.auth-footer {
  @apply px-8 py-6 bg-gray-950/50 light:bg-gray-950 border-t border-gray-700 light:border-gray-200 rounded-b-lg;
}

.auth-input {
  @apply bg-gray-950 light:bg-gray-950 border border-gray-700 light:border-gray-300 text-white light:text-gray-900 rounded-lg pl-10 pr-3 py-3 w-full focus:outline-none focus:ring-2 focus:ring-[#DE007D] focus:border-transparent transition-colors;
}

.auth-input:focus {
  @apply ring-[#DE007D];
}

.auth-button {
  @apply w-full bg-[#DE007D] hover:bg-[#F05A28] text-white font-semibold py-3 px-4 rounded-lg transition-colors duration-200 focus:outline-none focus:ring-2 focus:ring-[#DE007D] focus:ring-offset-2 focus:ring-offset-gray-900 light:focus:ring-offset-white;
}

.auth-button:hover {
  @apply bg-[#F05A28];
}

.auth-button:disabled {
  @apply opacity-50 cursor-not-allowed;
}

.auth-checkbox {
  @apply h-4 w-4 text-[#DE007D] focus:ring-[#DE007D] border-gray-700 light:border-gray-300 rounded bg-gray-950 light:bg-white;
}

.auth-label {
  @apply block text-sm font-medium text-gray-300 light:text-gray-700 mb-2;
}

.auth-link {
  @apply text-[#F05A28] hover:text-[#DE007D] light:text-[#DE007D] light:hover:text-[#F05A28] transition-colors;
}

.auth-error {
  @apply bg-red-900/50 light:bg-red-50 border border-red-700 light:border-red-200 text-red-200 light:text-red-800 px-4 py-3 rounded-lg;
}

.auth-success {
  @apply bg-[#DE007D]/20 light:bg-[#DE007D]/10 border border-[#DE007D]/50 light:border-[#DE007D]/30 text-[#F05A28] light:text-[#DE007D] px-4 py-3 rounded-lg;
}

.auth-warning {
  @apply bg-yellow-900/50 light:bg-yellow-50 border border-yellow-700 light:border-yellow-200 text-yellow-200 light:text-yellow-800 px-4 py-3 rounded-lg;
}

.auth-input-group {
  @apply relative;
}

.auth-input-icon {
  @apply absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none;
}

.auth-input-icon i {
  @apply w-5 h-5 text-gray-400;
}

.auth-help-text {
  @apply mt-1 text-xs text-gray-500 light:text-gray-500;
}

.auth-required {
  @apply text-red-400;
}

.auth-secondary-button {
  @apply inline-flex items-center justify-center px-6 py-3 border border-transparent text-base font-medium rounded-md text-white bg-gray-950 hover:bg-gray-600 light:bg-gray-950 light:text-gray-900 light:hover:bg-gray-300 transition-colors;
}

.auth-benefits {
  @apply mt-6 grid grid-cols-1 gap-3;
}

.auth-benefit-item {
  @apply flex items-center text-sm text-gray-400 light:text-gray-600;
}

.auth-benefit-icon {
  @apply w-4 h-4 text-[#F05A28] mr-2 flex-shrink-0;
}

/* Password Strength Indicator */
.password-strength {
  @apply mt-2 h-2 bg-gray-950 light:bg-gray-950 rounded-full overflow-hidden;
}

.password-strength-bar {
  @apply h-full transition-all duration-300;
}

.password-strength-weak {
  @apply bg-red-500 w-1/4;
}

.password-strength-fair {
  @apply bg-yellow-500 w-2/4;
}

.password-strength-good {
  @apply bg-blue-500 w-3/4;
}

.password-strength-strong {
  @apply bg-[#DE007D] w-full;
}

/* Form Validation */
.auth-input:invalid {
  @apply border-red-500;
}

.auth-input:valid {
  @apply border-[#DE007D];
}

.auth-input-error {
  @apply border-red-500 focus:border-red-500 focus:ring-red-500 bg-red-950/10 light:bg-red-50;
}

/* Alert Components */
.alert {
  @apply rounded-lg p-4 mb-4;
}

.alert-error {
  @apply bg-red-950/20 border border-red-500/50 text-red-400 light:bg-red-50 light:border-red-200 light:text-red-800;
}

.alert-success {
  @apply bg-[#DE007D]/20 border border-[#DE007D]/50 text-[#F05A28] light:bg-[#DE007D]/10 light:border-[#DE007D]/30 light:text-[#DE007D];
}

.alert-warning {
  @apply bg-yellow-950/20 border border-yellow-500/50 text-yellow-400 light:bg-yellow-50 light:border-yellow-200 light:text-yellow-800;
}

.alert-info {
  @apply bg-blue-950/20 border border-blue-500/50 text-blue-400 light:bg-blue-50 light:border-blue-200 light:text-blue-800;
}

/* Auth Alert (Legacy Support) */
.auth-alert {
  @apply fixed top-4 right-4 z-50 rounded-xl shadow-2xl p-4 max-w-md flex items-center gap-3 animate-slide-in;
}

.auth-alert-error {
  @apply bg-red-500 text-white border-2 border-red-600;
}

.auth-alert-success {
  @apply bg-[#DE007D] text-white border-2 border-[#F05A28];
}

.auth-alert-warning {
  @apply bg-yellow-500 text-white border-2 border-yellow-600;
}

.auth-alert-info {
  @apply bg-blue-500 text-white border-2 border-blue-600;
}

.alert-title {
  @apply font-semibold text-sm mb-1 flex items-center gap-2;
}

.alert-message {
  @apply text-sm;
}

.alert-icon {
  @apply w-5 h-5 flex-shrink-0;
}

.alert-close {
  @apply ml-auto text-current opacity-70 hover:opacity-100 transition-opacity cursor-pointer;
}

.alert-with-icon {
  @apply flex items-start gap-3;
}

.alert-actions {
  @apply mt-3 flex gap-2;
}

.alert-button {
  @apply text-sm font-medium underline hover:no-underline transition-all;
}

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

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

/* Responsive Design for Auth Pages */
@media (max-width: 767px) {
  .auth-card {
    @apply mx-4;
  }

  .auth-header,
  .auth-form,
  .auth-footer {
    @apply px-6 py-4;
  }

  .auth-header h1 {
    @apply text-2xl;
  }

  .auth-benefits {
    @apply mt-4;
  }
}

/* Animation for Auth Cards */
@keyframes authSlideIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

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

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

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

@keyframes slideOutRight {
  from {
    opacity: 1;
    transform: translateX(0);
  }

  to {
    opacity: 0;
    transform: translateX(100%);
  }
}

.auth-card {
  animation: authSlideIn 0.5s ease-out;
}

.animate-slide-in {
  animation: slideInRight 0.3s ease-out;
}

.animate-slide-out {
  animation: slideOutRight 0.3s ease-out;
}

/* Focus States for Accessibility */
.auth-input:focus-visible {
  @apply outline-none ring-2 ring-[#DE007D] ring-offset-2 ring-offset-gray-900 light:ring-offset-white;
}

.auth-button:focus-visible {
  @apply outline-none ring-2 ring-[#DE007D] ring-offset-2 ring-offset-gray-900 light:ring-offset-white;
}

/* Dark Mode Specific Styles */
.dark .auth-input::placeholder {
  @apply text-gray-400;
}

.light .auth-input::placeholder {
  @apply text-gray-500;
}

/* Social Login Buttons (if needed in future) */
.auth-social-buttons {
  @apply space-y-3;
}

.auth-social-button {
  @apply w-full flex items-center justify-center px-4 py-3 border border-gray-700 light:border-gray-300 rounded-lg text-gray-300 light:text-gray-700 hover:bg-gray-950 light:hover:bg-gray-950 transition-colors;
}

.auth-social-button i {
  @apply w-5 h-5 mr-2;
}

.auth-divider {
  @apply relative my-6;
}

.auth-divider::before {
  content: '';
  @apply absolute top-1/2 left-0 right-0 h-px bg-gray-950 light:bg-gray-950;
}

.auth-divider span {
  @apply relative bg-gray-950 light:bg-white px-4 text-sm text-gray-400 light:text-gray-600;
}

/**
 * Loading Spinner Animation
 */
.loader {
  width: 50px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:
    radial-gradient(farthest-side, #F05A28 95%, #0000) 50% 1px/12px 12px no-repeat,
    radial-gradient(farthest-side, #0000 calc(100% - 14px), #444 0);
  animation: spin-loader 2s infinite linear;
  margin: 0 auto;
}

@keyframes spin-loader {
  to {
    transform: rotate(1turn);
  }
}