.form-select.bg-light.selected {background-color: white !important;}

.form-control {border-color: var(--phoenix-gray-200);}


/* form intput validation 설정 */
.invalid-tooltip {left: 50%; transform: translateX(-50%);}
.was-validated .btn-check:invalid + label.btn-radio {border-color: var(--phoenix-form-invalid-border-color) !important;}
.was-validated .btn-check:valid + label.btn-radio {border-color: var(--phoenix-form-valid-border-color) !important;}
.btn-check:checked + label.btn-radio {background: var(--phoenix-primary-bg-subtle) !important; color: var(--phoenix-primary) !important;}

/* //상품정보 - 배송대행, 구매대행 */
.app-item .form-control[type=file] {line-height: 46px;}
.app-item {grid-template-columns: 1fr 1fr 105px 1fr 1fr 1fr 1fr 1fr 1fr}
.app-item.delivery .grid-row1, .app-item.lcl .grid-row1 {grid-row: span 3; grid-column: span 2;}
.app-item.delivery :is(.grid-row2, .grid-row12, .grid-row13) {grid-column: span 1;}
.app-item.delivery :is(.grid-row3, .grid-row4, .grid-row5, .grid-row6, .grid-row8, .grid-row9, .grid-row11) {grid-column: span 2;}
.app-item.delivery :is(.grid-row7, .grid-row10, .grid-row15) {grid-column: span 3;}
.app-item.delivery .grid-row14 {grid-column: span 4;}

/* 상품정보 - lcl */
.app-item.lcl :is(.grid-row2, .grid-row5, .grid-row8){
    grid-column: span 3;
}
.app-item.lcl :is(.grid-row3,  .grid-row4, .grid-row6, .grid-row7, .grid-row9, .grid-row10) {
    grid-column: span 2;
}

/* 모달 */
.modal-content {max-width: calc(100vw - 1rem);}
.modal[aria-labelledby="hsCodeModalLabel"] .table { border-top: 1px solid var(--phoenix-border-color-translucent) !important;}
.modal[aria-labelledby="hsCodeModalLabel"] .table tbody tr td:not(:last-child) {padding: 0.25rem !important}
.modal[aria-labelledby="hsCodeModalLabel"] .table tbody tr td:last-child button {font-size: 0.75rem !important; padding: 0.4rem; font-weight: bold; width: max-content}
.modal[aria-labelledby="hsCodeModalLabel"] .table tbody tr td:first-child, .modal[aria-labelledby="hsCodeModalLabel"] .table thead tr th:first-child{
    padding-left: 0.25rem !important;
    width: 45px;
}

.form-group:hover .btn-secondary-light {background: var(--phoenix-primary-bg-subtle);}

.was-validated .form-check-input:invalid ~ div label.form-check-label {color: var(--phoenix-form-invalid-color);}
.was-validated .form-check-input:valid~ div label.form-check-label {color: var(--phoenix-form-valid-color);}

@media (max-width: 992px) {
    .app-item {grid-template-columns: 1fr 1fr 105px 1fr 1fr 1fr 1fr; }
    .app-item.delivery :is(.grid-row5) {grid-column: span 3;}
    .app-item.delivery :is(.grid-row10) {grid-column: span 2;}
    .app-item.delivery :is(.grid-row11) {grid-column: span 1;}

    .app-item.lcl :is(.grid-row7, .grid-row8) {grid-column: span 3;}
    .app-item.lcl :is(.grid-row10) {
        grid-column: span 2;
    }
}

@media (max-width: 768px){
    .form-control {font-size: 0.9rem;}
    .app-item .form-control[type=file] {line-height: 40px;}
    .app-item {grid-template-columns: 1fr 1fr 95px 1fr 1fr 1fr 1fr; }

    .app-item.lcl {grid-template-columns: 1fr 1fr 1fr 1fr }
    .app-item.lcl .grid-row1 {grid-row: span 4;}
    .app-item.lcl :is(.grid-row2, .grid-row5, .grid-row7) {
        grid-column: span 2;
    }
    .app-item.lcl :is(.grid-row8){
        grid-column: span 4;
    }

}

@media (max-width: 576px){
    .app-item .form-control[type=file] {line-height: 37px;}
    .app-item {grid-template-columns: repeat(6, 1fr);}
    .app-item > div { grid-column: span 2; }
    .app-item.delivery :is(.grid-row1, .grid-row2, .grid-row3, .grid-row4, .grid-row5, .grid-row6, .grid-row7, .grid-row8, .grid-row9, .grid-row10) {grid-column: span 3;}
    .app-item.delivery :is(.grid-row11, .grid-row12, .grid-row13) {grid-column: span 2;}
    .app-item.delivery :is(.grid-row14, .grid-row15) {grid-column: span 6;}

    .app-item.lcl :is(.grid-row1) {
        grid-row: span 1; min-height: 200px;
    }
    .app-item.lcl :is(.grid-row1, .grid-row2, .grid-row3, .grid-row4, .grid-row5, .grid-row8) {
        grid-column: span 6;
    }
    .app-item.lcl :is(.grid-row6,.grid-row7, .grid-row9, .grid-row10) {
        grid-column: span 3;
    }
}