/* ============================================
   KICKSICK - MAIN STYLESHEET
   Theme: Yellow (#FCFF00) + Black
   ============================================ */

:root {
    --ks-yellow: #FCFF00;
    --ks-yellow-dark: #E0E300;
    --ks-black: #0a0a0a;
    --ks-black-soft: #161616;
    --ks-gray: #6b6b6b;
    --ks-white: #ffffff;
    --ks-radius: 14px;
    --ks-shadow: 0 8px 24px rgba(0,0,0,0.12);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
    font-family: 'Poppins', 'Segoe UI', Arial, sans-serif;
    background: #fafafa;
    color: var(--ks-black);
    line-height: 1.6;
}

a { text-decoration: none; color: inherit; }
ul { list-style: none; }
img { max-width: 100%; display: block; }

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}

/* ---------- HEADER ---------- */
.ks-header {
    background: var(--ks-black);
    border-bottom: 4px solid var(--ks-yellow);
    position: sticky;
    top: 0;
    z-index: 100;
}

.ks-header-inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.ks-logo {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ks-logo img {
    height: 52px;
    width: 52px;
    border-radius: 50%;
    border: 2px solid var(--ks-yellow);
}

.ks-logo-text {
    color: var(--ks-white);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: 0.5px;
}

.ks-logo-text span { color: var(--ks-yellow); }

.ks-logo-tagline {
    display: block;
    color: #bbb;
    font-size: 10px;
    font-weight: 500;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    margin-top: -2px;
}

@media (max-width: 900px) {
    .ks-logo-tagline { display: none; }
}

.ks-nav {
    display: flex;
    align-items: center;
    gap: 6px;
}

.ks-nav a {
    color: var(--ks-white);
    font-weight: 600;
    font-size: 15px;
    padding: 10px 16px;
    border-radius: 30px;
    transition: all 0.2s ease;
    position: relative;
}

.ks-nav a:hover, .ks-nav a.active {
    background: var(--ks-yellow);
    color: var(--ks-black);
}

.ks-nav .soon-tag {
    font-size: 9px;
    background: var(--ks-yellow);
    color: var(--ks-black);
    padding: 1px 6px;
    border-radius: 8px;
    margin-left: 5px;
    vertical-align: middle;
    font-weight: 700;
}

.ks-nav a:hover .soon-tag, .ks-nav a.active .soon-tag {
    background: var(--ks-black);
    color: var(--ks-yellow);
}

.ks-cart-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--ks-yellow);
    color: var(--ks-black) !important;
    padding: 10px 18px;
    border-radius: 30px;
    font-weight: 700;
    position: relative;
}

.ks-cart-count {
    background: var(--ks-black);
    color: var(--ks-yellow);
    font-size: 11px;
    font-weight: 700;
    padding: 2px 7px;
    border-radius: 50%;
}

.ks-mobile-toggle {
    display: none;
    background: none;
    border: none;
    color: var(--ks-yellow);
    font-size: 28px;
    cursor: pointer;
}

@media (max-width: 900px) {
    .ks-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--ks-black); flex-direction: column; padding: 10px; border-bottom: 4px solid var(--ks-yellow); }
    .ks-nav.open { display: flex; }
    .ks-nav a { width: 100%; }
    .ks-mobile-toggle { display: block; }
}

/* ---------- HERO ---------- */
.ks-hero {
    background: linear-gradient(135deg, var(--ks-black) 0%, #1a1a1a 100%);
    color: var(--ks-white);
    padding: 70px 20px;
    text-align: center;
    border-bottom: 6px solid var(--ks-yellow);
}

.ks-hero h1 {
    font-size: 42px;
    font-weight: 800;
    margin-bottom: 14px;
}

.ks-hero h1 span { color: var(--ks-yellow); }

.ks-hero p {
    font-size: 18px;
    color: #d5d5d5;
    max-width: 600px;
    margin: 0 auto 26px;
}

.ks-btn {
    display: inline-block;
    background: var(--ks-yellow);
    color: var(--ks-black);
    font-weight: 700;
    padding: 14px 34px;
    border-radius: 30px;
    border: 2px solid var(--ks-yellow);
    cursor: pointer;
    font-size: 15px;
    transition: all 0.2s ease;
}

.ks-btn:hover {
    background: var(--ks-black);
    color: var(--ks-yellow);
}

.ks-btn-outline {
    background: transparent;
    color: var(--ks-yellow);
}

.ks-btn-outline:hover {
    background: var(--ks-yellow);
    color: var(--ks-black);
}

/* ---------- SECTION HEADINGS ---------- */
.ks-section { padding: 60px 20px; }
.ks-section-title {
    text-align: center;
    font-size: 30px;
    font-weight: 800;
    margin-bottom: 8px;
}
.ks-section-title span { color: var(--ks-yellow-dark); border-bottom: 4px solid var(--ks-black); }
.ks-section-sub {
    text-align: center;
    color: var(--ks-gray);
    margin-bottom: 40px;
}

/* ---------- PRODUCT GRID ---------- */
.ks-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 26px;
    max-width: 1200px;
    margin: 0 auto;
}

