/* =====================================================
   HTML TEXT EDITOR
   PART 1
   HERO + EDITOR + TOOLBAR + CODE PANEL
===================================================== */

.fote-html-page{

    --fote-primary:#5b6ff5;
    --fote-secondary:#7c3aed;
    --fote-dark:#111827;
    --fote-text:#4b5563;
    --fote-muted:#6b7280;
    --fote-border:#e5e7eb;
    --fote-soft:#f6f8fc;
    --fote-white:#ffffff;
    --fote-success:#22c55e;
    --fote-shadow:0 18px 45px rgba(15,23,42,.08);

    background:var(--fote-soft);
    color:var(--fote-text);
    font-family:Inter,Arial,sans-serif;
    overflow:hidden;

}

.fote-html-page *,
.fote-html-page *:before,
.fote-html-page *:after{

    box-sizing:border-box;

}

.fote-html-container{

    max-width:1200px;
    margin:auto;
    padding:0 20px;

}

/* ===================================
   HERO
=================================== */

.fote-html-hero{

    margin:30px auto 0;
    padding:85px 20px;

    text-align:center;

    color:#fff;

    background:
    radial-gradient(circle at top left,
    rgba(255,255,255,.15),
    transparent 28%),

    linear-gradient(
        135deg,
        var(--fote-primary),
        var(--fote-secondary)
    );

}

.fote-html-badge{

    display:inline-block;

    margin-bottom:18px;

    padding:8px 16px;

    color:#fff;

    background:rgba(255,255,255,.14);

    border:1px solid rgba(255,255,255,.25);

    border-radius:999px;

    font-size:12px;
    font-weight:700;
    text-transform:uppercase;

}

.fote-html-hero h1{

    margin:0 0 18px;

    color:#fff;

    font-size:54px;

    line-height:1.15;

    font-weight:800;

}

.fote-html-hero p{

    max-width:760px;

    margin:auto;

    color:#eef2ff;

    font-size:18px;

    line-height:1.8;

}

.fote-html-hero-btn{

    display:inline-block;

    margin-top:28px;

    padding:14px 28px;

    background:#fff;

    color:#5b6ff5;

    border-radius:999px;

    font-weight:700;

    text-decoration:none;

    transition:.25s;

}

.fote-html-hero-btn:hover{

    transform:translateY(-3px);

}

/* ===================================
   EDITOR
=================================== */

.fote-html-editor-section{

    padding:60px 0;

}

.fote-html-editor-box{

    padding:35px;

    background:#fff;

    border-radius:18px;

    border:1px solid var(--fote-border);

    box-shadow:var(--fote-shadow);

}

.fote-html-editor-header{

    display:flex;

    justify-content:space-between;

    gap:25px;

    margin-bottom:30px;

}

.fote-html-section-label{

    display:inline-block;

    margin-bottom:12px;

    padding:8px 14px;

    color:#7c3aed;

    background:#f1edff;

    border-radius:999px;

    font-size:12px;

    font-weight:700;

    text-transform:uppercase;

}

.fote-html-editor-header h2{

    margin:0 0 14px;

    color:#111827;

    font-size:34px;

    font-weight:800;

}

.fote-html-editor-header p{

    max-width:700px;

    margin:0;

    color:#6b7280;

    line-height:1.8;

}

.fote-html-status{

    display:flex;

    align-items:center;

    gap:8px;

    height:fit-content;

    padding:10px 16px;

    background:#ecfdf3;

    border:1px solid #bbf7d0;

    border-radius:999px;

    color:#166534;

    font-size:13px;

    font-weight:700;

}

.fote-html-status span{

    width:10px;
    height:10px;

    border-radius:50%;

    background:#22c55e;

}

/* ===================================
   DOCUMENT NAME
=================================== */

.fote-html-document-row{

    margin-bottom:24px;

}

.fote-html-document-row label{

    display:block;

    margin-bottom:8px;

    color:#111827;

    font-weight:700;

}

.fote-html-name-control{

    display:flex;

    align-items:center;

}

.fote-html-name-control input{

    flex:1;

    padding:14px 16px;

    border:1px solid var(--fote-border);

    border-radius:10px 0 0 10px;

    outline:none;

}

