/**
 * Khairat Kematian Public Styles
 * iOS-Inspired Design System with #014E41 and #FFBE38
 * v4.4.2
 */

:root {
    --khairat-primary: #014E41;
    --khairat-secondary: #FFBE38;
    --khairat-success: #34c759;
    --khairat-danger: #ff3b30;
    --khairat-warning: #ff9500;
    --khairat-info: #007aff;
    --khairat-light: #f2f2f7;
    --khairat-dark: #1c1c1e;
    --ios-radius: 16px;
    --ios-radius-lg: 22px;
    --ios-radius-sm: 12px;
    --ios-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
    --ios-shadow-lg: 0 8px 32px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.06);
    --ios-shadow-xl: 0 16px 48px rgba(0,0,0,0.12), 0 4px 16px rgba(0,0,0,0.08);
    --ios-border: rgba(0,0,0,0.06);
    --ios-separator: rgba(60,60,67,0.08);
}

/* QR Verification Page */
.khairat-verify-container {
    max-width: 600px;
    margin: 40px auto;
    padding: 0 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'Helvetica Neue', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

.khairat-verify-card {
    background: #fff;
    border-radius: var(--ios-radius-lg);
    box-shadow: var(--ios-shadow-lg);
    overflow: hidden;
    border: 1px solid var(--ios-border);
}

.khairat-verify-header {
    background: linear-gradient(135deg, var(--khairat-primary) 0%, #026d5a 50%, #03a27e 100%);
    color: #fff;
    padding: 36px 30px;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.khairat-verify-header::before {
    content: '';
    position: absolute;
    top: -50%; right: -20%;
    width: 70%; height: 200%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.08) 0%, transparent 65%);
    pointer-events: none;
}
.khairat-verify-header h1 {
    margin: 0; font-size: 24px; font-weight: 700; letter-spacing: -0.03em; position: relative; z-index: 1;
}
.khairat-verify-header p {
    margin: 10px 0 0; opacity: 0.8; font-weight: 500; position: relative; z-index: 1;
}

.khairat-verify-body { padding: 32px; }

.khairat-verify-status {
    text-align: center; padding: 24px; margin-bottom: 24px; border-radius: var(--ios-radius);
}
.khairat-verify-status.layak { background: rgba(52,199,89,0.06); border: 1.5px solid rgba(52,199,89,0.2); }
.khairat-verify-status.tidak-layak { background: rgba(255,59,48,0.06); border: 1.5px solid rgba(255,59,48,0.2); }
.khairat-verify-status .status-icon { font-size: 48px; margin-bottom: 12px; }
.khairat-verify-status .status-text { font-size: 22px; font-weight: 700; letter-spacing: -0.03em; }
.khairat-verify-status.layak .status-text { color: #248a3d; }
.khairat-verify-status.tidak-layak .status-text { color: #d70015; }

.khairat-member-info { margin-bottom: 24px; }
.khairat-member-info h3 {
    color: var(--khairat-primary); margin: 0 0 16px; padding-bottom: 12px;
    border-bottom: 2px solid var(--khairat-secondary);
    font-size: 17px; font-weight: 700; letter-spacing: -0.02em;
}

.khairat-info-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.khairat-info-item {
    padding: 14px 16px; background: var(--khairat-light);
    border-radius: var(--ios-radius-sm); border: 1px solid var(--ios-border);
    transition: all .2s;
}
.khairat-info-item:hover { background: #fff; box-shadow: var(--ios-shadow); }
.khairat-info-item label {
    display: block; font-size: 11px; color: #8e8e93; margin-bottom: 4px;
    text-transform: uppercase; letter-spacing: 0.6px; font-weight: 600;
}
.khairat-info-item span { font-size: 15px; font-weight: 600; color: var(--khairat-dark); }

.khairat-dependents-list { margin-top: 24px; }
.khairat-dependents-list h3 {
    color: var(--khairat-primary); margin: 0 0 16px; padding-bottom: 12px;
    border-bottom: 2px solid var(--khairat-secondary);
    font-size: 17px; font-weight: 700;
}
.khairat-dependent-item {
    display: flex; justify-content: space-between; align-items: center;
    padding: 16px 18px; background: var(--khairat-light);
    border-radius: var(--ios-radius-sm); margin-bottom: 10px;
    border: 1px solid var(--ios-border); transition: all .2s;
}
.khairat-dependent-item:hover { background: #fff; box-shadow: var(--ios-shadow); }
.khairat-dependent-info { flex: 1; }
.khairat-dependent-name { font-weight: 600; color: var(--khairat-dark); margin-bottom: 4px; }
.khairat-dependent-details { font-size: 13px; color: #8e8e93; }
.khairat-dependent-badge {
    background: rgba(255,190,56,0.15); color: #8a6d00;
    padding: 5px 14px; border-radius: 100px; font-size: 12px; font-weight: 600;
}

.khairat-membership-info {
    background: linear-gradient(135deg, var(--khairat-primary) 0%, #026d5a 50%, #03a27e 100%);
    color: #fff; padding: 24px; border-radius: var(--ios-radius); margin-top: 24px;
    position: relative; overflow: hidden;
    box-shadow: 0 4px 16px rgba(1,78,65,0.25);
}
.khairat-membership-info::before {
    content: ''; position: absolute; top: -40%; right: -10%;
    width: 60%; height: 180%;
    background: radial-gradient(ellipse at center, rgba(255,255,255,0.06) 0%, transparent 60%);
    pointer-events: none;
}
.khairat-membership-info h4 {
    margin: 0 0 16px; font-size: 16px; opacity: 0.85; font-weight: 600; position: relative; z-index: 1;
}
.khairat-membership-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; text-align: center; position: relative; z-index: 1;
}
.khairat-membership-item {
    padding: 14px 12px; background: rgba(255,255,255,0.1);
    border-radius: var(--ios-radius-sm); border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
}
.khairat-membership-item label { display: block; font-size: 11px; opacity: 0.7; margin-bottom: 4px; }
.khairat-membership-item span { font-size: 14px; font-weight: 600; }

.khairat-verify-footer {
    text-align: center; padding: 20px 30px;
    background: var(--khairat-light); border-top: 1px solid var(--ios-separator);
}
.khairat-verify-footer p { margin: 0; font-size: 13px; color: #8e8e93; }
.khairat-verify-footer .verify-time { color: var(--khairat-primary); font-weight: 600; }

.khairat-verify-error { text-align: center; padding: 64px 32px; }
.khairat-verify-error .error-icon { font-size: 56px; color: var(--khairat-danger); margin-bottom: 20px; opacity: 0.8; }
.khairat-verify-error h2 { color: #d70015; margin: 0 0 12px; font-weight: 700; }
.khairat-verify-error p { color: #8e8e93; margin: 0; font-size: 15px; }

.khairat-loading-container { text-align: center; padding: 64px 32px; }
.khairat-spinner {
    width: 40px; height: 40px;
    border: 3px solid var(--ios-separator);
    border-top: 3px solid var(--khairat-primary);
    border-radius: 50%;
    animation: iosSpin 0.8s cubic-bezier(.5,.15,.5,.85) infinite;
    margin: 0 auto 20px;
}
@keyframes iosSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }

.khairat-badge {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 4px 12px; border-radius: 100px; font-size: 12px; font-weight: 600;
}
.khairat-badge-aktif { background: rgba(52,199,89,0.12); color: #248a3d; }
.khairat-badge-tamat { background: rgba(255,59,48,0.12); color: #d70015; }

@media (max-width: 480px) {
    .khairat-verify-container { margin: 20px auto; padding: 0 14px; }
    .khairat-info-grid { grid-template-columns: 1fr; }
    .khairat-membership-grid { grid-template-columns: 1fr; }
    .khairat-verify-header, .khairat-verify-body { padding: 24px; }
}

@media print {
    .khairat-verify-card { box-shadow: none; border: 1px solid #ddd; }
}