/* --- General Styles --- */
/* These styles apply to the entire website for a consistent look. */
body {
    font-family: 'Noto Nastaliq Urdu', serif; /* A beautiful font for Urdu text. */
    direction: rtl; /* Sets the text direction to right-to-left for Urdu. */
    text-align: right; /* Aligns text to the right. */
    margin: 0;
    padding: 0;
    background-color: #fdfcf9; /* A very light, elegant background color. */
    color: #3a3a3a; /* Dark grey for main text, easy to read. */
}

/* --- Header --- */
/* This section styles the top bar of your website. */
header {
    background-color: #1a237e; /* A deep, premium blue. */
    color: #ffd700; /* A rich gold color, perfect for a jeweler. */
    padding: 20px;
    text-align: center;
    border-bottom: 5px solid #ffd700; /* A solid gold line to separate the header. */
}

header h1 {
    margin: 0;
    font-size: 2.5em; /* Large and bold title. */
}

.gold-rate {
    display: flex;
    justify-content: center;
    gap: 30px; /* Puts space between the 'per tola' and 'per gram' rates. */
    margin-top: 10px;
}

.gold-rate p {
    margin: 0;
    font-size: 1.2em;
}

/* --- Main Content --- */
/* Styles for the main area of the page where products are shown. */
main {
    padding: 20px;
    max-width: 1200px; /* Prevents the content from becoming too wide on large screens. */
    margin: 0 auto; /* Centers the main content on the page. */
}

main h2 {
    text-align: center;
    font-size: 2em;
    color: #1a237e; /* Matches the header's blue for consistency. */
    margin-bottom: 30px;
}

/* --- Product Grid --- */
/* This creates the responsive grid of product cards. */
.product-grid {
    display: grid;
    /* This is the magic for a responsive grid: it creates as many columns as can fit, with a minimum width of 280px. */
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 25px; /* Space between the product cards. */
}

.product-card {
    background-color: #fff;
    border: 1px solid #ddd;
    border-radius: 10px; /* Rounded corners for a modern look. */
    overflow: hidden; /* Ensures the image corners are also rounded. */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* A subtle shadow to lift the card off the page. */
    transition: transform 0.3s, box-shadow 0.3s; /* Smooth animation for the hover effect. */
    display: flex;
    flex-direction: column; /* Stacks the content vertically. */
}

.product-card:hover {
    transform: translateY(-10px); /* Lifts the card up when hovered. */
    box-shadow: 0 8px 16px rgba(0,0,0,0.2); /* Makes the shadow more prominent on hover. */
}

.product-card img {
    width: 100%;
    height: 250px;
    object-fit: cover; /* Ensures the image covers the area without distortion. */
}

.product-card h3 {
    font-size: 1.5em;
    margin: 15px;
    color: #1a237e;
}

.weight-info, .price-info {
    padding: 0 15px;
    margin-bottom: 10px;
}

.weight-info p, .price-info p {
    margin: 5px 0;
}

.converted-weight {
    font-size: 0.9em;
    color: #666; /* A lighter color for secondary information. */
}

.price-info {
    font-size: 1.2em;
    margin-top: auto; /* This is a great trick: it pushes the price and button to the bottom of the card. */
}

.checkout-btn {
    display: block;
    width: 100%;
    padding: 15px;
    background-color: #ffd700; /* Gold button. */
    color: #1a237e; /* Blue text. */
    border: none;
    font-size: 1.2em;
    font-weight: bold;
    cursor: pointer;
    margin-top: 15px;
    transition: background-color 0.3s;
}

.checkout-btn:hover {
    background-color: #e6c300; /* A slightly darker gold on hover. */
}

/* --- Footer --- */
footer {
    background-color: #1a237e;
    color: #fff;
    text-align: center;
    padding: 15px;
    margin-top: 30px;
}

/* --- Modal (Pop-up Form) Styles --- */
.modal {
    display: none; /* Hidden by default. */
    position: fixed; /* Stays in place even when scrolling. */
    z-index: 1000; /* Sits on top of all other content. */
    left: 0;
    top: 0;
    width: 100%; 
    height: 100%; 
    overflow: auto; 
    background-color: rgba(0,0,0,0.6); /* Semi-transparent black background. */
}

.modal-content {
    background-color: #fefefe;
    margin: 10% auto; /* Centers the modal vertically and horizontally. */
    padding: 30px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: relative;
}

.close {
    color: #aaa;
    position: absolute;
    left: 20px; /* Positioned for LTR, but works fine. */
    top: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover, .close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

#checkout-form label {
    display: block;
    margin-top: 15px;
    font-weight: bold;
}

#checkout-form input, #checkout-form textarea {
    width: 100%;
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #ccc;
    border-radius: 5px;
    box-sizing: border-box; /* Important for consistent sizing. */
    font-family: 'Noto Nastaliq Urdu', serif; /* Ensures Urdu font in form fields. */
}

#checkout-form button {
    width: 100%;
    padding: 12px;
    margin-top: 20px;
    background-color: #25D366; /* Official WhatsApp Green. */
    color: white;
    border: none;
    border-radius: 5px;
    font-size: 1.1em;
    cursor: pointer;
}

/* --- Admin Page Styles --- */
/* These styles are for your admin login and dashboard. */
.admin-body { 
    background-color: #e8eaf6; /* A light blue-grey for the admin area background. */
}

.login-container {
    max-width: 400px;
    margin: 100px auto;
    padding: 30px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 0 15px rgba(0,0,0,0.1);
}

.admin-main { 
    max-width: 800px; 
    margin: 20px auto;
}

.admin-section {
    background: white;
    padding: 25px;
    margin-bottom: 25px;
    border-radius: 8px;
}

.admin-section h2 { 
    text-align: right; 
    margin-top: 0;
}

.admin-section form { 
    display: flex; 
    flex-direction: column; 
}

.admin-section label { 
    margin-top: 15px; 
    margin-bottom: 5px; 
    font-weight: bold;
}

.admin-section input { 
    padding: 10px; 
    font-size: 1em; 
    border: 1px solid #ccc;
    border-radius: 5px;
}

.admin-section button {
    margin-top: 20px;
    padding: 12px;
    background-color: #1a237e;
    color: white;
    border: none;
    cursor: pointer;
    font-size: 1.1em;
    border-radius: 5px;
}

.logout-btn {
    display: inline-block;
    background: #ffd700;
    color: #1a237e;
    padding: 8px 15px;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
}

.error-msg { 
    color: red; 
    text-align: center; 
    margin-bottom: 15px;
}

.success-msg { 
    color: green; 
    text-align: center; 
    font-size: 1.2em; 
    margin-bottom: 15px;
}