/* AWS Page Custom Styles - Only styles that can't be achieved with Tailwind */

/* Case Study Image Container */
.img-container {
    position: relative;
    overflow: hidden;
}

.img-container img {
    display: block;
}

/* Start Project Form Styles */
.form-slider::-webkit-scrollbar {
    width: .5em;
}

.form-slider::-webkit-scrollbar-track {
    background: whitesmoke;
}

.form-slider::-webkit-scrollbar-thumb {
    background-color: darkgrey;
}

/* Fix for hidden sm:justify-center - add flex on sm screens */
@media (min-width: 640px) {
    .hidden.sm\:justify-center {
        display: flex !important;
    }
}

.solutionTab:hover {
    border-radius: 10px;
    background: linear-gradient(
        109deg,
        #0b0933 0.51%,
        #9514c2 53.89%,
        #462fcb 100%
    );
    color: #fffffa;
}

.solutionTab:hover p {
    color: #fffffa;
}

.solutionTab:hover a {
    color: #fffffa;
}

.solutionTab:hover .border-cil-red {
    border-color: transparent;
}

.border-cil-red:hover {
    border-color: transparent;
}

.input-selector {
    display: block;
    position: relative;
    cursor: pointer;
    user-select: none;
}

.input-selector input {
    position: absolute;
    opacity: 0;
    width: 23px;
    height: 23px;
    cursor: pointer;
}

.input-selector input:checked ~ .checkmarks {
    background-color: transparent;
    border: 2px solid #ff0a0a;
}

.input-selector input:checked ~ .checkmarks::after {
    display: block;
}

.input-selector input:hover ~ .checkmarkHovers {
    background-color: #ff0a0a15;
    transition: all 0.6s;
}

.input-selector .checkmarks {
    position: absolute;
    top: 3px;
    left: 0;
    height: 20px;
    width: 20px;
    background-color: transparent;
    border-radius: 50%;
    border: 2px solid #a4abb7;
}

.input-selector .checkmarks::after {
    content: "";
    position: absolute;
    display: none;
    top: 0;
    left: 0;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #ff0a0a;
    bottom: 0;
    right: 0;
    margin: auto;
}

.input-selector:hover input ~ .checkmarks {
    background-color: transparent;
}

.input-selector .checkmarkHovers {
    position: absolute;
    width: 40px;
    height: 40px;
    left: -10px;
    right: 10px;
    top: -7px;
    border-radius: 50%;
}

/* AWS Stack Browser Section Styles */
#aws-stack-content,
#aws-stack-content-mobile {
    min-height: 200px;
}

#aws-stack-content a,
#aws-stack-content-mobile a {
    text-decoration: none;
}

#aws-stack-content .flex,
#aws-stack-content-mobile .flex {
    align-items: flex-start;
}

/* Mobile dropdown improvements */
#aws-mobile-dropdown .dropdown {
    max-height: 300px;
    overflow-y: auto;
}

/* Ensure proper spacing for category labels */
.aws-category-label {
    white-space: nowrap;
    line-height: 1.5;
}

/* Text decoration for case study links */
.text-decoration {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 4px;
}

.text-decoration:hover {
    text-decoration-style: solid;
}

/* Designation Navigation (Fixed Sidebar) */
section.fixed.top-0.right-0 {
    max-height: 100vh;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE and Edge */
}

section.fixed.top-0.right-0::-webkit-scrollbar {
    display: none; /* Chrome, Safari, Opera */
}

.designation-link {
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
    flex-shrink: 0;
    /* Don't set width/height here - let Tailwind classes handle it */
}

.designation-link img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}

.designation-link.active {
    background: rgb(137,0,249);
    background: linear-gradient(90deg, rgba(137,0,249,1) 0%, rgba(188,82,193,1) 35%, rgba(239,68,68,1) 100%);
    font-weight: 600;
    position: relative;
}

/* Hide mobile-only items on md screens and up */
@media (min-width: 768px) {
    .designation-mobile-only {
        display: none !important;
    }
}

/* Show "more" link only on md screens and up */
.designation-more {
    display: none !important;
}

@media (min-width: 768px) {
    .designation-more {
        display: flex !important;
    }
}