/* Reusable Text Editor Styles */
.custom-editor-container{border:1px solid #ddd;border-radius:4px;overflow:hidden;margin-bottom:15px;background:#fff}
.custom-editor-container .editor-toolbar{background:#f5f5f5;border-bottom:1px solid #ddd;padding:8px;display:flex;flex-wrap:wrap;gap:4px;align-items:center}
.custom-editor-container .toolbar-btn{width:30px;height:30px;display:inline-flex;align-items:center;justify-content:center;background:none;border:1px solid transparent;border-radius:3px;cursor:pointer;font-size:14px;color:#444;transition:all 0.2s ease}
.custom-editor-container .toolbar-btn:hover{background:#e0e0e0;border-color:#ccc}
.custom-editor-container .toolbar-btn:active{background:#d0d0d0}
.custom-editor-container .toolbar-btn.active{background:#3498db;color:#fff;border-color:#2980b9}
.custom-editor-container .toolbar-select{height:30px;border:1px solid #ddd;border-radius:3px;background:#fff;font-size:13px;padding:2px 5px;cursor:pointer}
.custom-editor-container .toolbar-select:focus{outline:none;border-color:#aaa}
.custom-editor-container .separator{padding:0 6px;color:#bbb;display:inline-flex;align-items:center}
/* Color Picker Styles */
.color-picker-wrapper{position:relative;display:inline-block}
.color-picker-wrapper .color-btn{position:relative;overflow:hidden;border-bottom:3px solid #000;transition:border-color 0.3s ease}
.color-picker-wrapper .color-btn:hover{border-bottom-color:#3498db}
.color-picker-wrapper .color-input{position:absolute;top:0;left:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none}
.color-picker-wrapper .color-input::-webkit-color-swatch-wrapper{padding:0}
.color-picker-wrapper .color-input::-webkit-color-swatch{border:none}
.color-picker-wrapper .color-btn i{transition:color 0.3s ease}
/* Editor Content */
.editor-content{min-height:180px;max-height:450px;overflow-y:auto;padding:14px;font-size:15px;line-height:1.5;border:0;outline:0;background:#C9C9C9}
.editor-content:focus{outline:none;box-shadow:none}
.editor-content ul, .editor-content ol{margin:10px 0;padding-left:30px}
.editor-content ul li{list-style-type:disc;margin:3px 0}
.editor-content ol li{list-style-type:decimal;margin:3px 0}
.editor-content img{max-width:100%;height:auto;cursor:pointer;border:2px solid transparent;transition:border-color 0.2s ease;display:inline-block;margin:2px}
.editor-content img:hover{border:2px dashed #3498db;transform:scale(1.02)}
.editor-content img.selected{border:2px solid #3498db;box-shadow:0 0 8px rgba(52, 152, 219, 0.3)}
.custom-editor-wrapper small .char-count{font-weight:600}
.editor-image-input{display:none}
/* Feedback bubble for resize */
.editor-resize-feedback{position:fixed;top:20px;right:20px;z-index:9999;padding:8px 15px;background:#28a745;color:#fff;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.15);opacity:0;transition:all .3s ease;transform:translateY(-10px)}
.editor-resize-feedback.show{opacity:1;transform:translateY(0)}
/* Modal improvements */
.modal .image-preview img{max-width:100%;height:auto;border:1px solid #ddd;border-radius:4px}
#imageResizeModal{position:fixed !important;z-index:10070 !important;top:0;left:0;width:100%;height:100%}
#imageResizeModal .modal-dialog{z-index:10071 !important;margin:1.75rem auto;max-width:500px;position:relative}
#imageResizeModal .modal-content{position:relative;background:#fff;border:1px solid #dee2e6;border-radius:0.5rem;box-shadow:0 0.5rem 1rem rgba(0,0,0,0.15);z-index:10072 !important}
#imageResizeModal.show{display:block !important}
#imageResizeModal .modal-body{padding:20px;max-height:70vh;overflow-y:auto}
#imageResizeModal .form-label{font-weight:500;color:#495057;margin-bottom:5px}
#imageResizeModal input[type="number"]{border:1px solid #ced4da;border-radius:4px;padding:6px 12px}
#imageResizeModal input[type="number"]:focus{border-color:#80bdff;outline:0;box-shadow:0 0 0 0.2rem rgba(0,123,255,.25)}
#imageResizeModal .form-check{margin-top:15px}
#imageResizeModal .form-check-label{cursor:pointer}
#imageResizeModal #deleteImage{z-index:10073 !important;position:relative}
#imageResizeModal .close, #imageResizeModal .btn-close{background:transparent;border:0;font-size:1.5rem;font-weight:700;line-height:1;color:#000;text-shadow:0 1px 0 #fff;opacity:.5;cursor:pointer;z-index:10073 !important}
#imageResizeModal .close:hover, #imageResizeModal .btn-close:hover{opacity:.75}
/* Ensure modal elements are clickable */
#imageResizeModal input, #imageResizeModal button, #imageResizeModal .form-control{pointer-events:auto !important;z-index:10073 !important;position:relative}
/* Link styles for editor content */
.editor-content a{color:var(--color-primary, #3d1d04);text-decoration:underline;transition:color 0.3s ease}
.editor-content a:hover{color:var(--color-secondary, #ec7616);text-decoration:underline}
/* Link styles for custom-text-color content (frontend display) */
.custom-text-color a{color:var(--color-primary, #3d1d04) !important;text-decoration:underline;transition:color 0.3s ease}
.custom-text-color a:hover{color:var(--color-secondary, #ec7616) !important;text-decoration:underline}
/* Heading styles for editor content */
.editor-content h1,.editor-content h2,.editor-content h3,.editor-content h4,.editor-content h5,.editor-content h6{color:var(--color-primary, #3d1d04);font-weight:600}
/* Heading styles for custom-text-color content (frontend display) */
.custom-text-color h1,.custom-text-color h2,.custom-text-color h3,.custom-text-color h4,.custom-text-color h5,.custom-text-color h6{color:var(--color-primary, #3d1d04) !important;font-weight:600}
/* Text formatting for custom-text-color content (frontend display) */
.custom-text-color strong,.custom-text-color b{color:var(--color-primary, #3d1d04) !important;font-weight:bold}
.custom-text-color em,.custom-text-color i:not([class*="fa"]):not([class*="bi"]):not([class*="fas"]):not([class*="far"]):not([class*="fab"]){color:var(--color-primary, #3d1d04) !important;font-style:italic}
/* Font size elements with custom-text-color */
.editor-content font.custom-text-color{color:var(--color-primary, #3d1d04) !important}
.editor-content span.custom-text-color{color:var(--color-primary, #3d1d04) !important}
/* Ensure font elements maintain custom color regardless of size */
.editor-content font[size="1"].custom-text-color,
.editor-content font[size="2"].custom-text-color,
.editor-content font[size="3"].custom-text-color,
.editor-content font[size="4"].custom-text-color,
.editor-content font[size="5"].custom-text-color,
.editor-content font[size="6"].custom-text-color,
.editor-content font[size="7"].custom-text-color{color:var(--color-primary, #3d1d04) !important}
/* Span elements with font-size styling and custom-text-color */
.editor-content span.custom-text-color[style*="font-size"]{color:var(--color-primary, #3d1d04) !important}

/* ── Grid layout picker ─────────────────────────────────────── */
.te-grid-picker{background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 4px 16px rgba(0,0,0,.12);padding:12px;z-index:9999;min-width:260px}
.te-grid-picker-title{font-size:12px;font-weight:600;color:#666;text-transform:uppercase;letter-spacing:.05em;margin-bottom:8px}
.te-grid-opts{display:flex;flex-direction:column;gap:4px}
.te-grid-opt{display:flex;align-items:center;gap:10px;width:100%;background:none;border:1px solid transparent;border-radius:4px;padding:6px 8px;cursor:pointer;text-align:left;font-size:13px;color:#333;transition:background .15s,border-color .15s}
.te-grid-opt:hover{background:#f0f4ff;border-color:#3498db}
.te-grid-vis{display:flex;gap:3px;width:80px;flex-shrink:0}
.te-grid-vis span{height:22px;background:#c8daee;border-radius:2px;border:1px solid #8ab0d0}
/* Grid table inside editor */
.editor-content .te-grid-table{margin:8px 0;background:rgba(52,152,219,.03);outline:1px dashed #b0c4de}
.editor-content .te-grid-col{outline:1px dashed #aac;min-height:48px;border-radius:3px}
/* Grid delete toolbar */
.te-grid-toolbar{position:absolute;display:flex;align-items:center;flex-wrap:wrap;gap:6px;background:#fff;border:1px solid #ddd;border-radius:6px;box-shadow:0 2px 10px rgba(0,0,0,.18);padding:5px 8px;z-index:9998;font-size:12px;color:#555;pointer-events:all}
.te-grid-toolbar-label{font-size:11px;color:#888;user-select:none;font-weight:600}
.te-grid-toolbar-sep{width:1px;height:18px;background:#ddd;margin:0 2px}
.te-grid-delete-btn{background:none;border:none;color:#e74c3c;cursor:pointer;padding:2px 4px;border-radius:3px;font-size:12px;display:flex;align-items:center;gap:4px;transition:background .15s}
.te-grid-delete-btn:hover{background:#fdecea}
/* CTA button — responsive preview inside the editor (mirrors public site.css) */
a.te-cta-btn{display:inline-block;max-width:100%;box-sizing:border-box;white-space:normal;overflow-wrap:break-word;word-break:break-word;text-align:center;text-decoration:none!important;vertical-align:middle;font-size:clamp(0.875rem,1.5vw,1rem);padding:0.375rem 0.75rem;line-height:1.4}
a.te-cta-btn.btn-sm{font-size:clamp(0.8rem,1.2vw,0.875rem);padding:0.25rem 0.5rem}
a.te-cta-btn.btn-lg{font-size:clamp(1rem,1.8vw,1.25rem);padding:0.5rem 1rem}
@media (max-width:991px){
  a.te-cta-btn{font-size:clamp(0.8rem,2vw,0.95rem);padding:0.35rem 0.65rem}
  a.te-cta-btn.btn-sm{font-size:clamp(0.72rem,1.6vw,0.85rem);padding:0.22rem 0.45rem}
  a.te-cta-btn.btn-lg{font-size:clamp(0.9rem,2.4vw,1.1rem);padding:0.42rem 0.85rem}
}
@media (max-width:767px){
  a.te-cta-btn{font-size:clamp(0.72rem,2.5vw,0.88rem);padding:0.3rem 0.55rem}
  a.te-cta-btn.btn-sm{font-size:clamp(0.65rem,2vw,0.78rem);padding:0.2rem 0.4rem}
  a.te-cta-btn.btn-lg{font-size:clamp(0.8rem,3vw,1rem);padding:0.36rem 0.7rem}
}
@media (max-width:575px){
  a.te-cta-btn{display:block;width:100%;margin-left:auto;margin-right:auto;font-size:clamp(0.65rem,3.5vw,0.8rem);padding:0.28rem 0.5rem}
  a.te-cta-btn.btn-sm{font-size:clamp(0.6rem,3vw,0.72rem);padding:0.2rem 0.38rem}
  a.te-cta-btn.btn-lg{font-size:clamp(0.7rem,4vw,0.9rem);padding:0.32rem 0.6rem}
}
@media (max-width:380px){
  a.te-cta-btn{font-size:clamp(0.58rem,3.8vw,0.72rem);padding:0.24rem 0.4rem}
  a.te-cta-btn.btn-sm{font-size:clamp(0.54rem,3.2vw,0.65rem);padding:0.18rem 0.32rem}
  a.te-cta-btn.btn-lg{font-size:clamp(0.62rem,4.2vw,0.82rem);padding:0.28rem 0.5rem}
}
/* Icon picker */
.te-icon-cat-btn{background:#f5f5f5;border:1px solid #ddd;border-radius:12px;cursor:pointer;font-size:11px;padding:3px 8px;color:#555;white-space:nowrap;transition:all .15s;line-height:1.5}
.te-icon-cat-btn:hover{background:#e8f0ff;border-color:#3498db;color:#3498db}
.te-icon-cat-btn.active{background:#3498db;color:#fff;border-color:#2980b9}
.te-icon-pick-btn{width:36px;height:36px;background:none;border:1px solid transparent;border-radius:4px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;font-size:16px;color:#555;transition:all .15s;flex-shrink:0}
.te-icon-pick-btn:hover{background:#f0f4ff;border-color:#3498db;color:#3498db}
.te-icon-pick-btn.active{background:#3498db;color:#fff;border-color:#2980b9}
.editor-content .te-icon{cursor:pointer;display:inline-block}
.editor-content .te-icon:hover{outline:2px dashed #3498db;outline-offset:1px}
/* Grid bg group */
.te-grid-bg-group{display:flex;align-items:center;gap:5px}
.te-grid-bg-group label{font-size:11px;color:#666;margin:0;user-select:none}
.te-grid-color-btn{width:22px;height:22px;border-radius:3px;border:2px solid #ccc;cursor:pointer;padding:0;position:relative;overflow:hidden;flex-shrink:0}
.te-grid-color-btn input[type="color"]{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer;border:none;padding:0}
.te-grid-opacity-group{display:flex;align-items:center;gap:4px}
.te-grid-opacity-group label{font-size:11px;color:#666;margin:0;user-select:none}
.te-grid-opacity-slider{width:64px;height:4px;cursor:pointer;accent-color:#3498db}
.te-grid-opacity-val{font-size:11px;color:#555;min-width:28px;text-align:right;user-select:none}
.te-grid-border-group{display:flex;align-items:center;gap:5px}
.te-grid-border-group label{font-size:11px;color:#666;margin:0;user-select:none}
.te-grid-border-width{width:44px;height:22px;border:1px solid #ddd;border-radius:3px;font-size:11px;padding:1px 4px;text-align:center}
/* Grid table in display mode — no visible borders */

/* ---- Global: all images from editor/upload are always responsive ---- */
.rich-content-display img,
.product-description img,
.product-short-description img,
.nutriciantable img {
    max-width: 100% !important;
    height: auto !important;
    display: block;
}

/* ---- Responsive rich-content-display ---- */
/*
 * Διαχωρισμός font-size / font-weight:
 *   - [style*="font-size"]:not([style*="font-weight"]) → κανονικό κείμενο  (clamp A)
 *   - [style*="font-size"][style*="font-weight"]        → κείμενο με βάρος (clamp B, ελαφρώς μεγαλύτερο min για να διατηρεί την έμφαση)
 *   Το font-weight από το inline style διατηρείται αυτόματα (δεν override-αρεται).
 */

/* Tablet (≤991px) */
@media (max-width: 991px) {
    /* Κανονικό κείμενο (χωρίς inline font-weight) */
    .rich-content-display [style*="font-size"]:not([style*="font-weight"]) {
        font-size: clamp(0.9rem, 2.5vw, 1.15rem) !important;
    }
    /* Κείμενο με inline font-weight (bold, 700 κ.λπ.) — ελαφρώς μεγαλύτερο για να διατηρεί την οπτική έμφαση */
    .rich-content-display [style*="font-size"][style*="font-weight"] {
        font-size: clamp(0.95rem, 2.6vw, 1.2rem) !important;
        /* font-weight προέρχεται από το inline style — δεν χρειάζεται override */
    }
    .rich-content-display h1 { font-size: clamp(1.4rem, 4vw, 2rem) !important; }
    .rich-content-display h2 { font-size: clamp(1.2rem, 3.5vw, 1.7rem) !important; }
    .rich-content-display h3 { font-size: clamp(1.05rem, 3vw, 1.4rem) !important; }
    .rich-content-display h4 { font-size: clamp(0.95rem, 2.5vw, 1.2rem) !important; }
    .rich-content-display p  { font-size: clamp(0.88rem, 2.2vw, 1.05rem) !important; }
    .rich-content-display img { max-width: 100% !important; height: auto !important; }
}

/* Mobile (≤575px) */
@media (max-width: 575px) {
    /* Κανονικό κείμενο */
    .rich-content-display [style*="font-size"]:not([style*="font-weight"]) {
        font-size: clamp(0.85rem, 4vw, 1rem) !important;
    }
    /* Κείμενο με inline font-weight */
    .rich-content-display [style*="font-size"][style*="font-weight"] {
        font-size: clamp(0.9rem, 4.2vw, 1.05rem) !important;
    }
    .rich-content-display h1 { font-size: clamp(1.25rem, 6vw, 1.6rem) !important; }
    .rich-content-display h2 { font-size: clamp(1.1rem, 5vw, 1.35rem) !important; }
    .rich-content-display h3 { font-size: clamp(1rem, 4.5vw, 1.2rem) !important; }
    .rich-content-display h4 { font-size: clamp(0.9rem, 4vw, 1.05rem) !important; }
    .rich-content-display p  { font-size: clamp(0.85rem, 3.8vw, 1rem) !important; }
    .rich-content-display img { max-width: 100% !important; height: auto !important; }
}