/*
 * The file is for demo purposes,
 * don't use in your configuration!
 */

[data-cc="show-preferencesModal"] {
  margin: 0 0.5em 0.5em 0;
}

#cc-main {
  font-family: "Kanit", "Raleway", "Noto sans", sans-serif;
}

#cc-main .pm__title {
  font-size: 1.2em;
}

#cc-main .pm__section-title {
  font-size: 1.2em;
}

#cc-main .pm--box {
  max-height: 55em;
  max-width: 75em;
}

#cc-main .pm__section-desc-wrapper {
  font-size: 1.2em;
}

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

#cc-main .cm.cm--wewyn,
.cc--main .cm.cm--wewyn {
  width: calc(100% - 24px) !important;

  max-width: 860px !important;

  box-sizing: border-box !important;

  background: #ffffff !important;

  border: 0 !important;

  border-radius: 14px !important;

  overflow: hidden !important;

  box-shadow: 0 8px 30px rgba(0, 40, 100, 0.12) !important;
}

/*
 * =====================================================
 * BODY
 * =====================================================
 *
 * สำคัญ:
 *
 * บังคับ block
 *
 * ไม่ให้ CookieConsent
 * เอาปุ่มไปวางด้านข้าง
 */

#cc-main .cm.cm--wewyn .cm__body,
.cc--main .cm.cm--wewyn .cm__body {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  padding: 20px 28px !important;
  margin: 0 !important;
}

/*
 * =====================================================
 * HERO
 *
 * 🍪  TITLE
 *     DESCRIPTION
 * =====================================================
 */

#cc-main .cm.cm--wewyn .wewyn-cookie-hero,
.cc--main .cm.cm--wewyn .wewyn-cookie-hero {
  display: flex !important;

  align-items: center !important;

  width: 100% !important;

  min-width: 0 !important;

  box-sizing: border-box !important;

  gap: 18px !important;

  margin: 0 !important;

  padding: 0 !important;
}

/*
 * =====================================================
 * COOKIE ICON
 * =====================================================
 */

#cc-main .cm.cm--wewyn .wewyn-cookie-icon,
.cc--main .cm.cm--wewyn .wewyn-cookie-icon {
  display: flex !important;

  align-items: flex-start !important;

  justify-content: center !important;

  flex: 0 0 64px !important;

  width: 64px !important;

  min-width: 64px !important;

  height: 64px !important;

  margin: 2px 0 0 !important;

  padding: 0 !important;
}

#cc-main .cm.cm--wewyn .wewyn-cookie-icon svg,
.cc--main .cm.cm--wewyn .wewyn-cookie-icon svg {
  display: block !important;

  width: 58px !important;

  height: 58px !important;
}

/*
 * =====================================================
 * TEXT
 * =====================================================
 */

#cc-main .cm.cm--wewyn .wewyn-cookie-hero .cm__texts,
.cc--main .cm.cm--wewyn .wewyn-cookie-hero .cm__texts {
  display: block !important;

  flex: 1 1 auto !important;

  width: auto !important;

  min-width: 0 !important;

  max-width: none !important;

  padding: 0 !important;

  margin: 0 !important;
}

/*
 * =====================================================
 * TITLE
 * =====================================================
 */

#cc-main .cm.cm--wewyn .cm__title,
.cc--main .cm.cm--wewyn .cm__title {
  margin: 0 0 4px !important;
  padding: 0 !important;
  font-size: 20px !important;
  line-height: 1.4 !important;
  font-weight: 400 !important;
  text-align: left !important;
}

/*
 * =====================================================
 * DESCRIPTION
 * =====================================================
 */

#cc-main .cm.cm--wewyn .cm__desc,
.cc--main .cm.cm--wewyn .cm__desc {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  font-weight: 300 !important;
  text-align: left !important;
  overflow: visible !important;
  max-height: none !important;
}

#cc-main .cm.cm--wewyn .cm__desc p,
.cc--main .cm.cm--wewyn .cm__desc p {
  margin: 0 0 5px !important;
}

#cc-main .cm.cm--wewyn .cm__desc p:last-child,
.cc--main .cm.cm--wewyn .cm__desc p:last-child {
  margin-bottom: 0 !important;
}

/*
 * =====================================================
 * CUSTOM BUTTON AREA
 *
 * [ ปรับแต่งการตั้งค่า ] [ ยอมรับทั้งหมด ]
 * =====================================================
 */

#cc-main .cm.cm--wewyn .wewyn-cookie-actions,
.cc--main .cm.cm--wewyn .wewyn-cookie-actions {
  display: grid !important;
  grid-template-columns:
    minmax(0, 1fr)
    minmax(0, 1fr) !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  box-sizing: border-box !important;
  gap: 12px !important;
  margin: 18px 0 0 !important;
  padding: 0 !important;
}

/*
 * =====================================================
 * BUTTON
 * =====================================================
 */

#cc-main .cm.cm--wewyn .wewyn-cookie-actions .cm__btn,
.cc--main .cm.cm--wewyn .wewyn-cookie-actions .cm__btn {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 100% !important;
  min-width: 0 !important;
  max-width: none !important;
  min-height: 42px !important;
  height: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  padding: 9px 12px !important;
  border-radius: 7px !important;
  font-size: 15px !important;
  line-height: 1.4 !important;
  font-weight: 300 !important;
  text-align: center !important;
  white-space: normal !important;
  box-shadow: none !important;
  flex: none !important;
}

/*
 * =====================================================
 * CUSTOMIZE
 * ซ้าย
 * =====================================================
 */

