/* Flat pastel-gray style for .btn-secondary */
.btn-secondary {
    background-color: #e0e6ed !important;
    /* Light pastel gray/blue */
    color: #2f3b4a !important;
    /* Dark text for contrast */
    border: 1px solid #d1d9e2 !important;
    border-radius: 4px;
    /* Subtle rounding */
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

/* Hover, Focus, Active: slightly darker shade and gentle shadow */
.btn-secondary:hover,
.btn-secondary:focus,
.btn-secondary:active {
    background-color: #a8d0ff !important;
    /* Darker pastel gray/blue */
    border-color: #b8c9d6 !important;
    color: #1c252f !important;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    /* Soft shadow on hover/focus */
}

/* Toggled "active" state (for toggle buttons) */
.btn-secondary.active {
    background-color: #a8d0ff !important;
    border-color: #a2b2c2 !important;
    color: #111 !important;
}

/* Removed any margin between consecutive .btn-secondary buttons */
.hover-button {
    border: 4px solid transparent;
    /* Keeps border width consistent if needed for layout */
    transition: box-shadow 0.2s ease-in-out;
    box-sizing: border-box;
    /* Prevents padding/border from shifting layout */
}

/* Applies when hovered or when the button is marked as selected */
.hover-button:hover,
.hover-button.selected {
    box-shadow: 0px 6px 12px rgba(0, 0, 0, 0.5);
    /* A stronger shadow effect */
}

/* 1) Remove the default radio styling */
input[type="radio"] {
    appearance: none;
    /* For Chrome/Safari/Edge */
    -moz-appearance: none;
    /* For Firefox */
    -webkit-appearance: none;
    /* For older Safari/Chrome */

    /* 2) Size and shape */
    width: 20px;
    height: 20px;
    border: 2px solid #505050;
    /* Unchecked outer ring (black) */
    border-radius: 50%;
    /* Make it a circle */
    cursor: pointer;
    position: relative;
    /* So we can absolutely position the fill */
    margin-right: 8px;
    /* Spacing between the radio and label */
    vertical-align: middle;
    /* Keep it aligned with text */
}

/* 3) When checked, change the outer ring's color */
input[type="radio"]:checked {
    border-color: #0064f7;
    /* Purple border when checked */
}

/* 4) Add the inner fill for the checked state using a pseudo-element */
input[type="radio"]:checked::before {
    content: "";
    position: absolute;
    top: 3px;
    /* Centers the circle vertically */
    left: 3px;
    /* Centers the circle horizontally */
    width: 10px;
    /* Inner circle's diameter */
    height: 10px;
    background: #ffffff;
    border-radius: 50%;
    /* Make it a circle */
}

.github-btn,
.paper-btn {
    display: inline-flex;
    align-items: center;
    padding: 6px 16px;
    border-radius: 20px;
    background: #f5f5f5;
    border: 1px solid #d1d9e2;
    color: #222 !important;
    text-decoration: none !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.04);
    font-weight: 500;
    transition: background 0.2s, box-shadow 0.2s, color 0.2s;
    margin-left: 0.5rem;
}

.github-btn:hover,
.github-btn:focus {
    background: #e0e6ed;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
    color: #111 !important;
    text-decoration: none !important;
}

.paper-btn:hover,
.paper-btn:focus {
    background: #ffeaea;
    box-shadow: 0 4px 8px rgba(183, 28, 28, 0.08);
    color: #b71c1c !important;
    text-decoration: none !important;
}

.github-icon,
.paper-icon {
    color: #111 !important;
    transition: color 0.2s;
}

.github-btn:hover .github-icon,
.github-btn:focus .github-icon,
.paper-btn:hover .paper-icon,
.paper-btn:focus .paper-icon {
    color: #1976d2 !important;
}

.github-btn:hover,
.github-btn:focus,
.paper-btn:hover,
.paper-btn:focus {
    background: #e3f2fd;
    box-shadow: 0 4px 8px rgba(25, 118, 210, 0.08);
    color: #1976d2 !important;
    text-decoration: none !important;
}