/*
 * vt-m-sheets.css - MTS mobile redesign 2026-11 (owner: ORDER-SHEETS). Loaded only when vtTheme (mobileFrame/header.jsp).
 * Every rule: inside @media (max-width: 991px) and prefixed html.vt  -> WTS (>=992px) and vtTheme=false are untouched.
 *
 * The four bottom sheets of mobileFrame/footer.jsp, laid out like the reference trading page sheets (#tradePop .bottom_nav_main):
 *   .popup.order._2   지정가 / MIT (popupTrade('limit'|'mit'); MIT mode = class vtm-mit, set by vt-m-sheets.js from selectPopup)
 *   .popup.order._1   시장가        (popupTrade('market'))
 *   .popup.order.tick 손/익절       (popupTrade('tpsl'))
 *   .popup.order.vtm-cancel 정정/취소 (NEW, vtmOpenCancelSheet(); cancel actions = the onclicks of order.jsp .c_chart_bottom2)
 * DOM is never re-nested: the existing rows are placed with CSS grid (+ display:contents on the 매도/매수 row) and order.
 * Opening/closing stays with the page JS (inline display flex/none, the document mouseup closer of footer.jsp); this file never
 * sets display on the three existing sheets.
 * Reference geometry (390 px wide, measured on r07-r10): sheet padding 10, side buttons 20vw, gaps 10 / 12, steppers 40 px,
 * info rows 40 px #F5F5F5, overlay rgba(0,0,0,.5) from under the 50 px navbar.
 */
