/* ===========================================================
   CDL Register – Premium Selection Cards
   Clean, soft, glassy, high-end
=========================================================== */

.cdl-register-wrapper {
    min-height: 80vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.cdl-register-title {
    font-weight: 700;
    font-size: 2rem;
    color: #1a1a1a;
    letter-spacing: .3px;
}

/* GRID */
.cdl-register-grid {
    max-width: 900px;
}

/* -----------------------------------------------------------
   ROLE CARDS – PREMIUM GLASSY CARDS
----------------------------------------------------------- */

.cdl-role-card {
    text-decoration: none !important;
    display: block;
    text-align: center;
    padding: 2.2rem 1.6rem;
    border-radius: 24px;
    background: rgba(255,255,255,0.55);
    backdrop-filter: blur(14px);
    border: 1px solid rgba(255,255,255,0.4);
    color: #2e2e2e;
    transition: all .28s ease;
    box-shadow: 0 12px 38px rgba(0,0,0,0.05);
    position: relative;
}

    /* Icon */
    .cdl-role-card .icon {
        font-size: 3rem;
        margin-bottom: 1rem;
    }

    /* Title */
    .cdl-role-card h4 {
        font-size: 1.4rem;
        font-weight: 700;
        margin-bottom: .4rem;
        color: #2e2e2e;
    }

    /* Description */
    .cdl-role-card p {
        font-size: .95rem;
        opacity: 0.7;
        margin: 0;
    }

    /* Hover Effekt */
    .cdl-role-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 14px 45px rgba(170,108,57,0.25);
        border-color: rgba(170,108,57,0.45);
    }

    /* Active Tap */
    .cdl-role-card:active {
        transform: scale(.97);
    }

/* Mobile spacing */
@media (max-width: 767px) {
    .cdl-role-card {
        padding: 1.8rem 1.4rem;
    }
}


/* Divider ------------------------------------------ */

.cdl-role-divider {
    width: 1px;
    height: 120px;
    background: linear-gradient( to bottom, rgba(170,108,57,0.45), rgba(170,108,57,0.15) );
    margin: auto;
    border-radius: 1px;
}

/* Mobile: horizontal statt vertikal */
@media (max-width: 767px) {
    .cdl-role-divider {
        width: 70%;
        height: 1px;
        margin: 1rem auto;
        background: linear-gradient( to right, rgba(170,108,57,0.35), rgba(170,108,57,0.15) );
    }
}