/*
 /*
 * Singpass button styles
 *
 * Follows official Singpass Button Guidelines:
 * https://docs.developer.singpass.gov.sg/docs/products/singpass-login/singpass-button-guidelines-for-developers-and-designers
 *
 * Design spec:
 *   Background : #FFFFFF  (white)
 *   Border     : 2px solid #6c757d  (Bootstrap grey)
 *   Text color : #343a40  (dark)
 *   Logo       : singpass_logo_fullcolours.svg, placed to the RIGHT of the label text
 *   Height     : 50px  (Singpass minimum is 40px)
 *   Layout     : "Configure <logo>"  /  "Disable <logo>"  — text and logo on the same line
 *
 * Why !important on three properties:
 *   Bootstrap 4 sets display:inline-block, padding:.375rem .75rem, and line-height:1.5 on
 *   .btn.  The vertical padding and line-height are the main culprits that push the logo
 *   slightly above the text.  !important on display, align-items, and padding overrides
 *   those rules regardless of source order or specificity conflicts with a.btn selectors.
 */

.singpass-btn {
    display:          inline-flex !important; /* beats Bootstrap .btn / a.btn inline-block  */
    align-items:      center !important;      /* beats any Bootstrap cross-axis override     */
    padding:          0 20px !important;      /* remove Bootstrap's 0.375rem vertical padding*/
    gap:              4px;
    height:           50px;
    background-color: #FFFFFF;
    border:           2px solid #6c757d;
    border-radius:    4px;
    color:            #343a40;
    font-size:        16px;
    font-weight:      700;
    line-height:      1;
    letter-spacing:   0.02em;
    text-decoration:  none;
    white-space:      nowrap;
    cursor:           pointer;
    transition:       opacity .15s ease;
}

.singpass-btn:hover,
.singpass-btn:focus {
    opacity:         .85;
    color:           #343a40;   /* prevent Bootstrap anchor hover from overriding */
    text-decoration: none;
}

/* Explicit per-child alignment so each flex item centres itself
   independently of whatever the flex container resolves to */
.singpass-btn span {
    display:    block;
    line-height: 1;
    align-self:  center;
    padding:     0;
    margin:      0;
}

/* display:block removes the inline "descender gap" beneath <img>.
   align-self:center pins it to the flex midpoint, not the text baseline.
   margin/padding:0 clears any Bootstrap img reset that could shift it. */
.singpass-btn__logo {
    display:     block;
    height:      1em;
    width:       auto;
    flex-shrink: 0;
    align-self:  center;
    margin:      0;
    padding:     0;
    transform:   translateY(3px);
}

/* Login-page button 
   The Singpass logo sits to the RIGHT of the label text: "Log in with <logo>"
*/
.singpass-login-btn {
    background-color: white;
    border:           1px solid #C8C9CC;
    color:            #333;
    gap:              4px;
    font-weight:      600;
    display:          flex !important;   /* beats Bootstrap .btn inline-block */
    align-items:      center;
    justify-content:  center;
    padding:          10px;
    border-radius:    9px;
    text-decoration:  none;
    transition:       background-color 0.3s ease;
    margin-right:     0px !important;
}

.singpass-login-btn:hover {
    background-color: #F5F5F7;
    /*color:            #F5F5F7;*/
    text-decoration:  none;
}

/* Logo placed after the label text; margin-left matches the Google icon's
   margin-right so spacing feels consistent across both buttons */
.singpass-login-icon {
    display:     block;
    height:      1em;
    width:       auto;
    flex-shrink: 0;
    align-self:  center;
    margin:      0;
    padding:     0;
    transform:   translateY(2px);
}