/* BASIC css start */
.as-container{
max-width:520px;
margin:80px auto;
padding:40px 28px;
background:#fff;
border-radius:12px;
box-shadow:0 10px 40px rgba(0,0,0,0.08);
text-align:center;
}

.as-container h2{
font-size:22px;
font-weight:600;
margin-bottom:20px;
padding-bottom:12px;
border-bottom:1px solid #e5e5e5;
width:80%;
margin-left:auto;
margin-right:auto;
}

.desc{
font-size:15px;
color:#222;
font-weight:500;
margin-bottom:35px;
}
.field{
  display:flex;
  flex-direction:column;
  gap:6px;
  align-items:flex-start;
}

.field label{
  font-size:14px;
  color:#222;
  font-weight:500;
}

.as-search{
display:flex;
flex-direction:column;
gap:14px;
align-items:stretch;

}

.as-search input{
  height:44px;
  padding:0 14px;
  border:1px solid #e5e5e5;
  font-size:14px;
  border-radius:6px;
  width:100%;
  background:#fff !important;
  box-sizing:border-box;
}

.as-search input::placeholder{
color:#bbb;
}

.as-search input:focus{
border-color:#999;
outline:none;
background:#fff !important;
}
.as-search input:hover{
  border-color:#bbb;
}
.as-search input:focus-visible{
  outline:none;
  background-color:#fff !important;
}

.as-search button{
  padding:10px;
  background:#eaeaea;
  color:#000;
  border:1px solid #bbb;
  font-size:15px;
  font-weight:600;
  border-radius:8px;
  cursor:pointer;
  transition:all 0.2s ease;
  height: 48px;
  
}


.as-search button:hover{
  background:#222;
  border-color:#222;
  color:#fff;
}

.as-search button:active{
  transform:scale(0.98);
}

.loading{
margin-top:30px;
display:flex;
flex-direction:column;
align-items:center;
gap:12px;
color:#666;
font-size:14px;
}

#resultArea{
margin-top:40px;
}

/* °á°ú Ä«µå */

.as-card{
  border:none;
  padding:18px 18px;
  margin-bottom:16px;
  text-align:left;
  border-radius:10px;
  background:#fff;
  box-shadow:0 8px 30px rgba(0,0,0,0.07);
  border:1px solid rgba(0,0,0,0.03);
  transition:0.2s;
}

.as-card:hover{
  transform:translateY(-4px);
  box-shadow:0 12px 40px rgba(0,0,0,0.1);
}

.as-card h3{
font-size:16px;
margin-bottom:10px;
}

.as-status{
  display:inline-block;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:600;
  margin-top:4px;
  background:#f1f5f9;
  color:#334155;
}

/* »óź° Ä÷¯ */
.status-receipt{
  background:#f1f5f9;
  color:#475569;
}

.status-check{
  background:#eef2ff;
  color:#4f46e5;
}
.status-repair{
  background:#e8f3ff;
  color:#4fb3d9;
}

.status-done{
  background:#eaf7ee;
  color:#1f9d55;
}

.status-delivery{
  background:#00A0E9 !important;
  color:#fff !important;
}

.no-result{
margin-top:30px;
color:#777;
}

/* Helinox ·Îµù ½ºÇÇ³Ê */

.loader{
width:28px;
height:28px;
border:2px solid #ddd;
border-top:2px solid #000;
border-radius:50%;
animation:spin 0.8s linear infinite;
}

@keyframes spin{
0%{
transform:rotate(0deg);
}
100%{
transform:rotate(360deg);
}
}

/* Progress UI */

.as-progress{
display:flex;
justify-content:space-between;
align-items:flex-start;
margin-top:18px;
position:relative;
}

.as-progress:before{
  content:"";
  position:absolute;
  top:10px;
  left:0;
  height:2px;
  width:100%;
  background:#e5e5e5;
  z-index:0;
}

/* ÁøÇàµÈ ºÎºÐ */
.as-progress:after{
  content:"";
  position:absolute;
  top:10px;
  left:0;
  height:2px;
  background:#4fb3d9;
  z-index:0;
  transition:0.3s;
  width:100%;
  transform-origin:left;
  transform:scaleX(var(--progress));
  display:none;
  
}

.step{
  position:relative;
  text-align:center;
  flex:1;
  z-index:2;
  top:5px;
}

/* ±âº» Á¡ */
.step span{
  display:block;
  width:10px;
  height:10px;
  border-radius:50%;
  background:#ddd;
  margin:0 auto;
  transition:0.2s;
  position:relative;
}

/* ±âº» ÅؽºÆ® */
.step p{
  font-size:11px;
  color:#bbb;
  margin-top:8px;
}

/* ¿Ï·á ´Ü°è */
.step.done span{
  background:#00A0E9;
  opacity:0.5;
}

.step.done p{
  color:#bbb;
  font-weight:500;
}
.step.active span{
  background:#00A0E9;
  transform:scale(1.4);
  box-shadow:0 0 0 3px rgba(0,160,233,0.2);
}

.step.active p{
  color:#111;
  font-weight:700;
}
/* ¹è¼Û Á¤º¸ ¹Ú½º */

