/*color*/
:root {
  --themeyellow:#EFD669;
  --themered:#AE3923;
  --themewhite: #F3F0EB;
  --themebeige: #C0A17B;
  --themeblack: #3E3A39;
  --beige40: #e6d9ca;

  --bgwhite:#fefbe9;
  --orange:#e3702e;
  --b-orange:#c45d23;
  --star-size: 15px;
}

/*スクロールバー*/
::-webkit-scrollbar {
  width: 15px;
}
::-webkit-scrollbar-track {
  background-color: var(--bgwhite);
}
::-webkit-scrollbar-thumb {
  background: var(--orange);
  border-radius: 20px;
  border: 3.5px solid var(--bgwhite);
}

/* MapLibreの精度円（accuracy circle）を完全非表示にする */
.maplibregl-user-location-accuracy-circle,
.mapboxgl-user-location-accuracy-circle {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
}

#reset-north {
  position: absolute;
  top: 10px;           /* 上からの位置 */
  right: 50px;         /* 右端からの位置、GeolocateControlに合わせて調整 */
  z-index: 1000;       /* 地図より前面に表示 */
  width: 30px;          /* ボタンの幅 */
  height: 30px;         /* ボタンの高さ */
  padding: 0;
  border: none;
  border-radius: 4px;
  background-color: rgba(255, 255, 255, 0.9);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ホバーで少し濃く */
#reset-north:hover {
  background-color: rgba(255, 255, 255, 1);
}

/* 画像のサイズをボタン内にフィット */
#reset-north img {
  width: 70%;
  height: 70%;
  object-fit: contain;
  transform-origin: center center;
  transition: transform 0.1s linear;
}



.custom-marker svg {
  display: none; /* デフォルトピンを非表示 */
}

.custom-marker {
  width: 18px;
  height: 18px;
  position: absolute;
  top: 0;
  left: 0;
  pointer-events: none;
}
.custom-marker {
  background-size: contain !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
}

/* typeごとの個別スタイル（必要なら） */
.custom-marker.toilet {
  background-image: url('../toilet.png') !important;
}

.custom-marker.bench {
  background-image: url('../rest.png') !important;
}

.custom-marker.trash {
  background-image: url('../trash.png') !important;
}

.custom-marker.ifc {
  background-image: url('../information.png') !important;
}

.custom-marker.smoke {
  background-image: url('../smoke.png') !important;
}

.maplibregl-ctrl-top-right {
  right: 0;
  top: 12px;
  position: fixed;
  display: none;
}
body { margin: 0; padding: 0; 
overflow: hidden;}
#map { width: 100vw; height: 100vh; }
#map canvas {
  background-color: #fff !important;
}

.iks-logo {
  height: 30px;
  width: 30px;
  position: absolute;
  top: 15px;
  left: 15px;
  display: inline-block;
  z-index: 500;
}

#customModalOverlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  display: none; /* 初期非表示 */
  justify-content: center;
  align-items: center;
  z-index: 9999; /* 高めに設定 */
}

/* モーダル本体 */
#customModalBox {
  background: var(--bgwhite);
  padding: 20px;
  border-radius: 8px;
  max-width: 400px;
  width: 80%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  position: relative;
}
/* モーダルを開くボタン */
#customModalOpenBtn {
    background-color: #aaa;
    color: white;
    border: none;
    border-radius: 50%;
    cursor: pointer;
    font-size: 18px;
    transition: background-color 0.2s;
    position: absolute;
    top: 10px;
    left: 10px;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    border: 1.5px solid #fff;
}

/* 閉じるボタン */
#customModalClose {
  position: absolute;
  cursor: pointer;
  font-size: 20px;
  color: var(--themeblack);
  top: 20px;
  right: 20px;
  z-index: 99999;
}


