/*
 * style/retro.css — Wartycoon.nl gedeelde retro-look voor openbare pagina's
 * Gebruikt door: index.php + alle publieke pagina's via includes/retro_header.php
 * en includes/retro_footer.php (banner, loginstrip, sidebar, footer, panelen).
 */
:root{
  --rw-black:#000000;
  --rw-panel-bg:#e4ecd7;
  --rw-panel-border:#8a9c72;
  --rw-panel-head:#4c5c38;
  --rw-sidebar-bg:#3f4f2e;
  --rw-sidebar-border:#26301a;
  --rw-green:#8fd13f;
  --rw-green-dark:#3a6a1f;
  --rw-text:#1a1a10;
  --rw-text-light:#eef2e6;
  --rw-muted:#5a6650;
  --rw-link:#2f5f1a;
  --rw-red:#c0392b;
  --rw-gold:#d4b23a;
}
*{margin:0;padding:0;box-sizing:border-box;}
body{min-height:100vh;background:var(--rw-black);font-family:Verdana,Geneva,Tahoma,Arial,sans-serif;color:var(--rw-text);font-size:12px;line-height:1.5;}
a{color:var(--rw-link);text-decoration:underline;}
a:hover{color:var(--rw-green-dark);}

.rw-wrap{max-width:960px;margin:0 auto;background:var(--rw-black);border-left:1px solid #2a2a2a;border-right:1px solid #2a2a2a;}

/* ── Banner (echte afbeelding: images/header.jpg, logo+tagline al ingebakken) ── */
.rw-banner{position:relative;overflow:hidden;background:#000;line-height:0;}
.rw-banner-img-link{display:block;}
.rw-banner-img{display:block;width:100%;height:auto;}
.rw-banner-links{position:absolute;top:10px;right:14px;z-index:2;font-size:11px;line-height:normal;}
.rw-banner-links a{color:#fff;text-decoration:none;margin-left:10px;text-shadow:0 1px 3px rgba(0,0,0,.85);}
.rw-banner-links a:hover{color:var(--rw-green);text-decoration:underline;}

/* ── Login strip ── */
.rw-loginstrip{background:#d8e2c9;border-bottom:1px solid var(--rw-sidebar-border);padding:8px 14px;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:10px;}
.rw-loginform{display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:11px;font-weight:700;color:var(--rw-text);}
.rw-loginform input[type=text],.rw-loginform input[type=password]{font-family:inherit;font-size:11px;padding:3px 5px;border:1px solid #7a8a68;background:#fff;color:#000;width:120px;}
.rw-loginform button{font-family:inherit;font-size:11px;font-weight:700;padding:3px 12px;background:var(--rw-green-dark);color:#fff;border:1px solid var(--rw-sidebar-border);cursor:pointer;}
.rw-loginform button:hover{background:var(--rw-panel-head);}
.rw-loginform label.rw-remember{display:flex;align-items:center;gap:3px;font-weight:400;}
.rw-loginlinks a{font-size:11px;}
.rw-loggedin-strip{background:#d8e2c9;border-bottom:1px solid var(--rw-sidebar-border);padding:8px 14px;font-size:11px;font-weight:700;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:8px;}
.rw-flash{width:100%;background:#f4d3d0;border:1px solid var(--rw-red);color:#7a1a10;font-size:11px;font-weight:700;padding:5px 8px;margin-bottom:6px;}
.rw-flash.rw-flash-ok{background:#dbeecb;border-color:var(--rw-green-dark);color:#1f4a10;}

/* ── Body: sidebar + content ── */
.rw-body{display:flex;align-items:flex-start;gap:0;}
@media(max-width:700px){.rw-body{flex-direction:column;}}

.rw-sidebar{width:190px;flex-shrink:0;background:var(--rw-sidebar-bg);border-right:1px solid var(--rw-sidebar-border);padding-bottom:14px;}
.rw-box-title{background:var(--rw-panel-head);color:#fff;font-size:12px;font-weight:700;padding:5px 10px;border-bottom:1px solid var(--rw-sidebar-border);}
.rw-menu{list-style:none;}
.rw-menu li{border-bottom:1px solid #33421f;}
.rw-menu a{display:block;padding:6px 10px;color:var(--rw-text-light);text-decoration:none;font-size:11px;}
.rw-menu a:hover{background:var(--rw-green-dark);color:#fff;}
.rw-menu li.active a{background:var(--rw-panel-head);color:#fff;font-weight:700;}
.rw-stats-box{padding:8px 10px;color:var(--rw-text-light);font-size:11px;}
.rw-stats-box .rw-stat-row{display:flex;justify-content:space-between;padding:3px 0;border-bottom:1px solid #33421f;}
.rw-stats-box .rw-stat-row:last-child{border-bottom:none;}
.rw-stats-box .rw-stat-val{color:var(--rw-green);font-weight:700;}

.rw-content{flex:1;min-width:0;background:var(--rw-panel-bg);padding:12px;}

.rw-panel{background:var(--rw-panel-bg);border:1px solid var(--rw-panel-border);margin-bottom:12px;}
.rw-panel-title{background:var(--rw-panel-head);color:#fff;font-size:13px;font-weight:700;padding:5px 10px;}
.rw-panel-body{padding:10px 12px;}
.rw-panel-body p{margin-bottom:8px;}
.rw-panel-body p:last-child{margin-bottom:0;}
.rw-panel-body h3{font-size:12px;color:var(--rw-panel-head);margin:10px 0 4px;}
.rw-panel-body h3:first-child{margin-top:0;}
.rw-panel-body ul,.rw-panel-body ol{margin:0 0 8px 20px;}
.rw-panel-body table{border-collapse:collapse;width:100%;margin-bottom:8px;}
.rw-panel-body table th,.rw-panel-body table td{border:1px solid var(--rw-panel-border);padding:4px 7px;font-size:11px;text-align:left;}
.rw-panel-body table th{background:#d3ddc2;}

.rw-two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
@media(max-width:600px){.rw-two-col{grid-template-columns:1fr;}}
.rw-two-col .rw-panel{margin-bottom:0;}

/* Feed */
.rw-feed-item{display:flex;align-items:flex-start;gap:6px;padding:5px 10px;border-bottom:1px solid #cdd8bc;font-size:11px;}
.rw-feed-item:last-child{border-bottom:none;}
.rw-feed-text{flex:1;}
.rw-feed-text b{color:var(--rw-link);}
.rw-feed-time{color:var(--rw-muted);white-space:nowrap;font-size:10px;}
.rw-empty{padding:10px 12px;color:var(--rw-muted);font-size:11px;}

/* Rankings */
.rw-rank-row{display:flex;align-items:center;gap:7px;padding:4px 10px;border-bottom:1px solid #cdd8bc;font-size:11px;}
.rw-rank-row:last-child{border-bottom:none;}
.rw-rank-pos{width:18px;font-weight:700;color:var(--rw-muted);}
.rw-rank-pos.gold{color:#b8860b;}
.rw-rank-pos.silver{color:#7a8272;}
.rw-rank-pos.bronze{color:#a05a2c;}
.rw-rank-name{flex:1;font-weight:700;}
.rw-rank-sub{color:var(--rw-muted);font-size:10px;}
.rw-rank-val{font-weight:700;color:var(--rw-green-dark);}

/* Features list */
.rw-features-list{list-style:none;padding:10px 12px;display:grid;grid-template-columns:1fr 1fr;gap:4px 14px;}
@media(max-width:600px){.rw-features-list{grid-template-columns:1fr;}}
.rw-features-list li{padding:3px 0;font-size:11px;}
.rw-features-list b{color:var(--rw-link);}

/* CTA */
.rw-cta{background:var(--rw-panel-head);color:#fff;padding:12px 14px;text-align:center;font-size:12px;}
.rw-cta a.rw-btn,.rw-cta a{display:inline-block;margin-top:6px;background:var(--rw-green);color:#111;font-weight:700;text-decoration:none;padding:6px 18px;border:1px solid var(--rw-sidebar-border);}
.rw-cta a:hover{background:var(--rw-gold);}

/* ── Generieke formulieren (aanmelden, wachtwoord vergeten, contact) ── */
.rw-form-group{margin-bottom:10px;}
.rw-form-group label{display:block;font-size:11px;font-weight:700;margin-bottom:3px;}
.rw-form-group .rw-hint{font-weight:400;color:var(--rw-muted);font-size:10px;margin-top:2px;}
.rw-form-group input[type=text],.rw-form-group input[type=email],.rw-form-group input[type=password],.rw-form-group input[type=date],.rw-form-group select,.rw-form-group textarea{
  width:100%;max-width:340px;font-family:inherit;font-size:12px;padding:5px 7px;border:1px solid #7a8a68;background:#fff;color:#000;
}
.rw-form-group textarea{max-width:100%;min-height:100px;resize:vertical;}
.rw-form-group .rw-check{display:flex;align-items:flex-start;gap:6px;font-weight:400;font-size:11px;}

.rw-btn{display:inline-block;font-family:inherit;font-size:12px;font-weight:700;padding:7px 20px;background:var(--rw-green-dark);color:#fff;border:1px solid var(--rw-sidebar-border);cursor:pointer;text-decoration:none;}
.rw-btn:hover{background:var(--rw-panel-head);}
.rw-btn.rw-btn-gold{background:var(--rw-gold);color:#1a1a10;}
.rw-btn.rw-btn-gold:hover{filter:brightness(1.08);}

/* ── Footer ── */
.rw-footer{background:var(--rw-black);border-top:2px solid var(--rw-green);padding:14px 18px;color:#9aa88f;font-size:10px;}
.rw-footer-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:14px;margin-bottom:10px;}
.rw-footer-cols h3{color:#fff;font-size:11px;margin-bottom:5px;}
.rw-footer-cols ul{list-style:none;}
.rw-footer-cols a{color:#9aa88f;font-size:10px;text-decoration:none;}
.rw-footer-cols a:hover{color:var(--rw-green);text-decoration:underline;}
.rw-footer-bottom{border-top:1px solid #26301a;padding-top:8px;text-align:center;}