/* ============================================================
   THE SUNDAY SERMONS — DJ APPLICATION
   Theme-resistant form styling
   ============================================================ */

.tss-dj-wrap,
.tss-dj-wrap *{
    box-sizing:border-box;
}

.tss-dj-wrap{
    width:min(1100px, calc(100% - 32px))!important;
    max-width:1100px!important;
    margin:0 auto 55px!important;
    padding:0!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    position:relative!important;
    isolation:isolate!important;
}

.tss-dj-wrap:before,
.tss-dj-wrap:after,
.tss-dj-card:before,
.tss-dj-card:after,
.tss-dj-card label:before,
.tss-dj-card label:after,
.tss-dj-card legend:before,
.tss-dj-card legend:after,
.tss-dj-submit:before,
.tss-dj-submit:after{
    content:none!important;
    display:none!important;
}

.tss-dj-hero{
    width:100%!important;
    height:auto!important;
    aspect-ratio:auto!important;
    margin:0 0 22px!important;
    padding:0!important;
    overflow:visible!important;
    border:0!important;
    border-radius:0!important;
    background:#020817!important;
    box-shadow:none!important;
}

.tss-dj-hero img{
    display:block!important;
    width:100%!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    object-fit:contain!important;
    object-position:center!important;
    border:0!important;
    border-radius:0!important;
    box-shadow:none!important;
}

.tss-dj-form{
    width:100%!important;
    margin:0!important;
    padding:22px!important;
    border:1px solid rgba(110,125,255,.55)!important;
    border-radius:16px!important;
    background:
        radial-gradient(circle at 15% 0%,rgba(173,39,255,.12),transparent 30%),
        radial-gradient(circle at 90% 100%,rgba(0,177,255,.10),transparent 34%),
        rgba(2,8,23,.96)!important;
    box-shadow:0 18px 60px rgba(0,0,0,.48),0 0 45px rgba(92,54,255,.10)!important;
    position:relative!important;
    isolation:isolate!important;
}

.tss-dj-card{
    width:100%!important;
    margin:0 0 14px!important;
    padding:27px!important;
    border:1px solid rgba(76,101,164,.46)!important;
    border-radius:14px!important;
    background:rgba(7,17,34,.92)!important;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.025),0 10px 35px rgba(0,0,0,.18)!important;
}

.tss-dj-card label{
    display:block!important;
    width:100%!important;
    margin:0 0 20px!important;
    padding:0!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
    font-weight:700!important;
    line-height:1.5!important;
    text-align:left!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
}

.tss-dj-card label b,
.tss-dj-card legend b{
    color:#ff397f!important;
}

.tss-dj-grid{
    display:grid!important;
    grid-template-columns:1fr 1fr!important;
    gap:0 28px!important;
    width:100%!important;
}

.tss-dj-card input[type="text"],
.tss-dj-card input[type="email"],
.tss-dj-card input[type="url"],
.tss-dj-card select,
.tss-dj-card textarea{
    display:block!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    margin:9px 0 0!important;
    padding:14px 15px!important;
    border:1px solid #526a9c!important;
    border-radius:7px!important;
    outline:none!important;
    background:linear-gradient(180deg,rgba(29,49,81,.96),rgba(14,29,54,.96))!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
    font-weight:400!important;
    line-height:1.4!important;
    box-shadow:none!important;
    text-shadow:none!important;
    appearance:auto!important;
    -webkit-appearance:auto!important;
}

.tss-dj-card textarea{
    min-height:105px!important;
    resize:vertical!important;
}

.tss-dj-card input::placeholder,
.tss-dj-card textarea::placeholder{
    color:#aab6cc!important;
    opacity:1!important;
}

.tss-dj-card input:focus,
.tss-dj-card select:focus,
.tss-dj-card textarea:focus{
    border-color:#a84cff!important;
    box-shadow:0 0 0 3px rgba(168,76,255,.14),0 0 20px rgba(57,126,255,.10)!important;
}

.tss-dj-card fieldset{
    display:block!important;
    width:100%!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
}

.tss-dj-card legend{
    display:block!important;
    width:100%!important;
    margin:0 0 17px!important;
    padding:0!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
    font-weight:700!important;
    line-height:1.5!important;
    border:0!important;
    text-align:left!important;
}

.tss-dj-compact{
    padding:23px 27px!important;
}

.tss-dj-radio-row{
    display:flex!important;
    flex-wrap:wrap!important;
    align-items:center!important;
    gap:18px 34px!important;
}

.tss-dj-radio-row label,
.tss-dj-check-grid label{
    display:flex!important;
    align-items:center!important;
    width:auto!important;
    margin:0!important;
    padding:0!important;
    color:#e7e9f3!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:14px!important;
    font-weight:400!important;
    line-height:1.3!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
}

.tss-dj-radio-row input[type="radio"],
.tss-dj-check-grid input[type="checkbox"]{
    display:inline-block!important;
    width:20px!important;
    height:20px!important;
    min-width:20px!important;
    max-width:20px!important;
    min-height:20px!important;
    margin:0 9px 0 0!important;
    padding:0!important;
    border:2px solid #7090ff!important;
    background:transparent!important;
    box-shadow:none!important;
    position:relative!important;
    flex:0 0 20px!important;
    appearance:none!important;
    -webkit-appearance:none!important;
}

