/* ===========================================
   MB BULLION CALCULATOR V2
=========================================== */

*{
margin:0;
padding:0;
box-sizing:border-box;
font-family:"Segoe UI",sans-serif;
}

body{

background:#f6f3ee;

color:#222;

padding:15px;

font-size:14px;

}
/* Container */

.container{

width:92%;

max-width:1180px;

margin:25px auto;

zoom:0.95;

transform-origin:top center;

}

/* Header */

.header{

background:linear-gradient(135deg,#2f3b4f,#243142);

padding:12px;

border-radius:18px;

text-align:center;

margin-bottom:30px;

border-top:5px solid #f1c40f;

border-bottom:5px solid #f1c40f;

box-shadow:0 10px 25px rgba(0,0,0,.15);

}

.header h1{

font-size:32px;

color:#ffd700;

margin-bottom:10px;

letter-spacing:1px;

}

.header p{

color:#f4f4f4;

font-size:15px;

opacity:.9;

}

.logo{

width:80px;

margin-bottom:15px;

}

/* Client */

.clientCard{

background:#fff;

padding:20px;

border-radius:18px;

display:grid;

grid-template-columns:repeat(2,1fr);

gap:25px;

margin-bottom:25px;

box-shadow:0 5px 18px rgba(0,0,0,.08);

border:1px solid #e2e2e2;

}

.inputGroup{

display:flex;

flex-direction:column;

}

.inputGroup label{

margin-bottom:8px;

font-weight:700;

font-size:15px;

color:#2f3b4f;

}

.inputGroup input{

height:46px;

padding:0 18px;

font-size:16px;

border-radius:10px;

border:2px solid #d9d9d9;

background:#fff;

color:#222;

outline:none;

transition:.25s;

}

.inputGroup input:focus{

border-color:#f1c40f;

box-shadow:0 0 12px rgba(241,196,15,.25);

}

/* Tax Selection */

.radioBox{

display:flex;

gap:40px;

background:#fff;

padding:18px 25px;

border-radius:15px;

margin-bottom:30px;

box-shadow:0 4px 15px rgba(0,0,0,.08);

border:1px solid #e2e2e2;

}

.radioBox label{

font-size:17px;

font-weight:600;

cursor:pointer;

color:#2f3b4f;

}

.radioBox input{

transform:scale(1.2);

margin-right:8px;

}

/* ===========================================
   TABLE
=========================================== */

table{

width:100%;

border-collapse:collapse;

table-layout:fixed;

background:#ffffff;

border-radius:18px;

overflow:hidden;

box-shadow:0 8px 20px rgba(0,0,0,.08);

margin-bottom:25px;

}

thead{

background:#2f3b4f;

color:#ffd700;

}

th{

padding:13px;

font-size:15px;

font-weight:700;

border-right:1px solid rgba(255,255,255,.08);

}

th:last-child{

border-right:none;

}

td{

padding:10px;

text-align:center;

border-bottom:1px solid #ececec;

background:#fff;

}

tbody tr{

transition:.25s;

}

tbody tr:hover{

background:#faf8f2;

}

tbody tr:hover td{

background:#faf8f2;

}

td input{

width:100%;

height:48px;

padding:0 12px;

border:2px solid #dddddd;

border-radius:8px;

background:#ffffff;

font-size:18px;

font-weight:600;

color:#222;

text-align:center;

transition:.25s;

}

td input:focus{

border-color:#f1c40f;

box-shadow:0 0 10px rgba(241,196,15,.25);

outline:none;

}

.weight{

min-width:90px;

}

.rate{

min-width:140px;

}

.amount,
.tax,
.grand{

font-weight:700;

font-size:17px;

color:#2f3b4f;

}

/* ===========================================
   BUTTONS
=========================================== */

button{

cursor:pointer;

transition:.25s;

font-family:inherit;

}

#addRow{

background:linear-gradient(135deg,#f1c40f,#f7d95b);

color:#222;

padding:13px 32px;

border:none;

border-radius:10px;

font-size:16px;

font-weight:700;

margin:15px 0;

box-shadow:0 4px 12px rgba(241,196,15,.35);

}

#addRow:hover{

transform:translateY(-2px);

box-shadow:0 8px 18px rgba(241,196,15,.45);

}

.delete{

background:#dc3545;

color:#fff;

border:none;

width:42px;

height:42px;

border-radius:8px;

font-size:18px;

font-weight:bold;

}

.delete:hover{

background:#bb2d3b;

transform:scale(1.08);

}

/* Bottom Buttons */

.buttons{

display:flex;

justify-content:center;

gap:18px;

flex-wrap:wrap;

margin-top:30px;

}

