/* ===========================================================
   Image Color Changer – FULL CSS (scoped, uses base.css vars)
   Scope root: #ctl-image-color-changer
   =========================================================== */

/* -------- Page shell -------- */
#ctl-image-color-changer .ctl-page{
  max-width:1200px;margin:0 auto;
  padding:var(--space-4);
  display:flex;flex-direction:column;gap:var(--space-5);
}

#ctl-image-color-changer .ctl-wrapper {
  max-width:1400px;margin:0 auto;
  width: 100%;
  padding:var(--space-4);
}

#ctl-image-color-changer .ctl-page-title{
  text-align:center;margin-bottom:var(--space-6);
  padding:var(--space-4) 0;animation:fadeIn .6s ease-out;
}
#ctl-image-color-changer .ctl-page-title h1{
  font-size:2.5rem;font-weight:600;margin-bottom:var(--space-2);
  color:var(--ink-900);
}
#ctl-image-color-changer .ctl-page-title p{
  font-size:1.1rem;color:var(--ink-700);max-width:600px;margin:0 auto;
}

#ctl-image-color-changer main{
  display:flex;flex-direction:column;
}

.ctl-image-divider {
  position: relative;
  margin-top: 100px;
}

/* -------- Cards for upload/editor containers -------- */

#ctl-image-color-changer .ctl-upload {
  height: 500px;
}

#ctl-image-color-changer .ctl-upload,
#ctl-image-color-changer .ctl-editor{
  background:var(--card);border-radius:var(--radius-card);
  box-shadow:var(--shadow-lg);padding:var(--space-6);
  animation:slideUp .5s ease-out;
}

/* =========================
   Uploader
   ========================= */
#ctl-image-color-changer .ctl-dropzone{
  border:2px dashed var(--line);border-radius:12px;
  padding:48px var(--space-4);text-align:center;cursor:pointer;
  transition:all .2s ease;
  height: 100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--space-4);
}
#ctl-image-color-changer .ctl-dropzone:hover{
  border-color:var(--primary);background:rgba(14,129,226,.06);
}
#ctl-image-color-changer .ctl-dropzone.active{
  border-color:var(--primary);background:rgba(14,129,226,.09);
}
#ctl-image-color-changer .ctl-upload-icon{
  margin-bottom:var(--space-4);animation:floatAnimation 2s ease-in-out infinite;
}
#ctl-image-color-changer .ctl-upload-btn{
  color:var(--primary);font-weight:500;cursor:pointer;transition:all .2s ease;
}
#ctl-image-color-changer .ctl-upload-btn:hover{text-decoration:underline;}
#ctl-image-color-changer .ctl-upload-info{font-size:.875rem;color:var(--ink-500);}

/* =========================
   Editor header + Back
   ========================= */
#ctl-image-color-changer .ctl-editor-header{
  display:flex;justify-content:space-between;align-items:center;
  margin-bottom:var(--space-5);padding-bottom:var(--space-4);
  border-bottom:1px solid var(--line);
}
#ctl-image-color-changer .ctl-editor-header h2{font-size:1.5rem;font-weight:600;}
#ctl-image-color-changer .ctl-back-btn{
  display:flex;align-items:center;gap:var(--space-2);
  padding:var(--space-2) var(--space-4);border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-700);cursor:pointer;transition:all .2s ease;font-size:.875rem;
}
#ctl-image-color-changer .ctl-back-btn:hover{
  background:var(--bg);border-color:var(--ink-500);
}

.custom-shape-divider-top-1761212839 {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
}

.custom-shape-divider-bottom-1761213904 {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    overflow: hidden;
    line-height: 0;
    transform: rotate(180deg);
}

.custom-shape-divider-bottom-1761213904 svg {
    position: relative;
    display: block;
    width: calc(100% + 1.3px);
    height: 36px;
}

.custom-shape-divider-bottom-1761213904 .shape-fill {
    fill: #f3f3f3;
}

.ctl-how-text h2 {
  font-size: 38px;
  color: #454545;
  line-height: 1.2;
  font-weight: 500;
}

#ctl-image-color-changer .ctl-faqs h2 {
  font-size: 34px;
  color: #454545;
  line-height: 1.2;
  font-weight: 500;
  text-align: center;
  margin-bottom: 35px;
}


/* =========================
   Previews grid
   ========================= */
