/* === FRONTEND === */

.btn-wrap { text-align:center; margin:2em 0; clear:both }
.btn-hi { display:inline-flex; align-items:center; justify-content:center; padding:12px 24px; background:#000; color:#fff!important; border:1px solid #000; font-family:"Helvetica Neue",Helvetica,Arial,sans-serif; font-weight:600; font-size:12px; text-transform:uppercase; letter-spacing:.08em; text-decoration:none!important; transition:all .25s ease }
.btn-hi:hover { background:#333; transform:translateY(-2px); box-shadow:0 8px 15px rgba(0,0,0,.15) }

/* === GALERIE === */

.cta-gallery-container { position:relative; max-width:1000px; margin:30px auto; padding:0 50px; box-sizing:border-box }
.cta-gallery-track { display:flex; align-items:stretch; gap:20px; overflow-x:auto; scroll-behavior:smooth; scroll-snap-type:x mandatory; padding:10px 5px 20px; -webkit-overflow-scrolling:touch; scrollbar-width:none }
.cta-gallery-track::-webkit-scrollbar { display:none }
.cta-arrow { position:absolute; top:50%; transform:translateY(-50%); background:#fff; border:1px solid #eee; width:44px; height:44px; border-radius:50%; box-shadow:0 4px 10px rgba(0,0,0,.1); cursor:pointer; font-size:18px; color:#333; z-index:10; display:flex; align-items:center; justify-content:center }
.cta-arrow:hover { background:#000; color:#fff; border-color:#000 }
.cta-prev { left:0 }
.cta-next { right:0 }
.cta-card { flex:0 0 300px; min-width:300px; max-width:300px; scroll-snap-align:center; background:#fff; border:1px solid #f0f0f0; border-radius:8px; padding:15px; text-align:center; display:flex; flex-direction:column; transition:transform .3s ease,box-shadow .3s ease }
.cta-card:hover { transform:translateY(-5px); box-shadow:0 15px 30px rgba(0,0,0,.08) }
.cta-card-img-wrap { width:100%; height:380px; margin-bottom:15px; border-radius:4px; background:#f9f9f9; display:flex; align-items:center; justify-content:center }
.cta-card-img { max-width:100%; max-height:100%; object-fit:contain }
.cta-card:hover .cta-card-img { transform:scale(1.03) }
.cta-card-title { font-size:15px; font-weight:500; color:#222; margin:0 0 15px; line-height:1.4; flex-grow:1; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden }
.cta-card .btn-hi { width:100%; font-size:11px; margin-top:auto }

/* === MOBILE === */

@media(max-width:768px) { .cta-gallery-container { padding:0 10px } .cta-arrow { display:none } }
@media(max-width:480px) { .cta-card { flex:0 0 85vw; min-width:85vw; max-width:85vw } .cta-card-img-wrap { height:320px } }

/* === ADMIN === */

.img-preview-box { width:100%; height:200px; background:#fafafa; border:2px dashed #ddd; border-radius:8px; display:flex; align-items:center; justify-content:center; cursor:pointer; position:relative; transition:all .2s }
.img-preview-box:hover { border-color:#bbb; background:#f0f0f0 }
.img-preview-box.has-image { border:1px solid #eee; background:#fff }
.placeholder-content { text-align:center; color:#888; pointer-events:none }
#cta-visual-preview { width:100%; height:100%; object-fit:contain; display:none }
.overlay-actions { position:absolute; inset:0; background:rgba(255,255,255,.9); display:none; flex-direction:column; align-items:center; justify-content:center; gap:10px }
.img-preview-box.has-image:hover .overlay-actions { display:flex }
.btn-action { padding:8px 16px; border:1px solid #ccc; border-radius:20px; cursor:pointer; font-size:13px; font-weight:600; background:#fff }
.btn-edit { color:#333 }
.btn-delete { color:#d63031; border-color:#fab1a0; background:#fff5f5 }
.button-link-edit:hover { background:#f0f0f0!important }
.button-link-delete:hover { background:#ffe6e6!important }