.accordion-btn {
  width: 100%;
  padding: 2px;
  text-align: left;
  background: var(--bgwhite);
  color: var(--b-orange);
  border: none;
  margin-top: 10px;
  font-weight: bold;
  font-size: 18px;
  font-family: inherit;
  border-bottom: 2px solid var(--b-orange);
}


/* アコーディオン内容 */
.accordion-content {
  background: var(--bgwhite);
  text-align: justify;
  margin-bottom: 10px;
  margin-top: 2px;
}

.accordion-content ul{
  margin-left: 5px;
}


.modal-links a {
  display: block;
  color: var(--themeblack);
  text-decoration: none;
  border-bottom: 1px solid var(--themeblack);
  margin-bottom: 7px;
  margin-top: 4px;
}

.modal-links a:hover {
  color: var(--b-orange);
  border-bottom: 1px solid var(--b-orange);
}

.ul-content{
  margin-left: 13px;
}



/* ボトムシートのスタイル */
#bottom-sheet {
  position: fixed;
  left: 0; right: 0;
  bottom: -400px;
  background: var(--bgwhite);
  box-shadow: 0 -2px 8px rgba(0,0,0,0.2);
  border-radius: 16px 16px 0 0;
  min-height: 480px;
  max-height: 480px;
  overflow-y: auto;
  z-index: 20;
  padding: 24px 16px 16px 16px;
  transition: bottom 0.3s;
}
#bottom-sheet.open { bottom: 0; }
#sheet-info { display: flex; flex-direction: column;}
.booth-card {
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 8px;
  margin-bottom: 8px;
  background: #f9f9f9;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  cursor: pointer;
  transition: background 0.2s;
}

.booth-card:hover { background: #F7F1D8; }


.sns-wrapper{
  display: flex;
  flex-direction: row;
  justify-content: left;
  align-items: center;
  gap: 8px;
}


#sheet-title{
  font-size: 22px;
}

#search-form {
  position: fixed;
  top: 16px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  z-index: 40;
  width: max(70%,280px);
}

#search-input {
  position: relative;
  padding: 8px 12px;
  font-size: 16px;
  font-family: inherit;
  width: 100%;
}


#search-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  transition: color 0.2s ease,
   background-color 0.2s ease;
  z-index: 2;
}

#search-btn img {
  width: 15px;
}

#clear-search {
  position: absolute;
  right: 23px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #999;
  transition: color 0.2s 
ease, background-color 0.2s 
ease;
  z-index: 2;
}


#open-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  position: fixed;
  top: 60px; right: 16px;
  z-index: 60;
  padding: 6px 10px 7px 10px;
  font-size: 15px;
  font-family: inherit;
  border-radius: 8px;
  border: none;
  background: var(--b-orange);
  color: var(--bgwhite);
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  cursor: pointer;
  /* ↓追加: 絞り込みシートが開いているときは非表示にする */
  transition: opacity 0.2s;
}
#open-filter-btn.hide {
  display: none !important;
}

#open-filter-btn  svg {
  width: 20px;  /* 必要に応じて調整 */
  height: 20px;
  object-fit: contain;
}



/* 絞り込みシート */
#filter-sheet {
  position: fixed;
  left: 0; right: 0;
  /* ここから修正: 完全に隠れるようにtopを-100vhに */
  top: -100vh;
  background: var(--bgwhite);
  box-shadow: 0 2px 8px rgba(0,0,0,0.2);
  border-radius: 0 0 16px 16px;
  /* 全画面化: min-height/max-heightをスマホで100vhに */
  min-height: 120px;
  max-height: 400px;
  overflow-y: auto;
  z-index: 2000;
  padding: 24px 16px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: top 0.3s;
}
#filter-sheet.open { top: 0; }
/* スマホ時は全画面にする */
@media (max-width: 600px) {
  #filter-sheet {
    top: -100vh;
    left: 0; right: 0;
    width: 100vw;
    height: 100vh;
    min-height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding-top: 32px;
    padding-bottom: 32px;
    box-sizing: border-box;
    /* スクロールバーが出てもOK */
    overflow-y: auto;
    padding: 28px 5%;
  }
  #filter-sheet.open {
    top: 0;
}
}
#filter-sheet h2{
  margin: 0 auto;
  font-size: 22px;
  color: var(--b-orange);
  display: flex;
  justify-content: center;
  margin-bottom: 15px;
}
#filter-sheet h2::before {
  display: none;
}