.fote-html-name-control input:focus{

    border-color:#5b6ff5;

}

.fote-html-name-control span{

    padding:14px 16px;

    background:#f3f4f6;

    border:1px solid var(--fote-border);

    border-left:0;

    border-radius:0 10px 10px 0;

    font-weight:700;

}

/* ===================================
   TOOLBAR
=================================== */

.fote-html-toolbar{

    display:flex;

    flex-wrap:wrap;

    gap:12px;

    align-items:center;

    margin-bottom:28px;

}

.fote-html-toolbar button{

    display:flex;

    align-items:center;

    gap:8px;

    padding:12px 18px;

    border:0;

    border-radius:10px;

    background:#5b6ff5;

    color:#fff;

    font-size:14px;

    font-weight:700;

    cursor:pointer;

    transition:.25s;

}

.fote-html-toolbar button:hover{

    transform:translateY(-2px);

}

.fote-html-clear-btn{

    background:#e5e7eb !important;

    color:#111827 !important;

}

.fote-html-action-message{

    color:#16a34a;

    font-size:13px;

    font-weight:700;

}

/* ===================================
   WORKSPACE
=================================== */

.fote-html-workspace{

    display:grid;

    grid-template-columns:1fr 1fr;

    gap:24px;

}

.fote-html-panel{

    background:#fff;

    border:1px solid var(--fote-border);

    border-radius:16px;

    overflow:hidden;

}

.fote-html-panel-header{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 18px;

    background:#f8fafc;

    border-bottom:1px solid var(--fote-border);

}

.fote-html-panel-title{

    display:flex;

    align-items:center;

    gap:10px;

    font-weight:700;

}

.fote-html-code-icon,
.fote-html-preview-icon{

    display:flex;

    align-items:center;

    justify-content:center;

    width:34px;
    height:34px;

    border-radius:10px;

    color:#fff;

    background:linear-gradient(
        135deg,
        var(--fote-primary),
        var(--fote-secondary)
    );

}

/* ===================================
   CODE EDITOR
=================================== */

.fote-html-code-wrap{

    display:flex;

    height:550px;

}

.fote-html-line-numbers{

    width:55px;

    overflow:hidden;

    padding:18px 10px;

    background:#f8fafc;

    color:#9ca3af;

    border-right:1px solid var(--fote-border);

    font-size:13px;

    line-height:28px;

    text-align:right;

    user-select:none;

}

#foteHtmlCode{

    flex:1;

    padding:18px;

    border:0;

    outline:none;

    resize:none;

    background:#fff;

    color:#111827;

    font-size:15px;

    line-height:28px;

    font-family:
    Consolas,
    Monaco,
    monospace;

}
/* =====================================================
   HTML TEXT EDITOR
   PART 2
   PREVIEW + STATUS + BENEFITS
===================================================== */

/* ===================================
   LIVE PREVIEW
=================================== */

.fote-html-preview-panel{
  min-width:0;
}

.fote-html-preview-stage{
  min-height:550px;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  overflow:auto;
  padding:18px;
  background:
    linear-gradient(
      90deg,
      rgba(148,163,184,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      rgba(148,163,184,.08) 1px,
      transparent 1px
    ),
    #f8fafc;
  background-size:24px 24px;
}

#foteHtmlPreview{
  width:100%;
  min-height:510px;
  display:block;
  background:#ffffff;
  border:1px solid #dbe1ea;
  border-radius:10px;
  box-shadow:0 10px 28px rgba(15,23,42,.08);
  transition:
    width .3s ease,
    min-height .3s ease;
}

.fote-html-preview-stage[data-device="desktop"] #foteHtmlPreview{
  width:100%;
}

.fote-html-preview-stage[data-device="tablet"] #foteHtmlPreview{
  width:768px;
  max-width:100%;
}

.fote-html-preview-stage[data-device="mobile"] #foteHtmlPreview{
  width:390px;
  max-width:100%;
}

/* ===================================
   DEVICE SWITCH
=================================== */

.fote-html-device-buttons{
  display:flex;
  align-items:center;
  gap:7px;
}

.fote-html-device-buttons button{
  width:34px;
  height:34px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
  color:#64748b;
  background:#ffffff;
  border:1px solid #dbe1ea;
  border-radius:8px;
  cursor:pointer;
  font-size:15px;
  font-weight:800;
  transition:.2s ease;
}