#ctl-image-color-changer .ctl-preview-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:var(--space-5);margin-bottom:var(--space-6);
}
@media (max-width:768px){
  #ctl-image-color-changer .ctl-preview-grid{grid-template-columns:1fr;}
}
#ctl-image-color-changer .ctl-preview{display:flex;flex-direction:column;gap:var(--space-4);}
#ctl-image-color-changer .ctl-preview h3{font-size:1rem;font-weight:500;color:var(--ink-700);}
#ctl-image-color-changer .ctl-image-holder{
  background:#f9fafb;border:1px solid var(--line);border-radius:12px;
  min-height:200px;display:flex;align-items:center;justify-content:center;overflow:hidden;
}
#ctl-image-color-changer .ctl-image-holder img,
#ctl-image-color-changer .ctl-image-holder svg{max-width:100%;max-height:300px;object-fit:contain;}

/* =========================
   Editor options
   ========================= */
#ctl-image-color-changer .ctl-editor-options{display:flex;flex-direction:column;gap:var(--space-6);}
#ctl-image-color-changer .ctl-color-replacements{display:flex;flex-direction:column;gap:var(--space-4);}
#ctl-image-color-changer .ctl-color-replacements h3{
  font-size:1rem;font-weight:500;color:var(--ink-700);margin-bottom:var(--space-2);
}

#ctl-image-color-changer #color-replacements-container{
  display:flex;flex-direction:column;gap:var(--space-4);
}

#ctl-image-color-changer .ctl-color-pair{
  display:flex;align-items:center;gap:var(--space-4);
  padding:var(--space-4);border:1px solid var(--line);border-radius:12px;background:#f9fafb;flex-wrap:wrap;
}
#ctl-image-color-changer .ctl-color-picker-group{display:flex;flex-direction:column;gap:var(--space-2);}
#ctl-image-color-changer .ctl-color-picker-label{font-size:.875rem;color:var(--ink-700);}
#ctl-image-color-changer .ctl-color-picker{
  width:100%;height:35px;border:1px solid var(--line);border-radius:8px;overflow:hidden;cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;padding-inline:10px;
}
#ctl-image-color-changer .ctl-color-picker input[type="color"]{
  width:30px;height:100%;border:none;padding:0;background:none;cursor:pointer;
}
#ctl-image-color-changer .ctl-source-color-text,
#ctl-image-color-changer .ctl-target-color-text{height:80%;padding-inline:10px;}

#ctl-image-color-changer .ctl-remove-color-btn{
  margin-left:auto;width:32px;height:32px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;border:none;
  background:rgba(239,68,68,.1);color:var(--danger);cursor:pointer;transition:all .2s ease;
}
#ctl-image-color-changer .ctl-remove-color-btn:hover{background:rgba(239,68,68,.2);}

#ctl-image-color-changer .ctl-add-color-btn{
  display:flex;align-items:center;justify-content:center;padding:var(--space-2) var(--space-4);
  border:1px dashed var(--line);border-radius:12px;background:transparent;color:var(--primary);
  cursor:pointer;transition:all .2s ease;font-size:.875rem;width:fit-content;
}
#ctl-image-color-changer .ctl-add-color-btn:hover{
  border-color:var(--primary);background:rgba(14,129,226,.06);
}

/* --- Pair options (Include shades + slider) --- */
#ctl-image-color-changer .ctl-pair-opts{
  display:flex;gap:var(--space-4);align-items:center;flex-wrap:wrap;margin-left:0;
}
#ctl-image-color-changer .ctl-toggle{
  display:inline-flex;gap:8px;align-items:center;color:var(--ink-700);
}
#ctl-image-color-changer .ctl-tol{
  display:inline-flex;gap:8px;align-items:center;color:var(--ink-700);
}
#ctl-image-color-changer .ctl-tol input[type="range"]{width:160px;}
#ctl-image-color-changer .ctl-tol-val{min-width:2ch;text-align:right;color:var(--ink-500);}

/* =========================
   Actions (download, undo/redo/reset)
   ========================= */
