/* ===========================================================
  콘텐츠 영역 style css = account-orders
=========================================================== */
/* ===== 검색필터바 ===== */
.order-search-pc{background: #f4f4f4; padding: 0.75rem 0.9375rem; border-radius: 8px;}
.search-filter-form{white-space: nowrap;}
.btn-group-period>.btn-period{
    padding: 0.375rem 0.75rem; font-size: 0.9375rem; height: 2.625rem; background: #fff;
    border: 1px solid var(--text-3) !important; border-radius: 5px;
}
.btn-period.active{background: #222; color: #fff; font-weight: 600; border: none !important;}
.icon-search{color: #bebebe;}

/* 일부 input 커스텀 */
.input-date{
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 5px !important; 
    width: 100% !important; min-width: 7.5rem; padding: 0.375rem 0.75rem; 
    flex: 1; height: 2.625rem !important; font-size: 0.875rem; 
}
.date-picker-wrap{flex-grow: 1;}
input[type="date"].input-date, input[type="text"].form-control{border-radius: 5px; height: 2.625rem !important;}
.btn-search-submit{
    min-width: 3.75rem; height: 2.625rem; padding: 0 0.9375rem;
    background: #222; color: #fff; border: none;
    border-radius: 5px; font-weight: 600;
}

.search-filter-form{display: flex; flex-wrap: nowrap;}
.pc-s-submit{height: 2.625rem !important;}

/* ===== 상품 리스트 ===== */
.option-resultBox{padding: 0.5rem 0.625rem !important;}
.order-result-item{background: #fff;}
.order-info-top .order-date{font-size: 1rem; font-weight: 600;}
.order-number{font-size: 0.9375rem; font-weight: normal;}

.product-img>a{width: 6.5625rem; height: 6.5625rem; border-radius: 6px;}

.status-badge{font-size: 0.875rem; font-weight: 700; margin-bottom: 0.25rem;}
.product-name{
    font-size: 0.9375rem; line-height: 1.45;
    overflow: hidden; text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

/* 옵션값 */
.option-result-row{margin-top: 1.25rem;}
.option-resultBox{padding: 0.75rem;}

.option-resultBox{width: 100%; padding: 0.625rem 0.75rem; }
.option-title{word-break: keep-all; display: inline;}
.pipe{margin: 0 0.125rem;}
.option-number{white-space: nowrap;}
.lh-base{line-height: 1.5 !important;}

.m-product-info-btnGroup{display: none;}
.product-info-btnGroup{min-width: 5.9375rem;}
.btn-order-sub{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 500;
    background-color: #fff; border: 1px solid #ddd;
    border-radius: 4px; text-align: center; transition: all 0.2s;
}
.btn-order-sub:hover{background-color: #f8f8f8;}
.btn-order-main{
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.375rem 0.75rem; font-size: 0.875rem; font-weight: 600;
    color: #fff; background-color: #D41367; border: 1px solid #D41367;
    border-radius: 4px; text-align: center; transition: opacity 0.2s;
}
.btn-order-main:hover{color: #fff; opacity: 0.9;}

/* ===========================================================
  모달창 css stlye
=========================================================== */
/* ===== 검색 필터 모달창(모바일용) ===== */
.main-header.fixed-top{z-index: 1060 !important; }
.modal-search-top{top: 3.8125rem !important; padding-right: 0 !important;}
.modal-search-top .modal-dialog{
    margin: 0 !important; width: 100% !important; max-width: 100% !important;
    transform: translateY(-100%); transition: transform 0.3s ease-out;
}
.modal-search-top.show .modal-dialog{transform: translateY(0);}
.modal-search-top .modal-content{
    width: 100% !important;
    border-radius: 0 0 1.25rem 1.25rem; border: none;
    box-shadow: 0 0.625rem 0.9375rem rgba(0,0,0,0.1);
}
.modal-search-top.show ~ .modal-backdrop{top: 61px !important; height: calc(100vh - 61px);}
.m-month-btn, .m-date-btn, .search-input-group-m{margin-bottom: 0.625rem;}
.m-date-btn .input-date-m{
    flex: 1; min-width: 0; height: 2.625rem; 
    font-size: 0.875rem; padding: 0 0.5rem;    
}
.search-filter-form-m .btn-period{height: 2.625rem; font-size: 0.875rem; border: 1px solid #eee !important; border-radius: 5px;}
.search-filter-form-m .btn-period.active{background: var(--main); color: #fff; border-color: var(--main) !important;}
.btn-search-submit{
    height: 3rem; font-size: 1rem;
    background: var(--main); color: #fff; 
    border: none; border-radius: 6px; font-weight: 600;
}


/* ===== 문의 모달창 ===== */
.insio-bg.btn-fill{border: none !important; color: #fff;}
.table-seller-info table{
    width: 100%; margin-bottom: 35px;
    border-top: 1px solid #eee; table-layout: fixed;
}
.table-seller-info table tr{border-bottom: 1px solid #eee;}
.table-seller-info table th{
    width: 5.625rem; background-color: #f9f9f9; color: #666;
    font-weight: 500; font-size: 0.875rem;
    padding: 0.75rem 0.9375rem; vertical-align: middle; border: none;
}
.table-seller-info table td{
    font-size: 0.875rem; padding: 0.75rem 0.9375rem;
    vertical-align: middle; border: none;
    word-break: break-all;
}

#contactFormSection textarea{
    border: 1px solid #e5e5e5; border-radius: 6px;
    padding: 0.75rem; font-size: 0.875rem;
    resize: none;
}

/* ===== 반품/교환 모달 ===== */
.custom-radio {
    position: relative; 
    display: flex; align-items: center;
    min-height: auto; border: 1px solid #eee; border-radius: 6px;
    cursor: pointer; overflow: hidden; transition: all 0.2s;
}
.reason-list{width: 100%; overflow: hidden;}
.reason-list>.form-check {padding-left: 0 !important;}
.custom-radio .form-check-input{margin: 0 0 0 0.9375rem; flex-shrink: 0; cursor: pointer;}
.custom-radio .form-check-label{
    flex-grow: 1; padding: 0.75rem 0.9375rem 0.75rem 0.625rem; font-size: 0.9375rem;
    cursor: pointer; display: block; margin: 0;
}
.custom-radio .form-check-input:checked{
    background-color: #000 !important; border-color: #000 !important;
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='2' fill='%23fff'/%3e%3c/svg%3e");
}
.custom-radio .form-check-input:focus{box-shadow: none; border-color: #000;}

/* ===== 구매확정 모달 ===== */
.confirm-icon{margin: 1.5625rem 0;}
.confirm-icon svg{
    width: 3.875rem; height: 3.875rem;
    display: flex; align-items: center; justify-content: center;
    margin: 0 auto; font-size: 1.375rem;
}
.confirm-icon svg path, .confirm-icon svg circle{fill: #fccddf;}
.confirm-body>h5{font-size: 1.625rem !important;}


/* ===========================================================
  추가 반응형
=========================================================== */
@media (max-width: 74.99875rem) and (min-width: 62rem){ /* (max-width: 1199.98px) and (min-width: 992px) */
    .search-filter-form{flex-wrap: wrap; gap: 0.75rem !important;}
    .box-left{ 
        width: 100%; gap: 0.9375rem !important; 
        display: flex; justify-content: flex-start; 
    }
    .btn-group-period{flex-shrink: 0;}
    .date-picker-wrap{flex-grow: 1; display: flex; align-items: center;}
    .date-picker-wrap .input-date{flex: 1; width: auto !important; min-width: 0;}
    .box-right{width: 100%;}
    .box-right input{flex: 1;}
    .btn-search-submit{min-width: 4.6875rem !important;}
}

@media (max-width: 71.8125rem){ /* (max-width: 1149px) */
    .product-img>a{width: 6.25rem; height: 6.25rem; border-radius: 6px;}
    .product-info-box.gap-100{gap: 3.75rem !important;}
}

@media (max-width: 61.99875rem){ /* (max-width: 991.98px) */
    .box-left{ 
        width: 100%; gap: 0.625rem !important; 
        display: flex; justify-content: flex-start; flex-wrap: nowrap !important;
    }
    .btn-group-period{flex-shrink: 0;}
    .date-picker-wrap{flex-grow: 1; display: flex; align-items: center;}
    .date-picker-wrap .input-date{flex: 1; width: 8.625rem !important; min-width: 0;}
    .box-right{width: 100%;}
    .box-right input{flex: 1;}
    .btn-search-submit{min-width: 4.6875rem !important;}

    .product-img>a{width: 5.9375rem; height: 5.9375rem; border-radius: 6px;}
    .product-info-box.gap-100{gap: 3.125rem !important;}
    .product-info-btnGroup{min-width: 5.3125rem;}
}

/* ==== special section ==== */
@media (max-width: 53.12375rem) and (min-width: 48rem){ /* (max-width: 849.98px) and (min-width: 768px) */
    /* btnGroup 제어 */ 
    .product-info-btnGroup{display: none !important;}
    .m-product-info-btnGroup{display: flex !important; gap: 0.375rem !important; margin-top: 1.3rem !important;}
    .m-product-info-btnGroup>a{height: 2.5rem;}
}

@media (max-width: 47.99875rem){ /* (max-width: 767.98px) */
    .product-img>a{width: 5.3125rem; height: 5.3125rem;}
    .status-badge{font-size: 1rem; margin-bottom: 0.25rem;}
    .product-name{font-size: 0.875rem; line-height: 1.4;}
    .option-result-row{margin-top: 0.9375rem;}
    .product-price{font-size: 0.875rem !important;}

    /* btnGroup 제어 */ 
    .product-info-btnGroup{display: none !important;}
    .m-product-info-btnGroup{display: flex !important; gap: 0.5rem !important;}
    .m-product-info-btnGroup>a{height: 2.5rem;}
}

@media (max-width: 37.4988rem){
    /* ===========================================================
        모달창 css stlye
    =========================================================== */
    .modal-header>.icon-close{display: block !important;}
}

@media (max-width: 35.99875rem){ /* (max-width: 575.98px) */
    .product-group{gap: 0.875rem !important;}
    .product-img>a{width: 5rem; height: 5rem;}
    .status-badge{font-size: 1rem; margin-bottom: 0.125rem;}
    .option-result-row{margin-top: 0.75rem;}
    .option-resultBox .lh-base {
        display: flex !important;
        width: 100% !important; min-width: 0 !important;
        flex-wrap: nowrap !important; align-items: center !important;
    }
    .option-resultBox .option-title{
        width: 0 !important; font-size: 0.84375rem !important; flex-grow: 1 !important;
        display: inline-block !important; flex-shrink: 1 !important;   
        min-width: 0 !important; max-width: fit-content !important; 
        white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important;
    }

    /* ===== 구매확정 모달 ===== */
    .confirm-icon{margin: 1.25rem 0 1.25rem 0;}
    .confirm-icon svg{
        width: 3.75rem; height: 3.75rem;
        margin: 0 auto; font-size: 1.25rem;
    }
    .confirm-icon svg path, .confirm-icon svg circle{fill: #fccddf;}
    .confirm-body>h5{font-size: 1.125rem !important; margin-bottom: 0.4rem !important;}
}

/* ==== special section ==== */
@media (max-width: 419.98px){
    .my-final-amount{flex-direction: column !important; align-items: stretch !important;}
    .product-price{font-size: 1rem !important;}
    .order-number{font-size: 0.875rem;}
    .m-product-info-btnGroup{gap: 0.4375rem !important;}

    .m-product-info-btnGroup{ display: flex !important; flex-wrap: wrap !important; gap: 0.25rem 0.375rem !important;}
    .m-product-info-btnGroup a:nth-child(1), .m-product-info-btnGroup a:nth-child(2){flex: 0 0 calc(50% - 4px) !important; width: calc(50% - 4px) !important; margin: 0 !important;}
    .m-product-info-btnGroup a:nth-child(3){flex: 0 0 100% !important; width: 100% !important; margin-top: 0.25rem !important;}

    /* ===========================================================
        모달창 css stlye
    =========================================================== */
    .modal-btn>button{font-size: 0.9375rem; padding-left: 0 !important; padding-right: 0 !important;}
}

/* ===== order group accordion restore ===== */
.order-group-card{border-color:#e9e9e9!important;background:#fff;}
.order-group-preview{background:#fff;}
.order-group-preview-top{margin-bottom:.25rem;}
.order-group-preview-date{font-size:1rem;font-weight:600;color:#111;}
.order-group-preview-link{display:inline-flex;align-items:center;gap:.25rem;color:#666;text-decoration:none;font-weight:500;}
.order-group-preview-link:hover{color:#111;}
.order-group-preview-thumb .img-box{width:6.5625rem;height:6.5625rem;border-radius:6px;}
.order-group-preview-title{font-size:.9375rem;font-weight:600;line-height:1.4;color:#111;}
.order-group-count-accent{display:inline-block;margin-left:.375rem;color:var(--main);font-weight:700;}
.order-group-preview-amount{margin-top:.375rem;font-size:1.125rem;font-weight:700;color:#111;}
.order-group-preview-option{margin-top:.25rem;font-size:.875rem;}
.order-group-accordion-wrap{padding-top:.25rem;}
.order-group-toggle-btn{width:100%;border:1px solid #e5e5e5;background:#fafafa;border-radius:8px;min-height:2.875rem;padding:.625rem .875rem;display:flex;align-items:center;justify-content:space-between;gap:.5rem;color:#222;font-size:.875rem;font-weight:600;}
.order-group-toggle-btn:hover{background:#f5f5f5;}
.order-group-arrow{font-size:.75rem;transition:transform .24s ease;}
.order-group-body{max-height:0;opacity:0;overflow:hidden;transition:max-height .28s ease,opacity .2s ease;}
.order-group-row{background:#fff;}
.order-group-row.border-top{border-top:1px solid #efefef!important;}
.order-group-accordion.is-open .order-group-arrow{transform:rotate(180deg);}

@media (max-width:71.8125rem){
  .order-group-preview-thumb .img-box{width:6.25rem;height:6.25rem;}
}
@media (max-width:61.99875rem){
  .order-group-preview-thumb .img-box{width:5.9375rem;height:5.9375rem;}
}
@media (max-width:47.99875rem){
  .order-group-preview-content{gap:.75rem!important;}
  .order-group-preview-thumb .img-box{width:5.3125rem;height:5.3125rem;}
  .order-group-preview-amount{font-size:1rem;}
}
@media (max-width:35.99875rem){
  .order-group-preview-thumb .img-box{width:5rem;height:5rem;}
  .order-group-preview-title{font-size:.875rem;}
  .order-group-toggle-btn{padding:.5625rem .75rem;}
}