/* ==========================================================
   PrintShare - Card Customizer
   - Panel UI (style / color / layout selector)
   - Custom card styles. They only apply when #news-card has the
     ".bgbps-custom" class, so the default design stays untouched.
   ========================================================== */

/* ---------- Customizer panel ---------- */
.bgbps-customizer {
   width: 1080px;
   margin: 20px auto 0;
   padding: 20px;
   background: #ffffff;
   color: #222222;
   border-radius: 15px;
   box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
   font-family: 'SolaimanLipi', 'Hind Siliguri', sans-serif;
}

.bgbps-section-title {
   color: #b01b1f;
   text-align: center;
   margin: 20px 0 15px;
   font-size: 20px;
   font-weight: 700;
}

.bgbps-customizer>.bgbps-section-title:first-child {
   margin-top: 0;
}

.bgbps-options-grid {
   display: grid;
   grid-template-columns: repeat(5, 1fr);
   gap: 10px;
   margin: 15px 0;
}

.bgbps-option {
   display: block;
   width: 100%;
   text-align: center;
   padding: 10px 5px;
   border: 2px solid #e0e0e0;
   border-radius: 8px;
   background: #ffffff;
   color: #222222;
   font-family: inherit;
   font-size: 16px;
   font-weight: 600;
   cursor: pointer;
   transition: all 0.3s ease;
}

