/* ============================================================
   delivery-card.css
   Hanahisho - product page "shortest delivery date" card

   Put this file at /css/delivery-card.css and load it on both
   the PC and the SP product pages (see the manual).

   It is loaded AFTER contents_renew.css, so the older
   #delivery-box rules in that file are overridden here.
   Do not edit contents_renew.css.

   ASCII only - safe on Shift_JIS pages.
   ============================================================ */

/* ---------- card ---------- */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box {
  position: absolute;
  top: 0;
  left: 300px;
  z-index: 10;
  display: block;
  width: 400px;
  box-sizing: border-box;
  border: 1px solid #01b2bc;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  text-align: left;
}

/* ---------- card : SP product page ----------
   On SP the script appends the card inside div.FS2_Name_and_Price,
   so the PC ancestor chain above never matches. These rules give the
   SP card the same frame and cancel the old contents_renew.css layout. */
div.FS2_Name_and_Price #delivery-box {
  position: static;
  display: block !important;
  flex-direction: unset;
  /* Same width formula as the beige card boxes below, so the two line up
     at any screen width:
       inc_mtz_sp.css -> #mtzCardBox div.cardBoxWrap > div { width: calc(95% - 10px) }
                         #mtzCardBox div.cardBox        { margin: 10px auto }
     If this card ends up 20px narrower than the beige box, that box is
     content-box: change 95% - 10px to 95% + 10px. */
  width: calc(95% - 10px) !important;
  /* top / sides / bottom - the beige box below adds 10px of its own */
  margin: 15px auto 4px !important;
  box-sizing: border-box;
  border: 1px solid #01b2bc;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  text-align: left;
}

/* ---------- header ---------- */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box h4,
div.FS2_Name_and_Price #delivery-box h4 {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  justify-content: center;
  align-items: center;
  gap: 7px;
  width: auto !important;
  flex: none;
  height: auto;
  min-height: 32px;
  margin: 0;
  padding: 6px 12px;
  box-sizing: border-box;
  /* cancel the old vertical band in contents_renew.css */
  writing-mode: horizontal-tb !important;
  text-orientation: mixed;
  white-space: normal !important;
  word-break: normal;
  background: #01b2bc;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
  line-height: 1.4;
}
/* the heading text sits in a span - it must not be squeezed either */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box h4 > span,
div.FS2_Name_and_Price #delivery-box h4 > span {
  display: inline !important;
  flex: 0 1 auto;
  width: auto !important;
  writing-mode: horizontal-tb !important;
  white-space: normal !important;
}
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box h4:before,
div.FS2_Name_and_Price #delivery-box h4:before {
  content: "";
  display: block !important;
  flex: 0 0 15px;
  width: 15px !important;
  height: 15px;
  background: url(/img_renew/common/icon_delivery.svg) 50% 50% no-repeat;
  background-size: contain;
}

/* ---------- body ---------- */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div,
div.FS2_Name_and_Price #delivery-box > div {
  padding: 9px 14px 4px;
  background: #fff;
  font-size: 13px;
  display: grid;
  grid-template-columns: minmax(0, 168px) minmax(0, 1fr);
  column-gap: 12px;
  align-items: center;
}
/* The message goes in the left column, the note in the right one - the same
   arrangement on PC and SP. (An earlier version spanned both across the full
   width; that rule carried a stray comma and was never actually applied, so
   this is what the card has looked like in practice.) */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div > #delivery-msg {
  grid-column: 1;
  align-self: start;
}
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div > ul {
  grid-column: 2;
  align-self: start;
}

/* prefecture selector */
#delivery-box .delivery-pref {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 0;
}
#delivery-box .delivery-pref > span {
  flex: 0 0 auto;
  font-size: 12px;
  color: #666;
}
#delivery-box select#delivery-pref-sel {
  flex: 1 1 auto;
  min-width: 0;
  height: 32px;
  padding: 0 26px 0 9px;
  box-sizing: border-box;
  border: 1px solid #cfd6d5;
  border-radius: 4px;
  background-color: #fff;
  font-size: 13px;
  color: #333;
  cursor: pointer;
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='7'%3E%3Cpath d='M1 1l4.5 4.5L10 1' fill='none' stroke='%23666' stroke-width='1.4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 11px center;
}
#delivery-box select#delivery-pref-sel:focus {
  outline: none;
  border-color: #01b2bc;
  box-shadow: 0 0 0 3px rgba(1, 178, 188, .16);
}

/* ---------- the date ---------- */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div #delivery,
div.FS2_Name_and_Price #delivery-box > div #delivery {
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #01b2bc;
  letter-spacing: 0;
  white-space: nowrap;
}

