/* =========================
   CLEAN LOGIN - JOOMLA 6 / CASSIOPEIA
   ========================= */

/* Container */
.mod-login {
    max-width: 380px;
    margin: 90px auto;
    text-align: center;
}

/* INPUT FIELDS */
.mod-login input {
    width: 100%;
    padding: 12px 14px;
    margin-bottom: 12px;

    border: 1px solid #ddd;
    border-radius: 2px;

    font-size: 14px;
    background: #fff;

    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

/* INPUT FOCUS */
.mod-login input:focus {
    outline: none;
    border-color: #3b82f6;
    box-shadow: 0 0 0 3px rgba(59,130,246,0.15);
}

/* =========================
   BUTTON (SMALL + CENTERED)
   ========================= */
.mod-login button {
    display: inline-block !important;
    width: auto !important;

    padding: 10px 36px;
    margin-top: 5px;

    border: none;
    border-radius: 2px;

    background: #265370;
    color: #fff;

    font-size: 14px;
    font-weight: 500;

    cursor: pointer;

    box-shadow: 0 4px 10px rgba(37,99,235,0.25);
}

/* BUTTON HOVER */
.mod-login button:hover {
    background: #1d4ed8;
}

/* =========================
   HIDE EVERYTHING EXTRA
   ========================= */

/* icons + wrappers */
.mod-login .input-group-text,
.mod-login i,
.mod-login svg,
.mod-login .form-text,
.mod-login .mod-login__remember,
.mod-login .mod-login__links,
.mod-login .login-description {
    display: none !important;
}

/* forgot links */
.mod-login a[href*="remind"],
.mod-login a[href*="reset"],
.mod-login a[href*="password"],
.mod-login a[href*="username"] {
    display: none !important;
}

/* passkey / webauthn */
.mod-login .com-users-login__webauthn,
.mod-login .webauthn-login-button,
.mod-login button[type="button"][data-webauthn],
.mod-login [id*="webauthn"],
.mod-login [class*="webauthn"] {
    display: none !important;
}

/* password eye / toggle button */
.mod-login .password-toggle,
.mod-login .input-password-toggle,
.mod-login .field-password-toggle,
.mod-login [class*="toggle-password"],
.mod-login [class*="password-toggle"],
.mod-login button[class*="toggle"] {
    display: none !important;
}




/* BACKGROUND ONLY FOR THIS ONE PAGE */

.my-home-bg {
    min-height: 100vh;
    min-height: 100dvh;

    background: url('/images/login-bg.jpg') no-repeat center center !important;
    background-size: cover !important;
}




/* =========================
   RESPONSIVE WIDTH (OPTION 2)
   ========================= */

/* Default (mobile & tablet) */
.mod-login {
    width: 90%;
    max-width: 420px;
    margin: 90px auto;
}

/* Desktop: left + vertically centered + wider */
@media (min-width: 992px) {
    .mod-login {
        position: absolute; /* or use fixed if preferred */
        top: 50%;
        left: 80px;

        transform: translateY(-50%);

        margin: 0;
        text-align: left;

        width: 100%;
        max-width: 400px; /* 👈 wider fields */
    }
}

/*startup Tiles*/

.tile-container {
    display:flex;
    flex-wrap:wrap;
    gap:20px;
    justify-content:center;
}

.tile {
    width:200px;
    height:200px;

    border-radius:2px;
    display:flex;
    align-items:center;
    justify-content:center;

    font-size:28px;
    font-weight:bold;
    color:#000;
    text-decoration:none;

    font-family:"Bauhaus 93","Arial Rounded MT Bold",sans-serif;

    box-shadow:
        rgba(14,30,37,0.12) 0px 5px 10px 0px,
        rgba(14,30,37,0.32) 0px 5px 32px 0px;

    transition:
        box-shadow 0.25s ease,
        border-radius 0.25s ease,
        transform 0.25s ease;
}

.tile:hover {
    box-shadow:5px 10px 50px rgba(0,0,0,0.6);
    border-radius:0px 20px 0px 20px;
    transform:translateY(-5px);
}


/* TABLET */
@media (max-width: 900px) {

    .tile {
        width:160px;
        height:160px;
        font-size:24px;
    }

}


/* MOBILE */
@media (max-width: 600px) {

    .tile-container {
        gap:12px;
    }

    .tile {
        width:42vw;
        height:42vw;
        font-size:20px;
    }

}