/* Marriage Certificate Frontend */
body { padding-top: var(--nav-height); }
body.has-topbar { padding-top: calc(var(--nav-height) + var(--topbar-height)); }

.marriage-hero {
    background: linear-gradient(135deg, #0d4a8a 0%, #1a6fc4 50%, #2E86C1 100%);
    color: #fff;
    padding: 56px 0 48px;
    text-align: center;
}
.marriage-badge {
    display: inline-flex; align-items: center; gap: 8px;
    background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.25);
    padding: 6px 16px; border-radius: 50px; font-size: 13px; font-weight: 600;
    margin-bottom: 16px;
}
.marriage-hero h1 { font-size: 34px; font-weight: 800; margin-bottom: 12px; }
.marriage-hero p { font-size: 16px; opacity: .9; max-width: 560px; margin: 0 auto; }

.marriage-section { padding: 40px 0 60px; background: #f0f4f8; }

.marriage-card {
    background: #fff; border-radius: 16px; box-shadow: 0 12px 40px rgba(15,23,42,.1);
    overflow: hidden; margin-bottom: 28px;
}
.marriage-card-header {
    display: flex; align-items: center; gap: 16px;
    padding: 24px 28px; background: linear-gradient(90deg, #fff9e6, #fff);
    border-bottom: 1px solid #f0e6c8;
}
.marriage-card-header i { font-size: 32px; color: #c9a227; }
.marriage-card-header h2 { font-size: 22px; font-weight: 700; color: #1a2b42; margin: 0; }
.marriage-card-header p { margin: 4px 0 0; color: #666; font-size: 14px; }

.marriage-alert {
    margin: 0 28px 20px; padding: 12px 16px; border-radius: 10px; font-size: 14px;
}
.marriage-alert-danger { background: #fde8e8; color: #b42318; border: 1px solid #fecdca; }

.marriage-search-form {
    display: flex; flex-wrap: wrap; gap: 12px; padding: 24px 28px 28px; align-items: stretch;
}
.marriage-input-wrap {
    flex: 1; min-width: 220px; position: relative;
}
.marriage-input-wrap i {
    position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
    color: #c9a227; font-size: 16px;
}
.marriage-input-wrap input {
    width: 100%; padding: 14px 16px 14px 44px; border: 2px solid #e8eef5;
    border-radius: 12px; font-size: 16px; outline: none; transition: .2s;
}
.marriage-input-wrap input:focus { border-color: #1a6fc4; box-shadow: 0 0 0 4px rgba(26,111,196,.12); }

.marriage-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    padding: 14px 24px; border-radius: 12px; font-size: 15px; font-weight: 600;
    border: none; cursor: pointer; text-decoration: none; transition: .2s;
}
.marriage-btn-primary { background: linear-gradient(135deg, #1a6fc4, #0d4a8a); color: #fff; }
.marriage-btn-primary:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(26,111,196,.35); color: #fff; text-decoration: none; }
.marriage-btn-gold { background: linear-gradient(135deg, #d4af37, #b8860b); color: #fff; }
.marriage-btn-gold:hover { color: #fff; text-decoration: none; transform: translateY(-2px); }
.marriage-btn-outline { background: #fff; color: #1a6fc4; border: 2px solid #1a6fc4; }
.marriage-btn-outline:hover { background: #f0f7ff; color: #1a6fc4; text-decoration: none; }

.marriage-result {
    margin: 0 28px 28px; padding: 24px; background: linear-gradient(180deg, #f8fafc, #fff);
    border: 1px solid #e8eef5; border-radius: 14px;
}
.marriage-result-head {
    display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;
    gap: 12px; margin-bottom: 24px;
}
.marriage-result-head h3 { font-size: 18px; color: #15803d; margin: 0; }
.marriage-ref-badge {
    background: #1a6fc4; color: #fff; padding: 6px 14px; border-radius: 8px;
    font-size: 14px; font-weight: 700; letter-spacing: .5px;
}

.marriage-result-grid {
    display: flex; align-items: center; justify-content: center; gap: 24px;
    flex-wrap: wrap; margin-bottom: 24px;
}
.marriage-person { text-align: center; width: 140px; }
.marriage-person img, .marriage-photo-ph {
    width: 110px; height: 130px; object-fit: cover; border-radius: 12px;
    border: 3px solid #e8eef5; margin: 0 auto 10px; display: block;
}
.marriage-person-groom img, .marriage-person-groom .marriage-photo-ph { border-color: #1a6fc4; }
.marriage-person-bride img, .marriage-person-bride .marriage-photo-ph { border-color: #c9a227; }
.marriage-photo-ph {
    background: #f0f4f8; display: flex; align-items: center; justify-content: center;
    font-size: 36px; color: #ccc;
}
.marriage-person h4 { font-size: 15px; font-weight: 700; color: #1a2b42; margin: 0 0 4px; }
.marriage-person span { font-size: 12px; color: #888; text-transform: uppercase; letter-spacing: .5px; }
.marriage-heart { font-size: 28px; color: #e8913a; }

.marriage-result-details {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px; margin-bottom: 24px; padding: 16px; background: #fff; border-radius: 10px;
}
.marriage-result-details label { display: block; font-size: 11px; text-transform: uppercase; color: #888; margin-bottom: 4px; }
.marriage-result-details strong { font-size: 15px; color: #1a2b42; }

.marriage-actions { display: flex; flex-wrap: wrap; gap: 12px; }

.marriage-info-cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 20px;
}
.marriage-info-card {
    background: #fff; border-radius: 14px; padding: 24px; text-align: center;
    box-shadow: 0 4px 16px rgba(0,0,0,.06); border: 1px solid #e8eef5;
}
.marriage-info-card i { font-size: 28px; color: #1a6fc4; margin-bottom: 12px; }
.marriage-info-card h4 { font-size: 16px; font-weight: 700; color: #1a2b42; margin-bottom: 8px; }
.marriage-info-card p { font-size: 13px; color: #666; margin: 0; line-height: 1.6; }

@media (max-width: 576px) {
    .marriage-hero h1 { font-size: 26px; }
    .marriage-search-form { flex-direction: column; }
    .marriage-btn { width: 100%; }
}