html {
  font-size: 14px;
}

@media (min-width: 768px) {
  html {
    font-size: 16px;
  }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
  box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

html {
  position: relative;
  min-height: 100%;
}

body {
  margin-bottom: 60px;
}

.form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder {
  color: var(--bs-secondary-color);
  text-align: end;
}

.form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder {
  text-align: start;
}

.dropdown:hover .dropdown-menu {
    display: block;
    margin-top: 0; 
}



/*ChatGPT Prompt 007 Start

    Task:Create CSS for a modern POS or Point of Sale system interface. 
    The inventory should be on the right and the cart panel should be on the left. 
    The search icon for registered customers should also be on top of the cart panel
    Also include the categories as buttons above the inventory section and another search bar for the items on top.
*/
/* POS Styling */
.pos-wrapper {
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 70px);
}

/* Main Container for Inventory and Cart */
.pos-container {
    display: flex;
    flex: 1;
    gap: 1.5rem;
    padding-bottom: 1rem;
}

/* Inventory */
.pos-inventory {
    flex: 1 1 65%;
    overflow-y: auto;
}

/* Cart */
.pos-cart {
    flex: 0 0 400px;
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
    padding: 1.5rem;
    max-height: calc(100vh - 100px);
}

    /* Scrollbar Styling */
    .pos-cart::-webkit-scrollbar {
        width: 8px;
    }

    .pos-cart::-webkit-scrollbar-thumb {
        background-color: rgba(0, 0, 0, 0.2);
        border-radius: 10px;
    }

/* Search Bar */
.pos-search-bar {
    display: flex;
    gap: 1rem;
    align-items: center;
    margin-bottom: 1.5rem;
}

    .pos-search-bar input {
        flex: 1;
        border-radius: 8px;
        border: 1px solid #ddd;
        padding: 0.5rem 1rem;
    }

/* Category Buttons */
.category-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 1.5rem;
}

    .category-filters button {
        border-radius: 20px;
        border: 1px solid #ddd;
        background: #fff;
        padding: 0.4rem 1rem;
        transition: all 0.2s;
    }

        .category-filters button:hover,
        .category-filters button.active {
            background-color: #f57c00;
            color: #fff;
            border-color: #f57c00;
        }

/* Product Grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 1rem;
    align-items: stretch;
}

/* Product Card */
.product-card {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    height: 300px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 12px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
    text-align: center;
    padding: 0.75rem;
    transition: all 0.2s ease;
}

    .product-card:hover {
        transform: translateY(-3px);
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    }

    .product-card img {
        height: 120px;
        width: 100%;
        object-fit: cover;
        border-radius: 8px;
    }

    .product-card h6 {
        font-size: 1rem;
        font-weight: 600;
        margin: 0.5rem 0 0.25rem;
    }

    .product-card .price {
        color: #444;
        font-weight: 500;
    }

/* Cart Header */
.cart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
    padding-bottom: 0.5rem;
    margin-bottom: 1rem;
}

/* Cart List Scrollable Section */
.cart-list {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 1rem;
    padding-right: 0.25rem;
    min-width: 100%;
}

/* Individual Cart Item */
.cart-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f2f2f2;
    width: 100%;
    gap: 0.5rem;
}

.cart-item-name {
    font-weight: 500;
    flex: 1;
    font-size: 1rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 210px;
}

/* Cart Quantity Controls */
.cart-item-controls {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.35rem;
    flex-shrink: 0;
    min-width: 110px;
}
.cart-item-controls button {
    border: none;
    background: #f3f3f3;
    border-radius: 50%;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
}

    .cart-item-controls button:hover {
        background-color: #f57c00;
        color: #fff;
    }
    .cart-item-controls span {
        font-size: 0.9rem;
        white-space: nowrap;
    }

/* Cart Total */
.cart-total {
    font-weight: 800;
    font-size: 1.2rem;
    text-align: right;
    margin-top: 1rem;
    border-top: 1px solid #eee;
    padding-top: 0.75rem;
}

/* Cart Footer */
.cart-footer {
    margin-top: auto;
}

/* Cart Buttons */
.cart-actions {
    display: flex;
    justify-content: space-between;
    gap: 2rem;
    margin-top: 0.75rem;
}

    .cart-actions button {
        flex: 1;
        padding: 1rem 1.5rem;
        font-weight: 500;
        border-radius: 8px;
        font-size: 1rem;
        cursor: pointer;
        transition: all 0.2s ease;
        min-width: 130px;
    }
    .cart-actions button:active {
            transform: scale(0.98);
            opacity: 0.85;
    }

/* Customer Search */
.cart-customer {
    border-bottom: 1px solid #eee;
    padding-bottom: 1rem;
    position: relative;
}

#customerResults {
    max-height: 180px;
    overflow-y: auto;
    border: 1px solid #ddd;
    border-radius: 8px;
    position: absolute;
    width: 100%;
    background: #fff;
    z-index: 1000;
}

    #customerResults li {
        cursor: pointer;
    }

        #customerResults li:hover {
            background-color: #f9f9f9;
        }
