.elementor-kit-62{--e-global-color-primary:#F97D46;--e-global-color-secondary:#222222;--e-global-color-text:#454545;--e-global-color-accent:#F97D46;--e-global-color-b712eba:#FFFFFF;--e-global-color-d190896:#F9F9F9;--e-global-typography-primary-font-family:"Inter Tight";--e-global-typography-secondary-font-family:"Inter Tight";--e-global-typography-text-font-family:"Inter";--e-global-typography-text-font-size:16px;--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.2em;--e-global-typography-accent-font-family:"Inter Tight";--e-global-typography-accent-font-size:15px;--e-global-typography-accent-font-weight:400;--e-global-typography-accent-line-height:1.2em;background-color:var( --e-global-color-d190896 );}.elementor-kit-62 e-page-transition{background-color:#FFBC7D;}.elementor-kit-62 h2{font-size:28px;font-weight:500;line-height:1.3em;}.elementor-kit-62 h3{font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1260px;}.e-con{--container-max-width:1260px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-62 h2{font-size:28px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-kit-62{--e-global-typography-text-font-size:15px;}.elementor-kit-62 h2{font-size:24px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* small utility tweak */
.tool-wrapper ul {
  padding-left: 18px;
}

/* quick visual polish for counts (kept consistent with theme) */
.tool-counts {
  margin: 10px 0px !important;
  border-radius: 8px !important;
  padding: 10px !important;
  border: 1px dotted gainsboro !important;
}

/* =========================================
   Shared Tool Theme (Global)
   ========================================= */

.tool-wrapper {
  /* Design tokens */
  --cc-accent:#F97D46;
  --cc-accent-hover:#e86f3d;
  --cc-ink:#222222;
  --cc-ink-hover:#3a3a3a;
  --cc-card:#ffffff;
  --cc-muted:#76808a;
  --cc-border:#e6e9ec;
  --cc-border-strong:#d9dde2;

  --cc-radius-lg:18px;
  --cc-radius-md:12px;
  --cc-radius-sm:10px;

  --cc-shadow-2:0 8px 30px rgba(0,0,0,.08);

  --cc-font:Inter Tight, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, "Helvetica Neue", Arial;
  --cc-font-mono:ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;

  --cc-transition:160ms cubic-bezier(.2,.8,.2,1);

  max-width:1000px;
  margin:0 auto;
  padding:35px;
  background:transparent;
  font-family:var(--cc-font);
  color:var(--cc-ink);
  position:relative;
}

.tool-wrapper::before {
  content:"";
  position:absolute;
  inset:12px;
  background:var(--cc-card);
  border:1px solid var(--cc-border);
  border-radius:var(--cc-radius-lg);
  box-shadow:var(--cc-shadow-2);
  z-index:0;
}
.tool-wrapper>* { position:relative; z-index:1; }

/* -----------------------------------------
   Labels & Text
----------------------------------------- */
.tool-wrapper label {
  display:block;
  margin:8px 16px 6px 16px;
  font-weight:700;
  color:var(--cc-ink);
}

/* -----------------------------------------
   Textarea
----------------------------------------- */
.tool-textarea {
  /*width:calc(100% - 34px);*/
   width:100%;
  /*margin:0 16px 18px 16px;*/
  padding:14px 16px;
  background:#f9fafb;
  border:1px solid var(--cc-border);
  border-radius:var(--cc-radius-md);
  min-height:220px;
  font-size:16.5px;
  line-height:1.55;
  resize:vertical;
  transition:border-color var(--cc-transition),
             background-color var(--cc-transition),
             box-shadow var(--cc-transition);
}
.tool-textarea:focus {
  border-color:var(--cc-accent);
  background:#fff;
  box-shadow:0 0 0 3px rgba(249,125,70,.25);
  outline:none;
}
.tool-textarea::placeholder { color:#9aa3ad; }

/* -----------------------------------------
   Top Buttons (Copy & Download)
----------------------------------------- */
.tool-actions {
  display:flex;
  gap:12px;
  /*padding:0 16px;*/
  margin:20px 0 16px 0;
}

/* -----------------------------------------
   Buttons (shared)
----------------------------------------- */
.tool-button {
  padding:12px 20px;
  border-radius:var(--cc-radius-sm);
  border:1px solid transparent;
  cursor:pointer;
  font-weight:700;
  transition:transform var(--cc-transition),
             box-shadow var(--cc-transition),
             background-color var(--cc-transition),
             color var(--cc-transition),
             border-color var(--cc-transition);
}

.primary-btn {
  background:var(--cc-accent);
  color:#fff;
  box-shadow:0 6px 16px rgba(249,125,70,.25);
}
.primary-btn:hover {
  background:var(--cc-accent-hover);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(249,125,70,.28);
}

.secondary-btn {
  background:var(--cc-ink);
  color:#fff;
  box-shadow:0 6px 16px rgba(0,0,0,.15);
}
.secondary-btn:hover {
  background:var(--cc-ink-hover);
  transform:translateY(-1px);
  box-shadow:0 10px 22px rgba(0,0,0,.25);
}

/* -----------------------------------------
   Ghost Buttons (e.g., Case Options)
----------------------------------------- */
.ghost-btn {
  background:#fff;
  color:var(--cc-ink);
  border:1px solid var(--cc-border);
  border-radius:var(--cc-radius-sm);
  transition:all var(--cc-transition);
}
.ghost-btn:hover {
  border-color:var(--cc-accent);
  box-shadow:0 0 0 3px rgba(249,125,70,0.18);
  transform:translateY(-1px);
  background:#F97D46 !important;
  color:#fff !important;
}
.ghost-btn.active {
  border-color:var(--cc-accent);
  box-shadow:0 0 0 3px rgba(249,125,70,0.25);
}

/* -----------------------------------------
   Grids & Button Groups
----------------------------------------- */
.tool-buttons {
  display:flex;
  gap:12px;
  /*padding:0 16px;*/
  margin:10px 0 16px 0;
}

.tool-grid-3 {
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  /*padding:0 16px 8px 16px;*/
}

@media(max-width:768px){
  .tool-grid-3 { grid-template-columns:repeat(1,1fr); }
}

.tool-grid-2 {
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:12px;
  /*padding:0 16px;*/
}

/* Patch for legacy IDs */
.tool-wrapper #buttons.tool-grid-3 {
  display:grid !important;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  /*padding:0 16px 8px 16px;*/
  margin:12px 0 0 0 !important;
}

@media(max-width:768px){
  .tool-wrapper #buttons.tool-grid-3 {
    grid-template-columns:repeat(1,1fr);
  }
}

