@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@600;700&family=Poppins:wght@400;500;600;700&display=swap');

/* =========================
   GLOBAL
========================== */

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

html{
  scroll-behavior:smooth;
}

body{
  min-height:100vh;

  background:#e4e4e4;

  font-family:"Poppins", sans-serif;

  overflow-x:hidden;
  overflow-y:auto;

  padding:
    18px
    18px
    calc(120px + env(safe-area-inset-bottom));

  display:flex;
  flex-direction:column;
}

/* =========================
   PAGE CONTAINER
========================== */

.page-wrapper{
  width:100%;
  max-width:1400px;
  margin:0 auto;
}

/* =========================
   HEADER
========================== */

.top-header{
  width:100%;

  display:flex;
  align-items:center;

  margin-bottom:18px;

  animation:fadeTop 0.8s ease;
}

.brand-section{
  display:flex;
  align-items:center;
  gap:12px;
}

/* LOGO */

.brand-logo{
  width:48px;
  height:48px;

  object-fit:contain;

  display:block;

  flex-shrink:0;
}

/* BRAND NAME */

.brand-section h1{
  font-family:"Playfair Display", serif;

  font-size:1.6rem;
  font-weight:700;

  color:#111111;

  letter-spacing:1px;

  line-height:1;

  text-transform:uppercase;

  text-shadow:
    0 3px 10px rgba(0,0,0,0.10);
}

/* =========================
   SEARCH
========================== */

.search-section{
  width:100%;
  position:relative;

  margin-bottom:24px;

  animation:fadeTop 1s ease;
}

.search-container{
  width:100%;
  height:58px;

  background:#ffffff;

  border-radius:22px;

  display:flex;
  align-items:center;

  padding:0 18px;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.06);

  transition:0.35s ease;
}

.search-container:focus-within{
  box-shadow:
    0 12px 28px rgba(255, 187, 164, 0.22);
}

.search-container i{
  color:#999999;
  font-size:1rem;
  margin-right:12px;
}

.search-container input{
  width:100%;
  height:100%;

  border:none;
  outline:none;

  background:transparent;

  font-size:1rem;
  font-weight:500;

  color:#222222;
}

/* =========================
   SEARCH RESULTS
========================== */

.search-results{
  position:absolute;

  top:68px;
  left:0;

  width:100%;

  background:#ffffff;

  border-radius:20px;

  overflow:hidden;

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

  z-index:999;

  display:none;

  animation:searchPopup 0.35s ease;
}

.search-item{
  padding:14px 18px;

  font-size:0.95rem;
  font-weight:600;

  color:#222222;

  cursor:pointer;

  border-bottom:
    1px solid rgba(0,0,0,0.05);

  transition:0.3s ease;
}

.search-item:last-child{
  border-bottom:none;
}

.search-item:hover{
  background:
    rgba(255, 187, 164, 0.12);

  color:#0f88a7;
}

/* =========================
   COMBO SECTION
========================== */

.furniture-section{
  width:100%;
}

.furniture-grid{
  display:grid;

  grid-template-columns:1fr;

  gap:18px;
}

/* TABLET */

@media (min-width:768px){

  .furniture-grid{
    grid-template-columns:repeat(2, 1fr);
  }
}

/* DESKTOP */

@media (min-width:1024px){

  .furniture-grid{
    grid-template-columns:repeat(3, 1fr);
  }
}

/* LARGE DESKTOP */

@media (min-width:1400px){

  .furniture-grid{
    grid-template-columns:repeat(4, 1fr);
  }
}

/* =========================
   COMBO CARD
========================== */

.furniture-card{
  background:#ffffff;

  border-radius:28px;

  overflow:hidden;

  text-decoration:none;

  box-shadow:
    0 8px 24px rgba(0,0,0,0.06);

  transition:
    transform 0.35s ease,
    box-shadow 0.35s ease;

  animation:cardFade 0.8s ease forwards;

  opacity:0;
  transform:translateY(40px);

  position:relative;
}