.fote-html-device-buttons button:hover,
.fote-html-device-buttons button.active{
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fote-primary),
    var(--fote-secondary)
  );
  border-color:transparent;
  box-shadow:0 7px 18px rgba(91,111,245,.2);
}

/* ===================================
   EDITOR FOOTER STATUS
=================================== */

.fote-html-editor-footer{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  margin-top:22px;
  padding:15px 17px;
  color:#475569;
  background:#f8fafc;
  border:1px solid var(--fote-border);
  border-radius:11px;
}

.fote-html-footer-item{
  display:flex;
  align-items:center;
  gap:7px;
  font-size:13px;
  font-weight:700;
}

.fote-html-footer-item > span:first-child{
  color:#6d4df4;
}

/* ===================================
   GENERIC SECTION HEADING
=================================== */

.fote-html-section{
  padding:72px 0;
  background:#ffffff;
}

.fote-html-heading{
  max-width:820px;
  margin:0 auto 38px;
  text-align:center;
}

.fote-html-heading h2{
  margin:0 0 16px;
  color:var(--fote-dark);
  font-size:36px;
  line-height:1.25;
  letter-spacing:-.5px;
  font-weight:800;
}

.fote-html-heading p{
  max-width:730px;
  margin:0 auto;
  color:var(--fote-muted);
  font-size:16px;
  line-height:1.8;
}

/* ===================================
   BENEFIT GRID
=================================== */

.fote-html-benefit-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;
}

.fote-html-benefit-card{
  padding:31px 25px;
  text-align:center;
  background:#ffffff;
  border:1px solid var(--fote-border);
  border-radius:16px;
  box-shadow:0 10px 30px rgba(15,23,42,.07);
  transition:
    transform .25s ease,
    box-shadow .25s ease,
    border-color .25s ease;
}

.fote-html-benefit-card:hover{
  transform:translateY(-6px);
  border-color:#d4d0ff;
  box-shadow:0 18px 42px rgba(15,23,42,.12);
}

.fote-html-card-icon{
  width:62px;
  height:62px;
  display:flex;
  align-items:center;
  justify-content:center;
  margin:0 auto 18px;
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fote-primary),
    var(--fote-secondary)
  );
  border-radius:18px;
  font-size:26px;
  font-weight:800;
}

.fote-html-benefit-card h3{
  margin:0 0 12px;
  color:var(--fote-dark);
  font-size:20px;
  font-weight:800;
}

.fote-html-benefit-card p{
  margin:0;
  color:var(--fote-muted);
  font-size:14px;
  line-height:1.75;
}

/* ===================================
   TABLET
=================================== */

@media(max-width:980px){

  .fote-html-editor-header{
    flex-direction:column;
  }

  .fote-html-status{
    align-self:flex-start;
  }

  .fote-html-workspace{
    grid-template-columns:1fr;
  }

  .fote-html-benefit-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
  }
}

/* ===================================
   MOBILE
=================================== */

@media(max-width:700px){

  .fote-html-container{
    padding:0 15px;
  }

  .fote-html-hero{
    margin-top:0;
    padding:58px 12px;
  }

  .fote-html-hero h1{
    font-size:36px;
  }

  .fote-html-hero p{
    font-size:16px;
  }

  .fote-html-editor-section{
    padding:32px 0 52px;
  }

  .fote-html-editor-box{
    padding:24px 18px;
    border-radius:14px;
  }

  .fote-html-editor-header h2{
    font-size:28px;
  }

  .fote-html-toolbar{
    align-items:stretch;
  }

  .fote-html-toolbar button{
    flex:1 1 calc(50% - 8px);
    justify-content:center;
  }

  .fote-html-code-wrap{
    height:440px;
  }

  .fote-html-preview-stage{
    min-height:450px;
    padding:12px;
  }

  #foteHtmlPreview{
    min-height:420px;
  }

  .fote-html-benefit-grid{
    grid-template-columns:1fr;
  }

  .fote-html-heading h2{
    font-size:28px;
  }
}

/* ===================================
   SMALL MOBILE
=================================== */

