/* RESET & BASE */
* { margin: 0;
    padding: 0; 
    box-sizing: border-box; 
    font-family: Arial, sans-serif;
 }

body { 
    background-color: #f7f8f9; 
    color: #1c1c1c; 
}

/* HEADER & NAV */
.header { 
    display: flex; 
    align-items: center; 
    justify-content: space-between; 
    padding: 20px 80px; 
    background: #fff; 
    border-bottom: 1px solid #e0e0e0; 
}

.logo {
    width: 120px; 
}
.search-box { 
    display: flex; 
    width: 500px; 
    height: 40px; 
}

.search-wrapper { 
    flex: 1; 
    display: flex; 
    border: 2px solid #0d6efd; 
    border-radius: 6px 0 0 6px; 
    overflow: hidden; 
}

.search-wrapper input {
     flex: 1; 
     padding: 0 15px; 
     border: none; 
     outline: none; 
    }

.search-wrapper select { 
    border: none; 
    border-left: 1px solid #ddd; 
    padding: 0 10px; 
    background: #fff; 
}

.search-box button { 
    background: #0d6efd; 
    color: #fff; 
    border: none; 
    padding: 0 20px; 
    border-radius: 0 6px 6px 0; 
    cursor: pointer; 
}


.icons { 
    display: flex; 
    gap: 25px; 
}

.icon {
    text-align: center; 
    color: #8b96a5; 
    cursor: pointer; 
    font-size: 12px; 
}

.icon i { 
    font-size: 20px; 
    display: block; 
    margin-bottom: 3px; 
}


.sub-header { 
    background: #fff; 
    border-bottom: 1px solid #e0e0e0; 
    padding: 10px 80px; 
}

.nav-container { 
    display: flex; 
    justify-content: space-between; 
    font-size: 14px; 
}

.nav-left, .nav-right {
     display: flex; 
     gap: 25px; 
     align-items: center; 
    }

.nav-link { 
    text-decoration: none; 
    color: inherit; 
}
.nav-flag {
     width: 18px; 
     margin: 0 5px;
     }

/* MAIN CONTAINER */
.main-container { 
    padding: 20px 80px; 
}