#filter-form { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; position: relative;}

#close-filter-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  position: absolute;
  top: -20px;
  right: 0px;
  z-index: 60;
  padding: 5px 20px;
  font-size: 15px;
  border-radius: 8px;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
  cursor: pointer;
  transition: opacity 0.2s;
  background: #ccc;
  color: var(--themeblack);
}

#close-filter-btn span{
  font-size: 24px;
}


.filter-section-title {
  font-weight: bold;
  margin-bottom: 4px;
  font-size: 18px;
  border-bottom: 1px solid var(--orange);
  color: var(--themeblack);
  width: 100%;
  position: relative;
  padding-left: 10px;
}

.filter-section-title::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -4px;
  width: 100%;
  height: 0.5px;
  /* background-color: var(--b-orange); */
  background: linear-gradient(90deg, var(--b-orange), var(--bgwhite));
}

#filter-checkboxes, #filter-department, #filter-area { display: flex; flex-wrap: wrap; margin-bottom: 15px; }
#filter-btns {
  display: flex;
  gap: 20px;
  justify-content: center;
  margin: 0 auto;
  flex-direction: row-reverse;
}

#filter-submit-btn {
  background: var(--b-orange);
  color: #fff;
  font-size: 18px;
  font-family: shippori-mincho;
  width: 30vw;
  height: 12vw;
  border-radius: 12px;
  font-family: "Noto Serif JP", serif;
  cursor: pointer;
  border: none;
}

#clear-filter {
  background: #fff6f2;
  color: var(--b-orange);
  font-size: 18px;
  width: 30vw;
  height: 12vw;
  border-radius: 12px;
  font-family: "Noto Serif JP", serif;
  cursor: pointer;
  border: 2px solid var(--b-orange);
}

#sort-btns {
    display: none;
    gap: 8px;
    margin-bottom: 12px;
    margin-top: 6px;
    justify-content: flex-end;
}

#sort-btns button {
  padding: 4px 12px;
  font-size: 15px;
  border-radius: 8px;
  border: none;
  background: #fff;
  color: var(--b-orange);
  border: 1px solid var(--b-orange);
  cursor: pointer;
  transition: background 0.2s;
}
#sort-btns button.active { 
  background: var(--b-orange);
  color: #fff;
  outline: 1px solid #fff;
  outline-offset: -2.5px;
}

#sort-near {
    padding-left: 7px !important;
}




#back-to-home-btn, #back-to-prev-btn {
  display: none;
  background: #f5f5f5;
  border: 1px solid #bbb;
  border-radius: 8px;
  padding: 6px 12px;
  font-size: 15px;
  cursor: pointer;
  font-family: 'Noto Serif JP';
  margin-bottom: 5px;
  color: var(--themeblack);
}

#back-to-home-btn img {
  height: 1em;
  margin-right: 3px;
  margin-top: 3px;
}

#back-to-prev-btn img{
  height: 1em;
  margin-right: 3px;
  margin-top: 3px;
}

#back-to-prev-btn[style*="display: block"], #back-to-prev-btn[style*="display:block"] {
  display: block !important;
}
/* ボトムシート開閉ボタン */
#sheet-btns {
  position: fixed;
  left: 0; right: 0;
  z-index: 30;
  display: flex;
  justify-content: center;
  pointer-events: none;
  transition: bottom 0.3s;
  bottom: -400px;
}
#sheet-btns-inner {
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: auto;
  background: none;
}
#open-sheet-btn, #close-sheet-btn {
  border-radius: 16px 16px 0 0;
  border: none;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  transition: background 0.2s;
  width: 130px;
  height: 45px;
  color: var(--b-orange);
  font-size: 20px;
  font-family: serif;
}



