/* ===== Cookies & Courtesies Gift Sender — Modern Dashboard ===== */
/* Version: 3.2 - Tighter padding, less rounded, consistent spacing */

/* ═══════════════════════════════════════════════════════════════════
   LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-wrap {
    background: #F9F4EF !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ccgs-dashboard {
    display: flex !important;
    align-items: flex-start !important;
    max-width: 1480px !important;
    margin: 0 auto !important;
    padding: 16px !important;
    gap: 20px !important;
    min-height: calc(100vh - 200px) !important;
    background: #F9F4EF !important;
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.ccgs-dashboard > p:empty,
.ccgs-dash-main > p:empty,
.ccgs-dash-section > p:empty,
.ccgs-dashboard > br,
.ccgs-dash-main > br,
.ccgs-dash-section > br {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL SVG RESET — CRITICAL
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-wrap svg,
.ccgs-dashboard svg {
    display: block !important;
    overflow: visible !important;
    max-width: 100% !important;
    max-height: 100% !important;
}

.ccgs-icon {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
    display: block !important;
    flex-shrink: 0 !important;
    fill: currentColor !important;
}

.ccgs-icon--lg {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
}

.ccgs-icon--sm {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    min-height: 16px !important;
}

/* Filter tabs (My Uploads) */
.ccgs-filter-tabs {
    display: flex !important;
    gap: 8px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    margin: 0 !important;
}