#cc-main .cm.cm--wewyn .wewyn-cookie-actions [data-role="show"],
.cc--main .cm.cm--wewyn .wewyn-cookie-actions [data-role="show"] {
  grid-column: 1 !important;
  grid-row: 1 !important;
  color: #147cff !important;
  background: #ffffff !important;
  border: 1.5px solid #4293ff !important;
}

#cc-main .cm.cm--wewyn .wewyn-cookie-actions [data-role="show"]:hover,
.cc--main .cm.cm--wewyn .wewyn-cookie-actions [data-role="show"]:hover {
  color: #ffffff !important;
  background: #147cff !important;
  border-color: #147cff !important;
}

/*
 * =====================================================
 * ACCEPT ALL
 * ขวา
 * =====================================================
 */

#cc-main .cm.cm--wewyn .wewyn-cookie-actions [data-role="all"],
.cc--main .cm.cm--wewyn .wewyn-cookie-actions [data-role="all"] {
  grid-column: 2 !important;
  grid-row: 1 !important;
  color: #ffffff !important;
  background: #147cff !important;
  border: 1.5px solid #147cff !important;
}

#cc-main .cm.cm--wewyn .wewyn-cookie-actions [data-role="all"]:hover,
.cc--main .cm.cm--wewyn .wewyn-cookie-actions [data-role="all"]:hover {
  color: #ffffff !important;
  background: #006cf1 !important;
  border-color: #006cf1 !important;
}

/*
 * =====================================================
 * ซ่อน wrapper ปุ่มเดิมที่ว่างแล้ว
 * =====================================================
 */

#cc-main .cm.cm--wewyn .cm__btns:empty,
.cc--main .cm.cm--wewyn .cm__btns:empty,
#cc-main .cm.cm--wewyn .cm__btn-group:empty,
.cc--main .cm.cm--wewyn .cm__btn-group:empty {
  display: none !important;
}

/*
 * =====================================================
 * PREFERENCES
 * =====================================================
 */

#cc-main .pm,
.cc--main .pm {
  border-radius: 14px !important;
}

#cc-main .pm .pm__title,
.cc--main .pm .pm__title {
}

#cc-main .pm .pm__section-title,
.cc--main .pm .pm__section-title {
}

#cc-main .pm .pm__section-desc,
.cc--main .pm .pm__section-desc {
  line-height: 1.65 !important;
}

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

@media (max-width: 640px) {
  #cc-main .cm.cm--wewyn,
  .cc--main .cm.cm--wewyn {
    width: calc(100% - 16px) !important;

    border-radius: 12px !important;
  }

  #cc-main .cm.cm--wewyn .cm__body,
  .cc--main .cm.cm--wewyn .cm__body {
    padding: 16px 14px !important;
  }

  #cc-main .cm.cm--wewyn .wewyn-cookie-hero,
  .cc--main .cm.cm--wewyn .wewyn-cookie-hero {
    gap: 10px !important;
  }

  #cc-main .cm.cm--wewyn .wewyn-cookie-icon,
  .cc--main .cm.cm--wewyn .wewyn-cookie-icon {
    flex: 0 0 50px !important;
    width: 50px !important;
    min-width: 50px !important;
    height: 50px !important;
  }

  #cc-main .cm.cm--wewyn .wewyn-cookie-icon svg,
  .cc--main .cm.cm--wewyn .wewyn-cookie-icon svg {
    width: 46px !important;
    height: 46px !important;
  }

  #cc-main .cm.cm--wewyn .cm__title,
  .cc--main .cm.cm--wewyn .cm__title {
    font-size: 17px !important;
  }

  #cc-main .cm.cm--wewyn .cm__desc,
  .cc--main .cm.cm--wewyn .cm__desc {
    font-size: 13px !important;
    line-height: 1.5 !important;
  }

  /*
   * มือถือยัง 2 ปุ่มข้างกัน
   */
  #cc-main .cm.cm--wewyn .wewyn-cookie-actions,
  .cc--main .cm.cm--wewyn .wewyn-cookie-actions {
    grid-template-columns:
      minmax(0, 1fr)
      minmax(0, 1fr) !important;
    gap: 8px !important;
    margin-top: 14px !important;
  }

  #cc-main .cm.cm--wewyn .wewyn-cookie-actions .cm__btn,
  .cc--main .cm.cm--wewyn .wewyn-cookie-actions .cm__btn {
    min-height: 40px !important;
    padding: 7px 5px !important;
    font-size: 13px !important;
  }
}

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

@media (max-width: 380px) {
  #cc-main .cm.cm--wewyn .wewyn-cookie-icon,
  .cc--main .cm.cm--wewyn .wewyn-cookie-icon {
    flex-basis: 42px !important;
    width: 42px !important;
    min-width: 42px !important;
  }

  #cc-main .cm.cm--wewyn .wewyn-cookie-icon svg,
  .cc--main .cm.cm--wewyn .wewyn-cookie-icon svg {
    width: 40px !important;
    height: 40px !important;
  }

  #cc-main .cm.cm--wewyn .cm__title,
  .cc--main .cm.cm--wewyn .cm__title {
    font-size: 15px !important;
  }

  #cc-main .cm.cm--wewyn .cm__desc,
  .cc--main .cm.cm--wewyn .cm__desc {
    font-size: 12px !important;
  }

  #cc-main .cm.cm--wewyn .wewyn-cookie-actions .cm__btn,
  .cc--main .cm.cm--wewyn .wewyn-cookie-actions .cm__btn {
    font-size: 12px !important;
  }
}