/* button.css */

/* =======================================
   Button Styles
   ======================================= */
#signin, #signout, #goback, #signup {
    background-color: transparent;
    color: var(--bg-primary);
    border: 1px solid var(--bg-primary);
    padding: 10px 25px;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 25px;
    transition: background-color 0.3s, color 0.3s, padding 0.3s ease, font-size 0.3s ease;
    font-size: 1em;
    font-weight: 600;
}

body:not(.logged-in).shrunk #signin,
.logged-in #signin,
body:not(.logged-in).shrunk #signout,
.logged-in #signout,
body:not(.logged-in).shrunk #goback,
.logged-in #goback,
body:not(.logged-in).shrunk #signup,
.logged-in #signup {
    padding: 8px 20px;
    font-size: 0.9em;
}

/* Keep "Sign Out" on one line and exactly the same height as the
   language button. The text keeps its normal bold size at all widths
   and only shrinks once the button is actually short on space. */
.logged-in #signout,
.logged-in #lang-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    height: 40px;
}
.logged-in #signout {
    white-space: nowrap;
    max-width: 100%;
    font-weight: 600;
    padding: 0 20px;
}

@media (max-width: 400px) {
    .logged-in #signout {
        font-size: 0.8em;
        padding: 0 12px;
    }
}

@media (max-width: 320px) {
    .logged-in #signout {
        font-size: 0.75em;
        padding: 0 10px;
    }
}

#signin:hover, #signout:hover, #goback:hover {
    background-color: var(--bg-primary);
    color: var(--accent-primary);
}

#signup {
    background-color: var(--bg-primary);
    color: var(--accent-primary);
}

/* Marketing navbar buttons (index / login): on narrow screens the
   language button stays small while Sign In / Sign Up keep a bit more
   size so they read as the primary actions. On the narrowest screens
   Sign Up is dropped and the language button matches Sign In's size. */
@media (max-width: 700px) {
    #lang-toggle {
        padding: 6px 12px !important;
        font-size: 0.7em !important;
        margin-left: 8px;
    }
    #signin, #signup, #goback {
        padding: 9px 16px !important;
        font-size: 0.9em !important;
        margin-left: 8px;
    }
}

@media (max-width: 560px) {
    #signup {
        display: none;
    }
    #lang-toggle, #signin, #goback {
        padding: 8px 16px !important;
        font-size: 0.85em !important;
        margin-left: 6px;
    }
}

@media (max-width: 360px) {
    #lang-toggle, #signin, #goback {
        padding: 7px 14px !important;
        font-size: 0.8em !important;
    }
}

#signup:hover {
    background-color: transparent;
    color: var(--bg-primary);
    border: 1px solid var(--bg-primary);
}

button[type="submit"] {
    width: 100%;
    padding: 15px;
    background-color: var(--accent-primary);
    color: #FFFFFF;
    border: none;
    border-radius: 25px;
    cursor: pointer;
    font-size: 1.1em;
    transition: background-color 0.3s;
}

button[type="submit"]:hover {
    background-color: var(--accent-secondary);
}

.add-button, .add-plan {
    flex: 1;
    padding: 10px 20px;
    background-color: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 10px;
}

.add-button:hover, .add-plan:hover {
    background-color: var(--accent-primary);
    color: #FFFFFF;
}

/* =======================================
   Modern Button Styles
   ======================================= */
.btn {
    padding: 12px 24px;
    border: none;
    border-radius: 8px;
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    font-family: 'Poppins', sans-serif;
    text-decoration: none;
    display: inline-block;
}

.btn-primary {
    background-color: var(--accent-primary);
    color: #FFFFFF;
}

.btn-primary:hover {
    background-color: var(--accent-secondary);
    transform: translateY(-2px);
}

.btn-secondary {
    background-color: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
}

.btn-secondary:hover {
    background-color: var(--accent-primary);
    color: #FFFFFF;
    transform: translateY(-2px);
}

.btn-large {
    padding: 14px 32px;
    font-size: 1.1rem;
}

.btn-cta {
    padding: 16px 48px;
    font-size: 1.15rem;
    font-weight: 700;
    background-color: #fff;
    color: #008080;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    font-family: 'Poppins', sans-serif;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.btn-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
}

.view-button {
    flex: 1;
    padding: 10px 20px;
    background-color: var(--accent-primary);
    color: #FFFFFF;
    border: 2px solid var(--accent-primary);
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    margin-top: 10px;
}

.view-button:hover {
    background-color: transparent;
    color: var(--accent-primary);
}

.terms-link {
    background-color: transparent;
    color: var(--text-secondary);
    border: 2px solid var(--border-color);
    padding: 10px 25px;
    cursor: pointer;
    border-radius: 25px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 1em;
    font-weight: 600;
    text-decoration: none;
}

.terms-link:hover {
    background-color: var(--accent-primary);
    color: var(--bg-primary);
}

.ghost {
    background-color: #FFFFFF;
    color: var(--accent-primary);
    border: none;
    padding: 12px 30px;
    cursor: pointer;
    border-radius: 25px;
    transition: background-color 0.3s, color 0.3s;
    font-size: 1.2em;
}

.ghost:hover {
    background-color: transparent;
    color: #FFFFFF;
    border: 1px solid #FFFFFF;
}

.profile-button {
    padding: 15px 25px;
    background-color: transparent;
    color: var(--accent-primary);
    border: 2px solid var(--accent-primary);
    border-radius: 25px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.3s, color 0.3s;
    text-align: center;
    text-decoration: none;
}

.profile-button:hover {
    background-color: var(--accent-primary);
    color: #FFFFFF;
}

.delete-button {
    border-color: #FF0000;
    color: #FF0000;
}

.delete-button:hover {
    background-color: #FF0000;
    color: #FFFFFF;
}

#lang-toggle {
    background-color: transparent;
    color: var(--bg-primary);
    border: 1px solid var(--bg-primary);
    padding: 8px 18px;
    cursor: pointer;
    margin-left: 10px;
    border-radius: 25px;
    transition: background-color 0.3s, color 0.3s, padding 0.3s ease, font-size 0.3s ease;
    font-size: 0.85em;
    font-weight: 600;
    white-space: nowrap;
}

body:not(.logged-in).shrunk #lang-toggle,
.logged-in #lang-toggle {
    padding: 6px 14px;
    font-size: 0.75em;
}

#lang-toggle:hover {
    background-color: var(--bg-primary);
    color: var(--accent-primary);
}