/* ChatGPT Prompt 007 end */



/* ChatGPT Prompt 008 start
   Task: Create CSS for the receipt page of the POS system. 
    The receipt should be clean and professional, with clear sections for items, totals, and customer information.
*/
/* Button Styles */
.btn-clear {
    background: #eee;
    border: none;
}

.btn-checkout {
    background: #f57c00;
    border: none;
    color: #fff;
}

    .btn-checkout:hover {
        background: #e56f00;
    }

.btn-minus {
    border: none;
    background: #f3f3f3;
    border-radius: 50%;
    width: 26px;
    height: 26px;
    font-weight: bold;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: all 0.2s;
}

    .btn-minus:hover {
        background-color: #f57c00;
        color: #fff;
    }

@media (max-width: 992px) {
    .pos-container {
        flex-direction: column;
    }

    .pos-cart {
        max-height: unset;
        position: static;
    }
}
/* Receipt Styling */
.receipt-container {
    max-width: 850px;
    min-height: 500px;
    margin: 3rem auto;
    padding: 3rem 3.5rem;
    background: #fff;
    border-radius: 18px;
    box-shadow: 0 8px 24px rgba(0,0,0,.1);
    font-family: "Segoe UI", system-ui, sans-serif;
    color: #222;
}

    .receipt-container h3 {
        text-align: center;
        font-weight: 700;
        font-size: 1.8rem;
        margin: 0 0 2rem 0;
        letter-spacing: 0.5px;
    }

    .receipt-container p {
        margin-bottom: 0.5rem;
        font-size: 1rem;
    }

.receipt-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 1.2rem;
}

    .receipt-table th, .receipt-table td {
        padding: 0.6rem 0.8rem;
        vertical-align: middle;
        border: 1px solid #ddd;
    }

.receipt-summary {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px dashed #ccc;
    font-size: 1rem;
}

    .receipt-summary .d-flex {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.3rem;
    }

    .receipt-summary .text-success {
        color: #00875a !important;
        font-weight: 700;
    }

    .receipt-summary strong {
        font-weight: 600;
        color: #333;
    }

    .receipt-summary .total-line {
        border-top: 2px solid #000;
        margin-top: 1rem;
        padding-top: 0.6rem;
        font-weight: 700;
        font-size: 1.05rem;
    }

.d-flex {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.receipt-actions {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 15px;
    max-width: 850px;
    margin: 2rem auto 0 auto;
}

    .receipt-actions .btn {
        flex: 1;
        padding: 1rem 0;
        font-size: 1.1rem;
        font-weight: 600;
        border-radius: 8px;
    }


.alert-info {
    max-width: 850px;
    margin: 2rem auto 0;
    padding: 1.5rem;
    background-color: #e6f7ff;
    border: 1px solid #b3e0ff;
    border-radius: 18px;
    font-size: 0.95rem;
    text-align: center;
    box-shadow: 0 6px 16px rgba(0,0,0,.05);
}

    .alert-info p {
        margin: 0.4rem 0;
    }

    .alert-info a.btn {
        margin-top: 0.5rem;
    }
.loyalty-tier {
    font-size: 0.95rem;
    font-weight: 600;
}

.badge {
    display: inline-block;
    font-size: 0.85rem;
    padding: 0.3rem 0.6rem;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    letter-spacing: 0.5px;
    text-transform: capitalize;
    margin-left: 0.3rem;
}

    .badge.platinum {
        background: linear-gradient(135deg, #d9d9d9, #f2f2f2);
        color: #222;
        border: 1px solid #c0c0c0;
        box-shadow: 0 0 8px rgba(180, 180, 180, 0.4);
    }

    .badge.gold {
        background: linear-gradient(135deg, #ffd700, #f7c700);
        color: #222;
        border: 1px solid #d6af00;
        box-shadow: 0 0 8px rgba(255, 215, 0, 0.4);
    }

    .badge.silver {
        background: linear-gradient(135deg, #c0c0c0, #a9a9a9);
        color: #222;
        border: 1px solid #8c8c8c;
        box-shadow: 0 0 8px rgba(160, 160, 160, 0.3);
    }

    .badge.bronze {
        background: linear-gradient(135deg, #cd7f32, #b87333);
        color: #fff;
        border: 1px solid #a65e2e;
        box-shadow: 0 0 8px rgba(205, 127, 50, 0.4);
    }

    .badge.unranked {
        background: #b0b0b0;
        color: #222;
        border: 1px solid #9a9a9a;
        opacity: 0.8;
    }

.status-points {
    font-size: 0.9rem;
    color: #555;
    margin-left: 0.25rem;
}

@media print {
    .badge {
        box-shadow: none;
        border: 1px solid #999;
    }
}

/* ChatGPT Prompt 007 end */

.fa-star {
    margin-bottom: 1rem;
}