.furniture-card:hover{
  transform:translateY(-5px);

  box-shadow:
    0 14px 34px rgba(0,0,0,0.12);
}

/* STAGGER */

.furniture-card:nth-child(1){ animation-delay:0.1s; }
.furniture-card:nth-child(2){ animation-delay:0.2s; }
.furniture-card:nth-child(3){ animation-delay:0.3s; }
.furniture-card:nth-child(4){ animation-delay:0.4s; }
.furniture-card:nth-child(5){ animation-delay:0.5s; }
.furniture-card:nth-child(6){ animation-delay:0.6s; }

/* IMAGE */

.furniture-card img{
  width:100%;
  height:70%;
  object-fit:cover;
  background:#fad3d3;

  padding:10px;
  display:flex;
  align-items:center;
  justify-content:center;
}

/* CARD CONTENT */

.combo-content{
  padding:18px;
}

/* FIX CARD CONTENT HEIGHT */

.furniture-card{
  display:flex;
  flex-direction:column;
}

.combo-content{
  flex:1;

  display:flex;
  flex-direction:column;

  justify-content:flex-start;
}

/* CATEGORY */

.combo-category{
  font-size:1.05rem;
  font-weight:500;

  line-height:1.7;

  color:#c5567b;

  margin-bottom:14px;
}

/* PRICE */

.combo-price{
  font-family:"Playfair Display", serif;

  font-size:1.3rem;
  font-weight:700;

  color:#111111;

  margin-bottom:10px;

  line-height:1.3;
}

/* BENEFITS */

.combo-benefits{
  display:flex;
  flex-wrap:wrap;

  gap:10px;
}

.combo-benefit{
  background:
    #f5e2e8;

  color:#000000;

  padding:8px 12px;

  border-radius:14px;

  font-size:0.78rem;
  font-weight:600;
}

/* =========================
   BOTTOM NAVIGATION
========================== */

.bottom-nav{
  position:fixed;

  bottom:calc(15px + env(safe-area-inset-bottom));

  left:50%;
  transform:translateX(-50%);

  width:min(92vw, 420px);
  height:78px;

  background:rgba(182,181,181,0.92);

  border-radius:28px;

  display:flex;
  justify-content:space-around;
  align-items:center;

  padding:0 10px;

  backdrop-filter:blur(12px);

  z-index:9999;

  box-shadow:
    0 10px 30px rgba(0,0,0,0.15);
}

.nav-item{
  position:relative;

  width:68px;
  height:68px;

  display:flex;
  justify-content:center;
  align-items:center;
}

.nav-link{
  position:relative;

  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;

  gap:5px;

  text-decoration:none;
  color:#ffffff;

  transition:0.35s ease;
}

.nav-link i{
  font-size:1.2rem;
  transition:0.35s ease;
}

.nav-text{
  position:absolute;

  bottom:-10px;

  font-size:0.7rem;

  opacity:0;

  transform:translateY(10px);

  transition:0.35s ease;

  color:#000000;
}

.nav-item.active .nav-link i{
  transform:translateY(-10px);

  color:#0f88a7;

  text-shadow:
    0 0 10px rgb(253, 210, 196),
    0 0 25px rgba(255, 187, 164, 1);
}

.nav-item.active .nav-text{
  opacity:1;
  transform:translateY(0);

  font-weight:600;
}

/* =========================
   ANIMATIONS
========================== */

