body{
margin:0;
font-family:Arial, sans-serif;
background:#f3f6f8;
}

.packet{
display:flex;
flex-direction:column;
align-items:center;
padding:30px 0;
}

.page{
width:816px;
min-height:1056px;
background:white;
margin-bottom:25px;
padding:40px 60px;
box-shadow:0 5px 18px rgba(0,0,0,.12);
position:relative;
box-sizing: border-box;
}

/* HEADER */

.header{
text-align:center;
margin-bottom:25px;
}

.logo img{
max-height:70px;
}

.address{
font-size:12px;
margin-top:6px;
}

/* TITLE */

.title{
font-size:18px;
font-weight:bold;
text-align:center;
margin-bottom:25px;
text-transform:uppercase;
}

/* BODY */

.section{
margin-top:20px;
}

.section-title{
font-weight:bold;
margin-bottom:10px;
font-size:14px;
}

.content-text{
font-size:13px;
line-height:1.6;
margin-bottom:10px;
text-align:justify;
}

ul{
margin:10px 0;
padding-left:25px;
}

li{
margin-bottom:6px;
font-size:13px;
line-height:1.5;
}

/* SIGNATURE SECTION */

.signature-section{
margin-top:50px;
display:grid;
grid-template-columns:2fr 1fr;
gap:20px;
}

.sig-block{
display:flex;
flex-direction:column;
}

.sig-label{
font-weight:bold;
margin-bottom:8px;
font-size:14px;
}

.signature-pad{
border-bottom:2px solid black;
height:50px;
background:white;
position:relative;
display:flex;
align-items:flex-end;
}

canvas{
width:100%;
height:100%;
touch-action:none;
position:absolute;
top:0;
left:0;
}

.clear-btn{
font-size:11px;
margin-top:4px;
cursor:pointer;
background:none;
border:none;
color:#0F4D7A;
padding:0;
text-decoration:underline;
}

.clear-btn:hover{
color:#083451;
}

.timestamp{
font-size:11px;
color:#666;
margin-top:4px;
}

.date-block{
display:flex;
flex-direction:column;
}

.date-input{
border:none;
background:transparent;
padding:0 0 5px 0;
margin:0;
font-size:14px;
font-family:Arial, sans-serif;
width:100%;
outline:none;
cursor:pointer;
}

.date-input::-webkit-calendar-picker-indicator {
cursor:pointer;
opacity:1;
}

.date-input::before {
content: attr(data-placeholder);
color:#999;
}

.date-input:focus::before,
.date-input:valid::before {
content: '';
}

.date-display{
position:absolute;
left:0;
bottom:5px;
font-size:14px;
font-family:Arial, sans-serif;
pointer-events:none;
color:#222;
}

/* PRINT BUTTON */

.print-button {
position:fixed;
top:20px;
right:20px;
background:#4CAF50;
color:white;
border:none;
padding:12px 20px;
font-size:14px;
cursor:pointer;
border-radius:5px;
box-shadow:0 2px 5px rgba(0,0,0,0.2);
display:flex;
align-items:center;
gap:8px;
z-index:1000;
}

.print-button:hover {
background:#45a049;
}

/* PRINT */

@media print{
.print-button{display:none;}
.clear-btn{display:none;}
body{background:white;}
.page{margin:0; box-shadow:none;}
}

/* SOP mobile overrides */
img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 980px) {
  body {
    padding: 0.5rem !important;
  }

  .packet {
    padding: 0.5rem 0 !important;
  }

  .page {
    width: 100% !important;
    min-height: auto !important;
    margin: 0 0 0.8rem !important;
    padding: 1rem !important;
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1) !important;
  }

  .container {
    max-width: 100% !important;
    border-radius: 12px !important;
  }
}

@media (max-width: 560px) {
  .page {
    padding: 0.78rem !important;
  }

  .header-text h1,
  .title,
  .dosage-title {
    font-size: 1rem !important;
  }
}

@media print {
  .page {
    box-shadow: none !important;
  }
}