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

html{
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  text-rendering:optimizeLegibility;
}

body{
  font-family:'DM Sans',Arial,sans-serif;
  background:#ffffff;
  min-height:100vh;
  padding:24px 20px;
  color:#1a1a1a;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* --- HEADER --- */
.header{
  margin-bottom:8px;
  padding:0;
}

.header-row{
  display:flex;
  align-items:center;
  gap:16px;
  width:100%;
}

.logo{
  height:100px;
  width:auto;
  display:block;
  flex-shrink:0;
  margin-left:0px;
}

.header-actions{
  display:flex;
  align-items:center;
  gap:10px;
  flex:1;
  min-width:0;
  margin-top:12px;
}

.subtitle{
  font-size:13px;
  color:#888;
  margin-top:4px;
  margin-bottom:16px;
  font-weight:400;
}

/* --- BOTÕES --- */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  font-family:'DM Sans',Arial,sans-serif;
  font-size:13px;
  font-weight:500;
  padding:0 18px;
  border-radius:50px;
  cursor:pointer;
  border:none;
  background:#1a1a1a;
  color:#fff;
  white-space:nowrap;
  height:40px;
  flex-shrink:0;
  transition:background .2s,transform .15s;
}
.btn:hover{background:#333;transform:translateY(-1px);}
.btn:active{background:#111;transform:translateY(0);}

.btn-secondary{
  background:#ffffff;
  color:#1a1a1a;
  border:1.5px solid #d1d5db;
}
.btn-secondary:hover{background:#f5f5f5;}

/* --- FILTER --- */
.filter-wrapper{flex:1;min-width:0;}

.filter-input{
  width:100%;
  height:40px;
  padding:0 18px;
  border-radius:50px;
  border:1.5px solid #d1d5db;
  font-family:inherit;
  font-size:14px;
  font-weight:400;
  background:#ffffff;
  color:#1a1a1a;
  outline:none;
  transition:border-color .2s,box-shadow .2s;
  -webkit-appearance:none;
}
.filter-input:focus{
  border-color:#aaa;
  box-shadow:0 0 0 3px rgba(0,0,0,0.04);
}

/* --- SUBSCRIBE BOX --- */
.subscribe-box{
  display:none;margin-bottom:20px;
  background:#ffffff;border-radius:20px;
  padding:16px 18px;border:1.5px solid #c6dfc6;
  max-width:440px;
}
.subscribe-box.visible{display:flex;gap:8px;align-items:center;flex-wrap:wrap;}
.subscribe-box input{
  flex:1;padding:10px 14px;border-radius:50px;
  border:1.5px solid #c6dfc6;font-family:inherit;font-size:15px;
  background:#f4fbf4;min-width:180px;min-height:44px;outline:none;
  transition:border-color .2s;
}
.subscribe-box input:focus{border-color:#2e7d2e;}
.subscribe-msg{font-size:13px;color:#1a5c1a;margin-top:6px;display:none;width:100%;font-weight:500;}

/* --- CARDS --- */
#list{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
  width:100%;
  align-items:stretch;
}

.restaurant-card{
  background:#ffffff;
  border-radius:20px;
  overflow:hidden;
  box-shadow:0 4px 20px rgba(0,0,0,0.06);
  transition:box-shadow .2s;
  display:flex;
  flex-direction:column;
}
.restaurant-card:hover{box-shadow:0 8px 28px rgba(0,0,0,0.10);}

/* Verde */
.restaurant-card:nth-child(3n+1){border:1px solid #c6dfc6;}
.restaurant-card:nth-child(3n+1) .restaurant-header{background:#f0f7f0;border-bottom:1px solid #c6dfc6;}
.restaurant-card:nth-child(3n+1) .restaurant-name{color:#1a4a1a;}
.restaurant-card:nth-child(3n+1) .restaurant-link{background:#fff;border:1px solid #c6dfc6;color:#2e7d2e;}
.restaurant-card:nth-child(3n+1) .restaurant-link:hover{background:#f4fbf4;}
.restaurant-card:nth-child(3n+1) .dish-price{background:#e8f5e8;color:#1a5c1a;}
.restaurant-card:nth-child(3n+1) .dish-row{border-color:#edf7ed;}
.restaurant-card:nth-child(3n+1) .dish-row:hover{background:#fafff8;}

/* Azul */
.restaurant-card:nth-child(3n+2){border:1px solid #bfdbfe;}
.restaurant-card:nth-child(3n+2) .restaurant-header{background:#eff6ff;border-bottom:1px solid #bfdbfe;}
.restaurant-card:nth-child(3n+2) .restaurant-name{color:#1e3a8a;}
.restaurant-card:nth-child(3n+2) .restaurant-link{background:#fff;border:1px solid #bfdbfe;color:#1d4ed8;}
.restaurant-card:nth-child(3n+2) .restaurant-link:hover{background:#eff6ff;}
.restaurant-card:nth-child(3n+2) .dish-price{background:#dbeafe;color:#1e3a8a;}
.restaurant-card:nth-child(3n+2) .dish-row{border-color:#eff6ff;}
.restaurant-card:nth-child(3n+2) .dish-row:hover{background:#f8fbff;}

/* Laranja */
.restaurant-card:nth-child(3n+3){border:1px solid #fed7aa;}
.restaurant-card:nth-child(3n+3) .restaurant-header{background:#fff7ed;border-bottom:1px solid #fed7aa;}
.restaurant-card:nth-child(3n+3) .restaurant-name{color:#7c2d12;}
.restaurant-card:nth-child(3n+3) .restaurant-link{background:#fff;border:1px solid #fed7aa;color:#c2410c;}
.restaurant-card:nth-child(3n+3) .restaurant-link:hover{background:#fff7ed;}
.restaurant-card:nth-child(3n+3) .dish-price{background:#ffedd5;color:#7c2d12;}
.restaurant-card:nth-child(3n+3) .dish-row{border-color:#fff7ed;}
.restaurant-card:nth-child(3n+3) .dish-row:hover{background:#fffaf5;}

.restaurant-header{
  padding:14px 18px;
  display:flex;align-items:center;gap:10px;
  flex-shrink:0;
}
.restaurant-name{
  font-size:13px;font-weight:700;
  letter-spacing:1px;text-transform:uppercase;line-height:1;
}
.restaurant-link{
  display:inline-flex;align-items:center;
  font-size:12px;text-decoration:none;
  border-radius:50px;padding:5px 12px;
  transition:all .2s;margin-left:auto;white-space:nowrap;
}
.dish-row{
  display:flex;align-items:center;gap:12px;
  padding:13px 16px;border-bottom:1px solid;min-width:0;
  transition:background .15s;
}
.dish-row:last-child{border-bottom:none;}
.dish-title{
  flex:1;font-size:14px;font-weight:400;
  color:#1a2a1a;line-height:1.5;
  min-width:0;word-break:break-word;
}
.dish-price{
  font-size:13px;font-weight:700;
  white-space:nowrap;flex-shrink:0;
  padding:3px 10px;border-radius:50px;line-height:1.2;
}

/* --- VOTES --- */
.dish-votes{display:flex;gap:4px;flex-shrink:0;}

.vote-btn{
  background:none;border:none;cursor:pointer;
  font-size:16px;padding:2px 4px;border-radius:8px;
  transition:transform .15s,opacity .15s;
  opacity:.4;outline:none;
  -webkit-tap-highlight-color:transparent;
  box-shadow:none;
}
.vote-btn:focus{outline:none;box-shadow:none;}

/* --- TOOLTIP --- */
.dish-disclaimer{
  font-size:11px;color:#bbb;cursor:default;
  flex-shrink:0;user-select:none;position:relative;
}
.tooltip-box{
  display:none;position:absolute;
  bottom:calc(100% + 6px);right:0;
  background:#1a2a1a;color:#fff;
  font-size:12px;padding:8px 12px;border-radius:10px;
  width:220px;z-index:100;
  box-shadow:0 4px 12px rgba(0,0,0,0.2);
  text-align:center;line-height:1.5;
}
.tooltip-box::after{
  content:'';position:absolute;top:100%;right:10px;
  border:5px solid transparent;border-top-color:#1a2a1a;
}
.dish-disclaimer:hover .tooltip-box{display:block;}

/* --- EMPTY --- */
.empty{
  text-align:center;padding:60px 20px;
  color:#bbb;font-size:15px;background:#ffffff;
  border-radius:20px;border:1px solid #c6dfc6;grid-column:1/-1;
}

/* --- SKELETON --- */
.sk-card{background:#ffffff;border-radius:20px;padding:16px 18px;border:1px solid #c6dfc6;}
.sk-line{
  height:13px;border-radius:50px;
  background:linear-gradient(90deg,#e8f5e8 25%,#f4fbf4 50%,#e8f5e8 75%);
  background-size:200% 100%;animation:shimmer 1.4s infinite;margin-bottom:10px;
}
.sk-line.short{width:40%;}
.sk-line.long{width:70%;}
@keyframes shimmer{0%{background-position:200% 0;}100%{background-position:-200% 0;}}

/* --- RESPONSIVO --- */
@media(max-width:600px){
  body{padding:16px 12px;}

  .header-row{
    flex-direction:column;
    align-items:center;
    gap:12px;
    text-align:center;
  }

  .logo{
    height:70px;
    margin:0 auto;
  }

  .header-actions{
    width:100%;
    flex-wrap:wrap;
    gap:8px;
    margin-top:0;
    justify-content:center;
  }

  .filter-wrapper{
    width:100%;
    flex:none;
    order:3;
  }

  .filter-input{
    width:100%;
    height:44px;
    text-align:center;
  }

  .btn{
    height:44px;
    padding:0 20px;
    font-size:14px;
  }

  .subtitle{
    text-align:center;
  }

  #list{grid-template-columns:1fr;}
  .dish-row{flex-wrap:wrap;gap:4px;}
  .dish-price{width:auto;}
  .restaurant-name{font-size:12px;}
}