/* ---------- messages ---------- */
#delivery-box #delivery-msg {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: stretch;
}
/* each message shares the row; a long one takes the whole width */
#delivery-box #delivery-msg > .delivery-msg {
  flex: 1 1 auto;
  min-width: 0;
}
#delivery-box #delivery-msg > .delivery-msg--ng {
  flex: 1 1 100%;
}
#delivery-box #delivery-msg > .delivery-note-pick {
  flex: 1 1 100%;
}
#delivery-box .delivery-note-pick {
  margin: 0;
  font-size: 12px;
  font-weight: 700;
  color: #555;
  text-align: center;
  line-height: 1.6;
}
#delivery-box .delivery-msg {
  margin: 0;
  padding: 6px 10px;
  border-radius: 4px;
  font-size: 12px;
  line-height: 1.6;
}
#delivery-box .delivery-msg--ok   { background: #eaf8f8; color: #0d8a92; font-weight: 700; }
#delivery-box .delivery-msg--fee  { background: #fff6e8; color: #8a6420; }
#delivery-box .delivery-msg--fee b{ font-size: 15px; color: #d0490c; }
#delivery-box .delivery-msg--ng   { background: #fdeef1; color: #c01c40; font-weight: 700; }
#delivery-box .delivery-msg--isle { background: #f6f6f4; color: #666; }

/* ---------- notes ---------- */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box ul,
div.FS2_Name_and_Price #delivery-box ul {
  margin-top: 7px;
  padding: 0;
  list-style: none;
  font-size: 10.5px;
  line-height: 1.5;
  color: #666;
}
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box ul li,
div.FS2_Name_and_Price #delivery-box ul li {
  text-indent: -1em;
  margin-left: 1em;
  margin-bottom: 0;
  list-style: none;
  /* the size must sit on the li itself: any li rule in the SP stylesheets
     beats an inherited size from the ul, whatever its specificity */
  font-size: 10.5px !important;
  line-height: 1.5 !important;
  letter-spacing: 0;
}
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box ul li:last-child,
div.FS2_Name_and_Price #delivery-box ul li:last-child {
  margin-bottom: 0;
}
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box ul li::before,
div.FS2_Name_and_Price #delivery-box ul li::before {
  content: "\203B";
}

/* ---------- smartphone ---------- */
@media screen and (max-width: 768px) {
  #FS2_itemlayout_H div.itemPrice_wrapper #delivery-box {
    position: static;
    width: 100%;
    margin: 15px 0;
  }
  #FS2_itemlayout_H div.itemPrice_wrapper {
    min-height: 0 !important;
  }
  #FS2_itemlayout_H div.itemPrice_wrapper #delivery-box h4,
  div.FS2_Name_and_Price #delivery-box h4 { min-height: 36px; padding: 8px 10px; font-size: 13px; }
  /* keep the two-column layout on phones too - it saves a whole row */
  #FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div,
  div.FS2_Name_and_Price #delivery-box > div {
    padding: 10px 12px 4px;
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
    align-items: center;
  }
  #delivery-box .delivery-pref { margin-bottom: 0; gap: 0; }
  /* the label is dropped - the select already says it */
  #delivery-box .delivery-pref > span { display: none; }
  #FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div #delivery,
  div.FS2_Name_and_Price #delivery-box > div #delivery {
    padding: 0;
    /* SP date size - this rule is the one that wins, edit here */
    font-size: 20px;
  }
  #delivery-box select#delivery-pref-sel { height: 38px; font-size: 14px; padding: 0 26px 0 8px; }
  #delivery-box #delivery-msg { display: block; margin-top: 8px; }
  #delivery-box #delivery-msg > .delivery-msg { margin-bottom: 5px; padding: 7px 9px; }
  #delivery-box #delivery-msg > .delivery-msg:last-child { margin-bottom: 0; }
  #FS2_itemlayout_H div.itemPrice_wrapper #delivery-box ul,
  div.FS2_Name_and_Price #delivery-box ul { margin-top: 7px; }
}


/* ============================================================
   SP  (div.FS2_Name_and_Price)
   the card is appended after the <ul> inside that container
   ============================================================ */
div.FS2_Name_and_Price > #delivery-box {
  width: 100%;
  box-sizing: border-box;
  margin: 4px 0 0;
  border: 1px solid #01b2bc;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  text-align: left;
  font-size: 13px;
  line-height: 1.7;
  color: #333;
}
div.FS2_Name_and_Price > #delivery-box h4 {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 7px;
  min-height: 38px;
  margin: 0;
  padding: 9px 12px;
  box-sizing: border-box;
  background: #01b2bc;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 1.4;
}
div.FS2_Name_and_Price > #delivery-box h4:before {
  content: "";
  width: 15px;
  height: 15px;
  flex: 0 0 auto;
  background: url(/img_renew/common/icon_delivery.svg) 50% 50% no-repeat;
  background-size: contain;
}
div.FS2_Name_and_Price > #delivery-box > div {
  padding: 11px 13px 5px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  column-gap: 10px;
  align-items: center;
}
div.FS2_Name_and_Price > #delivery-box > div > #delivery-msg,
div.FS2_Name_and_Price > #delivery-box > div > ul {
  grid-column: 1 / -1;
}
div.FS2_Name_and_Price > #delivery-box #delivery {
  margin: 0;
  padding: 0;
  border-bottom: none;
  font-size: 20px;
  font-weight: 700;
  line-height: 1.3;
  text-align: center;
  color: #01b2bc;
}
div.FS2_Name_and_Price > #delivery-box .delivery-pref { margin-bottom: 0; }
div.FS2_Name_and_Price > #delivery-box .delivery-pref > span { display: none; }
div.FS2_Name_and_Price > #delivery-box select#delivery-pref-sel {
  height: 38px;
  font-size: 14px;
  padding: 0 26px 0 8px;
}
div.FS2_Name_and_Price > #delivery-box #delivery-msg {
  display: block;
  margin-top: 8px;
}
div.FS2_Name_and_Price > #delivery-box #delivery-msg > .delivery-msg {
  margin-bottom: 5px;
  padding: 7px 9px;
}
div.FS2_Name_and_Price > #delivery-box #delivery-msg > .delivery-msg:last-child {
  margin-bottom: 0;
}
div.FS2_Name_and_Price > #delivery-box ul {
  margin: 7px 0 0;
  padding: 0;
  list-style: none;
  font-size: 10.5px;
  line-height: 1.65;
  color: #666;
}
div.FS2_Name_and_Price > #delivery-box ul li {
  text-indent: -1em;
  margin-left: 1em;
  list-style: none;
}
div.FS2_Name_and_Price > #delivery-box ul li::before { content: "\203B"; }


