/* Shared heading style for open-campus reservations and session results. */
#opc_form.opc-select-title,
#sessions-title.opc-select-title {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
    padding: 22px 112px;
    border-radius: 999px;
    background: linear-gradient(100deg, #E3F8EF 0%, #EFFBF5 50%, #D6F5E9 100%);
    color: #07365B;
    font-size: clamp(20px, calc(2vw + 12px), 32px);
    font-weight: 700;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* An inset curved edge keeps the accent inside the capsule. */
#opc_form.opc-select-title::after,
#sessions-title.opc-select-title::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: inset 0 -3px 0 #35CBA9;
    pointer-events: none;
    z-index: -1;
}

.opc-select-title .opc-select-title__decoration {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12%;
    max-width: 84px;
    z-index: -1;
    pointer-events: none;
}

.opc-select-title .opc-select-title__decoration--left {
    left: 0;
    background:
        radial-gradient(circle at 66% 85%, rgb(120 220 192 / 65%) 0 7%, transparent 8%),
        radial-gradient(circle at 32% 73%, rgb(120 220 192 / 45%) 0 23%, transparent 24%),
        linear-gradient(48deg, rgb(167 233 214 / 35%) 0 43%, transparent 44%);
}

.opc-select-title .opc-select-title__decoration--right {
    right: 0;
    background:
        radial-gradient(circle at 38% 68%, rgb(255 255 255 / 85%) 0 14%, transparent 15%),
        linear-gradient(132deg, transparent 0 58%, rgb(167 233 214 / 45%) 59%);
}

.opc-select-title .opc-select-title__decoration::before {
    content: "";
    position: absolute;
    pointer-events: none;
    background: rgb(120 220 192 / 40%);
}

.opc-select-title .opc-select-title__decoration--left::before {
    top: 5%;
    left: 22%;
    width: 63%;
    height: 42%;
    clip-path: polygon(0 40%, 100% 0, 75% 100%);
}

.opc-select-title .opc-select-title__decoration--right::before {
    top: 8%;
    right: 0;
    width: 67%;
    height: 51%;
    clip-path: polygon(100% 0, 100% 100%, 0 48%);
}

@media (max-width: 767px) {
    #opc_form.opc-select-title,
    #sessions-title.opc-select-title {
        min-height: 68px;
        padding: 18px 10px;
        font-size: clamp(20px, 5.4vw, 22px);
    }

    .opc-select-title .opc-select-title__decoration {
        /* Keep motifs in the side space even at 320px (11 title characters). */
        width: min(9%, max(8px, calc((100% - 11em) / 2)));
    }
}