/* =================================== */
/* Professional Design V13 - FINAL AUTO-ADJUSTING LAYOUT */
/* =================================== */
:root{--bg-color:#f4f7f9;--card-bg-color:#ffffff;--header-bg:rgba(255,255,255,.9);--primary-color:#3498db;--success-color:#2ecc71;--success-hover-color:#27ae60;--text-dark:#2c3e50;--text-light:#95a5a6;--border-color:#ecf0f1;}
html,body{margin:0;padding:0;background-color:var(--bg-color);font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;color:var(--text-dark);}
.rahi-sticky-header{position:sticky;top:0;z-index:1000;background-color:var(--header-bg);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);padding:1rem 1.5rem;border-bottom:1px solid var(--border-color);}
.rahi-sticky-content{max-width:95%;margin:0 auto;}
.rahi-editor-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;}
.rahi-editor-header h1{margin:0;font-size:1.5rem;font-weight:600;}
a.logout-link{text-decoration:none;background-color:transparent;color:var(--text-light);padding:8px 12px;border-radius:6px;font-weight:500;transition:all .2s ease-in-out;}
a.logout-link:hover{background-color:#e9ecef;color:var(--text-dark);}
#rahi-product-search{width:100%;padding:.75rem 1rem;font-size:1rem;box-sizing:border-box;border:1px solid #dcdfe4;border-radius:8px;transition:border-color .2s,box-shadow .2s;}
#rahi-product-search:focus{outline:0;border-color:var(--primary-color);box-shadow:0 0 0 3px rgba(52,152,219,.25);}

/* --- NAYA AUTO-ADJUSTING GRID SYSTEM --- */
#rahi-product-list {
    display: grid;
    /* Yeh line hi saara jaadu karegi */
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 1.5rem;
    padding: 1.5rem;
    max-width: 95%;
    margin: 0 auto;
}

.rahi-product-card{background-color:var(--card-bg-color);border-radius:12px;display:flex;flex-direction:column;box-shadow:0 5px 20px rgba(44,62,80,.08);transition:transform .2s ease-out,box-shadow .2s ease-out;}
.rahi-product-card:hover{transform:translateY(-5px);}
.rahi-card-top{text-align:center;padding:1.5rem;border-bottom:1px solid var(--border-color);}
.rahi-product-image img{width:120px;height:120px;object-fit:contain;margin-bottom:1rem;border-radius:8px;}
.rahi-product-name{font-size:1.1rem;font-weight:600;margin:0 0 .5rem 0;color:var(--text-dark);}
.rahi-product-meta{font-size:.85rem;color:var(--text-light);display:flex;flex-direction:column;gap:4px;}
.rahi-product-meta span{line-height:1.4;}
.rahi-card-bottom{padding:.75rem;background-color:#fdfdfd;border-bottom-left-radius:12px;border-bottom-right-radius:12px; display: flex; flex-direction: column; gap: 0.5rem;}
.rahi-price-row{display:flex;justify-content:space-between;align-items:center;gap:.75rem;padding:.5rem 0;}
.rahi-price-row:not(:last-child){border-bottom:1px solid var(--border-color);}
.rahi-price-meta{display:flex;flex-direction:column;line-height:1.4; flex-basis: 35%;} /* Space diya price info ke liye */
.rahi-price-attribute{font-size:1rem;font-weight:500;}
.rahi-current-price{font-size:.85rem;color:var(--text-light);}.rahi-current-price .amount{font-weight:normal;color:var(--text-light);}

/* --- NAYE ACTION STYLES (Sale Price ke liye) --- */
.rahi-product-actions{
    display:flex;
    align-items:center;
    gap:.5rem;
    justify-content:flex-end;
    flex-grow: 1; /* Bacha hua space le lega */
}
.rahi-new-price, .rahi-new-sale-price{ /* Dono input fields */
    width: 70px; /* Width thoda kam kiya taaki teen element fit ho sakein */
    padding:8px 10px;
    border:1px solid #dcdfe4;
    border-radius:6px;
    font-size:.9rem;
    text-align:left;
    -moz-appearance:textfield;
    box-sizing:border-box;
}
.rahi-new-price::-webkit-outer-spin-button,
.rahi-new-price::-webkit-inner-spin-button,
.rahi-new-sale-price::-webkit-outer-spin-button,
.rahi-new-sale-price::-webkit-inner-spin-button{
    -webkit-appearance:none;
    margin:0;
}
.rahi-save-price{background-color:var(--success-color)!important;border:none!important;color:#fff!important;font-weight:500!important;border-radius:6px!important;transition:all .2s!important;min-width:70px;text-align:center;padding:8px 12px !important;height:auto!important;line-height:1.4!important;}
.rahi-save-price:hover{background-color:var(--success-hover-color)!important;}
.rahi-save-price.is-loading .spinner{float:none!important;display:inline-block!important;visibility:visible!important;}
.rahi-save-price.is-success{background-color:var(--primary-color)!important;}

/* Baaki responsive code ki ab zaroorat nahi, kyunki grid apne aap adjust hoga. Sirf bahut bade screen ke liye max-width set karenge. */
@media screen and (min-width:1800px){
    .rahi-sticky-content, #rahi-product-list{
        max-width: 1700px;
    }
}
@media screen and (max-width: 480px) {
    /* Bahut chote screen par inputs stack kar denge */
    .rahi-price-row {
        flex-direction: column;
        align-items: flex-start;
    }
    .rahi-product-actions {
        width: 100%;
        justify-content: space-between;
    }
    .rahi-new-price, .rahi-new-sale-price {
        width: 40%;
    }
    .rahi-save-price {
        min-width: 60px;
    }
}