/* --- RESET & VARIABLES --- */
:root { 
    --primary: #2563eb; 
    --primary-dark: #1d4ed8;
    --bg: #f8fafc; 
    --text: #1e293b; 
    --card-bg: #ffffff; 
    --border: #e2e8f0;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

#cpg-ui-container { 
    display: flex; 
    background: var(--bg); 
    font-family: 'Segoe UI', system-ui, -apple-system, sans-serif; 
    min-height: 100vh; 
    color: var(--text); 
    position: relative; 
    max-width: 100%; 
    overflow-x: hidden;
}

/* --- SIDEBAR (Desktop) --- */
.cpg-sidebar { 
    width: 260px; 
    background: #fff; 
    border-right: 1px solid var(--border); 
    display: flex; 
    flex-direction: column; 
    padding: 20px 0; 
    z-index: 100; 
    flex-shrink: 0;
}
.cpg-nav-item { 
    padding: 14px 24px; 
    cursor: pointer; 
    color: #64748b; 
    font-weight: 600; 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    transition: 0.2s; 
    font-size: 15px;
}
.cpg-nav-item:hover, .cpg-nav-item.active { 
    color: var(--primary); 
    background: #eff6ff; 
    border-right: 3px solid var(--primary);
}
.cpg-nav-item i { font-size: 18px; width: 24px; text-align: center; }

/* --- MAIN CONTENT --- */
.cpg-main { 
    flex: 1; 
    padding: 30px; 
    overflow-y: auto; 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    height: 100vh;
}
.cpg-section-title { 
    font-size: 12px; 
    font-weight: 800; 
    color: #94a3b8; 
    letter-spacing: 1px; 
    margin-bottom: 15px; 
    width: 100%; 
    max-width: 500px; 
    text-transform: uppercase;
    flex-shrink: 0; /* Prevent Title Squashing */
}

/* --- CARDS & INPUTS --- */
.cpg-profile-card, .cpg-upload-box { 
    background: var(--card-bg); 
    border-radius: 16px; 
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.05); 
    padding: 20px; 
    width: 100%; 
    max-width: 500px; 
    margin-bottom: 20px; 
    border: 1px solid var(--border); 
}