.tss-dj-radio-row input[type="radio"]{
    border-radius:50%!important;
}

.tss-dj-check-grid input[type="checkbox"]{
    border-radius:4px!important;
}

.tss-dj-radio-row input[type="radio"]:checked:after{
    content:""!important;
    display:block!important;
    position:absolute!important;
    width:8px!important;
    height:8px!important;
    margin:0!important;
    border-radius:50%!important;
    background:#8b8fff!important;
    left:4px!important;
    top:4px!important;
    box-shadow:0 0 10px #7e8cff!important;
}

.tss-dj-check-grid input[type="checkbox"]:checked{
    background:linear-gradient(135deg,#b52cff,#16a9ff)!important;
    border-color:#8c78ff!important;
}

.tss-dj-check-grid input[type="checkbox"]:checked:after{
    content:"✓"!important;
    display:block!important;
    position:absolute!important;
    left:2px!important;
    top:-3px!important;
    margin:0!important;
    color:#fff!important;
    font-size:14px!important;
    font-weight:900!important;
    line-height:20px!important;
}

.tss-dj-check-grid{
    display:grid!important;
    grid-template-columns:repeat(5,minmax(0,1fr))!important;
    gap:18px 20px!important;
    width:100%!important;
    margin:0 0 19px!important;
}

.tss-dj-submit{
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:100%!important;
    margin:0!important;
    padding:14px 0 4px!important;
    text-align:center!important;
    background:none!important;
    border:0!important;
    box-shadow:none!important;
}

.tss-dj-submit button,
.tss-dj-submit input[type="submit"]{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    width:auto!important;
    min-width:300px!important;
    min-height:54px!important;
    margin:0!important;
    padding:16px 48px!important;
    border:0!important;
    border-radius:8px!important;
    outline:none!important;
    color:#fff!important;
    background:linear-gradient(100deg,#b629ff 0%,#7d4cff 48%,#2a9cff 100%)!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:17px!important;
    font-weight:800!important;
    line-height:1.2!important;
    letter-spacing:.2px!important;
    text-transform:uppercase!important;
    text-align:center!important;
    box-shadow:0 9px 28px rgba(100,47,255,.36),0 0 24px rgba(42,156,255,.14)!important;
    cursor:pointer!important;
    appearance:none!important;
    -webkit-appearance:none!important;
    transition:transform .2s ease,box-shadow .2s ease!important;
}

.tss-dj-submit button:hover,
.tss-dj-submit input[type="submit"]:hover{
    transform:translateY(-2px)!important;
    background:linear-gradient(100deg,#c13cff 0%,#895cff 48%,#36adff 100%)!important;
    box-shadow:0 13px 38px rgba(100,47,255,.48),0 0 30px rgba(42,156,255,.24)!important;
}

.tss-dj-submit button:active,
.tss-dj-submit input[type="submit"]:active{
    transform:translateY(0)!important;
}

.tss-dj-message{
    width:100%!important;
    margin:0 0 18px!important;
    padding:18px 22px!important;
    border-radius:12px!important;
    color:#fff!important;
    font-family:Arial,Helvetica,sans-serif!important;
    font-size:15px!important;
}

.tss-dj-success{
    background:rgba(19,140,89,.16)!important;
    border:1px solid rgba(52,220,149,.45)!important;
}

.tss-dj-error{
    background:rgba(190,24,71,.15)!important;
    border:1px solid rgba(255,61,120,.45)!important;
}

/* Stop common theme icon systems from injecting icons into our labels/fields. */
.tss-dj-wrap .icon,
.tss-dj-wrap .field-icon,
.tss-dj-wrap .input-icon,
.tss-dj-wrap .form-icon,
.tss-dj-wrap [class*="icon-"],
.tss-dj-wrap [class*="-icon"],
.tss-dj-wrap [class*="icon_"],
.tss-dj-wrap [class*="_icon"]{
    display:none!important;
}

/* Page-specific: the separate emoji widget is not part of this application. */
body.page-id-3988 [id*="emoji"],
body.page-id-3988 [class*="emoji"],
body.page-id-3988 [id*="Emoji"],
body.page-id-3988 [class*="Emoji"]{
    display:none!important;
}

@media(max-width:760px){
    .tss-dj-wrap{
        width:calc(100% - 20px)!important;
    }
    .tss-dj-hero{
        height:auto!important;
    }
    .tss-dj-form{
        padding:12px!important;
    }
    .tss-dj-card{
        padding:20px!important;
    }
    .tss-dj-grid{
        grid-template-columns:1fr!important;
        gap:0!important;
    }
    .tss-dj-check-grid{
        grid-template-columns:1fr 1fr!important;
        gap:15px 12px!important;
    }
    .tss-dj-submit button,
    .tss-dj-submit input[type="submit"]{
        width:100%!important;
        min-width:0!important;
    }
}

@media(max-width:430px){
    .tss-dj-hero{
        height:auto!important;
    }
    .tss-dj-check-grid{
        grid-template-columns:1fr!important;
    }
}