/* Apple Design System Enhancements for Poki-like template */

/* Global Typography Improvements */
body, h1, h2, h3, h4, h5, h6, p, span, div {
    font-family: var(--fontBody) !important;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

/* Enhanced Buttons */
.btn, .button, input[type="submit"], input[type="button"], button {
    background: var(--apple-blue);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-weight: 600;
    font-size: 16px;
    font-family: var(--fontBody);
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-close);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px; /* Apple's minimum touch target */
}

.btn:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, button:hover {
    background: var(--apple-blue-dark);
    transform: translateY(-1px);
    box-shadow: var(--shadow-hover);
}

.btn:active, .button:active, input[type="submit"]:active, input[type="button"]:active, button:active {
    transform: translateY(0);
    box-shadow: var(--shadow-close);
}

/* Secondary Button Style */
.btn-secondary {
    background: var(--apple-gray-10);
    color: var(--apple-gray-1);
}

.btn-secondary:hover {
    background: var(--apple-gray-9);
    color: var(--apple-gray-1);
}

/* Success Button */
.btn-success {
    background: var(--apple-green);
}

.btn-success:hover {
    background: var(--apple-green-dark);
}

/* Warning Button */
.btn-warning {
    background: var(--apple-orange);
}

.btn-warning:hover {
    background: var(--apple-orange-dark);
}

/* Danger Button */
.btn-danger {
    background: var(--apple-red);
}

.btn-danger:hover {
    background: var(--apple-red-dark);
}

/* Enhanced Cards and Containers */
.card, .game-card, .post {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-close);
    border: none;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card:hover, .game-card:hover, .post:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-hover);
}

/* Enhanced Form Elements */
input[type="text"],
input[type="email"],
input[type="password"],
input[type="search"],
textarea,
select {
    border: 1px solid var(--apple-gray-9);
    border-radius: 12px;
    padding: 12px 16px;
    font-family: var(--fontBody);
    font-size: 16px;
    background: white;
    transition: all 0.2s ease;
    min-height: 44px;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
    border-color: var(--apple-blue);
    outline: none;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Enhanced Navigation */
.nav, .navbar, .menu {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--apple-gray-10);
}

.nav-link, .navbar-nav a, .menu a {
    color: var(--apple-gray-1);
    text-decoration: none;
    font-weight: 500;
    padding: 8px 16px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.nav-link:hover, .navbar-nav a:hover, .menu a:hover {
    background: var(--apple-gray-10);
    color: var(--apple-blue);
}

/* Enhanced Text Styles */
h1, h2, h3, h4, h5, h6 {
    color: var(--apple-gray-1);
    font-weight: 600;
    margin-bottom: 16px;
    line-height: 1.2;
}

h1 { font-size: 34px; font-weight: 700; }
h2 { font-size: 28px; font-weight: 600; }
h3 { font-size: 22px; font-weight: 600; }
h4 { font-size: 20px; font-weight: 600; }
h5 { font-size: 18px; font-weight: 500; }
h6 { font-size: 16px; font-weight: 500; }

p {
    color: var(--apple-gray-5);
    line-height: 1.6;
    margin-bottom: 16px;
}

/* Enhanced Links */
a {
    color: var(--apple-blue);
    text-decoration: none;
    transition: color 0.2s ease;
}

a:hover {
    color: var(--apple-blue-dark);
}

/* Enhanced Badges and Labels */
.badge, .label, .tag {
    background: var(--apple-blue);
    color: white;
    padding: 4px 12px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 500;
    display: inline-block;
}

.badge-success { background: var(--apple-green); }
.badge-warning { background: var(--apple-orange); }
.badge-danger { background: var(--apple-red); }
.badge-secondary { background: var(--apple-gray-7); color: var(--apple-gray-1); }

/* Enhanced Progress Bars */
.progress {
    background: var(--apple-gray-10);
    border-radius: 10px;
    overflow: hidden;
    height: 8px;
}

.progress-bar {
    background: var(--apple-blue);
    height: 100%;
    border-radius: 10px;
    transition: width 0.3s ease;
}

/* Enhanced Tables */
.table {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: var(--shadow-close);
}

.table th {
    background: var(--apple-gray-11);
    color: var(--apple-gray-1);
    font-weight: 600;
    padding: 16px;
    border: none;
}

.table td {
    padding: 16px;
    border: none;
    border-bottom: 1px solid var(--apple-gray-10);
}

.table tr:last-child td {
    border-bottom: none;
}

/* Enhanced Modal/Popup Styles */
.modal, .popup, .dialog {
    background: white;
    border-radius: 16px;
    box-shadow: var(--shadow-far);
    border: none;
    padding: 24px;
}

.modal-header {
    border-bottom: 1px solid var(--apple-gray-10);
    padding-bottom: 16px;
    margin-bottom: 20px;
}

.modal-title {
    color: var(--apple-gray-1);
    font-weight: 600;
    font-size: 20px;
}

/* Enhanced Alert Styles */
.alert {
    border-radius: 12px;
    padding: 16px;
    border: none;
    margin-bottom: 16px;
}

.alert-info {
    background: rgba(0, 122, 255, 0.1);
    color: var(--apple-blue-dark);
}

.alert-success {
    background: rgba(52, 199, 89, 0.1);
    color: var(--apple-green-dark);
}

.alert-warning {
    background: rgba(255, 149, 0, 0.1);
    color: var(--apple-orange-dark);
}

.alert-danger {
    background: rgba(255, 59, 48, 0.1);
    color: var(--apple-red-dark);
}

/* Game Grid Enhancements */
.games-grid .post {
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.games-grid .post:hover {
    transform: translateY(-4px) scale(1.02);
    box-shadow: var(--shadow-hover);
}

.post-name {
    font-family: var(--fontBody);
    font-weight: 600;
    color: var(--apple-gray-1);
}

/* Search Bar Enhancement */
.search-form input {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(20px);
    border: 1px solid var(--apple-gray-10);
}

.search-form input:focus {
    background: white;
    border-color: var(--apple-blue);
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

/* Dark Mode Support */
@media (prefers-color-scheme: dark) {
    body {
        background: linear-gradient(135deg, var(--apple-gray-2) 0%, var(--apple-gray-1) 100%);
        color: var(--apple-gray-12);
    }

    .card, .game-card, .post {
        background: var(--apple-gray-2);
        border: 1px solid var(--apple-gray-3);
    }

    h1, h2, h3, h4, h5, h6 {
        color: var(--apple-gray-12);
    }

    p {
        color: var(--apple-gray-7);
    }

    .nav, .navbar, .menu {
        background: rgba(28, 28, 30, 0.95);
        border-bottom-color: var(--apple-gray-3);
    }

    .modal, .popup, .dialog {
        background: var(--apple-gray-2);
        color: var(--apple-gray-12);
    }

    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="search"],
    textarea,
    select {
        background: var(--apple-gray-3);
        border-color: var(--apple-gray-4);
        color: var(--apple-gray-12);
    }
}

/* iOS Safari specific improvements */
@supports (-webkit-touch-callout: none) {
    /* iOS-specific styling */
    input, textarea, select {
        -webkit-appearance: none;
        border-radius: 12px;
    }

    button, .btn {
        -webkit-appearance: none;
        border-radius: 12px;
    }
}