/* TOPBAR (FINAL CLEAN VERSION) */
.topbar {
background: #0A2540;
color: white;
font-size: 13px;
padding: 6px 0;
}

/* FLEX */
.topbar-flex {
display: flex;
justify-content: space-between;
align-items: center;
}

/* LEFT TEXT */
.top-left {
display: flex;
align-items: center;
gap: 15px;
}

/* ICONS LEFT */
.top-left i {
color: white;
margin-right: 5px;
}

/* RIGHT SIDE (MOVE TO EDGE) */
.top-right {
display: flex;
align-items: center;
gap: 8px;
margin-left: auto; /* pushes fully right */
}

/* SOCIAL ICON STYLE */
.top-right a {
color: white;
font-size: 13px;
border: 1px solid rgba(255,255,255,0.3);
width: 28px;
height: 28px;
display: inline-flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: 0.3s;
}

/* HOVER EFFECT */
.top-right a:hover {
background: #1E90FF;
border-color: #1E90FF;
}
.verify-hero {
position: relative;
background: url('https://images.unsplash.com/photo-1451187580459-43490279c0fa?q=80&w=1920&auto=format&fit=crop') center/cover no-repeat;
padding: 120px 20px;
text-align: center; /* CENTER TEXT */
color: white;
}

/* DARK OVERLAY */
.verify-hero::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(10, 37, 64, 0.85);
z-index: 1;
}

/* CONTENT CENTER */
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
margin: 0 auto; /* CENTER BLOCK */
}

/* MAIN TITLE */
.verify-hero h1 {
font-size: 48px;      /* BIG TEXT */
font-weight: 800;     /* BOLD */
margin-bottom: 10px;
}

/* SUB TEXT */
.verify-hero p {
font-size: 16px;
opacity: 0.9;
}

/* OPTIONAL BREADCRUMB (LIKE SERVICES PAGE) */
.breadcrumb {
margin-top: 10px;
font-size: 14px;
}

.breadcrumb a {
color: #1E90FF;
text-decoration: none;
}




/* CARD */
.verify-container {
padding: 60px 20px;
display: flex;
justify-content: center;
}

.verify-card {
max-width: 750px;
width: 100%;
background: white;
padding: 35px;
border-radius: 14px;
box-shadow: 0 10px 30px rgba(0,0,0,0.08);
}

/* INPUT */
.verify-input {
width: 100%;
padding: 14px;
border-radius: 8px;
border: 1px solid #ddd;
margin-bottom: 20px;
}

/* BUTTON */
.verify-btn {
width: 100%;
padding: 14px;
border: none;
background: linear-gradient(135deg,#1E90FF,#2563EB);
color: white;
border-radius: 8px;
}

/* RESULT */
.verify-result { display:none; margin-top:25px;}
.verify-result.show { display:block; }

/* VALID */
.verify-valid {
border-radius: 12px;
overflow: hidden;
border: 1px solid #16A34A;
}

.verify-header {
background: #16A34A;
color: white;
padding: 20px;
display: flex;
gap: 15px;
}
.verify-icon {
  background: rgba(255,255,255,0.2);
  width: 32px;          /* control size */
  height: 32px;         /* control size */
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  font-size: 14px;      /* icon size */
}

.verify-id {
  margin-top: 8px;
  background: rgba(255,255,255,0.2);
  padding: 4px 10px;
  border-radius: 20px;
  display: inline-block;   /* 🔥 IMPORTANT */
  font-size: 13px;
}

.verify-body {
background: #ECFDF5;
padding: 20px;
}

.user-info {
display: flex;
gap: 15px;
}

.avatar {
  width: 80px;              /* increased size */
  height: 80px;
  background: #1E3A8A;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 50%;
  font-size: 24px;          /* bigger letter */
  font-weight: 600;
  border: 3px solid #E0F2FE;
}

.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 15px;
margin-top: 20px;
}

.status { color:#16A34A; }

/* QR */
.qr-box {
margin-top: 20px;
background: #D1FAE5;
padding: 15px;
border-radius: 10px;
display: flex;
justify-content: space-between;
}

.qr {
width: 60px;
height: 60px;
background: #ccc;
}

/* INVALID */
.verify-invalid {
background: #FEF2F2;
border: 1px solid #DC2626;
padding: 20px;
border-radius: 10px;
text-align: center;
}

.verify-invalid h3 { color:#DC2626; }

.btn-support {
margin-top: 10px;
border: 1px solid #DC2626;
color: #DC2626;
padding: 10px;
border-radius: 6px;
background: none;
}

/* DEMO BUTTONS (PROFESSIONAL STYLE) */
.demo-row {
margin-top: 20px;
display: flex;
gap: 12px;
}

.demo-row button {
padding: 10px 16px;
border-radius: 8px;
border: 1px solid #1E90FF;
background: transparent;
color: #1E90FF;
font-weight: 500;
cursor: pointer;
display: flex;
align-items: center;
gap: 6px;
transition: all 0.3s ease;
}

/* HOVER EFFECT */
.demo-row button:hover {
background: #1E90FF;
color: white;
box-shadow: 0 5px 15px rgba(30,144,255,0.3);
}

/* ICON SIZE */
.demo-row i {
font-size: 12px;
}


/* TEXT */
.secure-note { font-size:12px; color:#64748B; margin-top:10px; }
.divider { text-align:center; margin-top:20px; color:#64748B; }