@charset "utf-8";

.m-search-row {
  height         : 40px;
  display        : flex;
  align-items    : center;
  justify-content: center;

  .input-box,
  .search-map {
    width         : 100%;
    height        : 40px;
    position      : relative;
    background    : #e9edf1;
    border-radius : 20px;
    font-size     : 14px;
    font-weight   : 400;
    color         : #868691;
    letter-spacing: 1px;
    line-height   : 40px;

    .pre-icon {
      position      : absolute;
      z-index       : 9;
      left          : 15px;
      margin-left   : 0;
      transition    : all .3s ease;
      pointer-events: none;
    }

    .icon-center {
      left       : 50%;
      margin-left: -40px;
    }

    input.input::-webkit-input-placeholder {
      text-align: center;
    }

    .input {
      position  : absolute;
      z-index   : 10;
      width     : 100%;
      height    : 40px;
      border    : none;
      background: transparent;
      outline   : none;
      padding   : 13px 0 13px 35px;
      font-size : 14px;
      box-sizing: border-box;
    }
  }

  .focus-box {
    .pre-icon {
      left       : 15px;
      margin-left: 0;
    }

    input.input::-webkit-input-placeholder {
      text-align: left;
    }
  }

  .input-suffix {
    width      : 50px;
    margin-left: 10px;
    text-align: center;

    .suffix-btn {
      outline   : none;
      border    : none;
      background: none;
      height    : 40px;
      font-size: 14px;
    }
  }

  .suffix-car {
    position   : relative;
    margin-left: 10px;

    .shopcard {
      width : 28px;
      height: 28px;
    }
  }
}


.m-search-row {
  .search-map {
    border-radius: 6px;
    margin       : 5px;
    height       : 32px;
    line-height  : 32px;
  
    .input {
      height : 32px;
      padding: 9px 0 9px 35px;
    }
  
  }
  
  .input-suffix-map {
    width: 70px;
    margin-left: 0;
    text-align: center;
    font-weight: bold;
  }
}