.button-component {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.button-component.square {
    background-color: #F4A484;

    padding: 10px 16px;
    gap: 10px;

    width: 114px;
    height: 50px;

    background: #F4A484;
    border-radius: 13px;

    /* Inside auto layout */
    flex: none;
    order: 2;
    flex-grow: 0;

}

/* Standard filled call-to-action: the same navy pill as the day-1 onboarding
   "Get Started" button. That styling lives in
   static/css/onboarding_index_multiday.css scoped to #onboarding-actions, so it
   could not be reused outside onboarding -- this modifier is the reusable
   version. Keep the two in sync if either changes. */
.button-component.primary {
    background: var(--paloma-navy-blue);
    border: none;
    border-radius: 25px;
    color: #ffffff;
    cursor: pointer;
    font-family: "Sofia Pro";
    font-size: 20px;
    gap: 10px;
    height: 50px;
    padding: 10px 25px;
    text-decoration: none;
    white-space: nowrap;
    width: auto;
}

.button-component.primary:hover,
.button-component.primary:focus {
    background: #253347;
    color: #ffffff;
    text-decoration: none;
}

/* Pale-pink pill with navy type and outline -- the quieter sibling of
   .primary, for a secondary action that still needs to read as a button.
   Geometry deliberately matches .primary so the two can sit side by side. */
.button-component.soft {
    background: #FBE6E5;
    border: 1px solid #344563;
    border-radius: 25px;
    color: #344563;
    cursor: pointer;
    font-family: "Sofia Pro";
    font-size: 20px;
    gap: 10px;
    height: 50px;
    padding: 10px 25px;
    text-decoration: none;
    white-space: nowrap;
    width: auto;
}

.button-component.soft:hover,
.button-component.soft:focus {
    background: #F8D9D8;
    color: #344563;
    text-decoration: none;
}

.button-component.push {
    -webkit-appearance: none;
    appearance: none;
    -webkit-transition: -webkit-transform 0.1s ease, -webkit-box-shadow 0.1s ease; 
    -moz-transition: -moz-transform 0.1s ease, -moz-box-shadow 0.1s ease; 
    -o-transition: -o-transform 0.1s ease, -o-box-shadow 0.1s ease; 
    -ms-transition: -ms-transform 0.1s ease, -ms-box-shadow 0.1s ease;
    -webkit-box-shadow: 0px 2px 0px 0px #DAE4ED; 
    -moz-box-shadow: 0px 2px 0px 0px #DAE4ED; 
    box-shadow: 0px 2px 0px 0px #DAE4ED;
    transition: transform 0.1s ease, box-shadow 0.1s ease;
}

.button-component.push:active {
    -webkit-box-shadow: none;
    -moz-box-shadow: none;
    box-shadow: none; 
    transform: scale(0.95); 
}