.tracking-box{
margin-top:14px;
padding:14px;
background:#fafafa;
border-radius:6px;
border:1px solid #f1f1f1;
}

.tracking-title{
font-size:12px;
color:#aaa;
margin-bottom:6px;
}

.tracking-row{
display:flex;
justify-content:space-between;
align-items:center;
}

.tracking-number{
font-size:14px;
font-weight:700;
color:#444;
}

.tracking-btn{
font-size:13px;
color:#4fb3d9;
text-decoration:none;
font-weight:600;
}

.tracking-btn:hover{
text-decoration:underline;
}

.tracking-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tracking-company {
  font-size: 12px;
  color: #888;
  font-weight: 600;
  line-height: 1;
}

.tracking-number {
  font-size: 15px;
  font-weight: 700;
}

/* Ä«µå »ó´Ü Á¤¸® */

.as-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:8px;
}
.as-header h3 {
  font-size: 16px;
  font-weight: 600;
  color: #111;
  letter-spacing: 0.2px;
  word-break: keep-all;
}
.as-header h3::selection {
  color: inherit;
}

.status-badge{
  font-size:11px;
  padding:4px 10px;
  border-radius:999px;
  font-weight:600;
}

.status-repair{
  background:#e8f3ff;
  color:#0077cc;
}

.status-done{
  background:#eaf7ee;
  color:#1f9d55;
}

.status-delivery{
  background:#f3e8ff;
  color:#7c3aed;
}

/* Á¢¼öÀÏ */
.as-date{
  font-size:14px;
  color:#222;
  margin-bottom:12px;
  font-weight: 500;
}
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus{
  -webkit-box-shadow: 0 0 0 1000px #fff inset !important;
  -webkit-text-fill-color:#000 !important;
  transition: background-color 5000s ease-in-out 0s;
}
.pagination {
  display: flex;
  justify-content: center;
  margin-top: 20px;
  gap: 8px;
}

.page-btn {
  padding: 6px 12px;
  border: 1px solid #ddd;
  background: #fff;
  cursor: pointer;
}

.page-btn.active {
  background: #000;
  color: #fff;
}
.pagination {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-top: 20px;
}

.page-btn {
  min-width: 32px;
  height: 32px;
  border: none;
  background: none;
  cursor: pointer;
  font-size: 13px;
  color: #666;
  padding: 2px 4px; 
  border-radius: 6px;
}

.page-btn.active {
  background: rgba(0,0,0,0.06);
  border-radius: 6px;
  color: #000;
  font-weight: 600;
}

.page-btn:hover {
  background: #000;
  color: #fff;
}

.page-btn.active:hover {
  background: rgba(0,0,0,0.06);
  color: #000;
}

.page-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}


/* ¸ðµç »óÅ ȸ»ö ÅëÀÏ */
.status-receipt,
.status-check,
.status-repair,
.status-done{
  background:#f3f4f6 !important;
  color:#6b7280 !important;
}

/* ¹ß¼Û ¿Ï·á¸¸ °­Á¶ */
.status-delivery{
  background:#e6f6fb !important;
  color:#00A0E9 !important;
}
.sms-row {
  display: flex;
  gap: 10px;
  align-items: center;
}


.sms-row button {
  width: 120px;
  height: 44px;
  flex-shrink: 0;
}

#sendSmsBtn,
#verifySmsBtn {
  height: 44px;
  min-width: 120px;
  padding: 0 16px;

  border: 1px solid #bbb;
  background: #eaeaea;
  color: #000;

  border-radius: 8px;

  font-size: 13px;
  font-weight: 600;

  cursor: pointer;
  transition: all 0.2s ease;
}

#sendSmsBtn:hover,
#verifySmsBtn:hover {
  background:#111 !important;
  border-color:#111 !important;
  color:#fff !important;
}
.sms-row {
  display:flex;
  gap:10px;
  align-items:center;
}

.sms-row input{
    flex:1;
    width:auto;
    min-width:0;
}

.sms-row button {
  flex: 0 0 120px;
  height:44px;
}

@media (max-width:768px){

  .as-container{
    margin:40px 16px;
    padding:32px 20px;
    border-radius:10px;
  }

  .as-container h2{
    font-size:1.8rem;
    width:100%;
    margin-bottom:18px;
    padding-bottom:10px;
  }

  .desc{
    font-size:0.95rem;
    line-height:1.6;
    margin-bottom:28px;
    word-break:keep-all;
  }

  .field label{
    font-size:13px;
  }

  .as-search{
    gap:12px;
  }

  .as-search input{
    height:40px;
    font-size:14px;
    padding:0 12px;
  }

  .as-search button{
    height:44px;
    font-size:13px;
    padding:0 14px;

    display:flex;
    align-items:center;
    justify-content:center;
  }

  #searchBtn{
    height:44px;
    font-size:15px;
  }

.sms-row{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:8px;
    width:100%;
}

.sms-row input{
    width:calc(100% - 100px) !important;
    flex:72% !important;
}

.sms-row button{
    flex:0 0 78px !important;
    width:78px !important;
    font-size:12px !important;
}
.arrow-btn{
  font-size:12px;
  font-family:inherit;
  line-height:1;
}


}
/* BASIC css end */