/* =====================================
   RCTX LOGO MAKER
   Clean App Layout
===================================== */


/* ===============================
   FONT
================================= */

@font-face {

    font-family:"Fredoka";

    src:url("/fonts/Fredoka.woff2") format("woff2");

    font-weight:400 700;

    font-display:swap;

}





* {

    margin:0;

    padding:0;

    box-sizing:border-box;

}





body {

    font-family:"Segoe UI", Arial, sans-serif;

    background:#f1f5f9;

    color:#1e293b;

    min-height:100vh;

}






/* ===============================
   APP CONTAINER
================================= */


.app {

    width:100%;

    max-width:1100px;

    margin:auto;

    padding:20px;

}






/* ===============================
   HEADER
================================= */


header {

    text-align:center;

    margin-bottom:25px;

}


header h1 {

    font-family:"Fredoka", sans-serif;

    font-size:2.2rem;

    color:#00244d;

}


header p {

    color:#64748b;

    margin-top:8px;

}







/* ===============================
   MAIN LAYOUT
================================= */


.editor {

    display:flex;

    flex-direction:column;

    gap:25px;

}






/* ===============================
   CONTROL PANEL
================================= */


.controls {

    background:white;

    padding:22px;

    border-radius:20px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

}




.controls h2 {

    font-family:"Fredoka", sans-serif;

    color:#00244d;

    font-size:1.25rem;

    margin:20px 0 15px;

}



.controls h2:first-child {

    margin-top:0;

}






label {

    display:block;

    font-weight:700;

    color:#00244d;

    margin-bottom:16px;

}





input[type="text"],
select {


    width:100%;

    margin-top:7px;

    padding:13px;

    border-radius:12px;

    border:1px solid #cbd5e1;

    background:white;

    font-size:16px;

}






input[type="color"] {


    width:100%;

    height:45px;

    margin-top:7px;

    border:none;

    border-radius:12px;

    cursor:pointer;

}






input[type="range"] {

    width:100%;

    margin-top:10px;

}









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


.preview {

    background:white;

    padding:20px;

    border-radius:20px;

    box-shadow:0 8px 25px rgba(0,0,0,.08);

    display:flex;

    flex-direction:column;

    gap:20px;

}







.canvas-box {

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    background:#f8fafc;

    border-radius:15px;

    padding:15px;

}





#logoCanvas {

    width:100%;

    max-width:500px;

    height:auto;

}








/* ===============================
   MOVE BUTTONS
================================= */


.preview h3 {

    text-align:center;

    font-family:"Fredoka", sans-serif;

    color:#00244d;

}




.move-grid {


    display:grid;

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

    gap:10px;

    max-width:300px;

    width:100%;

    margin:auto;

}





.move-grid button {


    min-height:55px;

    border:none;

    border-radius:12px;

    background:#eaf4ff;

    color:#0052a3;

    font-size:1.4rem;

    font-weight:700;

    cursor:pointer;

    transition:.2s ease;

}




.move-grid button:hover {


    background:#0052a3;

    color:white;

    transform:scale(1.04);

}





.move-grid button:active {

    transform:scale(.95);

}





#moveCenter {

    background:#fffbeb;

    color:#b45309;

}





#moveCenter:hover {

    background:#b45309;

    color:white;

}







/* ===============================
   SVG CODE BOX
================================= */


.code-box {


    margin-top:10px;

}





#svgCode {


    width:100%;

    height:220px;

    padding:12px;

    border-radius:12px;

    border:1px solid #cbd5e1;

    background:#f8fafc;

    font-family:monospace;

    font-size:12px;

    resize:vertical;

}







/* ===============================
   BUTTON
================================= */


button#copySvg {


    width:100%;

    padding:15px;

    border:none;

    border-radius:12px;

    background:#0052a3;

    color:white;

    font-size:16px;

    font-weight:700;

    cursor:pointer;

}



button#copySvg:hover {

    background:#003c78;

}



/* Move Target Buttons */

.move-targets {

    display:flex;
    gap:10px;
    justify-content:center;
    margin:15px 0;

}


.move-targets button {

    flex:1;
    padding:12px 8px;
    border:none;
    border-radius:12px;
    background:#eaf4ff;
    color:#0052a3;
    font-weight:700;
    font-size:14px;
    cursor:pointer;
    transition:.2s ease;

}


.move-targets button:hover {

    background:#0052a3;
    color:white;

}


.move-targets button:active {

    transform:scale(.96);

}

#logoCanvas {
    touch-action: none;
}

/* =====================================
   RCTX LOGO MAKER – ICON LIBRARY CSS
===================================== */

/* ---- SEARCH BOX ---- */
#iconSearch {
  width: 100%;
  max-width: 420px;
  padding: 12px 16px;
  margin: 12px 0 24px;
  border: 2px solid #e2e8f0;
  border-radius: 10px;
  font-size: 1rem;
  font-family: inherit;
  color: #00244d;
  background: white;
  transition: border-color 0.2s ease;
}

#iconSearch:focus {
  outline: none;
  border-color: #0052a3;
  box-shadow: 0 0 0 3px rgba(0, 82, 163, 0.1);
}

/* ---- ICON GRID WRAPPER ---- */
#iconLibrary {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(72px, 1fr));
  gap: 12px;
  max-width: 100%;
  padding: 10px 0;
}

/* ---- ICON BUTTONS ---- */
.icon-button {
  width: 72px;
  height: 72px;
  padding: 12px;
  border: 2px solid #e2e8f0;
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #00244d;
}

.icon-button svg,
.icon-button path {
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  width: 32px;
  height: 32px;
}

.icon-button:hover {
  border-color: #0052a3;
  background: #f0f7ff;
  color: #0052a3;
  transform: translateY(-2px);
}

.icon-button:active {
  transform: translateY(0);
  background: #dbeafe;
}

/* ---- HEADING ---- */
h2 {
  font-family: 'Fredoka', sans-serif;
  color: #00244d;
  margin-bottom: 8px;
}

/* ---- MOBILE TWEAKS ---- */
@media (max-width: 480px) {
  #iconLibrary {
    grid-template-columns: repeat(auto-fill, minmax(64px, 1fr));
    gap: 10px;
  }

  .icon-button {
    width: 64px;
    height: 64px;
    padding: 10px;
  }

  .icon-button svg,
  .icon-button path {
    width: 28px;
    height: 28px;
  }
}

/* ---- REDUCED MOTION RESPECT ---- */
@media (prefers-reduced-motion: reduce) {
  * {
    transition-duration: 0.01ms !important;
  }
  .icon-button:hover,
  .icon-button:active {
    transform: none;
  }
}

/* ===============================
   DESKTOP
================================= */


@media(min-width:768px){


.editor {


    display:grid;

    grid-template-columns:350px 1fr;

    align-items:start;

    gap:30px;

}



.preview {


    position:sticky;

    top:20px;

}



}







/* ===============================
   SMALL PHONES
================================= */


@media(max-width:380px){


.app {

    padding:12px;

}



header h1 {

    font-size:1.7rem;

}



.controls,
.preview {

    padding:15px;

}



}