*{
  box-sizing:border-box;
}

/* 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: 100px 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 {
margin-top: auto;
margin-bottom: auto;
height: 80px;
width: 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: 15px;
background: #D1FAE5;
padding: 12px;
border-radius: 10px;
display: flex;
justify-content: space-between;
align-items:center;
}

.qr {
width: fit-content;
height: fit-content;
background: #ccc;
margin-left: auto;
}

.qr img {
width: 60px;
height: 60px;
}

/* 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; }

/* LOADING BUTTON */

.verify-btn.loading{
    opacity:0.8;
    pointer-events:none;
}

.verify-btn.loading::after{
    content:"";
    width:16px;
    height:16px;
    margin-left:10px;
    border:2px solid white;
    border-top:2px solid transparent;
    border-radius:50%;
    display:inline-block;
    animation:spin 0.7s linear infinite;
    vertical-align:middle;
}

@keyframes spin{
    from{
        transform:rotate(0deg);
    }
    to{
        transform:rotate(360deg);
    }
}

/* MOBILE NAVBAR */

.menu-toggle{
  display:none;
  font-size:26px;
  cursor:pointer;
}


/* =========================================
   MOBILE RESPONSIVE DESIGN
========================================= */

@media (max-width: 768px) {

  /* TOPBAR */
  .topbar-flex {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

  .top-left {
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .top-right {
    justify-content: center;
    margin-left: 0;
  }

  /* HERO SECTION */
  .verify-hero {
    padding: 70px 15px;
  }

  .verify-hero h1 {
    font-size: 30px;
    line-height: 1.3;
  }

  .verify-hero p {
    font-size: 14px;
  }

  /* CARD */
  .verify-container {
    padding: 30px 12px;
  }

  .verify-card {
    padding: 20px;
    border-radius: 12px;
  }

  /* INPUT */
  .verify-input {
    font-size: 16px;
  }

  /* BUTTON */
  .verify-btn {
    font-size: 15px;
  }

  /* VERIFY HEADER */
  .verify-header{
    display:flex;
    align-items:flex-start;
    gap:10px;
  }

  .verify-header h3{
    margin:0;
    font-size:20px;
    line-height:1.2;
  }

  .verify-header p{
    margin-top:4px;
    font-size:13px;
    line-height:1.5;
  }

  .verify-icon{
    min-width:32px;
    min-height:32px;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:2px;
  }

  /* USER INFO */
  .user-info {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .avatar {
    width: 70px;
    height: 70px;
    font-size: 22px;
  }

  /* GRID */
  .info-grid {
    grid-template-columns: 1fr;
  }

  /* QR SECTION */
  .qr-box{
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:15px;
  }

  .qr{
    margin:0 auto;
  }

  .qr img {
    width: 100px;
    height: 100px;
  }

  /* DEMO BUTTONS */
  .demo-row {
    flex-direction: column;
  }

  .demo-row button {
    width: 100%;
    justify-content: center;
  }

  .navbar .container{
    display:flex;
    justify-content:space-between;
    align-items:center;
  }

  .menu-toggle{
    display:block;
  }

  .nav-menu{
    display:none;
    flex-direction:column;
    width:100%;
    background:white;
    padding:15px 0;
    margin-top:15px;
  }

  .nav-menu.active{
    display:flex;
  }
  .nav-menu li{
   width:100%;
  }

  .nav-menu a{
   display:block;
   padding:14px 20px;
   font-size:15px;
   border-bottom:1px solid #eee;
  }

  /* MOBILE DROPDOWN */

  .dropdown-menu{
   display:none;
   background:#f8f9fa;
   padding:10px 0;
   margin-bottom:10px;
  }

  .dropdown-menu li{
   width:100%;
  }

  .dropdown-menu a{
   padding:12px 25px;
   display:block;
   border-bottom:1px solid #eee;
  }

  .dropdown.active .dropdown-menu{
   display:block;
  }

  .dropdown-toggle{
   display:flex;
   justify-content:space-between;
   align-items:center;
  }

}

img{
  max-width:100%;
  height:auto;
}


/* TABLET */
@media (max-width:1024px){

  .verify-card{
    max-width:90%;
  }

}


/* SMALL MOBILE */
@media (max-width:480px){

  .verify-hero h1{
    font-size:24px;
  }

  .verify-card{
    padding:15px;
  }

  .avatar{
    width:60px;
    height:60px;
    font-size:20px;
  }

  .verify-input{
    padding:12px;
  }

  .verify-btn{
    padding:12px;
  }

}