/*===============================
Search box css
==============================*/
/* ===============================
   PAYMENT SEARCH BAR
================================ */

#paymentScreen .customer-search{
    position: relative;
    width: 96%;
    margin: 15px auto 20px;
}

#paymentScreen .customer-search input{
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ccc;
    border-radius: 25px;
    border-bottom: 3px solid #1565c0;
    box-sizing: border-box;
    outline: none;
    background: #fff;
    font-size: 15px;
}

/* Focus Effect */
#paymentScreen .customer-search input:focus{
    border-color: #1565c0;
    box-shadow: 0 0 0 3px rgba(21,101,192,0.12);
}

/* Search Icon Inside Field */
#paymentScreen .customer-search .search-icon{
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #1565c0;
    font-size: 20px;
    pointer-events: none;
    line-height: 1;
}
/* =========================
   PAYMENT FORM PROFESSIONAL UI
========================= */

#addPaymentScreen select{
    width: 100%;
    padding: 14px 14px;
    border: 1px solid #d6dbe6;
    border-radius: 12px;
    font-size: 15px;
    background: #fff;
    outline: none;
    transition: 0.25s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);

    /* 🔥 FIX ADDED */
    height: 50px;
    appearance: none;
    padding-right: 35px;
}

/* FIX LABEL OVERLAP */
#addPaymentScreen .form-group label{
    position: absolute;
    top: -10px;
    left: 12px;
    background: #fff;
    padding: 0 6px;
    font-size: 12px;
    z-index: 10;
  color: #666;

}

/* INPUT STYLE */
#addPaymentScreen input,
#addPaymentScreen select{
    width: 100%;
    padding: 14px 14px;
    border: 1px solid #d6dbe6;
    border-radius: 12px;
    font-size: 15px;
    background: #fff;
    outline: none;
    transition: 0.25s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.03);
}

/* FOCUS EFFECT */
#addPaymentScreen input:focus,
#addPaymentScreen select:focus{
    border-color: #4a90e2;
    box-shadow: 0 0 0 4px rgba(74,144,226,0.12);
}

/* LABEL STYLE */
#addPaymentScreen label{
    position: absolute;
    top: -9px;
    left: 12px;
    background: #fff;
    padding: 0 6px;
    font-size: 12px;
    color: #666;
}

/* ACTIVE LABEL */
#addPaymentScreen .active-label{
    color: #4a90e2;
    font-weight: 500;
}

/* BUTTON ROW */
#addPaymentScreen .form-btn-row{
    display: flex;
    gap: 12px;
    margin-top: 25px;
}

/* SAVE BUTTON */
#addPaymentScreen .btn-save{
    flex: 1;
    padding: 14px;
    background: linear-gradient(135deg,#4a90e2,#357ABD);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: 0.2s;
}

#addPaymentScreen .btn-save:hover{
    transform: translateY(-2px);
    box-shadow: 0 8px 18px rgba(53,122,189,0.25);
}/* ===============================
   PAYMENT SEARCH BAR
================================ */

#paymentScreen .customer-search {
    position: relative;
    width: 96%;
    margin: 15px auto 20px auto;
}

#paymentScreen .customer-search input {
    width: 100%;
    padding: 10px 40px 10px 15px;
    border: 1px solid #ccc;
    border-radius: 25px;
    border-bottom: 3px solid #1565c0;
    box-sizing: border-box;
    outline: none;
    background: #fff;
    font-size: 15px;
}

/* Focus Effect */
#paymentScreen .customer-search input:focus {
    border-color: #1565c0;
    box-shadow: 0 0 0 3px rgba(21, 101, 192, 0.12);
}

/* Search Icon Inside Field */
#paymentScreen .customer-search .search-icon {
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    color: #1565c0;
    font-size: 20px;
    pointer-events: none;
    line-height: 1;
}

/* READONLY INPUT (RECEIVABLE / BALANCE) */
#addPaymentScreen input[readonly]{
    background: #f0f3f8;
    font-weight: 600;
    color: #333;
}

/* CARD STYLE FEEL */
#addPaymentScreen{
    max-width: 500px;
    margin: auto;
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/*list show css*/
/* =========================
   PAYMENT CONTENT
========================= */

.payment-content{

    flex:1;

    min-width:0;

    display:flex;

    flex-direction:column;

    gap:10px;

    overflow:hidden;

}

/* =========================
   CUSTOMER NAME
========================= */

.customer-top{

    width:100%;

}

.customer-top h3{

    margin:0;

    width:100%;

    font-size:15px;

    font-weight:600;

    line-height:1.35;

    color:#222;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* =========================
   PAYMENT SUMMARY
========================= */

.payment-summary{

    display:flex;

    align-items:flex-start;

    gap:10px;

    width:100%;

}

.summary-box{

    flex:1;

    min-width:0;

}

.summary-title{

    display:block;

    margin-bottom:5px;

    text-align:center;

    font-size:11px;

    font-weight:600;

    color:#777;

    text-transform:uppercase;

    letter-spacing:.4px;

}

/* =========================
   TAGS
========================= */

.loan-badge,
.remaining-badge{

    display:flex;

    align-items:center;

    justify-content:center;

    width:100%;

    min-height:34px;

    padding:6px 8px;

    border-radius:8px;

    box-sizing:border-box;

    color:#fff;

    font-size:13px;

    font-weight:700;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

.loan-badge{

    background:#16a34a;

}

.remaining-badge{

    background:#dc2626;

}

/* =========================
   FOOTER
========================= */

.customer-bottom{

    display:flex;

    align-items:center;

    justify-content:space-between;

    gap:12px;

    margin-top:2px;

}

.payment-date{

    flex:1;

    min-width:0;

    font-size:12px;

    color:#888;

    white-space:nowrap;

    overflow:hidden;

    text-overflow:ellipsis;

}

/* =========================
   ACTIONS
========================= */

.payment-actions{

    display:flex;

    align-items:center;

    justify-content:flex-end;

    flex-shrink:0;

    gap:10px;

}

.payment-icon{

    width:34px;

    height:34px;

    display:flex;

    align-items:center;

    justify-content:center;

    border-radius:50%;

    cursor:pointer;

    font-size:20px;

    color:#2563eb;

    transition:.2s;

}

.payment-icon:hover{

    background:#eef4ff;

}

.payment-icon.delete{

    color:#dc2626;

}

.payment-icon.delete:hover{

    background:#ffecec;

}