/* ==========================================================================
   FormBuilder – Custom Utility & Component Classes
   Replaces inline styles across all Blade views.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Block accent colors (border-left on .block-style-nineteen)
   -------------------------------------------------------------------------- */
.block-accent-yellow  { border-left-color: #FFCE22 !important; }
.block-accent-purple  { border-left-color: #8F6BF6 !important; }
.block-accent-red     { border-left-color: #FF5C5C !important; }
.block-accent-green   { border-left-color: #63EAA9 !important; }
.block-accent-blue    { border-left-color: #5BE2FF !important; }
.block-accent-pink    { border-left-color: #FF56EE !important; }

/* --------------------------------------------------------------------------
   CTA / inline links
   -------------------------------------------------------------------------- */
.link-cta {
    color: #6F55FF;
    font-size: 14px;
    font-weight: 600;
}
.link-cta:hover {
    color: #5a3de8;
    text-decoration: underline;
}
.link-cta-sm {
    color: #6F55FF;
    font-weight: 600;
}
.link-cta-sm:hover {
    color: #5a3de8;
    text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Field-type badge pills (form-field-types page)
   -------------------------------------------------------------------------- */
.badge-field {
    display: inline-block;
    padding: 3px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
}
.badge-essentials { background: #FEF3C7; color: #B45309; }
.badge-contact    { background: #FFE4E6; color: #BE123C; }
.badge-choice     { background: #E0E7FF; color: #4338CA; }
.badge-datetime   { background: #E0F2FE; color: #0369A1; }
.badge-advanced   { background: #CCFBF1; color: #0F766E; }
.badge-legal      { background: #D1FAE5; color: #065F46; }

/* --------------------------------------------------------------------------
   Hero / decoration positioning
   -------------------------------------------------------------------------- */
.hero-underline {
    top: 55px;
}
.hero-underline-50 {
    top: 50px;
}
.carousel-caption-pos {
    bottom: 10%;
}
.hero-decor-abs {
    position: absolute;
}
.hero-decor-offset {
    position: absolute;
    left: -140px;
    top: -110px;
}

/* --------------------------------------------------------------------------
   Typography utilities
   -------------------------------------------------------------------------- */
.fs-9  { font-size: 9px !important; }
.fs-11 { font-size: 11px !important; }
.fs-13 { font-size: 13px !important; }
.fs-14 { font-size: 14px !important; }
.fs-15 { font-size: 15px !important; }
.fs-42 { font-size: 42px !important; }

/* --------------------------------------------------------------------------
   Spacing utilities
   -------------------------------------------------------------------------- */
.pb-12 { padding-bottom: 12px !important; }
.pt-2  { padding-top: 2px !important; }

/* --------------------------------------------------------------------------
   Layout utilities
   -------------------------------------------------------------------------- */
.flex-between {
    align-items: center;
    justify-content: space-between;
}
.min-w-50 { min-width: 50px; }
.min-h-50p { min-height: 50%; }
.sticky-bottom {
    position: sticky;
    top: 100%;
}

/* --------------------------------------------------------------------------
   Color utilities
   -------------------------------------------------------------------------- */
.text-muted-light { color: #888; }
.text-brand-gold  { color: #FFBA12; }
.text-inherit     { text-decoration: none; color: inherit; }
.text-inherit:hover { color: inherit; }

/* --------------------------------------------------------------------------
   Misc component overrides
   -------------------------------------------------------------------------- */
.font-gordita-family {
    font-family: 'gordita', 'Roboto', sans-serif;
}
.mt-0-imp {
    margin-top: 0 !important;
}
.pt-0-imp {
    padding-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Window dots (browser chrome mockups)
   -------------------------------------------------------------------------- */
.dot-red    { background: #ff5f57; }
.dot-yellow { background: #febc2e; }
.dot-green  { background: #28c840; }

/* --------------------------------------------------------------------------
   Form-field-types preview card styles
   -------------------------------------------------------------------------- */
.field-preview-card {
    background: #f3f4f6;
    border-radius: 12px;
    padding: 20px;
}
.field-preview-input {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: #aaa;
    width: 100%;
}
.field-preview-textarea {
    background: #fff;
    border: 1px solid #e5e7eb;
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 11px;
    color: #aaa;
    width: 100%;
    height: 48px;
    resize: none;
}
.field-preview-label {
    font-size: 11px;
    font-weight: 600;
    color: #374151;
    margin-bottom: 4px;
}
.field-preview-hint {
    font-size: 9px;
    color: #aaa;
}
.field-preview-btn {
    background: #6366f1;
    color: #fff;
    border: none;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 11px;
    font-weight: 500;
}

/* --------------------------------------------------------------------------
   Security page specifics
   -------------------------------------------------------------------------- */
.security-cta-box {
    padding: 50px 40px;
}
.security-cta-inner {
    max-width: 500px;
    margin: 0 auto;
}

/* --------------------------------------------------------------------------
   About page logo circles
   -------------------------------------------------------------------------- */
.logo-circle-xl  { width: 193px; height: 193px; }
.logo-circle-lg  { width: 148px; height: 148px; }
.logo-circle-md  { width: 105px; height: 105px; }
.logo-circle-sm  { width: 81px; height: 81px; }
.logo-circle-xs  { width: 65px; height: 65px; }

/* --------------------------------------------------------------------------
   Page wrapper resets
   -------------------------------------------------------------------------- */
.m-0-imp  { margin: 0 !important; }
.mt-0-imp { margin-top: 0 !important; }
.mb-0-imp { margin-bottom: 0 !important; }
.pt-0-imp { padding-top: 0 !important; }
.pt-45-imp { padding-top: 45px !important; }
.overflow-hidden { overflow: hidden; }
.img-meta-80 { height: 80px; }
.text-start-imp { text-align: start !important; }
.text-end { text-align: end; }
.pos-relative { position: relative; }
.pos-top-50 { top: 50%; }