#grid-page-unit {
    width: 210mm;
    height: 297mm; 
    background: #ffffff !important;
    margin: 0 auto;
    padding: 5px; 
    box-shadow: 0 0 30px rgba(0,0,0,0.3);
    position: relative;
    box-sizing: border-box;
    overflow: hidden; 
    display: block;
    clear: both;
}

/* ২. ছবির গ্রিড রেন্ডার */
#photo-grid-render {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center; 
    align-content: flex-start; 
    width: 100%;
    height: 100%;
    box-sizing: border-box;
}

/* ৩. ছবির বর্ডার এবং ডিজাইন */
.grid-photo-item {
    background: #f8fafc;
    border: 1px solid #000000 !important; 
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
}

.grid-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* ৪. কাউন্টার বক্স */
.counter-box { 
    display: flex; 
    align-items: center; 
    background: #fff; 
    border: 1px solid #cbd5e1; 
    border-radius: 8px; 
    overflow: hidden; 
}

.counter-box button { 
    padding: 8px 15px; 
    background: #f1f5f9; 
    border: none; 
    cursor: pointer; 
    font-weight: 900; 
    font-size: 18px;
    transition: 0.2s;
}
.counter-box button:hover { background: #3b82f6; color: #fff; }
.counter-box input { 
    width: 45px; 
    text-align: center; 
    border: none; 
    font-weight: 800; 
    font-size: 16px;
    background: transparent; 
    outline: none; 
}

/* ৫. প্রিন্টিং ইন্সট্রাকশন বক্স (নতুন) */
.print-instruction-box {
    margin-top: 25px;
    padding: 15px 20px;
    background: #f0f9ff;
    border: 1px dashed #3b82f6;
    border-radius: 12px;
    text-align: left;
    color: #1e40af;
    line-height: 1.6;
}
.print-instruction-box strong {
    display: block;
    margin-bottom: 8px;
    font-size: 14px;
    font-weight: 800;
    text-transform: uppercase;
    color: #1d4ed8;
}
.print-instruction-box ul { margin: 0; padding-left: 20px; }
.print-instruction-box li { font-size: 13px; margin-bottom: 5px; font-weight: 500; }

/* --- ৬. প্রফেশনাল মোবাইল ফ্রেন্ডলি সিএসএস (১০০% পারফেক্ট ভিউ) --- */
@media (max-width: 850px) {
    /* মেইন কন্টেইনার ফিক্স */
    #grid-scroll-wrapper { 
        width: 100%;
        height: auto; 
        min-height: 450px;
        max-height: 550px; 
        overflow: hidden; /* স্ক্রিনের বাইরে যাওয়া বন্ধ করবে */
        background: #1e293b; 
        padding: 15px 0;
        display: flex;
        justify-content: center;
        align-items: flex-start;
        position: relative;
    }

    /* পেজ স্কেলিং লজিক (সব মোবাইল স্ক্রিনে ফিট করার জন্য) */
    #grid-page-unit { 
        /* চওড়া অরিজিনাল থাকবে কিন্তু ভিজ্যুয়ালি স্কেল হয়ে ফিট হবে */
        width: 210mm !important; 
        position: relative;
        transform: scale(0.42); /* স্ট্যান্ডার্ড মোবাইলের জন্য জুম আউট */
        transform-origin: top center;
        margin: 0 auto;
        /* স্কেলিং এর কারণে নিচে তৈরি হওয়া অতিরিক্ত ফাঁকা জায়গা কমানো */
        margin-bottom: -165mm; 
        box-shadow: 0 10px 50px rgba(0,0,0,0.6);
        z-index: 1;
    }

    /* টুলবার ডিজাইন (মোবাইলের জন্য প্রফেশনাল কার্ড লুক) */
    .sheet-pro-toolbar {
        padding: 10px;
        gap: 8px;
        border-radius: 0; /* মোবাইলে ফুল উইডথ ভালো দেখায় */
    }
    
    .toolbar-row {
        gap: 5px !important;
        justify-content: space-around; /* বাটনগুলো সুন্দর দূরত্বে থাকবে */
    }

    /* ছোট স্ক্রিনে ফন্ট এবং ইনপুট অ্যাডজাস্টমেন্ট */
    .toolbar-row select, 
    .toolbar-row button, 
    .counter-box {
        font-size: 11px !important;
        padding: 7px 5px !important;
        height: 35px !important;
    }
    
    .counter-box input {
        width: 25px !important;
        font-size: 12px !important;
    }

    /* অ্যাকশন বাটনগুলো অ্যাপের মত নিচে একটার পর একটা থাকবে */
    .actions {
        display: flex !important;
        flex-direction: column !important;
        gap: 10px;
        margin-top: 15px;
        padding: 0 10px;
    }
    
    .actions button {
        width: 100%;
        padding: 14px !important;
        font-size: 15px !important;
        border-radius: 12px !important;
    }

    /* ইনস্ট্রাকশন বক্স মোবাইলে ক্লিন রিডাবিলিটি */
    .print-instruction-box { 
        padding: 12px; 
        margin: 20px 10px; 
        border-radius: 12px;
        font-size: 11px;
    }
}

/* আইফোনের মতো খুব ছোট স্ক্রিনের জন্য বিশেষ ফিট (ম্যাক্স ৩৯০পিএক্স) */
@media (max-width: 390px) {
    #grid-page-unit { 
        transform: scale(0.36); /* আরও ছোট স্ক্রিনের জন্য বাড়তি স্কেলিং */
        margin-bottom: -180mm;
    }
}

/* --- ৭. প্রিন্ট সেটিংস (এটি অরিজিনাল সাইজ বজায় রাখবে) --- */
@media print {
    * { -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; }
    body { background: #fff !important; padding: 0 !important; margin: 0 !important; }
    
    /* প্রিন্টে স্কেলিং বন্ধ থাকবে */
    #grid-page-unit { 
        transform: none !important; 
        width: 210mm !important;
        height: 297mm !important;
        box-shadow: none !important; 
        margin: 0 !important; 
        padding: 5px !important; 
        display: block !important;
    }
    
    .grid-photo-item { border: 1px solid #000000 !important; }
    .print-instruction-box, .sheet-pro-toolbar, .actions, .close-crop-modal { display: none !important; }
}