.ks-card {
    background: var(--ks-white);
    border: 2px solid var(--ks-black);
    border-radius: var(--ks-radius);
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.ks-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--ks-shadow);
    border-color: var(--ks-yellow-dark);
}

.ks-card-img {
    height: 200px;
    background: var(--ks-black);
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.ks-card-img img { height: 100%; width: 100%; object-fit: cover; }
.ks-card-img svg { width: 90px; height: 90px; }

.ks-card-body { padding: 18px; flex: 1; display: flex; flex-direction: column; }
.ks-card-body h3 { font-size: 16px; margin-bottom: 6px; }
.ks-card-body p { font-size: 13px; color: var(--ks-gray); flex: 1; margin-bottom: 12px; }

.ks-price {
    font-size: 20px;
    font-weight: 800;
    color: var(--ks-black);
    margin-bottom: 12px;
}
.ks-price span { color: var(--ks-yellow-dark); background: var(--ks-black); padding: 1px 6px; border-radius: 4px; }

.ks-card-footer { display: flex; gap: 8px; }
.ks-card-footer .ks-btn, .ks-card-footer a { flex: 1; text-align: center; padding: 10px; font-size: 13px; }

/* ---------- HEADER BAR OPTIONS (Shop/Tools/Digital/Foods cards on Home) ---------- */
.ks-options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: 22px;
    max-width: 1100px;
    margin: 0 auto;
}

.ks-option-card {
    background: var(--ks-black);
    color: var(--ks-white);
    border: 3px solid var(--ks-yellow);
    border-radius: var(--ks-radius);
    padding: 30px 20px;
    text-align: center;
    transition: all 0.25s ease;
}

.ks-option-card:hover {
    background: var(--ks-yellow);
    color: var(--ks-black);
}

.ks-option-card .icon { font-size: 40px; margin-bottom: 12px; }
.ks-option-card h3 { font-size: 18px; margin-bottom: 6px; }
.ks-option-card p { font-size: 13px; opacity: 0.8; }

/* ---------- FOOTER ---------- */
.ks-footer {
    background: var(--ks-black);
    color: var(--ks-white);
    padding: 50px 20px 20px;
    border-top: 6px solid var(--ks-yellow);
}

.ks-footer-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 30px;
    max-width: 1200px;
    margin: 0 auto 30px;
}

