/* ============================= */
/*         GLOBALA STILAR        */
/* ============================= */

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

body {
    font-family: 'Arial', sans-serif;
    background: #f9f9f9;
    color: #333;
    line-height: 1.6;
}

.container {
    width: 100%;
    margin: auto;
}

/* ============================= */
/*          NAVBAR               */
/* ============================= */

.navbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #ffffff;
    padding: 10px 20px;
    position: sticky;
    top: 0;
    z-index: 1000;
    flex-wrap: wrap;
}

.navbar .logo-link img {
    height: 60px;
    width: auto;
}

.navbar .nav-links {
    display: flex;
    align-items: center;
    gap: 15px;
}

.navbar .nav-links a {
    color: #1f1e1e;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-weight: 500;
    padding: 8px 15px;
    border-radius: 25px;
    background-color: #f0f0f0;
    transition: all 0.3s ease;
    text-decoration: none; /* 👈 Tar bort underline */
}

.navbar .nav-links a:hover {
    background-color: #a7b0b8;
    color: #fff;
    transform: translateY(-2px);
}

.navbar .search-wrapper {
    flex: 1;
    margin: 10px 20px;
    position: relative;
    min-width: 200px;
}

.search-wrapper .search-textbox {
    width: 100%;
    padding: 8px 12px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

.search-wrapper #suggestions {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: #fff;
    border: 0px solid #ccc;
    z-index: 10;
}

/* ============================= */
/*          BANNER               */
/* ============================= */

.header-banner {
    width: 100%;
    height: auto;
    border-radius: 8px;
    margin-bottom: 20px;
}

/* ============================= */
/*          BUTTONS              */
/* ============================= */

.btn {
    display: inline-block;
    padding: 8px 15px;
    border-radius: 5px;
    border: 1px solid #007bff;
    background: #007bff;
    color: #fff;
    cursor: pointer;
    font-size: 0.95rem;
    text-align: center;
}

.btn:hover {
    background: #0056b3;
    border-color: #0056b3;
}

/* ============================= */
/*        PRODUCT GRID           */
/* ============================= */

.shop-container {
    display: flex;
    gap: 20px;
    margin-bottom: 50px;
    padding-left: 20px; /* Flyttar hela shop-container lite åt höger */
}

/* Filter Sidebar */
.filter-sidebar {
    width: 220px;
    margin-left: 30px; /* Extra flytt åt höger */
    padding: 15px;
    background-color: #fff;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    flex-shrink: 0;
}

.filter-sidebar h3 {
    margin-bottom: 10px;
    color: #272727;
}

/* ============================= */
/*   TA BORT PUNKTER I LISTOR    */
/* ============================= */
.filter-sidebar ul,
.filter-sidebar li {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

.filter-sidebar li::marker {
    content: none !important;
}

/* ============================= */
/*    RUNDANDE CHECKBOXAR        */
/* ============================= */
.filter-sidebar input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    border: 2px solid #1b1b1c;
    border-radius: 50%;
    margin-right: 8px;
    position: relative;
    cursor: pointer;
    vertical-align: middle;
    transition: all 0.2s ease;
}



.filter-sidebar input[type="checkbox"]:checked::before {
    content: '';
    display: block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background-color: #45474a;
    position: absolute;
    top: 3px;
    left: 3px;
}

/* ============================= */
/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 20px;
    flex: 1;
}

.product-card {
    background: #fff;
    padding: 15px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    text-align: center;
}

.product-card img {
    max-width: 100%;
    border-radius: 5px;
    margin-bottom: 10px;
}

.product-card h4 {
    margin: 10px 0;
    font-size: 1rem;
}

.product-card p {
    font-weight: bold;
    color: #007bff;
}

/* ============================= */
/*         SID-SPECIFIKA STILAR  */
/* ============================= */

