/* ═══════════════════════════════════════════
 * eRENTabil.MD — Pagina Produs SEO
 * Stiluri specifice paginii /produs/
 * ═══════════════════════════════════════════ */

:root{--R:#cc1111;--G:#1a7a2e;--W:#fff;--BG:#ffffff;--D:#0f0f0f;--GR:#e5e5e5;--GY:#666;--sh:0 2px 12px rgba(0,0,0,0.07);--sh2:0 8px 40px rgba(0,0,0,0.13);--rad:14px;}

/* ─── RESET ─── */
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'Nunito', sans-serif; background: transparent; color: var(--D); }

/* ─── LAYOUT ─── */
.container { max-width: 1100px; margin: 0 auto; padding: 0 20px; }

/* ─── HEADER ─── */
.header { background: var(--D); padding: 16px 0; }
.header .logo { font-size: 20px; font-weight: 900; color: #fff; text-decoration: none; }
.header .logo .g { color: var(--G); }
.header .logo .r { color: var(--R); }

/* ─── BREADCRUMB ─── */
.breadcrumb { padding: 16px 0; font-size: 13px; color: var(--GY); }
.breadcrumb a { color: var(--G); text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.breadcrumb span { margin: 0 6px; }

/* ─── PRODUS GRID ─── */
.prod-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; margin-bottom: 40px; }
@media (max-width: 768px) { .prod-grid { grid-template-columns: 1fr; } }

/* ─── PRODUS IMAGINE ─── */
.prod-img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 16px; background: rgba(255,255,255,0.85); }
.prod-img-placeholder { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 80px; background: rgba(255,255,255,0.85); border-radius: 16px; }