.buttons button{

min-width:170px;

padding:14px 22px;

border:none;

border-radius:10px;

font-size:16px;

font-weight:700;

background:#2f3b4f;

color:#fff;

box-shadow:0 5px 15px rgba(0,0,0,.15);

}

.buttons button:hover{

transform:translateY(-3px);

filter:brightness(1.08);

}

#printBtn{

background:#0d6efd;

}

#pdfBtn{

background:#198754;

}

#waBtn{

background:#25D366;

}

#resetBtn{

background:#dc3545;

}

#printBtn:hover,
#pdfBtn:hover,
#waBtn:hover,
#resetBtn:hover{

background:#f1c40f;

color:#222;

}

/* ===========================================
   SUMMARY DASHBOARD
=========================================== */

.summary{

display:grid;

grid-template-columns:repeat(4,1fr);

gap:22px;

margin-top:35px;

margin-bottom:35px;

}

.summary div{

background:#ffffff;

border-radius:18px;

padding:25px;

text-align:center;

border:1px solid #e5e5e5;

box-shadow:0 8px 20px rgba(0,0,0,.08);

transition:.30s;

}

.summary div:hover{

transform:translateY(-5px);

border-color:#f1c40f;

box-shadow:0 15px 30px rgba(0,0,0,.12);

}

.summary h3{

font-size:15px;

color:#666;

margin-bottom:12px;

font-weight:600;

}

.summary h2{

font-size:24px;

font-weight:700;

color:#0d6efd;

}

/* ===========================================
   IMPORTANT NOTES
=========================================== */

.note{

margin-top:30px;

background:#fffdf4;

border-left:6px solid #f1c40f;

padding:20px 25px;

border-radius:12px;

box-shadow:0 5px 15px rgba(0,0,0,.08);

line-height:1.8;

font-size:15px;

color:#444;

}

.note h3{

margin-bottom:10px;

color:#2f3b4f;

}

.note ul{

margin-left:20px;

}

.note li{

margin-bottom:8px;

}

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

.footer{

margin-top:40px;

padding:20px;

text-align:center;

color:#777;

font-size:14px;

}

.footer b{

color:#2f3b4f;

}

.footer a{

color:#2f3b4f;

font-weight:bold;

text-decoration:none;

}

.footer a:hover{

color:#f1c40f;

}

/* ===========================================
   FADE EFFECT
=========================================== */

.container{

animation:fadeIn .45s ease;

}

@keyframes fadeIn{

from{

opacity:0;

transform:translateY(12px);

}

to{

opacity:1;

transform:translateY(0);

}

}

/* ===========================================
   TABLE HOVER
=========================================== */

tbody tr{

transition:.25s;

}

tbody tr:hover{

background:#fff9e8;

}

/* ===========================================
   INPUT PLACEHOLDER
=========================================== */

input::placeholder{

color:#aaa;

}

/* ===========================================
   SCROLL BAR
=========================================== */

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

::-webkit-scrollbar-thumb{

background:#c7a000;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#f1c40f;

}

/* ===========================================
   TABLET
=========================================== */

@media(max-width:992px){

.container{

width:98%;

}

.clientCard{

grid-template-columns:1fr;

gap:20px;

}

.summary{

grid-template-columns:repeat(2,1fr);

}

.radioBox{

flex-direction:column;

gap:15px;

align-items:flex-start;

}

.buttons{

gap:12px;

}

.buttons button{

min-width:150px;

}

}

/* ===========================================
   MOBILE
=========================================== */

@media(max-width:768px){

body{

padding:10px;

}

.container{

width:100%;

}

.header{

padding:22px 15px;

border-radius:12px;

}

.header h1{

font-size:28px;

}

.header p{

font-size:14px;

}

.clientCard{

padding:18px;

}

.inputGroup input{

height:48px;

font-size:16px;

}

.radioBox{

font-size:15px;

padding:15px;

}

table{

width:100%;

display:block;

overflow-x:auto;

border-radius:12px;

}

th{

font-size:13px;

padding:12px;

}

td{

padding:10px;

}

td input{

min-width:120px;

height:42px;

font-size:16px;

}

.summary{

grid-template-columns:1fr;

gap:15px;

}

.summary div{

padding:20px;

}

.summary h2{

font-size:24px;

}

.buttons{

flex-direction:column;

}

.buttons button{

width:100%;

}

.note{

font-size:13px;

line-height:1.6;

}

}

/* ===========================================
   LARGE DESKTOP
=========================================== */

@media(min-width:1600px){

.container{

max-width:1450px;

}

.header h1{

font-size:42px;

}

.summary h2{

font-size:34px;

}

}