/* HERO SECTION */
.hero-section { display: flex; gap: 20px; background: #fff; padding: 20px; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 20px; }
.hero-sidebar { width: 250px; }
.hero-sidebar li { padding: 10px; list-style: none; font-size: 14px; color: #505050; cursor: pointer; }
.hero-sidebar li.active { background: #e5f1ff; font-weight: bold; border-radius: 6px; }

.hero-banner { 
    flex: 2; 
    background-image: url('images/Banner-board-800x420 2.png'); 
    background-size: cover; 
    background-position: center; 
    border-radius: 4px; 
    padding: 40px;
    display: flex;
    align-items: center;
    min-height: 380px;
}
.hero-banner h1 { font-size: 32px; margin: 10px 0 20px; }

/*learn more setting*/
.btn-white {
    background: #ffffff;      
    color: #1c1c1c;         
    border: none;             
    padding: 10px 20px;       
    border-radius: 6px;       
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    box-shadow: 0px 1px 3px rgba(0,0,0,0.1); 
    transition: 0.2s;        
}

.btn-white:hover {
    background: #f0f0f0;      
}

/* Ensure the text container doesn't squash the button */
.banner-text {
    display: flex; flex-direction: column; align-items: flex-start; 
}

.hero-right { width: 200px; display: flex; flex-direction: column; gap: 10px; }
.user-card { background: #e3f0ff; padding: 15px; border-radius: 6px; }
.user-info { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.user-info img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.user-info p { font-size: 14px; }
/* This targets the card containing the buttons */
.user-card {
    background-color: #eaf4ff;
    padding: 20px;
    border-radius: 10px;
    width: 200px; /* Adjust based on your design */
    display: flex;
    flex-direction: column; /* Stacks everything top to bottom */
}

.user-info {
    display: flex;
    align-items: center;
    margin-bottom: 15px;
}

.user-info img {
    width: 40px;
    height: 40px;
    margin-right: 10px;
}

/* THE FIX: Styles for the links to act like buttons */
.btn-blue, .btn-login {
    display: block;          /* This is CRITICAL to stop the overlapping */
    width: 100%;             /* Makes both buttons the same width */
    text-align: center;
    padding: 10px 0;
    margin-top: 8px;         /* Adds space between the buttons */
    border-radius: 6px;
    text-decoration: none;   /* Removes the underline */
    font-size: 14px;
    box-sizing: border-box;  /* Keeps padding from breaking width */
}

.btn-blue {
    background-color: #0d6efd;
    color: white;
}

.btn-login {
    background-color: white;
    color: #0d6efd;
    border: 1px solid #333;
}
.promo-card { padding: 15px; color: #fff; border-radius: 6px; font-size: 14px; }
.orange { background: #f38332; }
.teal { background: #55bdc3; }

/* DEALS SECTION */
.deals-container { display: flex; background: #fff; border: 1px solid #e0e0e0; border-radius: 6px; margin-bottom: 20px; }
.deals-info { padding: 20px; border-right: 1px solid #e0e0e0; width: 280px; }
.timer { display: flex; gap: 5px; margin-top: 15px; }
.time-box { background: #606060; color: #fff; padding: 5px; border-radius: 4px; text-align: center; width: 45px; font-size: 10px; }
.time-box span { font-size: 16px; font-weight: bold; }
.deals-products { display: flex; flex: 1; }
.deal-item { flex: 1; padding: 20px; text-align: center; border-right: 1px solid #eee; position: relative; }
.deal-item img { height: 100px; object-fit: contain; margin-bottom: 10px; }
.discount { background: #ffe3e3; color: #eb001b; padding: 2px 10px; border-radius: 20px; font-size: 12px; }

/* CATEGORY GRID */
.category-block {
    display: flex;
    background: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    margin-top: 20px;
    overflow: hidden;
    min-height: 257px; /* Matches Figma height */
}

.category-banner {
    width: 280px;
    padding: 20px;
    background-size: cover;
    background-position: center;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    gap: 15px;
}

/* Add your background image paths here */
.category-banner.home-outdoor {
    background-image: url('images/Group\ 969.png'); 
}
.category-banner.electronics { 
    background-image: url('images/background.png');
}

.category-banner h3 {
    font-size: 20px; 
    color: #1c1c1c;
    font-weight: 600;
    max-width: 150px;
}

/* THE GRID */
.category-grid {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: repeat(2, 1fr);
}

.grid-item {
    padding: 15px;
    border-left: 1px solid #e0e0e0;
    border-bottom: 1px solid #e0e0e0;
    display: flex;
    justify-content: space-between; /* Pushes text left and image right */
    transition: background 0.2s;
}

/* Remove bottom border for the last 4 items to keep it clean */
.grid-item:nth-child(n+5) {
    border-bottom: none;
}

.item-info p {
    font-size: 14px;
    color: #1c1c1c;
    margin-bottom: 4px;
}

.item-info span {
    font-size: 13px;
    color: #8b96a5;
    line-height: 1.2;
}

.grid-item img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    align-self: flex-end; /* Keeps image at bottom-right */
}



/* REQUEST SECTION BASE */
.request-container {
    margin-top: 30px;
    width: 100%;
    border-radius: 6px;
    overflow: hidden;
    
    /* BACKGROUND: Replace 'request-bg.jpg' with your actual file name */
    background-image: url(images/Group\ 982.png);
    background-size: cover;
    background-position: center;
}

/* CONTENT WRAPPER */
.request-overlay-content {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: 40px 50px;
    color: #ffffff;
}

/* LEFT SIDE TEXT */
.request-text h2 {
    font-size: 32px;
    font-weight: 600;
    line-height: 1.2;
    margin-bottom: 20px;
}

.request-text p {
    font-size: 16px;
    line-height: 1.5;
    opacity: 0.9;
}

/* RIGHT SIDE FORM CARD */
.request-form-card {
    background: #ffffff;
    padding: 25px 30px;
    border-radius: 6px;
    width: 440px;
    color: #1c1c1c; /* Dark text inside the white box */
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
}

.request-form-card h3 {
    margin-bottom: 20px;
    font-size: 20px;
    font-weight: 600;
}

/* FORM FIELDS */
.request-form-card input, 
.request-form-card textarea, 
.request-form-card select {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    border: 1px solid #e0e0e0;
    border-radius: 6px;
    font-size: 14px;
    outline: none;
}

/* QUANTITY ROW */
.form-inline {
    display: flex;
    gap: 10px;
}

.form-inline input {
    flex: 2;
}

.form-inline select {
    flex: 1;
}

/* SEND INQUIRY BUTTON */
.btn-inquiry {
    background: #0d6efd;
    color: #fff;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: 500;
    cursor: pointer;
    width: auto; /* Figma shows a small button, not full width */
    transition: 0.3s;
}

.btn-inquiry:hover {
    background: #0056b3;
}
/* RECOMMENDED ITEMS SECTION */
/* 1. Ensure the main container has consistent side spacing */
.main-container {
    padding: 20px 80px; /* 80px on left and right matches your Header/Nav */
    background-color: #f7f8f9;
}

/* 2. Update the Recommended Section Layout */
.recommended-section {
    margin-top: 30px;
    /* This ensures the section doesn't stick to the very edges of the screen */
    width: 100%; 
}

/* 3. Refine the Grid to keep boxes a professional size */
.recommended-grid {
    display: grid;
    /* 'repeat(5, 1fr)' keeps 5 columns, but we add a gap for breathing room */
    grid-template-columns: repeat(5, 1fr);
    gap: 20px; 
}

/* 4. Update the Card itself to be a bit smaller and centered */
.rec-card {
    background: #ffffff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    padding: 10px;
    /* This helps prevent the "too large" look on wide screens */
    min-height: 280px; 
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 5. Fix the Image sizing inside the box */
.rec-img {
   width: 100%;
    height: 200px; /* Increased height */
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden; /* This hides any part of the image that goes 'outside' the box */
    margin-bottom: 10px;
    background: #fff;
}

.rec-img img {
    width: 100px;
    height: 100px;
    object-fit: contain;
    transform: scale(1.4);
    transition: 0.3 ease;
}


/* Text Info */
.rec-price {
    font-size: 16px;
    font-weight: 600;
    color: #1c1c1c;
    margin-bottom: 5px;
}

.rec-desc {
    font-size: 14px;
    color: #8b96a5;
    line-height: 1.4;
    
}


/* SERVICES SECTION */
.extra-services { margin-top: 40px; }
.extra-services h3, .suppliers-region h3 { 
    font-size: 24px; 
    font-weight: 600; 
    margin-bottom: 20px; 
}

.services-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
}

.service-card {
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    overflow: visible; /* Important for the icon overlap */
}

.service-img {
    width: 100%;
    height: 120px;
    background-color: #000; /* This provides the dark tint base */
    border-radius: 6px 6px 0 0;
    overflow: hidden;
}

.service-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    opacity: 1; 
}



.service-info {
    padding: 20px;
    position: relative;
}

.service-info p {
    font-size: 14px;
    font-weight: 500;
    line-height: 1.4;
    color: #1c1c1c;
}

/* THE CIRCULAR OVERLAPPING ICON */
.service-icon {
    position: absolute;
    right: 20px;
    top: -25px; /* Pulls it up halfway over the image */
    width: 50px;
    height: 50px;
    background: #D1E7FF; /* Light blue circle */
    border: 2px solid #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.service-icon i { color: #1c1c1c; font-size: 18px; }

/* REGION SECTION */
.suppliers-region { margin-top: 40px; padding-bottom: 40px; }

.region-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    row-gap: 20px;
    column-gap: 10px;
}

.region-item {
    display: flex;
    align-items: center;
    gap: 12px;
}

.region-item img {
    width: 28px;
    height: 20px;
    object-fit: cover;
}

.region-item p { font-size: 14px; color: #1c1c1c; margin: 0; }
.region-item span { font-size: 12px; color: #8b96a5; display: block; }


/* FOOTER */
.footer { margin-top: 40px; background: #fff; border-top: 1px solid #e0e0e0; }
.newsletter { text-align: center; background: #eff2f4; padding: 40px; }
.newsletter-box { display: flex; justify-content: center; margin-top: 15px; }
.newsletter-box input { padding: 10px; border: 1px solid #ccc; width: 250px; border-radius: 6px 0 0 6px; }
.newsletter-box button { background: #0d6efd; color: #fff; border: none; padding: 0 20px; border-radius: 0 6px 6px 0; }
/* FOOTER CONTAINER FIX */
.footer-container {
    display: flex;
    justify-content: space-between; /* Spreads the 6 columns evenly */
    padding: 40px 80px;
    background-color: #ffffff;
    border-top: 1px solid #e3e8ee;
}

.footer-col {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.footer-col h4 {
    font-size: 16px;
    font-weight: 600;
    margin-bottom: 10px;
    color: #1c1c1c;
}

.footer-col a {
    text-decoration: none;
    font-size: 14px;
    color: #8b96a5; /* Grayish color from Figma */
    transition: 0.2s;
}

.footer-col a:hover {
    color: #0d6efd;
}

/* BRAND COLUMN */
.brand {
    max-width: 250px; /* Ensures the text doesn't push columns apart */
}

.brand p {
    font-size: 14px;
    color: #505050;
    line-height: 1.5;
    margin: 15px 0;
}

/* SOCIAL ICONS (Circular like Figma) */
.socials {
    display: flex;
    gap: 10px;
}

.socials i {
    width: 32px;
    height: 32px;
    background-color: #bdc3c7; /* Light gray circle */
    color: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
}

/* APP BUTTONS */
.store-btn {
    width: 120px;
    cursor: pointer;
    margin-bottom: 5px;
}

/*view button*/
.view-btn-of-products {
  display: inline-block;
  padding: 8px 15px;
  background-color: #007bff;
  color: white;
  text-decoration: none;
  border-radius: 4px;
}

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

/*iphone17prodetails*/
.product-page-container {
    display: flex;
    gap: 20px;
    padding: 20px;
    background: #fff;
    border: 1px solid #eee;
    border-radius: 8px;
    max-width: 1200px;
    margin: 20px auto;
}

/* Gallery Styles */
.product-gallery { flex: 1; }
.main-image {
    border: 1px solid #eee;
    padding: 20px;
    text-align: center;
    border-radius: 4px;
}
.main-image img { width: 100%; max-width: 300px; }
.thumbnail-list { display: flex; gap: 8px; margin-top: 15px; }
.thumb { width: 45px; height: 45px; border: 1px solid #ddd; border-radius: 4px; cursor: pointer; }
.thumb.active { border-color: #333; }

/* Info Styles */
.product-info { flex: 2; font-family: sans-serif; }
.stock-status { color: #00b517; font-size: 14px; margin: 0; }
.title { font-size: 20px; margin: 10px 0; color: #1c1c1c; }
.price-section {
    display: flex;
    background: #fff0df; /* Light orange */
    padding: 15px;
    border-radius: 4px;
    margin: 20px 0;
}
.price-tier { flex: 1; padding: 0 10px; }
.price-red { color: #fa3434; margin: 0; }
.border-left { border-left: 1px solid #e3d0ba; }

/* Table Styles */
.specs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.specs-table td { padding: 12px 0; border-bottom: 1px solid #eee; }
.label { color: #8b96a5; width: 120px; }

/* Supplier Card Styles */
/* Main Card Container */
.supplier-card {
    width: 280px;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    padding: 16px;
    font-family: sans-serif;
    background: white;
}

/* Header Layout */
.supplier-header {
    display: flex;
    gap: 12px;
    margin-bottom: 12px;
}

.supplier-logo {
    background: #c3f1ff;
    color: #4ca7bd;
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    border-radius: 4px;
    font-size: 20px;
}

.label-text {
    margin: 0;
    font-size: 14px;
    color: #1c1c1c;
}

.company-name {
    margin: 0;
    font-weight: bold;
    font-size: 16px;
}

.divider {
    border: 0;
    border-top: 1px solid #e3e8ee;
    margin-bottom: 16px;
}

/* List Styling */
.supplier-details {
    list-style: none;
    padding: 0;
    margin: 0 0 20px 0;
    color: #8b96a5;
    font-size: 14px;
    line-height: 2;
}

.supplier-details li {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* Buttons */
.btn-inquiry {
    width: 100%;
    background: #0d6efd;
    color: white;
    border: none;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 8px;
}

.btn-profile {
    width: 100%;
    background: white;
    color: #0d6efd;
    border: 1px solid #e3e8ee;
    padding: 10px;
    border-radius: 6px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 16px;
}

/* Footer Link */
.save-action {
    text-align: center;
    color: #0d6efd;
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

/* Layout Wrapper */
.product-info-grid {
    display: flex;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
    font-family: Arial, sans-serif;
}

/* LEFT SECTION STYLES */
.description-section {
    flex: 2.5;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
}

.tabs-nav {
    display: flex;
    border-bottom: 1px solid #e3e8ee;
    padding: 0 20px;
}

.tab-btn {
    background: none;
    border: none;
    padding: 15px 20px;
    cursor: pointer;
    color: #8b96a5;
    font-weight: bold;
}

.tab-btn.active {
    color: #0d6efd;
    border-bottom: 2px solid #0d6efd;
}

.tab-content {
    padding: 20px;
    color: #505050;
    line-height: 1.6;
}

/* Specification Table */
.spec-table {
    width: 100%;
    max-width: 500px;
    border-collapse: collapse;
    margin: 20px 0;
}

.spec-table td {
    padding: 10px;
    border: 1px solid #e3e8ee;
}

.spec-table td:first-child {
    background-color: #f7f7f7;
    width: 150px;
    color: #505050;
}

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
}

.feature-list li {
    margin-bottom: 8px;
    color: #505050;
}

.feature-list li span {
    color: #8b96a5;
    margin-right: 10px;
}

/* RIGHT SIDEBAR STYLES */
.recommendations-sidebar {
    flex: 1;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    padding: 20px;
}

.recommendations-sidebar h4 {
    margin: 0 0 15px 0;
}

.rec-item {
    display: flex;
    gap: 12px;
    margin-bottom: 15px;
}

.rec-item img {
    width: 60px;
    height: 60px;
    border: 1px solid #e3e8ee;
    border-radius: 4px;
    object-fit: contain;
}

.rec-title {
    margin: 0;
    font-size: 14px;
    color: #1c1c1c;
}

.rec-price {
    margin: 5px 0 0;
    font-size: 13px;
    color: #8b96a5;
}

/* RELATED PRODUCTS GRID */
.related-products-container {
    max-width: 1200px;
    margin: 40px auto;
    padding: 20px;
    background: #fff;
    border: 1px solid #e3e8ee;
    border-radius: 6px;
    font-family: sans-serif;
}

.products-grid {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
}

.product-card-mini {
    flex: 1;
}

.product-card-mini .img-box {
    background: #eee;
    border-radius: 4px;
    padding: 15px;
    text-align: center;
    margin-bottom: 10px;
}

.product-card-mini .img-box img {
    width: 100%;
    max-width: 120px;
    height: auto;
    mix-blend-mode: multiply; /* Makes white backgrounds of images transparent */
}

.product-name {
    font-size: 14px;
    color: #505050;
    margin: 0 0 5px 0;
}

.product-price {
    font-size: 14px;
    color: #8b96a5;
    margin: 0;
}

/* BLUE DISCOUNT BANNER */
.discount-banner {
    max-width: 1200px;
    margin: 20px auto;
    background: linear-gradient(90deg, #127fff 70%, #0067ff 100%);
    padding: 30px 40px;
    border-radius: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-family: sans-serif;
}

.banner-content h2 {
    margin: 0;
    font-size: 24px;
}

.banner-content p {
    margin: 10px 0 0 0;
    opacity: 0.8;
}

.shop-now-btn {
    background: #ff9017;
    color: white;
    border: none;
    padding: 12px 25px;
    border-radius: 6px;
    font-weight: bold;
    font-size: 16px;
    cursor: pointer;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.shop-now-btn:hover {
    background: #e67e00;
}


    /* Styling for the Add to Cart button on product cards */
.add-to-cart-btn {
    /* Base Styles */
    width: 90%; 
    margin: 15px auto;
    display: block; 
    padding: 12px 18px; 
    
    /* Font Styling */
    font-family: 'Inter', 'Segoe UI', Roboto, sans-serif; 
    font-weight: 600; 
    font-size: 0.95rem; 
    text-transform: uppercase; 
    letter-spacing: 0.5px; 
    
    /* Color & Background */
    background-color: #0d6efd; 
    color: #ffffff; 
    
    /* Shape & Borders */
    border: none; 
    border-radius: 6px;
    
    /* Special Effects & Shadow */
    cursor: pointer;
    transition: all 0.3s ease; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

/* HOVER STATE*/
.add-to-cart-btn:hover {
    background-color: #0056b3; 
    box-shadow: 0 4px 8px rgba(13, 110, 253, 0.3); 
    transform: translateY(-2px); 
}


.add-to-cart-btn:active {
    transform: translateY(1px) scale(0.98); 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}