/* ============================

   BANNER SECTION

============================ */

.livraison-banner {

    position: relative;

    height: 480px;

    background-image: url('/Origami/static/images/livraison-banner.png');

    background-size: cover;

    background-position: center;

    display: flex;

    align-items: center;

    justify-content: center;

    text-align: center;

}



.livraison-banner .banner-overlay {

    position: absolute;

    top: 0; left: 0;

    width: 100%; height: 100%;

    background: rgba(0,0,0,0.55);

}



.livraison-banner .banner-content {

    position: relative;

    z-index: 2;

    color: white;

}



.livraison-banner h1 {

    font-size: 55px;

    font-weight: 500;

    margin-bottom: 15px;

}



.livraison-banner p {

    font-size: 18px;

}



/* ============================================================

   RED SECTION WITH PATTERN BACKGROUND

============================================================ */

.livraison-red-section {

    background: #d60000 url('/Origami/static/images/red-pattern.png');

    background-size: cover;

    padding: 70px 0;

    color: white;

}



/* DESKTOP */

.livraison-red-inner {

    display: flex;

    justify-content: space-between;

    align-items: center;

    gap: 40px;

}



/* LEFT SIDE: MOTO + TEXT */

.red-left {

    display: flex;

    align-items: center;

    gap: 20px;

}



.moto-icon {

    width: 90px;

}



.red-title {

    font-size: 32px;

    font-weight: 600;

    margin: 0;

}



/* RIGHT SIDE: LIST */

.red-right {

    flex: 1;

}



.red-list {

    list-style: disc;

    padding-left: 20px;

}



.red-list li {

    font-size: 17px;

    margin-bottom: 10px;

}



/* RESPONSIVE */

@media (max-width: 768px) {

    .livraison-red-inner {

        flex-direction: column;

        text-align: center;

    }

    #wrap .container {
        margin-top: 2% !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        max-width: 100% !important;
    }

    .red-left {

        justify-content: center;

    }

}



/* ===============================

   ZONES SECTION

=================================*/



.zones-section {

    margin-top: 90px;

}



@media (max-width: 768px) {

    .zones-section {

        margin-top: 200px;

        padding-top: 40px;

    }

}



.zones-title {

    text-align: center;

    font-size: 32px;

    margin-bottom: 30px;

    font-weight: 300;

}



.zones-wrapper {

    display: flex;

    gap: 30px;

}





/* STATIC ADDRESS CARDS */

.zones-addresses {

    display: grid;

    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));

    gap: 20px;

    margin-bottom: 30px;

}



.zone-address-card {

    background: #efefef;

    border-radius: 14px;

    padding: 20px 24px;

    box-shadow: 0 12px 35px rgba(0, 0, 0, 0.08);

}



.zone-address-card h3 {

    margin-top: 0;

    margin-bottom: 10px;

    font-size: 24px;

    font-weight: 600;

}



.zone-address-card p {

    margin-bottom: 6px;

    font-size: 16px;

    color: #4a4a4a;

}

/* LEFT SIDE – list */

.zones-list {

    width: 40%;

    display: grid;

    grid-template-columns: 1fr; /* default = single column */

    gap: 20px;

}





/* Card */

.zone-card {

    background: #fff;

    border: 1px solid #ddd;

    border-radius: 6px;

    padding: 14px;

    cursor: pointer;

    transition: all .25s ease;

}

/* Hide full restaurant zones from list layout */

.zone-card.zone-full {

    display: none !important;

}





.zone-card:hover {

    border-color: #c00000;

}



/* Selected card */

.zone-card.selected {

    background: #d60000;

    color: white;

    border-color: #a00000;

}



.zone-card.selected i {

    color: white !important;

}



.zone-title {

    font-size: 20px;

    margin-bottom: 15px;

    font-weight: 500;

}



/* rows inside card */

.zone-row {

    display: flex;

    align-items: center;

    gap: 10px;

    margin-bottom: 8px;

    font-size: 15px;

}



.zone-row i {
    color: #d60000;
}

/* STATIC TARIFFS BLOCK */
.zones-tarifs {
    background: #d50000;
    border-radius: 22px;
    padding: 15px;
    color: white;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
    margin-top: 20px;
}

.tarifs-header {
    text-align: center;
    font-size: 22px;
    letter-spacing: 6px;
    font-weight: 600;
    padding-bottom: 15px;
    border-bottom: 2px solid rgba(255, 255, 255, 0.4);
}

.tarif-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
    margin-top: 25px;
}

.tarif-column {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.tarif-entry {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 18px;
}

.zone-block {
    border: 4px solid rgba(255, 255, 255, 0.6);
    border-radius: 999px;
    padding: 14px 24px;
    background: rgba(255, 255, 255, 0.05);
    box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.15);
    margin-bottom: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    height: 50%;
}