@media(max-width:420px){

  .fote-html-hero h1{
    font-size:32px;
  }

  .fote-html-toolbar button{
    flex:1 1 100%;
  }

  .fote-html-line-numbers{
    width:45px;
  }

  #foteHtmlCode{
    font-size:14px;
  }

  .fote-html-editor-footer{
    align-items:flex-start;
    flex-direction:column;
  }
}
/* =====================================================
   PART 3
   CONTENT + USE CASES + RELATED TOOLS
===================================================== */

/* ===========================
   HOW IT WORKS
=========================== */

.fote-html-how{

    max-width:1200px;

    margin:0 auto;

    padding:72px 20px;

    color:#ffffff;

    background:
        radial-gradient(
            circle at 15% 20%,
            rgba(255,255,255,.16),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            var(--fote-primary),
            var(--fote-secondary)
        );

}

.fote-html-heading-light h2{

    color:#ffffff !important;

}

.fote-html-heading-light p{

    color:#eef2ff !important;

}

.fote-html-label-light{

    color:#ffffff;

    background:rgba(255,255,255,.15);

    border:1px solid rgba(255,255,255,.25);

}

.fote-html-step-grid{

    display:grid;

    grid-template-columns:repeat(3,minmax(0,1fr));

    gap:22px;

}

.fote-html-step-card{

    position:relative;

    overflow:hidden;

    padding:34px 26px;

    background:#ffffff;

    color:#111827;

    border-radius:16px;

    box-shadow:0 12px 30px rgba(15,23,42,.14);

    transition:.25s;

}

.fote-html-step-card:hover{

    transform:translateY(-6px);

    box-shadow:0 18px 40px rgba(15,23,42,.18);

}

.fote-html-step-number{

    position:absolute;

    top:18px;

    right:20px;

    color:#ecebff;

    font-size:38px;

    font-weight:900;

}

.fote-html-step-card h3{

    margin:0 0 12px;

    color:#111827;

    font-size:20px;

    font-weight:800;

}

.fote-html-step-card p{

    margin:0;

    color:#6b7280;

    font-size:14px;

    line-height:1.75;

}

/* ===========================
   CONTENT SECTION
=========================== */

.fote-html-content-section{

    padding:72px 0;

    background:var(--fote-soft);

}

.fote-html-content-card{

    padding:48px;

    background:#ffffff;

    border:1px solid var(--fote-border);

    border-radius:18px;

    box-shadow:var(--fote-shadow);

}

.fote-html-content-card h2{

    margin:38px 0 16px;

    color:#111827;

    font-size:30px;

    font-weight:800;

}

.fote-html-content-card h2:first-of-type{

    margin-top:0;

}

.fote-html-content-card p{

    margin:0 0 16px;

    color:#4b5563;

    line-height:1.9;

}

/* ===========================
   USE GRID
=========================== */

.fote-html-use-grid{

    display:grid;

    grid-template-columns:repeat(2,minmax(0,1fr));

    gap:14px 18px;

    margin:24px 0 34px;

}

.fote-html-use-item{

    display:flex;

    align-items:center;

    gap:10px;

    padding:14px 15px;

    background:#f9fafb;

    border:1px solid var(--fote-border);

    border-radius:11px;

    font-size:14px;

    font-weight:700;

}

.fote-html-use-item span{

    width:24px;

    height:24px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        var(--fote-primary),
        var(--fote-secondary)
    );

    border-radius:50%;

    font-size:12px;

}

/* ===========================
   NOTE
=========================== */

.fote-html-note{

    display:flex;

    align-items:flex-start;

    gap:16px;

    margin-top:24px;

    padding:20px;

    background:#fff8e7;

    border:1px solid #f8dda0;

    border-left:5px solid #f59e0b;

    border-radius:12px;

}

.fote-html-note-icon{

    width:40px;

    height:40px;

    display:flex;

    align-items:center;

    justify-content:center;

    color:#ffffff;

    background:#f59e0b;

    border-radius:50%;

    font-size:20px;

    font-weight:800;

}

.fote-html-note p{

    margin:0;

    color:#78350f;

    line-height:1.8;

}

/* ===========================
   RELATED TOOLS
=========================== */

