/* hp-style.css - admin and front simple styling (white + light blue theme) */
.hp-wrap { font-family: "Segoe UI", Tahoma, Arial, sans-serif; }
.hp-grid { display:flex; gap:20px; align-items:flex-start; }
.hp-left { flex: 1 1 45%; background:#fff; padding:18px; border-radius:12px; border:1px solid #e3f2fd; box-shadow:0 6px 18px rgba(0,0,0,0.03); }
.hp-right { flex: 1 1 55%; background:#fff; padding:18px; border-radius:12px; border:1px solid #e3f2fd; box-shadow:0 6px 18px rgba(0,0,0,0.03); }

/* Template 1 */
.hp-card { background:var(--hp-accent,#fff); border-radius:12px; padding:18px; margin:10px; border:1px solid var(--hp-accent,#e3f2fd); box-shadow:0 6px 12px rgba(0,0,0,0.04); color:var(--hp-primary,#0d47a1); max-width:320px; display:inline-block; vertical-align:top; }
.hp-card.hp-featured { border:2px solid var(--hp-primary,#0288d1); transform:translateY(-6px); }
.hp-card .hp-price { font-size:20px; color:var(--hp-primary,#0288d1); font-weight:700; margin:8px 0; }
.hp-card .hp-btn { display:inline-block; padding:10px 16px; background:var(--hp-primary,#0288d1); color:#fff; border-radius:8px; text-decoration:none; margin-top:10px; }
.hp-card .hp-btn:hover { filter:brightness(0.9); }
.hp-image img{ max-width:100%; border-radius:8px; margin-bottom:8px; }

/* Template 2 */
.hp-template-2 { max-width:320px; border-radius:12px; overflow:hidden; display:inline-block; margin:10px; box-shadow:0 6px 18px rgba(0,0,0,0.06); }
.hp-template-2 .hp-price-bar { background:var(--hp-primary,#0288d1); color:#fff; padding:10px; text-align:center; font-weight:700; }
.hp-template-2 .hp-card-body { background:var(--hp-accent,#fff); padding:16px; color:var(--hp-primary,#0d47a1); }
.hp-template-2 .hp-btn { display:inline-block; padding:10px 14px; background:var(--hp-primary,#0288d1); color:#fff; border-radius:8px; text-decoration:none; margin-top:10px; }

.hp-list { display:flex; flex-wrap:wrap; gap:12px; }

/* admin small */
.hp-code-input { width: calc(100% - 100px); padding:6px; display:inline-block; }
.hp-copy-btn { display:inline-block; vertical-align:top; margin-left:6px; }
.hp-upload-btn { margin-left:6px; }

/* responsive */
@media (max-width:900px){ .hp-grid{flex-direction:column;} .hp-card{max-width:100%;} }