.tool-wrapper #buttons.tool-grid-3 button {
  background:#fff !important;
  border:1px solid var(--cc-border) !important;
  color:var(--cc-ink) !important;
  border-radius:var(--cc-radius-sm);
  font-weight:700;
  box-shadow:none !important;
  transition:transform var(--cc-transition),
             box-shadow var(--cc-transition),
             border-color var(--cc-transition);
}
.tool-wrapper #buttons.tool-grid-3 button:hover {
  border-color:var(--cc-accent) !important;
  box-shadow:0 0 0 3px rgba(249,125,70,0.18);
  transform:translateY(-1px);
  background-color:#F97D46 !important;
  color:#fff !important;
}

/* -----------------------------------------
   Counts
----------------------------------------- */
.tool-counts {
  margin:8px 16px 18px 16px;
  padding:10px 12px;
  font-family:var(--cc-font-mono);
  font-size:13.5px;
  color:var(--cc-muted);
  background:#fbfbfc;
  border:1px dashed var(--cc-border);
  border-radius:10px;
}

.tool-inline-count {
  margin:8px 0 0 16px;
  font-family:var(--cc-font-mono);
  font-size:13px;
  color:var(--cc-muted);
}

/* -----------------------------------------
   Checkbox Styling (for other tools)
----------------------------------------- */
.tool-options {
  display:flex;
  gap:16px;
  align-items:center;
  padding:6px 16px;
}

.checkbox-wrapper input[type="checkbox"] { display:none; }

.checkbox-label {
  position:relative;
  padding-left:30px;
  color:var(--cc-ink);
  font-size:14.5px;
  cursor:pointer;
  user-select:none;
}

.checkbox-label::before {
  content:"";
  position:absolute;
  left:0;
  top:50%;
  transform:translateY(-50%);
  width:20px;
  height:20px;
  border:2px solid var(--cc-accent);
  border-radius:4px;
  background:#fff;
  transition:all .16s ease;
}

.checkbox-label::after {
  content:"✓";
  position:absolute;
  left:4px;
  top:50%;
  transform:translateY(-50%) scale(0);
  color:#fff;
  font-size:14px;
  font-weight:700;
  transition:transform .16s ease;
}

.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::before {
  background:var(--cc-accent);
}
.checkbox-wrapper input[type="checkbox"]:checked + .checkbox-label::after {
  transform:translateY(-50%) scale(1);
}