@media (max-width: 991px) {

  /* ---------- 1. overlay + sheet (all four) ---------- */
  html.vt .popup.order {
    top: var(--vtm-sheet-top, 50px);          /* navbar stays visible (reference) */
    bottom: 0;
    height: auto;
    background-color: rgba(0, 0, 0, .5);
    align-items: flex-end;
    font-size: 13px;
    line-height: 1.5;
  }
  html.vt .popup.order .order_popbox {
    padding: 10px;
    /* 2026-11-07: the sheets open above the fixed trading bar; on iPhones the home-indicator
       inset must not cover their bottom row (viewport-fit=cover is set in mobileFrame/header.jsp) */
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
    background-color: #FFFFFF;
    border-radius: 3px 3px 0 0;
    box-shadow: 0 0 5px rgba(0, 0, 0, .5);
    color: #333333;
  }
  html.vt .popup.order.tick .order_popbox {
    padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;  /* beats the inline padding-bottom: 4vw of footer.jsp */
  }
  html.vt .popup.order .w-form {
    margin: 0;
  }

  /* ---------- 2. 지정가 / MIT (._2) and 시장가 (._1): reference grid ----------
     columns: 매도 20vw | 10 | steppers | 12 | 매수 20vw  (= reference floats: margin-left 20vw+10, width 60vw-42) */
  html.vt .popup.order._2 .w-form,
  html.vt .popup.order._1 .w-form {
    display: grid;
    grid-template-columns: 20vw 10px minmax(0, 1fr) 12px 20vw;
    column-gap: 0;
    row-gap: 0;
  }
  /* rows ._2: [MIT note] [stepper 1] [10] [stepper 2] [10] [info] */
  html.vt .popup.order._2 .w-form {
    grid-template-rows: auto 40px 10px 40px 10px auto;
  }
  /* rows ._1: [stepper] [10] [info] */
  html.vt .popup.order._1 .w-form {
    grid-template-rows: 40px 10px auto;
  }
  /* stepper rows: [-][input][+]  (DOM: label, input, -, +) */
  html.vt .popup.order._2 .w-form > .order_row:nth-child(1),
  html.vt .popup.order._2 .w-form > .order_row:nth-child(2),
  html.vt .popup.order._1 .w-form > .order_row:nth-child(1) {
    display: flex;
    align-items: stretch;
    justify-content: flex-start;
    width: auto;
    height: 40px;
    margin: 0;
    padding: 0;
    gap: 0;
    grid-column: 3;
  }
  html.vt .popup.order._2 .w-form > .order_row:nth-child(1) { grid-row: 2; }    /* 가격 */
  html.vt .popup.order._2 .w-form > .order_row:nth-child(2) { grid-row: 4; }    /* 수량 */
  html.vt .popup.order._1 .w-form > .order_row:nth-child(1) { grid-row: 1; }    /* 수량 */
  html.vt .popup.order._2 .order_row .txt_fix,
  html.vt .popup.order._1 .order_row .txt_fix {
    display: none;                            /* "가격" / "수량": reference has no labels, the placeholders stay */
  }
  html.vt .popup.order._2 .order_row > .order_field,
  html.vt .popup.order._1 .order_row > .order_field {
    order: 2;
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 40px;
    min-height: 0;
    margin: 0;
    padding: 0 4px;
    background-color: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-left: 0;
    border-right: 0;
    border-radius: 3px;
    box-shadow: none;
    color: #333333;
    font-size: 13px;
    line-height: 38px;
    text-align: center;
  }
  html.vt .popup.order._2 .order_row > .order_field:focus,
  html.vt .popup.order._1 .order_row > .order_field:focus {
    border-color: #DEDEDE;
    outline: none;
  }
  html.vt .popup.order._2 .order_row > .btn_cal,
  html.vt .popup.order._1 .order_row > .btn_cal {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    min-height: 0;
    padding: 0;
    background-color: #EFEFEF;
    border: 0;
    color: #333333;
    font-size: 0;                             /* own glyph "－"/"＋" kept in the DOM, drawn by ::after as "-"/"+" (reference) */
    font-weight: 400;
    line-height: 1;
  }
  html.vt .popup.order._2 .order_row > .btn_cal::after,
  html.vt .popup.order._1 .order_row > .btn_cal::after {
    color: #222222;
    font-size: 14px;
    font-weight: 600;
    line-height: 1;
  }
  html.vt .popup.order._2 .order_row > a.btn_cal:nth-of-type(1)::after,
  html.vt .popup.order._1 .order_row > a.btn_cal:nth-of-type(1)::after {
    content: "-";
  }
  html.vt .popup.order._2 .order_row > a.btn_cal:nth-of-type(2)::after,
  html.vt .popup.order._1 .order_row > a.btn_cal:nth-of-type(2)::after {
    content: "+";
  }
  html.vt .popup.order._2 .order_row > a.btn_cal:nth-of-type(1),
  html.vt .popup.order._1 .order_row > a.btn_cal:nth-of-type(1) {
    order: 1;                                 /* - */
    width: 33px;
    min-width: 33px;
    border-radius: 3px 0 0 3px;
  }
  html.vt .popup.order._2 .order_row > a.btn_cal:nth-of-type(2),
  html.vt .popup.order._1 .order_row > a.btn_cal:nth-of-type(2) {
    order: 3;                                 /* + */
    width: 37px;
    min-width: 37px;
    border-radius: 0 3px 3px 0;
  }
  html.vt .popup.order._2 .order_row > .btn_cal:hover,
  html.vt .popup.order._1 .order_row > .btn_cal:hover {
    background-color: #EFEFEF;
    color: #333333;
  }
  /* 매도 / 매수: the row is dissolved so both buttons become grid items */
  html.vt .popup.order._2 .order_row._2,
  html.vt .popup.order._1 .order_row._2 {
    display: contents;
  }
  html.vt .popup.order._2 .order_row._2 > .btn_order,
  html.vt .popup.order._1 .order_row._2 > .btn_order {
    display: flex;
    justify-content: center;
    align-items: center;
    width: auto;
    margin: 0;
    padding: 0 4px;
    border-radius: 3px;
    background-color: #0083EA;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.3;
    text-align: center;
    grid-column: 1;
  }
  html.vt .popup.order._2 .order_row._2 > .btn_order.red,
  html.vt .popup.order._1 .order_row._2 > .btn_order.red {
    background-color: #FE5C5C;
    grid-column: 5;
  }
  html.vt .popup.order._2 .order_row._2 > .btn_order:hover,
  html.vt .popup.order._1 .order_row._2 > .btn_order:hover {
    background-color: #0083EA;
    box-shadow: none;
    color: #FFFFFF;
  }
  html.vt .popup.order._2 .order_row._2 > .btn_order.red:hover,
  html.vt .popup.order._1 .order_row._2 > .btn_order.red:hover {
    background-color: #FE5C5C;
  }
  html.vt .popup.order._2 .order_row._2 > .btn_order {
    grid-row: 2 / 5;                          /* 90 px: spans both steppers */
  }
  html.vt .popup.order._1 .order_row._2 > .btn_order {
    grid-row: 1;
    align-self: start;
    height: 38px;                             /* reference 시장가 buttons are 38 px next to the 40 px stepper */
  }
  /* MIT mode (class from vt-m-sheets.js): "MIT매도" / "MIT매수" like the reference, yellow note; our 주문가능 row stays (extra) */
  html.vt .popup.order._2.vtm-mit .order_row._2 > .btn_order::before {
    content: "MIT";
  }
  html.vt .popup.order._2 .vtm-mit-note {
    display: none;
  }
  html.vt .popup.order._2.vtm-mit .vtm-mit-note {
    display: block;
    grid-column: 1 / -1;
    grid-row: 1;
    height: 40px;
    padding: 10px;
    background-color: #F5F5F5;
    color: #333333;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
  }
  html.vt .popup.order._2 .vtm-mit-note > span {
    display: block;
    height: 20px;
    padding-left: 2px;
    background-color: #EFEF26;
    border-right: 1px solid #DEDEDE;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.vt .popup.order._2 .vtm-mit-note b {
    font-weight: 600;
  }

  /* ---------- 3. info rows (주문가능 / 보유수량), ._1 + ._2 ---------- */
  html.vt .popup.order._2 .order_row._3,
  html.vt .popup.order._1 .order_row._3 {
    display: block;
    width: auto;
    margin: 0;
    padding: 0;
    background-color: #F5F5F5;
    border-radius: 0;
    color: #333333;
    grid-column: 1 / -1;
  }
  html.vt .popup.order._2 .order_row._3 { grid-row: 6; }
  html.vt .popup.order._1 .order_row._3 { grid-row: 3; }
  html.vt .popup.order .order_row._3 > .order_info {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 40px;
    padding: 0 10px;
    gap: 0;
    font-size: 13px;
    line-height: 20px;
  }
  html.vt .popup.order .order_row._3 .order_info_col {
    flex: 0 0 auto;
    width: auto;
    min-height: 0;
    padding: 0;
    color: #333333;
    font-size: 13px;
    white-space: nowrap;
  }
  html.vt .popup.order .order_row._3 .order_info_col.line {
    flex: 0 0 20vw;
    width: 20vw;
    height: 20px;
    padding: 0;
    border-right: 1px solid #DEDEDE;
    color: #333333;
    font-weight: 400;
  }
  html.vt .popup.order .order_row._3 .order_info_col.line + .order_info_col {
    padding-left: 5vw;
  }
  html.vt .popup.order .order_row._3 .order_info_col.line + .order_info_col + .order_info_col {
    padding-left: 35px;
  }
  html.vt .popup.order .order_row._3 .order_info_col > div {
    display: flex;
    align-items: center;
  }
  html.vt .popup.order .order_row._3 .mesuPossible,
  html.vt .popup.order .order_row._3 .medoPossible {
    margin-left: 10px;
    color: #333333;
  }
  html.vt .popup.order .order_row._3 .txt_color {
    font-weight: 400;
  }
  html.vt .popup.order .order_row._3 .txt_color.red {
    color: #F44336;
  }
  html.vt .popup.order .order_row._3 .txt_color.blue {
    color: #2196F3;
  }

  /* ---------- 4. 손/익절 (.tick): rows [☐ label][input][틱][∧|∨] (r10), 손절 first like the reference, then our 확인 ---------- */
  html.vt .popup.order.tick .w-form {
    display: flex;
    flex-direction: column;
  }
  html.vt .popup.order.tick .order_row.tick {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: auto;
    height: 40px;
    margin: 0 0 10px;
    padding: 0;
    gap: 0;
    color: #333333;
    font-size: 13px;
    font-weight: 400;
    white-space: nowrap;
  }
  html.vt .popup.order.tick .order_row.tick:nth-child(1) { order: 2; }   /* 익절 */
  html.vt .popup.order.tick .order_row.tick:nth-child(2) { order: 1; }   /* 손절 */
  html.vt .popup.order.tick .order_row.tick:nth-child(3) { order: 3; margin-bottom: 0; }   /* 확인 */
  html.vt .popup.order.tick .order_row.tick > .w-checkbox {
    display: flex;
    align-items: center;
    flex: 0 0 auto;
    margin: 0;
    padding: 0;
  }
  html.vt .popup.order.tick .order_row.tick > .w-checkbox::before,
  html.vt .popup.order.tick .order_row.tick > .w-checkbox::after {
    display: none;
  }
  html.vt .popup.order.tick .check_general_box {
    flex: 0 0 auto;
    float: none;
    margin: 0 6px 0 0;
    background-color: #FFFFFF;
    background-image: none;
    border: 1px solid #767676;
    border-radius: 2px;
  }
  html.vt .popup.order.tick .check_general_box.w--redirected-checked,
  html.vt .popup.order.tick .check_general_box.red.w--redirected-checked,
  html.vt .popup.order.tick .check_general_box.blue.w--redirected-checked {
    background-color: #2196F3;
    background-image: var(--vt-check-svg);
    background-size: 11px 11px;
    background-position: 50% 50%;
    background-repeat: no-repeat;
    border-color: #2196F3;
  }
  html.vt .popup.order.tick .order_row.tick .w-form-label {
    margin: 0;
    color: #333333;
    font-size: 13px;
    font-weight: 400;
    line-height: 20px;
  }
  html.vt .popup.order.tick .order_row.tick > .order_field.tick {
    flex: 1 1 0;
    min-width: 0;
    width: auto;
    height: 40px;
    min-height: 0;
    margin: 0 0 0 8px;
    padding: 0 13px;
    background-color: #FFFFFF;
    border: 1px solid #DEDEDE;
    border-radius: 3px;
    box-shadow: none;
    color: #333333;
    font-size: 13px;
    text-align: left;
  }
  html.vt .popup.order.tick .order_row.tick > .order_field.tick:focus {
    border-color: #DEDEDE;
    outline: none;
  }
  html.vt .popup.order.tick .order_row.tick > div:not(.btn_tick) {    /* "틱" (plain input-group addon in the reference) */
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 0 0 37px;
    height: 40px;
    color: #333333;                           /* measured #333 on r10 */
    font-size: 13px;
  }
  html.vt .popup.order.tick .order_row.tick > .btn_tick {
    display: flex;
    flex: 0 0 auto;
    width: auto;
    min-width: 0;
    height: 40px;
    margin-right: 5px;                        /* r10: the rows end 15 px from the screen edge */
    border-radius: 3px;
    overflow: hidden;
  }
  html.vt .popup.order.tick .btn_cal.tick {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 34px;
    min-width: 34px;
    height: 40px;
    min-height: 0;
    padding: 0;
    background-color: #F9F9F9;
    border: 1px solid #DEDEDE;
    border-radius: 3px 0 0 3px;
    color: #333333;
    font-size: 0;                             /* own "∧"/"∨" kept in the DOM, drawn as a chevron by ::after (reference icon) */
    font-weight: 400;
    line-height: 1;
  }
  html.vt .popup.order.tick .btn_cal.tick._2 {
    border-left: 0;
    border-radius: 0 3px 3px 0;
  }
  html.vt .popup.order.tick .btn_cal.tick::after {
    content: "";
    display: block;
    width: 5px;
    height: 5px;
    margin-top: 3px;
    border-top: 1.5px solid #333333;
    border-left: 1.5px solid #333333;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
  }
  html.vt .popup.order.tick .btn_cal.tick._2::after {
    margin-top: -3px;
    -webkit-transform: rotate(225deg);
    transform: rotate(225deg);
  }
  html.vt .popup.order.tick .btn_cal.tick:hover {
    background-color: #F9F9F9;
    color: #333333;
  }
  html.vt .popup.order.tick .btn_tick_smt {                          /* 확인 (ours, kept) */
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-right: 5px;                        /* same right edge as the rows above */
    height: 40px;
    padding: 0;
    background-color: #2196F3;
    border-radius: 3px;
    box-shadow: none;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 500;
  }
  html.vt .popup.order.tick .btn_tick_smt:hover {
    background-color: #2196F3;
    box-shadow: none;
    color: #FFFFFF;
  }

  /* ---------- 5. 정정/취소 (NEW .popup.order.vtm-cancel, footer.jsp) ----------
     Shown / hidden by vt-m-sheets.js through its inline display (none in the markup); the two rules below only mirror it. */
  html.vt .popup.order.vtm-cancel {
    display: none;
  }
  html.vt .popup.order.vtm-cancel.is-open {
    display: flex;
  }
  html.vt .vtm-cancel .vtm-cgrid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 10px;
    margin-bottom: 10px;
  }
  html.vt .vtm-cancel .vtm-cbtn {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 40px;
    margin: 0;
    padding: 0 4px;
    border: 0;
    border-radius: 3px;
    background-color: #949A9F;
    color: #FFFFFF;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.2;
    white-space: nowrap;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    -webkit-tap-highlight-color: transparent;
  }
  html.vt .vtm-cancel .vtm-cbtn.vtm-sell { background-color: #0083EA; }
  html.vt .vtm-cancel .vtm-cbtn.vtm-buy { background-color: #FE5C5C; }
  html.vt .vtm-cancel .vtm-cbtn.vtm-sell.vtm-mit { background-color: #DBEEF4; color: #0068BB; }
  html.vt .vtm-cancel .vtm-cbtn.vtm-buy.vtm-mit { background-color: #FDEADA; color: #D8393B; }
  html.vt .vtm-cancel .vtm-cinfo {
    display: flex;
    align-items: center;
    height: 40px;
    padding: 0 10px;
    background-color: #F5F5F5;
    color: #333333;
    font-size: 13px;
    line-height: 20px;
    white-space: nowrap;
    overflow: hidden;
  }
  html.vt .vtm-cancel .vtm-cinfo-l {
    flex: 0 0 20vw;
    width: 20vw;
    height: 20px;
    border-right: 1px solid #DEDEDE;
  }
  html.vt .vtm-cancel .vtm-cinfo-v {
    padding-left: 5vw;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html.vt .vtm-cancel .vtm-cinfo-v small {
    margin-left: 6px;
    color: #999999;
    font-size: 12px;
  }

  /* pressed feedback (touch): :active only - :hover would stick after a tap */
  html.vt .popup.order .order_row._2 > .btn_order:active,
  html.vt .popup.order .order_row > .btn_cal:active,
  html.vt .popup.order.tick .btn_tick_smt:active,
  html.vt .vtm-cancel .vtm-cbtn:active {
    box-shadow: inset 0 0 0 999px rgba(0, 0, 0, .08);
  }

  /* ---------- 6. toast (reference showText.js: rgba(0,0,0,.8), white 13px, radius 4, padding 4px 12px, max 80%) ---------- */
  html.vt .vtm-toast {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 20%;                              /* r11: the 정정/취소 toast sits 20% above the bottom */
    z-index: 10000;
    text-align: center;
    pointer-events: none;
    opacity: 0;
    visibility: hidden;
    transition: opacity .4s ease, visibility 0s linear .4s;
  }
  html.vt .vtm-toast.is-on {
    opacity: 1;
    visibility: visible;
    transition: opacity .4s ease, visibility 0s linear 0s;
  }
  html.vt .vtm-toast > span {
    display: inline-block;
    max-width: 80%;
    padding: 4px 12px;
    border-radius: 4px;
    background-color: rgba(0, 0, 0, .8);
    color: #FFFFFF;
    font-size: 13px;
    line-height: 20px;
    text-align: center;
    word-break: keep-all;
  }
}