/* ============================================================
   SP : put the message and the note side by side, like the PC card.
   Placed last on purpose - it has to win over both the base rule
   and the SP block above, which span them across the full width.
   ============================================================ */
div.FS2_Name_and_Price #delivery-box > div > #delivery-msg {
  grid-column: 1;
  align-self: start;
  margin-top: 8px;
}
div.FS2_Name_and_Price #delivery-box > div > ul {
  grid-column: 2;
  align-self: start;
  margin-top: 8px;
}
/* An even 1fr / 1fr split squeezes both sides. The left column only has to
   hold the select and the fee message, so pin it and give the rest to the
   note, which is the longest text in the card. */
div.FS2_Name_and_Price #delivery-box > div {
  grid-template-columns: minmax(0, 148px) minmax(0, 1fr);
  column-gap: 10px;
}

/* The SP stylesheets put a width on li elements inside this container, which
   squeezes the note into a narrow strip and leaves the column half empty.
   Force it back to a plain full-width block. */
div.FS2_Name_and_Price #delivery-box ul,
div.FS2_Name_and_Price #delivery-box ul li {
  display: block !important;
  width: auto !important;
  max-width: none !important;
  min-width: 0 !important;
  float: none !important;
  box-sizing: border-box;
}

/* ============================================================
   The note is now a <p class="delivery-note">, not a <ul><li>.
   li elements inside this container are styled by the SP
   stylesheets (size and width), which squeezed the note into a
   narrow strip. A p behaves, exactly like .delivery-msg does.
   The ul rules above are kept only for older cached markup.
   ============================================================ */
#delivery-box .delivery-note {
  margin: 8px 0 0;
  padding: 0;
  width: auto;
  text-indent: -1em;
  padding-left: 1em;
  box-sizing: border-box;
  font-size: 10.5px;
  line-height: 1.5;
  letter-spacing: 0;
  color: #666;
  text-align: left;
  font-weight: 400;
}
/* right-hand column, next to the message - PC and SP alike */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div > .delivery-note,
div.FS2_Name_and_Price #delivery-box > div > .delivery-note {
  grid-column: 2;
  align-self: start;
}

/* ============================================================
   Message + note : one flex row across the whole card.
   The grid cells were not stretching their contents (the note
   measured 118px inside a 200px+ column), so the split is done
   with flex here instead. Everything is forced, because the SP
   stylesheets reach these element types.
   ============================================================ */
#delivery-box .delivery-row {
  grid-column: 1 / -1;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: flex-start;
  gap: 10px;
  width: 100% !important;
  max-width: none !important;
  margin: 8px 0 0 !important;
  padding: 0 !important;
  box-sizing: border-box;
}
#delivery-box .delivery-row > #delivery-msg {
  flex: 0 0 148px;
  width: 148px !important;
  min-width: 0;
  margin: 0 !important;
  box-sizing: border-box;
}
#delivery-box .delivery-row > .delivery-note {
  flex: 1 1 auto;
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  margin: 0 !important;
  box-sizing: border-box;
}
#delivery-box .delivery-row .delivery-msg {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
  margin: 0 0 5px !important;
}
#delivery-box .delivery-row .delivery-msg:last-child { margin-bottom: 0 !important; }

/* ============================================================
   Grid items were being shrink-wrapped instead of filling their
   cells - a div, a p and a wrapper div all measured far narrower
   than the column they sat in. Force stretch at every level.
   ============================================================ */
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div,
div.FS2_Name_and_Price #delivery-box > div {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box !important;
  justify-items: stretch !important;
  justify-content: stretch !important;
}
#FS2_itemlayout_H div.itemPrice_wrapper #delivery-box > div > *,
div.FS2_Name_and_Price #delivery-box > div > * {
  justify-self: stretch !important;
  min-width: 0;
  box-sizing: border-box;
}
#delivery-box .delivery-row,
#delivery-box #delivery-msg,
#delivery-box .delivery-note {
  justify-self: stretch !important;
  align-self: start !important;
}