.zone-block .tarif-details {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.zone-name {
    font-size: 18px;
    letter-spacing: 3px;
}

.zone-price {
    font-size: 14px;
    font-weight: 400;
    letter-spacing: 1px;
}

.tarif-details {
    margin: 0;
    font-size: 14px;
    color: rgba(255, 255, 255, 0.9);
    line-height: 1.6;
}

/* MAP */
.zones-map {
    width: 60%;
    height: 500px;
    border-radius: 8px;
    overflow: hidden;

    border: 1px solid #ccc;

}



.zone-filter-buttons {

    display: grid;

    grid-template-columns: repeat(2, minmax(0, 1fr));

    gap: 12px;

    margin-bottom: 20px;

}



.zone-filter-btn {

    padding: 12px 16px;

    background: #eee;

    border: none;

    cursor: pointer;

    border-radius: 8px;

    font-weight: 600;

    transition: 0.2s;

    text-align: left;

    width: 100%;

    min-height: 92px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    gap: 4px;

}



.zone-filter-btn.active {

    background: #d60000;

    color: #fff;

}



.zone-filter-name {

    display: block;

    font-size: 16px;

    font-weight: 700;

}



.zone-filter-meta {

    display: block;

    font-size: 13px;

    font-weight: 500;

    color: #555;

    line-height: 1.3;

}



.zone-filter-btn.active .zone-filter-meta {

    color: #fff;

}



@media (max-width: 576px) {

    .zone-filter-buttons {

        grid-template-columns: 1fr;

    }

    .zone-filter-btn {

        width: 100%;

        min-height: 0;

        padding: 12px 14px;

    }

}



@media (max-width: 768px) {

    .zone-filter-buttons {

        grid-template-columns: 1fr;

    }

    .zone-filter-btn {

        width: 100%;

        min-height: 0;

    }

    .zone-filter-name {

        font-size: 15px;

    }

    .zone-filter-meta {

        font-size: 12px;

    }

}



/* TWO COLUMN MODE (menzah only) */

.zones-list.two-cols {

    grid-template-columns: repeat(2, minmax(0, 1fr));

}





/* Make zone cards smaller in 2-column mode */

.zones-list.two-cols .zone-card {

    padding: 15px;

}



/* RESPONSIVE */

@media (max-width: 992px) {

    .zones-container {

        flex-direction: column;

    }



    .zones-left, .zones-right {

        width: 100%;

    }

    .zone-filter-buttons{

        justify-content: center;

    }

}



/* ======= BLACK SECTION (EMPORTER) ======= */



.emporter-section {

    background: #000;

    padding: 70px 0;

    color: white;

    margin-top: 7%;

}



.emporter-inner {

    display: flex;

    align-items: center;

    justify-content: space-between;

    gap: 60px;

    margin-right: 15%;

}



/* Left side */

.emporter-left {

    display: flex;

    align-items: center;

    gap: 20px;

    padding-left: 8%;

}



.emporter-icon {

    width: 120px;     /* ⬅ Bigger like moto.png */

    height: auto;

}



.emporter-title {

    margin: 0;

    font-size: 36px;

    font-weight: 700;

    text-transform: uppercase;

}



/* Right side */

.emporter-right {

    flex: 1;

}



.emporter-list {

    list-style: disc;

    padding-left: 20px;

    margin: 0;

    font-size: 18px;

    line-height: 1.6;

}



/* RESTAURANTS SECTION */

.o_origami_restaurants {

  padding: 70px 0 0 0;

}



.restaurants-title {

  text-align: center;

  font-size: 36px;

  font-weight: 300;

  letter-spacing: 1px;

  color: #333;

  margin-bottom: 40px;

}



.restaurants-row {

  display: flex;

  gap: 30px;

  align-items: flex-start;

}



.restaurants-row > div {

  flex: 1;

  min-width: 0;

}



.restaurants-list {

  display: flex;

  flex-direction: column;

  gap: 15px;

}



.restaurant-card {

  padding: 20px;

  background-color: #ffffff;

  border: 1px solid #e8e8e8;

  border-radius: 4px;

  cursor: pointer;

  transition: all 0.3s ease;

  display: flex;

  align-items: center;

  gap: 15px;

}


.restaurant-card:hover {

  border-color: #d0d0d0;

  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);

}



/* Selected restaurant card with red background */

.restaurant-card.selected {

  background-color: rgb(212, 0, 21);

  border-color: rgb(212, 0, 21);

}



.restaurant-card.selected h4,

.restaurant-card.selected p {

  color: #ffffff;

}



.restaurant-logo {

  width: 50px;

  height: 50px;

  flex-shrink: 0;

  border-radius: 50%;

  object-fit: contain;

}



.restaurant-info {

  flex: 1;

}



.restaurant-card h4 {

  font-size: 18px;

  font-weight: 600;

  color: #1a1a1a;

  margin: 0 0 8px 0;

}



