/* ============================================================
   BUTTON.CSS — Universal styling for all buttons
   Mirrors philosophy of various css files for structural and appearance consistency.
   ============================================================ */

/* Base button styling for all buttons */
.uniform-button {
    /* Reset browser styles safely (avoid all: unset for Safari stability) */
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-family: 'Georgia',serif;
    font-size: 1.05em;
    color: inherit;
    text-decoration: none;
    appearance: none;
    -webkit-appearance: none;

    /* Layout */
    display: flex;
align-items: center;
justify-content: center;
    width: 90%; /*button inside table cell*/
margin: .5em auto;  /* top right bottom left */

    box-sizing: border-box;

    /* Font + spacing */
    font-size: 1.1em; /*text inside button*/
    font-weight: normal;
    line-height: 1.1;               /* consistent line spacing */
    -webkit-line-height: 1.1;       /* Safari/iOS compatibility */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

    /* Button look */
    padding: 0.75em 0em; /*top/bottom cushion, left/right cushion*/
    border-radius: 35px;
    border: 1px solid #888;
    background-color: #d9ffd9;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.1s ease;
    -webkit-tap-highlight-color: transparent; /* remove iOS tap flash */

    /* Wrapping + height behavior */
    white-space: normal;
    word-wrap: break-word;
    flex-wrap: wrap;
    height: 100%; /*attempted to get buttons to increase in uniform height*/
    min-height: 3em; /* gives uniform base height for short labels */
}

/* Hover/active states */
.uniform-button:hover {
    background-color: #c4f7c4;
    border: 1px solid #888;
    transform: scale(1.03);
}

.uniform-button:active {
    transform: scale(0.97);
}

/* Disabled button state */
.uniform-button.disabled {
    opacity: 0.45;               /* Reduce opacity to visually indicate it's disabled */
    pointer-events: none;       /* Prevent clicks */
    cursor: not-allowed;        /* Change cursor to 'not-allowed' */
}

/* Full-width variant */
.uniform-button.full {
    width: 90%;
}

.flip-emoji {
  display: inline-block; /* Required for transform to work properly */
  transform: scaleX(-1); /* Flip horizontally */

}

/* Password container adjustments for toggle icon */
.password-container {
    position: relative;
    width: 100%;
}

.password-container input {
    padding-right: 3em;       /* space for emoji toggle */
    margin-top: 0;            /* remove extra space above */
    margin-bottom: 0;         /* remove extra space below */
}

.password-container span {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    cursor: pointer;
    font-size: 1.25em;
    user-select: none;
    z-index: 1;
line-height: 1;
}

.password-container span.hidden {
    display: none;
}