.ks-footer h4 { color: var(--ks-yellow); margin-bottom: 14px; font-size: 16px; }
.ks-footer ul li { margin-bottom: 8px; }
.ks-footer ul li a { color: #ccc; font-size: 14px; }
.ks-footer ul li a:hover { color: var(--ks-yellow); }
.ks-footer p { color: #aaa; font-size: 14px; }

.ks-footer-bottom {
    text-align: center;
    padding-top: 20px;
    border-top: 1px solid #333;
    font-size: 13px;
    color: #888;
}

.ks-footer-bottom .credit { color: var(--ks-yellow); font-weight: 600; }

/* ---------- FORMS ---------- */
.ks-form-group { margin-bottom: 18px; }
.ks-form-group label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 14px; }
.ks-form-group input, .ks-form-group textarea, .ks-form-group select {
    width: 100%;
    padding: 12px 14px;
    border: 2px solid #ddd;
    border-radius: 10px;
    font-size: 14px;
    font-family: inherit;
}
.ks-form-group input:focus, .ks-form-group textarea:focus {
    outline: none;
    border-color: var(--ks-yellow-dark);
}

.ks-alert {
    padding: 14px 18px;
    border-radius: 10px;
    margin-bottom: 20px;
    font-size: 14px;
}
.ks-alert-success { background: #eaffea; color: #1b6b1b; border: 1px solid #b6e6b6; }
.ks-alert-error { background: #ffecec; color: #a10000; border: 1px solid #ffb3b3; }

/* ---------- BREADCRUMB / PAGE HEADER ---------- */
.ks-page-header {
    background: var(--ks-black);
    color: var(--ks-white);
    padding: 40px 20px;
    text-align: center;
    border-bottom: 4px solid var(--ks-yellow);
}
.ks-page-header h1 { font-size: 30px; font-weight: 800; }
.ks-page-header h1 span { color: var(--ks-yellow); }

/* ---------- COMING SOON ---------- */
.ks-coming-soon {
    text-align: center;
    padding: 100px 20px;
}
.ks-coming-soon .icon { font-size: 70px; margin-bottom: 20px; }
.ks-coming-soon h2 { font-size: 28px; margin-bottom: 10px; }
.ks-coming-soon p { color: var(--ks-gray); max-width: 500px; margin: 0 auto; }

/* ---------- CART TABLE ---------- */
.ks-cart-table { width: 100%; border-collapse: collapse; margin-bottom: 30px; }
.ks-cart-table th { text-align: left; padding: 12px; background: var(--ks-black); color: var(--ks-yellow); font-size: 13px; }
.ks-cart-table td { padding: 12px; border-bottom: 1px solid #eee; font-size: 14px; vertical-align: middle; }
.ks-cart-table img { width: 60px; height: 60px; object-fit: cover; border-radius: 8px; }
.qty-box { display: flex; align-items: center; gap: 8px; }
.qty-box button { width: 28px; height: 28px; border: 2px solid var(--ks-black); background: var(--ks-white); border-radius: 6px; cursor: pointer; font-weight: 700; }
.qty-box input { width: 40px; text-align: center; border: 1px solid #ccc; border-radius: 6px; padding: 4px; }
.remove-link { color: #c00; font-size: 13px; font-weight: 600; }

.ks-cart-summary {
    max-width: 380px;
    margin-left: auto;
    background: var(--ks-black);
    color: var(--ks-white);
    padding: 24px;
    border-radius: var(--ks-radius);
    border: 3px solid var(--ks-yellow);
}
.ks-cart-summary .row { display: flex; justify-content: space-between; margin-bottom: 10px; font-size: 15px; }
.ks-cart-summary .total { font-size: 22px; font-weight: 800; color: var(--ks-yellow); border-top: 1px solid #444; padding-top: 14px; margin-top: 14px; }

/* ---------- ADMIN ---------- */
.ks-admin-body { background: #f2f2f2; font-family: 'Poppins', sans-serif; }
.ks-admin-nav { background: var(--ks-black); color: var(--ks-white); padding: 16px 30px; display: flex; justify-content: space-between; align-items: center; border-bottom: 4px solid var(--ks-yellow); }
.ks-admin-nav a { color: var(--ks-yellow); font-weight: 600; }
.ks-admin-wrap { max-width: 1200px; margin: 30px auto; padding: 0 20px; }
.ks-admin-card { background: #fff; border-radius: 12px; padding: 24px; box-shadow: 0 2px 10px rgba(0,0,0,0.06); margin-bottom: 24px; }
.ks-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px,1fr)); gap: 16px; margin-bottom: 24px; }
.ks-stat-box { background: var(--ks-black); color: var(--ks-white); border-radius: 12px; padding: 20px; border-left: 6px solid var(--ks-yellow); }
.ks-stat-box .num { font-size: 26px; font-weight: 800; color: var(--ks-yellow); }
.ks-stat-box .label { font-size: 13px; color: #ccc; }
.ks-table { width: 100%; border-collapse: collapse; }
.ks-table th { background: var(--ks-black); color: var(--ks-yellow); padding: 10px; text-align: left; font-size: 13px; }
.ks-table td { padding: 10px; border-bottom: 1px solid #eee; font-size: 14px; }
.status-badge { padding: 4px 10px; border-radius: 20px; font-size: 12px; font-weight: 700; text-transform: capitalize; }
.status-pending { background: #fff3cd; color: #856404; }
.status-processing { background: #cce5ff; color: #004085; }
.status-shipped { background: #d4edda; color: #155724; }
.status-delivered { background: #d1f7d1; color: #0a5d0a; }
.status-cancelled { background: #f8d7da; color: #721c24; }
.ks-login-box { max-width: 380px; margin: 90px auto; background: #fff; padding: 34px; border-radius: 14px; box-shadow: 0 8px 24px rgba(0,0,0,0.1); border-top: 6px solid var(--ks-yellow); }