/* specialty_options.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; }

.options-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 24px; margin-bottom: 50px;
    max-width: 700px; margin-left: auto; margin-right: auto;
}

.option-btn {
    background: white; color: #1F2937 !important;
    padding: 42px 22px 34px; 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: 14px;
    transition: all 0.35s cubic-bezier(0.4,0,0.2,1);
    position: relative; overflow: hidden;
}
.option-btn::before {
    content: ''; position: absolute; top: 0; left: 0; right: 0; height: 5px;
    transition: height 0.3s ease;
}
.option-btn.c-purple::before { background: linear-gradient(90deg, #5B21B6, #7C3AED); }
.option-btn.c-indigo::before { background: linear-gradient(90deg, #3730A3, #6366F1); }

.option-btn:hover { transform: translateY(-10px); box-shadow: 0 20px 45px rgba(124,58,237,0.12); }
.option-btn.c-purple:hover { border-color: rgba(124,58,237,0.3); }
.option-btn.c-indigo:hover { border-color: rgba(99,102,241,0.3); }
.option-btn:hover::before { height: 7px; }

.option-icon-wrap {
    width: 80px; height: 80px; border-radius: 22px;
    display: flex; align-items: center; justify-content: center;
    font-size: 32px; transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.option-btn.c-purple .option-icon-wrap { background: linear-gradient(135deg,#EDE9FE,#F5F3FF); color: #7C3AED; }
.option-btn.c-indigo .option-icon-wrap { background: linear-gradient(135deg,#E0E7FF,#EEF2FF); color: #6366F1; }
.option-btn:hover .option-icon-wrap { transform: scale(1.1) rotate(-5deg); box-shadow: 0 8px 24px rgba(124,58,237,0.15); }

.option-label { font-weight: 800; font-size: 17px; text-align: center; line-height: 1.3; }
.option-desc  { font-size: 13px; color: #6B7280; text-align: center; margin: 0; }
.option-cta {
    font-size: 13px; font-weight: 700;
    opacity: 0; transform: translateY(4px);
    transition: all 0.3s ease;
    display: flex; align-items: center; gap: 4px;
}
.option-btn.c-purple .option-cta { color: #7C3AED; }
.option-btn.c-indigo .option-cta { color: #6366F1; }
.option-btn:hover .option-cta { opacity: 1; transform: translateY(0); }