.fote-html-tools-grid{

    display:grid;

    grid-template-columns:repeat(4,minmax(0,1fr));

    gap:20px;

}

.fote-html-tool-card{

    display:block;

    padding:28px 22px;

    text-align:center;

    text-decoration:none !important;

    color:#111827;

    background:#ffffff;

    border:1px solid var(--fote-border);

    border-top:5px solid var(--fote-primary);

    border-radius:14px;

    box-shadow:0 10px 26px rgba(15,23,42,.07);

    transition:.25s;

}

.fote-html-tool-card:hover{

    transform:translateY(-5px);

    box-shadow:0 18px 36px rgba(15,23,42,.12);

}

.fote-html-tool-card > span{

    width:50px;

    height:50px;

    display:flex;

    align-items:center;

    justify-content:center;

    margin:0 auto 16px;

    color:#ffffff;

    background:linear-gradient(
        135deg,
        var(--fote-primary),
        var(--fote-secondary)
    );

    border-radius:15px;

    font-size:22px;

    font-weight:800;

}

.fote-html-tool-card strong{

    display:block;

    margin-bottom:10px;

    color:#111827;

    font-size:17px;

    font-weight:800;

}

.fote-html-tool-card p{

    margin:0;

    color:#6b7280;

    font-size:13px;

    line-height:1.7;

}

/* ===========================
   RESPONSIVE
=========================== */

@media(max-width:980px){

    .fote-html-step-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

    .fote-html-tools-grid{

        grid-template-columns:repeat(2,minmax(0,1fr));

    }

}

@media(max-width:700px){

    .fote-html-step-grid{

        grid-template-columns:1fr;

    }

    .fote-html-content-card{

        padding:30px 22px;

    }

    .fote-html-content-card h2{

        font-size:25px;

    }

    .fote-html-use-grid{

        grid-template-columns:1fr;

    }

    .fote-html-tools-grid{

        grid-template-columns:1fr;

    }

    .fote-html-note{

        flex-direction:column;

    }

}
/* =====================================================
   HTML TEXT EDITOR
   PART 4
   FAQ + CTA + FINAL RESPONSIVE
===================================================== */

/* ===================================
   FAQ SECTION
=================================== */

.fote-html-faq-section{
  padding:72px 0;
  background:var(--fote-soft);
}

.fote-html-faq{
  max-width:850px;
  margin:0 auto;
}

.fote-html-faq-item{
  margin-bottom:14px;
  overflow:hidden;
  background:#ffffff;
  border:1px solid var(--fote-border);
  border-radius:14px;
  box-shadow:0 8px 24px rgba(15,23,42,.06);
  transition:
    box-shadow .25s ease,
    border-color .25s ease;
}

.fote-html-faq-item:hover{
  border-color:#d8d4ff;
  box-shadow:0 12px 30px rgba(15,23,42,.10);
}

.fote-html-faq-item > button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:20px;
  padding:20px 22px;
  color:#111827;
  background:transparent;
  border:0;
  cursor:pointer;
  text-align:left;
  font-size:16px;
  font-weight:800;
}

.fote-html-faq-item > button span{
  flex:0 0 32px;
  width:32px;
  height:32px;
  display:flex;
  align-items:center;
  justify-content:center;
  color:#ffffff;
  background:linear-gradient(
    135deg,
    var(--fote-primary),
    var(--fote-secondary)
  );
  border-radius:50%;
  font-size:20px;
  line-height:1;
  transition:transform .25s ease;
}

.fote-html-faq-answer{
  display:none;
  padding:0 22px 22px;
}

.fote-html-faq-answer p{
  margin:0;
  color:var(--fote-muted);
  font-size:15px;
  line-height:1.85;
}

.fote-html-faq-item.active .fote-html-faq-answer{
  display:block;
}

.fote-html-faq-item.active > button span{
  transform:rotate(45deg);
}

/* ===================================
   CTA SECTION
=================================== */

.fote-html-cta{
  max-width:1200px;
  margin:0 auto 50px;
  padding:78px 20px;
  text-align:center;
  color:#ffffff;
  background:
    radial-gradient(
      circle at 15% 20%,
      rgba(255,255,255,.16),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      var(--fote-primary),
      var(--fote-secondary)
    );
}

