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

.checkout {
    @include dashPageComponent;

    &--top {
        display: flex;
        align-items: center;
        gap: 10px;

        h6{
            font-weight: 600;
            color: $col-white
        }
    }

    &--header {
        padding-top: 1rem;
        h2{
            font-weight: 400 !important;
            color: $col-white;
            font-size: .9rem;
            @media only screen and (max-width: 1000px){
                font-size: .92rem;
            }
        }

        p{
            padding-top: .1rem;
            color: $col-white;
            opacity: .8;
            font-size: .85rem;
            font-weight: 400;

            @media only screen and (max-width: 1000px){
                font-size: .85rem;
            }
        }
    }

    &--content{
        border: 1px solid $col-border-lining;
        padding: 1.5rem 2rem;
        border-radius: 6px;
        margin-top: 1.5rem;
        @media only screen and (max-width: 1000px){
            padding: 1rem 1rem;
        }
    }

    &--network {
        h6{
            font-size: .9rem;
            color: $col-white;
            font-weight: 400;
        }

        small{
            color: $col-white;
            opacity: .8;
            font-size: .82rem;
            font-weight: 400;
        }

        &--grid {
            display: flex;
            gap: 20px;
            align-items: center;
            padding-top: 1rem;
            @media only screen and (max-width: 1000px){
                display: flex;
                overflow-x: auto;
                flex-wrap: nowrap;
            }

            &--item {
                color: $col-white;
                font-weight: 400;
                font-size: .8rem;
                cursor: pointer;
                @media only screen and (max-width: 1000px){
                    display: flex;
                    flex: 0 0 90px;
                    gap: 10px;
                    align-items: center;
                }
                &--active{ 
                    background: $col-orange;
                    color: $col-dark;
                    padding: .4rem 1rem;
                    border-radius: 6px;
                    font-weight: 500;
                    font-size: .8rem;
                    @media only screen and (max-width: 1000px){
                        flex: 0 0 100px;
                        text-align: center;
                        padding: .6rem 1rem;
                    }
                }
            }
        }
    }

    &--amount {
        margin-top: 1.5rem;
        display: flex;
        justify-content: space-between;
        background: transparent;
        border: 1px solid $col-border-lining;
        padding: 1rem 1.5rem;
        border-radius: 6px;
        align-items: center;
        @media only screen and (max-width: 1000px){
            padding: 1rem 1.2rem;
            a {
                display: none;
            }
        }

        span {
            display: flex;
            align-items: center;
            gap: 10px;
            padding-top: .5rem;

            img {
                height: 2rem;
            }
        }

        p{
            font-weight: 400;
            color: $col-white;
            padding-bottom: .5rem;
            font-size: .85rem;
            border-bottom: 1px solid $col-border-lining;
        }

        h2{
            color: $col-white;
            font-weight: 400;
            font-size: .85rem;
        }

        a{
            color: $col-white;
            font-weight: 500;
            font-size: .9rem;
        }
    }

    &--address {
        @extend .checkout--amount;
        @media only screen and (max-width: 1000px){
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }

        button {
            display: flex;
            align-items: center;
            gap: 3px;
            background: $col-orange;
            padding: .5rem 1rem !important;
            border-radius: 6px;
            color: $col-dark;
            font-weight: 500 !important;
            font-size: .85rem;
            cursor: pointer;
        }
    }

    &--proof {
        h6{
            font-size: .8rem;
            color: $col-white;
            font-weight: 400;
            margin-top: 1.5rem;
            @media only screen and (max-width: 1000px){
                font-size: .85rem;
            }
        }

        &--content { 
            background: transparent;
            border: 2px dashed $col-border-lining;
            padding: .5rem .5rem;
            border-radius: 6px;
            display: flex;
            gap: 10px;
            align-items: center;
            margin-top: .3rem;

            small {
                color: $col-white;
                font-weight: 500;
            }
        }

        input[type="file"] {
            display: none;
          }
        
        &--file {
            display: inline-block;
            padding: .5rem 1rem;
            cursor: pointer;
            background-color: $col-orange;
            color: $col-dark;
            border-radius: 4px;
            font-size: .8rem;
            transition: background-color 0.3s;
            font-weight: 500;
        }

    }

    &--note {
        background: linear-gradient(
            145deg,
            rgba(247, 147, 24, 0.08),
            rgba(247, 147, 24, 0.03)
        );

        border: 1px solid rgba(247, 147, 24, 0.15);

        margin-top: 1.5rem;
        margin-bottom: 1rem;

        padding: 1rem 1.5rem;

        border-radius: 12px;

        @media only screen and (max-width: 1000px) {
            padding: 1.2rem;
        }

        h4 {
            color: #f79318;
            font-weight: 600;
            font-size: 0.9rem;
            margin-bottom: 0.5rem;
        }

        p {
            color: rgba(255, 255, 255, 0.85);
            font-weight: 400;
            font-size: 0.82rem;
            line-height: 1.8;

            @media only screen and (max-width: 1000px) {
                line-height: 1.7;
            }
        }
    }

    &--btn {
        @include formButton;
        background: $col-orange;
        color: $col-dark;
        text-align: center;
        cursor: pointer;
        font-size: .8rem;
        transition: all ease-in-out .5s;
        &:hover {
            background-color: #e66a00;
            box-shadow: 0 0 6px rgba(255, 122, 0, 0.4);
        }
    }
}


.fileInfo {
  margin-top: 1rem;

  display: flex;
  justify-content: space-between;
  align-items: center;

  p {
    color: #fff;
    font-size: 0.85rem;
    margin: 0;
  }

  span {
    color: #888;
    font-size: 0.75rem;
  }
}

.preview {
  margin-top: 1rem;

  img {
    width: 100%;
    max-height: 260px;
    object-fit: contain;

    border-radius: 12px;
    border: 1px solid #333;
  }
}

.progressWrapper {
  margin-top: 1rem;

  background: #222;

  height: 10px;

  border-radius: 999px;

  overflow: hidden;

  position: relative;

  span {
    display: block;

    margin-top: 0.75rem;

    color: #aaa;

    font-size: 0.8rem;
  }
}

.progressBar {
  height: 100%;

  background: linear-gradient(
    90deg,
    #f79318,
    #ffb347
  );

  transition: width 0.25s ease;
}

.walletAddress {
  max-width: 280px;

  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;

  cursor: pointer;
}