/* ===== Bootstrap Steps (v1.0.3) ===== */
/*!
 * Bootstrap Steps v1.0.3 (https://github.com/ycs77/bootstrap-steps)
 * Copyright 2020 Lucas Yang <yangchenshin77@gmail.com>
 * Licensed under MIT (https://github.com/ycs77/bootstrap-steps/blob/master/LICENSE)
 */.steps{padding:0;margin:0;list-style:none;display:flex;overflow-x:auto}.steps .step:first-child{margin-left:auto}.steps .step:last-child{margin-right:auto}.step:first-of-type .step-circle::before{display:none}.step:last-of-type .step-content{padding-right:0}.step-content{box-sizing:content-box;display:flex;align-items:center;flex-direction:column;width:5rem;min-width:5rem;max-width:5rem;padding-top:.5rem;padding-right:1rem}.step-circle{position:relative;display:flex;justify-content:center;align-items:center;width:1.5rem;height:1.5rem;color:#adb5bd;border:2px solid #adb5bd;border-radius:100%;background-color:#fff}.step-circle::before{content:"";display:block;position:absolute;top:50%;left:-2px;width:calc(5rem + 1rem - 1.5rem);height:2px;transform:translate(-100%,-50%);color:#adb5bd;background-color:currentColor}.step-text{color:#adb5bd;word-break:break-all;margin-top:.25em}.step-active .step-circle{color:#fff;background-color:#007bff;border-color:#007bff}.step-active .step-circle::before{color:#007bff}.step-active .step-text{color:#007bff}.step-error .step-circle{color:#fff;background-color:#dc3545;border-color:#dc3545}.step-error .step-circle::before{color:#dc3545}.step-error .step-text{color:#dc3545}.step-success .step-circle{color:#28a745;background-color:#fff;border-color:#28a745}.step-success .step-circle::before{color:#28a745}.step-success .step-text{color:#28a745}.step-success .step-text a{color:#28a745;text-decoration:none}.step-success .step-text a:hover{text-decoration:underline}
/*# sourceMappingURL=bootstrap-steps.min.css.map */

/* ===== Stubbs Box ===== */
.stubbs-box {
  border-radius: 12px;
  padding: 20px;
  background: linear-gradient(135deg, #e0eafc, #cfdef3);
  box-shadow: 0px 3px 3px 0px rgb(0 0 0 / 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.stubbs-box svg {
  background: transparent !important;
}

/* ===== Labels ===== */
label {
  font-weight: bold;
  color: #555 !important;
  margin: 0 !important;
}

/* ===== Clipart Container ===== */
.clipart-container {
    width: 100px;
    height: 100px;
    position: relative;
    overflow: hidden;
    background: #f8f8f8;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #ddd;
}
.clipart-container img {
    max-width: 100px;
    max-height: 100px;
    object-fit: contain;
}
.clipart-container .placeholder {
    font-size: 12px;
    color: #aaa;
}

/* ===== Review Cards ===== */
.card {
    display: flex;
    flex-direction: column;
    height: 100%;
    border: 1px solid rgba(0,0,0,.125);
    border-radius: 0.25rem;
}
.card-header {
    background-color: #f7f7f7;
    color: #333;
    border-radius: 0.25rem 0.25rem 0 0;
    font-weight: bold;
}
.card-body {
    flex: 1;
    display: flex;
    flex-direction: column;
}
.card-body img {
    width: 100%;
}
.btn-block {
    margin-top: auto;
}
.list-unstyled {
    padding-left: 0;
    list-style-type: none;
}

/* ===== Upload Image Block ===== */
.upload_image_block {
    display: inline-block;
    position: relative;
    width: 100px;
    height: 100px;
}
.upload_image_block img {
    display: block;
}
.upload_image_block .fa-trash {
    position: absolute;
    bottom: 0;
    right: 0;
}

/* ===== Template Modal ===== */
#change_template .modal-dialog {
  width: 75vw;
  max-width: 90vw;
  margin: auto;
}
@media (max-width: 768px) {
  #change_template .modal-dialog {
    width: 90vw;
    margin: 1.75rem auto !important;
  }
}

/* ===== Template Shadow/Hover ===== */
.template-shadow {
  border-radius: 12px;
  box-shadow: 0px 3px 3px 0px rgb(0 0 0 / 0.25);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.template-shadow:hover {
  transform: translateY(-3px);
  box-shadow: 0px 5px 5px 0px rgb(0 0 0 / 0.25);
  text-decoration: none !important;
}
a.text-decoration-none:hover {
  text-decoration: none !important;
}
a.text-decoration-none *,
a.text-decoration-none *:hover {
  text-decoration: none !important;
}