/* -----------------------------------------
   Tool Input (Number fields)
----------------------------------------- */
.tool-input {
  padding:10px 12px;
  margin:0 8px;
  border:1px solid var(--cc-border) !important;
  border-radius:var(--cc-radius-sm);
  background:#f9fafb;
  font-size:15px;
  line-height:1.4;
  color:var(--cc-ink);
  transition:border-color var(--cc-transition),
             box-shadow var(--cc-transition),
             background-color var(--cc-transition);
}
.tool-input:focus {
  background:#fff;
  border-color:var(--cc-accent);
  box-shadow:0 0 0 3px rgba(249,125,70,0.25);
  outline:none;
}
/* Chrome/Safari spinners */
.tool-input::-webkit-outer-spin-button,
.tool-input::-webkit-inner-spin-button { -webkit-appearance:none; margin:0; }
/* Firefox spinners */
.tool-input[type=number] { -moz-appearance:textfield; }

/* -----------------------------------------
   Download helper
----------------------------------------- */
.tool-download { 
  margin:16px 16px 10px auto; 
  display:block; 
}

/* -----------------------------------------
   Wingdings converter minor layout (optional)
----------------------------------------- */
#generator-controls { flex-wrap: wrap; }
#wingdings-converter .font-selection { display:flex; gap:12px; align-items:center; padding:0 16px; }
#wingdings-converter #character-mapping { padding:0 16px 12px 16px; }
#wingdings-converter #character-mapping h3 { margin:8px 0 12px 0; }

/* =========================================
   Mobile polish & small-screen fallbacks
   ========================================= */

/* Tablet & small laptops */
@media (max-width: 900px) {
  .tool-actions { flex-wrap: wrap; }
  .tool-grid-3 { grid-template-columns:repeat(2,1fr); }
  .tool-grid-2 { grid-template-columns:1fr; }
}

/* Large phones / small tablets */
@media (max-width: 768px) {
  .tool-wrapper { padding:20px; }
  .tool-wrapper::before { inset:8px; }

  .tool-textarea {
    width:calc(100% - 40px);
    margin:0 12px 14px 12px;
    min-height:180px;
  }

  .tool-grid-3 { grid-template-columns:1fr; }
  .tool-buttons { padding:0 12px; gap:10px; }
  .tool-button { padding:12px 16px; }

  .tool-counts {
    margin:8px 12px 14px 12px;
    padding:9px 10px;
  }

  .tool-inline-count { margin-left:12px; }
}

/* Phones */
@media (max-width: 560px) {
  .tool-wrapper { padding:16px; }
  .tool-wrapper::before { inset:6px; border-radius:14px; }

  .tool-actions { padding:0 12px; margin:16px 0 12px 0; gap:10px; }
  .tool-buttons { flex-direction:column; }
  .tool-button { width:100%; }

  .ghost-btn { padding:12px 16px; }

  .tool-textarea {
    width:calc(100% - 32px);
    margin:0 8px 12px 8px;
    min-height:160px;
    font-size:16px; /* avoid iOS zoom on focus */
  }

  .tool-grid-2 { padding:0 12px; gap:10px; }
  .tool-grid-3 { padding:0 12px 6px 12px; gap:10px; }

  .tool-counts {
    margin:8px 12px 12px 12px;
    border-radius:8px;
    font-size:13px;
  }
}

/* Very small phones */
@media (max-width: 390px) {
  .tool-wrapper { padding:12px; }
  .tool-wrapper::before { inset:4px; }

  .tool-actions { padding:0 8px; gap:8px; }
  .tool-button { padding:11px 14px; }

  .tool-textarea {
    width:calc(100% - 24px);
    margin:0 6px 10px 6px;
    min-height:150px;
  }

  .tool-grid-2, .tool-grid-3 { padding:0 8px; gap:8px; }

  .tool-counts {
    margin:6px 8px 10px 8px;
    padding:8px 10px;
    font-size:12.5px;
  }
}

/* =========================================
   Bulk Hyperlink Generator – layout polish
   (works even if that page doesn’t use .tool-textarea)
   ========================================= */

#hyperlink-converter {
  padding: 30px;           /* keep comfortable space from edges */
  box-sizing: border-box;
}

#hyperlink-converter #inputs {
  display: grid;
  grid-template-columns: repeat(2, 49%);
  gap: 2%;                    /* space between the two textareas */
  margin-bottom: 16px;
}

#hyperlink-converter .input-column textarea,
#hyperlink-converter textarea {
  width: 100%;
  padding: 12px 14px;
  border: 1px solid var(--cc-border);
  border-radius: 10px;
  background: #f9fafb;
  box-sizing: border-box;
}

/* keep counts neat under each column */
#hyperlink-converter #url-line-count,
#hyperlink-converter #keyword-line-count {
  margin-top: 6px;
  color: #555;
  font-size: 0.9rem;
}

@media (max-width: 900px){
  #hyperlink-converter #inputs { grid-template-columns: 1fr; }
}/* End custom CSS */