#open-sheet-btn { display: block; }
#close-sheet-btn { display: none; }
#bottom-sheet.open + #sheet-btns #open-sheet-btn { display: none !important; }
#bottom-sheet.open + #sheet-btns #close-sheet-btn { display: block !important; }







/* 投票モーダル用スタイル */
    .modal-vote-overlay {
      display: none;
      position: fixed;
      z-index: 10000;
      left: 0; top: 0; width: 100vw; height: 100vh;
      background: rgba(0,0,0,0.4);
      justify-content: center;
      align-items: center;
    }
  .modal-vote-content {
      background: var(--bgwhite);
      border-radius: 10px;
      height: 320px;
      min-width: 280px;
      /* max-width: 90vw; */
      width: 90vw;
      max-width: 500px;
      box-shadow: 0 4px 24px rgba(0, 0, 0, 0.18);
      text-align: center;
      position: relative;
  }
.modal-vote-content h2 {
    margin-top: 30px;
    margin-bottom: 0px;
    font-size: 1.2em;
    margin-left: 0;
    padding-left: 0;
    color: var(--b-orange);
    border-bottom: solid 1.5px var(--b-orange);
}
.modal-vote-close {
  position: absolute;
  right: 12px;
  top: 12px;
  background: none;
  border: none;
  font-size: 1.3em;
  color: #888;
  cursor: pointer;
}
.modal-vote-close:hover {
  color: #222;
}

    .star-rating {
        display: flex;
        flex-direction: row-reverse;
        justify-content: center;
        margin: 20px 0;
        margin-top: 30px;
        gap: 13px;
    }



    .star-rating input[type="radio"] {
      display: none;
    }
    .star-rating label {
      display: inline-flex;
      align-items: center;
      color: #ccc;
      cursor: pointer;
      transition: color 0.2s;
    }
    .star-rating input[type="radio"]:checked ~ label,
    .star-rating label:hover,
    .star-rating label:hover ~ label {
color: #ffb906;
    }

    /* 星のサイズ */
    .star-icon {
      width: 56px;
      height: 56px;
      margin: -10px;
    }

    .vote-message {
      margin-top: 10px;
      color: var(--b-orange);
      font-weight: bold;
    }

    .vote-modal-vote-btn img{
      width: 100%;
      height: auto;
    }

    .vote-modal-vote-btn {
        background: transparent;
        margin-right: 0;
        margin: 0;
        margin-top: 6px;
        width: 65%;
        padding: 0;
        border: none;
    }

  


.vote-btn {
  background: #ff9800;
  color: #fff;
  margin-top: 10px;
  margin-bottom: 0;
  font-weight: bold;
  border: none;
  border-radius: 12px;
  padding: 12px 30px;
  cursor: pointer;
  font-size: 15px;
}

.vote-btn {
    cursor: not-allowed;
    background: #aaa;
    font-family: 'Shippori Mincho';
    color: white;
    border: 1px solid var(--bgwhite);
    outline: 1px solid var(--bgwhite);
    outline-offset: -3px;
    transition: 0.2s;
    margin-right: 0;
    pointer-events: none;
}

.vote-btn:hover {
  background: #e68900;
}