.ccgs-filter-tabs .ccgs-tab-btn {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.ccgs-filter-tabs .ccgs-tab-btn svg {
    width: 16px !important;
    height: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    display: block !important;
    stroke: currentColor !important;
    fill: none !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SIDEBAR
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-sidebar {
    width: 220px !important;
    flex-shrink: 0 !important;
    background: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 8px rgba(0,0,0,0.05) !important;
    padding: 0 !important;
    position: sticky !important;
    top: 32px !important;
    height: fit-content !important;
    overflow: hidden !important;
    align-self: flex-start !important;
}

.ccgs-sidebar__profile {
    text-align: center !important;
    padding: 20px 14px 16px !important;
    background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%) !important;
    color: #FFFFFF !important;
}

.ccgs-sidebar__avatar {
    width: 56px !important;
    height: 56px !important;
    margin: 0 auto 10px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    border: 3px solid rgba(255,255,255,0.4) !important;
    background: rgba(255,255,255,0.2) !important;
}

.ccgs-sidebar__avatar img,
.ccgs-avatar-img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

.ccgs-sidebar__name {
    font-size: 14px !important;
    font-weight: 600 !important;
    margin-bottom: 1px !important;
    color: #FFFFFF !important;
}

.ccgs-sidebar__email {
    font-size: 11px !important;
    opacity: 0.9 !important;
    color: #FFFFFF !important;
}

/* SIDEBAR NAV */
.ccgs-sidebar__nav {
    display: flex !important;
    flex-direction: column !important;
    padding: 8px 6px !important;
    gap: 1px !important;
    margin: 0 !important;
}

.ccgs-sidebar__btn {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 8px 12px !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555555 !important;
    transition: all 0.15s ease !important;
    text-align: left !important;
    background: transparent !important;
    border: none !important;
    cursor: pointer !important;
    width: 100% !important;
    font-family: 'Poppins', sans-serif !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.ccgs-sidebar__btn:hover {
    background: #F9F4EF !important;
    color: #D32F2F !important;
}

.ccgs-sidebar__btn.active {
    background: #FFEBEE !important;
    color: #D32F2F !important;
    font-weight: 600 !important;
}

.ccgs-sidebar__btn .ccgs-icon,
.ccgs-sidebar__btn svg {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    min-height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    flex-shrink: 0 !important;
    display: block !important;
    fill: currentColor !important;
    align-self: center !important;
}

.ccgs-sidebar__footer {
    padding: 8px 6px !important;
    border-top: 1px solid #EDE5DC !important;
    margin: 2px 6px 6px !important;
}

.ccgs-sidebar__link {
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    padding: 6px 8px !important;
    font-size: 12px !important;
    color: #999999 !important;
    border-radius: 6px !important;
    transition: all 0.2s !important;
    text-decoration: none !important;
}

.ccgs-sidebar__link:hover {
    color: #D32F2F !important;
    background: #F9F4EF !important;
}

.ccgs-sidebar__link .ccgs-icon,
.ccgs-sidebar__link svg {
    width: 16px !important;
    height: 16px !important;
    min-width: 16px !important;
    max-width: 16px !important;
    max-height: 16px !important;
    flex-shrink: 0 !important;
    display: block !important;
    fill: currentColor !important;
    align-self: center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   MAIN CONTENT
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-dash-main {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
}

/* ═══════════════════════════════════════════════════════════════════
   TOP BANNER
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-dash-banner {
    background: linear-gradient(135deg, #D32F2F 0%, #C41E3A 50%, #B71C1C 100%) !important;
    color: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 18px 24px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    box-shadow: 0 4px 16px rgba(211, 47, 47, 0.25) !important;
    position: relative !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
}

.ccgs-dash-banner::before {
    content: '🍪' !important;
    position: absolute !important;
    right: 160px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    font-size: 100px !important;
    opacity: 0.15 !important;
}

.ccgs-dash-banner__content h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin-bottom: 4px !important;
    color: #FFFFFF !important;
}

.ccgs-dash-banner__content p {
    font-size: 14px !important;
    opacity: 0.95 !important;
    color: #FFFFFF !important;
    margin: 0 !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-btn--white,
.ccgs-dash-banner .ccgs-btn--white {
    background: #FFFFFF !important;
    color: #2D2D2D !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.15) !important;
    transition: all 0.3s ease !important;
    white-space: nowrap !important;
}

.ccgs-btn--white:hover {
    background: #FFF0F0 !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2) !important;
    color: #2D2D2D !important;
}

.ccgs-btn--primary {
    background: linear-gradient(135deg, #D32F2F, #C41E3A) !important;
    color: #FFFFFF !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    border: none !important;
    cursor: pointer !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    box-shadow: 0 4px 16px rgba(211, 47, 47, 0.35) !important;
    transition: all 0.3s ease !important;
    font-family: 'Poppins', sans-serif !important;
    white-space: nowrap !important;
}

.ccgs-btn--primary:hover {
    transform: translateY(-2px) !important;
    box-shadow: 0 6px 24px rgba(211, 47, 47, 0.45) !important;
    color: #FFFFFF !important;
}

.ccgs-btn--secondary {
    background: #FFFFFF !important;
    color: #555555 !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1.5px solid #E0D6CE !important;
    cursor: pointer !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s !important;
    font-family: 'Poppins', sans-serif !important;
    white-space: nowrap !important;
}

.ccgs-btn--secondary:hover {
    border-color: #D32F2F !important;
    color: #D32F2F !important;
    background: #FFF8F8 !important;
}

.ccgs-btn--outline {
    background: transparent !important;
    color: #D32F2F !important;
    font-weight: 600 !important;
    padding: 10px 20px !important;
    border-radius: 8px !important;
    border: 2px solid #D32F2F !important;
    cursor: pointer !important;
    font-size: 14px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.3s !important;
}

.ccgs-btn--outline:hover {
    background: #D32F2F !important;
    border-color: #D32F2F !important;
    color: #FFFFFF !important;
}

.ccgs-btn--small { padding: 6px 14px !important; font-size: 12px !important; }
.ccgs-btn--large { padding: 12px 24px !important; font-size: 15px !important; }

.ccgs-btn--ghost {
    background: transparent !important;
    color: #555555 !important;
    font-weight: 500 !important;
    padding: 8px 16px !important;
    border-radius: 8px !important;
    border: 1.5px solid #E0D6CE !important;
    cursor: pointer !important;
    font-size: 13px !important;
    text-decoration: none !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    transition: all 0.2s !important;
    font-family: 'Poppins', sans-serif !important;
    white-space: nowrap !important;
}

.ccgs-btn--ghost:hover {
    border-color: #D32F2F !important;
    color: #D32F2F !important;
    background: #FFF8F8 !important;
}

.ccgs-btn svg,
.ccgs-btn .ccgs-icon {
    width: 18px !important;
    height: 18px !important;
    max-width: 18px !important;
    max-height: 18px !important;
    display: block !important;
    flex-shrink: 0 !important;
    fill: currentColor !important;
}

/* ═══════════════════════════════════════════════════════════════════
   SECTIONS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-dash-section {
    display: none !important;
    flex-direction: column !important;
    gap: 20px !important;
}

.ccgs-dash-section.active {
    display: flex !important;
    animation: ccgsFadeIn 0.2s ease !important;
}

@keyframes ccgsFadeIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ═══════════════════════════════════════════════════════════════════
   SECTION HEADER
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-section-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    flex-wrap: wrap !important;
    gap: 16px !important;
}

.ccgs-section-header > div:first-child {
    flex: 1 !important;
    min-width: 200px !important;
}

.ccgs-section-header h2 {
    font-size: 20px !important;
    font-weight: 700 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #2D2D2D !important;
    margin: 0 !important;
    line-height: 1.3 !important;
}

.ccgs-section-header h2 .ccgs-icon,
.ccgs-section-header h2 > svg {
    color: #D32F2F !important;
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    flex-shrink: 0 !important;
    display: block !important;
    align-self: center !important;
}

.ccgs-section-header h2 > svg[fill="none"] {
    fill: none !important;
    stroke: #D32F2F !important;
}

.ccgs-section-desc {
    font-size: 13px !important;
    color: #999999 !important;
    margin-top: 4px !important;
    margin-bottom: 0 !important;
}

.ccgs-header-actions {
    display: flex !important;
    gap: 10px !important;
    flex-wrap: wrap !important;
}

/* ═══════════════════════════════════════════════════════════════════
   STATS CARDS (My Orders)
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-stats-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
}

.ccgs-stat-card {
    background: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
    transition: all 0.3s ease !important;
    border: 1px solid transparent !important;
}

.ccgs-stat-card:hover {
    transform: translateY(-4px) !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.10) !important;
    border-color: #FFCDD2 !important;
}

.ccgs-stat-card__icon {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
}

.ccgs-stat-card__icon svg {
    width: 22px !important;
    height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    fill: currentColor !important;
}

.ccgs-stat-card__icon--red { background: linear-gradient(135deg, #FFEBEE, #FFCDD2) !important; color: #D32F2F !important; }
.ccgs-stat-card__icon--yellow { background: linear-gradient(135deg, #FFF8E1, #FFECB3) !important; color: #F57F17 !important; }
.ccgs-stat-card__icon--blue { background: linear-gradient(135deg, #E3F2FD, #BBDEFB) !important; color: #1565C0 !important; }
.ccgs-stat-card__icon--green { background: linear-gradient(135deg, #E8F5E9, #C8E6C9) !important; color: #2E7D32 !important; }

.ccgs-stat-card__info { display: flex !important; flex-direction: column !important; }
.ccgs-stat-card__value { font-size: 24px !important; font-weight: 700 !important; line-height: 1 !important; margin-bottom: 2px !important; color: #2D2D2D !important; }
.ccgs-stat-card__label { font-size: 12px !important; color: #999999 !important; font-weight: 500 !important; }

/* ═══════════════════════════════════════════════════════════════════
   MINI STATS (Contacts) — FIX GIANT ICONS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-contact-stats {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 16px !important;
}

.ccgs-mini-stat {
    background: #FFFFFF !important;
    border-radius: 10px !important;
    padding: 16px !important;
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
}

.ccgs-mini-stat__icon {
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    max-width: 40px !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    overflow: hidden !important;
}

.ccgs-mini-stat__icon svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: block !important;
    flex-shrink: 0 !important;
    fill: none !important;
    stroke: currentColor !important;
    stroke-width: 2 !important;
}

.ccgs-mini-stat__icon--blue { background: linear-gradient(135deg, #E3F2FD, #BBDEFB) !important; color: #1565C0 !important; }
.ccgs-mini-stat__icon--green { background: linear-gradient(135deg, #E8F5E9, #C8E6C9) !important; color: #2E7D32 !important; }
.ccgs-mini-stat__icon--red { background: linear-gradient(135deg, #FFEBEE, #FFCDD2) !important; color: #D32F2F !important; }

.ccgs-mini-stat__info { display: flex !important; flex-direction: column !important; }
.ccgs-mini-stat__value { font-size: 24px !important; font-weight: 700 !important; line-height: 1.1 !important; color: #2D2D2D !important; }
.ccgs-mini-stat__label { font-size: 12px !important; color: #999999 !important; font-weight: 500 !important; }

/* ═══════════════════════════════════════════════════════════════════
   CARDS & PANELS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-card {
    background: #FFFFFF !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important;
    padding: 16px !important;
}

.ccgs-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
}

.ccgs-card-header h3 {
    font-size: 16px !important;
    font-weight: 600 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
    color: #2D2D2D !important;
    margin: 0 !important;
}

.ccgs-card-header h3 .ccgs-icon,
.ccgs-card-header h3 > svg {
    color: #D32F2F !important;
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    max-width: 20px !important;
    max-height: 20px !important;
    flex-shrink: 0 !important;
    display: block !important;
    align-self: center !important;
}

/* ═══════════════════════════════════════════════════════════════════
   FILTER TABS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-card-tabs {
    display: flex !important;
    gap: 8px !important;
    margin-bottom: 16px !important;
    flex-wrap: wrap !important;
    padding: 0 !important;
    border: none !important;
    border-bottom: none !important;
}

.ccgs-tab-btn {
    padding: 8px 16px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: #555555 !important;
    background: #F5F5F5 !important;
    border: none !important;
    cursor: pointer !important;
    transition: all 0.25s ease !important;
    font-family: 'Poppins', sans-serif !important;
    line-height: 1.4 !important;
}

.ccgs-tab-btn:hover { background: #FFEBEE !important; color: #D32F2F !important; }
.ccgs-tab-btn.active { background: #2D2D2D !important; color: #FFFFFF !important; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important; }

/* ═══════════════════════════════════════════════════════════════════
   STORAGE STATS (My Uploads) — FIX VERTICAL LAYOUT
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-storage-card { padding: 20px !important; }
.ccgs-storage-info { display: flex !important; flex-direction: column !important; gap: 16px !important; }
.ccgs-storage-stats { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 16px !important; }
.ccgs-storage-stat { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; padding: 12px !important; background: #F9F4EF !important; border-radius: 12px !important; }
.ccgs-storage-stat__value { font-size: 28px !important; font-weight: 700 !important; color: #D32F2F !important; line-height: 1.1 !important; }
.ccgs-storage-stat__label { font-size: 12px !important; color: #777777 !important; font-weight: 500 !important; margin-top: 4px !important; }
.ccgs-storage-bar__label { display: flex !important; justify-content: space-between !important; font-size: 12px !important; color: #999999 !important; margin-bottom: 8px !important; }
.ccgs-storage-bar__track { height: 8px !important; background: #F0E8E0 !important; border-radius: 10px !important; overflow: hidden !important; }
.ccgs-storage-bar__fill { height: 100% !important; background: linear-gradient(90deg, #D32F2F, #FF5252) !important; border-radius: 10px !important; transition: width 0.5s ease !important; }

/* ═══════════════════════════════════════════════════════════════════
   UPLOAD ZONE
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-upload-zone {
    text-align: center !important;
    border: 2px dashed #E0D6CE !important;
    background: #F9F4EF !important;
    padding: 48px 32px !important;
    transition: all 0.3s ease !important;
    cursor: pointer !important;
    border-radius: 10px !important;
}

.ccgs-upload-zone:hover,
.ccgs-upload-zone.dragging { border-color: #D32F2F !important; background: #FFF8F8 !important; }

.ccgs-upload-zone__icon {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
    margin: 0 auto 16px !important;
    color: #D32F2F !important;
    opacity: 0.6 !important;
}

.ccgs-upload-zone__icon svg {
    width: 64px !important;
    height: 64px !important;
    max-width: 64px !important;
    max-height: 64px !important;
}

.ccgs-upload-zone h3 { font-size: 18px !important; font-weight: 600 !important; margin-bottom: 8px !important; color: #2D2D2D !important; }
.ccgs-upload-zone p { color: #999999 !important; font-size: 14px !important; margin-bottom: 8px !important; }
.ccgs-upload-zone__hint { font-size: 12px !important; color: #BBBBBB !important; }

/* ═══════════════════════════════════════════════════════════════════
   DATA TABLE
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-table-wrap { overflow-x: auto !important; margin: 0 !important; }
.ccgs-data-table { width: 100% !important; border-collapse: collapse !important; }
.ccgs-data-table th { text-align: left !important; padding: 14px 16px !important; font-size: 11px !important; font-weight: 700 !important; color: #999999 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; border-bottom: 2px solid #F0E8E0 !important; white-space: nowrap !important; background: #F9F4EF !important; }
.ccgs-data-table td { padding: 16px !important; font-size: 14px !important; border-bottom: 1px solid #F0E8E0 !important; color: #2D2D2D !important; vertical-align: middle !important; }
.ccgs-data-table tbody tr { transition: background 0.2s !important; }
.ccgs-data-table tbody tr:hover td { background: #FFFAF8 !important; }
.ccgs-data-table tbody tr:last-child td { border-bottom: none !important; }

.ccgs-order-id { font-weight: 600 !important; color: #D32F2F !important; }
.ccgs-item-cell { display: flex !important; align-items: center !important; gap: 14px !important; }
.ccgs-item-thumb { width: 48px !important; height: 48px !important; border-radius: 12px !important; object-fit: cover !important; flex-shrink: 0 !important; background: #F9F4EF !important; }
.ccgs-item-info { display: flex !important; flex-direction: column !important; }
.ccgs-item-name { font-weight: 600 !important; color: #2D2D2D !important; line-height: 1.3 !important; }
.ccgs-item-meta { font-size: 12px !important; color: #999999 !important; }
.ccgs-recipient-cell { display: flex !important; flex-direction: column !important; }
.ccgs-recipient-name { font-weight: 500 !important; }
.ccgs-date { color: #777777 !important; }
.ccgs-amount { font-weight: 600 !important; color: #2D2D2D !important; }
.ccgs-text-muted { color: #999999 !important; }

.ccgs-contact-cell { display: flex !important; align-items: center !important; gap: 12px !important; }
.ccgs-contact-avatar { width: 36px !important; height: 36px !important; min-width: 36px !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #FFFFFF !important; font-size: 12px !important; font-weight: 600 !important; }
.ccgs-contact-info { display: flex !important; flex-direction: column !important; }
.ccgs-contact-name { font-weight: 600 !important; font-size: 14px !important; color: #2D2D2D !important; }
.ccgs-contact-email { font-size: 12px !important; color: #999999 !important; }

/* ═══════════════════════════════════════════════════════════════════
   BADGES
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-badge { display: inline-flex !important; align-items: center !important; padding: 4px 10px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; white-space: nowrap !important; }
.ccgs-badge--pending, .ccgs-badge--processing { background: linear-gradient(135deg, #FFF8E1, #FFECB3) !important; color: #E65100 !important; }
.ccgs-badge--claimed { background: linear-gradient(135deg, #E3F2FD, #BBDEFB) !important; color: #1565C0 !important; }
.ccgs-badge--shipped { background: linear-gradient(135deg, #E3F2FD, #BBDEFB) !important; color: #0D47A1 !important; }
.ccgs-badge--delivered { background: linear-gradient(135deg, #E8F5E9, #C8E6C9) !important; color: #2E7D32 !important; }

/* ═══════════════════════════════════════════════════════════════════
   TABLE FOOTER & PAGINATION
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-table-footer { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-top: 20px !important; padding-top: 20px !important; border-top: 1px solid #F0E8E0 !important; flex-wrap: wrap !important; gap: 16px !important; }
.ccgs-selected-count { font-size: 13px !important; color: #999999 !important; }
.ccgs-bulk-actions { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; }
.ccgs-pagination { display: flex !important; gap: 6px !important; }
.ccgs-pg-btn { width: 36px !important; height: 36px !important; border-radius: 10px !important; font-size: 14px !important; font-weight: 500 !important; color: #777777 !important; background: none !important; border: 1px solid #E0D6CE !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s !important; }
.ccgs-pg-btn:hover { background: #F9F4EF !important; border-color: #D32F2F !important; color: #D32F2F !important; }
.ccgs-pg-btn.active { background: #D32F2F !important; color: #FFFFFF !important; border-color: #D32F2F !important; }

/* ═══════════════════════════════════════════════════════════════════
   EMPTY STATE
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-empty-state { text-align: center !important; padding: 60px 24px !important; color: #999999 !important; }
.ccgs-empty-state__icon { width: 80px !important; height: 80px !important; max-width: 80px !important; max-height: 80px !important; margin: 0 auto 20px !important; background: #F9F4EF !important; border-radius: 50% !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; }
.ccgs-empty-state__icon svg { width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; color: #CCBBAA !important; opacity: 0.5 !important; }
.ccgs-empty-state h4 { font-size: 18px !important; font-weight: 600 !important; color: #2D2D2D !important; margin-bottom: 8px !important; }
.ccgs-empty-state p { font-size: 14px !important; margin-bottom: 24px !important; max-width: 320px !important; margin-left: auto !important; margin-right: auto !important; color: #999999 !important; }
.ccgs-empty-state__actions { display: flex !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; }

/* ═══════════════════════════════════════════════════════════════════
   HOW IT WORKS — FIX ALL GIANT SVGs
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-how-hero { background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%) !important; border-radius: 10px !important; padding: 28px 24px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 24px !important; color: #FFFFFF !important; overflow: hidden !important; }
.ccgs-how-hero .ccgs-btn--white { background: #FFFFFF !important; color: #2D2D2D !important; font-weight: 600 !important; }
.ccgs-how-hero__content h3 { font-size: 24px !important; font-weight: 700 !important; margin-bottom: 10px !important; color: #FFFFFF !important; }
.ccgs-how-hero__content p { font-size: 14px !important; opacity: 0.9 !important; margin-bottom: 20px !important; max-width: 420px !important; color: #FFFFFF !important; }
.ccgs-how-hero__visual { flex-shrink: 0 !important; }
.ccgs-cookie-emoji { font-size: 80px !important; display: block !important; opacity: 0.3 !important; }

/* Steps */
.ccgs-steps-section { padding: 16px 0 !important; }
.ccgs-steps-grid { display: flex !important; align-items: flex-start !important; gap: 0 !important; justify-content: center !important; }
.ccgs-step { flex: 1 !important; text-align: center !important; max-width: 220px !important; padding: 0 12px !important; }
.ccgs-step__number { width: 32px !important; height: 32px !important; border-radius: 50% !important; background: linear-gradient(135deg, #D32F2F, #B71C1C) !important; color: #FFFFFF !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 14px !important; font-weight: 700 !important; margin: 0 auto 12px !important; }

.ccgs-step__icon {
    width: 56px !important;
    height: 56px !important;
    max-width: 56px !important;
    max-height: 56px !important;
    margin: 0 auto 12px !important;
    background: #FFEBEE !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #D32F2F !important;
    overflow: hidden !important;
}

.ccgs-step__icon svg {
    width: 28px !important;
    height: 28px !important;
    max-width: 28px !important;
    max-height: 28px !important;
    min-width: 28px !important;
    min-height: 28px !important;
    display: block !important;
    stroke: #D32F2F !important;
    fill: none !important;
}

.ccgs-step h4 { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 6px !important; color: #2D2D2D !important; }
.ccgs-step p { font-size: 12.5px !important; color: #777777 !important; line-height: 1.6 !important; }

.ccgs-step-connector { display: flex !important; align-items: center !important; padding-top: 52px !important; width: 40px !important; flex-shrink: 0 !important; }
.ccgs-step-connector svg { width: 24px !important; height: 24px !important; max-width: 24px !important; max-height: 24px !important; display: block !important; stroke: #FFCDD2 !important; fill: none !important; }

/* Features */
.ccgs-features-section { padding: 16px 0 !important; }
.ccgs-features-title { font-size: 20px !important; font-weight: 700 !important; text-align: center !important; margin-bottom: 24px !important; color: #2D2D2D !important; }
.ccgs-features-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 16px !important; }
.ccgs-feature-card { background: #FFFFFF !important; border-radius: 10px !important; padding: 20px 14px !important; text-align: center !important; box-shadow: 0 1px 6px rgba(0,0,0,0.05) !important; transition: all 0.2s !important; }
.ccgs-feature-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.10) !important; }

.ccgs-feature-card__icon {
    width: 48px !important;
    height: 48px !important;
    max-width: 48px !important;
    max-height: 48px !important;
    margin: 0 auto 14px !important;
    background: #FFEBEE !important;
    border-radius: 8px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    color: #D32F2F !important;
    overflow: hidden !important;
}

.ccgs-feature-card__icon svg {
    width: 24px !important;
    height: 24px !important;
    max-width: 24px !important;
    max-height: 24px !important;
    min-width: 24px !important;
    min-height: 24px !important;
    display: block !important;
    stroke: #D32F2F !important;
    fill: none !important;
}

.ccgs-feature-card h4 { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 6px !important; color: #2D2D2D !important; }
.ccgs-feature-card p { font-size: 12.5px !important; color: #777777 !important; line-height: 1.6 !important; }

/* FAQ */
.ccgs-faq-section { padding: 16px 0 !important; }
.ccgs-faq-header h3 { font-size: 20px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 10px !important; margin-bottom: 20px !important; color: #2D2D2D !important; }
.ccgs-faq-header h3 svg { width: 24px !important; height: 24px !important; max-width: 24px !important; max-height: 24px !important; flex-shrink: 0 !important; display: block !important; }
.ccgs-faq-list { display: flex !important; flex-direction: column !important; gap: 8px !important; }
.ccgs-faq-item { background: #FFFFFF !important; border-radius: 12px !important; border: 1.5px solid #F0E8E0 !important; overflow: hidden !important; }
.ccgs-faq-toggle { width: 100% !important; padding: 16px 20px !important; display: flex !important; justify-content: space-between !important; align-items: center !important; gap: 12px !important; background: transparent !important; border: none !important; cursor: pointer !important; font-size: 14px !important; font-weight: 600 !important; color: #2D2D2D !important; text-align: left !important; font-family: 'Poppins', sans-serif !important; }
.ccgs-faq-toggle:hover { color: #D32F2F !important; }
.ccgs-faq-arrow { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; flex-shrink: 0 !important; transition: transform 0.3s !important; stroke: #999999 !important; fill: none !important; }
.ccgs-faq-item.open .ccgs-faq-arrow { transform: rotate(180deg) !important; }
.ccgs-faq-answer { display: none !important; padding: 0 20px 16px !important; font-size: 13px !important; color: #777777 !important; line-height: 1.7 !important; }
.ccgs-faq-item.open .ccgs-faq-answer { display: block !important; }
.ccgs-faq-answer ul { padding-left: 20px !important; margin: 8px 0 !important; }
.ccgs-faq-answer li { margin-bottom: 4px !important; }

/* CTA */
.ccgs-cta-section { background: linear-gradient(135deg, #D32F2F 0%, #B71C1C 100%) !important; border-radius: 10px !important; padding: 28px 24px !important; text-align: center !important; color: #FFFFFF !important; }
.ccgs-cta-content h3 { font-size: 22px !important; font-weight: 700 !important; margin-bottom: 10px !important; color: #FFFFFF !important; }
.ccgs-cta-content p { font-size: 14px !important; opacity: 0.9 !important; margin-bottom: 24px !important; color: #FFFFFF !important; }
.ccgs-cta-buttons { display: flex !important; gap: 12px !important; justify-content: center !important; flex-wrap: wrap !important; }

/* Product showcase */
.ccgs-dash-products { margin-top: 8px !important; }
.ccgs-dash-products__header { display: flex !important; justify-content: space-between !important; align-items: center !important; margin-bottom: 20px !important; flex-wrap: wrap !important; gap: 12px !important; }
.ccgs-dash-products__header h3 { font-size: 18px !important; font-weight: 700 !important; display: flex !important; align-items: center !important; gap: 10px !important; color: #2D2D2D !important; }
.ccgs-dash-products__header h3 svg { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; flex-shrink: 0 !important; display: block !important; color: #D32F2F !important; }

/* ═══════════════════════════════════════════════════════════════════
   CARDS GRID (My Cards)
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-cards-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important; gap: 20px !important; }
.ccgs-card-item { background: #F9F4EF !important; border-radius: 12px !important; overflow: hidden !important; border: 2px solid transparent !important; transition: all 0.3s ease !important; position: relative !important; }
.ccgs-card-item:hover { border-color: #FFCDD2 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; transform: translateY(-4px) !important; }
.ccgs-card-item__preview { aspect-ratio: 4/3 !important; background: #F0E8E0 !important; display: flex !important; align-items: center !important; justify-content: center !important; position: relative !important; overflow: hidden !important; }
.ccgs-card-item__preview img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.ccgs-card-item__placeholder { color: #CCBBAA !important; opacity: 0.3 !important; }
.ccgs-card-item__placeholder svg { width: 48px !important; height: 48px !important; max-width: 48px !important; max-height: 48px !important; }
.ccgs-card-item__fav { position: absolute !important; top: 10px !important; right: 10px !important; font-size: 18px !important; }
.ccgs-card-item__info { padding: 16px !important; }
.ccgs-card-item__info h4 { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 6px !important; color: #2D2D2D !important; }
.ccgs-card-item__meta { display: flex !important; align-items: center !important; gap: 8px !important; font-size: 12px !important; color: #999999 !important; }
.ccgs-card-item__actions { display: flex !important; gap: 6px !important; padding: 0 16px 16px !important; justify-content: center !important; flex-wrap: wrap !important; }
.ccgs-card-item--new { border: 2px dashed #E0D6CE !important; background: transparent !important; cursor: pointer !important; text-decoration: none !important; }
.ccgs-card-item--new:hover { border-color: #D32F2F !important; background: #FFF8F8 !important; }
.ccgs-card-item--new .ccgs-card-item__preview { background: transparent !important; }
.ccgs-card-item__add-icon { width: 56px !important; height: 56px !important; border-radius: 50% !important; background: #FFEBEE !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #D32F2F !important; }
.ccgs-card-item__add-icon svg { width: 28px !important; height: 28px !important; max-width: 28px !important; max-height: 28px !important; }
.ccgs-card-item--new .ccgs-card-item__info { text-align: center !important; }
.ccgs-card-item--new .ccgs-card-item__info p { color: #999999 !important; font-size: 12px !important; }

/* Templates */
.ccgs-templates-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)) !important; gap: 16px !important; }
.ccgs-template-card { background: #F9F4EF !important; border-radius: 12px !important; overflow: hidden !important; position: relative !important; cursor: pointer !important; transition: all 0.3s ease !important; }
.ccgs-template-card:hover { transform: translateY(-4px) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.08) !important; }
.ccgs-template-card__preview { aspect-ratio: 4/3 !important; background: #F0E8E0 !important; display: flex !important; align-items: center !important; justify-content: center !important; }
.ccgs-template-card__preview img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.ccgs-template-card__placeholder svg { width: 40px !important; height: 40px !important; max-width: 40px !important; max-height: 40px !important; color: #CCBBAA !important; opacity: 0.3 !important; }
.ccgs-template-card__badge { position: absolute !important; top: 8px !important; right: 8px !important; background: linear-gradient(135deg, #FFD700, #FFA500) !important; color: #FFFFFF !important; padding: 3px 8px !important; border-radius: 10px !important; font-size: 10px !important; font-weight: 700 !important; }
.ccgs-template-card__info { padding: 12px !important; text-align: center !important; }
.ccgs-template-card__info h4 { font-size: 13px !important; font-weight: 600 !important; margin-bottom: 6px !important; color: #2D2D2D !important; }
.ccgs-template-card__overlay { position: absolute !important; inset: 0 !important; background: rgba(211, 47, 47, 0.9) !important; display: flex !important; align-items: center !important; justify-content: center !important; opacity: 0 !important; transition: opacity 0.3s ease !important; }
.ccgs-template-card:hover .ccgs-template-card__overlay { opacity: 1 !important; }

/* ═══════════════════════════════════════════════════════════════════
   ACTION BUTTONS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-act-btn { width: 32px !important; height: 32px !important; border-radius: 8px !important; display: flex !important; align-items: center !important; justify-content: center !important; transition: all 0.2s !important; border: 1px solid #E0D6CE !important; color: #777777 !important; background: #FFFFFF !important; cursor: pointer !important; text-decoration: none !important; }
.ccgs-act-btn svg { width: 16px !important; height: 16px !important; max-width: 16px !important; max-height: 16px !important; display: block !important; }
.ccgs-act-btn:hover { background: #D32F2F !important; border-color: #D32F2F !important; color: #FFFFFF !important; }
.ccgs-action-btns { display: flex !important; gap: 8px !important; }

/* ═══════════════════════════════════════════════════════════════════
   TAGS & BADGES
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-tag { display: inline-block !important; padding: 3px 8px !important; border-radius: 4px !important; font-size: 11px !important; font-weight: 500 !important; background: #F9F4EF !important; color: #777777 !important; }
.ccgs-count-badge { background: #FFEBEE !important; color: #D32F2F !important; font-size: 12px !important; padding: 2px 8px !important; border-radius: 4px !important; font-weight: 500 !important; margin-left: 8px !important; }

/* ═══════════════════════════════════════════════════════════════════
   SEARCH, SELECT, FORMS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-search-box { display: flex !important; align-items: center !important; gap: 8px !important; position: relative !important; }
.ccgs-search-box__icon { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; color: #999999 !important; flex-shrink: 0 !important; }
.ccgs-search-box input, .ccgs-file-search, .ccgs-contact-search { padding: 10px 14px !important; border: 1.5px solid #E0D6CE !important; border-radius: 10px !important; font-size: 13px !important; font-family: 'Poppins', sans-serif !important; background: #FFFFFF !important; color: #2D2D2D !important; min-width: 180px !important; }
.ccgs-search-box input:focus, .ccgs-file-search:focus, .ccgs-contact-search:focus { border-color: #D32F2F !important; outline: none !important; box-shadow: 0 0 0 3px rgba(211,47,47,0.1) !important; }

.ccgs-select { padding: 10px 36px 10px 14px !important; border: 1.5px solid #E0D6CE !important; border-radius: 10px !important; font-size: 13px !important; color: #2D2D2D !important; background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center !important; appearance: none !important; cursor: pointer !important; font-family: 'Poppins', sans-serif !important; }
.ccgs-select:focus { border-color: #D32F2F !important; outline: none !important; }

.ccgs-form-row { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 16px !important; margin-bottom: 16px !important; }
.ccgs-form-group { display: flex !important; flex-direction: column !important; gap: 6px !important; }
.ccgs-form-group label { font-size: 13px !important; font-weight: 600 !important; color: #2D2D2D !important; }
.ccgs-form-group label .required { color: #D32F2F !important; }
.ccgs-form-group input, .ccgs-form-group select, .ccgs-form-group textarea { padding: 10px 14px !important; border: 1.5px solid #E0D6CE !important; border-radius: 10px !important; font-size: 13px !important; font-family: 'Poppins', sans-serif !important; background: #FFFFFF !important; color: #2D2D2D !important; }
.ccgs-form-group input:focus, .ccgs-form-group select:focus, .ccgs-form-group textarea:focus { border-color: #D32F2F !important; outline: none !important; box-shadow: 0 0 0 3px rgba(211,47,47,0.1) !important; }
.ccgs-form-hint { font-size: 12px !important; color: #999999 !important; margin-top: 4px !important; }
.ccgs-form-actions { display: flex !important; gap: 12px !important; margin-top: 24px !important; padding-top: 24px !important; border-top: 1px solid #F0E8E0 !important; }

.ccgs-input {
    padding: 10px 14px !important;
    border: 1.5px solid #E0D6CE !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-family: 'Poppins', sans-serif !important;
    background: #FFFFFF !important;
    color: #2D2D2D !important;
    width: 100% !important;
    box-sizing: border-box !important;
}
.ccgs-input:focus {
    border-color: #D32F2F !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(211,47,47,0.1) !important;
}
select.ccgs-input {
    padding-right: 36px !important;
    appearance: none !important;
    background: #FFFFFF url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24'%3E%3Cpath fill='%23999' d='M7 10l5 5 5-5z'/%3E%3C/svg%3E") no-repeat right 12px center !important;
    cursor: pointer !important;
}

/* ═══════════════════════════════════════════════════════════════════
   BRANDING
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-branding-layout { display: flex !important; gap: 28px !important; align-items: flex-start !important; }
.ccgs-branding-layout > .ccgs-branding-form { flex: 1.1 1 0% !important; min-width: 0 !important; }
.ccgs-branding-layout > .ccgs-branding-preview { flex: 0.9 1 0% !important; min-width: 280px !important; position: sticky !important; top: 32px !important; }
.ccgs-logo-upload { position: relative !important; }
.ccgs-logo-preview { width: 200px !important; height: 80px !important; border: 2px dashed #E0D6CE !important; border-radius: 12px !important; display: flex !important; align-items: center !important; justify-content: center !important; cursor: pointer !important; position: relative !important; transition: all 0.3s !important; overflow: hidden !important; }
.ccgs-logo-preview:hover { border-color: #D32F2F !important; background: #FFF8F8 !important; }
.ccgs-logo-preview img { max-width: 100% !important; max-height: 100% !important; object-fit: contain !important; }
.ccgs-logo-placeholder { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; color: #999999 !important; font-size: 12px !important; }
.ccgs-logo-placeholder svg { width: 24px !important; height: 24px !important; max-width: 24px !important; max-height: 24px !important; opacity: 0.5 !important; }
.ccgs-logo-remove { position: absolute !important; top: 4px !important; right: 4px !important; width: 24px !important; height: 24px !important; border-radius: 50% !important; background: rgba(0, 0, 0, 0.7) !important; color: #FFFFFF !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 16px !important; }
.ccgs-position-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 12px !important; }
.ccgs-position-option { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 6px !important; cursor: pointer !important; }
.ccgs-position-option input { display: none !important; }
.ccgs-position-option__box { width: 60px !important; height: 45px !important; border: 2px solid #E0D6CE !important; border-radius: 8px !important; position: relative !important; transition: all 0.2s !important; }
.ccgs-position-option input:checked + .ccgs-position-option__box { border-color: #D32F2F !important; background: #FFEBEE !important; }
.ccgs-position-dot { position: absolute !important; width: 8px !important; height: 8px !important; background: #D32F2F !important; border-radius: 50% !important; }
[data-pos="top-left"] .ccgs-position-dot { top: 6px !important; left: 6px !important; }
[data-pos="top-center"] .ccgs-position-dot { top: 6px !important; left: 50% !important; transform: translateX(-50%) !important; }
[data-pos="top-right"] .ccgs-position-dot { top: 6px !important; right: 6px !important; }
[data-pos="bottom-left"] .ccgs-position-dot { bottom: 6px !important; left: 6px !important; }
[data-pos="bottom-center"] .ccgs-position-dot { bottom: 6px !important; left: 50% !important; transform: translateX(-50%) !important; }
[data-pos="bottom-right"] .ccgs-position-dot { bottom: 6px !important; right: 6px !important; }
.ccgs-position-option__label { font-size: 11px !important; color: #999999 !important; }
.ccgs-color-input { display: flex !important; align-items: center !important; gap: 10px !important; }
.ccgs-color-input input[type="color"] { width: 48px !important; height: 40px !important; border: none !important; border-radius: 8px !important; cursor: pointer !important; padding: 2px !important; }
.ccgs-color-hex { width: 90px !important; padding: 10px !important; border: 1.5px solid #E0D6CE !important; border-radius: 10px !important; font-size: 13px !important; font-family: monospace !important; }
.ccgs-branding-preview { }
.ccgs-preview-card { background: #F9F4EF !important; border-radius: 12px !important; padding: 20px !important; margin-bottom: 16px !important; }
.ccgs-preview-card__inner { background: #FFFFFF !important; border-radius: 12px !important; padding: 32px 24px !important; min-height: 280px !important; position: relative !important; box-shadow: 0 2px 12px rgba(0,0,0,0.06) !important; }
.ccgs-preview-logo { position: absolute !important; max-width: 100px !important; display: block !important; }
.ccgs-preview-logo--top-left { top: 12px !important; left: 12px !important; }
.ccgs-preview-logo--top-center { top: 12px !important; left: 50% !important; transform: translateX(-50%) !important; }
.ccgs-preview-logo--top-right { top: 12px !important; right: 12px !important; }
.ccgs-preview-logo--bottom-left { bottom: 36px !important; left: 12px !important; }
.ccgs-preview-logo--bottom-center { bottom: 36px !important; left: 50% !important; transform: translateX(-50%) !important; }
.ccgs-preview-logo--bottom-right { bottom: 36px !important; right: 12px !important; }
.ccgs-preview-logo img { max-height: 40px !important; max-width: 100px !important; width: auto !important; height: auto !important; display: block !important; object-fit: contain !important; }
.ccgs-preview-logo__placeholder { font-size: 12px !important; color: #999999 !important; background: #F9F4EF !important; padding: 6px 12px !important; border-radius: 6px !important; }
.ccgs-preview-content { text-align: center !important; padding: 40px 20px !important; }
.ccgs-preview-title { font-size: 28px !important; font-weight: 700 !important; color: #D32F2F !important; margin-bottom: 16px !important; }
.ccgs-preview-message { font-size: 15px !important; color: #777777 !important; line-height: 1.6 !important; margin-bottom: 20px !important; }
.ccgs-preview-sender { font-size: 14px !important; font-weight: 600 !important; color: #2D2D2D !important; }
.ccgs-preview-footer { position: absolute !important; bottom: 12px !important; left: 0 !important; right: 0 !important; text-align: center !important; font-size: 10px !important; color: #999999 !important; }
.ccgs-od-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 16px !important; margin-bottom: 20px !important; }
.ccgs-od-field { background: #F9F4EF !important; border-radius: 10px !important; padding: 14px !important; }
.ccgs-od-label { font-size: 11px !important; color: #999999 !important; text-transform: uppercase !important; letter-spacing: 0.8px !important; font-weight: 600 !important; display: block !important; margin-bottom: 4px !important; }
.ccgs-od-value { font-size: 15px !important; color: #2D2D2D !important; font-weight: 500 !important; display: block !important; word-break: break-word !important; }
.ccgs-od-value--mono { font-family: 'Courier New', monospace !important; color: #D32F2F !important; font-weight: 700 !important; }
.ccgs-od-value--bold { font-weight: 700 !important; font-size: 18px !important; color: #2D2D2D !important; }
.ccgs-od-section { padding: 14px 0 !important; border-top: 1px solid #F0E8E0 !important; }
.ccgs-od-section h4 { font-size: 13px !important; font-weight: 600 !important; color: #2D2D2D !important; margin: 0 0 8px !important; }
.ccgs-od-pair { display: flex !important; justify-content: space-between !important; padding: 6px 0 !important; gap: 12px !important; }
.ccgs-od-pair .ccgs-od-label { margin-bottom: 0 !important; }
.ccgs-od-message { background: #F9F4EF !important; border-radius: 8px !important; padding: 12px 16px !important; font-size: 14px !important; color: #555555 !important; line-height: 1.6 !important; margin: 0 !important; font-style: italic !important; }

.ccgs-preview-tabs { display: flex !important; gap: 8px !important; justify-content: center !important; }
.ccgs-preview-tab { padding: 6px 14px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 500 !important; background: #F9F4EF !important; border: none !important; cursor: pointer !important; transition: all 0.2s !important; color: #777777 !important; }
.ccgs-preview-tab.active { background: #D32F2F !important; color: #FFFFFF !important; }
.ccgs-branding-profiles { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)) !important; gap: 16px !important; }
.ccgs-branding-profile { display: flex !important; align-items: center !important; gap: 16px !important; padding: 16px !important; background: #F9F4EF !important; border-radius: 12px !important; border: 2px solid transparent !important; transition: all 0.2s !important; }
.ccgs-branding-profile:hover { border-color: #FFCDD2 !important; }
.ccgs-branding-profile--default { border-color: #D32F2F !important; }
.ccgs-branding-profile__preview { width: 50px !important; height: 50px !important; border-radius: 10px !important; background: #D32F2F !important; display: flex !important; align-items: center !important; justify-content: center !important; color: #FFFFFF !important; font-weight: 700 !important; flex-shrink: 0 !important; overflow: hidden !important; }
.ccgs-branding-profile__preview img { width: 100% !important; height: 100% !important; object-fit: contain !important; background: #FFFFFF !important; padding: 6px !important; }
.ccgs-branding-profile__info { flex: 1 !important; min-width: 0 !important; }
.ccgs-branding-profile__info h4 { font-size: 14px !important; font-weight: 600 !important; margin-bottom: 4px !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.ccgs-branding-profile__actions { display: flex !important; gap: 6px !important; }

/* ═══════════════════════════════════════════════════════════════════
   MODALS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-modal-overlay { display: none !important; position: fixed !important; inset: 0 !important; background: rgba(0,0,0,0.5) !important; z-index: 99999 !important; align-items: center !important; justify-content: center !important; padding: 20px !important; }
.ccgs-modal-overlay.visible { display: flex !important; }
.ccgs-modal { background: #FFFFFF !important; border-radius: 10px !important; width: 100% !important; max-width: 520px !important; max-height: 90vh !important; overflow-y: auto !important; box-shadow: 0 20px 60px rgba(0,0,0,0.3) !important; }
.ccgs-modal--wide { max-width: 680px !important; }
.ccgs-modal__header { display: flex !important; justify-content: space-between !important; align-items: center !important; padding: 20px 24px !important; border-bottom: 1px solid #F0E8E0 !important; }
.ccgs-modal__header h3 { font-size: 18px !important; font-weight: 600 !important; display: flex !important; align-items: center !important; gap: 10px !important; color: #2D2D2D !important; margin: 0 !important; }
.ccgs-modal__header h3 svg { width: 22px !important; height: 22px !important; max-width: 22px !important; max-height: 22px !important; }
.ccgs-modal__close { width: 32px !important; height: 32px !important; border-radius: 8px !important; background: #F9F4EF !important; border: none !important; cursor: pointer !important; display: flex !important; align-items: center !important; justify-content: center !important; font-size: 18px !important; color: #999999 !important; transition: all 0.2s !important; }
.ccgs-modal__close:hover { background: #FFEBEE !important; color: #D32F2F !important; }
.ccgs-modal__close svg { width: 18px !important; height: 18px !important; max-width: 18px !important; max-height: 18px !important; }
.ccgs-modal__body { padding: 24px !important; }
.ccgs-modal__footer { display: flex !important; justify-content: flex-end !important; gap: 12px !important; padding: 16px 24px !important; border-top: 1px solid #F0E8E0 !important; }

/* ═══════════════════════════════════════════════════════════════════
   TOAST
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-toast { position: fixed !important; bottom: 32px !important; right: 32px !important; z-index: 100000 !important; padding: 14px 24px !important; border-radius: 12px !important; font-size: 14px !important; font-weight: 500 !important; box-shadow: 0 8px 24px rgba(0,0,0,0.2) !important; transform: translateY(100px) !important; opacity: 0 !important; transition: all 0.3s ease !important; color: #FFFFFF !important; background: #2D2D2D !important; }
.ccgs-toast.show { transform: translateY(0) !important; opacity: 1 !important; }
.ccgs-toast.success { background: #2E7D32 !important; }
.ccgs-toast.error { background: #D32F2F !important; }

/* ═══════════════════════════════════════════════════════════════════
   FILE GRID
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-files-grid { display: grid !important; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)) !important; gap: 16px !important; margin-top: 20px !important; }
.ccgs-file-card { background: #FFFFFF !important; border-radius: 12px !important; overflow: hidden !important; border: 1.5px solid #F0E8E0 !important; transition: all 0.3s !important; }
.ccgs-file-card:hover { border-color: #FFCDD2 !important; box-shadow: 0 4px 16px rgba(0,0,0,0.08) !important; }
.ccgs-file-card__preview { aspect-ratio: 1 !important; background: #F9F4EF !important; display: flex !important; align-items: center !important; justify-content: center !important; overflow: hidden !important; position: relative !important; }
.ccgs-file-card__preview img { width: 100% !important; height: 100% !important; object-fit: cover !important; }
.ccgs-file-card__overlay { position: absolute !important; inset: 0 !important; background: rgba(0,0,0,0.5) !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; opacity: 0 !important; transition: opacity 0.3s !important; }
.ccgs-file-card:hover .ccgs-file-card__overlay { opacity: 1 !important; }
.ccgs-file-card__info { padding: 10px 12px !important; }
.ccgs-file-card__name { font-size: 12px !important; font-weight: 500 !important; color: #2D2D2D !important; white-space: nowrap !important; overflow: hidden !important; text-overflow: ellipsis !important; }
.ccgs-file-card__size { font-size: 11px !important; color: #999999 !important; }

/* ═══════════════════════════════════════════════════════════════════
   PROMO
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-promo-badge { background: linear-gradient(135deg, #FFF8E1, #FFECB3) !important; color: #E65100 !important; padding: 6px 12px !important; border-radius: 6px !important; font-size: 12px !important; font-weight: 600 !important; }

/* ═══════════════════════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════════════════════ */
@media (max-width: 1200px) {
    .ccgs-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .ccgs-branding-layout { flex-direction: column !important; }
    .ccgs-branding-layout > .ccgs-branding-preview { position: static !important; min-width: 0 !important; }
    .ccgs-features-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 992px) {
    .ccgs-dashboard { flex-direction: column !important; padding: 16px !important; }
    .ccgs-sidebar { width: 100% !important; position: static !important; }
    .ccgs-sidebar__profile { display: none !important; }
    .ccgs-sidebar__nav { flex-direction: row !important; flex-wrap: wrap !important; padding: 12px !important; gap: 8px !important; }
    .ccgs-sidebar__btn { padding: 10px 16px !important; flex: 0 0 auto !important; }
    .ccgs-sidebar__footer { flex-direction: row !important; flex-wrap: wrap !important; margin: 0 !important; padding: 12px !important; border-top: none !important; }
    .ccgs-dash-banner { flex-direction: column !important; text-align: center !important; gap: 20px !important; padding: 28px 24px !important; }
    .ccgs-dash-banner::before { display: none !important; }
    .ccgs-steps-grid { flex-wrap: wrap !important; }
    .ccgs-step-connector { display: none !important; }
    .ccgs-step { min-width: 140px !important; }
    .ccgs-account-overview { align-items: flex-start !important; }
    .ccgs-account-overview__stats { width: 100% !important; }
}

@media (max-width: 768px) {
    .ccgs-stats-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
    .ccgs-contact-stats { grid-template-columns: 1fr !important; }
    .ccgs-stat-card { padding: 16px !important; }
    .ccgs-stat-card__value { font-size: 24px !important; }
    .ccgs-section-header { flex-direction: column !important; align-items: flex-start !important; }
    .ccgs-cards-grid { grid-template-columns: repeat(2, 1fr) !important; }
    .ccgs-features-grid { grid-template-columns: 1fr !important; }
    .ccgs-form-row { grid-template-columns: 1fr !important; }
    .ccgs-storage-stats { grid-template-columns: 1fr !important; }
    .ccgs-how-hero { flex-direction: column !important; text-align: center !important; }
    .ccgs-sidebar__nav { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 6px !important; }
    .ccgs-sidebar__btn { white-space: nowrap !important; }
    .ccgs-account-overview__stats { flex-direction: column !important; }
    .ccgs-notification-option,
    .ccgs-danger-action,
    .ccgs-branding-profile { flex-direction: column !important; align-items: flex-start !important; }
    .ccgs-toggle-switch { align-self: flex-start !important; }
    .ccgs-search-box,
    .ccgs-dash-products__header { width: 100% !important; }
    .ccgs-search-box input,
    .ccgs-file-search,
    .ccgs-contact-search { width: 100% !important; min-width: 0 !important; }
    .ccgs-data-table { min-width: 640px !important; }
    .ccgs-modal-overlay { padding: 12px !important; }
}

@media (max-width: 480px) {
    .ccgs-stats-grid { grid-template-columns: 1fr !important; }
    .ccgs-cards-grid, .ccgs-templates-grid { grid-template-columns: 1fr !important; }
    .ccgs-card-tabs { flex-wrap: nowrap !important; overflow-x: auto !important; padding-bottom: 8px !important; }
    .ccgs-tab-btn { flex-shrink: 0 !important; }
    .ccgs-dashboard { padding: 12px !important; }
    .ccgs-account-overview__avatar { width: 64px !important; height: 64px !important; }
    .ccgs-account-overview__info h3 { font-size: 18px !important; }
    .ccgs-notification-option,
    .ccgs-danger-action { padding: 16px !important; }
    .ccgs-table-footer { flex-direction: column !important; align-items: stretch !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   ACCOUNT SETTINGS
   ═══════════════════════════════════════════════════════════════════ */
.ccgs-account-overview {
    display: flex !important;
    align-items: center !important;
    gap: 24px !important;
    flex-wrap: wrap !important;
}
.ccgs-account-overview__avatar {
    width: 80px !important;
    height: 80px !important;
    border-radius: 50% !important;
    overflow: hidden !important;
    flex-shrink: 0 !important;
    border: 3px solid #FFCDD2 !important;
}
.ccgs-account-overview__avatar img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}
.ccgs-account-overview__info {
    flex: 1 !important;
    min-width: 200px !important;
}
.ccgs-account-overview__info h3 {
    font-size: 20px !important;
    font-weight: 700 !important;
    margin: 0 0 4px !important;
    color: #2D2D2D !important;
}
.ccgs-account-overview__info p {
    font-size: 13px !important;
    color: #999999 !important;
    margin: 0 0 8px !important;
}
.ccgs-account-overview__meta {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    flex-wrap: wrap !important;
}
.ccgs-account-overview__meta .ccgs-text-muted {
    font-size: 12px !important;
}
.ccgs-account-overview__stats {
    display: flex !important;
    gap: 16px !important;
    flex-wrap: wrap !important;
}
.ccgs-badge--personal { background: linear-gradient(135deg, #E3F2FD, #BBDEFB) !important; color: #1565C0 !important; }
.ccgs-badge--business { background: linear-gradient(135deg, #FFF8E1, #FFECB3) !important; color: #E65100 !important; }
.ccgs-badge--corporate { background: linear-gradient(135deg, #E8F5E9, #C8E6C9) !important; color: #2E7D32 !important; }

.ccgs-settings-form .ccgs-form-group input,
.ccgs-settings-form .ccgs-form-group select,
.ccgs-settings-form .ccgs-form-group textarea {
    width: 100% !important;
    box-sizing: border-box !important;
}

/* Notification toggles */
.ccgs-notification-options {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.ccgs-notification-option {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    border: 1px solid #F0E8E0 !important;
    border-radius: 18px !important;
    background: linear-gradient(180deg, #FFFDFC 0%, #FFF8F4 100%) !important;
    box-shadow: 0 10px 20px rgba(93, 48, 20, 0.04) !important;
    margin-bottom: 12px !important;
    cursor: pointer !important;
    transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease !important;
}
.ccgs-notification-option:last-child {
    margin-bottom: 0 !important;
}
.ccgs-notification-option:hover {
    transform: translateY(-1px) !important;
    border-color: #E5C8B7 !important;
}
.ccgs-notification-option.is-enabled {
    border-color: rgba(211, 47, 47, 0.28) !important;
    box-shadow: 0 16px 30px rgba(211, 47, 47, 0.10) !important;
}
.ccgs-notification-option__info {
    display: flex !important;
    flex-direction: column !important;
    gap: 4px !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
.ccgs-notification-option__info strong {
    font-size: 15px !important;
    color: #2D2D2D !important;
}
.ccgs-notification-option__info span {
    font-size: 13px !important;
    color: #8B776A !important;
}

/* Toggle switch */
.ccgs-toggle-switch {
    position: relative !important;
    width: 56px !important;
    height: 32px !important;
    flex-shrink: 0 !important;
}
.ccgs-toggle-switch input {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    cursor: pointer !important;
    margin: 0 !important;
    padding: 0 !important;
    z-index: 1 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
}
.ccgs-toggle-slider {
    position: absolute !important;
    cursor: pointer !important;
    inset: 0 !important;
    background: #E0D6CE !important;
    border-radius: 999px !important;
    transition: 0.3s !important;
    z-index: 0 !important;
}
.ccgs-toggle-slider::before {
    content: '' !important;
    position: absolute !important;
    height: 24px !important;
    width: 24px !important;
    left: 4px !important;
    bottom: 4px !important;
    background: #FFFFFF !important;
    border-radius: 50% !important;
    transition: 0.3s !important;
    box-shadow: 0 1px 3px rgba(0,0,0,0.2) !important;
}
.ccgs-toggle-switch input:checked + .ccgs-toggle-slider {
    background: #D32F2F !important;
}
.ccgs-toggle-switch input:checked + .ccgs-toggle-slider::before {
    transform: translateX(24px) !important;
}

/* Danger zone */
.ccgs-card--danger {
    border: 1.5px solid #FFCDD2 !important;
    background: linear-gradient(180deg, #FFF8F7 0%, #FFFDFD 100%) !important;
}
.ccgs-danger-actions {
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
}
.ccgs-danger-action {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 18px 20px !important;
    border: 1px solid #F4D4D8 !important;
    border-radius: 18px !important;
    background: rgba(255,255,255,0.82) !important;
    gap: 16px !important;
    margin-bottom: 12px !important;
}
.ccgs-danger-action:last-child {
    margin-bottom: 0 !important;
}
.ccgs-danger-action strong {
    font-size: 15px !important;
    color: #2D2D2D !important;
}
.ccgs-danger-action p {
    font-size: 13px !important;
    color: #8B776A !important;
    margin: 4px 0 0 !important;
}