/* ==========================================================
PDF VIEWER CSS
IPDAY 2026
========================================================== */

* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

html,
body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: Arial, Helvetica, sans-serif;
background: #f3f4f6;
}

/* ==========================================================
TOOLBAR
========================================================== */

.toolbar {
position: fixed;

top: 0;

left: 0;

right: 0;

height: 60px;

background: #0b5ed7;

color: #fff;

display: flex;

justify-content: space-between;

align-items: center;

padding: 0 20px;

z-index: 9999;

box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.toolbar a {
color: #fff;

text-decoration: none;

font-weight: 600;

transition: 0.3s;
}

.toolbar a:hover {
opacity: 0.8;
}

.title {
font-size: 24px;

font-weight: 700;

text-transform: uppercase;

letter-spacing: 0.5px;

flex: 1;

text-align: center;

padding: 0 20px;
}

/* ==========================================================
PDF AREA
========================================================== */

.viewer {
position: fixed;

top: 60px;

left: 0;

right: 0;

bottom: 0;

background: #dcdcdc;
}

.viewer iframe {
width: 100%;

height: 100%;

border: none;
}

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

@media screen and (max-width: 768px) {
.toolbar {
height: 52px;

padding: 0 12px;
}

.toolbar a {
font-size: 15px;
}

.title {
font-size: 16px;

padding: 0 10px;

white-space: nowrap;

overflow: hidden;

text-overflow: ellipsis;
}

.viewer {
top: 52px;
}
}

/* ==========================================================
EXTRA SMALL PHONE
========================================================== */

@media screen and (max-width: 480px) {
.toolbar {
height: 48px;

padding: 0 10px;
}

.toolbar a {
font-size: 14px;
}

.title {
font-size: 15px;
}

.viewer {
top: 48px;
}
}
/* ==========================================
Toolbar Mobile
========================================== */

.back,
.download-btn {
display: flex;

align-items: center;

gap: 6px;
}

@media (max-width: 768px) {
.desktop-text {
display: none;
}

.toolbar {
display: grid;

grid-template-columns: 40px 1fr 40px;

align-items: center;
}

.back {
justify-content: flex-start;
}

.download-btn {
justify-content: flex-end;
}

.title {
text-align: center;

font-size: 16px;

font-weight: 700;
}
}