.booth-image-thumb {
    width: 100%;
    max-width: 100px;
    max-height: 100px;
    object-fit: cover;
    border-radius: 8px;
    margin-bottom: 6px;
    display: block;
    background: #f3f3f3;
  }
  .booth-image-detail {
    width: 30%;
    object-fit: contain;
    margin-bottom: 10px;
    display: block;
  }
  /* 新しい詳細レイアウト用 */
  .booth-detail-layout {
    margin-top: 8px;
    /* 以前のflexレイアウトを削除 */
  }
  .booth-detail-title {
    font-size: 1.3em;
    font-weight: bold;
    margin-bottom: 4px;
  }
  .booth-detail-circle {
    margin-bottom: 8px;
  }
  .booth-detail-rating {
    margin-bottom: 8px;
  }
  .booth-detail-section {
    margin-bottom: 10px;
    text-align: justify;
  }
  .booth-detail-section b {
    display: inline-block;
    border-bottom: 1px solid var(--themeblack);
  }

  .related-booth-section b{
    margin-bottom: 8px;
  }

  .booth-detail-cancel {
    color: red;
    font-weight: bold;
    margin-top: 8px;
  }

  .hr_after_event_name{
    color: var(--themeblack);
    margin-bottom: 3px ;
  }

  .detail_top_flex{
    display: flex;
    gap: 10%;
    align-items: center;
  }

  .detail_vote_flex{
    justify-content: center;
    align-items: center;
    display: flex;
    flex-direction: column;
  }


/*search.cssから移植*/

#filter-sheet label {
  display: inline-flex;
  justify-content: center;
  margin: 6px 12px 6px 0;
  padding: 4px 7px;
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--b-orange);
  cursor: pointer;
  transition: background-color 0.1s ease;
  }
  #filter-sheet input {
    opacity: 0;
    position: absolute;
}

.chip {
  position: relative;
  align-items: center;
  color:var(--b-orange);
  user-select: none;
    -webkit-user-drag: none;    /* Safari対応 */
  min-width: 71px;
  }

  .chip:has(.chip-input:checked) {
    background: var(--b-orange)!important;
    color: #fff;
    outline: 1px solid #fff;
    outline-offset: -2.5px; /* ← マイナス値で内側へ */
    }


    /* 各段共通設定 */
    .row {
      display: flex;
      padding: 2px;
      gap: 7.5px;
      border-bottom: 1px solid #eee;
    }
    .row:last-child {
      border-bottom: none;
    }
    
    /* --- 1段目：画像＋企画名・団体名 --- */
    .top {
      align-items: center;
    }
    .thumb {
      width: 80px;
      height: 80px;
      border-radius: 8px;
      overflow: hidden;
      flex-shrink: 0;
      background: #f0f0f0;
    }
    .thumb img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    .right-top {
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .hr_after_event_name{
      border: none;          /* デフォルトの立体線を消す */
      height: 1px;           /* 線の太さ */
      background-color:var(--b-orange); /* 好きな色 */
    }
    
        
    .circle_name{
      font-size: 15px;
    }


    /*2段目 */
    .bottom {
      align-items: center;
      font-size: 14px;
    }



    /*sns*/

  .sns-icon {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 42px;
      height: 42px;
      margin-top: 5px;
      margin-left: 5px;
      border-radius: 50%;
      text-decoration: none;
      transition: opacity 0.3s ease;
      background-color: var(--b-orange);
  }
  .sns-icon:hover {
    opacity: 0.8;
}
  
.sns-icon img {
  width: 25px;
  height: 25px;
  filter: brightness(0) invert(1);
}

.detail-sheet-info {
  display: flex;
  flex-direction: column;
}

#stamp-top {
  all: unset;
  cursor: pointer;
  position: fixed;
  top: 50px;
  left: 7px;
  transition: .5s;
  z-index: 200;
}


.stamp-modal-content p{
  font-size: 16px;
  margin-top: 20px;
  margin-bottom: 20px;
  white-space: nowrap;
}

.modal-btn{
  margin: 15px 0 15px 0;
  text-align: center;
  position: relative;
}

.modal-btn a {
  display: inline-block;
  font-family: "Shippori Mincho", serif;
  font-weight: bold;
  font-size: 12px;
  padding: 0.6em 3.5em;
  position: relative;
  transition: all .3s;
}

