@use "../../../../../styles/abstracts/variables";
@use "../../../../../styles/abstracts/mixins";

.single__plan{
    border: 1px solid variables.$col-active-btn-bg;
    background: #141414;
    padding: 2rem 1.5rem;
    border-radius: 10px;
    position: relative;
    display: flex;
    flex: 0 0 270px;
    margin-bottom: .5;
    transition: all ease-in .5s;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;

      // Hover effect
      &:hover {
        transform: translateY(-2px);
        border-radius: 10px;
        box-shadow: 0 2px 6px rgba(255, 122, 0, 0.2); // subtle orange shadow
    }

    // Orange overlay
    &::after {
        content: "";
        position: absolute;
        inset: 0;
        background: rgba(255, 122, 0, 0); // fully transparent initially
        transition: background 0.3s ease;
        pointer-events: none;
        z-index: 1;
        border-radius: 10px;
    }

    &:hover::after {
        background: rgba(255, 122, 0, 0.05); // soft orange tint on hover
    }

     // Prevent card hover when button is hovered (Chrome/Safari only)
  &:has(button:hover),
  &:has(.button:hover) {
    transform: none;
    box-shadow: none;

    &::after {
      background: rgba(255, 122, 0, 0); // remove overlay
    }
  }
    @media only screen and (max-width: 1000px) {
        flex: 0 0 280px !important;
        padding: 1.5rem 1.5rem;
    }

    &__thumbnail{
        position: absolute;
        bottom: 0;
        right: 0;
    }

    &__body{
        padding-bottom: 0rem;
        h1{
            text-transform: capitalize;
            font-size: 1.2rem;
            font-weight: 600;
            line-height: 1.3;
            color: variables.$col-white;
            font-family: variables.$font-header;
            @media only screen and (max-width: 1000px) {
                font-size: 1.2rem;
                font-weight: 700;
            }
        }
        &__details {
            padding-top: 1rem;
            padding-bottom: 1rem;
            p{
                opacity: .85;
                font-weight: 400 !important;
                font-size: .8rem;
                border-bottom: 1px solid variables.$col-border-lining;
                line-height: 3 !important;
                display: flex;
                justify-content: space-between;
                padding-bottom: 0 !important;

                span{
                    font-weight: 500;
                    color: variables.$col-white;
                }
                @media only screen and (max-width: 1000px) {
                    font-size: .82rem !important;
                    font-weight: 600 !important;
                }
            }
        }
            a{
                background: variables.$col-orange;
                color: variables.$col-dark;
                text-align: center;
                padding: .5rem 1rem;
                padding-bottom: .7rem;
                border-radius: 6px;
                font-weight: bold;
                font-size: .8rem;
                display: block;
                &:hover {
                    background-color: #e66a00;
                    box-shadow: 0 0 6px rgba(255, 122, 0, 0.4);
                }
                @media only screen and (max-width: 1000px) {
                    padding: .7rem 1rem;
                    font-size: .75rem;
                    margin-bottom: .6rem;
                }
            }
            p{
                opacity: .9;
                font-weight: 400 !important;
                font-size: .8rem;
                line-height: 2;
                padding-bottom: 3rem;
                color: variables.$col-text-color;
            }
    }
}