@keyframes cardFade{

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes fadeTop{

  from{
    opacity:0;
    transform:translateY(-20px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

@keyframes searchPopup{

  from{
    opacity:0;
    transform:translateY(-10px);
  }

  to{
    opacity:1;
    transform:translateY(0);
  }
}

/* =========================
   MOBILE
========================== */

@media (max-width:480px){

  body{
    padding:
      14px
      12px
      calc(120px + env(safe-area-inset-bottom));
  }

  .brand-section{
    gap:10px;
  }

  .brand-logo{
    width:42px;
    height:42px;
  }

  .brand-section h1{
    font-size:0.92rem;
    letter-spacing:0.5px;
  }

  .search-container{
    height:50px;
    border-radius:18px;
  }

  .search-container input{
    font-size:0.92rem;
  }

  .furniture-grid{
    gap:14px;
  }

  .furniture-card{
    border-radius:22px;
  }

  .combo-content{
    padding:14px;
  }

  .combo-price{
    font-size:1rem;
  }

  .combo-category{
    font-size:0.88rem;
  }

  .combo-benefit{
    font-size:0.72rem;
    padding:7px 10px;
  }

  .nav-text{
    font-size:0.62rem;
  }
}

/* =========================
   COMBO POPUP
========================== */

.combo-popup{
  position:fixed;

  inset:0;

  width:100%;
  height:100%;

  z-index:99999;

  display:none;
}

.combo-popup.show{
  display:block;
}

/* OVERLAY */

.combo-popup-overlay{
  position:absolute;

  inset:0;

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

  backdrop-filter:blur(4px);
}

/* CONTAINER */

.combo-popup-container{
  position:relative;

  width:min(960px, 94vw);

  max-height:90vh;

  overflow-y:auto;

  margin:4vh auto;

  background:#f6f6f6;

  border-radius:32px;

  z-index:2;

  animation:popupFade 0.35s ease;

  box-shadow:
    0 20px 60px rgba(0,0,0,0.22);
}

/* CLOSE */

.combo-popup-close{
  position:sticky;

  top:16px;

  margin-left:auto;

  right:18px;

  width:42px;
  height:42px;

  border:none;
  outline:none;

  border-radius:50%;

  background:#ffffff;

  color:#111111;

  font-size:1.2rem;

  cursor:pointer;

  display:flex;
  align-items:center;
  justify-content:center;

  z-index:10;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.12);
}

/* BODY */

.combo-popup-body{
  padding:20px;
}

/* =========================
   COVER SECTION
========================== */

.combo-cover-section{
  background:#ffffff;

  border-radius:28px;

  overflow:hidden;

  margin-bottom:22px;

  box-shadow:
    0 6px 20px rgba(0,0,0,0.06);
}

.combo-cover-image{
  width:100%;

  max-height:520px;

  object-fit:contain;

  display:block;

  background:#fad3d3;

  padding:12px;
}

/* MOBILE */

@media (max-width:768px){

  .combo-cover-image{

    max-height:340px;

    padding:8px;
  }

}

.combo-cover-content{
  padding:22px;
}

/* PRICE */

.combo-price{
  font-family:"Playfair Display", serif;

  font-size:1.7rem;
  font-weight:700;

  color:#111111;

  margin-bottom:12px;
}

/* TITLE */

.combo-title{
  font-size:0.85rem;
  font-weight:500;
  line-height:1.4;
  color:#c5567b;
  margin-bottom:18px;

  white-space:nowrap;
  overflow:visible;
}

/* BENEFITS */

.combo-benefits{
  display:flex;
  flex-wrap:wrap;

  gap:5px;

  margin-bottom:20px;
}

.benefit-badge{
  padding:8px 12px;

  border-radius:14px;

  background:
    #f5e2e8;

  color:#000000;

  font-size:0.78rem;
  font-weight:600;
}

/* BENEFIT IMAGE */

.benefit-logo{
  height:38px;

  object-fit:contain;

  background:#ffffff;

  border-radius:12px;

  padding:4px 10px;

  border:
    1px solid rgba(0,0,0,0.05);
}

/* CONTACT */

.combo-contact{
  display:flex;
  flex-wrap:wrap;

  gap:12px;
}

.combo-contact a{
  text-decoration:none;

  display:flex;
  align-items:center;
  gap:8px;

  background:#0f88a7;

  color:#ffffff;

  padding:11px 16px;

  border-radius:14px;

  font-size:0.85rem;
  font-weight:600;
}

/* =========================
   PRODUCTS
========================== */

.combo-products-wrapper{
  display:flex;
  flex-direction:column;

  gap:18px;
}

/* PRODUCT CARD */

.combo-product-card{
  background:#ffffff;

  border-radius:26px;

  overflow:hidden;

  box-shadow:
    0 6px 20px rgba(0,0,0,0.06);
}

/* HEADER */

.combo-card-header{
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 20px;

  background:
    linear-gradient(
      135deg,
      #0f88a7,
      #14a4c9
    );

  color:#ffffff;
}

.combo-card-header h3{
  font-size:1rem;
  font-weight:700;
}

.combo-card-header span{
  font-size:0.85rem;
  font-weight:700;
}

/* PRODUCT LIST */

.combo-product-list{
  padding:8px 0;
}

/* ROW */

.combo-product-row{
  display:flex;
  justify-content:space-between;
  align-items:flex-start;

  gap:20px;

  padding:14px 20px;

  border-bottom:
    1px solid rgba(0,0,0,0.06);
}

.combo-product-row:last-child{
  border-bottom:none;
}

.combo-product-row p{
  flex:1;

  font-size:0.92rem;
  font-weight:500;

  color:#333333;

  line-height:1.0;
}

.combo-product-row span{
  min-width:30px;

  height:30px;

  border-radius:50%;

  background:#1ea5c7;

  color:#ffffff;

  display:flex;
  align-items:center;
  justify-content:center;

  font-size:0.82rem;
  font-weight:700;
}

/* =========================
   ANIMATION
========================== */

@keyframes popupFade{

  from{
    opacity:0;
    transform:translateY(20px) scale(0.96);
  }

  to{
    opacity:1;
    transform:translateY(0) scale(1);
  }
}

/* =========================
   MOBILE
========================== */

@media (max-width:768px){

  .combo-popup-container{
    width:100vw;

    height:100vh;

    max-height:100vh;

    margin:0;

    border-radius:0;
  }

  .combo-popup-body{
    padding:14px;
  }

  .combo-cover-content{
    padding:16px;
  }

  .combo-price{
    font-size:1.35rem;
  }

  .combo-title{
    font-size:0.85rem;
  }

  .combo-card-header{
    padding:15px 16px;
  }

  .combo-product-row{
    padding:12px 16px;
  }

  .combo-product-row p{
    font-size:0.86rem;
  }

  .combo-contact a{
    width:100%;
    justify-content:center;
  }
}

/* =========================
   CARD + POPUP THEMES
========================== */

/* ---------- PINK ---------- */

.furniture-card[data-theme="pink"] img,
.combo-popup-body[data-theme="pink"] .combo-cover-image{
  background:#f8d7df;
}

[data-theme="pink"] .combo-category,
.combo-popup-body[data-theme="pink"] .combo-title{
  color:#b44e6f;
}

[data-theme="pink"] .combo-benefit,
.combo-popup-body[data-theme="pink"] .benefit-badge{
  background:#ffe5eb;
  color:#000000;
}

/* ---------- YELLOW ---------- */

.furniture-card[data-theme="yellow"] img,
.combo-popup-body[data-theme="yellow"] .combo-cover-image{
  background:#faf0c6;
}

[data-theme="yellow"] .combo-category,
.combo-popup-body[data-theme="yellow"] .combo-title{
  color:#947305;
}

[data-theme="yellow"] .combo-benefit,
.combo-popup-body[data-theme="yellow"] .benefit-badge{
  background:#fff5cf;
  color:#000000;
}

/* ---------- SKY BLUE ---------- */

.furniture-card[data-theme="skyblue"] img,
.combo-popup-body[data-theme="skyblue"] .combo-cover-image{
  background:#dff4ff;
}

[data-theme="skyblue"] .combo-category,
.combo-popup-body[data-theme="skyblue"] .combo-title{
  color:#1576a0;
}

[data-theme="skyblue"] .combo-benefit,
.combo-popup-body[data-theme="skyblue"] .benefit-badge{
  background:#e5f7ff;
  color:#000000;
}