.modal-btn span {
  display: inline-block;
  width: 40px;
  height: 1px;
  position: absolute;
  top: 50%;
  right: -13px;
  transition: all .3s;
}

.modal-btn span::after {
  content: "";
  position: absolute;
  height: 1px;
  width: 7px;
  transform: rotate(35deg);
  right: -1px;
  top: -2px;
}


.stamp-top-circle {
width: 40px;
height: 40px;
background-color: var(--themered);
border-radius: 50%;
color: #fff;
display: flex;
flex-direction: column;
gap: 0px;
justify-content: center;
align-items: center;
text-align: center;
font-weight: bold;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
outline: 2px solid var(--bgwhite);
}

.stamp-top-circle p{
color: var(--bgwhite);
}


/* 上のテキスト（小さめ） */
.stamp-top-circle p:first-child {
font-size: 10px;
margin: 0 0 -10px 0;
}

/* 下の数字部分（大きめ） */
.stamp-top-circle p:last-child {
font-size: 12px;
margin: 0;
margin-bottom: -5px;
}

.stamp-top-circle span {
font-size: 20px;
font-weight: 800;
}


.stamp_wrapper{
display: flex;
margin: 0 auto;
flex-direction: row;
gap: 15px;
justify-content: center;
align-items: center;
}

.stamp {
width: 80px;
height: 80px;
border: 3px solid #F1E7D9;
border-radius: 50%;
display: flex;
justify-content: center;
align-items: center;
background-color: var(--themewhite);
position: relative;
overflow: hidden;
}

/* 埋まっている場合（putまたはgoal） */
.stamp.put,
.stamp.goal {
background-image: url('../img/icon/stamp_pon.svg'); /* ← スタンプ画像を指定 */
background-size: cover;
background-position: center;
border-color: var(--themered); /* 枠色を変える（任意） */
}

/* goal用に別デザインのスタンプを入れたい場合 */
.stamp.goal {
/*background-image: url('goal_stamp.png');  ← ゴール用の画像 */
border-color: gold;
}

/* ▼ モーダル部分 */
#stamp-card-modal {
display: none; /* 非表示にしておく */
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5); /* 半透明背景 */
justify-content: center;
align-items: center;
}

/* モーダル中身 */
.stamp-modal-content {
background-color: white;
padding: 30px;
border-radius: 16px;
text-align: center;
position: relative;
width: 90%;
max-width: 400px;
box-shadow: 0 4px 10px rgba(0,0,0,0.25);
display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
}

/* 閉じるボタン */
.stamp-modal-close {
position: absolute;
right: 15px;
top: 10px;
font-size: 24px;
color: #888;
cursor: pointer;
}
.stamp-modal-close:hover {
color: #333;
}




.vote-btn.voted{
  background: #aaa;
  color: var(--themeblack);
    cursor: default;
}

.vote-btn[data-eventid="102048"] {
    pointer-events: none;
    background: #aaa;
    color: var(--themeblack);
    cursor: default;
}


.cc_star {
    position: relative;
    display: none;
}

.rate {
    position: absolute;
    left: 0;
}

.rate {
    translate: 0 -5px;
}
.rate {
    position: relative;
    display: inline-block;
    width: calc(5 * var(--star-size));
    height: var(--star-size);
    font-size: var(--star-size);
}

.rate::before {
    color: #c4c4c4;
}

.rate::before, .rate::after {
    position: absolute;
    display: inline-block;
    height: var(--star-size);
    content: '★★★★★';
    line-height: var(--star-size);
    left: 0;
    margin: 0 auto;
    translate: 0 6px;
}

.rate::after {
    display: flex !important;
}

.rate::after {
    overflow: hidden;
    width: calc(var(--score) / 5 * 100%);
    color: #ffb906;
}

.rate_num{
  margin-right: -7.5px;
  margin-bottom: -1px;
  display: none;
}

.rate_wrapper{
  display: flex;
  gap: 10px;
}