.restaurant-card p {

  font-size: 14px;

  color: #666;

  margin: 0;

}



.restaurants-map {

  width: 100%;

  height: 450px;

  border-radius: 4px;

  overflow: hidden;

}





/* Responsive Design - ensure proper column layout on tablets and mobile */

@media (max-width: 768px) {

  .restaurants-title {

    font-size: 28px;

    margin-bottom: 30px;

  }



  .restaurants-row {

    flex-direction: column;

    gap: 20px;

  }



  .restaurants-map {

    height: 350px;

  }



  .restaurant-card {

    padding: 16px;

  }



  .restaurant-card h4 {

    font-size: 16px;

  }



  .restaurant-card p {

    font-size: 13px;

  }

}



@media (max-width: 480px) {

  .restaurants-title {

    font-size: 24px;

  }



  .restaurants-map {

    height: 300px;

  }

}





/* =========================================================

   GLOBAL MOBILE & TABLET RESPONSIVE FIXES

========================================================= */



/* ===============================

   BANNER

================================= */

@media (max-width: 991px) {

    .livraison-banner {

        height: 360px;

        padding: 0 20px;

    }



    .livraison-banner h1 {

        font-size: 36px;

    }



    .livraison-banner p {

        font-size: 16px;

    }

}



@media (max-width: 480px) {

    .livraison-banner {

        height: 300px;

    }



    .livraison-banner h1 {

        font-size: 28px;

    }



    .livraison-banner p {

        font-size: 15px;

    }

}



/* ===============================

   RED SECTION

================================= */

/* MOBILE & TABLET */

/* Tablet and small desktop */

@media (max-width: 991px) {

    .livraison-red-inner {

        flex-direction: column;

        text-align: center;

        margin-left: 18px !important;   /* remove desktop margin */

        margin-right: 0 !important;     /* center properly */

        gap: 20px;                       /* reduce spacing */

        padding-left: 10px;

    }



    /* Keep moto and title side by side on mobile */

    .red-left {

        flex-direction: row;    /* ← force horizontal layout */

        align-items: center;    /* vertical alignment */

        justify-content: center;

        gap: 15px;              /* spacing between icon and title */

    }



    .red-title {

        font-size: 26px;        /* slightly smaller on tablet */

        text-align: center;

    }



    .red-list li {

        font-size: 15px;

    }

}



/* Mobile phones */

@media (max-width: 480px) {

    /* Keep moto and title side by side */

    .red-left {

        flex-direction: row;

        align-items: center;

        justify-content: center;

        gap: 10px; /* smaller spacing for small screens */

    }



    .red-title {

        font-size: 22px;

        text-align: center;

    }



    .red-list {

        padding-left: 0;

        list-style-position: inside;

    }

}





/* ===============================

   ZONES SECTION

================================= */

@media (max-width: 991px) {

    .zones-wrapper {

        flex-direction: column;

    }



    .zones-list,

    .zones-map {

        width: 100%;

    }



    .zones-map {

        height: 380px;

    }

}

@media (max-width: 768px) {

    .zones-list.two-cols {

        grid-template-columns: repeat(2, 1fr);

        gap: 15px;

    }

}



@media (max-width: 768px) {

    .zones-title {

        font-size: 26px;

    }



    .zone-title {

        font-size: 18px;

    }



    .zone-row {

        font-size: 14px;

    }

}



@media (max-width: 480px) {

    .zones-map {

        height: 300px;

    }



    .zone-card {

        padding: 15px;

    }

}



/* ===============================

   EMPORTER SECTION

================================= */

@media (max-width: 991px) {

    .emporter-inner {

        flex-direction: column;

        gap: 30px;

        text-align: center;

    }



    .emporter-left {

        padding-left: 0;

        justify-content: center;

    }



    .emporter-icon {

        width: 90px;

    }



    .emporter-title {

        font-size: 28px;

    }



    .emporter-list {

        font-size: 16px;

    }

}



@media (max-width: 480px) {

    .emporter-title {

        font-size: 24px;

    }



    .emporter-list {

        font-size: 15px;

    }

}



/* ===============================

   RESTAURANTS SECTION

================================= */

@media (max-width: 991px) {

    .o_origami_restaurants {

        padding-top: 50px;

    }

}



@media (max-width: 480px) {

    .restaurant-logo {

        width: 42px;

        height: 42px;

    }



    .restaurant-card {

        gap: 12px;

    }

}



/* ===============================

   BANNER – FIX MOBILE SHRINKING

================================= */



@media (max-width: 768px) {

    .livraison-banner {

        min-height: 520px !important; /* force taller banner */

        height: auto !important;      /* prevent collapsing */

    }

}



@media (max-width: 480px) {

    .livraison-banner {

        min-height: 580px !important; /* extra height for phones */

    }

}