/* Google ka Premium Font */
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600;700&display=swap');

body {
    font-family: 'Poppins', Arial, sans-serif;
    background: #f4f6f8;
    margin: 0;
    padding: 20px;
    color: #333;
}

/* Page aur Popup load hone ki Animation */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to { opacity: 1; transform: translateY(0); }
}

.container {
    max-width: 1150px; 
    margin: auto;
    background: #fff;
    padding: 25px;
    border-radius: 12px;
    /* Yahan border color change kiya hai */
    border-top: 6px solid #d81b60; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08);
    animation: fadeInUp 0.5s ease-out; 
}

/* Headings ka color Pink kiya */
h2, h3 { color: #d81b60; font-weight: 700; margin-bottom: 15px; }

/* ---------------------------------------------------- */
/* 🔥 3D BUTTONS AUR ANIMATIONS (Height Reduced) 🔥 */
/* ---------------------------------------------------- */
button, .btn, .topbtn {
    display: inline-block;
    padding: 10px 18px;
    border: none;
    border-radius: 8px;
    font-size: 15px;
    cursor: pointer;
    font-weight: 600;
    font-family: inherit;
    text-align: center;
    text-decoration: none;
    box-sizing: border-box;
    transition: all 0.2s ease;
    position: relative;
    box-shadow: 0 4px 0px rgba(0,0,0,0.3), 0 8px 12px rgba(0,0,0,0.1);
}

button:hover, .btn:hover, .topbtn:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 0px rgba(0,0,0,0.3), 0 12px 18px rgba(0,0,0,0.15);
    filter: brightness(1.1); 
}

button:active, .btn:active, .topbtn:active {
    transform: translateY(4px); 
    box-shadow: 0 0px 0px rgba(0,0,0,0.3), 0 2px 4px rgba(0,0,0,0.1);
}