/* ===========================================
   PRINT
=========================================== */
/*

@media print{

body{

background:#fff !important;

padding:0;

font-size:13px;

}

.header{

border:none;

box-shadow:none;

padding:15px;

text-align:center;

}

.header img{

width:80px;

}

.header h1{

font-size:28px;

color:#000 !important;

}

.header p{

color:#000 !important;

}

.clientCard{

display:grid;

grid-template-columns:1fr 1fr;

border:none;

box-shadow:none;

margin-bottom:20px;

}

.radioBox{

border:none;

box-shadow:none;

margin-bottom:15px;

}

table{

width:100%;

border-collapse:collapse;

}

th{

background:#ddd !important;

color:#000 !important;

border:1px solid #000;

}

td{

border:1px solid #000;

padding:8px;

}

.summary{

display:grid;

grid-template-columns:repeat(2,1fr);

gap:10px;

}

.summary div{

border:1px solid #000;

box-shadow:none;

padding:10px;

}

.note{

border:1px solid #000;

margin-top:20px;

}

.buttons,

.delete,

#addRow{

display:none;

}

} */

/* ===========================================
   SMOOTH TRANSITIONS
=========================================== */

button,
input,
.summary div,
.clientCard,
table{

transition:.25s;

}

/* ===========================================
   SELECTION
=========================================== */

::selection{

background:#f1c40f;

color:#222;

}

/* ===========================================
   SCROLLBAR
=========================================== */

::-webkit-scrollbar{

width:10px;

height:10px;

}

::-webkit-scrollbar-track{

background:#ececec;

}

::-webkit-scrollbar-thumb{

background:#d4af37;

border-radius:20px;

}

::-webkit-scrollbar-thumb:hover{

background:#f1c40f;

}

#pdfContent{
    background:#ffffff !important;
    display:block;
}

.container{
    background:#ffffff !important;
}

.amount,
.tax,
.grand{

text-align:right;

padding-right:15px;

}

/* ==========================================
   PROFESSIONAL A4 PRINT
========================================== */

@media print{

@page{

    size:A4 portrait;

    margin:12mm;

}

html,
body{

    background:#ffffff !important;

    zoom:100%;

    font-size:12px;

    color:#000;

    padding:0;

    margin:0;

}

/* Hide Buttons */

.buttons,
#addRow,
.delete{

    display:none !important;

}

/* Remove all shadows */

.header,
.clientCard,
.radioBox,
.summary div,
table,
.note{

    box-shadow:none !important;

}

/* Container */

.container{

    width:100% !important;

    max-width:100% !important;

    margin:0 !important;

    padding:0 !important;

}

/* Header */

.header{

    background:#ffffff !important;

    color:#000 !important;

    border-top:3px solid #000;

    border-bottom:3px solid #000;

    border-radius:0;

    text-align:center;

    padding:12px;

    margin-bottom:18px;

}

.logo{

    width:55px;

}

.header h1{

    color:#000 !important;

    font-size:28px;

    margin:5px 0;

}

.header p{

    color:#444 !important;

    font-size:14px;

}

/* Client */

.clientCard{

    border:1px solid #000;

    border-radius:0;

    padding:12px;

    margin-bottom:15px;

}

/* Tax */

.radioBox{

    border:1px solid #000;

    border-radius:0;

    padding:10px;

    margin-bottom:15px;

}

/* Table */

table{

    border:2px solid #000;

    border-collapse:collapse;

}

thead{

    background:#efefef !important;

}

th{

    background:#efefef !important;

    color:#000 !important;

    border:1px solid #000;

    font-size:13px;

    padding:10px;

}

td{

    border:1px solid #000;

    padding:8px;

}

.amount,
.tax,
.grand{

    text-align:right;

    font-weight:bold;

}

/* Summary */

.summary{

    display:grid;

    grid-template-columns:repeat(4,1fr);

    gap:10px;

    margin-top:18px;

}

.summary div{

    border:2px solid #000;

    border-radius:0;

    padding:12px;

    background:#fff !important;

}

.summary h3{

    color:#666;

    font-size:12px;

}

.summary h2{

    color:#000;

    font-size:18px;

}

/* Notes */

.note{

    border:1px solid #000;

    border-left:5px solid #000;

    background:#fff;

    margin-top:18px;

}

.note h3{

    color:#000;

}

/* Footer */

.footer{

    border-top:2px solid #000;

    margin-top:25px;

    padding-top:12px;

    color:#000;

}

/* Inputs */

input{

    border:none !important;

    background:transparent !important;

    font-weight:bold;

}

/* Prevent page break */

.header,
.clientCard,
.summary,
.note{

    page-break-inside:avoid;

}

tr{

    page-break-inside:avoid;

}

}