@use "../../styles/abstracts/variables" as * ;
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap');

.branches {
   background: #F9FAFB;
   min-height: 100vh;
   height: 100%;
   color: $col-dark-text;
   font-family: 'Montserrat', sans-serif !important;

   &__header {
        background: #FFFFFF;
        border-bottom: 1px solid #E5E7EB;
        padding: 2rem 6rem;
        display: flex;
        align-items: center;
        color: $col-dark-text;

        h3{
            font-weight: 600;
            font-family: 'Montserrat', sans-serif !important;
        }
   }

   &__intro {
        color: $col-dark-text;
        padding: 2rem 6rem;

        h1{
            font-weight: 700;
            font-size: 1.5rem;
            font-family: 'Montserrat', sans-serif !important;
        }

        p{
            font-weight: 500;
            opacity: .95;
            font-size: .95rem;
            color: #627081;
        }
   }

   &__form {
        padding: 0rem 6rem;
        display: flex;
        justify-content: space-between;

        &__input {
            width: 82%;
            height: 2.7rem;
            display: flex;
            align-items: center !important;
            padding-left: .8rem;
            border-radius: 10px;
            border: 1px solid $col-border-lining;
            background: #FFF;
            transition: border 0.2s ease;

            // Focus effect on wrapper
            &:focus-within {
                border: 2px solid $col-purple; 
                outline: 1px solid $col-purple; 
                outline-offset: 2px; box-shadow: 0 0 6px rgba($col-purple, 0.4);
            }
        }

        input,
        textarea,
        select {
            width: 100%;
            border: none;       // remove default input border
            outline: none;
            background: transparent;
            font-weight: 500;
            padding: 0.6rem 0.5rem;
            font-size: .9rem;

            &:focus {
                outline: none;   // prevent input from showing its own focus
                border: none;
                box-shadow: none;
            }
        }

         &--btn {
            background: $col-purple;
            color: #fff;
            border: none;
            border-radius: 10px;
            padding: 0.6rem 1rem;
            font-size: 0.9rem;
            font-weight: 500;
            cursor: pointer;
            transition: background 0.3s ease;
            display: flex;
            align-items: center;
            gap: 10px;
        }
   }

   &__grid {
        padding: 2rem 6rem;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
        grid-gap: 20px;
        padding-top: 5rem;
        padding-bottom: 5rem;
   }
}

.no-results {
  grid-column: 1 / -1; // makes it span full grid
  text-align: center;
  padding: 3rem 0;
  color: #6B7280;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .5rem;

  &__icon {
    font-size: 3rem;
    opacity: .3;
    margin-bottom: .5rem;
  }

  h3 {
    font-size: 1.2rem;
    font-weight: 600;
    color: #374151;
  }

  p {
    font-size: .95rem;
    opacity: .8;
    max-width: 300px;
  }
}