.fote-html-cta h2{
  margin:0 0 18px;
  color:#ffffff !important;
  font-size:40px;
  line-height:1.2;
  font-weight:800;
}

.fote-html-cta p{
  max-width:720px;
  margin:0 auto 30px;
  color:#eef2ff;
  font-size:17px;
  line-height:1.8;
}

.fote-html-cta a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:50px;
  padding:14px 28px;
  color:#5b5eea !important;
  background:#ffffff;
  border-radius:999px;
  text-decoration:none !important;
  font-size:15px;
  font-weight:800;
  box-shadow:0 10px 28px rgba(15,23,42,.15);
  transition:
    transform .25s ease,
    box-shadow .25s ease;
}

.fote-html-cta a:hover{
  transform:translateY(-3px);
  box-shadow:0 18px 36px rgba(15,23,42,.20);
}

/* ===================================
   EDITOR SCROLLBAR
=================================== */

#foteHtmlCode,
.fote-html-preview-stage{
  scrollbar-width:thin;
  scrollbar-color:#b7b7f7 #f1f5f9;
}

#foteHtmlCode::-webkit-scrollbar,
.fote-html-preview-stage::-webkit-scrollbar{
  width:10px;
  height:10px;
}

#foteHtmlCode::-webkit-scrollbar-track,
.fote-html-preview-stage::-webkit-scrollbar-track{
  background:#f1f5f9;
}

#foteHtmlCode::-webkit-scrollbar-thumb,
.fote-html-preview-stage::-webkit-scrollbar-thumb{
  background:#b7b7f7;
  border:2px solid #f1f5f9;
  border-radius:999px;
}

#foteHtmlCode::-webkit-scrollbar-thumb:hover,
.fote-html-preview-stage::-webkit-scrollbar-thumb:hover{
  background:#8b84ee;
}

/* ===================================
   FOCUS STATES
=================================== */

.fote-html-toolbar button:focus-visible,
.fote-html-device-buttons button:focus-visible,
.fote-html-faq-item > button:focus-visible,
.fote-html-hero-btn:focus-visible,
.fote-html-cta a:focus-visible{
  outline:3px solid rgba(91,111,245,.28);
  outline-offset:3px;
}

#foteHtmlCode:focus{
  box-shadow:inset 0 0 0 2px rgba(91,111,245,.18);
}

/* ===================================
   LARGE TABLET
=================================== */

@media(max-width:980px){

  .fote-html-how{
    padding:65px 20px;
  }

  .fote-html-cta{
    padding:65px 20px;
  }
}

/* ===================================
   MOBILE
=================================== */

@media(max-width:700px){

  .fote-html-section,
  .fote-html-content-section,
  .fote-html-faq-section{
    padding:56px 0;
  }

  .fote-html-how{
    padding:58px 15px;
  }

  .fote-html-faq-item > button{
    padding:18px;
    font-size:15px;
  }

  .fote-html-faq-answer{
    padding:0 18px 18px;
  }

  .fote-html-cta{
    margin-bottom:35px;
    padding:60px 15px;
  }

  .fote-html-cta h2{
    font-size:30px;
  }

  .fote-html-cta p{
    font-size:16px;
  }

  .fote-html-device-buttons{
    gap:5px;
  }

  .fote-html-device-buttons button{
    width:31px;
    height:31px;
  }

  .fote-html-panel-header{
    gap:12px;
    padding:13px 14px;
  }

  .fote-html-panel-header > span{
    font-size:11px;
  }

  .fote-html-name-control input,
  .fote-html-name-control span{
    padding:12px 13px;
  }
}

/* ===================================
   SMALL MOBILE
=================================== */

@media(max-width:420px){

  .fote-html-editor-box{
    padding:20px 14px;
  }

  .fote-html-editor-header h2{
    font-size:25px;
  }

  .fote-html-panel-title strong{
    font-size:14px;
  }

  .fote-html-code-icon,
  .fote-html-preview-icon{
    width:31px;
    height:31px;
  }

  .fote-html-code-wrap{
    height:390px;
  }

  .fote-html-preview-stage{
    min-height:400px;
  }

  #foteHtmlPreview{
    min-height:370px;
  }

  .fote-html-cta h2{
    font-size:27px;
  }
}