/* degree_selection.css */
:root { --pro-primary: #7C3AED; --pro-dark: #5B21B6; }

.page-header {
    background: linear-gradient(135deg, var(--pro-dark) 0%, var(--pro-primary) 60%, #A78BFA 100%);
    box-shadow: 0 20px 60px rgba(124,58,237,0.28);
}
.back-button:hover { border-color: var(--pro-primary); color: var(--pro-primary) !important; }

.degree-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 28px; margin-bottom: 50px;
    max-width: 640px; margin-left: auto; margin-right: auto;
}

.degree-card {
    background: white; color: #1F2937 !important;
    padding: 48px 28px 38px; border-radius: 20px;
    text-decoration: none !important;
    border: 1.5px solid #E5E7EB;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05);
    display: flex; flex-direction: column; align-items: center; gap: 16px;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    position: relative; overflow: hidden; text-align: center;
}
.degree-card::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    transition: height 0.3s ease;
}
.degree-card.c-blue::before    { background: linear-gradient(90deg, #1E3A8A, #3B82F6); }
.degree-card.c-emerald::before { background: linear-gradient(90deg, #064E3B, #10B981); }

.degree-card:hover { transform: translateY(-10px) scale(1.02); box-shadow: 0 24px 50px rgba(124,58,237,0.12); }
.degree-card.c-blue:hover    { border-color: rgba(59,130,246,0.3); }
.degree-card.c-emerald:hover { border-color: rgba(16,185,129,0.3); }
.degree-card:hover::before   { height: 7px; }

.degree-icon-wrap {
    width: 90px; height: 90px; border-radius: 26px;
    display: flex; align-items: center; justify-content: center;
    font-size: 38px; transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.degree-card.c-blue    .degree-icon-wrap { background: linear-gradient(135deg,#DBEAFE,#EFF6FF); color: #1D4ED8; }
.degree-card.c-emerald .degree-icon-wrap { background: linear-gradient(135deg,#D1FAE5,#ECFDF5); color: #059669; }
.degree-card:hover .degree-icon-wrap { transform: scale(1.12) rotate(-5deg); box-shadow: 0 10px 28px rgba(124,58,237,0.15); }

.degree-label { font-weight: 900; font-size: 22px; line-height: 1.2; }
.degree-desc  { font-size: 13px; color: #6B7280; margin: 0; line-height: 1.5; }

.degree-cta {
    font-size: 14px; font-weight: 700;
    opacity: 0; transform: translateY(5px);
    transition: all 0.3s ease;
    display: flex; align-items: center; gap: 4px; margin-top: 4px;
}
.degree-card.c-blue    .degree-cta { color: #1D4ED8; }
.degree-card.c-emerald .degree-cta { color: #059669; }
.degree-card:hover .degree-cta { opacity: 1; transform: translateY(0); }