/* Colors (Main buttons ka base color pink kiya) */
button, .btn-dark, .deliveredbtn, .print-btn, .view-btn {
    background: #d81b60; color: #fff;
    box-shadow: 0 4px 0px #a11448, 0 8px 12px rgba(0,0,0,0.1);
}
.btn-success, .add-btn, .wa-btn, .whatsapp-btn, .btn-delivered, .status-delivered {
    background: #28a745; color: #fff;
    box-shadow: 0 4px 0px #1a6b2c, 0 8px 12px rgba(0,0,0,0.1);
}
.btn-ready, .readybtn, .status-ready {
    background: #f0ad4e; color: #fff;
    box-shadow: 0 4px 0px #c2883a, 0 8px 12px rgba(0,0,0,0.1);
}
.remove-btn, .pendingbtn, .status-pending, .delete-order-btn, .close-btn-styled {
    background: #d9534f; color: #fff;
    box-shadow: 0 4px 0px #a83d3a, 0 8px 12px rgba(0,0,0,0.1);
}
.delete-customer-btn { background: #721c24; box-shadow: 0 4px 0px #4d1016; }
.edit-btn { background: #C25BB8; box-shadow: 0 4px 0px #97448f; color:#fff;}

/* ---------------------------------------------------- */
/* INPUTS AUR SELECT BOXES KI STYLING (Compact size) */
/* ---------------------------------------------------- */
input, select, textarea {
    width: 100%; 
    padding: 10px 12px;
    margin-bottom: 8px;
    border: 2px solid #e1e5eb; border-radius: 6px;
    box-sizing: border-box; font-size: 14px; font-family: inherit;
    transition: all 0.3s;
}
input:focus, select:focus, textarea:focus {
    border-color: #d81b60; outline: none; /* Focus outline pink ki gayi hai */
    box-shadow: 0 0 8px rgba(216, 27, 96, 0.2);
}
textarea { min-height: 60px; }

/* ---------------------------------------------------- */
/* COMMON CLASSES (Grids, Cards, Tables, Modals) */
/* ---------------------------------------------------- */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.topbar { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 20px; }
.controls { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin-bottom: 20px; }

.item-card { border: 1px solid #e1e5eb; background: #f8f9fa; padding: 15px; border-radius: 10px; margin-bottom: 15px; box-shadow: inset 0 2px 5px rgba(0,0,0,0.02); }
.item-head { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; }
.item-head select { margin-bottom: 0; }
.remove-btn { width: auto; padding: 10px 15px; }

/* Label aur naap box ko pink-theme mein kiya */
.measure-field label { display: block; font-weight: 600; color: #d81b60; margin-bottom: 4px; font-size: 13px; text-transform: uppercase; }
.measure-field input { font-size: 18px; font-weight: bold; padding: 8px; text-align: center; }

/* Tables Design */
table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 10px; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 10px rgba(0,0,0,0.05); }
th, td { padding: 12px 14px; text-align: left; background: #fff; border-bottom: 1px solid #eee; font-size: 14px;}
/* Table header pink kiya gaya hai */
th { background: #d81b60; color: #fff; font-weight: 600; text-transform: uppercase; font-size: 13px; letter-spacing: 0.5px; border-bottom: none; }
tr:last-child td { border-bottom: none; }
tr:hover td { background: #fce4ec; } /* Hover effect pink shade mein */
.item-pill { display: inline-block; background: #fce4ec; border: 1px solid #f8bbd0; padding: 5px 8px; border-radius: 6px; margin: 3px; font-weight: 500; font-size:12px; color: #d81b60; }

/* Popups & Modals */
.modal, .popup-overlay { display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.6); backdrop-filter: blur(4px); align-items: center; justify-content: center; padding: 20px; }
.modal-content, .popup-content { background: #fff; padding: 25px; border-radius: 12px; width: 100%; max-width: 900px; position: relative; border-top: 8px solid #d81b60; box-shadow: 0 15px 40px rgba(0,0,0,0.3); max-height: 85vh; overflow-y: auto; animation: fadeInUp 0.4s ease-out; }
.popup-content { max-width: 600px; text-align: center; border-top: 8px solid #28a745; }
.close-btn { position: absolute; right: 20px; top: 15px; font-size: 30px; cursor: pointer; font-weight: bold; color: #777; transition: 0.3s; }
.close-btn:hover { color: #d81b60; transform: scale(1.1); }

.action-buttons, .status-buttons, .popup-buttons { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 12px; margin-top: 20px; }

/* Helper classes */
.summary { background: #fce4ec; border-left: 4px solid #d81b60; padding: 12px 15px; border-radius: 6px; margin-bottom: 20px; font-weight: 600; color: #d81b60; font-size: 14px;}
.suggest-box { background: #fff; border: 1px solid #ccc; border-radius: 6px; margin-top: -8px; margin-bottom: 10px; display: none; max-height: 170px; overflow: auto; box-shadow: 0 4px 10px rgba(0,0,0,0.1); }
.suggest-item { padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #eee; font-weight:500; font-size: 14px; }
.suggest-item:hover { background: #fce4ec; color: #d81b60; }
.edit-note { display: none; background: #fff3cd; color: #856404; padding: 10px 15px; border-radius: 6px; margin-bottom: 15px; font-weight: bold; border-left: 4px solid #ffeeba; font-size: 14px;}
#msg { margin-top: 15px; padding: 12px; display: none; border-radius: 6px; font-weight: bold; font-size: 14px;}
.success { background: #d4edda; color: #155724; border-left: 4px solid #c3e6cb; }
.error { background: #f8d7da; color: #721c24; border-left: 4px solid #f5c6cb; }
.info { background: #d1ecf1; color: #0c5460; border-left: 4px solid #bee5eb; }
.image-preview { display: none; max-width: 160px; border: 2px solid #ddd; border-radius: 8px; margin-bottom: 10px; box-shadow: 0 4px 8px rgba(0,0,0,0.1); }

/* Lock Screen bhi ab Pink theme mein hai */
.lock-screen { position: fixed; inset: 0; background: #d81b60; display: flex; align-items: center; justify-content: center; z-index: 99999; padding: 20px; }
.lock-box { background: #fff; width: 100%; max-width: 360px; padding: 30px 20px; border-radius: 12px; text-align: center; box-shadow: 0 15px 30px rgba(0,0,0,0.4); animation: fadeInUp 0.5s ease; }

@media(max-width:768px){
    body { padding: 10px; }
    .container { padding: 15px; }
    table { font-size: 13px; }
    .item-head { flex-direction: column; }
    .remove-btn { width: 100%; }
    .modal-content, .popup-content { width: 100%; padding: 20px; }
}

@media print {
    body, html { height: auto !important; overflow: visible !important; margin: 0; padding: 0; background: #fff; }
    .container { display: none !important; }
    .modal { position: relative !important; display: block !important; overflow: visible !important; background: none !important; padding: 0 !important; }
    .modal-content { box-shadow: none !important; border: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; max-height: none !important; overflow: visible !important; animation: none !important; }
    .close-btn, .action-buttons, .status-buttons { display: none !important; }
    .print-naap-row { flex-wrap: wrap !important; overflow: visible !important; }
}