/* Basic styles for the Floward clone. The design draws inspiration from
   Floward's modern look with clean typography and generous spacing.
   Feel free to customize colours, fonts and layout further to match
   your brand identity. */

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

body {
    font-family: Arial, sans-serif;
    line-height: 1.6;
    color: #333;
    background-color: #fafafa;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* RTL/LTR alignment: align text inputs and textareas based on the page direction */
html[dir="rtl"] input[type="text"],
html[dir="rtl"] input[type="email"],
html[dir="rtl"] input[type="number"],
html[dir="rtl"] textarea {
    text-align: right;
}
html[dir="ltr"] input[type="text"],
html[dir="ltr"] input[type="email"],
html[dir="ltr"] input[type="number"],
html[dir="ltr"] textarea {
    text-align: left;
}

a {
    color: #0066cc;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.container {
    width: 90%;
    max-width: 1200px;
    margin: 0 auto;
}

/* Navigation bar */
.navbar {
    /* Restyled navigation bar with a dark green background and subtle border */
    background-color: #3d5441;
    border-bottom: 3px solid #2c3e2f;
}

.navbar .container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 0;
}

.brand {
    font-size: 1.5rem;
    font-weight: bold;
    color: #fff;
}

.nav-links {
    list-style: none;
    display: flex;
    gap: 1rem;
    align-items: center;
}

.nav-links li a {
    color: #fff;
    font-weight: 500;
}

.nav-links li a:hover {
    color: #dcdcdc;
}

/* Mobile navigation */
@media (max-width: 768px) {
    .nav-links {
        flex-direction: column;
        background-color: #3d5441;
        position: absolute;
        top: 60px;
        right: 10px;
        padding: 1rem;
        border: 1px solid #2c3e2f;
        display: none;
    }
    .nav-links.show {
        display: flex;
    }
}

/* Content wrapper to push footer to bottom */
.content {
    flex: 1 0 auto;
}

/* Hero section */
.hero {
    position: relative;
    background: url('assets/hero.jpg') center/cover no-repeat;
    color: #fff;
    text-align: center;
    /* Reduced vertical padding on hero to prevent excessive whitespace */
    padding: 2rem 1rem;
    margin-bottom: 1rem;
}

.hero::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.3);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
    max-width: 700px;
    margin: 0 auto;
}

.hero h1 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
}

.hero p {
    font-size: 1.1rem;
    margin-bottom: 2rem;
}

.btn {
    display: inline-block;
    background-color: #3d5441;
    color: #fff;
    padding: 0.75rem 1.5rem;
    border-radius: 20px;
    font-weight: bold;
    transition: background-color 0.2s;
}

.btn:hover {
    background-color: #004f99;
}

/* Navigation toggle button styling */
.nav-toggle {
    background: none;
    border: none;
    color: #fff;
    font-size: 2rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
}

/* Categories section */
.categories-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: 1rem;
    margin-bottom: 2rem;
}

.category-card {
    position: relative;
    overflow: hidden;
    border-radius: 4px;
    cursor: pointer;
}

.category-card img {
    width: 100%;
    height: 150px;
    object-fit: cover;
    display: block;
}

.category-card .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: bold;
    opacity: 0;
    transition: opacity 0.3s;
}

.category-card:hover .overlay {
    opacity: 1;
}

/* Product grid */
.product-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 1.5rem;
    margin-bottom: 3rem;
}

/* Horizontally scrollable carousel for featured products */
.featured-carousel {
    display: flex;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 1rem;
    padding-bottom: 1rem;
}

.featured-carousel .product-card {
    flex: 0 0 250px;
    scroll-snap-align: start;
}

.product-card {
    background-color: #fff;
    border: 1px solid #e5e5e5;
    border-radius: 4px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.product-card img {
    width: 100%;
    height: 200px;
    object-fit: cover;
}

.product-card .product-info {
    padding: 1rem;
    flex: 1 0 auto;
    display: flex;
    flex-direction: column;
}

.product-card h3 {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
    flex: 1 0 auto;
}

.product-card p.price {
    font-size: 1rem;
    font-weight: bold;
    margin-bottom: 1rem;
}

.product-card .actions {
    margin-top: auto;
    display: flex;
    gap: 0.5rem;
}

/* Compact buttons in product cards */
.product-card .actions .btn {
    padding: 0.5rem 1rem;
    font-size: 0.9rem;
    border-radius: 15px;
}

/* Responsive behaviour: show one product card at a time on small screens */
@media (max-width: 600px) {
    .featured-carousel {
        gap: 0.5rem;
    }
    .featured-carousel .product-card {
        flex: 0 0 80%;
    }
}

/* Cart table */
.cart-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: 2rem;
}

.cart-table th,
.cart-table td {
    padding: 0.75rem;
    border: 1px solid #e5e5e5;
    text-align: left;
}

/* Align table headings and content based on page direction */
html[dir="rtl"] .cart-table {
    direction: rtl;
}
html[dir="rtl"] .cart-table th,
html[dir="rtl"] .cart-table td {
    text-align: right;
}
html[dir="ltr"] .cart-table {
    direction: ltr;
}
html[dir="ltr"] .cart-table th,
html[dir="ltr"] .cart-table td {
    text-align: left;
}

.cart-table th {
    background-color: #f5f5f5;
}

/* Small icon button used in admin tables (view/change status) */
.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e5e5;
    background: #fff;
    border-radius: 8px;
    cursor: pointer;
    text-decoration: none;
    color: #3d5441;
    vertical-align: middle;
}
.icon-btn:hover {
    background: #f5f5f5;
}
.icon-btn svg {
    width: 18px;
    height: 18px;
}

/* Footer */
.footer {
    background-color: #f5f5f5;
    border-top: 1px solid #e5e5e5;
    padding: 1rem 0;
    text-align: center;
}

/* Social media icons (footer) */
.social-links {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}
.social-links a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 999px;
    border: 1px solid #e5e5e5;
    background: #fff;
    color: #3d5441;
    text-decoration: none;
}
.social-links a:hover {
    background: #ececec;
}
.social-links svg {
    width: 20px;
    height: 20px;
}