body.page-home { background: #ffffff; }
body.page-cart { background: #f0f9ff; }
body.page-cart h2 { color: #007bff; }
body.page-product { background: #fff7f0; }
body.page-login { background: #f1f1f1; }
body.page-login .wrapper { max-width: 500px; margin: 50px auto; padding: 25px; background: #fff; border-radius: 8px; box-shadow: 0 4px 6px rgba(0,0,0,0.1); }
body.page-login h2 { text-align: center; margin-bottom: 20px; }
body.page-login .form-control { width: 100%; padding: 10px; margin-bottom: 10px; border-radius: 5px; border: 1px solid #ccc; }
body.page-login .help-block { color: red; font-size: 0.9rem; }
body.page-checkout { background: #fef6e4; }
body.page-checkout .checkout-form { max-width: 600px; margin: auto; background: #fff; padding: 25px; border-radius: 8px; }
body.page-contact { background: #f7f7f7; }
body.page-contact .contact-form { max-width: 600px; margin: auto; background: #fff; padding: 25px; border-radius: 8px; }
body.page-about { background: #ffffff; }
body.page-about .about-section { padding: 50px 0; text-align: center; }

/* ============================= */
/*         TABLES                */
/* ============================= */

table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 20px;
}

table th, table td { padding: 10px; border: 1px solid #ddd; }
table th { background: #007bff; color: #fff; }

/* ============================= */
/*         FORMS                 */
/* ============================= */

input[type="text"],
input[type="password"],
input[type="email"],
textarea {
    width: 100%;
    padding: 10px;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

textarea { resize: vertical; }

/* ============================= */
/*       RESPONSIVE DESIGN       */
/* ============================= */

@media (max-width: 1024px) {
    .shop-container { flex-direction: column; }
    .filter-sidebar { width: 100%; margin-left: 0; margin-bottom: 20px; }
    .product-grid { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); }
}

@media (max-width: 768px) {
    .navbar { flex-direction: column; align-items: flex-start; }
    .navbar .nav-links { flex-wrap: wrap; gap: 10px; margin-top: 10px; }
    .navbar .search-wrapper { width: 100%; margin: 10px 0; }
}

@media (max-width: 480px) {
    .product-card { padding: 10px; }
    .product-card h4 { font-size: 0.95rem; }
    .product-card p { font-size: 0.9rem; }
    .navbar .nav-links a { font-size: 0.9rem; }
    .navbar .logo-link img { height: 50px; }
}

/* ============================= */
/*       ADMIN PANEL       */
/* ============================= */
.admin-container {
    background: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
}

.admin-tabs {
    display: flex;
    gap: 15px;
    margin-bottom: 20px;
}

.admin-tabs a {
    padding: 10px 15px;
    border-radius: 6px;
    background: #f0f0f0;
    text-decoration: none;
    color: #333;
}

.admin-tabs a.active {
    background: #007bff;
    color: #fff;
}


.admin-tabs a:hover {
    background: #e9e9e9;
}


.admin-content {
    padding: 15px;
}

.admin-table-wrapper {
    overflow-x: auto;
    margin-bottom: 30px;
}

.admin-table-wrapper table input,
.admin-table-wrapper table select {
    width: 100%;
    padding: 4px;
    font-size: 0.9rem;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.btn-small {
    padding: 5px 10px;
    font-size: 0.85rem;
    margin: 2px;
    border-radius: 4px;
    cursor: pointer;
}

.btn-danger {
    background: #dc3545;
    border: 1px solid #dc3545;
    color: #fff;
}

.btn-danger:hover {
    background: #c82333;
}

.image-drop-area {
    border: 2px dashed #ccc;
    border-radius: 8px;
    padding: 5px;
    min-height: 70px;
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    cursor: pointer;
    transition: background 0.3s;
}

.image-drop-area.dragover {
    background: #e6f7ff;
}

.image-drop-area img.thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 4px;
    margin: 2px;
    display: inline-block;
}

/* ============================= */
/*    ADMIN: Internal Balance - compact */
/* ============================= */

.admin-table-wrapper {
    overflow-x: auto;   /* Behåll scroll om bredden blir för stor */
    max-width: 100%;    /* Begränsa till container */
    margin-top: 20px;
}

.balance-form input,
.balance-form select {
    width: 90px;        /* Minska bredd något */
    padding: 2px 4px;   /* Minska padding för mindre höjd */
    margin: 1px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 0.8rem;  /* Lite mindre text */
    box-sizing: border-box;
}

.balance-form input[type="date"],
.balance-form input[type="time"] {
    width: 100px;
}

.balance-form input[name="comment"],
.balance-form input[name="owner"],
.balance-form input[name="customer"],
.balance-form input[name="seller"],
.balance-form input[name="order_val"] {
    width: 120px;
}

.balance-form button {
    padding: 3px 6px;   /* Minska knapphöjd */
    margin: 1px;
    border-radius: 4px;
    border: none;
    cursor: pointer;
    font-size: 0.8rem;
    transition: 0.2s;
}

table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;  /* Se till att kolumner inte växer över container */
}

table th, table td {
    border: 1px solid #ddd;
    padding: 4px;        /* Minska padding för mindre radhöjd */
    text-align: center;
    font-size: 0.8rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis; /* Trunkera text som är för lång */
}

table th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

table tr:nth-child(even) {
    background-color: #f9f9f9;
}

table tr:hover {
    background-color: #f1f1f1;
}

/* Kompakt layout för internal_balance */
.admin-content table input,
.admin-content table select {
    width: 100%;
    padding: 2px 4px !important;  /* tvingar mindre padding */
    margin: 0 !important;
    height: 26px !important;      /* bestämd höjd */
    font-size: 0.85rem !important;
    box-sizing: border-box;
}

.admin-content table td,
.admin-content table th {
    padding: 4px 6px !important;
    font-size: 0.85rem !important;
    text-align: center;
}

.admin-content table tr {
    height: auto !important;
}

/* ============================= */
/*       ADMIN: Internal Balance */
/* ============================= */

/* Behåll scroll om tabellen blir för bred */
.admin-table-wrapper {
    overflow-x: auto;
    margin-top: 20px;
    max-width: 100%;
}

/* Kompakt input/select i tabell */
.balance-form input,
.balance-form select {
    width: 90px;
    padding: 2px 4px;
    margin: 1px 0;
    border-radius: 4px;
    border: 1px solid #ccc;
    font-size: 0.8rem;
    box-sizing: border-box;
}

.balance-form input[type="date"],
.balance-form input[type="time"] {
    width: 100px;
}

.balance-form input[name="comment"],
.balance-form input[name="owner"],
.balance-form input[name="customer"],
.balance-form input[name="seller"],
.balance-form input[name="order"] {
    width: 130px;
}

.balance-form button {
    display: inline-block;
    min-width: 60px; /* se till att knappen syns */
    padding: 4px 8px;
    margin: 1px;
    font-size: 0.8rem;
    cursor: pointer;
    border-radius: 4px;
    border: none;
    white-space: nowrap;
}

/* Specifika färger för knappar */
.balance-form button[name="add_row"] { background-color: #28a745; color: #fff; }
.balance-form button[name="add_row"]:hover { background-color: #218838; }

.balance-form button[name="update_row"] { background-color: #007bff; color: #fff; }
.balance-form button[name="update_row"]:hover { background-color: #0056b3; }

.balance-form button[name="delete_row"] { background-color: #dc3545; color: #fff; }
.balance-form button[name="delete_row"]:hover { background-color: #c82333; }

/* Tabell */
.admin-table-wrapper table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
    word-wrap: break-word;
}

.admin-table-wrapper table th,
.admin-table-wrapper table td {
    border: 1px solid #ddd;
    padding: 4px;  /* minskar höjd */
    text-align: center;
    font-size: 0.85rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.admin-table-wrapper table th {
    background-color: #007bff;
    color: #fff;
    font-weight: bold;
}

.admin-table-wrapper table tr:nth-child(even) { background-color: #f9f9f9; }
.admin-table-wrapper table tr:hover { background-color: #f1f1f1; }

/* Åtgärder-kolumnen */
.admin-table-wrapper table td:last-child {
    width: 120px;  /* maxbredd */
    white-space: nowrap; /* knapparna bryts inte */
}

/* Kompakt layout för inputs i tabellceller */
.admin-content table input,
.admin-content table select {
    width: 100%;
    padding: 2px 4px !important;
    margin: 0 !important;
    height: 26px !important;
    font-size: 0.85rem !important;
    box-sizing: border-box;
}

.admin-content table td,
.admin-content table th {
    padding: 4px 6px !important;
    font-size: 0.85rem !important;
    text-align: center;
}

.admin-content table tr {
    height: auto !important;
}

/* RESPONSIVE */
@media (max-width: 1024px) {
    table { font-size: 0.8rem; }
    .balance-form input, .balance-form select { font-size: 0.8rem; width: 80px; }
    .admin-table-wrapper table td:last-child { width: 100px; }
}

@media (max-width: 768px) {
    .balance-form input, .balance-form select { width: 70px; font-size: 0.75rem; }
    .admin-table-wrapper table td:last-child { width: 90px; }
}

/* ============================= */
/*          CART PAGE            */
/* ============================= */

.cart-wrapper {
    background: #fff;
    padding: 20px;
    border-radius: 10px;
    box-shadow: 0 2px 6px rgba(0,0,0,0.1);
    max-width: 800px;
    margin: 30px auto;
}

.cart-wrapper h2 {
    margin-bottom: 20px;
    font-size: 1.6rem;
    color: #007bff;
    border-bottom: 2px solid #f0f0f0;
    padding-bottom: 10px;
}

.cart-items {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.cart-item {
    display: grid;
    grid-template-columns: 60px 1fr auto auto auto;
    align-items: center;
    gap: 10px;
    padding: 10px;
    border-bottom: 1px solid #eee;
}

.cart-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
}

.cart-item span {
    font-weight: bold;
    color: #333;
}

.cart-item input[type="number"] {
    width: 50px;
    padding: 5px;
    text-align: center;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.cart-item button {
    background: #f0f0f0;
    border: none;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: 0.2s;
}

.cart-item button:hover {
    background: #ddd;
}

.cart-item .remove {
    background: #dc3545;
    color: #fff;
}

.cart-item .remove:hover {
    background: #c82333;
}

.cart-summary {
    margin-top: 20px;
    text-align: right;
}

.cart-total {
    font-size: 1.2rem;
    margin-bottom: 15px;
}

.btn-checkout {
    background: #28a745;
    border: 1px solid #28a745;
    padding: 10px 20px;
    font-size: 1rem;
    border-radius: 6px;
    transition: 0.2s;
    text-decoration: none;
    color: #fff;
}

.btn-checkout:hover {
    background: #218838;
    border-color: #218838;
}

/* ============================= */
/*         MINI CART             */
/* ============================= */

.cart-link {
    position: relative;
    font-size: 1.2rem;
    text-decoration: none;
    background: #f0f0f0;
    padding: 8px 15px;
    border-radius: 25px;
    transition: all 0.3s ease;
}

.cart-link:hover {
    background: #a7b0b8;
    color: #fff;
}

#mini-cart-count {
    background: #dc3545;
    color: #fff;
    font-size: 0.75rem;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 50%;
    position: absolute;
    top: 2px;
    right: 8px;
}

/* ============================= */
/*         SEARCH DROPDOWN       */
/* ============================= */

/* =============================
   Sök-dropdown
============================= */
.search-wrapper {
    position: relative; /* gör dropdown absolut positionerad relativ till detta */
}

#suggestions {
    position: absolute;
    top: 100%;           /* direkt under input */
    left: 0;
    right: 0;
    z-index: 9999;       /* över allt annat */
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 4px;
    max-height: 300px;
    overflow-y: auto;
    display: none;       /* default hidden */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.suggestion-row:hover {
    background-color: #f5f5f5;
}

.info-bar {
    background-color: #fff3cd;
    border-bottom: 1px solid #ffeeba;
    padding: 12px 0;
}

.info-bar-inner {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    color: #856404;
    font-size: 15px;
    text-align: center;
}

.info-text {
    max-width: 900px;
}

.info-close {
    position: absolute;
    right: 15px;
    background: none;
    border: none;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    color: #856404;
}

.info-close:hover {
    opacity: 0.7;
}

@media (max-width: 768px) {
    .info-bar-inner {
        font-size: 14px;
        padding-right: 40px;
    }
}