#ctl-image-color-changer .ctl-actions{display:flex;flex-direction:column;gap:var(--space-4);margin-top:var(--space-4);}
#ctl-image-color-changer .ctl-download{display:flex;gap:var(--space-4);align-items:center;}
#ctl-image-color-changer .ctl-primary-btn{
  display:flex;align-items:center;gap:var(--space-2);padding:var(--space-3) var(--space-5);
  border-radius:12px;border:none;background:var(--primary);color:#fff;font-weight:500;cursor:pointer;transition:all .2s ease;
}
#ctl-image-color-changer .ctl-download-format select{
  padding:var(--space-3) var(--space-4);border-radius:12px;border:1px solid var(--line);
  background:var(--card);color:var(--ink-700);font-size:.875rem;cursor:pointer;transition:all .2s ease;
}
#ctl-image-color-changer .ctl-download-format select:hover,
#ctl-image-color-changer .ctl-download-format select:focus{
  border-color:var(--primary);outline:none;
}

#ctl-image-color-changer .ctl-edit-actions{display:flex;gap:var(--space-4);flex-wrap:wrap;}
#ctl-image-color-changer .ctl-action-btn{
  display:flex;align-items:center;gap:var(--space-2);padding:var(--space-2) var(--space-4);
  border-radius:12px;border:1px solid var(--line);background:var(--card);color:var(--ink-700);
  cursor:pointer;transition:all .2s ease;font-size:.875rem;
}
#ctl-image-color-changer .ctl-action-btn:hover:not(:disabled){
  background:var(--bg);border-color:var(--ink-500);
}
#ctl-image-color-changer .ctl-action-btn:disabled{opacity:.5;cursor:not-allowed;}

/* =========================
   Modal
   ========================= */
#ctl-image-color-changer .ctl-modal{
  display:none;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:1000;
  align-items:center;justify-content:center;padding:var(--space-4);
}
#ctl-image-color-changer .ctl-modal.active{display:flex;animation:fadeIn .3s ease-out;}
#ctl-image-color-changer .ctl-modal-content{
  background:var(--card);border-radius:var(--radius-card);padding:var(--space-6);
  max-width:600px;width:100%;box-shadow:var(--shadow-lg);position:relative;max-height:80vh;overflow:auto;
}
#ctl-image-color-changer .ctl-close-modal{
  position:absolute;top:var(--space-4);right:var(--space-4);background:none;border:none;
  font-size:1.5rem;cursor:pointer;color:var(--ink-500);transition:all .2s ease;
}
#ctl-image-color-changer .ctl-close-modal:hover{color:var(--ink-900);}
#ctl-image-color-changer .ctl-modal-content h2{margin-bottom:var(--space-4);font-size:1.5rem;}
#ctl-image-color-changer .ctl-modal-content ol{padding-left:var(--space-5);}
#ctl-image-color-changer .ctl-modal-content li{margin-bottom:var(--space-3);}

/* =========================
   Toast (uses your JS class name)
   ========================= */
#ctl-image-color-changer .color-notification{
  background:var(--success);color:#fff;padding:var(--space-2) var(--space-4);border-radius:12px;
  position:fixed;bottom:var(--space-6);left:50%;transform:translateX(-50%);
  box-shadow:var(--shadow-lg);z-index:100;animation:slideUp .3s ease-out, fadeOut .5s ease-out 2s forwards;
}

/* ===========================================================
   Landing Content Blocks (Picsart-style, no conflicts)
   =========================================================== */

/* Generic section card */
#ctl-image-color-changer .ctl-section {
  /* max-width: var(--container); */
  padding: var(--space-6);
  background: var(--card);
  border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}

#ctl-image-color-changer .ctl-how {
  background: #f3f3f3;
}

#ctl-image-color-changer .ctl-how .ctl-wrapper{
  padding-block: 80px;
}

/* HOW-TO (two columns) */
#ctl-image-color-changer .ctl-how-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-6);
  align-items: center;
}
@media(max-width:768px){ #ctl-image-color-changer .ctl-how-grid{grid-template-columns:1fr;} }

#ctl-image-color-changer .ctl-how-text ol { padding-left: 1.2rem; color: var(--ink-700); }
#ctl-image-color-changer .ctl-how-text li { margin-bottom: var(--space-2); }
#ctl-image-color-changer .ctl-how-img img {
  border-radius: var(--radius-card);
  width: 100%;
  box-shadow: var(--shadow-lg);
}