.bgbps-option:hover {
   transform: translateY(-2px);
   box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.bgbps-option.active {
   border-color: #b01b1f;
   background: #b01b1f;
   color: #ffffff;
}

.bgbps-color-preview,
.bgbps-layout-preview {
   width: 100%;
   border-radius: 6px;
   margin-bottom: 5px;
   border: 2px solid #f0f0f0;
}

.bgbps-color-preview {
   height: 40px;
}

.bgbps-layout-preview {
   height: 50px;
}

/* Default-style thumbnail (mini version of the original card) */
.bgbps-default-preview {
   width: 100%;
   height: 40px;
   margin-bottom: 5px;
   border-radius: 6px;
   border: 2px solid #f0f0f0;
   background: linear-gradient(to bottom, #1b294f 0%, #1b294f 72%, #c1121f 72%, #c1121f 100%);
}

/* Color / layout options are shown only in Custom mode */
.bgbps-custom-options {
   display: none;
   margin-top: 20px;
   padding-top: 20px;
   border-top: 2px solid #f0f0f0;
}

.bgbps-customizer.is-custom .bgbps-custom-options {
   display: block;
}

/* ---------- Color combinations (applied to #news-card) ---------- */
.news-card.bgbps-color-red {
   --bgbps-primary: #b01b1f;
   --bgbps-secondary: #A10F17;
   --bgbps-accent: #fd3535;
   --bgbps-bg: linear-gradient(135deg, #b01b1f 0%, #A10F17 100%);
}

.news-card.bgbps-color-blue {
   --bgbps-primary: #1e40af;
   --bgbps-secondary: #1d4ed8;
   --bgbps-accent: #3b82f6;
   --bgbps-bg: linear-gradient(135deg, #1e40af 0%, #1d4ed8 100%);
}

.news-card.bgbps-color-green {
   --bgbps-primary: #059669;
   --bgbps-secondary: #047857;
   --bgbps-accent: #10b981;
   --bgbps-bg: linear-gradient(135deg, #059669 0%, #047857 100%);
}

.news-card.bgbps-color-purple {
   --bgbps-primary: #7c3aed;
   --bgbps-secondary: #6d28d9;
   --bgbps-accent: #8b5cf6;
   --bgbps-bg: linear-gradient(135deg, #7c3aed 0%, #6d28d9 100%);
}

.news-card.bgbps-color-orange {
   --bgbps-primary: #ea580c;
   --bgbps-secondary: #dc2626;
   --bgbps-accent: #f97316;
   --bgbps-bg: linear-gradient(135deg, #ea580c 0%, #dc2626 100%);
}

.news-card.bgbps-color-teal {
   --bgbps-primary: #0d9488;
   --bgbps-secondary: #0f766e;
   --bgbps-accent: #14b8a6;
   --bgbps-bg: linear-gradient(135deg, #0d9488 0%, #0f766e 100%);
}

.news-card.bgbps-color-pink {
   --bgbps-primary: #db2777;
   --bgbps-secondary: #be185d;
   --bgbps-accent: #ec4899;
   --bgbps-bg: linear-gradient(135deg, #db2777 0%, #be185d 100%);
}

.news-card.bgbps-color-indigo {
   --bgbps-primary: #4f46e5;
   --bgbps-secondary: #4338ca;
   --bgbps-accent: #6366f1;
   --bgbps-bg: linear-gradient(135deg, #4f46e5 0%, #4338ca 100%);
}

.news-card.bgbps-color-amber {
   --bgbps-primary: #d97706;
   --bgbps-secondary: #b45309;
   --bgbps-accent: #f59e0b;
   --bgbps-bg: linear-gradient(135deg, #d97706 0%, #b45309 100%);
}

.news-card.bgbps-color-cyan {
   --bgbps-primary: #0891b2;
   --bgbps-secondary: #0e7490;
   --bgbps-accent: #06b6d4;
   --bgbps-bg: linear-gradient(135deg, #0891b2 0%, #0e7490 100%);
}

/* ---------- Custom card: shared base ---------- */
.news-card.bgbps-custom {
   --bgbps-pad-top: 24px;
   --bgbps-pad-x: 30px;
   --bgbps-pad-bottom: 16px;
   background: var(--bgbps-bg);
}

.news-card.bgbps-custom .image-section {
   background: transparent;
   padding: var(--bgbps-pad-top) var(--bgbps-pad-x) var(--bgbps-pad-bottom);
}

.news-card.bgbps-custom .image-section img.top-image,
.news-card.bgbps-custom .no-image-placeholder {
   border: 5px solid rgba(255, 255, 255, 0.85);
   border-radius: 15px;
   box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.news-card.bgbps-custom .site-icon {
   top: calc(var(--bgbps-pad-top) + 20px);
   left: calc(var(--bgbps-pad-x) + 20px);
}

.news-card.bgbps-custom .date-badge {
   top: calc(var(--bgbps-pad-top) + 20px);
   right: calc(var(--bgbps-pad-x) + 20px);
   background: var(--bgbps-secondary);
   border: 2px solid rgba(255, 255, 255, 0.85);
}

.news-card.bgbps-custom .headline {
   color: #ffffff;
   text-shadow: 2px 2px 10px rgba(0, 0, 0, 0.45);
}

.news-card.bgbps-custom .footer {
   background: rgba(0, 0, 0, 0.28);
}

.news-card.bgbps-custom .footer .center-text::before,
.news-card.bgbps-custom .footer .center-text::after {
   background: var(--bgbps-accent);
}

/* ---------- Layout: Classic ---------- */
.news-card.bgbps-custom.bgbps-layout-classic .footer {
   border-top: 2px solid rgba(255, 255, 255, 0.3);
}

/* ---------- Layout: Modern ---------- */
.news-card.bgbps-custom.bgbps-layout-modern .image-section img.top-image,
.news-card.bgbps-custom.bgbps-layout-modern .no-image-placeholder {
   border: 4px solid rgba(255, 255, 255, 0.9);
   border-radius: 20px;
   box-shadow: 0 12px 30px rgba(0, 0, 0, 0.2);
}

.news-card.bgbps-custom.bgbps-layout-modern .site-icon {
   border-radius: 12px;
}

.news-card.bgbps-custom.bgbps-layout-modern .footer {
   background: rgba(255, 255, 255, 0.15);
}

/* ---------- Layout: Elegant ---------- */
.news-card.bgbps-custom.bgbps-layout-elegant .image-section img.top-image,
.news-card.bgbps-custom.bgbps-layout-elegant .no-image-placeholder {
   border: 6px solid rgba(255, 255, 255, 0.85);
   border-radius: 10px 40px 10px 40px;
}

.news-card.bgbps-custom.bgbps-layout-elegant .site-icon {
   left: 50%;
   transform: translateX(-50%);
}

.news-card.bgbps-custom.bgbps-layout-elegant .date-badge {
   top: auto;
   right: auto;
   left: 50%;
   bottom: calc(var(--bgbps-pad-bottom) + 20px);
   transform: translateX(-50%);
}

.news-card.bgbps-custom.bgbps-layout-elegant .headline-section {
   margin: 0 40px;
   padding: 20px 50px 10px;
   border-left: 5px solid rgba(255, 255, 255, 0.5);
   border-right: 5px solid rgba(255, 255, 255, 0.5);
}

/* ---------- Layout: Minimal ---------- */
.news-card.bgbps-custom.bgbps-layout-minimal .image-section img.top-image,
.news-card.bgbps-custom.bgbps-layout-minimal .no-image-placeholder {
   border: 3px solid rgba(255, 255, 255, 0.7);
   border-radius: 8px;
   box-shadow: none;
}

.news-card.bgbps-custom.bgbps-layout-minimal .site-icon {
   border-radius: 8px;
}

.news-card.bgbps-custom.bgbps-layout-minimal .date-badge {
   background: rgba(0, 0, 0, 0.45);
   border: none;
   border-radius: 8px;
}

.news-card.bgbps-custom.bgbps-layout-minimal .headline-section {
   margin: 0 40px;
   padding: 20px 50px 10px;
   background: rgba(255, 255, 255, 0.05);
   border: 1px solid rgba(255, 255, 255, 0.2);
   border-bottom: none;
   border-radius: 12px 12px 0 0;
}

/* ---------- Layout: Bold ---------- */
.news-card.bgbps-custom.bgbps-layout-bold .image-section img.top-image,
.news-card.bgbps-custom.bgbps-layout-bold .no-image-placeholder {
   border: 8px solid rgba(255, 255, 255, 0.9);
   border-radius: 25px 0 25px 0;
   box-shadow: 0 15px 35px rgba(0, 0, 0, 0.25);
}

.news-card.bgbps-custom.bgbps-layout-bold .date-badge {
   background: rgba(0, 0, 0, 0.35);
}

.news-card.bgbps-custom.bgbps-layout-bold .headline-section {
   margin: 0 30px;
   padding: 20px 50px 10px;
   background: rgba(0, 0, 0, 0.3);
   border: 3px solid rgba(255, 255, 255, 0.4);
   border-bottom: none;
   border-radius: 25px 25px 0 0;
}

.news-card.bgbps-custom.bgbps-layout-bold .footer {
   background: rgba(0, 0, 0, 0.4);
}

@media print {
   .bgbps-customizer {
      display: none;
   }
}