/* ─── PRODUS DETALII ─── */
.prod-cat { font-size: 13px; color: var(--G); font-weight: 700; margin-bottom: 8px; }
.prod-name { font-size: 32px; font-weight: 900; line-height: 1.1; margin-bottom: 12px; }
.prod-desc { font-size: 15px; color: #444; line-height: 1.6; margin-bottom: 20px; }

/* ─── BADGE DISPONIBILITATE ─── */
.badge { display: inline-block; padding: 4px 14px; border-radius: 20px; font-size: 12px; font-weight: 800; margin-bottom: 16px; }
.badge-available { background: #dcfce7; color: #16a34a; }
.badge-rented { background: #fee2e2; color: #dc2626; }
.badge-soon { background: #fef9c3; color: #92400e; }

/* ─── PREȚURI ─── */
.prices { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; margin-bottom: 24px; }
.price-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border: 2px solid var(--GR); border-radius: 12px; padding: 14px; text-align: center; }
.price-period { font-size: 12px; color: var(--GY); font-weight: 700; }
.price-val { font-size: 24px; font-weight: 900; color: var(--R); }
.price-unit { font-size: 12px; color: var(--GY); }

/* ─── CTA BUTTONS ─── */
.cta { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 20px; }
.btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 28px; border-radius: 12px; font-size: 15px; font-weight: 800; text-decoration: none; border: none; cursor: pointer; transition: .2s; }
.btn-r { background: var(--R); color: #fff; }
.btn-r:hover { background: #a00; }
.btn-g { background: var(--G); color: #fff; }
.btn-gh { background: #fff; color: var(--D); border: 2px solid var(--GR); }

/* ─── INFO DETALII (extras din inline) ─── */
.prod-info { font-size: 13px; color: var(--GY); line-height: 1.8; }

/* ─── PRODUSE SIMILARE ─── */
.related { margin: 40px 0; }
.related h2 { font-size: 22px; font-weight: 900; margin-bottom: 20px; }
.related-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }
.rel-card { background: rgba(255,255,255,0.85); backdrop-filter: blur(8px); border-radius: 14px; overflow: hidden; text-decoration: none; color: var(--D); transition: .2s; }
.rel-card:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0,0,0,.1); }
.rel-card img { width: 100%; aspect-ratio: 1; object-fit: cover; }
.rel-card .body { padding: 12px; }
.rel-card .nm { font-weight: 800; font-size: 14px; }
.rel-card .pr { font-size: 13px; color: var(--R); font-weight: 700; }

/* ─── PLACEHOLDER CARD IMAGINE (extras din inline) ─── */
.rel-card-placeholder { width: 100%; aspect-ratio: 1; display: flex; align-items: center; justify-content: center; font-size: 48px; background: #f5f5f5; }

/* ─── FOOTER ─── */
.footer { background: var(--D); backdrop-filter: blur(12px); color: #fff; padding: 30px 0; margin-top: 40px; text-align: center; font-size: 13px; }
.footer a { color: var(--G); text-decoration: none; }
.footer-logo { font-size: 18px; font-weight: 900; margin-bottom: 8px; }
.footer-logo .g { color: var(--G); }
.footer-logo .r { color: var(--R); }
.footer-copy { margin-top: 12px; }

/* ─── 404 ─── */
.not-found { text-align: center; padding: 80px 20px; }
.not-found h1 { font-size: 48px; color: var(--R); }
.not-found p { font-size: 16px; color: var(--GY); margin: 12px 0 24px; }

/* ═══ ANIMATED BACKGROUND for produs.php ═══ */
#er-bg-canvas{position:fixed;inset:0;z-index:0;pointer-events:none;}
.er-aurora{position:fixed;inset:0;z-index:0;pointer-events:none;overflow:hidden;}
.er-aurora::before,.er-aurora::after{content:'';position:absolute;border-radius:50%;filter:blur(100px);opacity:.45;will-change:transform;}
.er-aurora::before{width:60vw;height:60vw;max-width:800px;max-height:800px;background:conic-gradient(from 0deg,rgba(204,17,17,.14),rgba(26,122,46,.12),rgba(245,158,11,.1),rgba(204,17,17,.14));top:-15vw;right:-10vw;animation:auroraA 20s ease-in-out infinite;}
.er-aurora::after{width:50vw;height:50vw;max-width:700px;max-height:700px;background:conic-gradient(from 180deg,rgba(26,122,46,.12),rgba(204,17,17,.1),rgba(245,158,11,.08),rgba(26,122,46,.12));bottom:-10vw;left:-8vw;animation:auroraB 24s ease-in-out infinite;}
.er-orb{position:fixed;border-radius:50%;pointer-events:none;z-index:0;backdrop-filter:blur(1px);border:1px solid rgba(255,255,255,.15);}
.er-orb--1{width:180px;height:180px;background:radial-gradient(circle at 30% 30%,rgba(204,17,17,.1),rgba(204,17,17,.03));top:20%;right:8%;animation:orbFloat1 16s ease-in-out infinite;}
.er-orb--2{width:120px;height:120px;background:radial-gradient(circle at 30% 30%,rgba(26,122,46,.1),rgba(26,122,46,.02));bottom:25%;left:5%;animation:orbFloat2 20s ease-in-out infinite;}
.er-orb--3{width:90px;height:90px;background:radial-gradient(circle at 30% 30%,rgba(245,158,11,.08),rgba(245,158,11,.02));top:55%;left:45%;animation:orbFloat3 14s ease-in-out infinite;}
.er-grid-overlay{position:fixed;inset:0;z-index:0;pointer-events:none;background-image:linear-gradient(rgba(204,17,17,.018) 1px,transparent 1px),linear-gradient(90deg,rgba(204,17,17,.018) 1px,transparent 1px);background-size:60px 60px;opacity:.6;}
@keyframes auroraA{0%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(-40px,30px) rotate(45deg) scale(1.1)}50%{transform:translate(-60px,50px) rotate(90deg) scale(1.15)}75%{transform:translate(-20px,15px) rotate(135deg) scale(1.05)}100%{transform:translate(0,0) rotate(180deg) scale(1)}}
@keyframes auroraB{0%{transform:translate(0,0) rotate(0deg) scale(1)}25%{transform:translate(50px,-20px) rotate(-60deg) scale(1.12)}50%{transform:translate(70px,-40px) rotate(-120deg) scale(1.18)}75%{transform:translate(25px,-10px) rotate(-180deg) scale(1.06)}100%{transform:translate(0,0) rotate(-240deg) scale(1)}}
@keyframes orbFloat1{0%,100%{transform:translate(0,0) scale(1);opacity:.5}25%{transform:translate(-25px,20px) scale(1.08);opacity:.7}50%{transform:translate(-40px,35px) scale(1.12);opacity:.9}75%{transform:translate(-15px,12px) scale(1.04);opacity:.6}}
@keyframes orbFloat2{0%,100%{transform:translate(0,0) scale(1);opacity:.4}33%{transform:translate(30px,-20px) scale(1.1);opacity:.75}66%{transform:translate(15px,-35px) scale(.95);opacity:.55}}
@keyframes orbFloat3{0%,100%{transform:translate(0,0);opacity:.35}50%{transform:translate(-20px,25px);opacity:.7}}
.header,.container,.breadcrumb,.prod-wrap,.related,.footer{position:relative;z-index:1;}
@media(prefers-reduced-motion:reduce){.er-aurora::before,.er-aurora::after,.er-orb{animation:none!important;}#er-bg-canvas{display:none;}}