mat-dialog-container.has-workbench,
.cdk-overlay-pane.has-workbench {
    opacity: 0 !important;
    pointer-events: none !important;
}

/* 1. Container & Card Cleanup */
.switch.container {
    max-width: 800px;
    margin: 2rem auto;
}

mat-card.switch-login__available, 
login-card mat-card {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
    padding: 24px !important;
    margin-bottom: 1rem;
    background: #fff;
	width:53%;
}



/* This targets the wrapper around each individual button */
.switch-login__available-element {
    display: inline-block !important;
    width: auto !important; /* Prevents the wrapper from taking full width */
}

/* Optional: Ensures the buttons themselves don't stretch */
.shoot-login__button {
    white-space: nowrap !important; /* Prevents the name inside the button from wrapping */
    width: fit-content !important;
}

/* 3. The Name Buttons (Continue Shopping For) */
.switch-login__available-section {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: flex-start; /* Or center if you prefer */
  margin-top: 15px;
      flex-direction: row !important; /* Keep them in a line */
    flex-wrap: wrap !important;     /* The "Magic" property: moves to next line automatically */
    gap: 12px 10px !important;      /* Adds 12px vertical and 10px horizontal spacing */
    justify-content: flex-start !important; /* Aligns them to the left */
    width: 100% !important;
}

.shoot-login__button {
  background-color: #e9ecef !important;
  border: 1px solid transparent !important;
  border-radius: 50px !important; /* Pill shape */
  color: #495057 !important;
  padding: 6px 16px !important;
  font-size: 14px !important;
  transition: all 0.2s ease;
}

.shoot-login__button:hover {
  background-color: #dee2e6 !important;
  border-color: #ced4da !important;
}

/* Hide the icon inside the buttons for a cleaner look */
.shoot-login__button_icon {
    font-size: 0.8rem;
    opacity: 0.6;
}

/* 3. The "Or" Divider Look */
.switch-login__header, 
.login_section h6 {
    text-align: center;
    text-transform: uppercase;
    font-size: 0.70rem;
    letter-spacing: 1px;
    color: #94a3b8;
    margin-bottom: 1.5rem;
}

/* 4. The Key Input & Open Button */
.login__form form {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.mat-form-field.login__key {
    width: 100%;
    max-width: 400px;
}

/* Style the 'Open' Button to be the Primary Action */
.btn-primary.login-button {
  
    border: none !important;
    border-radius: 8px !important;
    padding: 10px 30px !important;
    font-weight:500;
    box-shadow: 0 2px 4px rgba(0, 123, 255, 0.3);
}

.btn-primary.login-button:hover {

    box-shadow: 0 4px 8px rgba(0, 123, 255, 0.4);
}
  .login-button {
        width: 100% !important; /* Full width button is easier to tap on mobile */
        justify-content: center;
    }
	
	.login_section {
		width:80%;
		margin-left: auto;
    margin-right: auto;
}
	
/* Mobile Styles (Screens smaller than 576px) */
@media (max-width: 576px) {
	
	
mat-card.switch-login__available, 
login-card mat-card {

	width:102%;
}


    /* 1. Make the card fill more of the screen width */
    .switch.container {
        padding-left: 10px !important;
        padding-right: 10px !important;
        width: 100% !important;
    }

    .mat-card {
        padding: 15px !important; /* Slightly tighter padding for small screens */
    }

    /* 2. Improve the Button Row wrapping */
    .switch-login__available-section {
        justify-content: center !important; /* Centers buttons on mobile for a balanced look */
        gap: 8px !important; /* Slightly tighter gap */
    }

    .shoot-login__button {
        font-size: 13px !important; /* Slightly smaller text so more fit per row */
        padding: 8px 12px !important; /* Larger hit area for fingers */
        flex: 1 1 auto; /* Allows buttons to grow slightly to fill space if needed */
        justify-content: center;
    }

    /* 3. Stack the Input and Open Button vertically on very small phones */
    .login__form form {
        flex-direction: column !important; /* Stack input on top of button */
        align-items: stretch !important;
    }

    .login-button {
        width: 100% !important; /* Full width button is easier to tap on mobile */
        justify-content: center;
    }

    /* 4. Fix the Divider spacing */
    login-card::before {
        margin: 25px 0 !important; /* More breathing room between sections */
    }
}

.package, .mat-card {
    border: 1px solid #e2e8f0 !important;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1) !important;
    border-radius: 12px !important;
}

.login__key .mat-form-field-infix {
    border: none !important;

    text-align: left !important;
}

.login-buttons__element{
margin-top:10px;
}