/* 3 FEATURE ICONS */
#ctl-image-color-changer .ctl-features-icons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  text-align: center;
  gap: var(--space-6);
  background: var(--bg);
  border: none;
  box-shadow: none;
}
#ctl-image-color-changer .ctl-use-text h3{
  font-weight: 500;
  font-size: 34px;
  margin-bottom: var(--space-3);
  color: #262b33;
}
.ctl-how-text a {
  padding-inline: 45px;
}
#ctl-image-color-changer .ctl-feature img { width: 64px; height: 64px; margin-bottom: var(--space-3); }
#ctl-image-color-changer .ctl-feature h3 { font-size: 1.1rem; margin-bottom: var(--space-2); color: var(--ink-900); }
#ctl-image-color-changer .ctl-feature p { color: var(--ink-700); }

/* USE CASES (alternating) */
#ctl-image-color-changer .ctl-usecases { display: flex; flex-direction: column; gap: var(--space-7); }
#ctl-image-color-changer .ctl-usecase {
  display: flex; align-items: center; gap: var(--space-6);
}
#ctl-image-color-changer .ctl-usecase.reverse { flex-direction: row-reverse; }
@media(max-width:768px){
  #ctl-image-color-changer .ctl-usecase,
  #ctl-image-color-changer .ctl-usecase.reverse { flex-direction: column; }
}
#ctl-image-color-changer .ctl-use-img img {
  width: 100%; border-radius: var(--radius-card);
  box-shadow: var(--shadow-lg);
}
#ctl-image-color-changer .ctl-use-text p { color: var(--ink-700); margin-bottom: var(--space-3); font-size: 17px;}
#ctl-image-color-changer .ctl-link { color: var(--primary); font-weight: 500; text-decoration: none; }
#ctl-image-color-changer .ctl-link:hover { text-decoration: underline; }

/* FAQ block */
#ctl-image-color-changer .ctl-faqs details {
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-3);
  padding: var(--space-4) var(--space-4);
  transition: all .2s ease;
}
#ctl-image-color-changer .ctl-faqs summary {
  font-weight: 500; cursor: pointer; color: var(--ink-900);
  font-size: 18px;
}
#ctl-image-color-changer .ctl-faqs details[open] { background: #f8fafc; }
#ctl-image-color-changer .ctl-faqs p { margin-top: var(--space-5); margin: var(--space-3); color: #2b2b2b; font-weight: 400;}

/* CTA */
#ctl-image-color-changer .ctl-cta {
  text-align: center;
  background: var(--primary);
  color: #fff;
  margin-bottom: 50px;
  padding-inline: 150px;
  display: flex;
  flex-direction: column;
  padding-block: 80px;
}

#ctl-image-color-changer .ctl-cta h2 { color: #fff; margin-bottom: var(--space-4); margin-top: 0; font-size: 50px; font-weight: 400; text-align: left;}

#ctl-image-color-changer .ctl-btn--primary {
  margin-right: auto;
  display: inline-block;
  padding: 0;
  border-bottom: 1px solid #ffffff80;
  font-weight: 500;
  border-radius: 0;
  padding-bottom: 10px;
}

/* Utility lists/tables used by content sections */
#ctl-image-color-changer .ctl-steps { padding-left: 1.25rem; margin-top: var(--space-3); }
#ctl-image-color-changer .ctl-steps li { margin: 6px 0; }

#ctl-image-color-changer .ctl-list { padding-left: 1.1rem; }
#ctl-image-color-changer .ctl-list li { margin: 6px 0; color: var(--ink-700); }

#ctl-image-color-changer .ctl-table-wrap { overflow:auto; }
#ctl-image-color-changer .ctl-table {
  width:100%; border-collapse:separate; border-spacing:0;
  border:1px solid var(--line); border-radius:12px; background: var(--card);
}
#ctl-image-color-changer .ctl-table th,
#ctl-image-color-changer .ctl-table td { padding:12px 14px; border-bottom:1px solid var(--line); text-align:left; }
#ctl-image-color-changer .ctl-table thead th { background:#F3F6FB; color: var(--ink-700); font-weight:600; }
#ctl-image-color-changer .ctl-table tbody tr:last-child td { border-bottom:none; }

/* ===========================================================
   Animations
   =========================================================== */
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:none}}
@keyframes floatAnimation{0%,100%{transform:none}50%{transform:translateY(-8px)}}
@keyframes fadeOut{from{opacity:1}to{opacity:0}}