/* Form Elements */
.cpg-input-nice, .cpg-modal input, select.cpg-input-nice { 
    width: 100%; 
    padding: 14px; 
    border: 1px solid #cbd5e1; 
    border-radius: 10px; 
    background: #fff; 
    font-size: 15px; 
    outline: none; 
    transition: 0.2s; 
    margin-bottom: 12px; 
    color: var(--text);
    flex-shrink: 0; /* Prevent Input Squashing */
}
.cpg-input-nice:focus { border-color: var(--primary); ring: 2px solid #bfdbfe; }

/* Password Wrapper for Eye Icon */
.cpg-pass-wrapper { position: relative; width: 100%; margin-bottom: 12px; }
.cpg-pass-wrapper input { 
    width: 100%; 
    padding: 14px; 
    padding-right: 45px; /* Space for icon */
    border: 1px solid #cbd5e1; 
    border-radius: 10px; 
    background: #fff; 
    font-size: 15px; 
    outline: none; 
    margin-bottom: 0; /* Wrapper handles margin */
}
.cpg-toggle-pass { 
    position: absolute; 
    right: 15px; 
    top: 50%; 
    transform: translateY(-50%); 
    cursor: pointer; 
    color: #94a3b8; 
    font-size: 16px; 
}
.cpg-toggle-pass:hover { color: var(--primary); }

/* Upload Box */
.cpg-upload-box { 
    border: 2px dashed #cbd5e1; 
    text-align: center; 
    cursor: pointer; 
    color: #64748b; 
    transition: 0.2s;
    background: #fdfdfd;
    flex-shrink: 0; /* Prevent Upload Box Squashing */
}
.cpg-upload-box:hover { border-color: var(--primary); color: var(--primary); background: #eff6ff; }
.cpg-upload-box i { font-size: 24px; margin-bottom: 8px; color: var(--primary); }

/* --- TEMPLATE SCROLL --- */
.cpg-template-scroll { 
    display: flex; 
    gap: 15px; 
    overflow-x: auto; 
    width: 100%; 
    max-width: 500px; 
    padding: 5px 5px 15px 5px; 
    scrollbar-width: thin; 
    -webkit-overflow-scrolling: touch; 
    flex-shrink: 0; /* CRITICAL FIX: Prevents templates from disappearing/squashing */
    min-height: 160px; /* Force minimum height to ensure visibility */
}
.cpg-scroll-item { 
    flex: 0 0 auto; 
    width: 100px; 
    height: 135px; 
    border-radius: 12px; 
    overflow: hidden; 
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    border: 3px solid transparent; 
    transition: 0.2s; 
    cursor: pointer;
    background: #eee;
}
.cpg-scroll-item.selected { border-color: var(--primary); transform: translateY(-4px); box-shadow: 0 8px 15px rgba(37, 99, 235, 0.15); }
.cpg-scroll-item img { width: 100%; height: 100%; object-fit: cover; }

/* --- CANVAS WRAPPER --- */
.cpg-canvas-wrapper { 
    background: #fff; 
    padding: 15px; 
    border-radius: 20px; 
    box-shadow: 0 10px 30px rgba(0,0,0,0.08); 
    margin-top: 20px; 
    display: flex;
    justify-content: center;
    align-items: center;
    max-width: 100%;
    flex-shrink: 0; /* Ensure canvas area doesn't shrink awkwardly */
}
#cpg-main-canvas {
    width: 100%;
    height: auto;
    max-width: 300px; 
    object-fit: contain;
}

/* --- RIGHT PANEL (OPTIONS) --- */
.cpg-right-panel { 
    width: 320px; 
    background: #fff; 
    border-left: 1px solid var(--border); 
    padding: 30px 20px; 
    display: flex; 
    flex-direction: column; 
    height: 100vh;
    overflow-y: auto;
}
.cpg-branding-card { 
    display: flex; 
    align-items: center; 
    gap: 15px; 
    padding: 16px; 
    border-radius: 12px; 
    background: #f8fafc; 
    border: 1px solid var(--border); 
    margin-bottom: 12px; 
    cursor: pointer; 
    transition: 0.2s;
}
.cpg-branding-card:hover { background: #f1f5f9; }
.cpg-branding-card.active { background: #eff6ff; border-color: var(--primary); color: var(--primary); font-weight: 600; }
.cpg-branding-card.active::after { content: '\f00c'; font-family: 'Font Awesome 5 Free'; font-weight: 900; margin-left: auto; }
.cpg-icon-box { width: 40px; height: 40px; background: #e2e8f0; border-radius: 10px; display: flex; justify-content: center; align-items: center; font-weight: bold; color: #64748b; }

/* --- BUTTONS --- */
.cpg-action-btn-main { 
    width: 100%; 
    padding: 16px; 
    background: var(--primary); 
    color: white; 
    border: none; 
    border-radius: 14px; 
    font-weight: 700; 
    font-size: 16px; 
    cursor: pointer; 
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.25); 
    margin-top: 15px; /* Spacing fix */
    transition: 0.2s;
}
.cpg-action-btn-main:active { transform: scale(0.98); }
.cpg-btn-small { background: #10b981; color: white; border: none; padding: 8px 16px; border-radius: 8px; cursor: pointer; font-size: 13px; font-weight: 600; }

/* --- PLANS UI --- */
.cpg-plan-card { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    padding: 18px; 
    background: #fff; 
    border: 1px solid var(--border); 
    border-radius: 12px; 
    margin-bottom: 12px; 
    transition: 0.2s; 
}
.cpg-plan-card:hover { border-color: var(--primary); box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
.cpg-btn-buy { background: var(--primary); color: white; border: none; padding: 10px 20px; border-radius: 8px; cursor: pointer; font-weight: bold; }

/* --- WHATSAPP BUTTON --- */
.cpg-whatsapp-btn {
    background: #25d366;
    color: white;
    border: none;
    padding: 12px 20px;
    border-radius: 20px;
    font-weight: bold;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    transition: 0.2s;
    width: 100%;
    justify-content: center;
}
.cpg-whatsapp-btn:hover { background: #128c7e; }

/* --- MODAL --- */
.cpg-modal { display: none; position: fixed; z-index: 9999; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.6); backdrop-filter: blur(8px); justify-content: center; align-items: center; }
.cpg-modal-content { background: white; padding: 30px; border-radius: 24px; width: 90%; max-width: 400px; text-align: center; box-shadow: 0 20px 50px rgba(0,0,0,0.2); position: relative; max-height: 90vh; overflow-y: auto; }
.cpg-close-modal { position: absolute; right: 20px; top: 20px; font-size: 24px; cursor: pointer; color: #cbd5e1; }
.cpg-link { font-size: 14px; color: var(--primary); cursor: pointer; margin-top: 15px; display: inline-block; font-weight: 600; }

/* --- MOBILE RESPONSIVE --- */
@media (max-width: 900px) {
    #cpg-ui-container { 
        flex-direction: column; 
        height: auto; 
        min-height: 100vh;
        padding-bottom: 80px; 
    }
    .cpg-sidebar { 
        position: fixed; 
        bottom: 0; 
        left: 0; 
        width: 100%; 
        height: 70px; 
        flex-direction: row; 
        justify-content: space-around; 
        padding: 0; 
        border-right: none; 
        border-top: 1px solid var(--border); 
        box-shadow: 0 -5px 20px rgba(0,0,0,0.05);
        z-index: 999;
    }
    .cpg-nav-item { 
        flex-direction: column; 
        gap: 4px; 
        font-size: 10px; 
        padding: 8px; 
        flex: 1; 
        justify-content: center; 
        border-right: none;
        background: transparent;
    }
    .cpg-nav-item.active { background: transparent; color: var(--primary); border-right: none; }
    .cpg-nav-item i { font-size: 22px; width: auto; margin-bottom: 2px; }
    .cpg-main { 
        padding: 15px; 
        width: 100%; 
        height: auto; 
        order: 1; 
    }
    .cpg-right-panel { 
        width: 100%; 
        border-left: none; 
        border-top: 1px solid var(--border); 
        background: #fff; 
        padding: 20px; 
        height: auto; 
        order: 2; 
        margin-bottom: 20px;
    }
    .cpg-canvas-wrapper { width: 100%; max-width: 100%; padding: 10px; }
    #cpg-main-canvas { max-width: 100%; height: auto; }
    .cpg-scroll-item { width: 90px; height: 120px; }
    .cpg-template-scroll { padding-bottom: 10px; }
    .cpg-section-title { text-align: center; margin-top: 10px; }
    .cpg-action-btn-main { padding: 18px; font-size: 18px; }
}