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

/* ==========================================
   HERO SCAN BUTTON
========================================== */

.scan-btn{

    display:flex;
    align-items:center;
    justify-content:center;
    gap:1rem;

    width:100%;

    padding:1rem 1.5rem;

    margin:1.5rem auto;

    border-radius:18px;

    background:linear-gradient(135deg,#2ecc71,#1fa95b);

    color:#fff;

    font-size:1.25rem;

    font-weight:700;

    letter-spacing:.2px;

    box-shadow:
        0 8px 24px rgba(46,204,113,.30);

    transition:.25s;

}

.scan-btn:hover{

    transform:translateY(-2px);

    box-shadow:
        0 14px 30px rgba(46,204,113,.40);

}

.scan-btn:active{

    transform:scale(.98);

}

.scan-btn .nav-icon{

    width:54px;
    height:54px;

    border-radius:50%;

    background:rgba(255,255,255,.18);

    display:flex;
    align-items:center;
    justify-content:center;

}

.scan-btn .nav-icon img{

    width:32px;
    height:32px;

}

.scan-btn small{

    color:#fff;

    font-size:1.15rem;

    font-weight:700;

}


.scan-btn.secondary{

    background:#f3f4f6;

    color:var(--text);

}


.manual-scan-form {
    display: flex;
    gap: .5rem;
    align-items: center;
}

.manual-scan-form input {
    flex: 1;
    min-width: 0;
}

.scan-submit-btn {
    flex: 0 0 auto;

    padding: .7rem 1rem;

    border: none;
    border-radius: 8px;

    background: var(--primary);
    color: #fff;

    font-weight: 700;
    font-size: 1rem;

    cursor: pointer;
}

/* ==========================================================
   SEARCH
========================================================== */

.search-block{

    margin-top:var(--space-5);

}

.search-form{

    display:grid;

    grid-template-columns:1fr 56px;

    border-radius:14px;

    overflow:hidden;

    background:#f3f4f6;

}

.search-form input{

    border:none;

    background:none;

    padding:1rem;

    font-size:.95rem;

}

.search-form input:focus{

    outline:none;

}

.search-form button{

    border:none;

    background:#111;

    color:#fff;

    cursor:pointer;

}

/* ==========================================================
   FORMS
========================================================== */

input,
select,
textarea{

    width:100%;

    padding:.85rem;

    border:1px solid var(--border);

    border-radius:var(--radius);

    font-size:1rem;

}

input:focus,
textarea:focus,
select:focus{

    outline:none;

    border-color:var(--primary);

}

label{

    display:block;

    margin-bottom:.35rem;

    font-weight:600;

}

/* ==========================================================
   ALERTS
========================================================== */

.message-wrapper{

    max-width:900px;

    margin:auto;

    padding:0 var(--space-4);

}

.message{

    display:flex;

    align-items:center;

    gap:.75rem;

    padding:1rem;

    margin:.75rem 0;

    border-radius:var(--radius);

}

.message-info{

    background:#eef4ff;

    border-left:4px solid var(--info);

}

.message-success{

    background:#ecfdf5;

    border-left:4px solid var(--primary);

}

.message-warning{

    background:#fffbeb;

    border-left:4px solid var(--warning);

}

.message-error{

    background:#fef2f2;

    border-left:4px solid var(--danger);

}

/* ==========================================================
   LISTES
========================================================== */

.page-list{

    padding-left:1.2rem;

}

.page-list li{

    margin-bottom:.8rem;

}

/* ==========================================================
   FEATURES
========================================================== */

.feature{

    display:flex;

    gap:1rem;

    margin:1.5rem 0;

}

.feature-icon{

    font-size:2rem;

}

.feature h3{

    margin-bottom:.3rem;

}

.feature p{

    color:var(--muted);

}

/* ==========================================================
   LOADER / IMAGE
========================================================== */

.main-photo img{

    width:100%;

    border-radius:var(--radius-lg);

    object-fit:contain;

}

.photo-gallery{

    display:flex;

    gap:.5rem;

    overflow-x:auto;

    margin-top:.75rem;

}

.photo-gallery img{

    width:60px;

    height:60px;

    border-radius:10px;

    object-fit:cover;

    cursor:pointer;

}